Remove remaining theme CSS

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);

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/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

scss/theme.scss

@@ -122,177 +122,3 @@ span[dir='ltr'] {
     display: inherit;
   }
 }
-
-body[data-theme='light'] {
-  background-color: var(--background-color);
-  color: var(--foreground-color);
-
-  .theme-color-bg {
-    background-color: var(--background-color);
-  }
-  .theme-color-bg-lighter {
-    background-color: var(--background-color);
-  }
-  .theme-color-fg {
-    color: var(--primary-color);
-  }
-  .theme-color-fg-dim {
-    color: var(--foreground-color);
-  }
-  .theme-color-border,
-  &.theme-color-border,
-  .button {
-    border-color: var(--secondary-color);
-  }
-  .button-borderless {
-    color: var(--accent-color);
-  }
-}
-
-.theme-light.theme-color-border {
-  border-color: var(--secondary-color);
-}
-
-body[data-theme='dark'] {
-  background-color: var(--background-color);
-  color: var(--foreground-color);
-
-  .theme-color-bg {
-    background-color: var(--background-color);
-  }
-  .theme-color-bg-lighter {
-    background-color: var(--background-color);
-  }
-  .theme-color-fg {
-    color: var(--primary-color);
-  }
-  .theme-color-fg-dim {
-    color: var(--foreground-color);
-  }
-  .theme-color-border,
-  &.theme-color-border,
-  .button {
-    border-color: var(--secondary-color);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: var(--secondary-color);
-    border-color: var(--tertiary-color);
-  }
-  ::-webkit-scrollbar-thumb:hover {
-    background-color: var(--background-color);
-  }
-  ::-webkit-scrollbar-thumb:active {
-    background-color: var(--tertiary-color);
-  }
-
-  .button-borderless {
-    color: var(--accent-color);
-
-    &[disabled],
-    &:disabled {
-      svg[class^='icon-'] {
-        fill: var(--tertiary-color);
-      }
-    }
-  }
-
-  .icon-button,
-  a {
-    color: var(--foreground-color);
-  }
-  a.button {
-    color: var(--primary-color);
-  }
-
-  input {
-    color: var(--primary-color);
-  }
-
-  input,
-  textarea {
-    border-color: var(--secondary-accent-color);
-    background-color: transparent;
-  }
-
-  .checkbox-control-base {
-    border-color: var(--secondary-color);
-  }
-
-  .navigation-bar-item {
-    button {
-      color: var(--primary-color);
-    }
-    svg[class^='icon-'] {
-      fill: var(--foreground-color);
-    }
-  }
-
-  .navigation-bar-item.is-selected,
-  .tag-list-item.is-selected {
-    background-color: var(--highlight-color);
-
-    svg[class^='icon-'] {
-      fill: var(--primary-color);
-    }
-    button {
-      color: var(--primary-color);
-    }
-  }
-
-  .tag-field input {
-    background: transparent;
-
-    &::placeholder {
-      color: var(--foreground-color);
-    }
-  }
-
-  .search-decoration {
-    background-color: var(--search-highlight-color);
-  }
-  .selected-search {
-    background-color: var(--search-selection-color);
-    color: var(--background-color);
-  }
-
-  .settings-group p {
-    color: var(--settings-fg-color);
-  }
-
-  .note-detail-markdown {
-    @import '../node_modules/highlight.js/scss/solarized-dark.scss';
-
-    hr {
-      border-color: var(--secondary-color);
-    }
-
-    blockquote {
-      border-color: var(--secondary-color);
-    }
-
-    pre {
-      border-color: var(--secondary-color);
-    }
-
-    table {
-      th,
-      td {
-        border-color: var(--tertiary-color);
-      }
-      tr:nth-child(2n) {
-        background-color: var(--secondary-color);
-      }
-    }
-  }
-
-  .search-results {
-    color: var(--primary-color);
-    border-color: var(--secondary-color);
-    background-color: var(--background-color);
-
-    button svg {
-      fill: var(--accent-color);
-    }
-  }
-}