@udir-design/theme 0.1.0-2 → 1.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +12 -2
  3. package/dist/colors.d.ts +10 -0
  4. package/dist/udir/builtin-colors.css +87 -0
  5. package/dist/udir/color/accent.css +24 -0
  6. package/dist/udir/color/support1.css +24 -0
  7. package/dist/udir/color/support2.css +24 -0
  8. package/dist/udir/color/support3.css +24 -0
  9. package/dist/udir/color-scheme/dark.css +473 -0
  10. package/dist/udir/color-scheme/light.css +473 -0
  11. package/dist/udir/semantic.css +54 -51
  12. package/dist/udir/typography/primary.css +22 -54
  13. package/dist/udir/typography/secondary.css +22 -54
  14. package/dist/udir.css +1118 -1604
  15. package/package.json +11 -5
  16. package/dist/udir/color-mode/contrast.css +0 -311
  17. package/dist/udir/color-mode/dark.css +0 -623
  18. package/dist/udir/color-mode/light.css +0 -623
package/dist/udir.css CHANGED
@@ -6,618 +6,468 @@
6
6
  * These files are generated from design tokens defind using Token Studio
7
7
  */
8
8
 
9
- @layer ds.theme.color-mode.light {
10
- :root, [data-ds-color-mode="light"] {
11
- --ds-color-accent-1: #fefefe;
12
- --ds-color-accent-2: #f2f2f2;
13
- --ds-color-accent-3: #e1e1e1;
14
- --ds-color-accent-4: #d0d0d0;
15
- --ds-color-accent-5: #c1c1c1;
16
- --ds-color-accent-6: #bbbbbb;
17
- --ds-color-accent-7: #818181;
18
- --ds-color-accent-8: #4e4e4e;
19
- --ds-color-accent-9: #303030;
20
- --ds-color-accent-10: #424242;
21
- --ds-color-accent-11: #555555;
22
- --ds-color-accent-12: #636363;
23
- --ds-color-accent-13: #2c2c2c;
24
- --ds-color-accent-contrast-1: #ffffff;
25
- --ds-color-accent-contrast-2: #c6c6c6;
26
- --ds-color-accent-background-default: var(--ds-color-accent-1);
27
- --ds-color-accent-background-subtle: var(--ds-color-accent-2);
28
- --ds-color-accent-surface-default: var(--ds-color-accent-3);
29
- --ds-color-accent-surface-hover: var(--ds-color-accent-4);
30
- --ds-color-accent-surface-active: var(--ds-color-accent-5);
31
- --ds-color-accent-border-subtle: var(--ds-color-accent-6);
32
- --ds-color-accent-border-default: var(--ds-color-accent-7);
33
- --ds-color-accent-border-strong: var(--ds-color-accent-8);
34
- --ds-color-accent-base-default: var(--ds-color-accent-9);
35
- --ds-color-accent-base-hover: var(--ds-color-accent-10);
36
- --ds-color-accent-base-active: var(--ds-color-accent-11);
37
- --ds-color-accent-text-subtle: var(--ds-color-accent-12);
38
- --ds-color-accent-text-default: var(--ds-color-accent-13);
39
- --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1);
40
- --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2);
41
- --ds-color-neutral-1: #fefefe;
42
- --ds-color-neutral-2: #f2f2f2;
43
- --ds-color-neutral-3: #e1e1e1;
44
- --ds-color-neutral-4: #d0d0d0;
45
- --ds-color-neutral-5: #c1c1c1;
46
- --ds-color-neutral-6: #bbbbbb;
47
- --ds-color-neutral-7: #818181;
48
- --ds-color-neutral-8: #4e4e4e;
49
- --ds-color-neutral-9: #dedede;
50
- --ds-color-neutral-10: #c6c6c6;
51
- --ds-color-neutral-11: #b0b0b0;
52
- --ds-color-neutral-12: #636363;
53
- --ds-color-neutral-13: #2c2c2c;
54
- --ds-color-neutral-contrast-1: #000000;
55
- --ds-color-neutral-contrast-2: #424242;
56
- --ds-color-neutral-background-default: var(--ds-color-neutral-1);
57
- --ds-color-neutral-background-subtle: var(--ds-color-neutral-2);
58
- --ds-color-neutral-surface-default: var(--ds-color-neutral-3);
59
- --ds-color-neutral-surface-hover: var(--ds-color-neutral-4);
60
- --ds-color-neutral-surface-active: var(--ds-color-neutral-5);
61
- --ds-color-neutral-border-subtle: var(--ds-color-neutral-6);
62
- --ds-color-neutral-border-default: var(--ds-color-neutral-7);
63
- --ds-color-neutral-border-strong: var(--ds-color-neutral-8);
64
- --ds-color-neutral-base-default: var(--ds-color-neutral-9);
65
- --ds-color-neutral-base-hover: var(--ds-color-neutral-10);
66
- --ds-color-neutral-base-active: var(--ds-color-neutral-11);
67
- --ds-color-neutral-text-subtle: var(--ds-color-neutral-12);
68
- --ds-color-neutral-text-default: var(--ds-color-neutral-13);
69
- --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1);
70
- --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2);
71
- --ds-color-brand1-1: #fcfefd;
72
- --ds-color-brand1-2: #e7f5ee;
73
- --ds-color-brand1-3: #cae9d9;
74
- --ds-color-brand1-4: #abdcc3;
75
- --ds-color-brand1-5: #8ccfad;
76
- --ds-color-brand1-6: #81cba5;
77
- --ds-color-brand1-7: #548c6f;
78
- --ds-color-brand1-8: #325443;
79
- --ds-color-brand1-9: #76c69d;
80
- --ds-color-brand1-10: #68af8a;
81
- --ds-color-brand1-11: #5a9878;
82
- --ds-color-brand1-12: #406b55;
83
- --ds-color-brand1-13: #1d3026;
84
- --ds-color-brand1-contrast-1: #000000;
85
- --ds-color-brand1-contrast-2: #182720;
86
- --ds-color-brand1-background-default: var(--ds-color-brand1-1);
87
- --ds-color-brand1-background-subtle: var(--ds-color-brand1-2);
88
- --ds-color-brand1-surface-default: var(--ds-color-brand1-3);
89
- --ds-color-brand1-surface-hover: var(--ds-color-brand1-4);
90
- --ds-color-brand1-surface-active: var(--ds-color-brand1-5);
91
- --ds-color-brand1-border-subtle: var(--ds-color-brand1-6);
92
- --ds-color-brand1-border-default: var(--ds-color-brand1-7);
93
- --ds-color-brand1-border-strong: var(--ds-color-brand1-8);
94
- --ds-color-brand1-base-default: var(--ds-color-brand1-9);
95
- --ds-color-brand1-base-hover: var(--ds-color-brand1-10);
96
- --ds-color-brand1-base-active: var(--ds-color-brand1-11);
97
- --ds-color-brand1-text-subtle: var(--ds-color-brand1-12);
98
- --ds-color-brand1-text-default: var(--ds-color-brand1-13);
99
- --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1);
100
- --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2);
101
- --ds-color-brand2-1: #fefeff;
102
- --ds-color-brand2-2: #ecf3f8;
103
- --ds-color-brand2-3: #d5e4f0;
104
- --ds-color-brand2-4: #bdd4e7;
105
- --ds-color-brand2-5: #aec3d4;
106
- --ds-color-brand2-6: #a9bece;
107
- --ds-color-brand2-7: #74838e;
108
- --ds-color-brand2-8: #464e55;
109
- --ds-color-brand2-9: #bed5e8;
110
- --ds-color-brand2-10: #a9bece;
111
- --ds-color-brand2-11: #96a8b7;
112
- --ds-color-brand2-12: #5a646d;
113
- --ds-color-brand2-13: #282d31;
114
- --ds-color-brand2-contrast-1: #000000;
115
- --ds-color-brand2-contrast-2: #33393f;
116
- --ds-color-brand2-background-default: var(--ds-color-brand2-1);
117
- --ds-color-brand2-background-subtle: var(--ds-color-brand2-2);
118
- --ds-color-brand2-surface-default: var(--ds-color-brand2-3);
119
- --ds-color-brand2-surface-hover: var(--ds-color-brand2-4);
120
- --ds-color-brand2-surface-active: var(--ds-color-brand2-5);
121
- --ds-color-brand2-border-subtle: var(--ds-color-brand2-6);
122
- --ds-color-brand2-border-default: var(--ds-color-brand2-7);
123
- --ds-color-brand2-border-strong: var(--ds-color-brand2-8);
124
- --ds-color-brand2-base-default: var(--ds-color-brand2-9);
125
- --ds-color-brand2-base-hover: var(--ds-color-brand2-10);
126
- --ds-color-brand2-base-active: var(--ds-color-brand2-11);
127
- --ds-color-brand2-text-subtle: var(--ds-color-brand2-12);
128
- --ds-color-brand2-text-default: var(--ds-color-brand2-13);
129
- --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1);
130
- --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2);
131
- --ds-color-brand3-1: #fffefd;
132
- --ds-color-brand3-2: #f8f2ea;
133
- --ds-color-brand3-3: #efe0cc;
134
- --ds-color-brand3-4: #e5ceae;
135
- --ds-color-brand3-5: #d2bd9f;
136
- --ds-color-brand3-6: #cdb99c;
137
- --ds-color-brand3-7: #8e7f6c;
138
- --ds-color-brand3-8: #554c41;
139
- --ds-color-brand3-9: #e5ceae;
140
- --ds-color-brand3-10: #cdb99c;
141
- --ds-color-brand3-11: #b5a38a;
142
- --ds-color-brand3-12: #6c6252;
143
- --ds-color-brand3-13: #302b25;
144
- --ds-color-brand3-contrast-1: #000000;
145
- --ds-color-brand3-contrast-2: #3f3830;
146
- --ds-color-brand3-background-default: var(--ds-color-brand3-1);
147
- --ds-color-brand3-background-subtle: var(--ds-color-brand3-2);
148
- --ds-color-brand3-surface-default: var(--ds-color-brand3-3);
149
- --ds-color-brand3-surface-hover: var(--ds-color-brand3-4);
150
- --ds-color-brand3-surface-active: var(--ds-color-brand3-5);
151
- --ds-color-brand3-border-subtle: var(--ds-color-brand3-6);
152
- --ds-color-brand3-border-default: var(--ds-color-brand3-7);
153
- --ds-color-brand3-border-strong: var(--ds-color-brand3-8);
154
- --ds-color-brand3-base-default: var(--ds-color-brand3-9);
155
- --ds-color-brand3-base-hover: var(--ds-color-brand3-10);
156
- --ds-color-brand3-base-active: var(--ds-color-brand3-11);
157
- --ds-color-brand3-text-subtle: var(--ds-color-brand3-12);
158
- --ds-color-brand3-text-default: var(--ds-color-brand3-13);
159
- --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1);
160
- --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2);
161
- --ds-color-success-background-default: var(--ds-global-green-1);
162
- --ds-color-success-background-subtle: var(--ds-global-green-2);
163
- --ds-color-success-surface-default: var(--ds-global-green-3);
164
- --ds-color-success-surface-hover: var(--ds-global-green-4);
165
- --ds-color-success-surface-active: var(--ds-global-green-5);
166
- --ds-color-success-border-subtle: var(--ds-global-green-6);
167
- --ds-color-success-border-default: var(--ds-global-green-7);
168
- --ds-color-success-border-strong: var(--ds-global-green-8);
169
- --ds-color-success-base-default: var(--ds-global-green-9);
170
- --ds-color-success-base-hover: var(--ds-global-green-10);
171
- --ds-color-success-base-active: var(--ds-global-green-11);
172
- --ds-color-success-text-subtle: var(--ds-global-green-12);
173
- --ds-color-success-text-default: var(--ds-global-green-13);
174
- --ds-color-success-contrast-default: var(--ds-global-green-contrast-1);
175
- --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2);
176
- --ds-color-danger-background-default: var(--ds-global-red-1);
177
- --ds-color-danger-background-subtle: var(--ds-global-red-2);
178
- --ds-color-danger-surface-default: var(--ds-global-red-3);
179
- --ds-color-danger-surface-hover: var(--ds-global-red-4);
180
- --ds-color-danger-surface-active: var(--ds-global-red-5);
181
- --ds-color-danger-border-subtle: var(--ds-global-red-6);
182
- --ds-color-danger-border-default: var(--ds-global-red-7);
183
- --ds-color-danger-border-strong: var(--ds-global-red-8);
184
- --ds-color-danger-base-default: var(--ds-global-red-9);
185
- --ds-color-danger-base-hover: var(--ds-global-red-10);
186
- --ds-color-danger-base-active: var(--ds-global-red-11);
187
- --ds-color-danger-text-subtle: var(--ds-global-red-12);
188
- --ds-color-danger-text-default: var(--ds-global-red-13);
189
- --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1);
190
- --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2);
191
- --ds-color-info-background-default: #fefeff;
9
+ @layer ds.theme.color-scheme.light {
10
+ :root, [data-color-scheme="light"] {
11
+ --ds-color-accent-background-default: #ffffff;
12
+ --ds-color-accent-background-subtle: #eaf6f0;
13
+ --ds-color-accent-surface-default: #cae9d9;
14
+ --ds-color-accent-surface-hover: #acdcc3;
15
+ --ds-color-accent-surface-active: #8ed0ae;
16
+ --ds-color-accent-border-subtle: #81cba5;
17
+ --ds-color-accent-border-default: #528a6d;
18
+ --ds-color-accent-border-strong: #3f6a54;
19
+ --ds-color-accent-base-default: #76c69d;
20
+ --ds-color-accent-base-hover: #68ae8a;
21
+ --ds-color-accent-base-active: #5a9778;
22
+ --ds-color-accent-text-subtle: #3f6a54;
23
+ --ds-color-accent-text-default: #1c2f26;
24
+ --ds-color-accent-contrast-default: #000000;
25
+ --ds-color-accent-contrast-subtle: #17271f;
26
+ --ds-color-neutral-background-default: #ffffff;
27
+ --ds-color-neutral-background-subtle: #f3f3f3;
28
+ --ds-color-neutral-surface-default: #e2e2e2;
29
+ --ds-color-neutral-surface-hover: #d1d1d1;
30
+ --ds-color-neutral-surface-active: #c2c2c2;
31
+ --ds-color-neutral-border-subtle: #bcbcbc;
32
+ --ds-color-neutral-border-default: #7e7e7e;
33
+ --ds-color-neutral-border-strong: #616161;
34
+ --ds-color-neutral-base-default: #303030;
35
+ --ds-color-neutral-base-hover: #424242;
36
+ --ds-color-neutral-base-active: #545454;
37
+ --ds-color-neutral-text-subtle: #616161;
38
+ --ds-color-neutral-text-default: #2b2b2b;
39
+ --ds-color-neutral-contrast-default: #ffffff;
40
+ --ds-color-neutral-contrast-subtle: #c6c6c6;
41
+ --ds-color-support1-background-default: #ffffff;
42
+ --ds-color-support1-background-subtle: #edf5f1;
43
+ --ds-color-support1-surface-default: #d2e7dc;
44
+ --ds-color-support1-surface-hover: #b9d9c8;
45
+ --ds-color-support1-surface-active: #abc9b9;
46
+ --ds-color-support1-border-subtle: #a6c2b3;
47
+ --ds-color-support1-border-default: #708379;
48
+ --ds-color-support1-border-strong: #56655d;
49
+ --ds-color-support1-base-default: #b9d9c8;
50
+ --ds-color-support1-base-hover: #a5c2b3;
51
+ --ds-color-support1-base-active: #93ac9e;
52
+ --ds-color-support1-text-subtle: #56655d;
53
+ --ds-color-support1-text-default: #262d29;
54
+ --ds-color-support1-contrast-default: #000000;
55
+ --ds-color-support1-contrast-subtle: #323b36;
56
+ --ds-color-support2-background-default: #ffffff;
57
+ --ds-color-support2-background-subtle: #eef4f9;
58
+ --ds-color-support2-surface-default: #d5e4f0;
59
+ --ds-color-support2-surface-hover: #bed4e7;
60
+ --ds-color-support2-surface-active: #b0c5d7;
61
+ --ds-color-support2-border-subtle: #aabecf;
62
+ --ds-color-support2-border-default: #72808c;
63
+ --ds-color-support2-border-strong: #58636b;
64
+ --ds-color-support2-base-default: #bed5e8;
65
+ --ds-color-support2-base-hover: #aabfd0;
66
+ --ds-color-support2-base-active: #96a8b8;
67
+ --ds-color-support2-text-subtle: #58636b;
68
+ --ds-color-support2-text-default: #272c30;
69
+ --ds-color-support2-contrast-default: #000000;
70
+ --ds-color-support2-contrast-subtle: #343a3f;
71
+ --ds-color-support3-background-default: #ffffff;
72
+ --ds-color-support3-background-subtle: #f9f3eb;
73
+ --ds-color-support3-surface-default: #efe0cc;
74
+ --ds-color-support3-surface-hover: #e5ceae;
75
+ --ds-color-support3-surface-active: #d5bfa1;
76
+ --ds-color-support3-border-subtle: #cdb99c;
77
+ --ds-color-support3-border-default: #8a7c69;
78
+ --ds-color-support3-border-strong: #6a6051;
79
+ --ds-color-support3-base-default: #e5ceae;
80
+ --ds-color-support3-base-hover: #cdb89c;
81
+ --ds-color-support3-base-active: #b5a389;
82
+ --ds-color-support3-text-subtle: #6a6051;
83
+ --ds-color-support3-text-default: #2f2b24;
84
+ --ds-color-support3-contrast-default: #000000;
85
+ --ds-color-support3-contrast-subtle: #3e382f;
86
+ --ds-color-success-background-default: #ffffff;
87
+ --ds-color-success-background-subtle: #ecf6ee;
88
+ --ds-color-success-surface-default: #d0e8d3;
89
+ --ds-color-success-surface-hover: #b4dbba;
90
+ --ds-color-success-surface-active: #9bcfa2;
91
+ --ds-color-success-border-subtle: #8fc997;
92
+ --ds-color-success-border-default: #1d922d;
93
+ --ds-color-success-border-strong: #057114;
94
+ --ds-color-success-base-default: #068718;
95
+ --ds-color-success-base-hover: #057014;
96
+ --ds-color-success-base-active: #045a10;
97
+ --ds-color-success-text-subtle: #057114;
98
+ --ds-color-success-text-default: #023409;
99
+ --ds-color-success-contrast-default: #ffffff;
100
+ --ds-color-success-contrast-subtle: #fafdfb;
101
+ --ds-color-danger-background-default: #ffffff;
102
+ --ds-color-danger-background-subtle: #fbf1f1;
103
+ --ds-color-danger-surface-default: #f5dcdc;
104
+ --ds-color-danger-surface-hover: #f0c8c8;
105
+ --ds-color-danger-surface-active: #ebb5b5;
106
+ --ds-color-danger-border-subtle: #e8adad;
107
+ --ds-color-danger-border-default: #d15757;
108
+ --ds-color-danger-border-strong: #bf1b1b;
109
+ --ds-color-danger-base-default: #C01B1B;
110
+ --ds-color-danger-base-hover: #9b1616;
111
+ --ds-color-danger-base-active: #791111;
112
+ --ds-color-danger-text-subtle: #bf1b1b;
113
+ --ds-color-danger-text-default: #590d0d;
114
+ --ds-color-danger-contrast-default: #ffffff;
115
+ --ds-color-danger-contrast-subtle: #f7e1e1;
116
+ --ds-color-info-background-default: #ffffff;
192
117
  --ds-color-info-background-subtle: #edf5fa;
193
- --ds-color-info-surface-default: #d3e5f4;
118
+ --ds-color-info-surface-default: #d2e5f3;
194
119
  --ds-color-info-surface-hover: #b7d5ed;
195
- --ds-color-info-surface-active: #9bc5e5;
120
+ --ds-color-info-surface-active: #9fc7e6;
196
121
  --ds-color-info-border-subtle: #94c1e3;
197
- --ds-color-info-border-default: #2f86c9;
198
- --ds-color-info-border-strong: #075089;
122
+ --ds-color-info-border-default: #2a83c8;
123
+ --ds-color-info-border-strong: #0964a9;
199
124
  --ds-color-info-base-default: #0A71C0;
200
- --ds-color-info-base-hover: #085ea0;
201
- --ds-color-info-base-active: #074b80;
202
- --ds-color-info-text-subtle: #0966ac;
125
+ --ds-color-info-base-hover: #085d9f;
126
+ --ds-color-info-base-active: #074a7e;
127
+ --ds-color-info-text-subtle: #0964a9;
203
128
  --ds-color-info-text-default: #042d4d;
204
129
  --ds-color-info-contrast-default: #ffffff;
205
- --ds-color-info-contrast-subtle: #f3f8fc;
206
- --ds-color-warning-background-default: var(--ds-global-yellow-1);
207
- --ds-color-warning-background-subtle: var(--ds-global-yellow-2);
208
- --ds-color-warning-surface-default: var(--ds-global-yellow-3);
209
- --ds-color-warning-surface-hover: var(--ds-global-yellow-4);
210
- --ds-color-warning-surface-active: var(--ds-global-yellow-5);
211
- --ds-color-warning-border-subtle: var(--ds-global-yellow-6);
212
- --ds-color-warning-border-default: var(--ds-global-yellow-7);
213
- --ds-color-warning-border-strong: var(--ds-global-yellow-8);
214
- --ds-color-warning-base-default: var(--ds-global-orange-9);
215
- --ds-color-warning-base-hover: var(--ds-global-orange-10);
216
- --ds-color-warning-base-active: var(--ds-global-orange-11);
217
- --ds-color-warning-text-subtle: var(--ds-global-orange-12);
218
- --ds-color-warning-text-default: var(--ds-global-orange-13);
219
- --ds-color-warning-contrast-default: var(--ds-global-orange-contrast-1);
220
- --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2);
221
- --ds-color-focus-inner: #fefefe;
222
- --ds-color-focus-outer: #2c2c2c;
223
- --ds-global-blue-1: #fefeff;
130
+ --ds-color-info-contrast-subtle: #eff6fb;
131
+ --ds-color-warning-background-default: #ffffff;
132
+ --ds-color-warning-background-subtle: #f9f4e1;
133
+ --ds-color-warning-surface-default: #efe2b2;
134
+ --ds-color-warning-surface-hover: #e6d184;
135
+ --ds-color-warning-surface-active: #ddc159;
136
+ --ds-color-warning-border-subtle: #d9b945;
137
+ --ds-color-warning-border-default: #957c21;
138
+ --ds-color-warning-border-strong: #736019;
139
+ --ds-color-warning-base-default: #B8581D;
140
+ --ds-color-warning-base-hover: #994918;
141
+ --ds-color-warning-base-active: #7b3b13;
142
+ --ds-color-warning-text-subtle: #9b4a18;
143
+ --ds-color-warning-text-default: #46220b;
144
+ --ds-color-warning-contrast-default: #ffffff;
145
+ --ds-color-warning-contrast-subtle: #fdfbf9;
146
+ --ds-color-focus-inner: #ffffff;
147
+ --ds-color-focus-outer: #2b2b2b;
148
+ --ds-global-blue-1: #ffffff;
224
149
  --ds-global-blue-2: #edf5fa;
225
- --ds-global-blue-3: #d3e5f4;
150
+ --ds-global-blue-3: #d2e5f3;
226
151
  --ds-global-blue-4: #b7d5ed;
227
- --ds-global-blue-5: #9bc5e5;
152
+ --ds-global-blue-5: #9fc7e6;
228
153
  --ds-global-blue-6: #94c1e3;
229
- --ds-global-blue-7: #2f86c9;
230
- --ds-global-blue-8: #075089;
154
+ --ds-global-blue-7: #2a83c8;
155
+ --ds-global-blue-8: #0964a9;
231
156
  --ds-global-blue-9: #0A71C0;
232
- --ds-global-blue-10: #085ea0;
233
- --ds-global-blue-11: #074b80;
234
- --ds-global-blue-12: #0966ac;
157
+ --ds-global-blue-10: #085d9f;
158
+ --ds-global-blue-11: #074a7e;
159
+ --ds-global-blue-12: #0964a9;
235
160
  --ds-global-blue-13: #042d4d;
236
161
  --ds-global-blue-contrast-1: #ffffff;
237
- --ds-global-blue-contrast-2: #f3f8fc;
238
- --ds-global-green-1: #fcfefc;
239
- --ds-global-green-2: #edf6ee;
240
- --ds-global-green-3: #d1e9d4;
241
- --ds-global-green-4: #b5dbba;
242
- --ds-global-green-5: #96cd9e;
162
+ --ds-global-blue-contrast-2: #eff6fb;
163
+ --ds-global-green-1: #ffffff;
164
+ --ds-global-green-2: #ecf6ee;
165
+ --ds-global-green-3: #d0e8d3;
166
+ --ds-global-green-4: #b4dbba;
167
+ --ds-global-green-5: #9bcfa2;
243
168
  --ds-global-green-6: #8fc997;
244
- --ds-global-green-7: #229532;
245
- --ds-global-green-8: #045a10;
169
+ --ds-global-green-7: #1d922d;
170
+ --ds-global-green-8: #057114;
246
171
  --ds-global-green-9: #068718;
247
- --ds-global-green-10: #057114;
172
+ --ds-global-green-10: #057014;
248
173
  --ds-global-green-11: #045a10;
249
- --ds-global-green-12: #057315;
174
+ --ds-global-green-12: #057114;
250
175
  --ds-global-green-13: #023409;
251
176
  --ds-global-green-contrast-1: #ffffff;
252
- --ds-global-green-contrast-2: #f9fcf9;
253
- --ds-global-orange-1: #fffefe;
254
- --ds-global-orange-2: #f9f2ed;
255
- --ds-global-orange-3: #f1ded3;
256
- --ds-global-orange-4: #e9cbb8;
257
- --ds-global-orange-5: #e1b9a0;
258
- --ds-global-orange-6: #deb296;
259
- --ds-global-orange-7: #c06b36;
260
- --ds-global-orange-8: #7c3b14;
177
+ --ds-global-green-contrast-2: #fafdfb;
178
+ --ds-global-orange-1: #ffffff;
179
+ --ds-global-orange-2: #faf2ee;
180
+ --ds-global-orange-3: #f1dfd3;
181
+ --ds-global-orange-4: #e9ccba;
182
+ --ds-global-orange-5: #e2baa2;
183
+ --ds-global-orange-6: #dfb398;
184
+ --ds-global-orange-7: #bf6732;
185
+ --ds-global-orange-8: #9b4a18;
261
186
  --ds-global-orange-9: #B8581D;
262
- --ds-global-orange-10: #9a4918;
263
- --ds-global-orange-11: #7c3b14;
264
- --ds-global-orange-12: #9e4b19;
265
- --ds-global-orange-13: #47220b;
187
+ --ds-global-orange-10: #994918;
188
+ --ds-global-orange-11: #7b3b13;
189
+ --ds-global-orange-12: #9b4a18;
190
+ --ds-global-orange-13: #46220b;
266
191
  --ds-global-orange-contrast-1: #ffffff;
267
192
  --ds-global-orange-contrast-2: #fdfbf9;
268
- --ds-global-purple-1: #fefefe;
269
- --ds-global-purple-2: #f5f2f9;
193
+ --ds-global-purple-1: #ffffff;
194
+ --ds-global-purple-2: #f6f2f9;
270
195
  --ds-global-purple-3: #e7dfef;
271
- --ds-global-purple-4: #d9cce6;
272
- --ds-global-purple-5: #ccbadd;
196
+ --ds-global-purple-4: #d9cde6;
197
+ --ds-global-purple-5: #cdbcdd;
273
198
  --ds-global-purple-6: #c7b4da;
274
- --ds-global-purple-7: #9572b9;
275
- --ds-global-purple-8: #663399;
199
+ --ds-global-purple-7: #936fb7;
200
+ --ds-global-purple-8: #794ca6;
276
201
  --ds-global-purple-9: #663299;
277
- --ds-global-purple-10: #4f2777;
278
- --ds-global-purple-11: #381b54;
279
- --ds-global-purple-12: #7b4ea7;
280
- --ds-global-purple-13: #3b1d59;
202
+ --ds-global-purple-10: #4f2776;
203
+ --ds-global-purple-11: #371b53;
204
+ --ds-global-purple-12: #794ca6;
205
+ --ds-global-purple-13: #3a1d57;
281
206
  --ds-global-purple-contrast-1: #ffffff;
282
207
  --ds-global-purple-contrast-2: #eee8f3;
283
- --ds-global-red-1: #fffefe;
208
+ --ds-global-red-1: #ffffff;
284
209
  --ds-global-red-2: #fbf1f1;
285
210
  --ds-global-red-3: #f5dcdc;
286
- --ds-global-red-4: #f0c7c7;
287
- --ds-global-red-5: #eab3b3;
288
- --ds-global-red-6: #e8acac;
289
- --ds-global-red-7: #d25b5b;
290
- --ds-global-red-8: #9a1616;
211
+ --ds-global-red-4: #f0c8c8;
212
+ --ds-global-red-5: #ebb5b5;
213
+ --ds-global-red-6: #e8adad;
214
+ --ds-global-red-7: #d15757;
215
+ --ds-global-red-8: #bf1b1b;
291
216
  --ds-global-red-9: #C01B1B;
292
- --ds-global-red-10: #9a1616;
293
- --ds-global-red-11: #771111;
294
- --ds-global-red-12: #c22020;
295
- --ds-global-red-13: #5a0d0d;
217
+ --ds-global-red-10: #9b1616;
218
+ --ds-global-red-11: #791111;
219
+ --ds-global-red-12: #bf1b1b;
220
+ --ds-global-red-13: #590d0d;
296
221
  --ds-global-red-contrast-1: #ffffff;
297
- --ds-global-red-contrast-2: #f6dfdf;
298
- --ds-global-yellow-1: #fffefc;
299
- --ds-global-yellow-2: #fbf2d3;
300
- --ds-global-yellow-3: #f5e19b;
301
- --ds-global-yellow-4: #efcf5d;
302
- --ds-global-yellow-5: #e6bc27;
303
- --ds-global-yellow-6: #e0b726;
304
- --ds-global-yellow-7: #9a7e1a;
305
- --ds-global-yellow-8: #5d4c10;
306
- --ds-global-yellow-9: #EABF28;
307
- --ds-global-yellow-10: #d0aa24;
308
- --ds-global-yellow-11: #b7951f;
309
- --ds-global-yellow-12: #776114;
310
- --ds-global-yellow-13: #352b09;
222
+ --ds-global-red-contrast-2: #f7e1e1;
223
+ --ds-global-yellow-1: #ffffff;
224
+ --ds-global-yellow-2: #f9f4e1;
225
+ --ds-global-yellow-3: #efe2b2;
226
+ --ds-global-yellow-4: #e6d184;
227
+ --ds-global-yellow-5: #ddc159;
228
+ --ds-global-yellow-6: #d9b945;
229
+ --ds-global-yellow-7: #957c21;
230
+ --ds-global-yellow-8: #736019;
231
+ --ds-global-yellow-9: #D4B12F;
232
+ --ds-global-yellow-10: #bb9c2a;
233
+ --ds-global-yellow-11: #a38824;
234
+ --ds-global-yellow-12: #736019;
235
+ --ds-global-yellow-13: #332b0b;
311
236
  --ds-global-yellow-contrast-1: #000000;
312
- --ds-global-yellow-contrast-2: #382d0a;
237
+ --ds-global-yellow-contrast-2: #282209;
313
238
 
314
239
  color-scheme: light;
315
240
  }
