History: Use design system colors (#2097)

* Add theme variant CSS vars, fix background colors

* Swap history color vars with --ds color vars

* Add empty history mock

* Update header, item, and sidebar to use --ds colors

* Fix icon color typo

* Fix: Prevent theme flash by using useLayoutEffect and sync initial theme

Co-authored-by: randerson <randerson@duckduckgo.com>

* Remove synchronous theme variant application

Co-authored-by: randerson <randerson@duckduckgo.com>

* Fix prettier formatting

* Update snapshots

* DRY NTP and history's theme mappings into shared theme-mappings.css

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: noisysocks

special-pages/pages/history/app/components/App.jsx

@@ -64,14 +64,7 @@ export function App() {
     }, [onKeyDown, query]);
 
     return (
-        <div
-            class={styles.layout}
-            data-theme={theme}
-            data-theme-variant={themeVariant}
-            data-platform={platformName}
-            data-layout-mode={mode}
-            onClick={clickAnywhere}
-        >
+        <div class={styles.layout} data-platform={platformName} data-layout-mode={mode} onClick={clickAnywhere}>
             <aside class={styles.aside}>
                 <Sidebar ranges={ranges} />
             </aside>

special-pages/pages/history/app/components/App.module.css

@@ -1,4 +1,5 @@
 @import url("../../../../shared/styles/variables.css");
+@import url("../../../../shared/styles/theme-mappings.css");
 @import url("../../styles/base.css");
 @import url("../../styles/history-theme.css");
 
@@ -7,7 +8,7 @@ body {
     font-weight: var(--body-font-weight);
     line-height: var(--body-line-height);
     background-color: var(--history-background-color);
-    color: var(--history-text-normal);
+    color: var(--ds-color-theme-text-primary);
 }
 
 .layout {
@@ -55,7 +56,7 @@ body {
     padding: 10px 16px;
     /* Nav child will handle this to accommodate a scrollbar */
     padding-right: 0;
-    border-right: 1px solid var(--history-surface-border-color);
+    border-right: 1px solid var(--ds-color-theme-surface-decoration-primary);
 }
 
 .main {

special-pages/pages/history/app/components/Header.module.css

@@ -3,9 +3,9 @@
     justify-content: space-between;
     align-items: center;
     gap: 8px;
-    color: var(--history-text-normal);
+    color: var(--ds-color-theme-text-primary);
     padding: 16px 0;
-    border-bottom: 1px solid var(--history-surface-border-color);
+    border-bottom: 1px solid var(--ds-color-theme-surface-decoration-primary);
 }
 
 .controls {
@@ -22,7 +22,7 @@
     height: 28px;
     border: none;
     border-radius: 4px;
-    color: var(--history-text-normal);
+    color: var(--ds-color-theme-text-primary);
     padding-left: 8px;
     padding-right: 8px;
 
@@ -32,17 +32,11 @@
     }
 
     &:hover {
-        background-color: var(--color-black-at-6);
-        [data-theme="dark"] & {
-            background-color: var(--color-white-at-6)
-        }
+        background-color: var(--ds-color-theme-control-fill-secondary);
     }
 
     &:active {
-        background-color: var(--color-black-at-12);
-        [data-theme="dark"] & {
-            background-color: var(--color-white-at-12)
-        }
+        background-color: var(--ds-color-theme-control-fill-tertiary);
     }
 
     &[aria-disabled="true"] {
@@ -72,30 +66,29 @@
     top: 50%;
     left: 9px;
     transform: translateY(-50%);
-    color: black;
-    [data-theme="dark"] & {
-        color: white;
-    }
+    color: var(--ds-color-theme-icons-primary);
 }
 .searchInput {
     width: 100%;
     height: 28px;
     border-radius: 6px;
-    border: 0.5px solid var(--history-surface-border-color);
+    border: 0.5px solid var(--ds-color-theme-control-border-primary);
     /* these precise numbers help it match figma when overriding default UI */
     padding-left: 31px;
     padding-right: 9px;
     background: inherit;
     color: inherit;
+    background: var(--ds-color-theme-surface-tertiary);
 
-    [data-theme="dark"] & {
-        background: var(--color-white-at-6);
-        border-color: var(--color-white-at-9);
+    &:hover {
+        border-color: var(--ds-color-theme-control-border-secondary);
     }
 
     &:focus {
         outline: none;
-        box-shadow: 0px 0px 0px 2.5px rgba(87, 151, 237, 0.64), 0px 0px 0px 1px rgba(87, 151, 237, 0.64) inset, 0px 0.5px 0px -0.5px rgba(0, 0, 0, 0.10), 0px 1px 0px -0.5px rgba(0, 0, 0, 0.10);
+        border: 2px solid var(--ds-color-theme-accent-primary);
+        padding-left: 29.5px;
+        padding-right: 7.5px;
     }
 
     &::-webkit-search-cancel-button {
@@ -111,4 +104,4 @@
     [data-theme="dark"] &::-webkit-search-cancel-button {
         background-image: url("../../public/icons/clear-dark.svg");
     }
-}
+}

special-pages/pages/history/app/components/Item.module.css

@@ -10,7 +10,7 @@
     font-weight: var(--title-3-em-font-weight);
     line-height: var(--title-3-em-line-height);
     white-space: nowrap;
-    color: var(--history-text-normal);
+    color: var(--ds-color-theme-text-primary);
     display: flex;
     align-items: center;
     padding-left: 8px;
@@ -32,8 +32,8 @@
 .hover {
     --row-bg: inherit;
     --row-radius: 5px;
-    --row-color: var(--history-text-normal);
-    --dots-bg-hover: var(--color-black-at-9);
+    --row-color: var(--ds-color-theme-text-primary);
+    --dots-bg-hover: var(--ds-color-theme-control-fill-primary);
     --dots-opacity: 0;
     --time-opacity: 0.6;
     --time-visibility: visible;
@@ -49,20 +49,17 @@
     }
 
     &:hover:not([aria-selected="true"]) {
-        --row-bg: var(--color-black-at-6);
-        [data-theme="dark"] & {
-            --row-bg: var(--color-white-at-6);
-        }
+        --row-bg: var(--ds-color-theme-control-fill-primary);
     }
 
-    [data-theme="dark"] & {
-        --dots-bg-hover: var(--color-white-at-12);
+    &:active:not([aria-selected="true"]) {
+        --row-bg: var(--ds-color-theme-control-fill-secondary);
     }
 
     &[aria-selected="true"] {
-        --row-bg: #2565D9;
-        --row-color: var(--color-white-at-84);
-        --dots-bg-hover: var(--color-white-at-9);
+        --row-bg: var(--ds-color-theme-accent-primary);
+        --row-color: var(--ds-color-theme-accent-content-primary);
+        --dots-bg-hover: var(--ds-color-theme-accent-secondary);
     }
 }
 
@@ -163,4 +160,4 @@
 
 .last {
     margin-bottom: 24px;
-}
+}

special-pages/pages/history/app/components/Sidebar.module.css

@@ -11,7 +11,7 @@
 }
 
 .pageTitle {
-    color: var(--history-text-normal);
+    color: var(--ds-color-theme-text-primary);
     font-size: var(--title-font-size);
     font-weight: var(--title-font-weight);
     line-height: 24px;
@@ -29,15 +29,11 @@
 
     &:hover,
     &:focus-visible {
-        background: var(--color-black-at-6);
+        background: var(--ds-color-theme-control-fill-primary);
     }
 
-    [data-theme="dark"] & {
-
-        &:hover,
-        &:focus-visible {
-            background: var(--color-white-at-6);
-        }
+    &:active {
+        background: var(--ds-color-theme-control-fill-secondary);
     }
 
     &.item_sites {
@@ -49,11 +45,7 @@
             top: -8px;
             left: 16px;
             right: 16px;
-            border-top: 1px solid var(--color-black-at-6);
-        }
-
-        [data-theme="dark"] &::before {
-            border-top: 1px solid var(--color-white-at-6);
+            border-top: 1px solid var(--ds-color-theme-surface-decoration-primary);
         }
     }
 }
@@ -64,18 +56,10 @@
 }
 
 .active {
-    background: var(--color-black-at-12);
+    background: var(--ds-color-theme-control-fill-secondary);
 
     &:hover {
-        background: var(--color-black-at-18);
-    }
-
-    [data-theme="dark"] & {
-        background: var(--color-white-at-9);
-
-        &:hover {
-            background: var(--color-white-at-12);
-        }
+        background: var(--ds-color-theme-control-fill-tertiary);
     }
 }
 
