Bug 1727321 - Part 1 - Stop using color variables in links. r=thecount

The purpose of this stack of patches is to stop using color variables directly in newtab CSS in favour of the semantic variables defined in _theme.scss. That way, we can later refactor _theme.scss to use theme variables instead of hardcoded colors.

There's a lot of dead CSS/components in new tab. This stack of patches refactors dead code as well, mostly because it's not clear what is dead and what is not. I tried to keep things generally looking the same on visible surfaces, but there are some minor style differences in dead components and in asrouter devtools. I spoke to Mardak on Slack and he confirmed it would be okay to slightly change the look of dead components. Scott, I tagged you for review since you know what is dead and what is not.

Differential Revision: https://phabricator.services.mozilla.com/D124397

browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss

@@ -70,11 +70,7 @@ $excerpt-line-height: 20;
 
     &:hover {
       header {
-        @include dark-theme-only {
+        color: var(--newtab-link-primary-color);
-          color: $blue-40;
-        }
-
-        color: $blue-60;
       }
     }
 
@@ -84,21 +80,13 @@ $excerpt-line-height: 20;
       transition: none;
 
       header {
-        @include dark-theme-only {
+        color: var(--newtab-link-primary-color);
-          color: $blue-40;
-        }
-
-        color: $blue-60;
       }
     }
 
     &:active {
       header {
-        @include dark-theme-only {
+        color: var(--newtab-link-primary-active-color);
-          color: $blue-50;
-        }
-
-        color: $blue-70;
       }
     }
   }
@@ -189,10 +177,8 @@ $excerpt-line-height: 20;
     }
 
     .cta-link {
-      @include dark-theme-only {
+      color: var(--newtab-link-primary-color);
-        color: $blue-40;
+      fill: var(--newtab-link-primary-color);
-        fill: $blue-40;
-      }
 
       font-size: 15px;
       font-weight: 600;
@@ -202,28 +188,17 @@ $excerpt-line-height: 20;
       background-size: auto;
       background-position: right 1.5px;
       padding-right: 9px;
-      color: $blue-60;
-      fill: $blue-60;
 
       &:focus {
-        @include dark-theme-only {
+        box-shadow: $shadow-primary;
-          box-shadow: 0 0 0 1px $grey-80, 0 0 0 4px $blue-50-50;
-        }
 
-        box-shadow: 0 0 0 1px $white, 0 0 0 4px $blue-50-50;
         border-radius: 4px;
         outline: 0;
       }
 
       &:active {
-        @include dark-theme-only {
+        color: var(--newtab-link-primary-active-color);
-          color: $blue-50;
+        fill: var(--newtab-link-primary-active-color);
-          fill: $blue-50;
-          box-shadow: none;
-        }
-
-        color: $blue-70;
-        fill: $blue-70;
         box-shadow: none;
       }
 

browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSPrivacyModal/_DSPrivacyModal.scss

@@ -5,7 +5,7 @@
     margin: 0 0 8px;
     border: 0;
     padding: 0;
-    color: $blue-60;
+    color: var(--newtab-link-primary-color);
     width: max-content;
 
     &:hover {
@@ -15,7 +15,7 @@
 
     &::before {
       -moz-context-properties: fill;
-      fill: $blue-60;
+      fill: var(--newtab-link-primary-color);
       content: '';
       display: inline-block;
       width: 16px;

browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSTextPromo/_DSTextPromo.scss

@@ -69,7 +69,7 @@
 }
 
 .ds-chevron-link {
-  color: $blue-60;
+  color: var(--newtab-link-primary-color);
   display: inline-block;
   outline: 0;
 
@@ -78,18 +78,10 @@
   }
 
   &:active {
-    @include dark-theme-only {
+    color: var(--newtab-link-primary-active-color);
-      color: $blue-50;
-    }
-
-    color: $blue-70;
 
     &::after {
-      @include dark-theme-only {
+      background-color: var(--newtab-link-primary-active-color);
-        background-color: $blue-50;
-      }
-
-      background-color: $blue-70;
     }
   }
 
@@ -103,13 +95,9 @@
   }
 
   &::after {
-    @include dark-theme-only {
+    background-color: var(--newtab-link-primary-color);
-      background-color: $blue-40;
-    }
-
     content: ' ';
     mask: url('chrome://global/skin/icons/arrow-right-12.svg') 0 -8px no-repeat;
-    background-color: $blue-60;
     margin: 0 0 0 4px;
     width: 5px;
     height: 8px;

browser/components/newtab/content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss

@@ -80,19 +80,11 @@ $card-header-in-hero-line-height: 20;
     }
 
     &:hover .meta header {
-      @include dark-theme-only {
+      color: var(--newtab-link-primary-color);
-        color: $blue-40;
-      }
-
-      color: $blue-60;
     }
 
     &:active .meta header {
-      @include dark-theme-only {
+      color: var(--newtab-link-primary-active-color);
-        color: $blue-40;
-      }
-
-      color: $blue-70;
     }
 
     .img-wrapper {
@@ -134,11 +126,7 @@ $card-header-in-hero-line-height: 20;
       }
 
       .context {
-        @include dark-theme-only {
+        color: var(--newtab-link-secondary-color);
-          color: $teal-10;
-        }
-
-        color: $teal-70;
       }
 
       .source {
@@ -254,20 +242,20 @@ $card-header-in-hero-line-height: 20;
             background: none;
 
             .title {
-              color: $blue-40;
+              color: var(--newtab-link-primary-color);
             }
           }
         }
 
         &:active .title {
           @include dark-theme-only {
-            color: $blue-50;
+            color: var(--newtab-link-primary-active-color);
           }
         }
 
         .title {
           @include dark-theme-only {
-            color: $white;
+            color: var(--newtab-text-primary-color);
           }
 
           @include limit-visible-lines(3, 20, 14);

browser/components/newtab/content-src/components/DiscoveryStreamComponents/List/_List.scss

@@ -105,11 +105,7 @@ $item-line-height: 20;
     padding-inline-start: $counter-padded-size;
 
     &::before {
-      @include dark-theme-only {
+      background-color: var(--newtab-link-secondary-color);
-        background-color: $teal-70;
-      }
-
-      background-color: $pocket-teal;
       border-radius: $counter-size;
       color: $white;
       content: counter(list);
@@ -124,19 +120,11 @@ $item-line-height: 20;
     }
 
     &:hover::before {
-      @include dark-theme-only {
+      background-color: var(--newtab-link-primary-color);
-        background-color: $blue-40;
-      }
-
-      background-color: $blue-40;
     }
 
     &:active::before {
-      @include dark-theme-only {
+      background-color: var(--newtab-link-primary-active-color);
-        background-color: $blue-60;
-      }
-
-      background-color: $blue-70;
     }
   }
 }