316
241
 
317
242
  @media (prefers-color-scheme: light) {
318
- [data-ds-color-mode="auto"] {
319
- --ds-color-accent-1: #fefefe;
320
- --ds-color-accent-2: #f2f2f2;
321
- --ds-color-accent-3: #e1e1e1;
322
- --ds-color-accent-4: #d0d0d0;
323
- --ds-color-accent-5: #c1c1c1;
324
- --ds-color-accent-6: #bbbbbb;
325
- --ds-color-accent-7: #818181;
326
- --ds-color-accent-8: #4e4e4e;
327
- --ds-color-accent-9: #303030;
328
- --ds-color-accent-10: #424242;
329
- --ds-color-accent-11: #555555;
330
- --ds-color-accent-12: #636363;
331
- --ds-color-accent-13: #2c2c2c;
332
- --ds-color-accent-contrast-1: #ffffff;
333
- --ds-color-accent-contrast-2: #c6c6c6;
334
- --ds-color-accent-background-default: var(--ds-color-accent-1);
335
- --ds-color-accent-background-subtle: var(--ds-color-accent-2);
336
- --ds-color-accent-surface-default: var(--ds-color-accent-3);
337
- --ds-color-accent-surface-hover: var(--ds-color-accent-4);
338
- --ds-color-accent-surface-active: var(--ds-color-accent-5);
339
- --ds-color-accent-border-subtle: var(--ds-color-accent-6);
340
- --ds-color-accent-border-default: var(--ds-color-accent-7);
341
- --ds-color-accent-border-strong: var(--ds-color-accent-8);
342
- --ds-color-accent-base-default: var(--ds-color-accent-9);
343
- --ds-color-accent-base-hover: var(--ds-color-accent-10);
344
- --ds-color-accent-base-active: var(--ds-color-accent-11);
345
- --ds-color-accent-text-subtle: var(--ds-color-accent-12);
346
- --ds-color-accent-text-default: var(--ds-color-accent-13);
347
- --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1);
348
- --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2);
349
- --ds-color-neutral-1: #fefefe;
350
- --ds-color-neutral-2: #f2f2f2;
351
- --ds-color-neutral-3: #e1e1e1;
352
- --ds-color-neutral-4: #d0d0d0;
353
- --ds-color-neutral-5: #c1c1c1;
354
- --ds-color-neutral-6: #bbbbbb;
355
- --ds-color-neutral-7: #818181;
356
- --ds-color-neutral-8: #4e4e4e;
357
- --ds-color-neutral-9: #dedede;
358
- --ds-color-neutral-10: #c6c6c6;
359
- --ds-color-neutral-11: #b0b0b0;
360
- --ds-color-neutral-12: #636363;
361
- --ds-color-neutral-13: #2c2c2c;
362
- --ds-color-neutral-contrast-1: #000000;
363
- --ds-color-neutral-contrast-2: #424242;
364
- --ds-color-neutral-background-default: var(--ds-color-neutral-1);
365
- --ds-color-neutral-background-subtle: var(--ds-color-neutral-2);
366
- --ds-color-neutral-surface-default: var(--ds-color-neutral-3);
367
- --ds-color-neutral-surface-hover: var(--ds-color-neutral-4);
368
- --ds-color-neutral-surface-active: var(--ds-color-neutral-5);
369
- --ds-color-neutral-border-subtle: var(--ds-color-neutral-6);
370
- --ds-color-neutral-border-default: var(--ds-color-neutral-7);
371
- --ds-color-neutral-border-strong: var(--ds-color-neutral-8);
372
- --ds-color-neutral-base-default: var(--ds-color-neutral-9);
373
- --ds-color-neutral-base-hover: var(--ds-color-neutral-10);
374
- --ds-color-neutral-base-active: var(--ds-color-neutral-11);
375
- --ds-color-neutral-text-subtle: var(--ds-color-neutral-12);
376
- --ds-color-neutral-text-default: var(--ds-color-neutral-13);
377
- --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1);
378
- --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2);
379
- --ds-color-brand1-1: #fcfefd;
380
- --ds-color-brand1-2: #e7f5ee;
381
- --ds-color-brand1-3: #cae9d9;
382
- --ds-color-brand1-4: #abdcc3;
383
- --ds-color-brand1-5: #8ccfad;
384
- --ds-color-brand1-6: #81cba5;
385
- --ds-color-brand1-7: #548c6f;
386
- --ds-color-brand1-8: #325443;
387
- --ds-color-brand1-9: #76c69d;
388
- --ds-color-brand1-10: #68af8a;
389
- --ds-color-brand1-11: #5a9878;
390
- --ds-color-brand1-12: #406b55;
391
- --ds-color-brand1-13: #1d3026;
392
- --ds-color-brand1-contrast-1: #000000;
393
- --ds-color-brand1-contrast-2: #182720;
394
- --ds-color-brand1-background-default: var(--ds-color-brand1-1);
395
- --ds-color-brand1-background-subtle: var(--ds-color-brand1-2);
396
- --ds-color-brand1-surface-default: var(--ds-color-brand1-3);
397
- --ds-color-brand1-surface-hover: var(--ds-color-brand1-4);
398
- --ds-color-brand1-surface-active: var(--ds-color-brand1-5);
399
- --ds-color-brand1-border-subtle: var(--ds-color-brand1-6);
400
- --ds-color-brand1-border-default: var(--ds-color-brand1-7);
401
- --ds-color-brand1-border-strong: var(--ds-color-brand1-8);
402
- --ds-color-brand1-base-default: var(--ds-color-brand1-9);
403
- --ds-color-brand1-base-hover: var(--ds-color-brand1-10);
404
- --ds-color-brand1-base-active: var(--ds-color-brand1-11);
405
- --ds-color-brand1-text-subtle: var(--ds-color-brand1-12);
406
- --ds-color-brand1-text-default: var(--ds-color-brand1-13);
407
- --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1);
408
- --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2);
409
- --ds-color-brand2-1: #fefeff;
410
- --ds-color-brand2-2: #ecf3f8;
411
- --ds-color-brand2-3: #d5e4f0;
412
- --ds-color-brand2-4: #bdd4e7;
413
- --ds-color-brand2-5: #aec3d4;
414
- --ds-color-brand2-6: #a9bece;
415
- --ds-color-brand2-7: #74838e;
416
- --ds-color-brand2-8: #464e55;
417
- --ds-color-brand2-9: #bed5e8;
418
- --ds-color-brand2-10: #a9bece;
419
- --ds-color-brand2-11: #96a8b7;
420
- --ds-color-brand2-12: #5a646d;
421
- --ds-color-brand2-13: #282d31;
422
- --ds-color-brand2-contrast-1: #000000;
423
- --ds-color-brand2-contrast-2: #33393f;
424
- --ds-color-brand2-background-default: var(--ds-color-brand2-1);
425
- --ds-color-brand2-background-subtle: var(--ds-color-brand2-2);
426
- --ds-color-brand2-surface-default: var(--ds-color-brand2-3);
427
- --ds-color-brand2-surface-hover: var(--ds-color-brand2-4);
428
- --ds-color-brand2-surface-active: var(--ds-color-brand2-5);
429
- --ds-color-brand2-border-subtle: var(--ds-color-brand2-6);
430
- --ds-color-brand2-border-default: var(--ds-color-brand2-7);
431
- --ds-color-brand2-border-strong: var(--ds-color-brand2-8);
432
- --ds-color-brand2-base-default: var(--ds-color-brand2-9);
433
- --ds-color-brand2-base-hover: var(--ds-color-brand2-10);
434
- --ds-color-brand2-base-active: var(--ds-color-brand2-11);
435
- --ds-color-brand2-text-subtle: var(--ds-color-brand2-12);
436
- --ds-color-brand2-text-default: var(--ds-color-brand2-13);
437
- --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1);
438
- --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2);
439
- --ds-color-brand3-1: #fffefd;
440
- --ds-color-brand3-2: #f8f2ea;
441
- --ds-color-brand3-3: #efe0cc;
442
- --ds-color-brand3-4: #e5ceae;
443
- --ds-color-brand3-5: #d2bd9f;
444
- --ds-color-brand3-6: #cdb99c;
445
- --ds-color-brand3-7: #8e7f6c;
446
- --ds-color-brand3-8: #554c41;
447
- --ds-color-brand3-9: #e5ceae;
448
- --ds-color-brand3-10: #cdb99c;
449
- --ds-color-brand3-11: #b5a38a;
450
- --ds-color-brand3-12: #6c6252;
451
- --ds-color-brand3-13: #302b25;
452
- --ds-color-brand3-contrast-1: #000000;
453
- --ds-color-brand3-contrast-2: #3f3830;
454
- --ds-color-brand3-background-default: var(--ds-color-brand3-1);
455
- --ds-color-brand3-background-subtle: var(--ds-color-brand3-2);
456
- --ds-color-brand3-surface-default: var(--ds-color-brand3-3);
457
- --ds-color-brand3-surface-hover: var(--ds-color-brand3-4);
458
- --ds-color-brand3-surface-active: var(--ds-color-brand3-5);
459
- --ds-color-brand3-border-subtle: var(--ds-color-brand3-6);
460
- --ds-color-brand3-border-default: var(--ds-color-brand3-7);
461
- --ds-color-brand3-border-strong: var(--ds-color-brand3-8);
462
- --ds-color-brand3-base-default: var(--ds-color-brand3-9);
463
- --ds-color-brand3-base-hover: var(--ds-color-brand3-10);
464
- --ds-color-brand3-base-active: var(--ds-color-brand3-11);
465
- --ds-color-brand3-text-subtle: var(--ds-color-brand3-12);
466
- --ds-color-brand3-text-default: var(--ds-color-brand3-13);
467
- --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1);
468
- --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2);
469
- --ds-color-success-background-default: var(--ds-global-green-1);
470
- --ds-color-success-background-subtle: var(--ds-global-green-2);
471
- --ds-color-success-surface-default: var(--ds-global-green-3);
472
- --ds-color-success-surface-hover: var(--ds-global-green-4);
473
- --ds-color-success-surface-active: var(--ds-global-green-5);
474
- --ds-color-success-border-subtle: var(--ds-global-green-6);
475
- --ds-color-success-border-default: var(--ds-global-green-7);
476
- --ds-color-success-border-strong: var(--ds-global-green-8);
477
- --ds-color-success-base-default: var(--ds-global-green-9);
478
- --ds-color-success-base-hover: var(--ds-global-green-10);
479
- --ds-color-success-base-active: var(--ds-global-green-11);
480
- --ds-color-success-text-subtle: var(--ds-global-green-12);
481
- --ds-color-success-text-default: var(--ds-global-green-13);
482
- --ds-color-success-contrast-default: var(--ds-global-green-contrast-1);
483
- --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2);
484
- --ds-color-danger-background-default: var(--ds-global-red-1);
485
- --ds-color-danger-background-subtle: var(--ds-global-red-2);
486
- --ds-color-danger-surface-default: var(--ds-global-red-3);
487
- --ds-color-danger-surface-hover: var(--ds-global-red-4);
488
- --ds-color-danger-surface-active: var(--ds-global-red-5);
489
- --ds-color-danger-border-subtle: var(--ds-global-red-6);
490
- --ds-color-danger-border-default: var(--ds-global-red-7);
491
- --ds-color-danger-border-strong: var(--ds-global-red-8);
492
- --ds-color-danger-base-default: var(--ds-global-red-9);
493
- --ds-color-danger-base-hover: var(--ds-global-red-10);
494
- --ds-color-danger-base-active: var(--ds-global-red-11);
495
- --ds-color-danger-text-subtle: var(--ds-global-red-12);
496
- --ds-color-danger-text-default: var(--ds-global-red-13);
497
- --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1);
498
- --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2);
499
- --ds-color-info-background-default: #fefeff;
243
+ [data-color-scheme="auto"] {
244
+ --ds-color-accent-background-default: #ffffff;
245
+ --ds-color-accent-background-subtle: #eaf6f0;
246
+ --ds-color-accent-surface-default: #cae9d9;
247
+ --ds-color-accent-surface-hover: #acdcc3;
248
+ --ds-color-accent-surface-active: #8ed0ae;
249
+ --ds-color-accent-border-subtle: #81cba5;
250
+ --ds-color-accent-border-default: #528a6d;
251
+ --ds-color-accent-border-strong: #3f6a54;
252
+ --ds-color-accent-base-default: #76c69d;
253
+ --ds-color-accent-base-hover: #68ae8a;
254
+ --ds-color-accent-base-active: #5a9778;
255
+ --ds-color-accent-text-subtle: #3f6a54;
256
+ --ds-color-accent-text-default: #1c2f26;
257
+ --ds-color-accent-contrast-default: #000000;
258
+ --ds-color-accent-contrast-subtle: #17271f;
259
+ --ds-color-neutral-background-default: #ffffff;
260
+ --ds-color-neutral-background-subtle: #f3f3f3;
261
+ --ds-color-neutral-surface-default: #e2e2e2;
262
+ --ds-color-neutral-surface-hover: #d1d1d1;
263
+ --ds-color-neutral-surface-active: #c2c2c2;
264
+ --ds-color-neutral-border-subtle: #bcbcbc;
265
+ --ds-color-neutral-border-default: #7e7e7e;
266
+ --ds-color-neutral-border-strong: #616161;
267
+ --ds-color-neutral-base-default: #303030;
268
+ --ds-color-neutral-base-hover: #424242;
269
+ --ds-color-neutral-base-active: #545454;
270
+ --ds-color-neutral-text-subtle: #616161;
271
+ --ds-color-neutral-text-default: #2b2b2b;
272
+ --ds-color-neutral-contrast-default: #ffffff;
273
+ --ds-color-neutral-contrast-subtle: #c6c6c6;
274
+ --ds-color-support1-background-default: #ffffff;
275
+ --ds-color-support1-background-subtle: #edf5f1;
276
+ --ds-color-support1-surface-default: #d2e7dc;
277
+ --ds-color-support1-surface-hover: #b9d9c8;
278
+ --ds-color-support1-surface-active: #abc9b9;
279
+ --ds-color-support1-border-subtle: #a6c2b3;
280
+ --ds-color-support1-border-default: #708379;
281
+ --ds-color-support1-border-strong: #56655d;
282
+ --ds-color-support1-base-default: #b9d9c8;
283
+ --ds-color-support1-base-hover: #a5c2b3;
284
+ --ds-color-support1-base-active: #93ac9e;
285
+ --ds-color-support1-text-subtle: #56655d;
286
+ --ds-color-support1-text-default: #262d29;
287
+ --ds-color-support1-contrast-default: #000000;
288
+ --ds-color-support1-contrast-subtle: #323b36;
289
+ --ds-color-support2-background-default: #ffffff;
290
+ --ds-color-support2-background-subtle: #eef4f9;
291
+ --ds-color-support2-surface-default: #d5e4f0;
292
+ --ds-color-support2-surface-hover: #bed4e7;
293
+ --ds-color-support2-surface-active: #b0c5d7;
294
+ --ds-color-support2-border-subtle: #aabecf;
295
+ --ds-color-support2-border-default: #72808c;
296
+ --ds-color-support2-border-strong: #58636b;
297
+ --ds-color-support2-base-default: #bed5e8;
298
+ --ds-color-support2-base-hover: #aabfd0;
299
+ --ds-color-support2-base-active: #96a8b8;
300
+ --ds-color-support2-text-subtle: #58636b;
301
+ --ds-color-support2-text-default: #272c30;
302
+ --ds-color-support2-contrast-default: #000000;
303
+ --ds-color-support2-contrast-subtle: #343a3f;
304
+ --ds-color-support3-background-default: #ffffff;
305
+ --ds-color-support3-background-subtle: #f9f3eb;
306
+ --ds-color-support3-surface-default: #efe0cc;
307
+ --ds-color-support3-surface-hover: #e5ceae;
308
+ --ds-color-support3-surface-active: #d5bfa1;
309
+ --ds-color-support3-border-subtle: #cdb99c;
310
+ --ds-color-support3-border-default: #8a7c69;
311
+ --ds-color-support3-border-strong: #6a6051;
312
+ --ds-color-support3-base-default: #e5ceae;
313
+ --ds-color-support3-base-hover: #cdb89c;
314
+ --ds-color-support3-base-active: #b5a389;
315
+ --ds-color-support3-text-subtle: #6a6051;
316
+ --ds-color-support3-text-default: #2f2b24;
317
+ --ds-color-support3-contrast-default: #000000;
318
+ --ds-color-support3-contrast-subtle: #3e382f;
319
+ --ds-color-success-background-default: #ffffff;
320
+ --ds-color-success-background-subtle: #ecf6ee;
321
+ --ds-color-success-surface-default: #d0e8d3;
322
+ --ds-color-success-surface-hover: #b4dbba;
323
+ --ds-color-success-surface-active: #9bcfa2;
324
+ --ds-color-success-border-subtle: #8fc997;
325
+ --ds-color-success-border-default: #1d922d;
326
+ --ds-color-success-border-strong: #057114;
327
+ --ds-color-success-base-default: #068718;
328
+ --ds-color-success-base-hover: #057014;
329
+ --ds-color-success-base-active: #045a10;
330
+ --ds-color-success-text-subtle: #057114;
331
+ --ds-color-success-text-default: #023409;
332
+ --ds-color-success-contrast-default: #ffffff;
333
+ --ds-color-success-contrast-subtle: #fafdfb;
334
+ --ds-color-danger-background-default: #ffffff;
335
+ --ds-color-danger-background-subtle: #fbf1f1;
336
+ --ds-color-danger-surface-default: #f5dcdc;
337
+ --ds-color-danger-surface-hover: #f0c8c8;
338
+ --ds-color-danger-surface-active: #ebb5b5;
339
+ --ds-color-danger-border-subtle: #e8adad;
340
+ --ds-color-danger-border-default: #d15757;
341
+ --ds-color-danger-border-strong: #bf1b1b;
342
+ --ds-color-danger-base-default: #C01B1B;
343
+ --ds-color-danger-base-hover: #9b1616;
344
+ --ds-color-danger-base-active: #791111;
345
+ --ds-color-danger-text-subtle: #bf1b1b;
346
+ --ds-color-danger-text-default: #590d0d;
347
+ --ds-color-danger-contrast-default: #ffffff;
348
+ --ds-color-danger-contrast-subtle: #f7e1e1;
349
+ --ds-color-info-background-default: #ffffff;
500
350
  --ds-color-info-background-subtle: #edf5fa;
501
- --ds-color-info-surface-default: #d3e5f4;
351
+ --ds-color-info-surface-default: #d2e5f3;
502
352
  --ds-color-info-surface-hover: #b7d5ed;
503
- --ds-color-info-surface-active: #9bc5e5;
353
+ --ds-color-info-surface-active: #9fc7e6;
504
354
  --ds-color-info-border-subtle: #94c1e3;
505
- --ds-color-info-border-default: #2f86c9;
506
- --ds-color-info-border-strong: #075089;
355
+ --ds-color-info-border-default: #2a83c8;
356
+ --ds-color-info-border-strong: #0964a9;
507
357
  --ds-color-info-base-default: #0A71C0;
508
- --ds-color-info-base-hover: #085ea0;
509
- --ds-color-info-base-active: #074b80;
510
- --ds-color-info-text-subtle: #0966ac;
358
+ --ds-color-info-base-hover: #085d9f;
359
+ --ds-color-info-base-active: #074a7e;
360
+ --ds-color-info-text-subtle: #0964a9;
511
361
  --ds-color-info-text-default: #042d4d;
512
362
  --ds-color-info-contrast-default: #ffffff;
513
- --ds-color-info-contrast-subtle: #f3f8fc;
514
- --ds-color-warning-background-default: var(--ds-global-yellow-1);
515
- --ds-color-warning-background-subtle: var(--ds-global-yellow-2);
516
- --ds-color-warning-surface-default: var(--ds-global-yellow-3);
517
- --ds-color-warning-surface-hover: var(--ds-global-yellow-4);
518
- --ds-color-warning-surface-active: var(--ds-global-yellow-5);
519
- --ds-color-warning-border-subtle: var(--ds-global-yellow-6);
520
- --ds-color-warning-border-default: var(--ds-global-yellow-7);
521
- --ds-color-warning-border-strong: var(--ds-global-yellow-8);
522
- --ds-color-warning-base-default: var(--ds-global-orange-9);
523
- --ds-color-warning-base-hover: var(--ds-global-orange-10);
524
- --ds-color-warning-base-active: var(--ds-global-orange-11);
525
- --ds-color-warning-text-subtle: var(--ds-global-orange-12);
526
- --ds-color-warning-text-default: var(--ds-global-orange-13);
527
- --ds-color-warning-contrast-default: var(--ds-global-orange-contrast-1);
528
- --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2);
529
- --ds-color-focus-inner: #fefefe;
530
- --ds-color-focus-outer: #2c2c2c;
531
- --ds-global-blue-1: #fefeff;
363
+ --ds-color-info-contrast-subtle: #eff6fb;
364
+ --ds-color-warning-background-default: #ffffff;
365
+ --ds-color-warning-background-subtle: #f9f4e1;
366
+ --ds-color-warning-surface-default: #efe2b2;
367
+ --ds-color-warning-surface-hover: #e6d184;
368
+ --ds-color-warning-surface-active: #ddc159;
369
+ --ds-color-warning-border-subtle: #d9b945;
370
+ --ds-color-warning-border-default: #957c21;
371
+ --ds-color-warning-border-strong: #736019;
372
+ --ds-color-warning-base-default: #B8581D;
373
+ --ds-color-warning-base-hover: #994918;
374
+ --ds-color-warning-base-active: #7b3b13;
375
+ --ds-color-warning-text-subtle: #9b4a18;
376
+ --ds-color-warning-text-default: #46220b;
377
+ --ds-color-warning-contrast-default: #ffffff;
378
+ --ds-color-warning-contrast-subtle: #fdfbf9;
379
+ --ds-color-focus-inner: #ffffff;
380
+ --ds-color-focus-outer: #2b2b2b;
381
+ --ds-global-blue-1: #ffffff;
532
382
  --ds-global-blue-2: #edf5fa;