@@ -84,7 +68,7 @@
     font-size: var(--label-font-size);
     font-weight: var(--label-font-weight);
     line-height: var(--label-line-height);
-    color: var(--history-text-normal);
+    color: var(--ds-color-theme-text-primary);
 
     height: 40px;
     display: flex;
@@ -115,28 +99,18 @@
     border: none;
     cursor: pointer;
     opacity: 0;
-    color: var(--history-text-normal);
+    color: var(--ds-color-theme-text-primary);
 
     &:not([aria-disabled="true"]) {
 
         &:hover,
         &:focus-visible {
-            background: var(--color-black-at-9);
+            background: var(--ds-color-theme-control-fill-primary);
             opacity: 1;
         }
-    }
-
-    &:active {
-        background: var(--color-black-at-12);
-    }
-
-    [data-theme="dark"] & {
-        &:hover {
-            background: var(--color-white-at-9);
-        }
 
         &:active {
-            background: var(--color-white-at-12);
+            background: var(--ds-color-theme-control-fill-secondary);
         }
     }
 

special-pages/pages/history/app/components/VirtualizedList.module.css

@@ -14,7 +14,7 @@
     width: 100%;
     height: 100%;
     text-align: center;
-    color: var(--history-text-normal);
+    color: var(--ds-color-theme-text-primary);
     display: grid;
     grid-template-rows: max-content max-content;
     justify-items: center;
@@ -45,5 +45,5 @@
 }
 .emptyText {
     margin-top: 8px;
-    color: var(--history-text-muted)
+    color: var(--ds-color-theme-text-secondary)
 }

