From 421d4064e14ef580bedb7a77e6b4269ebda72a17 Mon Sep 17 00:00:00 2001
From: Sandy McFadden <sandy.mcfadden@automattic.com>
Date: Fri, 30 Jul 2021 12:59:02 -0300
Subject: [PATCH 1/4] Start of updating note list components to use CSS
 variables for colors

---
 lib/note-list/index.tsx     |  4 +--
 lib/note-list/no-notes.tsx  |  2 +-
 lib/note-list/note-cell.tsx |  8 ++---
 lib/note-list/style.scss    | 59 +++++++++++++++++++++----------------
 scss/theme.scss             | 45 ----------------------------
 5 files changed, 41 insertions(+), 77 deletions(-)

diff --git a/lib/note-list/index.tsx b/lib/note-list/index.tsx
index d39f1842f..efc007fed 100644
--- a/lib/note-list/index.tsx
+++ b/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"
diff --git a/lib/note-list/no-notes.tsx b/lib/note-list/no-notes.tsx
index b1c5ae02b..48843bfb9 100644
--- a/lib/note-list/no-notes.tsx
+++ b/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>
diff --git a/lib/note-list/note-cell.tsx b/lib/note-list/note-cell.tsx
index 7447cc74e..0a50a5648 100644
--- a/lib/note-list/note-cell.tsx
+++ b/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,7 +140,7 @@ 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)
@@ -148,7 +148,7 @@ export class NoteCell extends Component<Props> {
               </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', {
diff --git a/lib/note-list/style.scss b/lib/note-list/style.scss
index 374d0d8c4..fd0f1946e 100644
--- a/lib/note-list/style.scss
+++ b/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;
@@ -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,25 @@ body[data-theme='dark'] {
     overflow: hidden;
   }
 
+  .note-list-item-excerpt {
+    color: var(--foreground-color);
+  }
+
+  .note-list-item-title {
+    color: var(--primary-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);
+    }
   }
 
   &:not(.note-list-item-pinned):hover .note-list-item-pinner {
@@ -191,7 +192,7 @@ body[data-theme='dark'] {
 
   &:not(.note-list-item-selected) {
     &:hover {
-      background: var(--secondary-highlight-color);
+      background: var(--secondary-color);
     }
   }
 
@@ -203,7 +204,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,10 +227,6 @@ 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 {
@@ -243,4 +240,16 @@ body[data-theme='dark'] {
       overflow: hidden;
     }
   }
+
+  &.note-list-item-pinned:not(.note-list-item-selected) {
+    .note-list-item-pinner {
+      color: var(--accent-color);
+    }
+  }
+
+  &.note-list-item-selected {
+    &.note-list-item-pinned .note-list-item-pinner {
+      color: var(--primary-color);
+    }
+  }
 }
diff --git a/scss/theme.scss b/scss/theme.scss
index 8dd025291..0a88c16df 100644
--- a/scss/theme.scss
+++ b/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';
 

From 0fc81af395c647c921b3d7f5db0183f504d08c9a Mon Sep 17 00:00:00 2001
From: Sandy McFadden <sandy.mcfadden@automattic.com>
Date: Fri, 30 Jul 2021 13:43:48 -0300
Subject: [PATCH 2/4] Fix search results colors

---
 lib/note-list/style.scss       | 2 +-
 lib/tag-suggestions/style.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/note-list/style.scss b/lib/note-list/style.scss
index fd0f1946e..cd9c7fba2 100644
--- a/lib/note-list/style.scss
+++ b/lib/note-list/style.scss
@@ -60,7 +60,7 @@
     height: 100vh;
   }
 
-  .search-match {
+  .note-list-item .search-match {
     background-color: transparent;
     color: var(--accent-color);
     padding-left: 0;
diff --git a/lib/tag-suggestions/style.scss b/lib/tag-suggestions/style.scss
index 295efc58e..9d2314067 100644
--- a/lib/tag-suggestions/style.scss
+++ b/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;

From b55d4681a1b6e698aeed24aee8c1dd672912a310 Mon Sep 17 00:00:00 2001
From: Sandy McFadden <sandy.mcfadden@automattic.com>
Date: Fri, 30 Jul 2021 13:59:13 -0300
Subject: [PATCH 3/4] Fix CSS linting error

---
 lib/note-list/style.scss | 29 ++++++++++++-----------------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/lib/note-list/style.scss b/lib/note-list/style.scss
index cd9c7fba2..b3dd38437 100644
--- a/lib/note-list/style.scss
+++ b/lib/note-list/style.scss
@@ -169,23 +169,6 @@
     color: var(--foreground-color);
   }
 
-  .note-list-item-title {
-    color: var(--primary-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);
-    }
-  }
-
   &:not(.note-list-item-pinned):hover .note-list-item-pinner {
     color: var(--foreground-color);
   }
@@ -234,6 +217,7 @@
     justify-content: space-between;
     font-size: 16px;
     font-weight: 500;
+    color: var(--primary-color);
 
     & span {
       text-overflow: ellipsis;
@@ -248,6 +232,17 @@
   }
 
   &.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);
     }

From 378bf3585a8d675e7abf0b41f1af92fe21e74272 Mon Sep 17 00:00:00 2001
From: Sandy McFadden <sandy.mcfadden@automattic.com>
Date: Sat, 31 Jul 2021 22:12:00 -0300
Subject: [PATCH 4/4] Fix note list hover color

---
 lib/note-list/style.scss | 2 +-
 scss/_variables.scss     | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/lib/note-list/style.scss b/lib/note-list/style.scss
index b3dd38437..ad1c536ad 100644
--- a/lib/note-list/style.scss
+++ b/lib/note-list/style.scss
@@ -175,7 +175,7 @@
 
   &:not(.note-list-item-selected) {
     &:hover {
-      background: var(--secondary-color);
+      background: var(--alternative-highlight-color);
     }
   }
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index e82117713..16f95d1f0 100644
--- a/scss/_variables.scss
+++ b/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
 }