533
- --ds-global-blue-3: #d3e5f4;
383
+ --ds-global-blue-3: #d2e5f3;
534
384
  --ds-global-blue-4: #b7d5ed;
535
- --ds-global-blue-5: #9bc5e5;
385
+ --ds-global-blue-5: #9fc7e6;
536
386
  --ds-global-blue-6: #94c1e3;
537
- --ds-global-blue-7: #2f86c9;
538
- --ds-global-blue-8: #075089;
387
+ --ds-global-blue-7: #2a83c8;
388
+ --ds-global-blue-8: #0964a9;
539
389
  --ds-global-blue-9: #0A71C0;
540
- --ds-global-blue-10: #085ea0;
541
- --ds-global-blue-11: #074b80;
542
- --ds-global-blue-12: #0966ac;
390
+ --ds-global-blue-10: #085d9f;
391
+ --ds-global-blue-11: #074a7e;
392
+ --ds-global-blue-12: #0964a9;
543
393
  --ds-global-blue-13: #042d4d;
544
394
  --ds-global-blue-contrast-1: #ffffff;
545
- --ds-global-blue-contrast-2: #f3f8fc;
546
- --ds-global-green-1: #fcfefc;
547
- --ds-global-green-2: #edf6ee;
548
- --ds-global-green-3: #d1e9d4;
549
- --ds-global-green-4: #b5dbba;
550
- --ds-global-green-5: #96cd9e;
395
+ --ds-global-blue-contrast-2: #eff6fb;
396
+ --ds-global-green-1: #ffffff;
397
+ --ds-global-green-2: #ecf6ee;
398
+ --ds-global-green-3: #d0e8d3;
399
+ --ds-global-green-4: #b4dbba;
400
+ --ds-global-green-5: #9bcfa2;
551
401
  --ds-global-green-6: #8fc997;
552
- --ds-global-green-7: #229532;
553
- --ds-global-green-8: #045a10;
402
+ --ds-global-green-7: #1d922d;
403
+ --ds-global-green-8: #057114;
554
404
  --ds-global-green-9: #068718;
555
- --ds-global-green-10: #057114;
405
+ --ds-global-green-10: #057014;
556
406
  --ds-global-green-11: #045a10;
557
- --ds-global-green-12: #057315;
407
+ --ds-global-green-12: #057114;
558
408
  --ds-global-green-13: #023409;
559
409
  --ds-global-green-contrast-1: #ffffff;
560
- --ds-global-green-contrast-2: #f9fcf9;
561
- --ds-global-orange-1: #fffefe;
562
- --ds-global-orange-2: #f9f2ed;
563
- --ds-global-orange-3: #f1ded3;
564
- --ds-global-orange-4: #e9cbb8;
565
- --ds-global-orange-5: #e1b9a0;
566
- --ds-global-orange-6: #deb296;
567
- --ds-global-orange-7: #c06b36;
568
- --ds-global-orange-8: #7c3b14;
410
+ --ds-global-green-contrast-2: #fafdfb;
411
+ --ds-global-orange-1: #ffffff;
412
+ --ds-global-orange-2: #faf2ee;
413
+ --ds-global-orange-3: #f1dfd3;
414
+ --ds-global-orange-4: #e9ccba;
415
+ --ds-global-orange-5: #e2baa2;
416
+ --ds-global-orange-6: #dfb398;
417
+ --ds-global-orange-7: #bf6732;
418
+ --ds-global-orange-8: #9b4a18;
569
419
  --ds-global-orange-9: #B8581D;
570
- --ds-global-orange-10: #9a4918;
571
- --ds-global-orange-11: #7c3b14;
572
- --ds-global-orange-12: #9e4b19;
573
- --ds-global-orange-13: #47220b;
420
+ --ds-global-orange-10: #994918;
421
+ --ds-global-orange-11: #7b3b13;
422
+ --ds-global-orange-12: #9b4a18;
423
+ --ds-global-orange-13: #46220b;
574
424
  --ds-global-orange-contrast-1: #ffffff;
575
425
  --ds-global-orange-contrast-2: #fdfbf9;
576
- --ds-global-purple-1: #fefefe;
577
- --ds-global-purple-2: #f5f2f9;
426
+ --ds-global-purple-1: #ffffff;
427
+ --ds-global-purple-2: #f6f2f9;
578
428
  --ds-global-purple-3: #e7dfef;
579
- --ds-global-purple-4: #d9cce6;
580
- --ds-global-purple-5: #ccbadd;
429
+ --ds-global-purple-4: #d9cde6;
430
+ --ds-global-purple-5: #cdbcdd;
581
431
  --ds-global-purple-6: #c7b4da;
582
- --ds-global-purple-7: #9572b9;
583
- --ds-global-purple-8: #663399;
432
+ --ds-global-purple-7: #936fb7;
433
+ --ds-global-purple-8: #794ca6;
584
434
  --ds-global-purple-9: #663299;
585
- --ds-global-purple-10: #4f2777;
586
- --ds-global-purple-11: #381b54;
587
- --ds-global-purple-12: #7b4ea7;
588
- --ds-global-purple-13: #3b1d59;
435
+ --ds-global-purple-10: #4f2776;
436
+ --ds-global-purple-11: #371b53;
437
+ --ds-global-purple-12: #794ca6;
438
+ --ds-global-purple-13: #3a1d57;
589
439
  --ds-global-purple-contrast-1: #ffffff;
590
440
  --ds-global-purple-contrast-2: #eee8f3;
591
- --ds-global-red-1: #fffefe;
441
+ --ds-global-red-1: #ffffff;
592
442
  --ds-global-red-2: #fbf1f1;
593
443
  --ds-global-red-3: #f5dcdc;
594
- --ds-global-red-4: #f0c7c7;
595
- --ds-global-red-5: #eab3b3;
596
- --ds-global-red-6: #e8acac;
597
- --ds-global-red-7: #d25b5b;
598
- --ds-global-red-8: #9a1616;
444
+ --ds-global-red-4: #f0c8c8;
445
+ --ds-global-red-5: #ebb5b5;
446
+ --ds-global-red-6: #e8adad;
447
+ --ds-global-red-7: #d15757;
448
+ --ds-global-red-8: #bf1b1b;
599
449
  --ds-global-red-9: #C01B1B;
600
- --ds-global-red-10: #9a1616;
601
- --ds-global-red-11: #771111;
602
- --ds-global-red-12: #c22020;
603
- --ds-global-red-13: #5a0d0d;
450
+ --ds-global-red-10: #9b1616;
451
+ --ds-global-red-11: #791111;
452
+ --ds-global-red-12: #bf1b1b;
453
+ --ds-global-red-13: #590d0d;
604
454
  --ds-global-red-contrast-1: #ffffff;
605
- --ds-global-red-contrast-2: #f6dfdf;
606
- --ds-global-yellow-1: #fffefc;
607
- --ds-global-yellow-2: #fbf2d3;
608
- --ds-global-yellow-3: #f5e19b;
609
- --ds-global-yellow-4: #efcf5d;
610
- --ds-global-yellow-5: #e6bc27;
611
- --ds-global-yellow-6: #e0b726;
612
- --ds-global-yellow-7: #9a7e1a;
613
- --ds-global-yellow-8: #5d4c10;
614
- --ds-global-yellow-9: #EABF28;
615
- --ds-global-yellow-10: #d0aa24;
616
- --ds-global-yellow-11: #b7951f;
617
- --ds-global-yellow-12: #776114;
618
- --ds-global-yellow-13: #352b09;
455
+ --ds-global-red-contrast-2: #f7e1e1;
456
+ --ds-global-yellow-1: #ffffff;
457
+ --ds-global-yellow-2: #f9f4e1;
458
+ --ds-global-yellow-3: #efe2b2;
459
+ --ds-global-yellow-4: #e6d184;
460
+ --ds-global-yellow-5: #ddc159;
461
+ --ds-global-yellow-6: #d9b945;
462
+ --ds-global-yellow-7: #957c21;
463
+ --ds-global-yellow-8: #736019;
464
+ --ds-global-yellow-9: #D4B12F;
465
+ --ds-global-yellow-10: #bb9c2a;
466
+ --ds-global-yellow-11: #a38824;
467
+ --ds-global-yellow-12: #736019;
468
+ --ds-global-yellow-13: #332b0b;
619
469
  --ds-global-yellow-contrast-1: #000000;
620
- --ds-global-yellow-contrast-2: #382d0a;
470
+ --ds-global-yellow-contrast-2: #282209;
621
471
 
622
472
  color-scheme: light;
623
473
  }
@@ -631,7 +481,7 @@
631
481
  */
632
482
 