@@ -259,13 +247,13 @@ $item-line-height: 20;
 
   &:hover {
     .ds-list-item-title {
-      color: $blue-40;
+      color: var(--newtab-link-primary-color);
     }
   }
 
   &:active {
     .ds-list-item-title {
-      color: $blue-70;
+      color: var(--newtab-link-primary-active-color);
     }
   }
 }

browser/components/newtab/content-src/styles/_theme.scss

@@ -32,6 +32,7 @@ body {
   --newtab-inner-box-shadow-color: #{$black-10};
 
   --newtab-link-primary-color: #{$blue-60};
+  --newtab-link-primary-active-color: #{$blue-70};
   --newtab-link-secondary-color: #{$teal-70};
   --newtab-text-conditional-color: #{$grey-60};
   --newtab-text-primary-color: #{$in-content-page-color};
@@ -127,6 +128,7 @@ body {
     --newtab-icon-secondary-color: #{$grey-10-40};
     --newtab-inner-box-shadow-color: #{$grey-10-20};
     --newtab-link-primary-color: #{$blue-40};
+    --newtab-link-primary-active-color: #{$blue-60};
     --newtab-link-secondary-color: #{$pocket-teal};
     --newtab-text-conditional-color: #{$grey-10};
     --newtab-text-primary-color: #{$in-content-page-color-dark};

browser/components/newtab/css/activity-stream-linux.css

@@ -44,6 +44,7 @@ body {
   --newtab-icon-secondary-color: rgba(12, 12, 13, 0.6);
   --newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1);
   --newtab-link-primary-color: #0060DF;
+  --newtab-link-primary-active-color: #003EAA;
   --newtab-link-secondary-color: #008EA4;
   --newtab-text-conditional-color: #4A4A4F;
   --newtab-text-primary-color: #15141a;
@@ -117,6 +118,7 @@ body[lwt-newtab-brighttext] {
   --newtab-icon-secondary-color: rgba(249, 249, 250, 0.4);
   --newtab-inner-box-shadow-color: rgba(249, 249, 250, 0.2);
   --newtab-link-primary-color: #45A1FF;
+  --newtab-link-primary-active-color: #0060DF;
   --newtab-link-secondary-color: #50BCB6;
   --newtab-text-conditional-color: #F9F9FA;
   --newtab-text-primary-color: #fbfbfe;
@@ -2948,16 +2950,10 @@ main.has-snippet {
 }
 
 .ds-hero .wrapper:hover .meta header {
-  color: #0060DF;
+  color: var(--newtab-link-primary-color);
-}
-[lwt-newtab-brighttext] .ds-hero .wrapper:hover .meta header {
-  color: #45A1FF;
 }
 .ds-hero .wrapper:active .meta header {
-  color: #003EAA;
+  color: var(--newtab-link-primary-active-color);
-}
-[lwt-newtab-brighttext] .ds-hero .wrapper:active .meta header {
-  color: #45A1FF;
 }
 .ds-hero .wrapper .img-wrapper {
   width: 100%;
@@ -2993,10 +2989,7 @@ main.has-snippet {
   margin: 0 0 4px;
 }
 .ds-hero .wrapper .meta .context {
-  color: #008EA4;
+  color: var(--newtab-link-secondary-color);
-}
-[lwt-newtab-brighttext] .ds-hero .wrapper .meta .context {
-  color: #A7FFFE;
 }
 .ds-hero .wrapper .meta .source {
   font-size: 13px;
@@ -3090,10 +3083,10 @@ main.has-snippet {
   background: none;
 }
 [lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card:hover .title {
-  color: #45A1FF;
+  color: var(--newtab-link-primary-color);
 }
 [lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card:active .title {
-  color: #0A84FF;
+  color: var(--newtab-link-primary-active-color);
 }
 .ds-column-9 .ds-hero .cards .ds-card .title, .ds-column-10 .ds-hero .cards .ds-card .title, .ds-column-11 .ds-hero .cards .ds-card .title, .ds-column-12 .ds-hero .cards .ds-card .title {
   font-size: 14px;
@@ -3101,7 +3094,7 @@ main.has-snippet {
   line-height: 20px;
 }
 [lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card .title {
-  color: #FFF;
+  color: var(--newtab-text-primary-color);
 }
 .ds-hero.empty {
   grid-template-columns: auto;
@@ -3206,7 +3199,7 @@ main.has-snippet {
   padding-inline-start: 41px;
 }
 .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link::before {
-  background-color: #50BCB6;
+  background-color: var(--newtab-link-secondary-color);
   border-radius: 32px;
   color: #FFF;
   content: counter(list);
@@ -3219,20 +3212,11 @@ main.has-snippet {
   text-align: center;
   width: 32px;
 }
-[lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link::before {
-  background-color: #008EA4;
-}
 .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:hover::before {
-  background-color: #45A1FF;
+  background-color: var(--newtab-link-primary-color);
-}
-[lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:hover::before {
-  background-color: #45A1FF;
 }
 .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:active::before {
-  background-color: #003EAA;
+  background-color: var(--newtab-link-primary-active-color);
-}
-[lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:active::before {
-  background-color: #0060DF;
 }
 
 .ds-list-borders {
@@ -3352,10 +3336,10 @@ main.has-snippet {
   box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15);
 }
 .ds-list-item:hover .ds-list-item-title {
-  color: #45A1FF;
+  color: var(--newtab-link-primary-color);
 }
 .ds-list-item:active .ds-list-item-title {
-  color: #003EAA;
+  color: var(--newtab-link-primary-active-color);
 }
 
 .ds-navigation {
@@ -3653,10 +3637,7 @@ main.has-snippet {
   flex-direction: column;
 }
 .ds-card .ds-card-link:hover header {
-  color: #0060DF;
+  color: var(--newtab-link-primary-color);
-}
-[lwt-newtab-brighttext] .ds-card .ds-card-link:hover header {
-  color: #45A1FF;
 }
 .ds-card .ds-card-link:focus {
   border: 0;
@@ -3665,16 +3646,10 @@ main.has-snippet {
   transition: none;
 }
 .ds-card .ds-card-link:focus header {
-  color: #0060DF;
+  color: var(--newtab-link-primary-color);
-}
-[lwt-newtab-brighttext] .ds-card .ds-card-link:focus header {
-  color: #45A1FF;
 }
 .ds-card .ds-card-link:active header {
-  color: #003EAA;
+  color: var(--newtab-link-primary-active-color);
-}
-[lwt-newtab-brighttext] .ds-card .ds-card-link:active header {
-  color: #0A84FF;
 }
 .ds-card.video-card .meta {
   margin-top: 4px;
@@ -3746,6 +3721,8 @@ main.has-snippet {
   background: rgba(12, 12, 13, 0.7);
 }
 .ds-card .meta .cta-link {
+  color: var(--newtab-link-primary-color);
+  fill: var(--newtab-link-primary-color);
   font-size: 15px;
   font-weight: 600;
   line-height: 24px;
@@ -3754,29 +3731,15 @@ main.has-snippet {
   background-size: auto;
   background-position: right 1.5px;
   padding-right: 9px;
-  color: #0060DF;
-  fill: #0060DF;
-}
-[lwt-newtab-brighttext] .ds-card .meta .cta-link {
-  color: #45A1FF;
-  fill: #45A1FF;
 }
 .ds-card .meta .cta-link:focus {
-  box-shadow: 0 0 0 1px #FFF, 0 0 0 4px rgba(10, 132, 255, 0.5);
+  box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color);
   border-radius: 4px;
   outline: 0;
 }
-[lwt-newtab-brighttext] .ds-card .meta .cta-link:focus {
-  box-shadow: 0 0 0 1px #2A2A2E, 0 0 0 4px rgba(10, 132, 255, 0.5);
-}
 .ds-card .meta .cta-link:active {
-  color: #003EAA;
+  color: var(--newtab-link-primary-active-color);
-  fill: #003EAA;
+  fill: var(--newtab-link-primary-active-color);
-  box-shadow: none;
-}
-[lwt-newtab-brighttext] .ds-card .meta .cta-link:active {
-  color: #0A84FF;
-  fill: #0A84FF;
   box-shadow: none;
 }
 .ds-card .meta .cta-link:hover {
@@ -4169,7 +4132,7 @@ main.has-snippet {
 }
 
 .ds-chevron-link {
-  color: #0060DF;
+  color: var(--newtab-link-primary-color);
   display: inline-block;
   outline: 0;
 }
@@ -4177,16 +4140,10 @@ main.has-snippet {
   text-decoration: underline;
 }
 .ds-chevron-link:active {
-  color: #003EAA;
+  color: var(--newtab-link-primary-active-color);
-}
-[lwt-newtab-brighttext] .ds-chevron-link:active {
-  color: #0A84FF;
 }
 .ds-chevron-link:active::after {
-  background-color: #003EAA;
+  background-color: var(--newtab-link-primary-active-color);
-}
-[lwt-newtab-brighttext] .ds-chevron-link:active::after {
-  background-color: #0A84FF;
 }
 .ds-chevron-link:focus {
   box-shadow: 0 0 0 2px #FFF, 0 0 0 5px rgba(10, 132, 255, 0.5);
@@ -4196,18 +4153,15 @@ main.has-snippet {
   box-shadow: 0 0 0 2px #2A2A2E, 0 0 0 5px rgba(10, 132, 255, 0.5);
 }
 .ds-chevron-link::after {
+  background-color: var(--newtab-link-primary-color);
   content: " ";
   mask: url("chrome://global/skin/icons/arrow-right-12.svg") 0 -8px no-repeat;
-  background-color: #0060DF;
   margin: 0 0 0 4px;
   width: 5px;
   height: 8px;
   text-decoration: none;
   display: inline-block;
 }
-[lwt-newtab-brighttext] .ds-chevron-link::after {
-  background-color: #45A1FF;
-}
 
 .ds-signup {
   max-width: 300px;
@@ -4263,7 +4217,7 @@ main.has-snippet {
   margin: 0 0 8px;
   border: 0;
   padding: 0;
-  color: #0060DF;
+  color: var(--newtab-link-primary-color);
   width: max-content;
 }
 .ds-privacy-modal .modal-link:hover {
@@ -4272,7 +4226,7 @@ main.has-snippet {
 }
 .ds-privacy-modal .modal-link::before {
   -moz-context-properties: fill;
-  fill: #0060DF;
+  fill: var(--newtab-link-primary-color);
   content: "";
   display: inline-block;
   width: 16px;

browser/components/newtab/css/activity-stream-mac.css

@@ -48,6 +48,7 @@ body {
   --newtab-icon-secondary-color: rgba(12, 12, 13, 0.6);
   --newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1);
   --newtab-link-primary-color: #0060DF;
+  --newtab-link-primary-active-color: #003EAA;
   --newtab-link-secondary-color: #008EA4;
   --newtab-text-conditional-color: #4A4A4F;
   --newtab-text-primary-color: #15141a;
@@ -121,6 +122,7 @@ body[lwt-newtab-brighttext] {
   --newtab-icon-secondary-color: rgba(249, 249, 250, 0.4);
   --newtab-inner-box-shadow-color: rgba(249, 249, 250, 0.2);
   --newtab-link-primary-color: #45A1FF;
+  --newtab-link-primary-active-color: #0060DF;
   --newtab-link-secondary-color: #50BCB6;
   --newtab-text-conditional-color: #F9F9FA;
   --newtab-text-primary-color: #fbfbfe;
@@ -2952,16 +2954,10 @@ main.has-snippet {
 }
 
 .ds-hero .wrapper:hover .meta header {
-  color: #0060DF;
+  color: var(--newtab-link-primary-color);
-}
-[lwt-newtab-brighttext] .ds-hero .wrapper:hover .meta header {
-  color: #45A1FF;
 }
 .ds-hero .wrapper:active .meta header {
-  color: #003EAA;
+  color: var(--newtab-link-primary-active-color);
-}
-[lwt-newtab-brighttext] .ds-hero .wrapper:active .meta header {
-  color: #45A1FF;
 }
 .ds-hero .wrapper .img-wrapper {
   width: 100%;
@@ -2997,10 +2993,7 @@ main.has-snippet {
   margin: 0 0 4px;
 }
 .ds-hero .wrapper .meta .context {
-  color: #008EA4;
+  color: var(--newtab-link-secondary-color);
-}
-[lwt-newtab-brighttext] .ds-hero .wrapper .meta .context {
-  color: #A7FFFE;
 }
 .ds-hero .wrapper .meta .source {
   font-size: 13px;
@@ -3094,10 +3087,10 @@ main.has-snippet {
   background: none;
 }
 [lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card:hover .title {
-  color: #45A1FF;
+  color: var(--newtab-link-primary-color);
 }
 [lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card:active .title {
-  color: #0A84FF;
+  color: var(--newtab-link-primary-active-color);
 }
 .ds-column-9 .ds-hero .cards .ds-card .title, .ds-column-10 .ds-hero .cards .ds-card .title, .ds-column-11 .ds-hero .cards .ds-card .title, .ds-column-12 .ds-hero .cards .ds-card .title {
   font-size: 14px;
@@ -3105,7 +3098,7 @@ main.has-snippet {
   line-height: 20px;
 }
 [lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card .title {
-  color: #FFF;
+  color: var(--newtab-text-primary-color);
 }
 .ds-hero.empty {
   grid-template-columns: auto;
@@ -3210,7 +3203,7 @@ main.has-snippet {
   padding-inline-start: 41px;
 }
 .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link::before {
-  background-color: #50BCB6;
+  background-color: var(--newtab-link-secondary-color);
   border-radius: 32px;
   color: #FFF;
   content: counter(list);
@@ -3223,20 +3216,11 @@ main.has-snippet {
   text-align: center;
   width: 32px;
 }
-[lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link::before {
-  background-color: #008EA4;
-}
 .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:hover::before {
-  background-color: #45A1FF;
+  background-color: var(--newtab-link-primary-color);
-}
-[lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:hover::before {
-  background-color: #45A1FF;
 }
 .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:active::before {
-  background-color: #003EAA;
+  background-color: var(--newtab-link-primary-active-color);
-}
-[lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:active::before {
-  background-color: #0060DF;
 }
 
 .ds-list-borders {
@@ -3356,10 +3340,10 @@ main.has-snippet {
   box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15);
 }
 .ds-list-item:hover .ds-list-item-title {
-  color: #45A1FF;
+  color: var(--newtab-link-primary-color);
 }
 .ds-list-item:active .ds-list-item-title {
-  color: #003EAA;
+  color: var(--newtab-link-primary-active-color);
 }
 
 .ds-navigation {
@@ -3657,10 +3641,7 @@ main.has-snippet {
   flex-direction: column;
 }
 .ds-card .ds-card-link:hover header {
-  color: #0060DF;
+  color: var(--newtab-link-primary-color);
-}
-[lwt-newtab-brighttext] .ds-card .ds-card-link:hover header {
-  color: #45A1FF;
 }
 .ds-card .ds-card-link:focus {
   border: 0;
@@ -3669,16 +3650,10 @@ main.has-snippet {
   transition: none;
 }
 .ds-card .ds-card-link:focus header {
-  color: #0060DF;
+  color: var(--newtab-link-primary-color);
-}
-[lwt-newtab-brighttext] .ds-card .ds-card-link:focus header {
-  color: #45A1FF;
 }
 .ds-card .ds-card-link:active header {
-  color: #003EAA;
+  color: var(--newtab-link-primary-active-color);
-}
-[lwt-newtab-brighttext] .ds-card .ds-card-link:active header {
-  color: #0A84FF;
 }
 .ds-card.video-card .meta {
   margin-top: 4px;
@@ -3750,6 +3725,8 @@ main.has-snippet {
   background: rgba(12, 12, 13, 0.7);
 }
 .ds-card .meta .cta-link {
+  color: var(--newtab-link-primary-color);
+  fill: var(--newtab-link-primary-color);
   font-size: 15px;
   font-weight: 600;
   line-height: 24px;
@@ -3758,29 +3735,15 @@ main.has-snippet {
   background-size: auto;
   background-position: right 1.5px;
   padding-right: 9px;
-  color: #0060DF;
-  fill: #0060DF;
-}
-[lwt-newtab-brighttext] .ds-card .meta .cta-link {
-  color: #45A1FF;
-  fill: #45A1FF;
 }
 .ds-card .meta .cta-link:focus {
-  box-shadow: 0 0 0 1px #FFF, 0 0 0 4px rgba(10, 132, 255, 0.5);
+  box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color);
   border-radius: 4px;
   outline: 0;
 }
-[lwt-newtab-brighttext] .ds-card .meta .cta-link:focus {
-  box-shadow: 0 0 0 1px #2A2A2E, 0 0 0 4px rgba(10, 132, 255, 0.5);
-}
 .ds-card .meta .cta-link:active {
-  color: #003EAA;
+  color: var(--newtab-link-primary-active-color);
-  fill: #003EAA;
+  fill: var(--newtab-link-primary-active-color);
-  box-shadow: none;
-}
-[lwt-newtab-brighttext] .ds-card .meta .cta-link:active {
-  color: #0A84FF;
-  fill: #0A84FF;
   box-shadow: none;
 }
 .ds-card .meta .cta-link:hover {
@@ -4173,7 +4136,7 @@ main.has-snippet {
 }
 
 .ds-chevron-link {
-  color: #0060DF;
+  color: var(--newtab-link-primary-color);
   display: inline-block;
   outline: 0;
 }
@@ -4181,16 +4144,10 @@ main.has-snippet {
   text-decoration: underline;
 }
 .ds-chevron-link:active {
-  color: #003EAA;
+  color: var(--newtab-link-primary-active-color);
-}
-[lwt-newtab-brighttext] .ds-chevron-link:active {
-  color: #0A84FF;
 }
 .ds-chevron-link:active::after {
-  background-color: #003EAA;
+  background-color: var(--newtab-link-primary-active-color);
-}
-[lwt-newtab-brighttext] .ds-chevron-link:active::after {
-  background-color: #0A84FF;
 }
 .ds-chevron-link:focus {
   box-shadow: 0 0 0 2px #FFF, 0 0 0 5px rgba(10, 132, 255, 0.5);
@@ -4200,18 +4157,15 @@ main.has-snippet {
   box-shadow: 0 0 0 2px #2A2A2E, 0 0 0 5px rgba(10, 132, 255, 0.5);
 }
 .ds-chevron-link::after {
+  background-color: var(--newtab-link-primary-color);
   content: " ";
   mask: url("chrome://global/skin/icons/arrow-right-12.svg") 0 -8px no-repeat;
-  background-color: #0060DF;
   margin: 0 0 0 4px;
   width: 5px;
   height: 8px;
   text-decoration: none;
   display: inline-block;
 }
-[lwt-newtab-brighttext] .ds-chevron-link::after {
-  background-color: #45A1FF;
-}
 
 .ds-signup {
   max-width: 300px;
@@ -4267,7 +4221,7 @@ main.has-snippet {
   margin: 0 0 8px;
   border: 0;
   padding: 0;
-  color: #0060DF;
+  color: var(--newtab-link-primary-color);
   width: max-content;
 }
 .ds-privacy-modal .modal-link:hover {
@@ -4276,7 +4230,7 @@ main.has-snippet {
 }
 .ds-privacy-modal .modal-link::before {
   -moz-context-properties: fill;
-  fill: #0060DF;
+  fill: var(--newtab-link-primary-color);
   content: "";
   display: inline-block;
   width: 16px;

browser/components/newtab/css/activity-stream-windows.css

@@ -44,6 +44,7 @@ body {
   --newtab-icon-secondary-color: rgba(12, 12, 13, 0.6);
   --newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1);
   --newtab-link-primary-color: #0060DF;
+  --newtab-link-primary-active-color: #003EAA;
   --newtab-link-secondary-color: #008EA4;
   --newtab-text-conditional-color: #4A4A4F;
   --newtab-text-primary-color: #15141a;
@@ -117,6 +118,7 @@ body[lwt-newtab-brighttext] {
   --newtab-icon-secondary-color: rgba(249, 249, 250, 0.4);
   --newtab-inner-box-shadow-color: rgba(249, 249, 250, 0.2);
   --newtab-link-primary-color: #45A1FF;
+  --newtab-link-primary-active-color: #0060DF;
   --newtab-link-secondary-color: #50BCB6;
   --newtab-text-conditional-color: #F9F9FA;
   --newtab-text-primary-color: #fbfbfe;
@@ -2948,16 +2950,10 @@ main.has-snippet {
 }
 
 .ds-hero .wrapper:hover .meta header {
-  color: #0060DF;
+  color: var(--newtab-link-primary-color);
-}
-[lwt-newtab-brighttext] .ds-hero .wrapper:hover .meta header {
-  color: #45A1FF;
 }
 .ds-hero .wrapper:active .meta header {
-  color: #003EAA;
+  color: var(--newtab-link-primary-active-color);
-}
-[lwt-newtab-brighttext] .ds-hero .wrapper:active .meta header {
-  color: #45A1FF;
 }
 .ds-hero .wrapper .img-wrapper {
   width: 100%;
@@ -2993,10 +2989,7 @@ main.has-snippet {
   margin: 0 0 4px;
 }
 .ds-hero .wrapper .meta .context {
-  color: #008EA4;
+  color: var(--newtab-link-secondary-color);
-}
-[lwt-newtab-brighttext] .ds-hero .wrapper .meta .context {
-  color: #A7FFFE;
 }
 .ds-hero .wrapper .meta .source {
   font-size: 13px;
@@ -3090,10 +3083,10 @@ main.has-snippet {
   background: none;
 }
 [lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card:hover .title {
-  color: #45A1FF;
+  color: var(--newtab-link-primary-color);
 }
 [lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card:active .title {
-  color: #0A84FF;
+  color: var(--newtab-link-primary-active-color);
 }
 .ds-column-9 .ds-hero .cards .ds-card .title, .ds-column-10 .ds-hero .cards .ds-card .title, .ds-column-11 .ds-hero .cards .ds-card .title, .ds-column-12 .ds-hero .cards .ds-card .title {
   font-size: 14px;
@@ -3101,7 +3094,7 @@ main.has-snippet {
   line-height: 20px;
 }
 [lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card .title {
-  color: #FFF;
+  color: var(--newtab-text-primary-color);
 }
 .ds-hero.empty {
   grid-template-columns: auto;
@@ -3206,7 +3199,7 @@ main.has-snippet {
   padding-inline-start: 41px;
 }
 .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link::before {
-  background-color: #50BCB6;
+  background-color: var(--newtab-link-secondary-color);
   border-radius: 32px;
   color: #FFF;
   content: counter(list);
@@ -3219,20 +3212,11 @@ main.has-snippet {
   text-align: center;
   width: 32px;
 }
-[lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link::before {
-  background-color: #008EA4;
-}
 .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:hover::before {
-  background-color: #45A1FF;
+  background-color: var(--newtab-link-primary-color);
-}
-[lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:hover::before {
-  background-color: #45A1FF;
 }
 .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:active::before {
-  background-color: #003EAA;
+  background-color: var(--newtab-link-primary-active-color);
-}
-[lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:active::before {
-  background-color: #0060DF;
 }
 
 .ds-list-borders {
@@ -3352,10 +3336,10 @@ main.has-snippet {
   box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15);
 }
 .ds-list-item:hover .ds-list-item-title {
-  color: #45A1FF;
+  color: var(--newtab-link-primary-color);
 }
 .ds-list-item:active .ds-list-item-title {
-  color: #003EAA;
+  color: var(--newtab-link-primary-active-color);
 }
 
 .ds-navigation {
@@ -3653,10 +3637,7 @@ main.has-snippet {
   flex-direction: column;
 }
 .ds-card .ds-card-link:hover header {
-  color: #0060DF;
+  color: var(--newtab-link-primary-color);
-}
-[lwt-newtab-brighttext] .ds-card .ds-card-link:hover header {
-  color: #45A1FF;
 }
 .ds-card .ds-card-link:focus {
   border: 0;
@@ -3665,16 +3646,10 @@ main.has-snippet {
   transition: none;
 }
 .ds-card .ds-card-link:focus header {
-  color: #0060DF;
+  color: var(--newtab-link-primary-color);
-}
-[lwt-newtab-brighttext] .ds-card .ds-card-link:focus header {
-  color: #45A1FF;
 }
 .ds-card .ds-card-link:active header {
-  color: #003EAA;
+  color: var(--newtab-link-primary-active-color);
-}
-[lwt-newtab-brighttext] .ds-card .ds-card-link:active header {
-  color: #0A84FF;
 }
 .ds-card.video-card .meta {
   margin-top: 4px;
@@ -3746,6 +3721,8 @@ main.has-snippet {
   background: rgba(12, 12, 13, 0.7);
 }
 .ds-card .meta .cta-link {
+  color: var(--newtab-link-primary-color);
+  fill: var(--newtab-link-primary-color);
   font-size: 15px;
   font-weight: 600;
   line-height: 24px;
@@ -3754,29 +3731,15 @@ main.has-snippet {
   background-size: auto;
   background-position: right 1.5px;
   padding-right: 9px;
-  color: #0060DF;
-  fill: #0060DF;
-}
-[lwt-newtab-brighttext] .ds-card .meta .cta-link {
-  color: #45A1FF;
-  fill: #45A1FF;
 }
 .ds-card .meta .cta-link:focus {
-  box-shadow: 0 0 0 1px #FFF, 0 0 0 4px rgba(10, 132, 255, 0.5);
+  box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color);
   border-radius: 4px;
   outline: 0;
 }
-[lwt-newtab-brighttext] .ds-card .meta .cta-link:focus {
-  box-shadow: 0 0 0 1px #2A2A2E, 0 0 0 4px rgba(10, 132, 255, 0.5);
-}
 .ds-card .meta .cta-link:active {
-  color: #003EAA;
+  color: var(--newtab-link-primary-active-color);
-  fill: #003EAA;
+  fill: var(--newtab-link-primary-active-color);
-  box-shadow: none;
-}
-[lwt-newtab-brighttext] .ds-card .meta .cta-link:active {
-  color: #0A84FF;
-  fill: #0A84FF;
   box-shadow: none;
 }
 .ds-card .meta .cta-link:hover {
@@ -4169,7 +4132,7 @@ main.has-snippet {
 }
 
 .ds-chevron-link {
-  color: #0060DF;
+  color: var(--newtab-link-primary-color);
   display: inline-block;
   outline: 0;
 }
@@ -4177,16 +4140,10 @@ main.has-snippet {
   text-decoration: underline;
 }
 .ds-chevron-link:active {
-  color: #003EAA;
+  color: var(--newtab-link-primary-active-color);
-}
-[lwt-newtab-brighttext] .ds-chevron-link:active {
-  color: #0A84FF;
 }
 .ds-chevron-link:active::after {
-  background-color: #003EAA;
+  background-color: var(--newtab-link-primary-active-color);
-}
-[lwt-newtab-brighttext] .ds-chevron-link:active::after {
-  background-color: #0A84FF;
 }
 .ds-chevron-link:focus {
   box-shadow: 0 0 0 2px #FFF, 0 0 0 5px rgba(10, 132, 255, 0.5);
@@ -4196,18 +4153,15 @@ main.has-snippet {
   box-shadow: 0 0 0 2px #2A2A2E, 0 0 0 5px rgba(10, 132, 255, 0.5);
 }
 .ds-chevron-link::after {
+  background-color: var(--newtab-link-primary-color);
   content: " ";
   mask: url("chrome://global/skin/icons/arrow-right-12.svg") 0 -8px no-repeat;
-  background-color: #0060DF;
   margin: 0 0 0 4px;
   width: 5px;
   height: 8px;
   text-decoration: none;
   display: inline-block;
 }
-[lwt-newtab-brighttext] .ds-chevron-link::after {
-  background-color: #45A1FF;
-}
 
 .ds-signup {
   max-width: 300px;
@@ -4263,7 +4217,7 @@ main.has-snippet {
   margin: 0 0 8px;
   border: 0;
   padding: 0;
-  color: #0060DF;
+  color: var(--newtab-link-primary-color);
   width: max-content;
 }
 .ds-privacy-modal .modal-link:hover {
@@ -4272,7 +4226,7 @@ main.has-snippet {
 }
 .ds-privacy-modal .modal-link::before {
   -moz-context-properties: fill;
-  fill: #0060DF;
+  fill: var(--newtab-link-primary-color);
   content: "";
   display: inline-block;
   width: 16px;