Skip to content

Commit 791d0c2

Browse files
noisysocksnoisysocks
authored
NTP: Use design system colors (#2095)
* Use mock customizer data in Components * Add theme variant CSS vars, fix background colors * Migrate ntp- to ds- color variables * Replace --ntp color variables with --ds equivalents * Update design-tokens to v0.2.0 * Remove duplicate focus ring definition * Remove --ntp-widget-expander-bg var * Fix Toggle Duck.ai icon color * Update background color assertions to surface-canvas
1 parent 025c91b commit 791d0c2

File tree

35 files changed

+915
-269
lines changed

35 files changed

+915
-269
lines changed

‎package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎special-pages/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
},
2929
"license": "ISC",
3030
"devDependencies": {
31-
"@duckduckgo/design-tokens": "github:duckduckgo/design-tokens#v0.1.0",
31+
"@duckduckgo/design-tokens": "github:duckduckgo/design-tokens#v0.2.0",
3232
"@duckduckgo/messaging": "*",
3333
"chokidar": "^5.0.0",
3434
"fast-check": "^4.4.0",

‎special-pages/pages/errorpage/src/index.css‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -70,21 +70,21 @@ body {
7070
}
7171

7272
/* Theme variants - light mode */
73-
[data-theme-variant="coolGray"] { background: var(--ds-color-cool-gray-light-surface-primary); }
74-
[data-theme-variant="slateBlue"] { background: var(--ds-color-slate-blue-light-surface-primary); }
75-
[data-theme-variant="green"] { background: var(--ds-color-green-light-surface-primary); }
76-
[data-theme-variant="violet"] { background: var(--ds-color-violet-light-surface-primary); }
77-
[data-theme-variant="rose"] { background: var(--ds-color-rose-light-surface-primary); }
78-
[data-theme-variant="orange"] { background: var(--ds-color-orange-light-surface-primary); }
79-
[data-theme-variant="desert"] { background: var(--ds-color-desert-light-surface-primary); }
73+
[data-theme-variant="coolGray"] { background: var(--ds-color-theme-cool-gray-light-surface-primary); }
74+
[data-theme-variant="slateBlue"] { background: var(--ds-color-theme-slate-blue-light-surface-primary); }
75+
[data-theme-variant="green"] { background: var(--ds-color-theme-green-light-surface-primary); }
76+
[data-theme-variant="violet"] { background: var(--ds-color-theme-violet-light-surface-primary); }
77+
[data-theme-variant="rose"] { background: var(--ds-color-theme-rose-light-surface-primary); }
78+
[data-theme-variant="orange"] { background: var(--ds-color-theme-orange-light-surface-primary); }
79+
[data-theme-variant="desert"] { background: var(--ds-color-theme-desert-light-surface-primary); }
8080

8181
/* Theme variants - dark mode */
8282
@media (prefers-color-scheme: dark) {
83-
[data-theme-variant="coolGray"] { background: var(--ds-color-cool-gray-dark-surface-primary); }
84-
[data-theme-variant="slateBlue"] { background: var(--ds-color-slate-blue-dark-surface-primary); }
85-
[data-theme-variant="green"] { background: var(--ds-color-green-dark-surface-primary); }
86-
[data-theme-variant="violet"] { background: var(--ds-color-violet-dark-surface-primary); }
87-
[data-theme-variant="rose"] { background: var(--ds-color-rose-dark-surface-primary); }
88-
[data-theme-variant="orange"] { background: var(--ds-color-orange-dark-surface-primary); }
89-
[data-theme-variant="desert"] { background: var(--ds-color-desert-dark-surface-primary); }
83+
[data-theme-variant="coolGray"] { background: var(--ds-color-theme-cool-gray-dark-surface-primary); }
84+
[data-theme-variant="slateBlue"] { background: var(--ds-color-theme-slate-blue-dark-surface-primary); }
85+
[data-theme-variant="green"] { background: var(--ds-color-theme-green-dark-surface-primary); }
86+
[data-theme-variant="violet"] { background: var(--ds-color-theme-violet-dark-surface-primary); }
87+
[data-theme-variant="rose"] { background: var(--ds-color-theme-rose-dark-surface-primary); }
88+
[data-theme-variant="orange"] { background: var(--ds-color-theme-orange-dark-surface-primary); }
89+
[data-theme-variant="desert"] { background: var(--ds-color-theme-desert-dark-surface-primary); }
9090
}

‎special-pages/pages/history/styles/history-theme.css‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -70,36 +70,36 @@ body {
7070
}
7171

7272
[data-theme-variant="coolGray"] {
73-
--default-light-background-color: var(--ds-color-cool-gray-light-surface-primary);
74-
--default-dark-background-color: var(--ds-color-cool-gray-dark-surface-primary);
73+
--default-light-background-color: var(--ds-color-theme-cool-gray-light-surface-primary);
74+
--default-dark-background-color: var(--ds-color-theme-cool-gray-dark-surface-primary);
7575
}
7676

7777
[data-theme-variant="slateBlue"] {
78-
--default-light-background-color: var(--ds-color-slate-blue-light-surface-primary);
79-
--default-dark-background-color: var(--ds-color-slate-blue-dark-surface-primary);
78+
--default-light-background-color: var(--ds-color-theme-slate-blue-light-surface-primary);
79+
--default-dark-background-color: var(--ds-color-theme-slate-blue-dark-surface-primary);
8080
}
8181

8282
[data-theme-variant="green"] {
83-
--default-light-background-color: var(--ds-color-green-light-surface-primary);
84-
--default-dark-background-color: var(--ds-color-green-dark-surface-primary);
83+
--default-light-background-color: var(--ds-color-theme-green-light-surface-primary);
84+
--default-dark-background-color: var(--ds-color-theme-green-dark-surface-primary);
8585
}
8686

8787
[data-theme-variant="violet"] {
88-
--default-light-background-color: var(--ds-color-violet-light-surface-primary);
89-
--default-dark-background-color: var(--ds-color-violet-dark-surface-primary);
88+
--default-light-background-color: var(--ds-color-theme-violet-light-surface-primary);
89+
--default-dark-background-color: var(--ds-color-theme-violet-dark-surface-primary);
9090
}
9191

9292
[data-theme-variant="rose"] {
93-
--default-light-background-color: var(--ds-color-rose-light-surface-primary);
94-
--default-dark-background-color: var(--ds-color-rose-dark-surface-primary);
93+
--default-light-background-color: var(--ds-color-theme-rose-light-surface-primary);
94+
--default-dark-background-color: var(--ds-color-theme-rose-dark-surface-primary);
9595
}
9696

9797
[data-theme-variant="orange"] {
98-
--default-light-background-color: var(--ds-color-orange-light-surface-primary);
99-
--default-dark-background-color: var(--ds-color-orange-dark-surface-primary);
98+
--default-light-background-color: var(--ds-color-theme-orange-light-surface-primary);
99+
--default-dark-background-color: var(--ds-color-theme-orange-dark-surface-primary);
100100
}
101101

102102
[data-theme-variant="desert"] {
103-
--default-light-background-color: var(--ds-color-desert-light-surface-primary);
104-
--default-dark-background-color: var(--ds-color-desert-dark-surface-primary);
103+
--default-light-background-color: var(--ds-color-theme-desert-light-surface-primary);
104+
--default-dark-background-color: var(--ds-color-theme-desert-dark-surface-primary);
105105
}

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@
9898
font-size: var(--title-3-em-font-size);
9999
font-weight: var(--title-3-em-font-weight);
100100
text-decoration: none;
101-
color: var(--ntp-text-normal);
101+
color: var(--ds-color-theme-text-primary);
102102
height: 35px;
103103
display: flex;
104104
align-items: center;
@@ -109,7 +109,7 @@
109109
min-width: 0;
110110

111111
&:hover, &:focus-visible {
112-
color: var(--ntp-color-primary);
112+
color: var(--ds-color-theme-accent-primary);
113113
.favicon {
114114
transform: scale(1.08)
115115
}
@@ -133,7 +133,7 @@
133133
background: transparent;
134134
padding: 0;
135135
margin: 0;
136-
color: var(--ntp-text-normal);
136+
color: var(--ds-color-theme-text-primary);
137137
svg {
138138
position: absolute;
139139
top: 50%;
@@ -218,15 +218,15 @@
218218
font-size: var(--small-label-font-size);
219219
font-weight: var(--small-label-font-weight);
220220
line-height: var(--small-label-line-height);
221-
color: var(--ntp-text-normal);
221+
color: var(--ds-color-theme-text-primary);
222222
text-decoration: none;
223223
min-width: 0;
224224
white-space: nowrap;
225225
overflow: hidden;
226226
text-overflow: ellipsis;
227227

228228
&:hover, &:focus-visible {
229-
color: var(--ntp-color-primary)
229+
color: var(--ds-color-theme-accent-primary)
230230
}
231231

232232
&:hover .time {
@@ -238,7 +238,7 @@
238238
.time {
239239
flex-shrink: 0;
240240
margin-left: 8px;
241-
color: var(--ntp-text-muted);
241+
color: var(--ds-color-theme-text-secondary);
242242
opacity: 0.6;
243243
font-size: var(--small-label-font-size);
244244
font-weight: var(--small-label-font-weight);

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@
100100
font-size: var(--title-3-em-font-size);
101101
font-weight: var(--title-3-em-font-weight);
102102
text-decoration: none;
103-
color: var(--ntp-text-normal);
103+
color: var(--ds-color-theme-text-primary);
104104
height: 35px;
105105
display: flex;
106106
align-items: center;
@@ -111,7 +111,7 @@
111111
min-width: 0;
112112

113113
&:hover, &:focus-visible {
114-
color: var(--ntp-color-primary);
114+
color: var(--ds-color-theme-accent-primary);
115115
.favicon {
116116
transform: scale(1.08)
117117
}
@@ -135,7 +135,7 @@
135135
background: transparent;
136136
padding: 0;
137137
margin: 0;
138-
color: var(--ntp-text-normal);
138+
color: var(--ds-color-theme-text-primary);
139139
svg {
140140
position: absolute;
141141
top: 50%;
@@ -224,15 +224,15 @@
224224
font-size: var(--small-label-font-size);
225225
font-weight: var(--small-label-font-weight);
226226
line-height: var(--small-label-line-height);
227-
color: var(--ntp-text-normal);
227+
color: var(--ds-color-theme-text-primary);
228228
text-decoration: none;
229229
min-width: 0;
230230
white-space: nowrap;
231231
overflow: hidden;
232232
text-overflow: ellipsis;
233233

234234
&:hover, &:focus-visible {
235-
color: var(--ntp-color-primary)
235+
color: var(--ds-color-theme-accent-primary)
236236
}
237237

238238
&:hover .time {
@@ -244,7 +244,7 @@
244244
.time {
245245
flex-shrink: 0;
246246
margin-left: 8px;
247-
color: var(--ntp-text-muted);
247+
color: var(--ds-color-theme-text-secondary);
248248
opacity: 0.6;
249249
font-size: var(--small-label-font-size);
250250
font-weight: var(--small-label-font-weight);
@@ -293,4 +293,4 @@
293293
transform: rotate(180deg)
294294
}
295295
}
296-
}
296+
}

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ body[data-animate-background="true"] {
5555
height: 100vh;
5656
overflow: auto;
5757
grid-area: main;
58-
color: var(--ntp-text-normal);
58+
color: var(--ds-color-theme-text-primary);
5959
}
6060

6161
/* WebKit-only fix for layout shift when scrollbar appears */
@@ -66,7 +66,7 @@ body[data-animate-background="true"] {
6666
}
6767

6868
.themeContext {
69-
color: var(--ntp-text-normal);
69+
color: var(--ds-color-theme-text-primary);
7070
}
7171

7272
.mainLayout {
@@ -98,8 +98,8 @@ body[data-animate-background="true"] {
9898
}
9999

100100
.aside {
101-
color: var(--ntp-text-normal);
102-
background: var(--ntp-surfaces-panel-background-color);
101+
color: var(--ds-color-theme-text-primary);
102+
background: var(--ds-color-theme-surface-tertiary);
103103
grid-area: aside;
104104
height: 100vh;
105105
z-index: 1;
@@ -153,7 +153,7 @@ body[data-animate-background="true"] {
153153

154154
&::-webkit-scrollbar-thumb {
155155
background: rgb(108, 108, 108);
156-
border: 4px solid var(--ntp-surfaces-panel-background-color);
156+
border: 4px solid var(--ds-color-theme-surface-tertiary);
157157
border-radius: 6px;
158158
}
159159
}
@@ -164,4 +164,4 @@ body[data-animate-background="true"] {
164164
.paddedErrorRecovery {
165165
margin-top: 1rem;
166166

167-
}
167+
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
}
1414

1515
&:has([data-errored=true]) {
16-
outline: 1px solid var(--ntp-surface-border-color);
16+
outline: 1px solid var(--ds-color-theme-container-border-primary);
1717
[data-theme=dark] & {
1818
outline-color: var(--color-white-at-9);
1919
}
@@ -26,4 +26,4 @@
2626

2727
.companyImgIcon[data-loaded=true] {
2828
opacity: 1;
29-
}
29+
}

‎special-pages/pages/new-tab/app/components/Components.jsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { useThemes } from '../customizer/themes.js';
55
import { useSignal } from '@preact/signals';
66
import { BackgroundConsumer } from './BackgroundProvider.js';
77
import { CustomizerThemesContext } from '../customizer/CustomizerProvider.js';
8+
import { customizerData } from '../customizer/mocks.js';
9+
810
const url = new URL(window.location.href);
911

1012
const list = {
@@ -22,14 +24,7 @@ export function Components() {
2224
const validIds = ids.filter((id) => entryIds.includes(id));
2325
const filtered = validIds.length ? validIds.map((id) => /** @type {const} */ ([id, list[id]])) : entries;
2426

25-
/** @type {import('../../types/new-tab').CustomizerData} */
26-
const data = {
27-
background: { kind: 'default' },
28-
userImages: [],
29-
theme: 'system',
30-
userColor: null,
31-
};
32-
const dataSignal = useSignal(data);
27+
const dataSignal = useSignal(customizerData());
3328
const { main, browser, variant } = useThemes(dataSignal);
3429

3530
return (

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ body[data-display="components"] {
55
padding-right: 0;
66

77
a {
8-
color: var(--ntp-text-normal);
8+
color: var(--ds-color-theme-text-primary);
99
}
1010
}
1111

1212
.main {
1313
height: 100vh;
1414
overflow: auto;
15-
color: var(--ntp-text-normal);
15+
color: var(--ds-color-theme-text-primary);
1616
}
1717

1818

@@ -65,7 +65,7 @@ body:has(.tubeGrid):has([data-isolated=true]) {
6565
}
6666

6767
.itemLink {
68-
color: var(--ntp-text-normal);
68+
color: var(--ds-color-theme-text-primary);
6969
padding: 0.2em 0.3em;
7070
border: 1px solid var(--color-gray-60);
7171
border-radius: var(--border-radius-xs);

0 commit comments

Comments
 (0)