633
483
  @layer ds.theme.typography.secondary {
634
- [data-ds-typography="secondary"] {
484
+ [data-typography="secondary"] {
635
485
  --ds-font-family: Inter;
636
486
  --ds-font-weight-medium: 500;
637
487
  --ds-font-weight-semibold: 600;
@@ -639,19 +489,19 @@
639
489
  --ds-heading-2xl-font-weight: 500;
640
490
  --ds-heading-2xl-line-height: 1.3;
641
491
  --ds-heading-2xl-font-size: 3.75rem;
642
- --ds-heading-2xl-letter-spacing: -1%;
492
+ --ds-heading-2xl-letter-spacing: 0%;
643
493
  --ds-heading-xl-font-weight: 500;
644
494
  --ds-heading-xl-line-height: 1.3;
645
495
  --ds-heading-xl-font-size: 3rem;
646
- --ds-heading-xl-letter-spacing: -1%;
496
+ --ds-heading-xl-letter-spacing: 0%;
647
497
  --ds-heading-lg-font-weight: 500;
648
498
  --ds-heading-lg-line-height: 1.3;
649
499
  --ds-heading-lg-font-size: 2.25rem;
650
- --ds-heading-lg-letter-spacing: -0.5%;
500
+ --ds-heading-lg-letter-spacing: 0%;
651
501
  --ds-heading-md-font-weight: 500;
652
502
  --ds-heading-md-line-height: 1.3;
653
503
  --ds-heading-md-font-size: 1.875rem;
654
- --ds-heading-md-letter-spacing: -0.25%;
504
+ --ds-heading-md-letter-spacing: 0%;
655
505
  --ds-heading-sm-font-weight: 500;
656
506
  --ds-heading-sm-line-height: 1.3;
657
507
  --ds-heading-sm-font-size: 1.5rem;
@@ -659,103 +509,71 @@
659
509
  --ds-heading-xs-font-weight: 500;
660
510
  --ds-heading-xs-line-height: 1.3;
661
511
  --ds-heading-xs-font-size: 1.3125rem;
662
- --ds-heading-xs-letter-spacing: 0.15%;
512
+ --ds-heading-xs-letter-spacing: 0%;
663
513
  --ds-heading-2xs-font-weight: 500;
664
514
  --ds-heading-2xs-line-height: 1.3;
665
515
  --ds-heading-2xs-font-size: 1.125rem;
666
- --ds-heading-2xs-letter-spacing: 0.15%;
516
+ --ds-heading-2xs-letter-spacing: 0%;
667
517
  --ds-body-xl-font-weight: 400;
668
518
  --ds-body-xl-line-height: 1.5;
669
519
  --ds-body-xl-font-size: 1.5rem;
670
- --ds-body-xl-letter-spacing: 0.5%;
520
+ --ds-body-xl-letter-spacing: 0%;
671
521
  --ds-body-lg-font-weight: 400;
672
522
  --ds-body-lg-line-height: 1.5;
673
523
  --ds-body-lg-font-size: 1.3125rem;
674
- --ds-body-lg-letter-spacing: 0.5%;
524
+ --ds-body-lg-letter-spacing: 0%;
675
525
  --ds-body-md-font-weight: 400;
676
526
  --ds-body-md-line-height: 1.5;
677
527
  --ds-body-md-font-size: 1.125rem;
678
- --ds-body-md-letter-spacing: 0.5%;
528
+ --ds-body-md-letter-spacing: 0%;
679
529
  --ds-body-sm-font-weight: 400;
680
530
  --ds-body-sm-line-height: 1.5;
681
531
  --ds-body-sm-font-size: 1rem;
682
- --ds-body-sm-letter-spacing: 0.25%;
532
+ --ds-body-sm-letter-spacing: 0%;
683
533
  --ds-body-xs-font-weight: 400;
684
534
  --ds-body-xs-line-height: 1.5;
685
535
  --ds-body-xs-font-size: 0.875rem;
686
- --ds-body-xs-letter-spacing: 0.15%;
536
+ --ds-body-xs-letter-spacing: 0%;
687
537
  --ds-body-short-xl-font-weight: 400;
688
538
  --ds-body-short-xl-line-height: 1.3;
689
539
  --ds-body-short-xl-font-size: 1.5rem;
690
- --ds-body-short-xl-letter-spacing: 0.5%;
540
+ --ds-body-short-xl-letter-spacing: 0%;
691
541
  --ds-body-short-lg-font-weight: 400;
692
542
  --ds-body-short-lg-line-height: 1.3;
693
543
  --ds-body-short-lg-font-size: 1.3125rem;
694
- --ds-body-short-lg-letter-spacing: 0.5%;
544
+ --ds-body-short-lg-letter-spacing: 0%;
695
545
  --ds-body-short-md-font-weight: 400;
696
546
  --ds-body-short-md-line-height: 1.3;
697
547
  --ds-body-short-md-font-size: 1.125rem;
698
- --ds-body-short-md-letter-spacing: 0.5%;
548
+ --ds-body-short-md-letter-spacing: 0%;
699
549
  --ds-body-short-sm-font-weight: 400;
700
550
  --ds-body-short-sm-line-height: 1.3;
701
551
  --ds-body-short-sm-font-size: 1rem;
702
- --ds-body-short-sm-letter-spacing: 0.25%;
552
+ --ds-body-short-sm-letter-spacing: 0%;
703
553
  --ds-body-short-xs-font-weight: 400;
704
554
  --ds-body-short-xs-line-height: 1.3;
705
555
  --ds-body-short-xs-font-size: 0.875rem;
706
- --ds-body-short-xs-letter-spacing: 0.15%;
556
+ --ds-body-short-xs-letter-spacing: 0%;
707
557
  --ds-body-long-xl-font-weight: 400;
708
558
  --ds-body-long-xl-line-height: 1.7;
709
559
  --ds-body-long-xl-font-size: 1.5rem;
710
- --ds-body-long-xl-letter-spacing: 0.5%;
560
+ --ds-body-long-xl-letter-spacing: 0%;
711
561
  --ds-body-long-lg-font-weight: 400;
712
562
  --ds-body-long-lg-line-height: 1.7;
713
563
  --ds-body-long-lg-font-size: 1.3125rem;
714
- --ds-body-long-lg-letter-spacing: 0.5%;
564
+ --ds-body-long-lg-letter-spacing: 0%;
715
565
  --ds-body-long-md-font-weight: 400;
716
566
  --ds-body-long-md-line-height: 1.7;
717
567
  --ds-body-long-md-font-size: 1.125rem;
718
- --ds-body-long-md-letter-spacing: 0.5%;
568
+ --ds-body-long-md-letter-spacing: 0%;
719
569
  --ds-body-long-sm-font-weight: 400;
720
570
  --ds-body-long-sm-line-height: 1.7;
721
571
  --ds-body-long-sm-font-size: 1rem;
722
- --ds-body-long-sm-letter-spacing: 0.25%;
572
+ --ds-body-long-sm-letter-spacing: 0%;
723
573
  --ds-body-long-xs-font-weight: 400;
724
574
  --ds-body-long-xs-line-height: 1.7;
725
575
  --ds-body-long-xs-font-size: 0.875rem;
726
- --ds-body-long-xs-letter-spacing: 0.15%;
727
- --ds-label-lg-font-weight: 500;
728
- --ds-label-lg-line-height: 1.3;
729
- --ds-label-lg-font-size: 1.3125rem;
730
- --ds-label-lg-letter-spacing: 0.5%;
731
- --ds-label-md-font-weight: 500;
732
- --ds-label-md-line-height: 1.3;
733
- --ds-label-md-font-size: 1.125rem;
734
- --ds-label-md-letter-spacing: 0.5%;
735
- --ds-label-sm-font-weight: 500;
736
- --ds-label-sm-line-height: 1.3;
737
- --ds-label-sm-font-size: 1rem;
738
- --ds-label-sm-letter-spacing: 0.25%;
739
- --ds-label-xs-font-weight: 500;
740
- --ds-label-xs-line-height: 1.3;
741
- --ds-label-xs-font-size: 0.875rem;
742
- --ds-label-xs-letter-spacing: 0.15%;
743
- --ds-error_message-lg-font-weight: 400;
744
- --ds-error_message-lg-line-height: 1.3;
745
- --ds-error_message-lg-font-size: 1.3125rem;
746
- --ds-error_message-lg-letter-spacing: 0.5%;
747
- --ds-error_message-md-font-weight: 400;
748
- --ds-error_message-md-line-height: 1.3;
749
- --ds-error_message-md-font-size: 1.125rem;
750
- --ds-error_message-md-letter-spacing: 0.5%;
751
- --ds-error_message-sm-font-weight: 400;
752
- --ds-error_message-sm-line-height: 1.3;
753
- --ds-error_message-sm-font-size: 1rem;
754
- --ds-error_message-sm-letter-spacing: 0.25%;
755
- --ds-error_message-xs-font-weight: 400;
756
- --ds-error_message-xs-line-height: 1.3;
757
- --ds-error_message-xs-font-size: 0.875rem;
758
- --ds-error_message-xs-letter-spacing: 0.15%;
576
+ --ds-body-long-xs-letter-spacing: 0%;
759
577
  --ds-line-height-sm: 1.3;
760
578
  --ds-line-height-md: 1.5;
761
579
  --ds-line-height-lg: 1.7;
@@ -791,58 +609,17 @@
791
609
 
792
610
  @layer ds.theme.semantic {
793
611
  :root {
794
- --ds-disabled-opacity: 30%;
795
- --ds-border-radius-sm: calc(var(--ds-border-radius-base)*0.5);
796
- --ds-border-radius-md: calc(var(--ds-border-radius-base)*1);
797
- --ds-border-radius-lg: calc(var(--ds-border-radius-base)*2);
798
- --ds-border-radius-xl: calc(var(--ds-border-radius-base)*3);
799
- --ds-border-radius-2xl: calc(var(--ds-border-radius-base)*4);
800
- --ds-border-radius-3xl: calc(var(--ds-border-radius-base)*6);
801
- --ds-border-radius-4xl: calc(var(--ds-border-radius-base)*8);
612
+ --ds-size-base: 18;
613
+ --ds-size-step: 4;
614
+ --ds-border-radius-base: 0.75rem;
615
+ --ds-border-radius-scale: 0.25rem;
616
+ --ds-border-radius-sm: min(var(--ds-border-radius-base)*0.5,var(--ds-border-radius-scale));
617
+ --ds-border-radius-md: min(var(--ds-border-radius-base),var(--ds-border-radius-scale)*2);
618
+ --ds-border-radius-lg: min(var(--ds-border-radius-base)*2,var(--ds-border-radius-scale)*3);
619
+ --ds-border-radius-xl: min(var(--ds-border-radius-base)*3,var(--ds-border-radius-scale)*4);
620
+ --ds-border-radius-default: var(--ds-border-radius-base);
802
621
  --ds-border-radius-full: 624.9375rem;
803
- --ds-border-radius-base: 0.25rem;
804
- --ds-spacing-0: calc(var(--ds-spacing-base)*0);
805
- --ds-spacing-1: calc(var(--ds-spacing-base)*1);
806
- --ds-spacing-2: calc(var(--ds-spacing-base)*2);
807
- --ds-spacing-3: calc(var(--ds-spacing-base)*3);
808
- --ds-spacing-4: calc(var(--ds-spacing-base)*4);
809
- --ds-spacing-5: calc(var(--ds-spacing-base)*5);
810
- --ds-spacing-6: calc(var(--ds-spacing-base)*6);
811
- --ds-spacing-7: calc(var(--ds-spacing-base)*7);
812
- --ds-spacing-8: calc(var(--ds-spacing-base)*8);
813
- --ds-spacing-9: calc(var(--ds-spacing-base)*9);
814
- --ds-spacing-10: calc(var(--ds-spacing-base)*10);
815
- --ds-spacing-11: calc(var(--ds-spacing-base)*11);
816
- --ds-spacing-12: calc(var(--ds-spacing-base)*12);
817
- --ds-spacing-13: calc(var(--ds-spacing-base)*13);
818
- --ds-spacing-14: calc(var(--ds-spacing-base)*14);
819
- --ds-spacing-15: calc(var(--ds-spacing-base)*15);
820
- --ds-spacing-18: calc(var(--ds-spacing-base)*18);
821
- --ds-spacing-22: calc(var(--ds-spacing-base)*22);
822
- --ds-spacing-26: calc(var(--ds-spacing-base)*26);
823
- --ds-spacing-30: calc(var(--ds-spacing-base)*30);
824
- --ds-spacing-base: 0.25rem;
825
- --ds-sizing-0: calc(var(--ds-sizing-base)*0);
826
- --ds-sizing-1: calc(var(--ds-sizing-base)*1);
827
- --ds-sizing-2: calc(var(--ds-sizing-base)*2);
828
- --ds-sizing-3: calc(var(--ds-sizing-base)*3);
829
- --ds-sizing-4: calc(var(--ds-sizing-base)*4);
830
- --ds-sizing-5: calc(var(--ds-sizing-base)*5);
831
- --ds-sizing-6: calc(var(--ds-sizing-base)*6);
832
- --ds-sizing-7: calc(var(--ds-sizing-base)*7);
833
- --ds-sizing-8: calc(var(--ds-sizing-base)*8);
834
- --ds-sizing-9: calc(var(--ds-sizing-base)*9);
835
- --ds-sizing-10: calc(var(--ds-sizing-base)*10);
836
- --ds-sizing-11: calc(var(--ds-sizing-base)*11);
837
- --ds-sizing-12: calc(var(--ds-sizing-base)*12);
838
- --ds-sizing-13: calc(var(--ds-sizing-base)*13);
839
- --ds-sizing-14: calc(var(--ds-sizing-base)*14);
840
- --ds-sizing-15: calc(var(--ds-sizing-base)*15);
841
- --ds-sizing-18: calc(var(--ds-sizing-base)*18);
842
- --ds-sizing-22: calc(var(--ds-sizing-base)*22);
843
- --ds-sizing-26: calc(var(--ds-sizing-base)*26);
844
- --ds-sizing-30: calc(var(--ds-sizing-base)*30);
845
- --ds-sizing-base: 0.25rem;
622
+ --ds-disabled-opacity: 30%;
846
623
  --ds-border-width-default: 1px;
847
624
  --ds-border-width-highlight: 2px;
848
625
  --ds-shadow-xs: 0 0 1px 0 rgba(0,0,0,0.16), 0 1px 2px 0 rgba(0,0,0,0.12);
@@ -850,6 +627,50 @@
850
627
  --ds-shadow-md: 0 0 1px 0 rgba(0,0,0,0.14), 0 2px 4px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.12);
851
628
  --ds-shadow-lg: 0 0 1px 0 rgba(0,0,0,0.13), 0 3px 5px 0 rgba(0,0,0,0.13), 0 6px 12px 0 rgba(0,0,0,0.14);
852
629
  --ds-shadow-xl: 0 0 1px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.16), 0 12px 24px 0 rgba(0,0,0,0.16);
630
+
631
+ --ds-size-0: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *0);
632
+ --ds-size-1: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *1);
633
+ --ds-size-2: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *2);
634
+ --ds-size-3: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *3);
635
+ --ds-size-4: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *4);
636
+ --ds-size-5: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *5);
637
+ --ds-size-6: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *6);
638
+ --ds-size-7: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *7);
639
+ --ds-size-8: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *8);
640
+ --ds-size-9: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *9);
641
+ --ds-size-10: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *10);
642
+ --ds-size-11: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *11);
643
+ --ds-size-12: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *12);
644
+ --ds-size-13: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *13);
645
+ --ds-size-14: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *14);
646
+ --ds-size-15: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *15);
647
+ --ds-size-18: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *18);
648
+ --ds-size-22: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *22);
649
+ --ds-size-26: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *26);
650
+ --ds-size-30: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *30);
651
+
652
+ @supports (width: round(down, .1em, 1px)) {
653
+ --ds-size-0: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *0), 0.0625rem);
654
+ --ds-size-1: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *1), 0.0625rem);
655
+ --ds-size-2: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *2), 0.0625rem);
656
+ --ds-size-3: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *3), 0.0625rem);
657
+ --ds-size-4: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *4), 0.0625rem);
658
+ --ds-size-5: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *5), 0.0625rem);
659
+ --ds-size-6: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *6), 0.0625rem);
660
+ --ds-size-7: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *7), 0.0625rem);
661
+ --ds-size-8: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *8), 0.0625rem);
662
+ --ds-size-9: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *9), 0.0625rem);
663
+ --ds-size-10: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *10), 0.0625rem);
664
+ --ds-size-11: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *11), 0.0625rem);
665
+ --ds-size-12: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *12), 0.0625rem);
666
+ --ds-size-13: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *13), 0.0625rem);
667
+ --ds-size-14: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *14), 0.0625rem);
668
+ --ds-size-15: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *15), 0.0625rem);
669
+ --ds-size-18: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *18), 0.0625rem);
670
+ --ds-size-22: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *22), 0.0625rem);
671
+ --ds-size-26: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *26), 0.0625rem);
672
+ --ds-size-30: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *30), 0.0625rem);
673
+ }
853
674
  }
854
675
 
855
676
  }
@@ -858,618 +679,468 @@
858
679
  * These files are generated from design tokens defind using Token Studio
859
680
  */
860
681
 
