Finish cleaning up CSS from move to CSS variables for colors (#3028)

This is a continuation of moving to CSS variables for colors within the app.
This removes the remaining bits of theme classes and CSS code throughout the app.
It then required a bit of cleanup to fix some of the colors.

lib/auth/index.tsx

@@ -95,12 +95,12 @@ export class Auth extends Component<Props> {
           {isElectron && isMac && <div className="login__draggable-area" />}
           <div className="accountRequested">
             <MailIcon />
-            <p className="accountRequested__message theme-color-fg">
+            <p className="accountRequested__message">
               We&apos;ve sent an email to{' '}
               <strong>{this.props.emailSentTo}</strong>. Please check your inbox
               and follow the instructions.
             </p>
-            <p className="accountRequested__footer theme-color-fg-dim">
+            <p className="accountRequested__footer">
               Didn&apos;t get an email? You may already have an account
               associated with this email address. Contact{' '}
               <a
@@ -213,10 +213,7 @@ export class Auth extends Component<Props> {
               {passwordErrorMessage}
             </p>
           )}
-          <label
-            className="login__field theme-color-border"
-            htmlFor="login__field-username"
-          >
+          <label className="login__field" htmlFor="login__field-username">
             Email
           </label>
           <input
@@ -234,10 +231,7 @@ export class Auth extends Component<Props> {
           />
           {!isCreatingAccount && (
             <>
-              <label
-                className="login__field theme-color-border"
-                htmlFor="login__field-password"
-              >
+              <label className="login__field" htmlFor="login__field-password">
                 Password
               </label>
               <input

lib/auth/style.scss

@@ -2,6 +2,10 @@
   z-index: 1000;
 }
 
+body {
+  background-color: var(--background-color);
+}
+
 .login.is-electron {
   input.validate:invalid {
     box-shadow: 0 0 1.5px 1px var(--tertiary-highlight-color);
@@ -131,7 +135,7 @@
   }
 
   .or-line {
-    border-bottom: 1px solid var(--secondary-color);
+    border-bottom: 1px solid var(--disabled-text-color);
     margin: -20px auto;
     max-width: 320px;
     text-align: center;
@@ -174,52 +178,3 @@
     line-height: 20px;
   }
 }
-
-body[data-theme='dark'] .login {
-  h1 {
-    color: var(--primary-color);
-  }
-
-  .login__forgot,
-  .login__signup,
-  .terms {
-    color: var(--foreground-color);
-  }
-
-  .login__signup a,
-  .login__auth-message a,
-  .terms a,
-  .login__forgot {
-    color: var(--accent-color);
-  }
-
-  .login__auth-message.is-error {
-    color: var(--tertiary-highlight-color);
-  }
-
-  .or {
-    background: var(--background-color);
-    color: var(--foreground-color);
-  }
-  .or-line {
-    border-color: var(--primary-color);
-  }
-
-  svg.icon-mail {
-    color: var(--foreground-color);
-  }
-  input {
-    border-color: var(--secondary-accent-color);
-
-    &:read-only,
-    &:disabled {
-      border-color: var(--readonly-input-highlight-color);
-      background-color: var(--readonly-input-color);
-    }
-
-    &:focus {
-      border-color: var(--accent-color);
-      box-shadow: 0 0 0 1px var(--accent-color);
-    }
-  }
-}

lib/components/progress-bar/style.scss

@@ -1,10 +1,5 @@
 .progress-bar {
-  @at-root body[data-theme='light'] & {
-    background-color: var(--secondary-color);
-  }
-  @at-root body[data-theme='dark'] & {
-    background-color: var(--secondary-color);
-  }
+  background-color: var(--secondary-color);
 }
 
 .progress-bar__bar {

lib/components/spinner/style.scss

@@ -1,10 +1,5 @@
 .spinner__circle {
-  @at-root body[data-theme='light'] & {
-    color: var(--secondary-color);
-  }
-  @at-root body[data-theme='dark'] & {
-    color: var(--secondary-color);
-  }
+  color: var(--secondary-color);
 
   &.is-white {
     color: var(--background-color);

lib/components/tag-chip/style.scss

@@ -1,4 +1,5 @@
 .tag-chip {
+  color: var(--primary-color);
   flex: none;
   margin: 2px 8px 6px 0;
   padding: 1px 14px 3px;
@@ -48,19 +49,3 @@
     }
   }
 }
-
-body[data-theme='dark'] {
-  .tag-chip {
-    background: var(--primary-tag-chip-color);
-    color: var(--primary-color);
-
-    &.deleted {
-      background: var(--secondary-tag-chip-color);
-    }
-  }
-
-  .remove-tag-icon {
-    background-color: var(--foreground-color);
-    color: var(--background-color);
-  }
-}

lib/connection-status/index.tsx

@@ -18,7 +18,7 @@ type Props = StateProps;
 export const ConnectionStatus: FunctionComponent<Props> = ({
   connectionStatus,
 }) => (
-  <div className="navigation-bar__footer-item theme-color-fg-dim">
+  <div className="navigation-bar__footer-item">
     <Tooltip
       enterDelay={200}
       classes={{ tooltip: 'icon-button__tooltip' }}

lib/dialogs/import/source-importer/style.scss

@@ -13,6 +13,7 @@
 
     button.disabled {
       border-radius: 4px;
+      color: var(--primary-button-fg-color);
       padding: 6px 14px;
       margin-top: 14px;
       line-height: 16px;
@@ -68,15 +69,3 @@
     margin-bottom: 0;
   }
 }
-
-body[data-theme='dark'] {
-  .source-importer {
-    p {
-      color: var(--primary-color);
-    }
-    button.disabled {
-      background-color: var(--tertiary-color);
-      color: var(--primary-color);
-    }
-  }
-}

lib/dialogs/keybindings/style.scss

@@ -21,6 +21,7 @@
   }
 
   kbd {
+    border: 1px solid var(--primary-color);
     border-radius: 5px;
     margin: 4px;
     padding: 0 5px;
@@ -32,14 +33,6 @@
   }
 }
 
-body[data-theme='light'] .keybindings kbd {
-  border: 1px solid black;
-}
-
-body[data-theme='dark'] .keybindings kbd {
-  border: 1px solid white;
-}
-
 .keybindings__key-item {
   display: flex;
   align-items: baseline;

lib/dialogs/unsynchronized/style.scss

@@ -83,13 +83,3 @@
     }
   }
 }
