Migrate ntp- to ds- color variables

Author: noisysocks

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

@@ -15,7 +15,7 @@
 }
 
 .content {
-    background: var(--ntp-surface-tertiary);
+    background: var(--ds-color-surface-tertiary);
     border-radius: 16px;
     flex: auto;
     padding: var(--sp-4) var(--sp-11) var(--sp-4) var(--sp-5);
@@ -26,7 +26,7 @@
     background: none;
     border-radius: 100%;
     border: none;
-    color: var(--ntp-icons-primary);
+    color: var(--ds-color-icons-primary);
     cursor: pointer;
     padding: 0;
     position: absolute;
@@ -74,22 +74,22 @@
     button {
         background: none;
         border: none;
-        color: var(--ntp-accent-primary);
+        color: var(--ds-color-accent-primary);
         cursor: pointer;
         padding: 0;
         transform: translateZ(0); /* Fix shadow rendering issue on .popover in WebKit */
 
         &:hover {
-            color: var(--ntp-accent-secondary);
+            color: var(--ds-color-accent-secondary);
         }
 
         &:active {
-            color: var(--ntp-accent-tertiary);
+            color: var(--ds-color-accent-tertiary);
         }
     }
 }
 
 .arrow {
-    color: var(--ntp-surface-tertiary);
+    color: var(--ds-color-surface-tertiary);
     margin-right: -1px;
 }

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

@@ -21,7 +21,7 @@
     height: calc(28 * var(--px-in-rem));
 
     &:has(input[disabled]) .title {
-        color: var(--ntp-text-tertiary)
+        color: var(--ds-color-text-tertiary)
     }
 }
 

special-pages/pages/new-tab/app/omnibar/components/AiChatForm.module.css

@@ -10,7 +10,7 @@
     background: none;
     border: none;
     box-sizing: content-box;
-    color: var(--ntp-text-primary);
+    color: var(--ds-color-text-primary);
     line-height: 16px;
     max-height: 10lh;
     padding: var(--sp-3) var(--sp-3) 0;
@@ -21,7 +21,7 @@
     }
 
     &::placeholder {
-        color: var(--ntp-text-tertiary);
+        color: var(--ds-color-text-tertiary);
     }
 
     [data-platform="windows"] &::selection {
@@ -34,7 +34,7 @@
     }
 
     .hasScroll & {
-        border-bottom: 1px solid var(--ntp-decoration-tertiary);
+        border-bottom: 1px solid var(--ds-color-surface-decoration-tertiary);
         padding-bottom: var(--sp-3);
     }
 }