861
- @layer ds.theme.color-mode.dark {
862
- [data-ds-color-mode="dark"] {
863
- --ds-color-accent-1: #1b1b1b;
864
- --ds-color-accent-2: #242424;
865
- --ds-color-accent-3: #303030;
866
- --ds-color-accent-4: #3e3e3e;
867
- --ds-color-accent-5: #4b4b4b;
868
- --ds-color-accent-6: #525252;
869
- --ds-color-accent-7: #6f6f6f;
870
- --ds-color-accent-8: #bebebe;
871
- --ds-color-accent-9: #ababab;
872
- --ds-color-accent-10: #969696;
873
- --ds-color-accent-11: #818181;
874
- --ds-color-accent-12: #a3a3a3;
875
- --ds-color-accent-13: #e1e1e1;
876
- --ds-color-accent-contrast-1: #000000;
877
- --ds-color-accent-contrast-2: #1b1b1b;
878
- --ds-color-accent-background-default: var(--ds-color-accent-1);
879
- --ds-color-accent-background-subtle: var(--ds-color-accent-2);
880
- --ds-color-accent-surface-default: var(--ds-color-accent-3);
881
- --ds-color-accent-surface-hover: var(--ds-color-accent-4);
882
- --ds-color-accent-surface-active: var(--ds-color-accent-5);
883
- --ds-color-accent-border-subtle: var(--ds-color-accent-6);
884
- --ds-color-accent-border-default: var(--ds-color-accent-7);
885
- --ds-color-accent-border-strong: var(--ds-color-accent-8);
886
- --ds-color-accent-base-default: var(--ds-color-accent-9);
887
- --ds-color-accent-base-hover: var(--ds-color-accent-10);
888
- --ds-color-accent-base-active: var(--ds-color-accent-11);
889
- --ds-color-accent-text-subtle: var(--ds-color-accent-12);
890
- --ds-color-accent-text-default: var(--ds-color-accent-13);
891
- --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1);
892
- --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2);
893
- --ds-color-neutral-1: #1b1b1b;
894
- --ds-color-neutral-2: #242424;
895
- --ds-color-neutral-3: #303030;
896
- --ds-color-neutral-4: #3e3e3e;
897
- --ds-color-neutral-5: #4b4b4b;
898
- --ds-color-neutral-6: #525252;
899
- --ds-color-neutral-7: #6f6f6f;
900
- --ds-color-neutral-8: #bebebe;
901
- --ds-color-neutral-9: #1f1f1f;
902
- --ds-color-neutral-10: #303030;
903
- --ds-color-neutral-11: #424242;
904
- --ds-color-neutral-12: #a3a3a3;
905
- --ds-color-neutral-13: #e1e1e1;
906
- --ds-color-neutral-contrast-1: #ffffff;
907
- --ds-color-neutral-contrast-2: #b0b0b0;
908
- --ds-color-neutral-background-default: var(--ds-color-neutral-1);
909
- --ds-color-neutral-background-subtle: var(--ds-color-neutral-2);
910
- --ds-color-neutral-surface-default: var(--ds-color-neutral-3);
911
- --ds-color-neutral-surface-hover: var(--ds-color-neutral-4);
912
- --ds-color-neutral-surface-active: var(--ds-color-neutral-5);
913
- --ds-color-neutral-border-subtle: var(--ds-color-neutral-6);
914
- --ds-color-neutral-border-default: var(--ds-color-neutral-7);
915
- --ds-color-neutral-border-strong: var(--ds-color-neutral-8);
916
- --ds-color-neutral-base-default: var(--ds-color-neutral-9);
917
- --ds-color-neutral-base-hover: var(--ds-color-neutral-10);
918
- --ds-color-neutral-base-active: var(--ds-color-neutral-11);
919
- --ds-color-neutral-text-subtle: var(--ds-color-neutral-12);
920
- --ds-color-neutral-text-default: var(--ds-color-neutral-13);
921
- --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1);
922
- --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2);
923
- --ds-color-brand1-1: #121e18;
924
- --ds-color-brand1-2: #18271f;
925
- --ds-color-brand1-3: #1f342a;
926
- --ds-color-brand1-4: #284336;
927
- --ds-color-brand1-5: #315241;
928
- --ds-color-brand1-6: #355947;
929
- --ds-color-brand1-7: #487960;
930
- --ds-color-brand1-8: #86cda9;
931
- --ds-color-brand1-9: #284336;
932
- --ds-color-brand1-10: #345745;
933
- --ds-color-brand1-11: #406b55;
934
- --ds-color-brand1-12: #6ab28d;
935
- --ds-color-brand1-13: #cae9d9;
936
- --ds-color-brand1-contrast-1: #ffffff;
937
- --ds-color-brand1-contrast-2: #d3d8d6;
938
- --ds-color-brand1-background-default: var(--ds-color-brand1-1);
939
- --ds-color-brand1-background-subtle: var(--ds-color-brand1-2);
940
- --ds-color-brand1-surface-default: var(--ds-color-brand1-3);
941
- --ds-color-brand1-surface-hover: var(--ds-color-brand1-4);
942
- --ds-color-brand1-surface-active: var(--ds-color-brand1-5);
943
- --ds-color-brand1-border-subtle: var(--ds-color-brand1-6);
944
- --ds-color-brand1-border-default: var(--ds-color-brand1-7);
945
- --ds-color-brand1-border-strong: var(--ds-color-brand1-8);
946
- --ds-color-brand1-base-default: var(--ds-color-brand1-9);
947
- --ds-color-brand1-base-hover: var(--ds-color-brand1-10);
948
- --ds-color-brand1-base-active: var(--ds-color-brand1-11);
949
- --ds-color-brand1-text-subtle: var(--ds-color-brand1-12);
950
- --ds-color-brand1-text-default: var(--ds-color-brand1-13);
951
- --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1);
952
- --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2);
953
- --ds-color-brand2-1: #191c1f;
954
- --ds-color-brand2-2: #202428;
955
- --ds-color-brand2-3: #2b3135;
956
- --ds-color-brand2-4: #383f44;
957
- --ds-color-brand2-5: #444c53;
958
- --ds-color-brand2-6: #4a535b;
959
- --ds-color-brand2-7: #65717b;
960
- --ds-color-brand2-8: #acc1d2;
961
- --ds-color-brand2-9: #24282b;
962
- --ds-color-brand2-10: #33393f;
963
- --ds-color-brand2-11: #444c53;
964
- --ds-color-brand2-12: #93a5b4;
965
- --ds-color-brand2-13: #d5e4f0;
966
- --ds-color-brand2-contrast-1: #ffffff;
967
- --ds-color-brand2-contrast-2: #babbbc;
968
- --ds-color-brand2-background-default: var(--ds-color-brand2-1);
969
- --ds-color-brand2-background-subtle: var(--ds-color-brand2-2);
970
- --ds-color-brand2-surface-default: var(--ds-color-brand2-3);
971
- --ds-color-brand2-surface-hover: var(--ds-color-brand2-4);
972
- --ds-color-brand2-surface-active: var(--ds-color-brand2-5);
973
- --ds-color-brand2-border-subtle: var(--ds-color-brand2-6);
974
- --ds-color-brand2-border-default: var(--ds-color-brand2-7);
975
- --ds-color-brand2-border-strong: var(--ds-color-brand2-8);
976
- --ds-color-brand2-base-default: var(--ds-color-brand2-9);
977
- --ds-color-brand2-base-hover: var(--ds-color-brand2-10);
978
- --ds-color-brand2-base-active: var(--ds-color-brand2-11);
979
- --ds-color-brand2-text-subtle: var(--ds-color-brand2-12);
980
- --ds-color-brand2-text-default: var(--ds-color-brand2-13);
981
- --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1);
982
- --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2);
983
- --ds-color-brand3-1: #1f1b17;
984
- --ds-color-brand3-2: #27231e;
985
- --ds-color-brand3-3: #353028;
986
- --ds-color-brand3-4: #433c33;
987
- --ds-color-brand3-5: #534a3f;
988
- --ds-color-brand3-6: #5b5145;
989
- --ds-color-brand3-7: #7a6d5c;
990
- --ds-color-brand3-8: #d0bb9e;
991
- --ds-color-brand3-9: #2c2721;
992
- --ds-color-brand3-10: #3f3830;
993
- --ds-color-brand3-11: #534a3f;
994
- --ds-color-brand3-12: #b2a188;
995
- --ds-color-brand3-13: #efe0cc;
996
- --ds-color-brand3-contrast-1: #ffffff;
997
- --ds-color-brand3-contrast-2: #bdbbb9;
998
- --ds-color-brand3-background-default: var(--ds-color-brand3-1);
999
- --ds-color-brand3-background-subtle: var(--ds-color-brand3-2);
1000
- --ds-color-brand3-surface-default: var(--ds-color-brand3-3);
1001
- --ds-color-brand3-surface-hover: var(--ds-color-brand3-4);
1002
- --ds-color-brand3-surface-active: var(--ds-color-brand3-5);
1003
- --ds-color-brand3-border-subtle: var(--ds-color-brand3-6);
1004
- --ds-color-brand3-border-default: var(--ds-color-brand3-7);
1005
- --ds-color-brand3-border-strong: var(--ds-color-brand3-8);
1006
- --ds-color-brand3-base-default: var(--ds-color-brand3-9);
1007
- --ds-color-brand3-base-hover: var(--ds-color-brand3-10);
1008
- --ds-color-brand3-base-active: var(--ds-color-brand3-11);
1009
- --ds-color-brand3-text-subtle: var(--ds-color-brand3-12);
1010
- --ds-color-brand3-text-default: var(--ds-color-brand3-13);
1011
- --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1);
1012
- --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2);
1013
- --ds-color-success-background-default: var(--ds-global-green-1);
1014
- --ds-color-success-background-subtle: var(--ds-global-green-2);
1015
- --ds-color-success-surface-default: var(--ds-global-green-3);
1016
- --ds-color-success-surface-hover: var(--ds-global-green-4);
1017
- --ds-color-success-surface-active: var(--ds-global-green-5);
1018
- --ds-color-success-border-subtle: var(--ds-global-green-6);
1019
- --ds-color-success-border-default: var(--ds-global-green-7);
1020
- --ds-color-success-border-strong: var(--ds-global-green-8);
1021
- --ds-color-success-base-default: var(--ds-global-green-9);
1022
- --ds-color-success-base-hover: var(--ds-global-green-10);
1023
- --ds-color-success-base-active: var(--ds-global-green-11);
1024
- --ds-color-success-text-subtle: var(--ds-global-green-12);
1025
- --ds-color-success-text-default: var(--ds-global-green-13);
1026
- --ds-color-success-contrast-default: var(--ds-global-green-contrast-1);
1027
- --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2);
1028
- --ds-color-danger-background-default: var(--ds-global-red-1);
1029
- --ds-color-danger-background-subtle: var(--ds-global-red-2);
1030
- --ds-color-danger-surface-default: var(--ds-global-red-3);
1031
- --ds-color-danger-surface-hover: var(--ds-global-red-4);
1032
- --ds-color-danger-surface-active: var(--ds-global-red-5);
1033
- --ds-color-danger-border-subtle: var(--ds-global-red-6);
1034
- --ds-color-danger-border-default: var(--ds-global-red-7);
1035
- --ds-color-danger-border-strong: var(--ds-global-red-8);
1036
- --ds-color-danger-base-default: var(--ds-global-red-9);
1037
- --ds-color-danger-base-hover: var(--ds-global-red-10);
1038
- --ds-color-danger-base-active: var(--ds-global-red-11);
1039
- --ds-color-danger-text-subtle: var(--ds-global-red-12);
1040
- --ds-color-danger-text-default: var(--ds-global-red-13);
1041
- --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1);
1042
- --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2);
1043
- --ds-color-info-background-default: #031d30;
1044
- --ds-color-info-background-subtle: #032540;
1045
- --ds-color-info-surface-default: #043256;
1046
- --ds-color-info-surface-hover: #063f6c;
1047
- --ds-color-info-surface-active: #074d84;
1048
- --ds-color-info-border-subtle: #075490;
1049
- --ds-color-info-border-default: #0c72c1;
1050
- --ds-color-info-border-strong: #98c3e5;
1051
- --ds-color-info-base-default: #2a84c8;
1052
- --ds-color-info-base-hover: #0a6dba;
1053
- --ds-color-info-base-active: #085998;
1054
- --ds-color-info-text-subtle: #6ba9d9;
1055
- --ds-color-info-text-default: #d3e5f4;
682
+ @layer ds.theme.color-scheme.dark {
683
+ [data-color-scheme="dark"] {
684
+ --ds-color-accent-background-default: #131f19;
685
+ --ds-color-accent-background-subtle: #182820;
686
+ --ds-color-accent-surface-default: #1f3429;
687
+ --ds-color-accent-surface-hover: #274234;
688
+ --ds-color-accent-surface-active: #305140;
689
+ --ds-color-accent-border-subtle: #355846;
690
+ --ds-color-accent-border-default: #50876b;
691
+ --ds-color-accent-border-strong: #69b08c;
692
+ --ds-color-accent-base-default: #284436;
693
+ --ds-color-accent-base-hover: #345745;
694
+ --ds-color-accent-base-active: #406c56;
695
+ --ds-color-accent-text-subtle: #69b08c;
696
+ --ds-color-accent-text-default: #cfebdd;
697
+ --ds-color-accent-contrast-default: #ffffff;
698
+ --ds-color-accent-contrast-subtle: #d4d9d7;
699
+ --ds-color-neutral-background-default: #1d1d1d;
700
+ --ds-color-neutral-background-subtle: #242424;
701
+ --ds-color-neutral-surface-default: #303030;
702
+ --ds-color-neutral-surface-hover: #3d3d3d;
703
+ --ds-color-neutral-surface-active: #4a4a4a;
704
+ --ds-color-neutral-border-subtle: #515151;
705
+ --ds-color-neutral-border-default: #7c7c7c;
706
+ --ds-color-neutral-border-strong: #a2a2a2;
707
+ --ds-color-neutral-base-default: #ababab;
708
+ --ds-color-neutral-base-hover: #969696;
709
+ --ds-color-neutral-base-active: #818181;
710
+ --ds-color-neutral-text-subtle: #a2a2a2;
711
+ --ds-color-neutral-text-default: #e5e5e5;
712
+ --ds-color-neutral-contrast-default: #000000;
713
+ --ds-color-neutral-contrast-subtle: #1b1b1b;
714
+ --ds-color-support1-background-default: #191e1b;
715
+ --ds-color-support1-background-subtle: #202623;
716
+ --ds-color-support1-surface-default: #2a312d;
717
+ --ds-color-support1-surface-hover: #353f3a;
718
+ --ds-color-support1-surface-active: #424d47;
719
+ --ds-color-support1-border-subtle: #47544d;
720
+ --ds-color-support1-border-default: #6d8076;
721
+ --ds-color-support1-border-strong: #8fa89a;
722
+ --ds-color-support1-base-default: #232926;
723
+ --ds-color-support1-base-hover: #323b36;
724
+ --ds-color-support1-base-active: #424e48;
725
+ --ds-color-support1-text-subtle: #8fa89a;
726
+ --ds-color-support1-text-default: #d7e9df;
727
+ --ds-color-support1-contrast-default: #ffffff;
728
+ --ds-color-support1-contrast-subtle: #babbbb;
729
+ --ds-color-support2-background-default: #1a1d20;
730
+ --ds-color-support2-background-subtle: #212528;
731
+ --ds-color-support2-surface-default: #2b3035;
732
+ --ds-color-support2-surface-hover: #373d43;
733
+ --ds-color-support2-surface-active: #434b52;
734
+ --ds-color-support2-border-subtle: #495259;
735
+ --ds-color-support2-border-default: #707d89;
736
+ --ds-color-support2-border-strong: #92a4b3;
737
+ --ds-color-support2-base-default: #23282b;
738
+ --ds-color-support2-base-hover: #343a3f;
739
+ --ds-color-support2-base-active: #444c53;
740
+ --ds-color-support2-text-subtle: #92a4b3;
741
+ --ds-color-support2-text-default: #d9e6f2;
742
+ --ds-color-support2-contrast-default: #ffffff;
743
+ --ds-color-support2-contrast-subtle: #babbbc;
744
+ --ds-color-support3-background-default: #1f1c18;
745
+ --ds-color-support3-background-subtle: #28241e;
746
+ --ds-color-support3-surface-default: #342f28;
747
+ --ds-color-support3-surface-hover: #423c32;
748
+ --ds-color-support3-surface-active: #51493e;
749
+ --ds-color-support3-border-subtle: #595043;
750
+ --ds-color-support3-border-default: #877a67;
751
+ --ds-color-support3-border-strong: #b19f87;
752
+ --ds-color-support3-base-default: #2c2721;
753
+ --ds-color-support3-base-hover: #3e382f;
754
+ --ds-color-support3-base-active: #534b3f;
755
+ --ds-color-support3-text-subtle: #b19f87;
756
+ --ds-color-support3-text-default: #f0e3d1;
757
+ --ds-color-support3-contrast-default: #ffffff;
758
+ --ds-color-support3-contrast-subtle: #bcbbb9;
759
+ --ds-color-success-background-default: #022306;
760
+ --ds-color-success-background-subtle: #022c08;
761
+ --ds-color-success-surface-default: #03380a;
762
+ --ds-color-success-surface-hover: #03470d;
763
+ --ds-color-success-surface-active: #04570f;
764
+ --ds-color-success-border-subtle: #045f11;
765
+ --ds-color-success-border-default: #178f28;
766
+ --ds-color-success-border-strong: #62b36d;
767
+ --ds-color-success-base-default: #138d24;
768
+ --ds-color-success-base-hover: #3ca14b;
769
+ --ds-color-success-base-active: #66b571;
770
+ --ds-color-success-text-subtle: #62b36d;
771
+ --ds-color-success-text-default: #d4ead7;
772
+ --ds-color-success-contrast-default: #000000;
773
+ --ds-color-success-contrast-subtle: #010501;
774
+ --ds-color-danger-background-default: #3d0909;
775
+ --ds-color-danger-background-subtle: #4c0b0b;
776
+ --ds-color-danger-surface-default: #610e0e;
777
+ --ds-color-danger-surface-hover: #7a1111;
778
+ --ds-color-danger-surface-active: #941515;
779
+ --ds-color-danger-border-subtle: #a11717;
780
+ --ds-color-danger-border-default: #cf5252;
781
+ --ds-color-danger-border-strong: #df8b8b;
782
+ --ds-color-danger-base-default: #d76e6e;
783
+ --ds-color-danger-base-hover: #df8b8b;
784
+ --ds-color-danger-base-active: #e7a8a8;
785
+ --ds-color-danger-text-subtle: #df8b8b;
786
+ --ds-color-danger-text-default: #f6dfdf;
787
+ --ds-color-danger-contrast-default: #000000;
788
+ --ds-color-danger-contrast-subtle: #271414;
789
+ --ds-color-info-background-default: #031e33;
790
+ --ds-color-info-background-subtle: #032641;
791
+ --ds-color-info-surface-default: #043154;
792
+ --ds-color-info-surface-hover: #063f6a;
793
+ --ds-color-info-surface-active: #074d82;
794
+ --ds-color-info-border-subtle: #07538d;
795
+ --ds-color-info-border-default: #2480c7;
796
+ --ds-color-info-border-strong: #69a8d8;
797
+ --ds-color-info-base-default: #2d85c9;
798
+ --ds-color-info-base-hover: #519ad2;
799
+ --ds-color-info-base-active: #77b0dc;
800
+ --ds-color-info-text-subtle: #69a8d8;
801
+ --ds-color-info-text-default: #d6e7f4;
1056
802
  --ds-color-info-contrast-default: #000000;
1057
- --ds-color-info-contrast-subtle: #040c13;
1058
- --ds-color-warning-background-default: var(--ds-global-yellow-1);
1059
- --ds-color-warning-background-subtle: var(--ds-global-yellow-2);
1060
- --ds-color-warning-surface-default: var(--ds-global-yellow-3);
1061
- --ds-color-warning-surface-hover: var(--ds-global-yellow-4);
1062
- --ds-color-warning-surface-active: var(--ds-global-yellow-5);
1063
- --ds-color-warning-border-subtle: var(--ds-global-yellow-6);
1064
- --ds-color-warning-border-default: var(--ds-global-yellow-7);
1065
- --ds-color-warning-border-strong: var(--ds-global-yellow-8);
1066
- --ds-color-warning-base-default: var(--ds-global-orange-9);
1067
- --ds-color-warning-base-hover: var(--ds-global-orange-10);
1068
- --ds-color-warning-base-active: var(--ds-global-orange-11);
1069
- --ds-color-warning-text-subtle: var(--ds-global-orange-12);
1070
- --ds-color-warning-text-default: var(--ds-global-orange-13);
1071
- --ds-color-warning-contrast-default: var(--ds-global-orange-contrast-1);
1072
- --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2);
1073
- --ds-color-focus-inner: #1b1b1b;
1074
- --ds-color-focus-outer: #e1e1e1;
1075
- --ds-global-blue-1: #031d30;
1076
- --ds-global-blue-2: #032540;
1077
- --ds-global-blue-3: #043256;
1078
- --ds-global-blue-4: #063f6c;
1079
- --ds-global-blue-5: #074d84;
1080
- --ds-global-blue-6: #075490;
1081
- --ds-global-blue-7: #0c72c1;
1082
- --ds-global-blue-8: #98c3e5;
1083
- --ds-global-blue-9: #2a84c8;
1084
- --ds-global-blue-10: #0a6dba;
1085
- --ds-global-blue-11: #085998;
1086
- --ds-global-blue-12: #6ba9d9;
1087
- --ds-global-blue-13: #d3e5f4;
803
+ --ds-color-info-contrast-subtle: #050e15;
804
+ --ds-color-warning-background-default: #221c08;
805
+ --ds-color-warning-background-subtle: #2b240a;
806
+ --ds-color-warning-surface-default: #382f0c;
807
+ --ds-color-warning-surface-hover: #483c10;
808
+ --ds-color-warning-surface-active: #584913;
809
+ --ds-color-warning-border-subtle: #5f5015;
810
+ --ds-color-warning-border-default: #927a20;
811
+ --ds-color-warning-border-strong: #bf9f2a;
812
+ --ds-color-warning-base-default: #bc612a;
813
+ --ds-color-warning-base-hover: #c87d4f;
814
+ --ds-color-warning-base-active: #d39772;
815
+ --ds-color-warning-text-subtle: #d2946e;
816
+ --ds-color-warning-text-default: #f2e2d7;
817
+ --ds-color-warning-contrast-default: #000000;
818
+ --ds-color-warning-contrast-subtle: #070301;
819
+ --ds-color-focus-inner: #1d1d1d;
820
+ --ds-color-focus-outer: #e5e5e5;
821
+ --ds-global-blue-1: #031e33;
822
+ --ds-global-blue-2: #032641;
823
+ --ds-global-blue-3: #043154;
824
+ --ds-global-blue-4: #063f6a;
825
+ --ds-global-blue-5: #074d82;
826
+ --ds-global-blue-6: #07538d;
827
+ --ds-global-blue-7: #2480c7;
828
+ --ds-global-blue-8: #69a8d8;
829
+ --ds-global-blue-9: #2d85c9;
830
+ --ds-global-blue-10: #519ad2;
831
+ --ds-global-blue-11: #77b0dc;
832
+ --ds-global-blue-12: #69a8d8;
833
+ --ds-global-blue-13: #d6e7f4;
1088
834
  --ds-global-blue-contrast-1: #000000;
1089
- --ds-global-blue-contrast-2: #040c13;
1090
- --ds-global-green-1: #012106;
1091
- --ds-global-green-2: #022b08;
835
+ --ds-global-blue-contrast-2: #050e15;
836
+ --ds-global-green-1: #022306;
837
+ --ds-global-green-2: #022c08;
1092
838
  --ds-global-green-3: #03380a;
1093
- --ds-global-green-4: #03490d;
1094
- --ds-global-green-5: #045810;
839
+ --ds-global-green-4: #03470d;
840
+ --ds-global-green-5: #04570f;
1095
841
  --ds-global-green-6: #045f11;
1096
- --ds-global-green-7: #068217;
1097
- --ds-global-green-8: #93cb9b;
1098
- --ds-global-green-9: #118c23;
1099
- --ds-global-green-10: #057615;
1100
- --ds-global-green-11: #045f11;
1101
- --ds-global-green-12: #63b46f;
1102
- --ds-global-green-13: #d1e9d4;
842
+ --ds-global-green-7: #178f28;
843
+ --ds-global-green-8: #62b36d;
844
+ --ds-global-green-9: #138d24;
845
+ --ds-global-green-10: #3ca14b;
846
+ --ds-global-green-11: #66b571;
847
+ --ds-global-green-12: #62b36d;
848
+ --ds-global-green-13: #d4ead7;
1103
849
  --ds-global-green-contrast-1: #000000;
1104
- --ds-global-green-contrast-2: #010401;
1105
- --ds-global-orange-1: #2d1507;
1106
- --ds-global-orange-2: #391b09;
1107
- --ds-global-orange-3: #4e250c;
1108
- --ds-global-orange-4: #633010;
1109
- --ds-global-orange-5: #783a13;
1110
- --ds-global-orange-6: #833f15;
1111
- --ds-global-orange-7: #b2551c;
1112
- --ds-global-orange-8: #e0b69c;
1113
- --ds-global-orange-9: #bc6028;
1114
- --ds-global-orange-10: #a24d1a;
1115
- --ds-global-orange-11: #833f15;
1116
- --ds-global-orange-12: #d29671;
1117
- --ds-global-orange-13: #f1ded3;
850
+ --ds-global-green-contrast-2: #010501;
851
+ --ds-global-orange-1: #2f1607;
852
+ --ds-global-orange-2: #3b1c09;
853
+ --ds-global-orange-3: #4d250c;
854
+ --ds-global-orange-4: #612f0f;
855
+ --ds-global-orange-5: #773913;
856
+ --ds-global-orange-6: #823e14;
857
+ --ds-global-orange-7: #bd632d;
858
+ --ds-global-orange-8: #d2946e;
859
+ --ds-global-orange-9: #bc612a;
860
+ --ds-global-orange-10: #c87d4f;
861
+ --ds-global-orange-11: #d39772;
862
+ --ds-global-orange-12: #d2946e;
863
+ --ds-global-orange-13: #f2e2d7;
1118
864
  --ds-global-orange-contrast-1: #000000;
1119
- --ds-global-orange-contrast-2: #060301;
1120
- --ds-global-purple-1: #251238;
1121
- --ds-global-purple-2: #301748;
1122
- --ds-global-purple-3: #402060;
1123
- --ds-global-purple-4: #52287a;
1124
- --ds-global-purple-5: #643196;
1125
- --ds-global-purple-6: #6b399d;
1126
- --ds-global-purple-7: #865daf;
1127
- --ds-global-purple-8: #c9b7db;
1128
- --ds-global-purple-9: #b298cc;
1129
- --ds-global-purple-10: #a181c0;
1130
- --ds-global-purple-11: #8f69b5;
1131
- --ds-global-purple-12: #b298cc;
1132
- --ds-global-purple-13: #e7dfef;
865
+ --ds-global-orange-contrast-2: #070301;
866
+ --ds-global-purple-1: #27133a;
867
+ --ds-global-purple-2: #31184a;
868
+ --ds-global-purple-3: #401f5f;
869
+ --ds-global-purple-4: #512879;
870
+ --ds-global-purple-5: #633094;
871
+ --ds-global-purple-6: #6a379c;
872
+ --ds-global-purple-7: #916cb6;
873
+ --ds-global-purple-8: #b297cb;
874
+ --ds-global-purple-9: #b49acd;
875
+ --ds-global-purple-10: #a282c1;
876
+ --ds-global-purple-11: #906ab5;
877
+ --ds-global-purple-12: #b297cb;
878
+ --ds-global-purple-13: #e9e2f0;
1133
879
  --ds-global-purple-contrast-1: #000000;
1134
- --ds-global-purple-contrast-2: #18141b;
1135
- --ds-global-red-1: #3b0808;
1136
- --ds-global-red-2: #4b0a0a;
1137
- --ds-global-red-3: #620e0e;
1138
- --ds-global-red-4: #7c1212;
1139
- --ds-global-red-5: #961515;
1140
- --ds-global-red-6: #a31717;
1141
- --ds-global-red-7: #c93c3c;
1142
- --ds-global-red-8: #e9b0b0;
880
+ --ds-global-purple-contrast-2: #18151c;
881
+ --ds-global-red-1: #3d0909;
882
+ --ds-global-red-2: #4c0b0b;
883
+ --ds-global-red-3: #610e0e;
884
+ --ds-global-red-4: #7a1111;
885
+ --ds-global-red-5: #941515;
886
+ --ds-global-red-6: #a11717;
887
+ --ds-global-red-7: #cf5252;
888
+ --ds-global-red-8: #df8b8b;
1143
889
  --ds-global-red-9: #d76e6e;
1144
- --ds-global-red-10: #ce4e4e;
1145
- --ds-global-red-11: #c32727;
1146
- --ds-global-red-12: #df8d8d;
1147
- --ds-global-red-13: #f5dcdc;
890
+ --ds-global-red-10: #df8b8b;
891
+ --ds-global-red-11: #e7a8a8;
892
+ --ds-global-red-12: #df8b8b;
893
+ --ds-global-red-13: #f6dfdf;
1148
894
  --ds-global-red-contrast-1: #000000;
1149
895
  --ds-global-red-contrast-2: #271414;
1150
- --ds-global-yellow-1: #221b06;
1151
- --ds-global-yellow-2: #2b2307;
1152
- --ds-global-yellow-3: #3a300a;
1153
- --ds-global-yellow-4: #4a3d0d;
1154
- --ds-global-yellow-5: #5a4a0f;
1155
- --ds-global-yellow-6: #635011;
1156
- --ds-global-yellow-7: #856d17;
1157
- --ds-global-yellow-8: #e4ba27;
1158
- --ds-global-yellow-9: #3d310a;
1159
- --ds-global-yellow-10: #52430e;
1160
- --ds-global-yellow-11: #695512;
1161
- --ds-global-yellow-12: #c39f21;
1162
- --ds-global-yellow-13: #f5e19b;
896
+ --ds-global-yellow-1: #221c08;
897
+ --ds-global-yellow-2: #2b240a;
898
+ --ds-global-yellow-3: #382f0c;
899
+ --ds-global-yellow-4: #483c10;
900
+ --ds-global-yellow-5: #584913;
901
+ --ds-global-yellow-6: #5f5015;
902
+ --ds-global-yellow-7: #927a20;
903
+ --ds-global-yellow-8: #bf9f2a;
904
+ --ds-global-yellow-9: #4a3e10;
905
+ --ds-global-yellow-10: #615115;
906
+ --ds-global-yellow-11: #77631a;
907
+ --ds-global-yellow-12: #bf9f2a;
908
+ --ds-global-yellow-13: #f1e5b9;
1163
909
  --ds-global-yellow-contrast-1: #ffffff;
1164
- --ds-global-yellow-contrast-2: #ccc9bf;
910
+ --ds-global-yellow-contrast-2: #dbd9d0;
1165
911
 
1166
912
  color-scheme: dark;
1167
913
  }
1168
914
 
