Skip to content

Commit 6ebf5b6

Browse files
feat: update tokens from Tokens Studio release (#5280)
* feat: update tokens from Tokens Studio release * chore: use renamed background-canvas token in storybook preview --------- Co-authored-by: pomfrida <31915755+pomfrida@users.noreply.github.com> Co-authored-by: Frida <fridaerdal@hotmail.no>
1 parent 39d326a commit 6ebf5b6

21 files changed

Lines changed: 11745 additions & 1049 deletions

File tree

packages/eds-core-react/.storybook/preview.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ legend {
2020
color: var(--eds-text-primary);
2121
min-height: 100%;
2222
padding: 1rem;
23-
background-color: var(--eds-background-container-canvas-default);
23+
background-color: var(--eds-background-canvas);
2424
}
2525

2626
/* Debug grid */

packages/eds-tokens/src/tokens/css/color-scheme/dark.css

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,72 @@
3535
--eds-danger-7: var(--eds-dark-red-7);
3636
--eds-danger-8: var(--eds-dark-red-8);
3737
--eds-danger-9: var(--eds-dark-red-9);
38+
--eds-dataviz-cat-1-1: var(--eds-dark-dataviz-cat-1-1);
39+
--eds-dataviz-cat-1-2: var(--eds-dark-dataviz-cat-1-2);
40+
--eds-dataviz-cat-1-3: var(--eds-dark-dataviz-cat-1-3);
41+
--eds-dataviz-cat-1-4: var(--eds-dark-dataviz-cat-1-4);
42+
--eds-dataviz-cat-1-5: var(--eds-dark-dataviz-cat-1-5);
43+
--eds-dataviz-cat-10-1: var(--eds-dark-dataviz-cat-10-1);
44+
--eds-dataviz-cat-10-2: var(--eds-dark-dataviz-cat-10-2);
45+
--eds-dataviz-cat-10-3: var(--eds-dark-dataviz-cat-10-3);
46+
--eds-dataviz-cat-10-4: var(--eds-dark-dataviz-cat-10-4);
47+
--eds-dataviz-cat-10-5: var(--eds-dark-dataviz-cat-10-5);
48+
--eds-dataviz-cat-2-1: var(--eds-dark-dataviz-cat-2-1);
49+
--eds-dataviz-cat-2-2: var(--eds-dark-dataviz-cat-2-2);
50+
--eds-dataviz-cat-2-3: var(--eds-dark-dataviz-cat-2-3);
51+
--eds-dataviz-cat-2-4: var(--eds-dark-dataviz-cat-2-4);
52+
--eds-dataviz-cat-2-5: var(--eds-dark-dataviz-cat-2-5);
53+
--eds-dataviz-cat-3-1: var(--eds-dark-dataviz-cat-3-1);
54+
--eds-dataviz-cat-3-2: var(--eds-dark-dataviz-cat-3-2);
55+
--eds-dataviz-cat-3-3: var(--eds-dark-dataviz-cat-3-3);
56+
--eds-dataviz-cat-3-4: var(--eds-dark-dataviz-cat-3-4);
57+
--eds-dataviz-cat-3-5: var(--eds-dark-dataviz-cat-3-5);
58+
--eds-dataviz-cat-4-1: var(--eds-dark-dataviz-cat-4-1);
59+
--eds-dataviz-cat-4-2: var(--eds-dark-dataviz-cat-4-2);
60+
--eds-dataviz-cat-4-3: var(--eds-dark-dataviz-cat-4-3);
61+
--eds-dataviz-cat-4-4: var(--eds-dark-dataviz-cat-4-4);
62+
--eds-dataviz-cat-4-5: var(--eds-dark-dataviz-cat-4-5);
63+
--eds-dataviz-cat-5-1: var(--eds-dark-dataviz-cat-5-1);
64+
--eds-dataviz-cat-5-2: var(--eds-dark-dataviz-cat-5-2);
65+
--eds-dataviz-cat-5-3: var(--eds-dark-dataviz-cat-5-3);
66+
--eds-dataviz-cat-5-4: var(--eds-dark-dataviz-cat-5-4);
67+
--eds-dataviz-cat-5-5: var(--eds-dark-dataviz-cat-5-5);
68+
--eds-dataviz-cat-6-1: var(--eds-dark-dataviz-cat-6-1);
69+
--eds-dataviz-cat-6-2: var(--eds-dark-dataviz-cat-6-2);
70+
--eds-dataviz-cat-6-3: var(--eds-dark-dataviz-cat-6-3);
71+
--eds-dataviz-cat-6-4: var(--eds-dark-dataviz-cat-6-4);
72+
--eds-dataviz-cat-6-5: var(--eds-dark-dataviz-cat-6-5);
73+
--eds-dataviz-cat-7-1: var(--eds-dark-dataviz-cat-7-1);
74+
--eds-dataviz-cat-7-2: var(--eds-dark-dataviz-cat-7-2);
75+
--eds-dataviz-cat-7-3: var(--eds-dark-dataviz-cat-7-3);
76+
--eds-dataviz-cat-7-4: var(--eds-dark-dataviz-cat-7-4);
77+
--eds-dataviz-cat-7-5: var(--eds-dark-dataviz-cat-7-5);
78+
--eds-dataviz-cat-8-1: var(--eds-dark-dataviz-cat-8-1);
79+
--eds-dataviz-cat-8-2: var(--eds-dark-dataviz-cat-8-2);
80+
--eds-dataviz-cat-8-3: var(--eds-dark-dataviz-cat-8-3);
81+
--eds-dataviz-cat-8-4: var(--eds-dark-dataviz-cat-8-4);
82+
--eds-dataviz-cat-8-5: var(--eds-dark-dataviz-cat-8-5);
83+
--eds-dataviz-cat-9-1: var(--eds-dark-dataviz-cat-9-1);
84+
--eds-dataviz-cat-9-2: var(--eds-dark-dataviz-cat-9-2);
85+
--eds-dataviz-cat-9-3: var(--eds-dark-dataviz-cat-9-3);
86+
--eds-dataviz-cat-9-4: var(--eds-dark-dataviz-cat-9-4);
87+
--eds-dataviz-cat-9-5: var(--eds-dark-dataviz-cat-9-5);
88+
--eds-dataviz-div-1: var(--eds-dark-dataviz-div-1);
89+
--eds-dataviz-div-2: var(--eds-dark-dataviz-div-2);
90+
--eds-dataviz-div-3: var(--eds-dark-dataviz-div-3);
91+
--eds-dataviz-div-4: var(--eds-dark-dataviz-div-4);
92+
--eds-dataviz-div-5: var(--eds-dark-dataviz-div-5);
93+
--eds-dataviz-div-6: var(--eds-dark-dataviz-div-6);
94+
--eds-dataviz-div-7: var(--eds-dark-dataviz-div-7);
95+
--eds-dataviz-div-8: var(--eds-dark-dataviz-div-8);
96+
--eds-dataviz-div-9: var(--eds-dark-dataviz-div-9);
97+
--eds-dataviz-seq-1: var(--eds-dark-dataviz-seq-1);
98+
--eds-dataviz-seq-2: var(--eds-dark-dataviz-seq-2);
99+
--eds-dataviz-seq-3: var(--eds-dark-dataviz-seq-3);
100+
--eds-dataviz-seq-4: var(--eds-dark-dataviz-seq-4);
101+
--eds-dataviz-seq-5: var(--eds-dark-dataviz-seq-5);
102+
--eds-dataviz-seq-6: var(--eds-dark-dataviz-seq-6);
103+
--eds-dataviz-seq-7: var(--eds-dark-dataviz-seq-7);
38104
--eds-info-1: var(--eds-dark-blue-1);
39105
--eds-info-10: var(--eds-dark-blue-10);
40106
--eds-info-11: var(--eds-dark-blue-11);

packages/eds-tokens/src/tokens/css/color-scheme/light.css

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,72 @@
3535
--eds-danger-7: var(--eds-light-red-7);
3636
--eds-danger-8: var(--eds-light-red-8);
3737
--eds-danger-9: var(--eds-light-red-9);
38+
--eds-dataviz-cat-1-1: var(--eds-light-dataviz-cat-1-1);
39+
--eds-dataviz-cat-1-2: var(--eds-light-dataviz-cat-1-2);
40+
--eds-dataviz-cat-1-3: var(--eds-light-dataviz-cat-1-3);
41+
--eds-dataviz-cat-1-4: var(--eds-light-dataviz-cat-1-4);
42+
--eds-dataviz-cat-1-5: var(--eds-light-dataviz-cat-1-5);
43+
--eds-dataviz-cat-10-1: var(--eds-light-dataviz-cat-10-1);
44+
--eds-dataviz-cat-10-2: var(--eds-light-dataviz-cat-10-2);
45+
--eds-dataviz-cat-10-3: var(--eds-light-dataviz-cat-10-3);
46+
--eds-dataviz-cat-10-4: var(--eds-light-dataviz-cat-10-4);
47+
--eds-dataviz-cat-10-5: var(--eds-light-dataviz-cat-10-5);
48+
--eds-dataviz-cat-2-1: var(--eds-light-dataviz-cat-2-1);
49+
--eds-dataviz-cat-2-2: var(--eds-light-dataviz-cat-2-2);
50+
--eds-dataviz-cat-2-3: var(--eds-light-dataviz-cat-2-3);
51+
--eds-dataviz-cat-2-4: var(--eds-light-dataviz-cat-2-4);
52+
--eds-dataviz-cat-2-5: var(--eds-light-dataviz-cat-2-5);
53+
--eds-dataviz-cat-3-1: var(--eds-light-dataviz-cat-3-1);
54+
--eds-dataviz-cat-3-2: var(--eds-light-dataviz-cat-3-2);
55+
--eds-dataviz-cat-3-3: var(--eds-light-dataviz-cat-3-3);
56+
--eds-dataviz-cat-3-4: var(--eds-light-dataviz-cat-3-4);
57+
--eds-dataviz-cat-3-5: var(--eds-light-dataviz-cat-3-5);
58+
--eds-dataviz-cat-4-1: var(--eds-light-dataviz-cat-4-1);
59+
--eds-dataviz-cat-4-2: var(--eds-light-dataviz-cat-4-2);
60+
--eds-dataviz-cat-4-3: var(--eds-light-dataviz-cat-4-3);
61+
--eds-dataviz-cat-4-4: var(--eds-light-dataviz-cat-4-4);
62+
--eds-dataviz-cat-4-5: var(--eds-light-dataviz-cat-4-5);
63+
--eds-dataviz-cat-5-1: var(--eds-light-dataviz-cat-5-1);
64+
--eds-dataviz-cat-5-2: var(--eds-light-dataviz-cat-5-2);
65+
--eds-dataviz-cat-5-3: var(--eds-light-dataviz-cat-5-3);
66+
--eds-dataviz-cat-5-4: var(--eds-light-dataviz-cat-5-4);
67+
--eds-dataviz-cat-5-5: var(--eds-light-dataviz-cat-5-5);
68+
--eds-dataviz-cat-6-1: var(--eds-light-dataviz-cat-6-1);
69+
--eds-dataviz-cat-6-2: var(--eds-light-dataviz-cat-6-2);
70+
--eds-dataviz-cat-6-3: var(--eds-light-dataviz-cat-6-3);
71+
--eds-dataviz-cat-6-4: var(--eds-light-dataviz-cat-6-4);
72+
--eds-dataviz-cat-6-5: var(--eds-light-dataviz-cat-6-5);
73+
--eds-dataviz-cat-7-1: var(--eds-light-dataviz-cat-7-1);
74+
--eds-dataviz-cat-7-2: var(--eds-light-dataviz-cat-7-2);
75+
--eds-dataviz-cat-7-3: var(--eds-light-dataviz-cat-7-3);
76+
--eds-dataviz-cat-7-4: var(--eds-light-dataviz-cat-7-4);
77+
--eds-dataviz-cat-7-5: var(--eds-light-dataviz-cat-7-5);
78+
--eds-dataviz-cat-8-1: var(--eds-light-dataviz-cat-8-1);
79+
--eds-dataviz-cat-8-2: var(--eds-light-dataviz-cat-8-2);
80+
--eds-dataviz-cat-8-3: var(--eds-light-dataviz-cat-8-3);
81+
--eds-dataviz-cat-8-4: var(--eds-light-dataviz-cat-8-4);
82+
--eds-dataviz-cat-8-5: var(--eds-light-dataviz-cat-8-5);
83+
--eds-dataviz-cat-9-1: var(--eds-light-dataviz-cat-9-1);
84+
--eds-dataviz-cat-9-2: var(--eds-light-dataviz-cat-9-2);
85+
--eds-dataviz-cat-9-3: var(--eds-light-dataviz-cat-9-3);
86+
--eds-dataviz-cat-9-4: var(--eds-light-dataviz-cat-9-4);
87+
--eds-dataviz-cat-9-5: var(--eds-light-dataviz-cat-9-5);
88+
--eds-dataviz-div-1: var(--eds-light-dataviz-div-1);
89+
--eds-dataviz-div-2: var(--eds-light-dataviz-div-2);
90+
--eds-dataviz-div-3: var(--eds-light-dataviz-div-3);
91+
--eds-dataviz-div-4: var(--eds-light-dataviz-div-4);
92+
--eds-dataviz-div-5: var(--eds-light-dataviz-div-5);
93+
--eds-dataviz-div-6: var(--eds-light-dataviz-div-6);
94+
--eds-dataviz-div-7: var(--eds-light-dataviz-div-7);
95+
--eds-dataviz-div-8: var(--eds-light-dataviz-div-8);
96+
--eds-dataviz-div-9: var(--eds-light-dataviz-div-9);
97+
--eds-dataviz-seq-1: var(--eds-light-dataviz-seq-1);
98+
--eds-dataviz-seq-2: var(--eds-light-dataviz-seq-2);
99+
--eds-dataviz-seq-3: var(--eds-light-dataviz-seq-3);
100+
--eds-dataviz-seq-4: var(--eds-light-dataviz-seq-4);
101+
--eds-dataviz-seq-5: var(--eds-light-dataviz-seq-5);
102+
--eds-dataviz-seq-6: var(--eds-light-dataviz-seq-6);
103+
--eds-dataviz-seq-7: var(--eds-light-dataviz-seq-7);
38104
--eds-info-1: var(--eds-light-blue-1);
39105
--eds-info-10: var(--eds-light-blue-10);
40106
--eds-info-11: var(--eds-light-blue-11);

packages/eds-tokens/src/tokens/css/colors/default.css

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,72 @@
1414
--eds-dark-blue-7: oklch(0.61 0.1227 240.68);
1515
--eds-dark-blue-8: oklch(0.76 0.1298 240.68);
1616
--eds-dark-blue-9: oklch(0.82 0.1134 240.68);
17+
--eds-dark-dataviz-cat-1-1: #00282c;
18+
--eds-dark-dataviz-cat-1-2: #00383c;
19+
--eds-dark-dataviz-cat-1-3: #03484c;
20+
--eds-dark-dataviz-cat-1-4: #5d8386;
21+
--eds-dark-dataviz-cat-1-5: #adc3c4;
22+
--eds-dark-dataviz-cat-10-1: #671f00;
23+
--eds-dark-dataviz-cat-10-2: #aa5215;
24+
--eds-dark-dataviz-cat-10-3: #ed8b52;
25+
--eds-dark-dataviz-cat-10-4: #f7b18a;
26+
--eds-dark-dataviz-cat-10-5: #ffd5bf;
27+
--eds-dark-dataviz-cat-2-1: #544100;
28+
--eds-dark-dataviz-cat-2-2: #a28200;
29+
--eds-dark-dataviz-cat-2-3: #f4cb00;
30+
--eds-dark-dataviz-cat-2-4: #f7db79;
31+
--eds-dark-dataviz-cat-2-5: #f9eab5;
32+
--eds-dark-dataviz-cat-3-1: #003f6e;
33+
--eds-dark-dataviz-cat-3-2: #0078b7;
34+
--eds-dark-dataviz-cat-3-3: #4bb6fc;
35+
--eds-dark-dataviz-cat-3-4: #8aceff;
36+
--eds-dark-dataviz-cat-3-5: #e0c9ee;
37+
--eds-dark-dataviz-cat-4-1: #5e053e;
38+
--eds-dark-dataviz-cat-4-2: #92376a;
39+
--eds-dark-dataviz-cat-4-3: #c86499;
40+
--eds-dark-dataviz-cat-4-4: #df96ba;
41+
--eds-dark-dataviz-cat-4-5: #f4c8dc;
42+
--eds-dark-dataviz-cat-5-1: #153900;
43+
--eds-dark-dataviz-cat-5-2: #315f00;
44+
--eds-dark-dataviz-cat-5-3: #548723;
45+
--eds-dark-dataviz-cat-5-4: #8ab06f;
46+
--eds-dark-dataviz-cat-5-5: #c2d9b3;
47+
--eds-dark-dataviz-cat-6-1: #410a55;
48+
--eds-dark-dataviz-cat-6-2: #622c79;
49+
--eds-dark-dataviz-cat-6-3: #854b9e;
50+
--eds-dark-dataviz-cat-6-4: #af86c2;
51+
--eds-dark-dataviz-cat-6-5: #d9c1e5;
52+
--eds-dark-dataviz-cat-7-1: #590009;
53+
--eds-dark-dataviz-cat-7-2: #7e1823;
54+
--eds-dark-dataviz-cat-7-3: #a3383e;
55+
--eds-dark-dataviz-cat-7-4: #ca7b7a;
56+
--eds-dark-dataviz-cat-7-5: #edbcba;
57+
--eds-dark-dataviz-cat-8-1: #00432b;
58+
--eds-dark-dataviz-cat-8-2: #007853;
59+
--eds-dark-dataviz-cat-8-3: #00ad81;
60+
--eds-dark-dataviz-cat-8-4: #75c9a8;
61+
--eds-dark-dataviz-cat-8-5: #b7e5d1;
62+
--eds-dark-dataviz-cat-9-1: #052a70;
63+
--eds-dark-dataviz-cat-9-2: #2a53a0;
64+
--eds-dark-dataviz-cat-9-3: #507ed3;
65+
--eds-dark-dataviz-cat-9-4: #87a9e7;
66+
--eds-dark-dataviz-cat-9-5: #bfd4f9;
67+
--eds-dark-dataviz-div-1: #539cec;
68+
--eds-dark-dataviz-div-2: #4579b2;
69+
--eds-dark-dataviz-div-3: #38577b;
70+
--eds-dark-dataviz-div-4: #2a3848;
71+
--eds-dark-dataviz-div-5: #1b1b1b;
72+
--eds-dark-dataviz-div-6: #443224;
73+
--eds-dark-dataviz-div-7: #724b2c;
74+
--eds-dark-dataviz-div-8: #a36530;
75+
--eds-dark-dataviz-div-9: #d78031;
76+
--eds-dark-dataviz-seq-1: #243032;
77+
--eds-dark-dataviz-seq-2: #2a4f54;
78+
--eds-dark-dataviz-seq-3: #14727b;
79+
--eds-dark-dataviz-seq-4: #0096a4;
80+
--eds-dark-dataviz-seq-5: #00b9c9;
81+
--eds-dark-dataviz-seq-6: #5dd8e5;
82+
--eds-dark-dataviz-seq-7: #acf3fb;
1783
--eds-dark-gray-1: oklch(0.19 0 0);
1884
--eds-dark-gray-10: oklch(0.88 0 0);
1985
--eds-dark-gray-11: oklch(0.93 0 0);
@@ -119,6 +185,72 @@
119185
--eds-light-blue-7: oklch(0.72 0.1134 240.68);
120186
--eds-light-blue-8: oklch(0.62 0.1351 240.68);
121187
--eds-light-blue-9: oklch(0.52 0.1253 240.68);
188+
--eds-light-dataviz-cat-1-1: #adc3c4;
189+
--eds-light-dataviz-cat-1-2: #5d8386;
190+
--eds-light-dataviz-cat-1-3: #03484c;
191+
--eds-light-dataviz-cat-1-4: #00383c;
192+
--eds-light-dataviz-cat-1-5: #00282c;
193+
--eds-light-dataviz-cat-10-1: #ffd5bf;
194+
--eds-light-dataviz-cat-10-2: #f7b18a;
195+
--eds-light-dataviz-cat-10-3: #ed8b52;
196+
--eds-light-dataviz-cat-10-4: #aa5215;
197+
--eds-light-dataviz-cat-10-5: #671f00;
198+
--eds-light-dataviz-cat-2-1: #f9eab5;
199+
--eds-light-dataviz-cat-2-2: #f7db79;
200+
--eds-light-dataviz-cat-2-3: #f4cb00;
201+
--eds-light-dataviz-cat-2-4: #a28200;
202+
--eds-light-dataviz-cat-2-5: #544100;
203+
--eds-light-dataviz-cat-3-1: #c0e6ff;
204+
--eds-light-dataviz-cat-3-2: #8aceff;
205+
--eds-light-dataviz-cat-3-3: #4bb6fc;
206+
--eds-light-dataviz-cat-3-4: #0078b7;
207+
--eds-light-dataviz-cat-3-5: #003f6e;
208+
--eds-light-dataviz-cat-4-1: #f4c8dc;
209+
--eds-light-dataviz-cat-4-2: #df96ba;
210+
--eds-light-dataviz-cat-4-3: #c86499;
211+
--eds-light-dataviz-cat-4-4: #92376a;
212+
--eds-light-dataviz-cat-4-5: #5e053e;
213+
--eds-light-dataviz-cat-5-1: #c2d9b3;
214+
--eds-light-dataviz-cat-5-2: #8ab06f;
215+
--eds-light-dataviz-cat-5-3: #548723;
216+
--eds-light-dataviz-cat-5-4: #315f00;
217+
--eds-light-dataviz-cat-5-5: #153900;
218+
--eds-light-dataviz-cat-6-1: #d9c1e5;
219+
--eds-light-dataviz-cat-6-2: #af86c2;
220+
--eds-light-dataviz-cat-6-3: #854b9e;
221+
--eds-light-dataviz-cat-6-4: #622c79;
222+
--eds-light-dataviz-cat-6-5: #410a55;
223+
--eds-light-dataviz-cat-7-1: #edbcba;
224+
--eds-light-dataviz-cat-7-2: #ca7b7a;
225+
--eds-light-dataviz-cat-7-3: #a3383e;
226+
--eds-light-dataviz-cat-7-4: #7e1823;
227+
--eds-light-dataviz-cat-7-5: #590009;
228+
--eds-light-dataviz-cat-8-1: #b7e5d1;
229+
--eds-light-dataviz-cat-8-2: #75c9a8;
230+
--eds-light-dataviz-cat-8-3: #00ad81;
231+
--eds-light-dataviz-cat-8-4: #007853;
232+
--eds-light-dataviz-cat-8-5: #00432b;
233+
--eds-light-dataviz-cat-9-1: #bfd4f9;
234+
--eds-light-dataviz-cat-9-2: #87a9e7;
235+
--eds-light-dataviz-cat-9-3: #507ed3;
236+
--eds-light-dataviz-cat-9-4: #2a53a0;
237+
--eds-light-dataviz-cat-9-5: #052a70;
238+
--eds-light-dataviz-div-1: #1564b0;
239+
--eds-light-dataviz-div-2: #5387c1;
240+
--eds-light-dataviz-div-3: #87a9d2;
241+
--eds-light-dataviz-div-4: #bacce1;
242+
--eds-light-dataviz-div-5: #eeeeee;
243+
--eds-light-dataviz-div-6: #dcc5b4;
244+
--eds-light-dataviz-div-7: #c89c7a;
245+
--eds-light-dataviz-div-8: #b2733f;
246+
--eds-light-dataviz-div-9: #9b4900;
247+
--eds-light-dataviz-seq-1: #dff7fa;
248+
--eds-light-dataviz-seq-2: #a4dbe2;
249+
--eds-light-dataviz-seq-3: #59c1cc;
250+
--eds-light-dataviz-seq-4: #00a4b3;
251+
--eds-light-dataviz-seq-5: #008290;
252+
--eds-light-dataviz-seq-6: #00626c;
253+
--eds-light-dataviz-seq-7: #054046;
122254
--eds-light-gray-1: oklch(0.98 0 0);
123255
--eds-light-gray-10: oklch(0.47 0 0);
124256
--eds-light-gray-11: oklch(0.42 0 0);

0 commit comments

Comments
 (0)