Skip to content

Commit ed24d57

Browse files
noisysocksnoisysocks
committed
Add design tokens and update theme variables
1 parent d0635dc commit ed24d57

File tree

6 files changed

+57
-48
lines changed

6 files changed

+57
-48
lines changed

‎special-pages/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
},
2929
"license": "ISC",
3030
"devDependencies": {
31+
"@duckduckgo/design-tokens": "github:duckduckgo/design-tokens#v0.1.0",
3132
"@duckduckgo/messaging": "*",
3233
"chokidar": "^4.0.3",
3334
"fast-check": "^4.2.0",

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

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -69,39 +69,37 @@ body {
6969
--history-text-muted: var(--color-white-at-60);
7070
}
7171

72-
/* TODO: Use colour variables from design-tokens */
73-
7472
[data-theme-variant="coolGray"] {
75-
--default-light-background-color: #d2d5e3;
76-
--default-dark-background-color: #2b2f45;
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);
7775
}
7876

7977
[data-theme-variant="slateBlue"] {
80-
--default-light-background-color: #d2e5f3;
81-
--default-dark-background-color: #1e3347;
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);
8280
}
8381

8482
[data-theme-variant="green"] {
85-
--default-light-background-color: #e3eee1;
86-
--default-dark-background-color: #203b30;
83+
--default-light-background-color: var(--ds-color-green-light-surface-primary);
84+
--default-dark-background-color: var(--ds-color-green-dark-surface-primary);
8785
}
8886

8987
[data-theme-variant="violet"] {
90-
--default-light-background-color: #e7e4f5;
91-
--default-dark-background-color: #2e2158;
88+
--default-light-background-color: var(--ds-color-violet-light-surface-primary);
89+
--default-dark-background-color: var(--ds-color-violet-dark-surface-primary);
9290
}
9391

9492
[data-theme-variant="rose"] {
95-
--default-light-background-color: #f8ebf5;
96-
--default-dark-background-color: #5b194b;
93+
--default-light-background-color: var(--ds-color-rose-light-surface-primary);
94+
--default-dark-background-color: var(--ds-color-rose-dark-surface-primary);
9795
}
9896

9997
[data-theme-variant="orange"] {
100-
--default-light-background-color: #fcedd8;
101-
--default-dark-background-color: #54240c;
98+
--default-light-background-color: var(--ds-color-orange-light-surface-primary);
99+
--default-dark-background-color: var(--ds-color-orange-dark-surface-primary);
102100
}
103101

104102
[data-theme-variant="desert"] {
105-
--default-light-background-color: #eee9e1;
106-
--default-dark-background-color: #3c3833;
103+
--default-light-background-color: var(--ds-color-desert-light-surface-primary);
104+
--default-dark-background-color: var(--ds-color-desert-dark-surface-primary);
107105
}

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

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -42,41 +42,39 @@ body {
4242
--default-dark-background-color: var(--color-gray-85);
4343
}
4444

45-
/* TODO: Use colour variables from design-tokens */
46-
4745
body[data-theme-variant="coolGray"] {
48-
--default-light-background-color: #d2d5e3;
49-
--default-dark-background-color: #2b2f45;
46+
--default-light-background-color: var(--ds-color-cool-gray-light-surface-primary);
47+
--default-dark-background-color: var(--ds-color-cool-gray-dark-surface-primary);
5048
}
5149

5250
body[data-theme-variant="slateBlue"] {
53-
--default-light-background-color: #d2e5f3;
54-
--default-dark-background-color: #1e3347;
51+
--default-light-background-color: var(--ds-color-slate-blue-light-surface-primary);
52+
--default-dark-background-color: var(--ds-color-slate-blue-dark-surface-primary);
5553
}
5654

5755
body[data-theme-variant="green"] {
58-
--default-light-background-color: #e3eee1;
59-
--default-dark-background-color: #203b30;
56+
--default-light-background-color: var(--ds-color-green-light-surface-primary);
57+
--default-dark-background-color: var(--ds-color-green-dark-surface-primary);
6058
}
6159

6260
body[data-theme-variant="violet"] {
63-
--default-light-background-color: #e7e4f5;
64-
--default-dark-background-color: #2e2158;
61+
--default-light-background-color: var(--ds-color-violet-light-surface-primary);
62+
--default-dark-background-color: var(--ds-color-violet-dark-surface-primary);
6563
}
6664