-
-body[data-theme='dark'] .logoutConfirmation .dialog {
-  .change-list {
-    border-color: var(--secondary-color);
-  }
-
-  .export-unsynchronized {
-    color: var(--accent-color);
-  }
-}

lib/note-content-editor.tsx

@@ -578,7 +578,7 @@ class NoteContentEditor extends Component<Props> {
       inherit: true,
       rules: [{ background: 'FFFFFF', foreground: '#2c3338' }],
       colors: {
-        'editor.foreground': '#2c3338', // $studio-gray-80 AKA theme-color-fg
+        'editor.foreground': '#2c3338', // $studio-gray-80
         'editor.background': '#ffffff',
         'editor.selectionBackground': '#ced9f2', // $studio-simplenote-blue-5
         'scrollbarSlider.activeBackground': '#8c8f94', // $studio-gray-30

lib/note-detail/style.scss

@@ -82,9 +82,14 @@
   }
 }
 
-.note-detail-markdown {
+body[data-theme='light'] .note-detail-markdown {
   @import '../node_modules/highlight.js/scss/solarized-light.scss';
+}
+body[data-theme='dark'] .note-detail-markdown {
+  @import '../node_modules/highlight.js/scss/solarized-dark.scss';
+}
 
+.note-detail-markdown {
   overflow: visible;
   -webkit-overflow-scrolling: touch;
 

lib/note-toolbar/style.scss

@@ -10,7 +10,7 @@
 .note-toolbar-wrapper .offline-badge {
   border: solid 1px var(--secondary-color);
   border-radius: 2px;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 4px 0 var(--readonly-input-color);
   color: var(--foreground-color);
   font-size: 12px;
   height: 24px;
@@ -20,12 +20,6 @@
   width: 64px;
 }
 
-body[data-theme='dark'] .note-toolbar-wrapper .offline-badge {
-  border: solid 1px var(--secondary-color);
-  box-shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.02);
-  color: var(--tertiary-color);
-}
-
 .note-toolbar {
   display: flex;
   justify-content: space-between;

lib/search-results-bar/style.scss

@@ -1,4 +1,5 @@
 .search-results {
+  color: var(--primary-color);
   height: $toolbar-height;
   line-height: $toolbar-height;
   z-index: 100;

lib/tag-email-tooltip/style.scss

@@ -24,7 +24,7 @@
 
 .tag-email-tooltip__inside {
   padding: 6px 8px;
-  color: var(--background-color);
+  color: #fff;
   text-align: center;
   border-radius: 3px;
   background-color: #000;

lib/tag-list/style.scss

@@ -13,6 +13,15 @@
     background-color: var(--highlight-color);
   }
 
+  .icon-button {
+    &.button-trash {
+      color: var(--accent-color);
+    }
+    &.button-reorder {
+      color: var(--secondary-accent-color);
+    }
+  }
+
   .icon-button:last-child {
     margin-right: 10px;
   }
@@ -119,34 +128,6 @@ input.tag-list-input {
   }
 }
 
-body[data-theme='dark'] {
-  .icon-button {
-    &.button-reorder {
-      color: var(--tertiary-color);
-    }
-    &.button-trash {
-      color: var(--accent-color);
-    }
-  }
-
-  .tag-list-item {
-    &:hover {
-      background-color: var(--secondary-color);
-    }
-  }
-}
-
-body[data-theme='light'] {
-  .icon-button {
-    &.button-trash {
-      color: var(--accent-color);
-    }
-    &.button-reorder {
-      color: var(--secondary-accent-color);
-    }
-  }
-}
-
 .is-electron .tag-list-items {
   padding-bottom: 2px;
   padding-top: 2px;

scss/_general.scss

@@ -77,6 +77,7 @@ optgroup {
 .search-match {
   background-color: var(--highlight-color);
   border-radius: 3px;
+  color: var(--primary-color);
   padding-left: 2px;
   padding-right: 2px;
 
@@ -88,8 +89,3 @@ optgroup {
 .MuiTooltip-tooltip.icon-button__tooltip {
   background-color: var(--tertiary-color);
 }
-
-body[data-theme='dark'] .search-match {
-  background-color: var(--highlight-color);
-  color: var(--primary-color);
-}

scss/print.scss

@@ -3,8 +3,8 @@
     -ms-overflow-style: -ms-autohiding-scrollbar;
   }
 
-  body[data-theme='dark'] .theme-color-bg {
-    background-color: var(--primary-color);
+  body {
+    background-color: #fff;
   }
 
   .app-layout__note-column {
@@ -39,11 +39,7 @@
     max-width: 100%;
     width: 100%;
     color: $studio-black;
-
-    &.theme-color-fg {
-      color: $studio-black;
-      overflow-y: auto !important;
-    }
+    overflow-y: auto !important;
   }
 
   .note-content-plaintext {