special-pages/pages/history/app/global/Providers/ThemeProvider.js

@@ -1,5 +1,5 @@
 import { createContext, h } from 'preact';
-import { useContext, useEffect, useState } from 'preact/hooks';
+import { useContext, useEffect, useLayoutEffect, useState } from 'preact/hooks';
 import { useMessaging } from '../../types.js';
 import { useEnv } from '../../../../../shared/components/EnvironmentProvider.js';
 
@@ -41,6 +41,14 @@ export function ThemeProvider({ children, initialTheme, initialThemeVariant }) {
     const theme = explicitTheme ?? initialTheme ?? (isDarkMode ? 'dark' : 'light');
     const themeVariant = explicitThemeVariant ?? initialThemeVariant ?? 'default';
 
+    // Sync theme attributes to <body>
+    useLayoutEffect(() => {
+        document.body.dataset.theme = theme;
+    }, [theme]);
+    useLayoutEffect(() => {
+        document.body.dataset.themeVariant = themeVariant;
+    }, [themeVariant]);
+
     return <ThemeContext.Provider value={{ theme, themeVariant }}>{children}</ThemeContext.Provider>;
 }
 

special-pages/pages/history/app/mocks/history.mocks.js

@@ -4,6 +4,13 @@ import { HistoryService } from '../history.service.js';
  * @type {Record<string, import("../../types/history").HistoryQueryResponse>}
  */
 export const historyMocks = {
+    empty: {
+        info: {
+            finished: true,
+            query: { term: '' },
+        },
+        value: [],
+    },
     few: {
         info: {
             finished: true,

special-pages/pages/history/integration-tests/history-theme.spec.js

@@ -6,48 +6,48 @@ test.describe('history theme and theme variants', () => {
         const hp = HistoryTestPage.create(page, workerInfo);
         await hp.openPage({ additional: { theme: 'dark', themeVariant: 'violet' } });
         await hp.hasTheme('dark', 'violet');
-        await hp.hasBackgroundColor({ hex: '#2e2158' });
+        await hp.hasBackgroundColor({ hex: '#271c49' }); // violet dark surface-canvas
     });
 
     test('setting theme = light and themeVariant via initialSetup', async ({ page }, workerInfo) => {
         const hp = HistoryTestPage.create(page, workerInfo);
         await hp.openPage({ additional: { theme: 'light', themeVariant: 'coolGray' } });
         await hp.hasTheme('light', 'coolGray');
-        await hp.hasBackgroundColor({ hex: '#d2d5e3' });
+        await hp.hasBackgroundColor({ hex: '#e3e5ec' }); // coolGray light surface-canvas
     });
 
     test('light theme and default themeVariant when unspecified', async ({ page }, workerInfo) => {
         const hp = HistoryTestPage.create(page, workerInfo);
         await hp.openPage();
         await hp.hasTheme('light', 'default');
-        await hp.hasBackgroundColor({ hex: '#fafafa' });
+        await hp.hasBackgroundColor({ hex: '#fafafa' }); // default light surface-canvas
     });
 
     test('dark theme and default themeVariant when unspecified', async ({ page }, workerInfo) => {
         const hp = HistoryTestPage.create(page, workerInfo);
         await hp.darkMode();
         await hp.openPage();
         await hp.hasTheme('dark', 'default');
-        await hp.hasBackgroundColor({ hex: '#333333' });
+        await hp.hasBackgroundColor({ hex: '#1c1c1c' }); // default dark surface-canvas
     });
 
     test('changing theme to dark and themeVariant using onThemeUpdate', async ({ page }, workerInfo) => {
         const hp = HistoryTestPage.create(page, workerInfo);
         await hp.openPage({ additional: { theme: 'light', themeVariant: 'desert' } });
         await hp.hasTheme('light', 'desert');
-        await hp.hasBackgroundColor({ hex: '#eee9e1' });
+        await hp.hasBackgroundColor({ hex: '#f5f4ef' }); // desert light surface-canvas
         await hp.acceptsThemeUpdate('dark', 'slateBlue');
         await hp.hasTheme('dark', 'slateBlue');
-        await hp.hasBackgroundColor({ hex: '#1e3347' });
+        await hp.hasBackgroundColor({ hex: '#243a50' }); // slateBlue dark surface-canvas
     });
 
     test('changing theme to light and themeVariant using onThemeUpdate', async ({ page }, workerInfo) => {
         const hp = HistoryTestPage.create(page, workerInfo);
         await hp.openPage({ additional: { theme: 'dark', themeVariant: 'rose' } });
         await hp.hasTheme('dark', 'rose');
-        await hp.hasBackgroundColor({ hex: '#5b194b' });
+        await hp.hasBackgroundColor({ hex: '#511442' }); // rose dark surface-canvas
         await hp.acceptsThemeUpdate('light', 'green');
         await hp.hasTheme('light', 'green');
-        await hp.hasBackgroundColor({ hex: '#e3eee1' });
+        await hp.hasBackgroundColor({ hex: '#ecf5ea' }); // green light surface-canvas
     });
 });