Update note list components to use CSS variables for colors

lib/note-list/index.tsx

@@ -74,7 +74,7 @@ const renderNote = (
         rowIndex={index}
       >
         <div className="note-list is-empty" style={{ ...style, height: 200 }}>
-          <span className="note-list-placeholder theme-color-fg">No Notes</span>
+          <span className="note-list-placeholder">No Notes</span>
         </div>
       </CellMeasurer>
     );
@@ -310,7 +310,7 @@ export class NoteList extends Component<Props> {
     const isEmptyList = compositeNoteList.length === 0;
 
     const emptyTrashButton = (
-      <div className="note-list-empty-trash theme-color-border">
+      <div className="note-list-empty-trash">
         <button
           type="button"
           className="button button-borderless button-danger"

lib/note-list/no-notes.tsx

@@ -80,7 +80,7 @@ const NoNotes = () => {
   });
 
   return (
-    <div className="note-list-placeholder theme-color-fg">
+    <div className="note-list-placeholder">
       <div className="no-notes-icon">{icon}</div>
       <div className="no-notes-message">{message}</div>
       <div className="no-notes-button">{hasLoaded && button}</div>

lib/note-list/note-cell.tsx

@@ -119,7 +119,7 @@ export class NoteCell extends Component<Props> {
 
           <button
             aria-label={`Edit note ${title}`}
-            className="note-list-item-text theme-color-border focus-visible"
+            className="note-list-item-text focus-visible"
             onClick={() => openNote(noteId)}
           >
             <div className="note-list-item-title">
@@ -128,7 +128,7 @@ export class NoteCell extends Component<Props> {
               </span>
             </div>
             {'expanded' === displayMode && preview.length > 0 && (
-              <div className="note-list-item-excerpt theme-color-fg-dim">
+              <div className="note-list-item-excerpt">
                 {withCheckboxCharacters(preview)
                   .split('\n')
                   .map((line, index) => (
@@ -140,15 +140,15 @@ export class NoteCell extends Component<Props> {
               </div>
             )}
             {'comfy' === displayMode && preview.length > 0 && (
-              <div className="note-list-item-excerpt theme-color-fg-dim">
+              <div className="note-list-item-excerpt">
                 {decorateWith(
                   decorators,
                   withCheckboxCharacters(preview).slice(0, 200)
                 )}
               </div>
             )}
           </button>
-          <div className="note-list-item-status-right theme-color-border">
+          <div className="note-list-item-status-right">
             {hasPendingChanges && (
               <span
                 className={classNames('note-list-item-pending-changes', {

lib/note-list/style.scss

@@ -25,6 +25,7 @@
   flex: 1 1 auto;
   overflow: hidden;
   background: inherit;
+  background-color: var(--background-color);
 
   .comfy .note-list-item-excerpt {
     white-space: nowrap;
@@ -59,7 +60,7 @@
     height: 100vh;
   }
 
-  .search-match {
+  .note-list-item .search-match {
     background-color: transparent;
     color: var(--accent-color);
     padding-left: 0;
@@ -92,23 +93,6 @@
   }
 }
 
-body[data-theme='dark'] {
-  .note-list-placeholder {
-    .no-notes-icon,
-    .no-notes-message {
-      color: var(--foreground-color);
-    }
-
-    button {
-      color: var(--accent-color);
-    }
-  }
-
-  .note-list .search-match {
-    color: var(--accent-color);
-  }
-}
-
 .note-list-items {
   flex: 1 1 auto;
   overflow: hidden;
@@ -122,7 +106,7 @@ body[data-theme='dark'] {
 .note-list-empty-trash {
   flex: none;
   padding: 10px 20px;
-  border-top: 1px solid;
+  border-top: 1px solid var(--secondary-color);
   text-align: center;
 }
 
@@ -170,7 +154,7 @@ body[data-theme='dark'] {
     flex: 1 1 auto;
     overflow: hidden;
     padding: 9px 0;
-    border-bottom: 1px solid;
+    border-bottom: 1px solid var(--secondary-color);
   }
 
   .note-list-item-title,
@@ -181,8 +165,8 @@ body[data-theme='dark'] {
     overflow: hidden;
   }
 
-  &.note-list-item-selected {
-    background: var(--highlight-color);
+  .note-list-item-excerpt {
+    color: var(--foreground-color);
   }
 
   &:not(.note-list-item-pinned):hover .note-list-item-pinner {
@@ -191,7 +175,7 @@ body[data-theme='dark'] {
 
   &:not(.note-list-item-selected) {
     &:hover {
-      background: var(--secondary-highlight-color);
+      background: var(--alternative-highlight-color);
     }
   }
 
@@ -203,7 +187,7 @@ body[data-theme='dark'] {
   .note-list-item-status-right {
     display: flex;
     padding: 9px 6px 0 0; // we want 10px total to the right side, but the icon has 4px padding already
-    border-bottom: 1px solid;
+    border-bottom: 1px solid var(--secondary-color);
   }
 
   .note-list-item-pending-changes,
@@ -226,21 +210,41 @@ body[data-theme='dark'] {
       animation: none;
       fill: var(--tertiary-color);
     }
-
-    body[data-theme='dark'] &.is-offline svg {
-      fill: var(--tertiary-color);
-    }
   }
 
   .note-list-item-title {
     display: flex;
     justify-content: space-between;
     font-size: 16px;
     font-weight: 500;
+    color: var(--primary-color);
 
     & span {
       text-overflow: ellipsis;
       overflow: hidden;
     }
   }
+
+  &.note-list-item-pinned:not(.note-list-item-selected) {
+    .note-list-item-pinner {
+      color: var(--accent-color);
+    }
+  }
+
+  &.note-list-item-selected {
+    background: var(--highlight-color);
+
+    .note-list-item-excerpt {
+      color: var(--primary-color);
+    }
+
+    .note-list-item-pending-changes,
+    .note-list-item-published-icon {
+      color: var(--primary-color);
+    }
+
+    &.note-list-item-pinned .note-list-item-pinner {
+      color: var(--primary-color);
+    }
+  }
 }

lib/tag-suggestions/style.scss

@@ -5,7 +5,7 @@
     list-style-type: none;
     padding: 0;
     margin: 0;
-    border-bottom: 1px solid;
+    border-bottom: 1px solid var(--secondary-color);
 
     .tag-suggestion-row {
       height: 36px;

scss/_variables.scss

@@ -60,6 +60,7 @@ body[data-theme='light'] {
   --primary-tag-chip-color: #dcdcde; // $studio-gray-5
   --secondary-tag-chip-color: #facfd2; // $studio-red-5
   --settings-fg-color: #2c3338; // $studio-gray-80
+  --alternative-highlight-color: #f6f7f7; // $studio-gray-0;
 }
 
 body[data-theme='dark'] {
@@ -85,4 +86,5 @@ body[data-theme='dark'] {
   --primary-tag-chip-color: #3c434a; // $studio-gray-70
   --secondary-tag-chip-color: #8a2424; // $studio-red-70
   --settings-fg-color: #dcdcde; // $studio-gray-5
+  --alternative-highlight-color: #2c3338; // $studio-gray-80
 }

scss/theme.scss

@@ -147,10 +147,6 @@ body[data-theme='light'] {
   .button-borderless {
     color: var(--accent-color);
   }
-
-  .note-list-item-pinned .note-list-item-pinner {
-    color: var(--accent-color);
-  }
 }
 
 .theme-light.theme-color-border {
@@ -264,47 +260,6 @@ body[data-theme='dark'] {
     color: var(--settings-fg-color);
   }
 
-  .note-list-header {
-    color: var(--foreground-color);
-  }
-
-  .note-list {
-    .note-list-item-selected {
-      background: var(--highlight-color);
-      .note-list-item-excerpt,
-      .note-list-item-published-icon,
-      .note-list-item-pending-changes {
-        color: var(--primary-color);
-      }
-      .note-list-item-pending-changes {
-        &.is-offline svg {
-          fill: var(--foreground-color);
-        }
-      }
-      &.note-list-item-pinned .note-list-item-pinner {
-        color: var(--primary-color);
-      }
-    }
-
-    .note-list-item-pinned:not(.note-list-item-selected) {
-      .note-list-item-pinner {
-        color: var(--accent-color);
-      }
-    }
-
-    .note-list-item:not(.note-list-item-pinned):hover {
-      .note-list-item-pinner {
-        color: rgba(255, 255, 255, 0.4);
-      }
-    }
-
-    .note-list-item:not(.note-list-item-selected) {
-      &:hover {
-        background: var(--secondary-color);
-      }
-    }
-  }
-
   .note-detail-markdown {
     @import '../node_modules/highlight.js/scss/solarized-dark.scss';