6765
body[data-theme-variant="rose"] {
68-
--default-light-background-color: #f8ebf5;
69-
--default-dark-background-color: #5b194b;
66+
--default-light-background-color: var(--ds-color-rose-light-surface-primary);
67+
--default-dark-background-color: var(--ds-color-rose-dark-surface-primary);
7068
}
7169

7270
body[data-theme-variant="orange"] {
73-
--default-light-background-color: #fcedd8;
74-
--default-dark-background-color: #54240c;
71+
--default-light-background-color: var(--ds-color-orange-light-surface-primary);
72+
--default-dark-background-color: var(--ds-color-orange-dark-surface-primary);
7573
}
7674

7775
body[data-theme-variant="desert"] {
78-
--default-light-background-color: #eee9e1;
79-
--default-dark-background-color: #3c3833;
76+
--default-light-background-color: var(--ds-color-desert-light-surface-primary);
77+
--default-dark-background-color: var(--ds-color-desert-dark-surface-primary);
8078
}
8179

8280
[data-theme=light] {

‎special-pages/pages/special-error/app/styles/variables.css‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -31,39 +31,37 @@ body[data-theme='dark'][data-platform-name='ios'][data-theme-variant='default']
3131
--theme-background-color: #222;
3232
}
3333

34-
/* TODO: Use colour variables from design-tokens */
35-
3634
body[data-theme-variant='coolGray'] {
37-
--default-light-background-color: #d2d5e3;
38-
--default-dark-background-color: #2b2f45;
35+
--default-light-background-color: var(--ds-color-cool-gray-light-surface-primary);
36+
--default-dark-background-color: var(--ds-color-cool-gray-dark-surface-primary);
3937
}
4038

4139
body[data-theme-variant='slateBlue'] {
42-
--default-light-background-color: #d2e5f3;
43-
--default-dark-background-color: #1e3347;
40+
--default-light-background-color: var(--ds-color-slate-blue-light-surface-primary);
41+
--default-dark-background-color: var(--ds-color-slate-blue-dark-surface-primary);
4442
}
4543

4644
body[data-theme-variant='green'] {
47-
--default-light-background-color: #e3eee1;
48-
--default-dark-background-color: #203b30;
45+
--default-light-background-color: var(--ds-color-green-light-surface-primary);
46+
--default-dark-background-color: var(--ds-color-green-dark-surface-primary);
4947
}
5048

5149
body[data-theme-variant='violet'] {
52-
--default-light-background-color: #e7e4f5;
53-
--default-dark-background-color: #2e2158;
50+
--default-light-background-color: var(--ds-color-violet-light-surface-primary);
51+
--default-dark-background-color: var(--ds-color-violet-dark-surface-primary);
5452
}
5553

5654
body[data-theme-variant='rose'] {
57-
--default-light-background-color: #f8ebf5;
58-
--default-dark-background-color: #5b194b;
55+
--default-light-background-color: var(--ds-color-rose-light-surface-primary);
56+
--default-dark-background-color: var(--ds-color-rose-dark-surface-primary);
5957
}
6058

6159
body[data-theme-variant='orange'] {
62-
--default-light-background-color: #fcedd8;
63-
--default-dark-background-color: #54240c;
60+
--default-light-background-color: var(--ds-color-orange-light-surface-primary);
61+
--default-dark-background-color: var(--ds-color-orange-dark-surface-primary);
6462
}
6563

6664
body[data-theme-variant='desert'] {
67-
--default-light-background-color: #eee9e1;
68-
--default-dark-background-color: #3c3833;
65+
--default-light-background-color: var(--ds-color-desert-light-surface-primary);
66+
--default-dark-background-color: var(--ds-color-desert-dark-surface-primary);
6967
}

‎special-pages/shared/styles/design-tokens.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* Design Tokens
3+
*
4+
* This file imports CSS custom properties from the @duckduckgo/design-tokens package.
5+
* The tokens provide a consistent color palette and semantic tokens for light/dark themes
6+
* as well as theme variants (coolGray, slateBlue, green, violet, rose, orange, desert).
7+
*
8+
* All tokens use the `--ds-*` prefix (Design System).
9+
*
10+
* @see https://dub.duckduckgo.com/duckduckgo/design-tokens
11+
*/
12+
@import url("../../../node_modules/@duckduckgo/design-tokens/build/desktop-browsers/tokens.css");

‎special-pages/shared/styles/variables.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import url("design-tokens.css");
2+
13
:root {
24
--base: 16px;
35
font-size: calc(16px / var(--base));

0 commit comments

Comments
 (0)