1169
915
  @media (prefers-color-scheme: dark) {
1170
- [data-ds-color-mode="auto"] {
1171
- --ds-color-accent-1: #1b1b1b;
1172
- --ds-color-accent-2: #242424;
1173
- --ds-color-accent-3: #303030;
1174
- --ds-color-accent-4: #3e3e3e;
1175
- --ds-color-accent-5: #4b4b4b;
1176
- --ds-color-accent-6: #525252;
1177
- --ds-color-accent-7: #6f6f6f;
1178
- --ds-color-accent-8: #bebebe;
1179
- --ds-color-accent-9: #ababab;
1180
- --ds-color-accent-10: #969696;
1181
- --ds-color-accent-11: #818181;
1182
- --ds-color-accent-12: #a3a3a3;
1183
- --ds-color-accent-13: #e1e1e1;
1184
- --ds-color-accent-contrast-1: #000000;
1185
- --ds-color-accent-contrast-2: #1b1b1b;
1186
- --ds-color-accent-background-default: var(--ds-color-accent-1);
1187
- --ds-color-accent-background-subtle: var(--ds-color-accent-2);
1188
- --ds-color-accent-surface-default: var(--ds-color-accent-3);
1189
- --ds-color-accent-surface-hover: var(--ds-color-accent-4);
1190
- --ds-color-accent-surface-active: var(--ds-color-accent-5);
1191
- --ds-color-accent-border-subtle: var(--ds-color-accent-6);
1192
- --ds-color-accent-border-default: var(--ds-color-accent-7);
1193
- --ds-color-accent-border-strong: var(--ds-color-accent-8);
1194
- --ds-color-accent-base-default: var(--ds-color-accent-9);
1195
- --ds-color-accent-base-hover: var(--ds-color-accent-10);
1196
- --ds-color-accent-base-active: var(--ds-color-accent-11);
1197
- --ds-color-accent-text-subtle: var(--ds-color-accent-12);
1198
- --ds-color-accent-text-default: var(--ds-color-accent-13);
1199
- --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1);
1200
- --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2);
1201
- --ds-color-neutral-1: #1b1b1b;
1202
- --ds-color-neutral-2: #242424;
1203
- --ds-color-neutral-3: #303030;
1204
- --ds-color-neutral-4: #3e3e3e;
1205
- --ds-color-neutral-5: #4b4b4b;
1206
- --ds-color-neutral-6: #525252;
1207
- --ds-color-neutral-7: #6f6f6f;
1208
- --ds-color-neutral-8: #bebebe;
1209
- --ds-color-neutral-9: #1f1f1f;
1210
- --ds-color-neutral-10: #303030;
1211
- --ds-color-neutral-11: #424242;
1212
- --ds-color-neutral-12: #a3a3a3;
1213
- --ds-color-neutral-13: #e1e1e1;
1214
- --ds-color-neutral-contrast-1: #ffffff;
1215
- --ds-color-neutral-contrast-2: #b0b0b0;
1216
- --ds-color-neutral-background-default: var(--ds-color-neutral-1);
1217
- --ds-color-neutral-background-subtle: var(--ds-color-neutral-2);
1218
- --ds-color-neutral-surface-default: var(--ds-color-neutral-3);
1219
- --ds-color-neutral-surface-hover: var(--ds-color-neutral-4);
1220
- --ds-color-neutral-surface-active: var(--ds-color-neutral-5);
1221
- --ds-color-neutral-border-subtle: var(--ds-color-neutral-6);
1222
- --ds-color-neutral-border-default: var(--ds-color-neutral-7);
1223
- --ds-color-neutral-border-strong: var(--ds-color-neutral-8);
1224
- --ds-color-neutral-base-default: var(--ds-color-neutral-9);
1225
- --ds-color-neutral-base-hover: var(--ds-color-neutral-10);
1226
- --ds-color-neutral-base-active: var(--ds-color-neutral-11);
1227
- --ds-color-neutral-text-subtle: var(--ds-color-neutral-12);
1228
- --ds-color-neutral-text-default: var(--ds-color-neutral-13);
1229
- --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1);
1230
- --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2);
1231
- --ds-color-brand1-1: #121e18;
1232
- --ds-color-brand1-2: #18271f;
1233
- --ds-color-brand1-3: #1f342a;
1234
- --ds-color-brand1-4: #284336;
1235
- --ds-color-brand1-5: #315241;
1236
- --ds-color-brand1-6: #355947;
1237
- --ds-color-brand1-7: #487960;
1238
- --ds-color-brand1-8: #86cda9;
1239
- --ds-color-brand1-9: #284336;
1240
- --ds-color-brand1-10: #345745;
1241
- --ds-color-brand1-11: #406b55;
1242
- --ds-color-brand1-12: #6ab28d;
1243
- --ds-color-brand1-13: #cae9d9;
1244
- --ds-color-brand1-contrast-1: #ffffff;
1245
- --ds-color-brand1-contrast-2: #d3d8d6;
1246
- --ds-color-brand1-background-default: var(--ds-color-brand1-1);
1247
- --ds-color-brand1-background-subtle: var(--ds-color-brand1-2);
1248
- --ds-color-brand1-surface-default: var(--ds-color-brand1-3);
1249
- --ds-color-brand1-surface-hover: var(--ds-color-brand1-4);
1250
- --ds-color-brand1-surface-active: var(--ds-color-brand1-5);
1251
- --ds-color-brand1-border-subtle: var(--ds-color-brand1-6);
1252
- --ds-color-brand1-border-default: var(--ds-color-brand1-7);
1253
- --ds-color-brand1-border-strong: var(--ds-color-brand1-8);
1254
- --ds-color-brand1-base-default: var(--ds-color-brand1-9);
1255
- --ds-color-brand1-base-hover: var(--ds-color-brand1-10);
1256
- --ds-color-brand1-base-active: var(--ds-color-brand1-11);
1257
- --ds-color-brand1-text-subtle: var(--ds-color-brand1-12);
1258
- --ds-color-brand1-text-default: var(--ds-color-brand1-13);
1259
- --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1);
1260
- --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2);
1261
- --ds-color-brand2-1: #191c1f;
1262
- --ds-color-brand2-2: #202428;
1263
- --ds-color-brand2-3: #2b3135;
1264
- --ds-color-brand2-4: #383f44;
1265
- --ds-color-brand2-5: #444c53;
1266
- --ds-color-brand2-6: #4a535b;
1267
- --ds-color-brand2-7: #65717b;
1268
- --ds-color-brand2-8: #acc1d2;
1269
- --ds-color-brand2-9: #24282b;
1270
- --ds-color-brand2-10: #33393f;
1271
- --ds-color-brand2-11: #444c53;
1272
- --ds-color-brand2-12: #93a5b4;
1273
- --ds-color-brand2-13: #d5e4f0;
1274
- --ds-color-brand2-contrast-1: #ffffff;
1275
- --ds-color-brand2-contrast-2: #babbbc;
1276
- --ds-color-brand2-background-default: var(--ds-color-brand2-1);
1277
- --ds-color-brand2-background-subtle: var(--ds-color-brand2-2);
1278
- --ds-color-brand2-surface-default: var(--ds-color-brand2-3);
1279
- --ds-color-brand2-surface-hover: var(--ds-color-brand2-4);
1280
- --ds-color-brand2-surface-active: var(--ds-color-brand2-5);
1281
- --ds-color-brand2-border-subtle: var(--ds-color-brand2-6);
1282
- --ds-color-brand2-border-default: var(--ds-color-brand2-7);
1283
- --ds-color-brand2-border-strong: var(--ds-color-brand2-8);
1284
- --ds-color-brand2-base-default: var(--ds-color-brand2-9);
1285
- --ds-color-brand2-base-hover: var(--ds-color-brand2-10);
1286
- --ds-color-brand2-base-active: var(--ds-color-brand2-11);
1287
- --ds-color-brand2-text-subtle: var(--ds-color-brand2-12);
1288
- --ds-color-brand2-text-default: var(--ds-color-brand2-13);
1289
- --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1);
1290
- --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2);
1291
- --ds-color-brand3-1: #1f1b17;
1292
- --ds-color-brand3-2: #27231e;
1293
- --ds-color-brand3-3: #353028;
1294
- --ds-color-brand3-4: #433c33;
1295
- --ds-color-brand3-5: #534a3f;
1296
- --ds-color-brand3-6: #5b5145;
1297
- --ds-color-brand3-7: #7a6d5c;
1298
- --ds-color-brand3-8: #d0bb9e;
1299
- --ds-color-brand3-9: #2c2721;
1300
- --ds-color-brand3-10: #3f3830;
1301
- --ds-color-brand3-11: #534a3f;
1302
- --ds-color-brand3-12: #b2a188;
1303
- --ds-color-brand3-13: #efe0cc;
1304
- --ds-color-brand3-contrast-1: #ffffff;
1305
- --ds-color-brand3-contrast-2: #bdbbb9;
1306
- --ds-color-brand3-background-default: var(--ds-color-brand3-1);
1307
- --ds-color-brand3-background-subtle: var(--ds-color-brand3-2);
1308
- --ds-color-brand3-surface-default: var(--ds-color-brand3-3);
1309
- --ds-color-brand3-surface-hover: var(--ds-color-brand3-4);
1310
- --ds-color-brand3-surface-active: var(--ds-color-brand3-5);
1311
- --ds-color-brand3-border-subtle: var(--ds-color-brand3-6);
1312
- --ds-color-brand3-border-default: var(--ds-color-brand3-7);
1313
- --ds-color-brand3-border-strong: var(--ds-color-brand3-8);
1314
- --ds-color-brand3-base-default: var(--ds-color-brand3-9);
1315
- --ds-color-brand3-base-hover: var(--ds-color-brand3-10);
1316
- --ds-color-brand3-base-active: var(--ds-color-brand3-11);
1317
- --ds-color-brand3-text-subtle: var(--ds-color-brand3-12);
1318
- --ds-color-brand3-text-default: var(--ds-color-brand3-13);
1319
- --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1);
1320
- --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2);
1321
- --ds-color-success-background-default: var(--ds-global-green-1);
1322
- --ds-color-success-background-subtle: var(--ds-global-green-2);
1323
- --ds-color-success-surface-default: var(--ds-global-green-3);
1324
- --ds-color-success-surface-hover: var(--ds-global-green-4);
1325
- --ds-color-success-surface-active: var(--ds-global-green-5);
1326
- --ds-color-success-border-subtle: var(--ds-global-green-6);
1327
- --ds-color-success-border-default: var(--ds-global-green-7);
1328
- --ds-color-success-border-strong: var(--ds-global-green-8);
1329
- --ds-color-success-base-default: var(--ds-global-green-9);
1330
- --ds-color-success-base-hover: var(--ds-global-green-10);
1331
- --ds-color-success-base-active: var(--ds-global-green-11);
1332
- --ds-color-success-text-subtle: var(--ds-global-green-12);
1333
- --ds-color-success-text-default: var(--ds-global-green-13);
1334
- --ds-color-success-contrast-default: var(--ds-global-green-contrast-1);
1335
- --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2);
1336
- --ds-color-danger-background-default: var(--ds-global-red-1);
1337
- --ds-color-danger-background-subtle: var(--ds-global-red-2);
1338
- --ds-color-danger-surface-default: var(--ds-global-red-3);
1339
- --ds-color-danger-surface-hover: var(--ds-global-red-4);
1340
- --ds-color-danger-surface-active: var(--ds-global-red-5);
1341
- --ds-color-danger-border-subtle: var(--ds-global-red-6);
1342
- --ds-color-danger-border-default: var(--ds-global-red-7);
1343
- --ds-color-danger-border-strong: var(--ds-global-red-8);
1344
- --ds-color-danger-base-default: var(--ds-global-red-9);
1345
- --ds-color-danger-base-hover: var(--ds-global-red-10);
1346
- --ds-color-danger-base-active: var(--ds-global-red-11);
1347
- --ds-color-danger-text-subtle: var(--ds-global-red-12);
1348
- --ds-color-danger-text-default: var(--ds-global-red-13);
1349
- --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1);
1350
- --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2);
1351
- --ds-color-info-background-default: #031d30;
1352
- --ds-color-info-background-subtle: #032540;
1353
- --ds-color-info-surface-default: #043256;
1354
- --ds-color-info-surface-hover: #063f6c;
1355
- --ds-color-info-surface-active: #074d84;
1356
- --ds-color-info-border-subtle: #075490;
1357
- --ds-color-info-border-default: #0c72c1;
1358
- --ds-color-info-border-strong: #98c3e5;
1359
- --ds-color-info-base-default: #2a84c8;
1360
- --ds-color-info-base-hover: #0a6dba;
1361
- --ds-color-info-base-active: #085998;
1362
- --ds-color-info-text-subtle: #6ba9d9;
1363
- --ds-color-info-text-default: #d3e5f4;
916
+ [data-color-scheme="auto"] {
917
+ --ds-color-accent-background-default: #131f19;
918
+ --ds-color-accent-background-subtle: #182820;
919
+ --ds-color-accent-surface-default: #1f3429;
920
+ --ds-color-accent-surface-hover: #274234;
921
+ --ds-color-accent-surface-active: #305140;
922
+ --ds-color-accent-border-subtle: #355846;
923
+ --ds-color-accent-border-default: #50876b;
924
+ --ds-color-accent-border-strong: #69b08c;
925
+ --ds-color-accent-base-default: #284436;
926
+ --ds-color-accent-base-hover: #345745;
927
+ --ds-color-accent-base-active: #406c56;
928
+ --ds-color-accent-text-subtle: #69b08c;
929
+ --ds-color-accent-text-default: #cfebdd;
930
+ --ds-color-accent-contrast-default: #ffffff;
931
+ --ds-color-accent-contrast-subtle: #d4d9d7;
932
+ --ds-color-neutral-background-default: #1d1d1d;
933
+ --ds-color-neutral-background-subtle: #242424;
934
+ --ds-color-neutral-surface-default: #303030;
935
+ --ds-color-neutral-surface-hover: #3d3d3d;
936
+ --ds-color-neutral-surface-active: #4a4a4a;
937
+ --ds-color-neutral-border-subtle: #515151;
938
+ --ds-color-neutral-border-default: #7c7c7c;
939
+ --ds-color-neutral-border-strong: #a2a2a2;
940
+ --ds-color-neutral-base-default: #ababab;
941
+ --ds-color-neutral-base-hover: #969696;
942
+ --ds-color-neutral-base-active: #818181;
943
+ --ds-color-neutral-text-subtle: #a2a2a2;
944
+ --ds-color-neutral-text-default: #e5e5e5;
945
+ --ds-color-neutral-contrast-default: #000000;
946
+ --ds-color-neutral-contrast-subtle: #1b1b1b;
947
+ --ds-color-support1-background-default: #191e1b;
948
+ --ds-color-support1-background-subtle: #202623;
949
+ --ds-color-support1-surface-default: #2a312d;
950
+ --ds-color-support1-surface-hover: #353f3a;
951
+ --ds-color-support1-surface-active: #424d47;
952
+ --ds-color-support1-border-subtle: #47544d;
953
+ --ds-color-support1-border-default: #6d8076;
954
+ --ds-color-support1-border-strong: #8fa89a;
955
+ --ds-color-support1-base-default: #232926;
956
+ --ds-color-support1-base-hover: #323b36;
957
+ --ds-color-support1-base-active: #424e48;
958
+ --ds-color-support1-text-subtle: #8fa89a;
959
+ --ds-color-support1-text-default: #d7e9df;
960
+ --ds-color-support1-contrast-default: #ffffff;
961
+ --ds-color-support1-contrast-subtle: #babbbb;
962
+ --ds-color-support2-background-default: #1a1d20;
963
+ --ds-color-support2-background-subtle: #212528;
964
+ --ds-color-support2-surface-default: #2b3035;
965
+ --ds-color-support2-surface-hover: #373d43;
966
+ --ds-color-support2-surface-active: #434b52;
967
+ --ds-color-support2-border-subtle: #495259;
968
+ --ds-color-support2-border-default: #707d89;
969
+ --ds-color-support2-border-strong: #92a4b3;
970
+ --ds-color-support2-base-default: #23282b;
971
+ --ds-color-support2-base-hover: #343a3f;
972
+ --ds-color-support2-base-active: #444c53;
973
+ --ds-color-support2-text-subtle: #92a4b3;
974
+ --ds-color-support2-text-default: #d9e6f2;
975
+ --ds-color-support2-contrast-default: #ffffff;
976
+ --ds-color-support2-contrast-subtle: #babbbc;
977
+ --ds-color-support3-background-default: #1f1c18;
978
+ --ds-color-support3-background-subtle: #28241e;
979
+ --ds-color-support3-surface-default: #342f28;
980
+ --ds-color-support3-surface-hover: #423c32;
981
+ --ds-color-support3-surface-active: #51493e;
982
+ --ds-color-support3-border-subtle: #595043;
983
+ --ds-color-support3-border-default: #877a67;
984
+ --ds-color-support3-border-strong: #b19f87;
985
+ --ds-color-support3-base-default: #2c2721;
986
+ --ds-color-support3-base-hover: #3e382f;
987
+ --ds-color-support3-base-active: #534b3f;
988
+ --ds-color-support3-text-subtle: #b19f87;
989
+ --ds-color-support3-text-default: #f0e3d1;
990
+ --ds-color-support3-contrast-default: #ffffff;
991
+ --ds-color-support3-contrast-subtle: #bcbbb9;
992
+ --ds-color-success-background-default: #022306;
993
+ --ds-color-success-background-subtle: #022c08;
994
+ --ds-color-success-surface-default: #03380a;
995
+ --ds-color-success-surface-hover: #03470d;
996
+ --ds-color-success-surface-active: #04570f;
997
+ --ds-color-success-border-subtle: #045f11;
998
+ --ds-color-success-border-default: #178f28;
999
+ --ds-color-success-border-strong: #62b36d;
1000
+ --ds-color-success-base-default: #138d24;
1001
+ --ds-color-success-base-hover: #3ca14b;
1002
+ --ds-color-success-base-active: #66b571;
1003
+ --ds-color-success-text-subtle: #62b36d;
1004
+ --ds-color-success-text-default: #d4ead7;
1005
+ --ds-color-success-contrast-default: #000000;
1006
+ --ds-color-success-contrast-subtle: #010501;
1007
+ --ds-color-danger-background-default: #3d0909;
1008
+ --ds-color-danger-background-subtle: #4c0b0b;
1009
+ --ds-color-danger-surface-default: #610e0e;
1010
+ --ds-color-danger-surface-hover: #7a1111;
1011
+ --ds-color-danger-surface-active: #941515;
1012
+ --ds-color-danger-border-subtle: #a11717;
1013
+ --ds-color-danger-border-default: #cf5252;
1014
+ --ds-color-danger-border-strong: #df8b8b;
1015
+ --ds-color-danger-base-default: #d76e6e;
1016
+ --ds-color-danger-base-hover: #df8b8b;
1017
+ --ds-color-danger-base-active: #e7a8a8;
1018
+ --ds-color-danger-text-subtle: #df8b8b;
1019
+ --ds-color-danger-text-default: #f6dfdf;
1020
+ --ds-color-danger-contrast-default: #000000;
1021
+ --ds-color-danger-contrast-subtle: #271414;
1022
+ --ds-color-info-background-default: #031e33;
1023
+ --ds-color-info-background-subtle: #032641;
1024
+ --ds-color-info-surface-default: #043154;
1025
+ --ds-color-info-surface-hover: #063f6a;
1026
+ --ds-color-info-surface-active: #074d82;
1027
+ --ds-color-info-border-subtle: #07538d;
1028
+ --ds-color-info-border-default: #2480c7;
1029
+ --ds-color-info-border-strong: #69a8d8;
1030
+ --ds-color-info-base-default: #2d85c9;
1031
+ --ds-color-info-base-hover: #519ad2;
1032
+ --ds-color-info-base-active: #77b0dc;
1033
+ --ds-color-info-text-subtle: #69a8d8;
1034
+ --ds-color-info-text-default: #d6e7f4;
1364
1035
  --ds-color-info-contrast-default: #000000;
1365
- --ds-color-info-contrast-subtle: #040c13;
1366
- --ds-color-warning-background-default: var(--ds-global-yellow-1);
1367
- --ds-color-warning-background-subtle: var(--ds-global-yellow-2);
1368
- --ds-color-warning-surface-default: var(--ds-global-yellow-3);
1369
- --ds-color-warning-surface-hover: var(--ds-global-yellow-4);
1370
- --ds-color-warning-surface-active: var(--ds-global-yellow-5);
1371
- --ds-color-warning-border-subtle: var(--ds-global-yellow-6);
1372
- --ds-color-warning-border-default: var(--ds-global-yellow-7);
1373
- --ds-color-warning-border-strong: var(--ds-global-yellow-8);
1374
- --ds-color-warning-base-default: var(--ds-global-orange-9);
1375
- --ds-color-warning-base-hover: var(--ds-global-orange-10);
1376
- --ds-color-warning-base-active: var(--ds-global-orange-11);
1377
- --ds-color-warning-text-subtle: var(--ds-global-orange-12);
1378
- --ds-color-warning-text-default: var(--ds-global-orange-13);
1379
- --ds-color-warning-contrast-default: var(--ds-global-orange-contrast-1);
1380
- --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2);
1381
- --ds-color-focus-inner: #1b1b1b;
1382
- --ds-color-focus-outer: #e1e1e1;
1383
- --ds-global-blue-1: #031d30;
1384
- --ds-global-blue-2: #032540;
1385
- --ds-global-blue-3: #043256;
1386
- --ds-global-blue-4: #063f6c;
1387
- --ds-global-blue-5: #074d84;
1388
- --ds-global-blue-6: #075490;
1389
- --ds-global-blue-7: #0c72c1;
1390
- --ds-global-blue-8: #98c3e5;
1391
- --ds-global-blue-9: #2a84c8;
1392
- --ds-global-blue-10: #0a6dba;
1393
- --ds-global-blue-11: #085998;
1394
- --ds-global-blue-12: #6ba9d9;
1395
- --ds-global-blue-13: #d3e5f4;
1036
+ --ds-color-info-contrast-subtle: #050e15;
1037
+ --ds-color-warning-background-default: #221c08;
1038
+ --ds-color-warning-background-subtle: #2b240a;
1039
+ --ds-color-warning-surface-default: #382f0c;
1040
+ --ds-color-warning-surface-hover: #483c10;
1041
+ --ds-color-warning-surface-active: #584913;
1042
+ --ds-color-warning-border-subtle: #5f5015;
1043
+ --ds-color-warning-border-default: #927a20;
1044
+ --ds-color-warning-border-strong: #bf9f2a;
1045
+ --ds-color-warning-base-default: #bc612a;
1046
+ --ds-color-warning-base-hover: #c87d4f;
1047
+ --ds-color-warning-base-active: #d39772;
1048
+ --ds-color-warning-text-subtle: #d2946e;
1049
+ --ds-color-warning-text-default: #f2e2d7;
1050
+ --ds-color-warning-contrast-default: #000000;
1051
+ --ds-color-warning-contrast-subtle: #070301;
1052
+ --ds-color-focus-inner: #1d1d1d;
1053
+ --ds-color-focus-outer: #e5e5e5;
1054
+ --ds-global-blue-1: #031e33;
1055
+ --ds-global-blue-2: #032641;
1056
+ --ds-global-blue-3: #043154;
1057
+ --ds-global-blue-4: #063f6a;
1058
+ --ds-global-blue-5: #074d82;
1059
+ --ds-global-blue-6: #07538d;
1060
+ --ds-global-blue-7: #2480c7;
1061
+ --ds-global-blue-8: #69a8d8;
1062
+ --ds-global-blue-9: #2d85c9;
1063
+ --ds-global-blue-10: #519ad2;
1064
+ --ds-global-blue-11: #77b0dc;
1065
+ --ds-global-blue-12: #69a8d8;
1066
+ --ds-global-blue-13: #d6e7f4;
1396
1067
  --ds-global-blue-contrast-1: #000000;
1397
- --ds-global-blue-contrast-2: #040c13;
1398
- --ds-global-green-1: #012106;
1399
- --ds-global-green-2: #022b08;
1068
+ --ds-global-blue-contrast-2: #050e15;
1069
+ --ds-global-green-1: #022306;
1070
+ --ds-global-green-2: #022c08;
1400
1071
  --ds-global-green-3: #03380a;
1401
- --ds-global-green-4: #03490d;
1402
- --ds-global-green-5: #045810;
1072
+ --ds-global-green-4: #03470d;
1073
+ --ds-global-green-5: #04570f;
1403
1074
  --ds-global-green-6: #045f11;
1404
- --ds-global-green-7: #068217;
1405
- --ds-global-green-8: #93cb9b;
1406
- --ds-global-green-9: #118c23;
1407
- --ds-global-green-10: #057615;
1408
- --ds-global-green-11: #045f11;
1409
- --ds-global-green-12: #63b46f;
1410
- --ds-global-green-13: #d1e9d4;
1075
+ --ds-global-green-7: #178f28;
1076
+ --ds-global-green-8: #62b36d;
1077
+ --ds-global-green-9: #138d24;
1078
+ --ds-global-green-10: #3ca14b;
1079
+ --ds-global-green-11: #66b571;
1080
+ --ds-global-green-12: #62b36d;
1081
+ --ds-global-green-13: #d4ead7;
1411
1082
  --ds-global-green-contrast-1: #000000;
1412
- --ds-global-green-contrast-2: #010401;
1413
- --ds-global-orange-1: #2d1507;
1414
- --ds-global-orange-2: #391b09;
1415
- --ds-global-orange-3: #4e250c;
1416
- --ds-global-orange-4: #633010;
1417
- --ds-global-orange-5: #783a13;
1418
- --ds-global-orange-6: #833f15;
1419
- --ds-global-orange-7: #b2551c;
1420
- --ds-global-orange-8: #e0b69c;
1421
- --ds-global-orange-9: #bc6028;
1422
- --ds-global-orange-10: #a24d1a;
1423
- --ds-global-orange-11: #833f15;
1424
- --ds-global-orange-12: #d29671;
1425
- --ds-global-orange-13: #f1ded3;
1083
+ --ds-global-green-contrast-2: #010501;
1084
+ --ds-global-orange-1: #2f1607;
1085
+ --ds-global-orange-2: #3b1c09;
1086
+ --ds-global-orange-3: #4d250c;
1087
+ --ds-global-orange-4: #612f0f;
1088
+ --ds-global-orange-5: #773913;
1089
+ --ds-global-orange-6: #823e14;
1090
+ --ds-global-orange-7: #bd632d;
1091
+ --ds-global-orange-8: #d2946e;
1092
+ --ds-global-orange-9: #bc612a;
1093
+ --ds-global-orange-10: #c87d4f;
1094
+ --ds-global-orange-11: #d39772;
1095
+ --ds-global-orange-12: #d2946e;
1096
+ --ds-global-orange-13: #f2e2d7;
1426
1097
  --ds-global-orange-contrast-1: #000000;
