Replace --ntp color variables with --ds equivalents

Author: noisysocks

special-pages/pages/new-tab/app/activity/components/Activity.module.css

@@ -98,7 +98,7 @@
     font-size: var(--title-3-em-font-size);
     font-weight: var(--title-3-em-font-weight);
     text-decoration: none;
-    color: var(--ntp-text-normal);
+    color: var(--ds-color-text-primary);
     height: 35px;
     display: flex;
     align-items: center;
@@ -109,7 +109,7 @@
     min-width: 0;
 
     &:hover, &:focus-visible {
-        color: var(--ntp-color-primary);
+        color: var(--ds-color-accent-primary);
         .favicon {
             transform: scale(1.08)
         }
@@ -133,7 +133,7 @@
     background: transparent;
     padding: 0;
     margin: 0;
-    color: var(--ntp-text-normal);
+    color: var(--ds-color-text-primary);
     svg {
         position: absolute;
         top: 50%;
@@ -218,15 +218,15 @@
     font-size: var(--small-label-font-size);
     font-weight: var(--small-label-font-weight);
     line-height: var(--small-label-line-height);
-    color: var(--ntp-text-normal);
+    color: var(--ds-color-text-primary);
     text-decoration: none;
     min-width: 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 
     &:hover, &:focus-visible {
-        color: var(--ntp-color-primary)
+        color: var(--ds-color-accent-primary)
     }
 
     &:hover .time {
@@ -238,7 +238,7 @@
 .time {
     flex-shrink: 0;
     margin-left: 8px;
-    color: var(--ntp-text-muted);
+    color: var(--ds-color-text-secondary);
     opacity: 0.6;
     font-size: var(--small-label-font-size);
     font-weight: var(--small-label-font-weight);

special-pages/pages/new-tab/app/activity/components/ActivityLegacy.module.css

@@ -100,7 +100,7 @@
     font-size: var(--title-3-em-font-size);
     font-weight: var(--title-3-em-font-weight);
     text-decoration: none;
-    color: var(--ntp-text-normal);
+    color: var(--ds-color-text-primary);
     height: 35px;
     display: flex;
     align-items: center;
@@ -111,7 +111,7 @@
     min-width: 0;
 
     &:hover, &:focus-visible {
-        color: var(--ntp-color-primary);
+        color: var(--ds-color-accent-primary);
         .favicon {
             transform: scale(1.08)
         }
@@ -135,7 +135,7 @@
     background: transparent;
     padding: 0;
     margin: 0;
-    color: var(--ntp-text-normal);
+    color: var(--ds-color-text-primary);
     svg {
         position: absolute;
         top: 50%;
@@ -224,15 +224,15 @@
     font-size: var(--small-label-font-size);
     font-weight: var(--small-label-font-weight);
     line-height: var(--small-label-line-height);
-    color: var(--ntp-text-normal);
+    color: var(--ds-color-text-primary);
     text-decoration: none;
     min-width: 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 
     &:hover, &:focus-visible {
-        color: var(--ntp-color-primary)
+        color: var(--ds-color-accent-primary)
     }
 
     &:hover .time {
@@ -244,7 +244,7 @@
 .time {
     flex-shrink: 0;
     margin-left: 8px;
-    color: var(--ntp-text-muted);
+    color: var(--ds-color-text-secondary);
     opacity: 0.6;
     font-size: var(--small-label-font-size);
     font-weight: var(--small-label-font-weight);

special-pages/pages/new-tab/app/components/App.module.css

@@ -55,7 +55,7 @@ body[data-animate-background="true"] {
     height: 100vh;
     overflow: auto;
     grid-area: main;
-    color: var(--ntp-text-normal);
+    color: var(--ds-color-text-primary);
 }
 
 /* WebKit-only fix for layout shift when scrollbar appears */
@@ -66,7 +66,7 @@ body[data-animate-background="true"] {
 }
 
 .themeContext {
-    color: var(--ntp-text-normal);
+    color: var(--ds-color-text-primary);
 }
 
 .mainLayout {
@@ -98,8 +98,8 @@ body[data-animate-background="true"] {
 }
 
 .aside {
-    color: var(--ntp-text-normal);
-    background: var(--ntp-surfaces-panel-background-color);
+    color: var(--ds-color-text-primary);
+    background: var(--ds-color-surface-tertiary);
     grid-area: aside;
     height: 100vh;
     z-index: 1;
@@ -153,7 +153,7 @@ body[data-animate-background="true"] {
 
     &::-webkit-scrollbar-thumb {
         background: rgb(108, 108, 108);
-        border: 4px solid var(--ntp-surfaces-panel-background-color);
+        border: 4px solid var(--ds-color-surface-tertiary);
         border-radius: 6px;
     }
 }
@@ -164,4 +164,4 @@ body[data-animate-background="true"] {
 .paddedErrorRecovery {
     margin-top: 1rem;
 
-}
+}

special-pages/pages/new-tab/app/components/CompanyIcon.module.css

@@ -13,7 +13,7 @@
     }
 
     &:has([data-errored=true]) {
-        outline: 1px solid var(--ntp-surface-border-color);
+        outline: 1px solid var(--ds-color-container-border-primary);
         [data-theme=dark] & {
             outline-color: var(--color-white-at-9);
         }

special-pages/pages/new-tab/app/components/Components.module.css

@@ -5,14 +5,14 @@ body[data-display="components"] {
     padding-right: 0;
 
     a {
-        color: var(--ntp-text-normal);
+        color: var(--ds-color-text-primary);
     }
 }
 
 .main {
     height: 100vh;
     overflow: auto;
-    color: var(--ntp-text-normal);
+    color: var(--ds-color-text-primary);
 }
 
 
@@ -65,7 +65,7 @@ body:has(.tubeGrid):has([data-isolated=true]) {
 }
 
 .itemLink {
-    color: var(--ntp-text-normal);
+    color: var(--ds-color-text-primary);
     padding: 0.2em 0.3em;
     border: 1px solid var(--color-gray-60);
     border-radius: var(--border-radius-xs);

special-pages/pages/new-tab/app/components/DismissButton.module.css

@@ -7,7 +7,7 @@
     padding: 0;
     line-height: 1;
     background-color: transparent;
-    color: var(--ntp-text-muted);
+    color: var(--ds-color-text-secondary);
     border: none;
     border-radius: 50%;
     transition: all .3s;
@@ -26,7 +26,7 @@
 
     &:active {
         background-color: var(--color-black-at-18);
-        color: var(--ntp-text-normal);
+        color: var(--ds-color-text-primary);
     }
 
     &:disabled {

special-pages/pages/new-tab/app/components/ShowHide.module.css

@@ -6,7 +6,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    color: var(--ntp-text-normal);
+    color: var(--ds-color-text-primary);
 
     > * {
         pointer-events: none;
@@ -35,7 +35,7 @@
     align-items: center;
     justify-content: center;
     box-shadow: 0px 2px 4px 0px var(--color-black-at-12), 0px 0px 3px 0px var(--color-black-at-18);
-    color: var(--ntp-text-muted);
+    color: var(--ds-color-text-secondary);
 
     [data-theme="dark"] & {
         box-shadow: 0px 2px 4px 0px var(--color-white-at-6), 0px 0px 3px 0px var(--color-white-at-9);
@@ -48,7 +48,7 @@
     border-radius: 50%;
     padding-inline: 0;
     background-color: transparent;
-    color: var(--ntp-text-muted);
+    color: var(--ds-color-text-secondary);
 
     .iconBlock {
         backdrop-filter: unset;
@@ -85,8 +85,8 @@
     font-size: var(--callout-font-size);
     font-weight: var(--callout-font-weight);
     line-height: var(--callout-line-height);
-    border: 1px solid var(--ntp-surface-border-color);
-    color: var(--ntp-text-muted);
+    border: 1px solid var(--ds-color-container-border-primary);
+    color: var(--ds-color-text-secondary);
 }
 
 .fill {

special-pages/pages/new-tab/app/customizer/components/Customizer.module.css

@@ -8,14 +8,14 @@
 .customizeButton {
     backdrop-filter: blur(48px);
     background-color: var(--ntp-surface-background-color);
-    border: 1px solid var(--ntp-surface-border-color);
+    border: 1px solid var(--ds-color-container-border-primary);
     border-radius: var(--border-radius-sm);
     padding: var(--sp-2) var(--sp-3);
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: calc(6 * var(--px-in-rem));
-    color: var(--ntp-text-normal);
+    color: var(--ds-color-text-primary);
 
     [data-theme=dark] & {
         border-color: var(--color-white-at-9);

special-pages/pages/new-tab/app/customizer/components/CustomizerDrawerInner.module.css

@@ -76,7 +76,7 @@
     width: 100%;
 }
 .borderedSection {
-    border-top: 1px solid var(--ntp-surface-border-color);
+    border-top: 1px solid var(--ds-color-container-border-primary);
     padding-top: calc(18 * var(--px-in-rem))
 }
 .sectionBody {
@@ -114,7 +114,7 @@
     justify-content: center;
     border: none;
     outline: none;
-    box-shadow: 0 0 0 1px var(--ntp-surface-border-color) inset;
+    box-shadow: 0 0 0 1px var(--ds-color-container-border-primary) inset;
 
     &[aria-checked="true"] {
         box-shadow: var(--focus-ring-primary);
@@ -254,7 +254,7 @@
     justify-content: space-between;
     align-items: center;
     text-decoration: none;
-    color: var(--ntp-color-primary);
+    color: var(--ds-color-accent-primary);
     margin-bottom: var(--sp-3);
 
     &:focus {

special-pages/pages/new-tab/app/favorites/components/Tile.module.css

@@ -32,7 +32,7 @@
 }
 
 .preview {
-    color: var(--ntp-text-normal);
+    color: var(--ds-color-text-primary);
     transform: scale(0.8);
     img {
         opacity: 0.8;