@@ -52,10 +52,10 @@
 .submitButton {
     align-items: center;
     animation: fadeIn 0.3s ease-in-out;
-    background: var(--ntp-accent-primary);
+    background: var(--ds-color-accent-primary);
     border-radius: 100%;
     border: none;
-    color: var(--ntp-accent-content-primary);
+    color: var(--ds-color-accent-content-primary);
     cursor: pointer;
     display: flex;
     height: var(--sp-7);
@@ -66,16 +66,16 @@
 
     &[disabled] {
         background: none;
-        color: color-mix(in srgb, var(--ntp-icons-primary) 30%, transparent);
+        color: color-mix(in srgb, var(--ds-color-icons-primary) 30%, transparent);
         cursor: default;
     }
 
     &:hover:not([disabled]) {
-        background: var(--ntp-accent-secondary);
+        background: var(--ds-color-accent-secondary);
     }
 
     &:active:not([disabled]) {
-        background: var(--ntp-accent-tertiary);
+        background: var(--ds-color-accent-tertiary);
     }
 
     &:focus-visible {

special-pages/pages/new-tab/app/omnibar/components/Omnibar.module.css

@@ -39,12 +39,12 @@
 
 /* Rest */
 .popup {
-    background: var(--ntp-surface-tertiary);
+    background: var(--ds-color-surface-tertiary);
     border-radius: 12px;
     box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.08); /* Elevation 30 */
     display: flow-root; /* Prevent margin collapse on .field */
     margin: 3px;
-    outline: 1px solid var(--ntp-controls-raised-backdrop);
+    outline: 1px solid var(--ds-color-control-raised-backdrop);
 
     [data-background-kind="color"] [data-theme="light"] &,
     [data-background-kind="gradient"] [data-theme="light"] &,
@@ -74,10 +74,10 @@
 /* Focused */
 .root:has(input:focus:placeholder-shown, textarea:focus:placeholder-shown) .popup {
     border-radius: 15px;
-    border: 2px solid var(--ntp-accent-primary);
+    border: 2px solid var(--ds-color-accent-primary);
     box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1), 0 20px 40px 0 rgba(0, 0, 0, 0.08); /* Elevation 90 */
     margin: 0;
-    outline: 2px solid var(--ntp-accent-glow);
+    outline: 2px solid var(--ds-color-accent-glow-primary);
 
     .field {
         margin: 1px; /* Use margin on .field instead of padding on .popup so that position: absolute respects the spacing */

special-pages/pages/new-tab/app/omnibar/components/SearchForm.module.css

@@ -9,7 +9,7 @@
 .input {
     background: none;
     border: none;
-    color: var(--ntp-text-primary);
+    color: var(--ds-color-text-primary);
     font: var(--input-font);
     left: 0;
     padding: var(--sp-3);
@@ -18,7 +18,7 @@
     right: 0;
 
     &::placeholder {
-        color: var(--ntp-text-tertiary);
+        color: var(--ds-color-text-tertiary);
     }
 
     [data-platform='windows'] &::selection {
@@ -39,7 +39,7 @@
 }
 
 .suffix {
-    color: var(--ntp-accent-primary);
+    color: var(--ds-color-accent-primary);
     flex: none;
     font: var(--input-font);
 }
@@ -49,7 +49,7 @@
     background: none;
     border-radius: 9px;
     border: none;
-    color: var(--ntp-text-primary);
+    color: var(--ds-color-text-primary);
     cursor: pointer;
     display: flex;
     flex: none;
@@ -63,11 +63,11 @@
     visibility: hidden;
 
     &:hover {
-        background: var(--ntp-controls-fill-primary);
+        background: var(--ds-color-control-fill-primary);
     }
 
     &:active {
-        background: var(--ntp-controls-fill-secondary);
+        background: var(--ds-color-control-fill-secondary);
     }
 
     &:focus-visible {

special-pages/pages/new-tab/app/omnibar/components/SuggestionsList.module.css

@@ -21,7 +21,7 @@
     background: none;
     border-radius: 4px;
     border: none;
-    color: var(--ntp-text-primary);
+    color: var(--ds-color-text-primary);
     cursor: pointer;
     display: flex;
     height: var(--sp-8);
@@ -35,10 +35,10 @@
 
     &[aria-selected="true"],
     &:active {
-        color: var(--ntp-accent-content-primary);
+        color: var(--ds-color-accent-content-primary);
 
         .suffix {
-            color: var(--ntp-accent-content-primary);
+            color: var(--ds-color-accent-content-primary);
         }
 
         .badge {
@@ -47,11 +47,11 @@
     }
 
     &[aria-selected="true"] {
-        background: var(--ntp-accent-primary);
+        background: var(--ds-color-accent-primary);
     }
 
     &:active {
-        background: var(--ntp-accent-secondary);
+        background: var(--ds-color-accent-secondary);
     }
 }
 
@@ -64,7 +64,7 @@
 }
 
 .suffix {
-    color: var(--ntp-text-tertiary);
+    color: var(--ds-color-text-tertiary);
     flex: initial;
     font-size: 12px;
     overflow: hidden;
@@ -74,7 +74,7 @@
 
 .badge {
     align-items: center;
-    background: var(--ntp-controls-raised-backdrop);
+    background: var(--ds-color-control-raised-backdrop);
     border-radius: var(--border-radius-sm);
     display: flex;
     flex: none;

special-pages/pages/new-tab/app/omnibar/components/TabSwitcher.module.css

@@ -1,5 +1,5 @@
 .tabSwitcher {
-    background: var(--ntp-controls-raised-backdrop);
+    background: var(--ds-color-control-raised-backdrop);
     border-radius: 99px;
     display: grid;
     gap: var(--sp-0_5);
@@ -17,7 +17,7 @@
     align-items: center;
     background: none;
     border: none;
-    color: var(--ntp-text-primary);
+    color: var(--ds-color-text-primary);
     cursor: pointer;
     display: flex;
     gap: 6px;
@@ -29,7 +29,7 @@
     z-index: 1;
 
     &:hover:not([aria-selected="true"])::before {
-        background: var(--ntp-controls-fill-primary);
+        background: var(--ds-color-control-fill-primary);
         border-radius: 99px;
         content: '';
         inset: 0;
@@ -42,9 +42,9 @@
 }
 
 .blob {
-    background-color: var(--ntp-controls-raised-fill-primary);
+    background-color: var(--ds-color-control-raised-fill-primary);
     border-radius: 18px;
-    box-shadow: 0 1px 0 0 var(--ntp-tone-tint) inset, 0 1px 4px 0 var(--ntp-shadow-secondary), 0 4px 8px 0 var(--ntp-shadow-secondary);
+    box-shadow: 0 1px 0 0 var(--ds-color-tone-tint-primary) inset, 0 1px 4px 0 var(--ds-color-shadow-secondary), 0 4px 8px 0 var(--ds-color-shadow-secondary);
     height: var(--sp-8);
     left: 0;
     position: absolute;
@@ -56,7 +56,7 @@
     z-index: 0;
 
     [data-theme="dark"] & {
-        box-shadow: 0 4px 4px var(--ntp-shadow-secondary), 0 1px 2px var(--ntp-shadow-secondary), inset 0 1px 0 rgba(255, 255, 255, 0.06);
+        box-shadow: 0 4px 4px var(--ds-color-shadow-secondary), 0 1px 2px var(--ds-color-shadow-secondary), inset 0 1px 0 rgba(255, 255, 255, 0.06);
     }
 
     @media (prefers-reduced-motion: reduce) {

special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.module.css

@@ -76,7 +76,7 @@
 }
 
 .title {
-    color: var(--ntp-text-primary);
+    color: var(--ds-color-text-primary);
     font-size: 40px;
     font-weight: 400;
     grid-area: title;

special-pages/pages/new-tab/app/styles/ntp-theme.css

@@ -37,7 +37,7 @@
     --focus-ring-thin: 0px 0px 0px 1px var(--ntp-focus-outline-color), 0px 0px 0px 1px  var(--color-white);
 }
 
-[data-theme-variant="default"] [data-theme="light"] {
+[data-theme="light"] {
     --ds-color-surface-primary: var(--ds-color-default-light-surface-primary);
     --ds-color-surface-secondary: var(--ds-color-default-light-surface-secondary);
     --ds-color-surface-tertiary: var(--ds-color-default-light-surface-tertiary);
@@ -78,9 +78,16 @@
     --ds-color-accent-glow-primary: var(--ds-color-default-light-accent-glow-primary);
     --ds-color-accent-glow-secondary: var(--ds-color-default-light-accent-glow-secondary);
     --ds-color-highlight-primary: var(--ds-color-default-light-highlight-primary);
+
+    /* Only exist in default variant: */
+    --ds-color-tone-tint-primary: var(--ds-color-default-light-tone-tint-primary);
+    --ds-color-control-raised-backdrop: var(--ds-color-default-light-control-raised-backdrop);
+    --ds-color-control-raised-fill-primary: var(--ds-color-default-light-control-raised-fill-primary);
+    --ds-color-shadow-primary: var(--ds-color-default-light-shadow-primary);
+    --ds-color-shadow-secondary: var(--ds-color-default-light-shadow-secondary);
 }
 
-[data-theme-variant="default"] [data-theme="dark"] {
+[data-theme="dark"] {
     --ds-color-surface-primary: var(--ds-color-default-dark-surface-primary);
     --ds-color-surface-secondary: var(--ds-color-default-dark-surface-secondary);
     --ds-color-surface-tertiary: var(--ds-color-default-dark-surface-tertiary);
@@ -121,6 +128,13 @@
     --ds-color-accent-glow-primary: var(--ds-color-default-dark-accent-glow-primary);
     --ds-color-accent-glow-secondary: var(--ds-color-default-dark-accent-glow-secondary);
     --ds-color-highlight-primary: var(--ds-color-default-dark-highlight-primary);
+
+    /* Only exist in default variant: */
+    --ds-color-tone-tint-primary: var(--ds-color-default-dark-tone-tint-primary);
+    --ds-color-control-raised-backdrop: var(--ds-color-default-dark-control-raised-backdrop);
+    --ds-color-control-raised-fill-primary: var(--ds-color-default-dark-control-raised-fill-primary);
+    --ds-color-shadow-primary: var(--ds-color-default-dark-shadow-primary);
+    --ds-color-shadow-secondary: var(--ds-color-default-dark-shadow-secondary);
 }
 
 [data-theme-variant="coolGray"] [data-theme="light"] {
@@ -781,27 +795,6 @@ body[data-theme-variant="desert"] {
     --focus-ring-primary: 0px 0px 0px 1px var(--color-white), 0px 0px 0px 3px var(--ntp-color-primary);
     --ntp-selection-color: var(--color-white);
     --ntp-selection-background-color: #3A69EF;
-
-    /* Global Colors & Styles - https://www.figma.com/design/3W4vi0zX8hrpQc7zInQQB6/%F0%9F%8E%A8-Global-Colors---Styles?node-id=11-1&p=f&vars=1&m=dev */
-    /* @todo: This palette is what the native apps use, we should gradually move over to it */
-    --ntp-surface-tertiary: #FFFFFF;
-    --ntp-text-primary: rgba(0, 0, 0, 0.96);
-    --ntp-text-tertiary: rgba(0, 0, 0, 0.42);
-    --ntp-icons-primary: rgba(0, 0, 0, 0.84);
-    --ntp-icons-tertiary: rgba(0, 0, 0, 0.36);
-    --ntp-tone-tint: rgba(255, 255, 255, 0.48);
-    --ntp-accent-primary: var(--color-blue-50);
-    --ntp-accent-secondary: var(--color-blue-60);
-    --ntp-accent-tertiary: var(--color-blue-70);
-    --ntp-accent-glow: rgba(57, 105, 239, 0.2);
-    --ntp-accent-content-primary: #FFFFFF;
-    --ntp-controls-fill-primary: rgba(31, 31, 31, 0.09);
-    --ntp-controls-fill-secondary: rgba(31, 31, 31, 0.12);
-    --ntp-controls-raised-fill-primary: #FFFFFF;
-    --ntp-controls-raised-backdrop: rgba(0, 0, 0, 0.09);
-    --ntp-decoration-tertiary: rgba(0, 0, 0, 0.09);
-    --ntp-shadow-primary: rgba(0, 0, 0, 0.05);
-    --ntp-shadow-secondary: rgba(0, 0, 0, 0.08);
 }
 
 [data-theme=dark] {
@@ -820,27 +813,6 @@ body[data-theme-variant="desert"] {
     --focus-ring-primary: 0px 0px 0px 1px var(--default-dark-background-color), 0px 0px 0px 3px var(--ntp-color-primary);
     --ntp-selection-color: var(--color-white);
     --ntp-selection-background-color: var(--color-blue-30);
-
-    /* Global Colors & Styles - https://www.figma.com/design/3W4vi0zX8hrpQc7zInQQB6/%F0%9F%8E%A8-Global-Colors---Styles?node-id=11-1&p=f&vars=1&m=dev */
-    /* @todo: This palette is what the native apps use, we should gradually move over to it */
-    --ntp-surface-tertiary: #474747;
-    --ntp-text-primary: rgba(255, 255, 255, 0.96);
-    --ntp-text-tertiary: rgba(255, 255, 255, 0.36);
-    --ntp-icons-primary: rgba(255, 255, 255, 0.78);
-    --ntp-icons-tertiary: rgba(255, 255, 255, 0.24);
-    --ntp-tone-tint: rgba(249, 249, 249, 0.12);
-    --ntp-accent-primary: var(--color-blue-30);
-    --ntp-accent-secondary: var(--color-blue-40);
-    --ntp-accent-tertiary: var(--color-blue-50);
-    --ntp-accent-glow: rgba(114, 149, 246, 0.2);
-    --ntp-accent-content-primary: var(--color-blue-80);
-    --ntp-controls-fill-primary: rgba(249, 249, 249, 0.12);
-    --ntp-controls-fill-secondary: rgba(249, 249, 249, 0.18);
-    --ntp-controls-raised-fill-primary: rgba(255, 255, 255, 0.18);
-    --ntp-controls-raised-backdrop: rgba(255, 255, 255, 0.12);
-    --ntp-decoration-tertiary: rgba(255, 255, 255, 0.12);
-    --ntp-shadow-primary: rgba(0, 0, 0, 0.16);
-    --ntp-shadow-secondary: rgba(0, 0, 0, 0.24);
 }
 
 /* This comes from the application settings */