1427
- --ds-global-orange-contrast-2: #060301;
1428
- --ds-global-purple-1: #251238;
1429
- --ds-global-purple-2: #301748;
1430
- --ds-global-purple-3: #402060;
1431
- --ds-global-purple-4: #52287a;
1432
- --ds-global-purple-5: #643196;
1433
- --ds-global-purple-6: #6b399d;
1434
- --ds-global-purple-7: #865daf;
1435
- --ds-global-purple-8: #c9b7db;
1436
- --ds-global-purple-9: #b298cc;
1437
- --ds-global-purple-10: #a181c0;
1438
- --ds-global-purple-11: #8f69b5;
1439
- --ds-global-purple-12: #b298cc;
1440
- --ds-global-purple-13: #e7dfef;
1098
+ --ds-global-orange-contrast-2: #070301;
1099
+ --ds-global-purple-1: #27133a;
1100
+ --ds-global-purple-2: #31184a;
1101
+ --ds-global-purple-3: #401f5f;
1102
+ --ds-global-purple-4: #512879;
1103
+ --ds-global-purple-5: #633094;
1104
+ --ds-global-purple-6: #6a379c;
1105
+ --ds-global-purple-7: #916cb6;
1106
+ --ds-global-purple-8: #b297cb;
1107
+ --ds-global-purple-9: #b49acd;
1108
+ --ds-global-purple-10: #a282c1;
1109
+ --ds-global-purple-11: #906ab5;
1110
+ --ds-global-purple-12: #b297cb;
1111
+ --ds-global-purple-13: #e9e2f0;
1441
1112
  --ds-global-purple-contrast-1: #000000;
1442
- --ds-global-purple-contrast-2: #18141b;
1443
- --ds-global-red-1: #3b0808;
1444
- --ds-global-red-2: #4b0a0a;
1445
- --ds-global-red-3: #620e0e;
1446
- --ds-global-red-4: #7c1212;
1447
- --ds-global-red-5: #961515;
1448
- --ds-global-red-6: #a31717;
1449
- --ds-global-red-7: #c93c3c;
1450
- --ds-global-red-8: #e9b0b0;
1113
+ --ds-global-purple-contrast-2: #18151c;
1114
+ --ds-global-red-1: #3d0909;
1115
+ --ds-global-red-2: #4c0b0b;
1116
+ --ds-global-red-3: #610e0e;
1117
+ --ds-global-red-4: #7a1111;
1118
+ --ds-global-red-5: #941515;
1119
+ --ds-global-red-6: #a11717;
1120
+ --ds-global-red-7: #cf5252;
1121
+ --ds-global-red-8: #df8b8b;
1451
1122
  --ds-global-red-9: #d76e6e;
1452
- --ds-global-red-10: #ce4e4e;
1453
- --ds-global-red-11: #c32727;
1454
- --ds-global-red-12: #df8d8d;
1455
- --ds-global-red-13: #f5dcdc;
1123
+ --ds-global-red-10: #df8b8b;
1124
+ --ds-global-red-11: #e7a8a8;
1125
+ --ds-global-red-12: #df8b8b;
1126
+ --ds-global-red-13: #f6dfdf;
1456
1127
  --ds-global-red-contrast-1: #000000;
1457
1128
  --ds-global-red-contrast-2: #271414;
1458
- --ds-global-yellow-1: #221b06;
1459
- --ds-global-yellow-2: #2b2307;
1460
- --ds-global-yellow-3: #3a300a;
1461
- --ds-global-yellow-4: #4a3d0d;
1462
- --ds-global-yellow-5: #5a4a0f;
1463
- --ds-global-yellow-6: #635011;
1464
- --ds-global-yellow-7: #856d17;
1465
- --ds-global-yellow-8: #e4ba27;
1466
- --ds-global-yellow-9: #3d310a;
1467
- --ds-global-yellow-10: #52430e;
1468
- --ds-global-yellow-11: #695512;
1469
- --ds-global-yellow-12: #c39f21;
1470
- --ds-global-yellow-13: #f5e19b;
1129
+ --ds-global-yellow-1: #221c08;
1130
+ --ds-global-yellow-2: #2b240a;
1131
+ --ds-global-yellow-3: #382f0c;
1132
+ --ds-global-yellow-4: #483c10;
1133
+ --ds-global-yellow-5: #584913;
1134
+ --ds-global-yellow-6: #5f5015;
1135
+ --ds-global-yellow-7: #927a20;
1136
+ --ds-global-yellow-8: #bf9f2a;
1137
+ --ds-global-yellow-9: #4a3e10;
1138
+ --ds-global-yellow-10: #615115;
1139
+ --ds-global-yellow-11: #77631a;
1140
+ --ds-global-yellow-12: #bf9f2a;
1141
+ --ds-global-yellow-13: #f1e5b9;
1471
1142
  --ds-global-yellow-contrast-1: #ffffff;
1472
- --ds-global-yellow-contrast-2: #ccc9bf;
1143
+ --ds-global-yellow-contrast-2: #dbd9d0;
1473
1144
 
1474
1145
  color-scheme: dark;
1475
1146
  }
@@ -1478,324 +1149,12 @@
1478
1149
 
1479
1150
  }
1480
1151
 
1481
- /**
1482
- * These files are generated from design tokens defind using Token Studio
1483
- */
1484
-
1485
- @layer ds.theme.color-mode.contrast {
1486
- [data-ds-color-mode="contrast"] {
1487
- --ds-color-accent-1: #040404;
1488
- --ds-color-accent-2: #131313;
1489
- --ds-color-accent-3: #242424;
1490
- --ds-color-accent-4: #303030;
1491
- --ds-color-accent-5: #3e3e3e;
1492
- --ds-color-accent-6: #8b8b8b;
1493
- --ds-color-accent-7: #ababab;
1494
- --ds-color-accent-8: #cccccc;
1495
- --ds-color-accent-9: #ababab;
1496
- --ds-color-accent-10: #969696;
1497
- --ds-color-accent-11: #818181;
1498
- --ds-color-accent-12: #c6c6c6;
1499
- --ds-color-accent-13: #f0f0f0;
1500
- --ds-color-accent-contrast-1: #000000;
1501
- --ds-color-accent-contrast-2: #1b1b1b;
1502
- --ds-color-accent-background-default: var(--ds-color-accent-1);
1503
- --ds-color-accent-background-subtle: var(--ds-color-accent-2);
1504
- --ds-color-accent-surface-default: var(--ds-color-accent-3);
1505
- --ds-color-accent-surface-hover: var(--ds-color-accent-4);
1506
- --ds-color-accent-surface-active: var(--ds-color-accent-5);
1507
- --ds-color-accent-border-subtle: var(--ds-color-accent-6);
1508
- --ds-color-accent-border-default: var(--ds-color-accent-7);
1509
- --ds-color-accent-border-strong: var(--ds-color-accent-8);
1510
- --ds-color-accent-base-default: var(--ds-color-accent-9);
1511
- --ds-color-accent-base-hover: var(--ds-color-accent-10);
1512
- --ds-color-accent-base-active: var(--ds-color-accent-11);
1513
- --ds-color-accent-text-subtle: var(--ds-color-accent-12);
1514
- --ds-color-accent-text-default: var(--ds-color-accent-13);
1515
- --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1);
1516
- --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2);
1517
- --ds-color-neutral-1: #040404;
1518
- --ds-color-neutral-2: #131313;
1519
- --ds-color-neutral-3: #242424;
1520
- --ds-color-neutral-4: #303030;
1521
- --ds-color-neutral-5: #3e3e3e;
1522
- --ds-color-neutral-6: #8b8b8b;
1523
- --ds-color-neutral-7: #ababab;
1524
- --ds-color-neutral-8: #cccccc;
1525
- --ds-color-neutral-9: #1f1f1f;
1526
- --ds-color-neutral-10: #303030;
1527
- --ds-color-neutral-11: #424242;
1528
- --ds-color-neutral-12: #c6c6c6;
1529
- --ds-color-neutral-13: #f0f0f0;
1530
- --ds-color-neutral-contrast-1: #ffffff;
1531
- --ds-color-neutral-contrast-2: #b0b0b0;
1532
- --ds-color-neutral-background-default: var(--ds-color-neutral-1);
1533
- --ds-color-neutral-background-subtle: var(--ds-color-neutral-2);
1534
- --ds-color-neutral-surface-default: var(--ds-color-neutral-3);
1535
- --ds-color-neutral-surface-hover: var(--ds-color-neutral-4);
1536
- --ds-color-neutral-surface-active: var(--ds-color-neutral-5);
1537
- --ds-color-neutral-border-subtle: var(--ds-color-neutral-6);
1538
- --ds-color-neutral-border-default: var(--ds-color-neutral-7);
1539
- --ds-color-neutral-border-strong: var(--ds-color-neutral-8);
1540
- --ds-color-neutral-base-default: var(--ds-color-neutral-9);
1541
- --ds-color-neutral-base-hover: var(--ds-color-neutral-10);
1542
- --ds-color-neutral-base-active: var(--ds-color-neutral-11);
1543
- --ds-color-neutral-text-subtle: var(--ds-color-neutral-12);
1544
- --ds-color-neutral-text-default: var(--ds-color-neutral-13);
1545
- --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1);
1546
- --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2);
1547
- --ds-color-brand1-1: #020303;
1548
- --ds-color-brand1-2: #0c1511;
1549
- --ds-color-brand1-3: #18271f;
1550
- --ds-color-brand1-4: #1f342a;
1551
- --ds-color-brand1-5: #284336;
1552
- --ds-color-brand1-6: #5a9878;
1553
- --ds-color-brand1-7: #6fba93;
1554
- --ds-color-brand1-8: #a1d8bc;
1555
- --ds-color-brand1-9: #284336;
1556
- --ds-color-brand1-10: #345745;
1557
- --ds-color-brand1-11: #406b55;
1558
- --ds-color-brand1-12: #95d3b3;
1559
- --ds-color-brand1-13: #e4f4ec;
1560
- --ds-color-brand1-contrast-1: #ffffff;
1561
- --ds-color-brand1-contrast-2: #d3d8d6;
1562
- --ds-color-brand1-background-default: var(--ds-color-brand1-1);
1563
- --ds-color-brand1-background-subtle: var(--ds-color-brand1-2);
1564
- --ds-color-brand1-surface-default: var(--ds-color-brand1-3);
1565
- --ds-color-brand1-surface-hover: var(--ds-color-brand1-4);
1566
- --ds-color-brand1-surface-active: var(--ds-color-brand1-5);
1567
- --ds-color-brand1-border-subtle: var(--ds-color-brand1-6);
1568
- --ds-color-brand1-border-default: var(--ds-color-brand1-7);
1569
- --ds-color-brand1-border-strong: var(--ds-color-brand1-8);
1570
- --ds-color-brand1-base-default: var(--ds-color-brand1-9);
1571
- --ds-color-brand1-base-hover: var(--ds-color-brand1-10);
1572
- --ds-color-brand1-base-active: var(--ds-color-brand1-11);
1573
- --ds-color-brand1-text-subtle: var(--ds-color-brand1-12);
1574
- --ds-color-brand1-text-default: var(--ds-color-brand1-13);
1575
- --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1);
1576
- --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2);
1577
- --ds-color-brand2-1: #030304;
1578
- --ds-color-brand2-2: #111415;
1579
- --ds-color-brand2-3: #202428;
1580
- --ds-color-brand2-4: #2b3135;
1581
- --ds-color-brand2-5: #383f44;
1582
- --ds-color-brand2-6: #7e8d9a;
1583
- --ds-color-brand2-7: #9baebd;
1584
- --ds-color-brand2-8: #b8cfe1;
1585
- --ds-color-brand2-9: #24282b;
1586
- --ds-color-brand2-10: #33393f;
1587
- --ds-color-brand2-11: #444c53;
1588
- --ds-color-brand2-12: #b3c8da;
1589
- --ds-color-brand2-13: #eaf1f8;
1590
- --ds-color-brand2-contrast-1: #ffffff;
1591
- --ds-color-brand2-contrast-2: #babbbc;
1592
- --ds-color-brand2-background-default: var(--ds-color-brand2-1);
1593
- --ds-color-brand2-background-subtle: var(--ds-color-brand2-2);
1594
- --ds-color-brand2-surface-default: var(--ds-color-brand2-3);
1595
- --ds-color-brand2-surface-hover: var(--ds-color-brand2-4);
1596
- --ds-color-brand2-surface-active: var(--ds-color-brand2-5);
1597
- --ds-color-brand2-border-subtle: var(--ds-color-brand2-6);
1598
- --ds-color-brand2-border-default: var(--ds-color-brand2-7);
1599
- --ds-color-brand2-border-strong: var(--ds-color-brand2-8);
1600
- --ds-color-brand2-base-default: var(--ds-color-brand2-9);
1601
- --ds-color-brand2-base-hover: var(--ds-color-brand2-10);
1602
- --ds-color-brand2-base-active: var(--ds-color-brand2-11);
1603
- --ds-color-brand2-text-subtle: var(--ds-color-brand2-12);
1604
- --ds-color-brand2-text-default: var(--ds-color-brand2-13);
1605
- --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1);
1606
- --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2);
1607
- --ds-color-brand3-1: #040303;
1608
- --ds-color-brand3-2: #161310;
1609
- --ds-color-brand3-3: #27231e;
1610
- --ds-color-brand3-4: #353028;
1611
- --ds-color-brand3-5: #433c33;
1612
- --ds-color-brand3-6: #998974;
1613
- --ds-color-brand3-7: #bba98e;
1614
- --ds-color-brand3-8: #dec8a9;
1615
- --ds-color-brand3-9: #2c2721;
1616
- --ds-color-brand3-10: #3f3830;
1617
- --ds-color-brand3-11: #534a3f;
1618
- --ds-color-brand3-12: #d9c3a5;
1619
- --ds-color-brand3-13: #f7f0e7;
1620
- --ds-color-brand3-contrast-1: #ffffff;
1621
- --ds-color-brand3-contrast-2: #bdbbb9;
1622
- --ds-color-brand3-background-default: var(--ds-color-brand3-1);
1623
- --ds-color-brand3-background-subtle: var(--ds-color-brand3-2);
1624
- --ds-color-brand3-surface-default: var(--ds-color-brand3-3);
1625
- --ds-color-brand3-surface-hover: var(--ds-color-brand3-4);
1626
- --ds-color-brand3-surface-active: var(--ds-color-brand3-5);
1627
- --ds-color-brand3-border-subtle: var(--ds-color-brand3-6);
1628
- --ds-color-brand3-border-default: var(--ds-color-brand3-7);
1629
- --ds-color-brand3-border-strong: var(--ds-color-brand3-8);
1630
- --ds-color-brand3-base-default: var(--ds-color-brand3-9);
1631
- --ds-color-brand3-base-hover: var(--ds-color-brand3-10);
1632
- --ds-color-brand3-base-active: var(--ds-color-brand3-11);
1633
- --ds-color-brand3-text-subtle: var(--ds-color-brand3-12);
1634
- --ds-color-brand3-text-default: var(--ds-color-brand3-13);
1635
- --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1);
1636
- --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2);
1637
- --ds-color-success-background-default: var(--ds-global-green-1);
1638
- --ds-color-success-background-subtle: var(--ds-global-green-2);
1639
- --ds-color-success-surface-default: var(--ds-global-green-3);
1640
- --ds-color-success-surface-hover: var(--ds-global-green-4);
1641
- --ds-color-success-surface-active: var(--ds-global-green-5);
1642
- --ds-color-success-border-subtle: var(--ds-global-green-6);
1643
- --ds-color-success-border-default: var(--ds-global-green-7);
1644
- --ds-color-success-border-strong: var(--ds-global-green-8);
1645
- --ds-color-success-base-default: var(--ds-global-green-9);
1646
- --ds-color-success-base-hover: var(--ds-global-green-10);
1647
- --ds-color-success-base-active: var(--ds-global-green-11);
1648
- --ds-color-success-text-subtle: var(--ds-global-green-12);
1649
- --ds-color-success-text-default: var(--ds-global-green-13);
1650
- --ds-color-success-contrast-default: var(--ds-global-green-contrast-1);
1651
- --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2);
1652
- --ds-color-danger-background-default: var(--ds-global-red-1);
1653
- --ds-color-danger-background-subtle: var(--ds-global-red-2);
1654
- --ds-color-danger-surface-default: var(--ds-global-red-3);
1655
- --ds-color-danger-surface-hover: var(--ds-global-red-4);
1656
- --ds-color-danger-surface-active: var(--ds-global-red-5);
1657
- --ds-color-danger-border-subtle: var(--ds-global-red-6);
1658
- --ds-color-danger-border-default: var(--ds-global-red-7);
1659
- --ds-color-danger-border-strong: var(--ds-global-red-8);
1660
- --ds-color-danger-base-default: var(--ds-global-red-9);
1661
- --ds-color-danger-base-hover: var(--ds-global-red-10);
1662
- --ds-color-danger-base-active: var(--ds-global-red-11);
1663
- --ds-color-danger-text-subtle: var(--ds-global-red-12);
1664
- --ds-color-danger-text-default: var(--ds-global-red-13);
1665
- --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1);
1666
- --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2);
1667
- --ds-color-info-background-default: #000408;
1668
- --ds-color-info-background-subtle: #021423;
1669
- --ds-color-info-surface-default: #032540;
1670
- --ds-color-info-surface-hover: #043256;
1671
- --ds-color-info-surface-active: #063f6c;
1672
- --ds-color-info-border-subtle: #4291ce;
1673
- --ds-color-info-border-default: #78b1dc;
1674
- --ds-color-info-border-strong: #aed0ea;
1675
- --ds-color-info-base-default: #2a84c8;
1676
- --ds-color-info-base-hover: #0a6dba;
1677
- --ds-color-info-base-active: #085998;
1678
- --ds-color-info-text-subtle: #a6cbe8;
1679
- --ds-color-info-text-default: #e8f1f9;
1680
- --ds-color-info-contrast-default: #000000;
1681
- --ds-color-info-contrast-subtle: #040c13;
1682
- --ds-color-warning-background-default: var(--ds-global-yellow-1);
1683
- --ds-color-warning-background-subtle: var(--ds-global-yellow-2);
1684
- --ds-color-warning-surface-default: var(--ds-global-yellow-3);
1685
- --ds-color-warning-surface-hover: var(--ds-global-yellow-4);
1686
- --ds-color-warning-surface-active: var(--ds-global-yellow-5);
1687
- --ds-color-warning-border-subtle: var(--ds-global-yellow-6);
1688
- --ds-color-warning-border-default: var(--ds-global-yellow-7);
1689
- --ds-color-warning-border-strong: var(--ds-global-yellow-8);
1690
- --ds-color-warning-base-default: var(--ds-global-orange-9);
1691
- --ds-color-warning-base-hover: var(--ds-global-orange-10);
1692
- --ds-color-warning-base-active: var(--ds-global-orange-11);
1693
- --ds-color-warning-text-subtle: var(--ds-global-orange-12);
1694
- --ds-color-warning-text-default: var(--ds-global-orange-13);
1695
- --ds-color-warning-contrast-default: var(--ds-global-orange-contrast-1);
1696
- --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2);
1697
- --ds-color-focus-inner: #040404;
1698
- --ds-color-focus-outer: #f0f0f0;
1699
- --ds-global-blue-1: #000408;
1700
- --ds-global-blue-2: #021423;
1701
- --ds-global-blue-3: #032540;
1702
- --ds-global-blue-4: #043256;
1703
- --ds-global-blue-5: #063f6c;
1704
- --ds-global-blue-6: #4291ce;
1705
- --ds-global-blue-7: #78b1dc;
1706
- --ds-global-blue-8: #aed0ea;
1707
- --ds-global-blue-9: #2a84c8;
1708
- --ds-global-blue-10: #0a6dba;
1709
- --ds-global-blue-11: #085998;
1710
- --ds-global-blue-12: #a6cbe8;
1711
- --ds-global-blue-13: #e8f1f9;
1712
- --ds-global-blue-contrast-1: #000000;
1713
- --ds-global-blue-contrast-2: #040c13;
1714
- --ds-global-green-1: #000401;
1715
- --ds-global-green-2: #011704;
1716
- --ds-global-green-3: #022b08;
1717
- --ds-global-green-4: #03380a;
1718
- --ds-global-green-5: #03490d;
1719
- --ds-global-green-6: #379f45;
1720
- --ds-global-green-7: #71bb7b;
1721
- --ds-global-green-8: #aad6b0;
1722
- --ds-global-green-9: #118c23;
1723
- --ds-global-green-10: #057615;
1724
- --ds-global-green-11: #045f11;
1725
- --ds-global-green-12: #a3d2a9;
1726
- --ds-global-green-13: #e6f3e8;
1727
- --ds-global-green-contrast-1: #000000;
1728
- --ds-global-green-contrast-2: #010401;
1729
- --ds-global-orange-1: #060301;
1730
- --ds-global-orange-2: #200f05;
1731
- --ds-global-orange-3: #391b09;
1732
- --ds-global-orange-4: #4e250c;
1733
- --ds-global-orange-5: #633010;
1734
- --ds-global-orange-6: #c67849;
1735
- --ds-global-orange-7: #d69f7d;
1736
- --ds-global-orange-8: #e7c6b2;
1737
- --ds-global-orange-9: #bc6028;
1738
- --ds-global-orange-10: #a24d1a;
1739
- --ds-global-orange-11: #833f15;
1740
- --ds-global-orange-12: #e3bea6;
1741
- --ds-global-orange-13: #f8eee7;
1742
- --ds-global-orange-contrast-1: #000000;
1743
- --ds-global-orange-contrast-2: #060301;
1744
- --ds-global-purple-1: #060308;
1745
- --ds-global-purple-2: #1a0d26;
1746
- --ds-global-purple-3: #301748;
1747
- --ds-global-purple-4: #402060;
1748
- --ds-global-purple-5: #52287a;
1749
- --ds-global-purple-6: #9e7dbf;
1750
- --ds-global-purple-7: #b9a1d0;
1751
- --ds-global-purple-8: #d5c7e3;
1752
- --ds-global-purple-9: #b298cc;
1753
- --ds-global-purple-10: #a181c0;
1754
- --ds-global-purple-11: #8f69b5;
1755
- --ds-global-purple-12: #d0c0e0;
1756
- --ds-global-purple-13: #f2eef7;
1757
- --ds-global-purple-contrast-1: #000000;
1758
- --ds-global-purple-contrast-2: #18141b;
1759
- --ds-global-red-1: #0b0101;
1760
- --ds-global-red-2: #2b0606;
1761
- --ds-global-red-3: #4b0a0a;
1762
- --ds-global-red-4: #620e0e;
1763
- --ds-global-red-5: #7c1212;
1764
- --ds-global-red-6: #d66b6b;
1765
- --ds-global-red-7: #e29797;
1766
- --ds-global-red-8: #eec1c1;
1767
- --ds-global-red-9: #d76e6e;
1768
- --ds-global-red-10: #ce4e4e;
1769
- --ds-global-red-11: #c32727;
1770
- --ds-global-red-12: #ecbaba;
1771
- --ds-global-red-13: #faeded;
1772
- --ds-global-red-contrast-1: #000000;
1773
- --ds-global-red-contrast-2: #271414;
1774
- --ds-global-yellow-1: #040301;
1775
- --ds-global-yellow-2: #181304;
1776
- --ds-global-yellow-3: #2b2307;
1777
- --ds-global-yellow-4: #3a300a;
1778
- --ds-global-yellow-5: #4a3d0d;
1779
- --ds-global-yellow-6: #a7881c;
1780
- --ds-global-yellow-7: #cca723;
1781
- --ds-global-yellow-8: #edc94b;
1782
- --ds-global-yellow-9: #3d310a;
1783
- --ds-global-yellow-10: #52430e;
1784
- --ds-global-yellow-11: #695512;
1785
- --ds-global-yellow-12: #ebc232;
1786
- --ds-global-yellow-13: #faf0cd;
1787
- --ds-global-yellow-contrast-1: #ffffff;
1788
- --ds-global-yellow-contrast-2: #ccc9bf;
1789
- }
1790
-
1791
- }
1792
-
1793
1152
  /**
1794
1153
  * These files are generated from design tokens defind using Token Studio
1795
1154
  */
