fix: use theme-modifiable colors (#658)

app/assets/icons/ic-check-bold.svg

@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M7.49995 17.0167L2.32495 11.8417L4.68328 9.48332L7.49995 12.3083L15.7333 4.06665L18.0916 6.42498L7.49995 17.0167Z" />
 </svg>

app/assets/icons/ic-check.svg

@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M17.5001 5.83345L7.50008 15.8334L2.91675 11.2501L4.09175 10.0751L7.50008 13.4751L16.3251 4.65845L17.5001 5.83345Z"/>
 </svg>

app/assets/javascripts/components/Button.tsx

@@ -9,9 +9,9 @@ const baseClass = `rounded px-4 py-1.75 font-bold text-sm fit-content`;
 type ButtonType = 'normal' | 'primary' | 'danger';
 
 const buttonClasses: { [type in ButtonType]: string } = {
-  normal: `${baseClass} bg-default color-text border-solid border-gray-300 border-1 focus:bg-contrast hover:bg-contrast`,
+  normal: `${baseClass} bg-default color-text border-neutral border-solid border-gray-300 border-1 focus:bg-contrast hover:bg-contrast`,
   primary: `${baseClass} no-border bg-info color-info-contrast hover:brightness-130 focus:brightness-130`,
-  danger: `${baseClass} bg-default color-danger border-solid border-gray-300 border-1 focus:bg-contrast hover:bg-contrast`,
+  danger: `${baseClass} bg-default color-danger border-neutral border-solid border-gray-300 border-1 focus:bg-contrast hover:bg-contrast`,
 };
 
 export const Button: FunctionComponent<{

app/assets/javascripts/components/DecoratedInput.tsx

@@ -28,13 +28,13 @@ export const DecoratedInput: FunctionalComponent<Props> = ({
   autocomplete = false,
 }) => {
   const baseClasses =
-    'rounded py-1.5 px-3 text-input my-1 h-8 flex flex-row items-center';
+    'rounded py-1.5 px-3 text-input my-1 h-8 flex flex-row items-center bg-contrast';
   const stateClasses = disabled
-    ? 'no-border bg-grey-5'
+    ? 'no-border'
     : 'border-solid border-1 border-gray-300';
   const classes = `${baseClasses} ${stateClasses} ${className}`;
 
-  const inputBaseClasses = 'w-full no-border color-black focus:shadow-none';
+  const inputBaseClasses = 'w-full no-border color-text focus:shadow-none bg-contrast';
   const inputStateClasses = disabled ? 'overflow-ellipsis' : '';
   return (
     <div className={`${classes} focus-within:ring-info`}>

app/assets/javascripts/components/Input.tsx

@@ -11,9 +11,9 @@ export const Input: FunctionalComponent<Props> = ({
   disabled = false,
   text,
 }) => {
-  const base = `rounded py-1.5 px-3 text-input my-1 h-8`;
+  const base = `rounded py-1.5 px-3 text-input my-1 h-8 bg-contrast`;
   const stateClasses = disabled
-    ? 'no-border bg-grey-5'
+    ? 'no-border'
     : 'border-solid border-1 border-gray-300';
   const classes = `${base} ${stateClasses} ${className}`;
   return (

app/assets/javascripts/components/shared/ModalDialog.tsx

@@ -33,11 +33,11 @@ export const ModalDialogLabel: FunctionComponent<{
 }> = ({ children, closeDialog }) => (
   <AlertDialogLabel className="">
     <div className="px-4 py-4 flex flex-row items-center">
-      <div className="flex-grow color-black text-lg font-bold">{children}</div>
+      <div className="flex-grow color-text text-lg font-bold">{children}</div>
       <IconButton
         focusable={true}
         title="Close"
-        className="color-grey-1 h-5 w-5"
+        className="color-neutral h-5 w-5"
         icon="close"
         onClick={() => closeDialog()}
       />
@@ -61,11 +61,11 @@ export const ModalDialogButtons: FunctionComponent = ({ children }) => (
     <div className="px-4 py-4 flex flex-row justify-end items-center">
       {children != undefined && Array.isArray(children)
         ? children.map((child, idx, arr) => (
-            <>
+          <>
-              {child}
+            {child}
-              {idx < arr.length - 1 ? <div className="min-w-3" /> : undefined}
+            {idx < arr.length - 1 ? <div className="min-w-3" /> : undefined}
-            </>
+          </>
-          ))
+        ))
         : children}
     </div>
   </>

app/assets/javascripts/preferences/components/Content.tsx

@@ -15,7 +15,7 @@ export const Text: FunctionComponent<{ className?: string }> = ({
 
 const buttonClasses = `block bg-default color-text rounded border-solid \
 border-1 border-gray-300 px-4 py-1.75 font-bold text-sm fit-content \
-focus:bg-contrast hover:bg-contrast `;
+focus:bg-contrast hover:bg-contrast border-neutral`;
 
 export const LinkButton: FunctionComponent<{
   label: string;

app/assets/javascripts/preferences/components/MenuItem.tsx

@@ -15,7 +15,7 @@ export const MenuItem: FunctionComponent<Props> = ({
   onClick,
 }) => (
   <div
-    className={`preferences-menu-item ${selected ? 'selected' : ''}`}
+    className={`preferences-menu-item select-none ${selected ? 'selected' : ''}`}
     onClick={(e) => {
       e.preventDefault();
       onClick();

app/assets/javascripts/preferences/components/PreferencesPane.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'preact';
 
 export const PreferencesPane: FunctionComponent = ({ children }) => (
-  <div className="color-black flex-grow flex flex-row overflow-y-auto min-h-0">
+  <div className="color-foreground flex-grow flex flex-row overflow-y-auto min-h-0">
     <div className="flex-grow flex flex-col py-6 items-center">
       <div className="w-125 max-w-125 flex flex-col">
         {children != undefined && Array.isArray(children)

app/assets/javascripts/preferences/panes/security-segments/Encryption.tsx

@@ -15,7 +15,7 @@ const EncryptionEnabled: FunctionComponent<{ appState: AppState }> = observer(({
   const archived = formatCount(count.archived, 'archived notes');
   const deleted = formatCount(count.deleted, 'trashed notes');
 
-  const checkIcon = <Icon className="success min-w-5 min-h-5" type="check-bold" />;
+  const checkIcon = <Icon className="success min-w-4 min-h-4" type="check-bold" />;
   const noteIcon = <Icon type="rich-text" className="min-w-5 min-h-5" />;
   const tagIcon = <Icon type="hashtag" className="min-w-5 min-h-5" />;
   const archiveIcon = <Icon type="archive" className="min-w-5 min-h-5" />;

app/assets/javascripts/preferences/panes/two-factor-auth/AuthAppInfoPopup.tsx

@@ -16,9 +16,8 @@ const DisclosureIconButton: FunctionComponent<{
   <DisclosureButton
     onMouseEnter={onMouseEnter}
     onMouseLeave={onMouseLeave}
-    className={`no-border cursor-pointer bg-transparent hover:brightness-130 p-0 ${
+    className={`no-border cursor-pointer bg-transparent hover:brightness-130 p-0 ${className ?? ''
-      className ?? ''
+      }`}
-    }`}
   >
     <Icon type={icon} />
   </DisclosureButton>
@@ -58,7 +57,7 @@ export const AuthAppInfoTooltip: FunctionComponent = () => {
         />
         <DisclosurePanel>
           <div
-            className={`bg-black color-white text-center rounded shadow-overlay 
+            className={`bg-inverted-default color-inverted-default text-center rounded shadow-overlay 
 py-1.5 px-2 absolute w-103 -top-10 -left-51`}
           >
             Some apps, like Google Authenticator, do not back up and restore

app/assets/javascripts/preferences/panes/two-factor-auth/Bullet.tsx

@@ -3,5 +3,5 @@ import { FunctionComponent } from 'preact';
 export const Bullet: FunctionComponent<{ className?: string }> = ({
   className = '',
 }) => (
-  <div className={`min-w-1 min-h-1 rounded-full bg-black ${className} mr-2`} />
+  <div className={`min-w-1 min-h-1 rounded-full bg-inverted-default ${className} mr-2`} />
 );

app/assets/stylesheets/_sn.scss

@@ -237,6 +237,14 @@
   border-color: var(--sn-stylekit-danger-color);
 }
 
+.bg-inverted-default {
+  background-color: var(--sn-stylekit-contrast-foreground-color);
+}
+
+.color-inverted-default {
+  color: var(--sn-stylekit-background-color);
+}
+
 .pt-1 {
   padding-top: 0.25rem;
 }
@@ -267,3 +275,7 @@
   padding-top: 2.25rem;
   padding-bottom: 2.25rem;
 }
+
+.select-none {
+  user-select: none;
+}