1796
1155
 
1797
1156
  @layer ds.theme.typography.primary {
1798
- :root, [data-ds-typography="primary"] {
1157
+ :root, [data-typography="primary"] {
1799
1158
  --ds-font-family: Inter;
1800
1159
  --ds-font-weight-medium: 500;
1801
1160
  --ds-font-weight-semibold: 600;
@@ -1803,19 +1162,19 @@
1803
1162
  --ds-heading-2xl-font-weight: 500;
1804
1163
  --ds-heading-2xl-line-height: 1.3;
1805
1164
  --ds-heading-2xl-font-size: 3.75rem;
1806
- --ds-heading-2xl-letter-spacing: -1%;
1165
+ --ds-heading-2xl-letter-spacing: 0%;
1807
1166
  --ds-heading-xl-font-weight: 500;
1808
1167
  --ds-heading-xl-line-height: 1.3;
1809
1168
  --ds-heading-xl-font-size: 3rem;
1810
- --ds-heading-xl-letter-spacing: -1%;
1169
+ --ds-heading-xl-letter-spacing: 0%;
1811
1170
  --ds-heading-lg-font-weight: 500;
1812
1171
  --ds-heading-lg-line-height: 1.3;
1813
1172
  --ds-heading-lg-font-size: 2.25rem;
1814
- --ds-heading-lg-letter-spacing: -0.5%;
1173
+ --ds-heading-lg-letter-spacing: 0%;
1815
1174
  --ds-heading-md-font-weight: 500;
1816
1175
  --ds-heading-md-line-height: 1.3;
1817
1176
  --ds-heading-md-font-size: 1.875rem;
1818
- --ds-heading-md-letter-spacing: -0.25%;
1177
+ --ds-heading-md-letter-spacing: 0%;
1819
1178
  --ds-heading-sm-font-weight: 500;
1820
1179
  --ds-heading-sm-line-height: 1.3;
1821
1180
  --ds-heading-sm-font-size: 1.5rem;
@@ -1823,103 +1182,71 @@
1823
1182
  --ds-heading-xs-font-weight: 500;
1824
1183
  --ds-heading-xs-line-height: 1.3;
1825
1184
  --ds-heading-xs-font-size: 1.3125rem;
1826
- --ds-heading-xs-letter-spacing: 0.15%;
1185
+ --ds-heading-xs-letter-spacing: 0%;
1827
1186
  --ds-heading-2xs-font-weight: 500;
1828
1187
  --ds-heading-2xs-line-height: 1.3;
1829
1188
  --ds-heading-2xs-font-size: 1.125rem;
1830
- --ds-heading-2xs-letter-spacing: 0.15%;
1189
+ --ds-heading-2xs-letter-spacing: 0%;
1831
1190
  --ds-body-xl-font-weight: 400;
1832
1191
  --ds-body-xl-line-height: 1.5;
1833
1192
  --ds-body-xl-font-size: 1.5rem;
1834
- --ds-body-xl-letter-spacing: 0.5%;
1193
+ --ds-body-xl-letter-spacing: 0%;
1835
1194
  --ds-body-lg-font-weight: 400;
1836
1195
  --ds-body-lg-line-height: 1.5;
1837
1196
  --ds-body-lg-font-size: 1.3125rem;
1838
- --ds-body-lg-letter-spacing: 0.5%;
1197
+ --ds-body-lg-letter-spacing: 0%;
1839
1198
  --ds-body-md-font-weight: 400;
1840
1199
  --ds-body-md-line-height: 1.5;
1841
1200
  --ds-body-md-font-size: 1.125rem;
1842
- --ds-body-md-letter-spacing: 0.5%;
1201
+ --ds-body-md-letter-spacing: 0%;
1843
1202
  --ds-body-sm-font-weight: 400;
1844
1203
  --ds-body-sm-line-height: 1.5;
1845
1204
  --ds-body-sm-font-size: 1rem;
1846
- --ds-body-sm-letter-spacing: 0.25%;
1205
+ --ds-body-sm-letter-spacing: 0%;
1847
1206
  --ds-body-xs-font-weight: 400;
1848
1207
  --ds-body-xs-line-height: 1.5;
1849
1208
  --ds-body-xs-font-size: 0.875rem;
1850
- --ds-body-xs-letter-spacing: 0.15%;
1209
+ --ds-body-xs-letter-spacing: 0%;
1851
1210
  --ds-body-short-xl-font-weight: 400;
1852
1211
  --ds-body-short-xl-line-height: 1.3;
1853
1212
  --ds-body-short-xl-font-size: 1.5rem;
1854
- --ds-body-short-xl-letter-spacing: 0.5%;
1213
+ --ds-body-short-xl-letter-spacing: 0%;
1855
1214
  --ds-body-short-lg-font-weight: 400;
1856
1215
  --ds-body-short-lg-line-height: 1.3;
1857
1216
  --ds-body-short-lg-font-size: 1.3125rem;
1858
- --ds-body-short-lg-letter-spacing: 0.5%;
1217
+ --ds-body-short-lg-letter-spacing: 0%;
1859
1218
  --ds-body-short-md-font-weight: 400;
1860
1219
  --ds-body-short-md-line-height: 1.3;
1861
1220
  --ds-body-short-md-font-size: 1.125rem;
1862
- --ds-body-short-md-letter-spacing: 0.5%;
1221
+ --ds-body-short-md-letter-spacing: 0%;
1863
1222
  --ds-body-short-sm-font-weight: 400;
1864
1223
  --ds-body-short-sm-line-height: 1.3;
1865
1224
  --ds-body-short-sm-font-size: 1rem;
1866
- --ds-body-short-sm-letter-spacing: 0.25%;
1225
+ --ds-body-short-sm-letter-spacing: 0%;
1867
1226
  --ds-body-short-xs-font-weight: 400;
1868
1227
  --ds-body-short-xs-line-height: 1.3;
1869
1228
  --ds-body-short-xs-font-size: 0.875rem;
1870
- --ds-body-short-xs-letter-spacing: 0.15%;
1229
+ --ds-body-short-xs-letter-spacing: 0%;
1871
1230
  --ds-body-long-xl-font-weight: 400;
1872
1231
  --ds-body-long-xl-line-height: 1.7;
1873
1232
  --ds-body-long-xl-font-size: 1.5rem;
1874
- --ds-body-long-xl-letter-spacing: 0.5%;
1233
+ --ds-body-long-xl-letter-spacing: 0%;
1875
1234
  --ds-body-long-lg-font-weight: 400;
1876
1235
  --ds-body-long-lg-line-height: 1.7;
1877
1236
  --ds-body-long-lg-font-size: 1.3125rem;
1878
- --ds-body-long-lg-letter-spacing: 0.5%;
1237
+ --ds-body-long-lg-letter-spacing: 0%;
1879
1238
  --ds-body-long-md-font-weight: 400;
1880
1239
  --ds-body-long-md-line-height: 1.7;
1881
1240
  --ds-body-long-md-font-size: 1.125rem;
1882
- --ds-body-long-md-letter-spacing: 0.5%;
1241
+ --ds-body-long-md-letter-spacing: 0%;
1883
1242
  --ds-body-long-sm-font-weight: 400;
1884
1243
  --ds-body-long-sm-line-height: 1.7;
1885
1244
  --ds-body-long-sm-font-size: 1rem;
1886
- --ds-body-long-sm-letter-spacing: 0.25%;
1245
+ --ds-body-long-sm-letter-spacing: 0%;
1887
1246
  --ds-body-long-xs-font-weight: 400;
1888
1247
  --ds-body-long-xs-line-height: 1.7;
1889
1248
  --ds-body-long-xs-font-size: 0.875rem;
1890
- --ds-body-long-xs-letter-spacing: 0.15%;
1891
- --ds-label-lg-font-weight: 500;
1892
- --ds-label-lg-line-height: 1.3;
1893
- --ds-label-lg-font-size: 1.3125rem;
1894
- --ds-label-lg-letter-spacing: 0.5%;
1895
- --ds-label-md-font-weight: 500;
1896
- --ds-label-md-line-height: 1.3;
1897
- --ds-label-md-font-size: 1.125rem;
1898
- --ds-label-md-letter-spacing: 0.5%;
1899
- --ds-label-sm-font-weight: 500;
1900
- --ds-label-sm-line-height: 1.3;
1901
- --ds-label-sm-font-size: 1rem;
1902
- --ds-label-sm-letter-spacing: 0.25%;
1903
- --ds-label-xs-font-weight: 500;
1904
- --ds-label-xs-line-height: 1.3;
1905
- --ds-label-xs-font-size: 0.875rem;
1906
- --ds-label-xs-letter-spacing: 0.15%;
1907
- --ds-error_message-lg-font-weight: 400;
1908
- --ds-error_message-lg-line-height: 1.3;
1909
- --ds-error_message-lg-font-size: 1.3125rem;
1910
- --ds-error_message-lg-letter-spacing: 0.5%;
1911
- --ds-error_message-md-font-weight: 400;
1912
- --ds-error_message-md-line-height: 1.3;
1913
- --ds-error_message-md-font-size: 1.125rem;
1914
- --ds-error_message-md-letter-spacing: 0.5%;
1915
- --ds-error_message-sm-font-weight: 400;
1916
- --ds-error_message-sm-line-height: 1.3;
1917
- --ds-error_message-sm-font-size: 1rem;
1918
- --ds-error_message-sm-letter-spacing: 0.25%;
1919
- --ds-error_message-xs-font-weight: 400;
1920
- --ds-error_message-xs-line-height: 1.3;
1921
- --ds-error_message-xs-font-size: 0.875rem;
1922
- --ds-error_message-xs-letter-spacing: 0.15%;
1249
+ --ds-body-long-xs-letter-spacing: 0%;
1923
1250
  --ds-line-height-sm: 1.3;
1924
1251
  --ds-line-height-md: 1.5;
1925
1252
  --ds-line-height-lg: 1.7;
@@ -1948,4 +1275,191 @@
1948
1275
  --ds-udir-extra-bold: 600;
1949
1276
  --ds-udir-regular: 400;
1950
1277
  }
1951
- }
1278
+ }
1279
+ /**
1280
+ * These files are generated from design tokens defind using Token Studio
1281
+ */
1282
+
1283
+ @layer ds.theme.color {
1284
+ [data-color="accent"] {
1285
+ --ds-color-background-default: var(--ds-color-accent-background-default);
1286
+ --ds-color-background-subtle: var(--ds-color-accent-background-subtle);
1287
+ --ds-color-surface-default: var(--ds-color-accent-surface-default);
1288
+ --ds-color-surface-hover: var(--ds-color-accent-surface-hover);
1289
+ --ds-color-surface-active: var(--ds-color-accent-surface-active);
1290
+ --ds-color-border-subtle: var(--ds-color-accent-border-subtle);
1291
+ --ds-color-border-default: var(--ds-color-accent-border-default);
1292
+ --ds-color-border-strong: var(--ds-color-accent-border-strong);
1293
+ --ds-color-base-default: var(--ds-color-accent-base-default);
1294
+ --ds-color-base-hover: var(--ds-color-accent-base-hover);
1295
+ --ds-color-base-active: var(--ds-color-accent-base-active);
1296
+ --ds-color-text-subtle: var(--ds-color-accent-text-subtle);
1297
+ --ds-color-text-default: var(--ds-color-accent-text-default);
1298
+ --ds-color-contrast-default: var(--ds-color-accent-contrast-default);
1299
+ --ds-color-contrast-subtle: var(--ds-color-accent-contrast-subtle);
1300
+ }
1301
+
1302
+ }
1303
+
1304
+ /**
1305
+ * These files are generated from design tokens defind using Token Studio
1306
+ */
1307
+
1308
+ @layer ds.theme.color {
1309
+ [data-color="support1"] {
1310
+ --ds-color-background-default: var(--ds-color-support1-background-default);
1311
+ --ds-color-background-subtle: var(--ds-color-support1-background-subtle);
1312
+ --ds-color-surface-default: var(--ds-color-support1-surface-default);
1313
+ --ds-color-surface-hover: var(--ds-color-support1-surface-hover);
1314
+ --ds-color-surface-active: var(--ds-color-support1-surface-active);
1315
+ --ds-color-border-subtle: var(--ds-color-support1-border-subtle);
1316
+ --ds-color-border-default: var(--ds-color-support1-border-default);
1317
+ --ds-color-border-strong: var(--ds-color-support1-border-strong);
1318
+ --ds-color-base-default: var(--ds-color-support1-base-default);
1319
+ --ds-color-base-hover: var(--ds-color-support1-base-hover);
1320
+ --ds-color-base-active: var(--ds-color-support1-base-active);
1321
+ --ds-color-text-subtle: var(--ds-color-support1-text-subtle);
1322
+ --ds-color-text-default: var(--ds-color-support1-text-default);
1323
+ --ds-color-contrast-default: var(--ds-color-support1-contrast-default);
1324
+ --ds-color-contrast-subtle: var(--ds-color-support1-contrast-subtle);
1325
+ }
1326
+
1327
+ }
1328
+
1329
+ /**
1330
+ * These files are generated from design tokens defind using Token Studio
1331
+ */
1332
+
1333
+ @layer ds.theme.color {
1334
+ [data-color="support2"] {
1335
+ --ds-color-background-default: var(--ds-color-support2-background-default);
1336
+ --ds-color-background-subtle: var(--ds-color-support2-background-subtle);
1337
+ --ds-color-surface-default: var(--ds-color-support2-surface-default);
1338
+ --ds-color-surface-hover: var(--ds-color-support2-surface-hover);
1339
+ --ds-color-surface-active: var(--ds-color-support2-surface-active);
1340
+ --ds-color-border-subtle: var(--ds-color-support2-border-subtle);
1341
+ --ds-color-border-default: var(--ds-color-support2-border-default);
1342
+ --ds-color-border-strong: var(--ds-color-support2-border-strong);
1343
+ --ds-color-base-default: var(--ds-color-support2-base-default);
1344
+ --ds-color-base-hover: var(--ds-color-support2-base-hover);
1345
+ --ds-color-base-active: var(--ds-color-support2-base-active);
1346
+ --ds-color-text-subtle: var(--ds-color-support2-text-subtle);
1347
+ --ds-color-text-default: var(--ds-color-support2-text-default);
1348
+ --ds-color-contrast-default: var(--ds-color-support2-contrast-default);
1349
+ --ds-color-contrast-subtle: var(--ds-color-support2-contrast-subtle);
1350
+ }
1351
+
1352
+ }
1353
+
1354
+ /**
1355
+ * These files are generated from design tokens defind using Token Studio
1356
+ */
1357
+
1358
+ @layer ds.theme.color {
1359
+ [data-color="support3"] {
1360
+ --ds-color-background-default: var(--ds-color-support3-background-default);
1361
+ --ds-color-background-subtle: var(--ds-color-support3-background-subtle);
1362
+ --ds-color-surface-default: var(--ds-color-support3-surface-default);
1363
+ --ds-color-surface-hover: var(--ds-color-support3-surface-hover);
1364
+ --ds-color-surface-active: var(--ds-color-support3-surface-active);
1365
+ --ds-color-border-subtle: var(--ds-color-support3-border-subtle);
1366
+ --ds-color-border-default: var(--ds-color-support3-border-default);
1367
+ --ds-color-border-strong: var(--ds-color-support3-border-strong);
1368
+ --ds-color-base-default: var(--ds-color-support3-base-default);
1369
+ --ds-color-base-hover: var(--ds-color-support3-base-hover);
1370
+ --ds-color-base-active: var(--ds-color-support3-base-active);
1371
+ --ds-color-text-subtle: var(--ds-color-support3-text-subtle);
1372
+ --ds-color-text-default: var(--ds-color-support3-text-default);
1373
+ --ds-color-contrast-default: var(--ds-color-support3-contrast-default);
1374
+ --ds-color-contrast-subtle: var(--ds-color-support3-contrast-subtle);
1375
+ }
1376
+
1377
+ }
1378
+
1379
+ @layer ds.theme.color {
1380
+ :root, [data-color-scheme], [data-color=neutral] {
1381
+ --ds-color-background-default: var(--ds-color-neutral-background-default);
1382
+ --ds-color-background-subtle: var(--ds-color-neutral-background-subtle);
1383
+ --ds-color-surface-default: var(--ds-color-neutral-surface-default);
1384
+ --ds-color-surface-hover: var(--ds-color-neutral-surface-hover);
1385
+ --ds-color-surface-active: var(--ds-color-neutral-surface-active);
1386
+ --ds-color-border-subtle: var(--ds-color-neutral-border-subtle);
1387
+ --ds-color-border-default: var(--ds-color-neutral-border-default);
1388
+ --ds-color-border-strong: var(--ds-color-neutral-border-strong);
1389
+ --ds-color-base-default: var(--ds-color-neutral-base-default);
1390
+ --ds-color-base-hover: var(--ds-color-neutral-base-hover);
1391
+ --ds-color-base-active: var(--ds-color-neutral-base-active);
1392
+ --ds-color-text-subtle: var(--ds-color-neutral-text-subtle);
1393
+ --ds-color-text-default: var(--ds-color-neutral-text-default);
1394
+ --ds-color-contrast-default: var(--ds-color-neutral-contrast-default);
1395
+ --ds-color-contrast-subtle: var(--ds-color-neutral-contrast-subtle);
1396
+ }
1397
+ [data-color=success] {
1398
+ --ds-color-background-default: var(--ds-color-success-background-default);
1399
+ --ds-color-background-subtle: var(--ds-color-success-background-subtle);
1400
+ --ds-color-surface-default: var(--ds-color-success-surface-default);
1401
+ --ds-color-surface-hover: var(--ds-color-success-surface-hover);
1402
+ --ds-color-surface-active: var(--ds-color-success-surface-active);
1403
+ --ds-color-border-subtle: var(--ds-color-success-border-subtle);
1404
+ --ds-color-border-default: var(--ds-color-success-border-default);
1405
+ --ds-color-border-strong: var(--ds-color-success-border-strong);
1406
+ --ds-color-base-default: var(--ds-color-success-base-default);
1407
+ --ds-color-base-hover: var(--ds-color-success-base-hover);
1408
+ --ds-color-base-active: var(--ds-color-success-base-active);
1409
+ --ds-color-text-subtle: var(--ds-color-success-text-subtle);
1410
+ --ds-color-text-default: var(--ds-color-success-text-default);
1411
+ --ds-color-contrast-default: var(--ds-color-success-contrast-default);
1412
+ --ds-color-contrast-subtle: var(--ds-color-success-contrast-subtle);
1413
+ }
1414
+ [data-color=warning] {
1415
+ --ds-color-background-default: var(--ds-color-warning-background-default);
1416
+ --ds-color-background-subtle: var(--ds-color-warning-background-subtle);
1417
+ --ds-color-surface-default: var(--ds-color-warning-surface-default);
1418
+ --ds-color-surface-hover: var(--ds-color-warning-surface-hover);
1419
+ --ds-color-surface-active: var(--ds-color-warning-surface-active);
1420
+ --ds-color-border-subtle: var(--ds-color-warning-border-subtle);
1421
+ --ds-color-border-default: var(--ds-color-warning-border-default);
1422
+ --ds-color-border-strong: var(--ds-color-warning-border-strong);
1423
+ --ds-color-base-default: var(--ds-color-warning-base-default);
1424
+ --ds-color-base-hover: var(--ds-color-warning-base-hover);
1425
+ --ds-color-base-active: var(--ds-color-warning-base-active);
1426
+ --ds-color-text-subtle: var(--ds-color-warning-text-subtle);
1427
+ --ds-color-text-default: var(--ds-color-warning-text-default);
1428
+ --ds-color-contrast-default: var(--ds-color-warning-contrast-default);
1429
+ --ds-color-contrast-subtle: var(--ds-color-warning-contrast-subtle);
1430
+ }
1431
+ [data-color=danger] {
1432
+ --ds-color-background-default: var(--ds-color-danger-background-default);
1433
+ --ds-color-background-subtle: var(--ds-color-danger-background-subtle);
1434
+ --ds-color-surface-default: var(--ds-color-danger-surface-default);
1435
+ --ds-color-surface-hover: var(--ds-color-danger-surface-hover);
1436
+ --ds-color-surface-active: var(--ds-color-danger-surface-active);
1437
+ --ds-color-border-subtle: var(--ds-color-danger-border-subtle);
1438
+ --ds-color-border-default: var(--ds-color-danger-border-default);
1439
+ --ds-color-border-strong: var(--ds-color-danger-border-strong);
1440
+ --ds-color-base-default: var(--ds-color-danger-base-default);
1441
+ --ds-color-base-hover: var(--ds-color-danger-base-hover);
1442
+ --ds-color-base-active: var(--ds-color-danger-base-active);
1443
+ --ds-color-text-subtle: var(--ds-color-danger-text-subtle);
1444
+ --ds-color-text-default: var(--ds-color-danger-text-default);
1445
+ --ds-color-contrast-default: var(--ds-color-danger-contrast-default);
1446
+ --ds-color-contrast-subtle: var(--ds-color-danger-contrast-subtle);
1447
+ }
1448
+ [data-color=info] {
1449
+ --ds-color-background-default: var(--ds-color-info-background-default);
1450
+ --ds-color-background-subtle: var(--ds-color-info-background-subtle);
1451
+ --ds-color-surface-default: var(--ds-color-info-surface-default);
1452
+ --ds-color-surface-hover: var(--ds-color-info-surface-hover);
1453
+ --ds-color-surface-active: var(--ds-color-info-surface-active);
1454
+ --ds-color-border-subtle: var(--ds-color-info-border-subtle);
1455
+ --ds-color-border-default: var(--ds-color-info-border-default);
1456
+ --ds-color-border-strong: var(--ds-color-info-border-strong);
1457
+ --ds-color-base-default: var(--ds-color-info-base-default);
1458
+ --ds-color-base-hover: var(--ds-color-info-base-hover);
1459
+ --ds-color-base-active: var(--ds-color-info-base-active);
1460
+ --ds-color-text-subtle: var(--ds-color-info-text-subtle);
1461
+ --ds-color-text-default: var(--ds-color-info-text-default);
1462
+ --ds-color-contrast-default: var(--ds-color-info-contrast-default);
1463
+ --ds-color-contrast-subtle: var(--ds-color-info-contrast-subtle);
1464
+ }
1465
+ }