@justeattakeaway/pie-css 0.0.0-snapshot-release-20231123160549

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 (13) hide show
  1. package/README.md +178 -0
  2. package/dist/index.css +1127 -0
  3. package/package.json +35 -0
  4. package/scss/functions/_unitModifiers.scss +68 -0
  5. package/scss/functions/index.scss +1 -0
  6. package/scss/helpers/_has-grab-cursor.scss +29 -0
  7. package/scss/helpers/index.scss +1 -0
  8. package/scss/index.scss +3 -0
  9. package/scss/mixins/_buttonInteractiveStates.scss +47 -0
  10. package/scss/mixins/_focus.scss +18 -0
  11. package/scss/mixins/_unitModifiers.scss +44 -0
  12. package/scss/mixins/_visuallyHidden.scss +10 -0
  13. package/scss/mixins/index.scss +4 -0
package/dist/index.css ADDED
@@ -0,0 +1,1127 @@
1
+ :root {
2
+ /* Global tokens - Color */
3
+ --dt-color-aubergine-10: #e7d6e7;
4
+ --dt-color-aubergine-80: #452844;
5
+ --dt-color-berry-10: #ffe7eb;
6
+ --dt-color-berry-90: #622d35;
7
+ --dt-color-black: #000;
8
+ --dt-color-blue: #125fca;
9
+ --dt-color-blue-10: #ebf6fa;
10
+ --dt-color-blue-25: #c1dade;
11
+ --dt-color-blue-30: #7aadf6;
12
+ --dt-color-blue-70: #094dac;
13
+ --dt-color-blue-90: #083343;
14
+ --dt-color-blue-dark-hc: #1054b4;
15
+ --dt-color-blue-light-hc: #8bbcfe;
16
+ --dt-color-charcoal-30: #d7d9da;
17
+ --dt-color-charcoal-40: #b7bdbe;
18
+ --dt-color-charcoal-50: #8c999b;
19
+ --dt-color-charcoal-60: #5d7074;
20
+ --dt-color-charcoal-70: #3c4c4f;
21
+ --dt-color-charcoal-75: #303d3f;
22
+ --dt-color-charcoal-80: #242e30;
23
+ --dt-color-cupcake-10: #e7f4f6;
24
+ --dt-color-cupcake-90: #254043;
25
+ --dt-color-green: #017a39;
26
+ --dt-color-green-10: #e5faef;
27
+ --dt-color-green-30: #22bf65;
28
+ --dt-color-green-90: #273f33;
29
+ --dt-color-green-dark-hc: #196634;
30
+ --dt-color-green-light-hc: #26d46e;
31
+ --dt-color-mozzarella-10: #f5f3f1;
32
+ --dt-color-mozzarella-100: #1a1a19;
33
+ --dt-color-mozzarella-20: #efedea;
34
+ --dt-color-mozzarella-30: #dbd9d7;
35
+ --dt-color-mozzarella-5: #fcfcfc;
36
+ --dt-color-mozzarella-50: #9e9c9a;
37
+ --dt-color-mozzarella-60: #797876;
38
+ --dt-color-mozzarella-70: #575655;
39
+ --dt-color-mozzarella-75: #494847;
40
+ --dt-color-mozzarella-80: #3b3a39;
41
+ --dt-color-mozzarella-90: #262626;
42
+ --dt-color-orange: #f36805;
43
+ --dt-color-orange-10: #ffead4;
44
+ --dt-color-orange-30: #ff8000;
45
+ --dt-color-orange-55: #f75e28;
46
+ --dt-color-orange-90: #41301f;
47
+ --dt-color-orange-dark-hc: #a33100;
48
+ --dt-color-purple: #5b3d5b;
49
+ --dt-color-purple-light-hc: #ba98ba;
50
+ --dt-color-red: #d50525;
51
+ --dt-color-red-10: #ffe9ea;
52
+ --dt-color-red-25: #f2a6b0;
53
+ --dt-color-red-30: #ec556c;
54
+ --dt-color-red-90: #491e24;
55
+ --dt-color-red-dark-hc: #a4041f;
56
+ --dt-color-red-light-hc: #ff7a80;
57
+ --dt-color-system-purple: #800080;
58
+ --dt-color-system-purple-10: #c58af9;
59
+ --dt-color-tomato-5: #ffd3bf;
60
+ --dt-color-tomato-90: #622b18;
61
+ --dt-color-turmeric-5: #fff9de;
62
+ --dt-color-turmeric-80: #745300;
63
+ --dt-color-white: #fff;
64
+ --dt-color-yellow: #f6c243;
65
+ --dt-color-yellow-10: #fff9df;
66
+ --dt-color-yellow-90: #474630;
67
+ --dt-color-yellow-dark-hc: #685731;
68
+ /* Alias tokens - Color */
69
+ /* Default color theme */
70
+ --dt-color-background-default: var(--dt-color-mozzarella-5);
71
+ --dt-color-background-subtle: var(--dt-color-mozzarella-10);
72
+ --dt-color-background-dark: var(--dt-color-mozzarella-100);
73
+ --dt-color-container-default: var(--dt-color-white);
74
+ --dt-color-container-subtle: var(--dt-color-mozzarella-10);
75
+ --dt-color-container-strong: var(--dt-color-mozzarella-20);
76
+ --dt-color-container-dark: var(--dt-color-mozzarella-90);
77
+ --dt-color-container-inverse: var(--dt-color-mozzarella-90);
78
+ --dt-color-container-inverse-alternative: var(--dt-color-mozzarella-90);
79
+ --dt-color-border-default: var(--dt-color-mozzarella-20);
80
+ --dt-color-border-subtle: var(--dt-color-mozzarella-10);
81
+ --dt-color-border-strong: var(--dt-color-mozzarella-30);
82
+ --dt-color-border-inverse: var(--dt-color-mozzarella-70);
83
+ --dt-color-border-selected: var(--dt-color-mozzarella-50);
84
+ --dt-color-divider-default: rgb(0,0,0,0.08);
85
+ --dt-color-divider-inverse: rgb(255,255,255,0.20);
86
+ --dt-color-interactive-brand: var(--dt-color-orange);
87
+ --dt-color-interactive-primary: var(--dt-color-mozzarella-90);
88
+ --dt-color-interactive-secondary: var(--dt-color-mozzarella-10);
89
+ --dt-color-interactive-inverse: var(--dt-color-white);
90
+ --dt-color-interactive-light: var(--dt-color-white);
91
+ --dt-color-interactive-form: var(--dt-color-mozzarella-60);
92
+ --dt-color-overlay: rgb(0,0,0,0.55);
93
+ --dt-color-support-error: var(--dt-color-red);
94
+ --dt-color-support-warning: var(--dt-color-yellow);
95
+ --dt-color-support-positive: var(--dt-color-green);
96
+ --dt-color-support-info: var(--dt-color-blue);
97
+ --dt-color-support-neutral: var(--dt-color-mozzarella-20);
98
+ --dt-color-support-error-02: var(--dt-color-red-10);
99
+ --dt-color-support-warning-02: var(--dt-color-yellow-10);
100
+ --dt-color-support-positive-02: var(--dt-color-green-10);
101
+ --dt-color-support-info-02: var(--dt-color-blue-10);
102
+ --dt-color-support-info-inverse: var(--dt-color-blue-30);
103
+ --dt-color-support-positive-inverse: var(--dt-color-green-30);
104
+ --dt-color-support-brand-01: var(--dt-color-orange-30);
105
+ --dt-color-support-brand-02: var(--dt-color-orange-10);
106
+ --dt-color-support-brand-03: var(--dt-color-blue-25);
107
+ --dt-color-support-brand-03-subtle: var(--dt-color-cupcake-10);
108
+ --dt-color-support-brand-04: var(--dt-color-red-25);
109
+ --dt-color-support-brand-04-subtle: var(--dt-color-berry-10);
110
+ --dt-color-support-brand-05: var(--dt-color-yellow);
111
+ --dt-color-support-brand-05-subtle: var(--dt-color-turmeric-5);
112
+ --dt-color-support-brand-06: var(--dt-color-purple);
113
+ --dt-color-support-brand-06-subtle: var(--dt-color-aubergine-10);
114
+ --dt-color-support-brand-07: var(--dt-color-orange-55);
115
+ --dt-color-support-brand-07-subtle: var(--dt-color-tomato-5);
116
+ --dt-color-content-default: var(--dt-color-charcoal-80);
117
+ --dt-color-content-subdued: var(--dt-color-charcoal-70);
118
+ --dt-color-content-interactive-brand: var(--dt-color-orange);
119
+ --dt-color-content-interactive-light: var(--dt-color-white);
120
+ --dt-color-content-interactive-primary: var(--dt-color-white);
121
+ --dt-color-content-interactive-secondary: var(--dt-color-charcoal-80);
122
+ --dt-color-content-interactive-tertiary: var(--dt-color-charcoal-75);
123
+ --dt-color-content-interactive-subdued: var(--dt-color-charcoal-60);
124
+ --dt-color-content-interactive-inverse: var(--dt-color-charcoal-80);
125
+ --dt-color-content-interactive-dark: var(--dt-color-charcoal-80);
126
+ --dt-color-content-interactive-error: var(--dt-color-red);
127
+ --dt-color-content-light: var(--dt-color-white);
128
+ --dt-color-content-dark: var(--dt-color-charcoal-80);
129
+ --dt-color-content-inverse: var(--dt-color-white);
130
+ --dt-color-content-link: var(--dt-color-charcoal-80);
131
+ --dt-color-content-link-distinct: var(--dt-color-blue);
132
+ --dt-color-content-link-light: var(--dt-color-white);
133
+ --dt-color-content-link-inverse: var(--dt-color-white);
134
+ --dt-color-content-link-visited: var(--dt-color-system-purple);
135
+ --dt-color-content-link-visited-inverse: var(--dt-color-system-purple-10);
136
+ --dt-color-content-error: var(--dt-color-red);
137
+ --dt-color-content-positive: var(--dt-color-green);
138
+ --dt-color-content-disabled: var(--dt-color-charcoal-50);
139
+ --dt-color-content-brand: var(--dt-color-orange);
140
+ --dt-color-hover-01: 4%;
141
+ --dt-color-hover-01-dark: 4%;
142
+ --dt-color-hover-02: 8%;
143
+ --dt-color-hover-02-light: 8%;
144
+ --dt-color-active-01: 12%;
145
+ --dt-color-active-01-dark: 12%;
146
+ --dt-color-active-02: 20%;
147
+ --dt-color-active-02-light: 20%;
148
+ --dt-color-focus-inner: var(--dt-color-white);
149
+ --dt-color-focus-outer: var(--dt-color-blue-70);
150
+ --dt-color-disabled-01: var(--dt-color-mozzarella-20);
151
+ --dt-color-disabled-01-inverse: var(--dt-color-mozzarella-80);
152
+ --dt-color-skeleton-01: var(--dt-color-mozzarella-10);
153
+ --dt-color-skeleton-02: var(--dt-color-mozzarella-20);
154
+ --dt-color-skeleton-03: var(--dt-color-white);
155
+ /* Highcontrast color theme */
156
+ --dt-color-highcontrast-background-default: var(--dt-color-white);
157
+ --dt-color-highcontrast-background-subtle: var(--dt-color-white);
158
+ --dt-color-highcontrast-background-dark: var(--dt-color-black);
159
+ --dt-color-highcontrast-container-default: var(--dt-color-white);
160
+ --dt-color-highcontrast-container-subtle: var(--dt-color-white);
161
+ --dt-color-highcontrast-container-strong: var(--dt-color-white);
162
+ --dt-color-highcontrast-container-dark: var(--dt-color-black);
163
+ --dt-color-highcontrast-container-inverse: var(--dt-color-black);
164
+ --dt-color-highcontrast-container-inverse-alternative: var(--dt-color-black);
165
+ --dt-color-highcontrast-border-default: var(--dt-color-black);
166
+ --dt-color-highcontrast-border-subtle: var(--dt-color-black);
167
+ --dt-color-highcontrast-border-strong: var(--dt-color-black);
168
+ --dt-color-highcontrast-border-inverse: var(--dt-color-white);
169
+ --dt-color-highcontrast-border-selected: var(--dt-color-black);
170
+ --dt-color-highcontrast-divider-default: var(--dt-color-black);
171
+ --dt-color-highcontrast-divider-inverse: var(--dt-color-white);
172
+ --dt-color-highcontrast-interactive-brand: var(--dt-color-orange-dark-hc);
173
+ --dt-color-highcontrast-interactive-primary: var(--dt-color-black);
174
+ --dt-color-highcontrast-interactive-secondary: var(--dt-color-white);
175
+ --dt-color-highcontrast-interactive-inverse: var(--dt-color-white);
176
+ --dt-color-highcontrast-interactive-light: var(--dt-color-white);
177
+ --dt-color-highcontrast-interactive-form: var(--dt-color-black);
178
+ --dt-color-highcontrast-overlay: rgb(0,0,0,0.55);
179
+ --dt-color-highcontrast-support-error: var(--dt-color-red-dark-hc);
180
+ --dt-color-highcontrast-support-warning: var(--dt-color-yellow-dark-hc);
181
+ --dt-color-highcontrast-support-positive: var(--dt-color-green-dark-hc);
182
+ --dt-color-highcontrast-support-info: var(--dt-color-blue-dark-hc);
183
+ --dt-color-highcontrast-support-neutral: var(--dt-color-white);
184
+ --dt-color-highcontrast-support-error-02: var(--dt-color-white);
185
+ --dt-color-highcontrast-support-warning-02: var(--dt-color-white);
186
+ --dt-color-highcontrast-support-positive-02: var(--dt-color-white);
187
+ --dt-color-highcontrast-support-info-02: var(--dt-color-white);
188
+ --dt-color-highcontrast-support-info-inverse: var(--dt-color-blue-light-hc);
189
+ --dt-color-highcontrast-support-positive-inverse: var(--dt-color-green-light-hc);
190
+ --dt-color-highcontrast-support-brand-01: var(--dt-color-orange-30);
191
+ --dt-color-highcontrast-support-brand-02: var(--dt-color-white);
192
+ --dt-color-highcontrast-support-brand-03: var(--dt-color-white);
193
+ --dt-color-highcontrast-support-brand-03-subtle: var(--dt-color-cupcake-10);
194
+ --dt-color-highcontrast-support-brand-04: var(--dt-color-white);
195
+ --dt-color-highcontrast-support-brand-04-subtle: var(--dt-color-berry-10);
196
+ --dt-color-highcontrast-support-brand-05: var(--dt-color-white);
197
+ --dt-color-highcontrast-support-brand-05-subtle: var(--dt-color-yellow-10);
198
+ --dt-color-highcontrast-support-brand-06: var(--dt-color-white);
199
+ --dt-color-highcontrast-support-brand-06-subtle: var(--dt-color-aubergine-10);
200
+ --dt-color-highcontrast-support-brand-07: var(--dt-color-white);
201
+ --dt-color-highcontrast-support-brand-07-subtle: var(--dt-color-tomato-5);
202
+ --dt-color-highcontrast-content-default: var(--dt-color-black);
203
+ --dt-color-highcontrast-content-subdued: var(--dt-color-black);
204
+ --dt-color-highcontrast-content-interactive-brand: var(--dt-color-orange-dark-hc);
205
+ --dt-color-highcontrast-content-interactive-light: var(--dt-color-white);
206
+ --dt-color-highcontrast-content-interactive-primary: var(--dt-color-white);
207
+ --dt-color-highcontrast-content-interactive-secondary: var(--dt-color-black);
208
+ --dt-color-highcontrast-content-interactive-tertiary: var(--dt-color-black);
209
+ --dt-color-highcontrast-content-interactive-subdued: var(--dt-color-black);
210
+ --dt-color-highcontrast-content-interactive-inverse: var(--dt-color-black);
211
+ --dt-color-highcontrast-content-interactive-dark: var(--dt-color-black);
212
+ --dt-color-highcontrast-content-interactive-error: var(--dt-color-red-dark-hc);
213
+ --dt-color-highcontrast-content-light: var(--dt-color-white);
214
+ --dt-color-highcontrast-content-dark: var(--dt-color-black);
215
+ --dt-color-highcontrast-content-inverse: var(--dt-color-white);
216
+ --dt-color-highcontrast-content-link: var(--dt-color-black);
217
+ --dt-color-highcontrast-content-link-distinct: var(--dt-color-blue);
218
+ --dt-color-highcontrast-content-link-light: var(--dt-color-white);
219
+ --dt-color-highcontrast-content-link-inverse: var(--dt-color-white);
220
+ --dt-color-highcontrast-content-link-visited: var(--dt-color-system-purple);
221
+ --dt-color-highcontrast-content-link-visited-inverse: var(--dt-color-system-purple-10);
222
+ --dt-color-highcontrast-content-error: var(--dt-color-red-dark-hc);
223
+ --dt-color-highcontrast-content-positive: var(--dt-color-green-dark-hc);
224
+ --dt-color-highcontrast-content-disabled: var(--dt-color-charcoal-50);
225
+ --dt-color-highcontrast-content-brand: var(--dt-color-orange-dark-hc);
226
+ --dt-color-highcontrast-hover-01: 4%;
227
+ --dt-color-highcontrast-hover-01-dark: 4%;
228
+ --dt-color-highcontrast-hover-02: 8%;
229
+ --dt-color-highcontrast-hover-02-light: 8%;
230
+ --dt-color-highcontrast-active-01: 12%;
231
+ --dt-color-highcontrast-active-01-dark: 12%;
232
+ --dt-color-highcontrast-active-02: 20%;
233
+ --dt-color-highcontrast-active-02-light: 20%;
234
+ --dt-color-highcontrast-focus-inner: var(--dt-color-white);
235
+ --dt-color-highcontrast-focus-outer: var(--dt-color-blue-70);
236
+ --dt-color-highcontrast-disabled-01: var(--dt-color-mozzarella-20);
237
+ --dt-color-highcontrast-disabled-01-inverse: var(--dt-color-mozzarella-80);
238
+ --dt-color-highcontrast-skeleton-01: var(--dt-color-mozzarella-10);
239
+ --dt-color-highcontrast-skeleton-02: var(--dt-color-mozzarella-20);
240
+ --dt-color-highcontrast-skeleton-03: var(--dt-color-white);
241
+ /* Dark color theme */
242
+ --dt-color-dark-background-default: var(--dt-color-mozzarella-100);
243
+ --dt-color-dark-background-subtle: var(--dt-color-mozzarella-80);
244
+ --dt-color-dark-background-dark: var(--dt-color-white);
245
+ --dt-color-dark-container-default: var(--dt-color-mozzarella-90);
246
+ --dt-color-dark-container-subtle: var(--dt-color-mozzarella-80);
247
+ --dt-color-dark-container-strong: var(--dt-color-mozzarella-70);
248
+ --dt-color-dark-container-dark: var(--dt-color-mozzarella-90);
249
+ --dt-color-dark-container-inverse: var(--dt-color-white);
250
+ --dt-color-dark-container-inverse-alternative: var(--dt-color-mozzarella-70);
251
+ --dt-color-dark-border-default: var(--dt-color-mozzarella-70);
252
+ --dt-color-dark-border-subtle: var(--dt-color-mozzarella-75);
253
+ --dt-color-dark-border-strong: var(--dt-color-mozzarella-60);
254
+ --dt-color-dark-border-inverse: var(--dt-color-mozzarella-20);
255
+ --dt-color-dark-border-selected: var(--dt-color-mozzarella-30);
256
+ --dt-color-dark-divider-default: rgb(255,255,255,0.20);
257
+ --dt-color-dark-divider-inverse: rgb(0,0,0,0.08);
258
+ --dt-color-dark-interactive-brand: var(--dt-color-orange);
259
+ --dt-color-dark-interactive-primary: var(--dt-color-white);
260
+ --dt-color-dark-interactive-secondary: var(--dt-color-mozzarella-75);
261
+ --dt-color-dark-interactive-inverse: var(--dt-color-mozzarella-90);
262
+ --dt-color-dark-interactive-light: var(--dt-color-white);
263
+ --dt-color-dark-interactive-form: var(--dt-color-mozzarella-50);
264
+ --dt-color-dark-overlay: rgb(0,0,0,0.55);
265
+ --dt-color-dark-support-error: var(--dt-color-red);
266
+ --dt-color-dark-support-warning: var(--dt-color-yellow);
267
+ --dt-color-dark-support-positive: var(--dt-color-green-30);
268
+ --dt-color-dark-support-info: var(--dt-color-blue-30);
269
+ --dt-color-dark-support-neutral: var(--dt-color-mozzarella-100);
270
+ --dt-color-dark-support-error-02: var(--dt-color-red-90);
271
+ --dt-color-dark-support-warning-02: var(--dt-color-yellow-90);
272
+ --dt-color-dark-support-positive-02: var(--dt-color-green-90);
273
+ --dt-color-dark-support-info-02: var(--dt-color-blue-90);
274
+ --dt-color-dark-support-info-inverse: var(--dt-color-blue);
275
+ --dt-color-dark-support-positive-inverse: var(--dt-color-green);
276
+ --dt-color-dark-support-brand-01: var(--dt-color-orange-30);
277
+ --dt-color-dark-support-brand-02: var(--dt-color-orange-90);
278
+ --dt-color-dark-support-brand-03: var(--dt-color-blue-25);
279
+ --dt-color-dark-support-brand-03-subtle: var(--dt-color-cupcake-90);
280
+ --dt-color-dark-support-brand-04: var(--dt-color-red-25);
281
+ --dt-color-dark-support-brand-04-subtle: var(--dt-color-berry-90);
282
+ --dt-color-dark-support-brand-05: var(--dt-color-yellow);
283
+ --dt-color-dark-support-brand-05-subtle: var(--dt-color-turmeric-80);
284
+ --dt-color-dark-support-brand-06: var(--dt-color-purple);
285
+ --dt-color-dark-support-brand-06-subtle: var(--dt-color-aubergine-80);
286
+ --dt-color-dark-support-brand-07: var(--dt-color-orange-55);
287
+ --dt-color-dark-support-brand-07-subtle: var(--dt-color-tomato-90);
288
+ --dt-color-dark-content-default: var(--dt-color-white);
289
+ --dt-color-dark-content-subdued: var(--dt-color-charcoal-30);
290
+ --dt-color-dark-content-interactive-brand: var(--dt-color-orange-30);
291
+ --dt-color-dark-content-interactive-light: var(--dt-color-white);
292
+ --dt-color-dark-content-interactive-primary: var(--dt-color-charcoal-80);
293
+ --dt-color-dark-content-interactive-secondary: var(--dt-color-white);
294
+ --dt-color-dark-content-interactive-tertiary: var(--dt-color-white);
295
+ --dt-color-dark-content-interactive-subdued: var(--dt-color-charcoal-40);
296
+ --dt-color-dark-content-interactive-inverse: var(--dt-color-white);
297
+ --dt-color-dark-content-interactive-dark: var(--dt-color-charcoal-80);
298
+ --dt-color-dark-content-interactive-error: var(--dt-color-red-30);
299
+ --dt-color-dark-content-light: var(--dt-color-white);
300
+ --dt-color-dark-content-dark: var(--dt-color-charcoal-80);
301
+ --dt-color-dark-content-inverse: var(--dt-color-charcoal-80);
302
+ --dt-color-dark-content-link: var(--dt-color-white);
303
+ --dt-color-dark-content-link-distinct: var(--dt-color-blue-30);
304
+ --dt-color-dark-content-link-light: var(--dt-color-white);
305
+ --dt-color-dark-content-link-inverse: var(--dt-color-charcoal-80);
306
+ --dt-color-dark-content-link-visited: var(--dt-color-system-purple-10);
307
+ --dt-color-dark-content-link-visited-inverse: var(--dt-color-system-purple);
308
+ --dt-color-dark-content-error: var(--dt-color-red-30);
309
+ --dt-color-dark-content-positive: var(--dt-color-green-30);
310
+ --dt-color-dark-content-disabled: var(--dt-color-charcoal-50);
311
+ --dt-color-dark-content-brand: var(--dt-color-orange-30);
312
+ --dt-color-dark-hover-01: 8%;
313
+ --dt-color-dark-hover-01-dark: 4%;
314
+ --dt-color-dark-hover-02: 4%;
315
+ --dt-color-dark-hover-02-light: 8%;
316
+ --dt-color-dark-active-01: 20%;
317
+ --dt-color-dark-active-01-dark: 12%;
318
+ --dt-color-dark-active-02: 12%;
319
+ --dt-color-dark-active-02-light: 20%;
320
+ --dt-color-dark-focus-inner: var(--dt-color-black);
321
+ --dt-color-dark-focus-outer: var(--dt-color-blue-30);
322
+ --dt-color-dark-disabled-01: var(--dt-color-mozzarella-80);
323
+ --dt-color-dark-disabled-01-inverse: var(--dt-color-mozzarella-20);
324
+ --dt-color-dark-skeleton-01: var(--dt-color-mozzarella-80);
325
+ --dt-color-dark-skeleton-02: var(--dt-color-mozzarella-70);
326
+ --dt-color-dark-skeleton-03: var(--dt-color-mozzarella-90);
327
+ /* Highcontrast-dark color theme */
328
+ --dt-color-highcontrast-dark-background-default: var(--dt-color-black);
329
+ --dt-color-highcontrast-dark-background-subtle: var(--dt-color-black);
330
+ --dt-color-highcontrast-dark-background-dark: var(--dt-color-black);
331
+ --dt-color-highcontrast-dark-container-default: var(--dt-color-black);
332
+ --dt-color-highcontrast-dark-container-subtle: var(--dt-color-black);
333
+ --dt-color-highcontrast-dark-container-strong: var(--dt-color-black);
334
+ --dt-color-highcontrast-dark-container-dark: var(--dt-color-black);
335
+ --dt-color-highcontrast-dark-container-inverse: var(--dt-color-white);
336
+ --dt-color-highcontrast-dark-container-inverse-alternative: var(--dt-color-black);
337
+ --dt-color-highcontrast-dark-border-default: var(--dt-color-white);
338
+ --dt-color-highcontrast-dark-border-subtle: var(--dt-color-white);
339
+ --dt-color-highcontrast-dark-border-strong: var(--dt-color-white);
340
+ --dt-color-highcontrast-dark-border-inverse: var(--dt-color-black);
341
+ --dt-color-highcontrast-dark-border-selected: var(--dt-color-white);
342
+ --dt-color-highcontrast-dark-divider-default: var(--dt-color-white);
343
+ --dt-color-highcontrast-dark-divider-inverse: var(--dt-color-black);
344
+ --dt-color-highcontrast-dark-interactive-brand: var(--dt-color-orange-30);
345
+ --dt-color-highcontrast-dark-interactive-primary: var(--dt-color-white);
346
+ --dt-color-highcontrast-dark-interactive-secondary: var(--dt-color-black);
347
+ --dt-color-highcontrast-dark-interactive-inverse: var(--dt-color-black);
348
+ --dt-color-highcontrast-dark-interactive-light: var(--dt-color-white);
349
+ --dt-color-highcontrast-dark-interactive-form: var(--dt-color-white);
350
+ --dt-color-highcontrast-dark-overlay: rgb(0,0,0,0.55);
351
+ --dt-color-highcontrast-dark-support-error: var(--dt-color-red-light-hc);
352
+ --dt-color-highcontrast-dark-support-warning: var(--dt-color-yellow);
353
+ --dt-color-highcontrast-dark-support-positive: var(--dt-color-green-light-hc);
354
+ --dt-color-highcontrast-dark-support-info: var(--dt-color-blue-light-hc);
355
+ --dt-color-highcontrast-dark-support-neutral: var(--dt-color-black);
356
+ --dt-color-highcontrast-dark-support-error-02: var(--dt-color-black);
357
+ --dt-color-highcontrast-dark-support-warning-02: var(--dt-color-black);
358
+ --dt-color-highcontrast-dark-support-positive-02: var(--dt-color-black);
359
+ --dt-color-highcontrast-dark-support-info-02: var(--dt-color-black);
360
+ --dt-color-highcontrast-dark-support-info-inverse: var(--dt-color-blue-dark-hc);
361
+ --dt-color-highcontrast-dark-support-positive-inverse: var(--dt-color-green-dark-hc);
362
+ --dt-color-highcontrast-dark-support-brand-01: var(--dt-color-orange-30);
363
+ --dt-color-highcontrast-dark-support-brand-02: var(--dt-color-black);
364
+ --dt-color-highcontrast-dark-support-brand-03: var(--dt-color-black);
365
+ --dt-color-highcontrast-dark-support-brand-03-subtle: var(--dt-color-cupcake-90);
366
+ --dt-color-highcontrast-dark-support-brand-04: var(--dt-color-black);
367
+ --dt-color-highcontrast-dark-support-brand-04-subtle: var(--dt-color-berry-90);
368
+ --dt-color-highcontrast-dark-support-brand-05: var(--dt-color-black);
369
+ --dt-color-highcontrast-dark-support-brand-05-subtle: var(--dt-color-turmeric-80);
370
+ --dt-color-highcontrast-dark-support-brand-06: var(--dt-color-black);
371
+ --dt-color-highcontrast-dark-support-brand-06-subtle: var(--dt-color-aubergine-80);
372
+ --dt-color-highcontrast-dark-support-brand-07: var(--dt-color-black);
373
+ --dt-color-highcontrast-dark-support-brand-07-subtle: var(--dt-color-tomato-90);
374
+ --dt-color-highcontrast-dark-content-default: var(--dt-color-white);
375
+ --dt-color-highcontrast-dark-content-subdued: var(--dt-color-white);
376
+ --dt-color-highcontrast-dark-content-interactive-brand: var(--dt-color-orange-30);
377
+ --dt-color-highcontrast-dark-content-interactive-light: var(--dt-color-white);
378
+ --dt-color-highcontrast-dark-content-interactive-primary: var(--dt-color-black);
379
+ --dt-color-highcontrast-dark-content-interactive-secondary: var(--dt-color-white);
380
+ --dt-color-highcontrast-dark-content-interactive-tertiary: var(--dt-color-white);
381
+ --dt-color-highcontrast-dark-content-interactive-subdued: var(--dt-color-white);
382
+ --dt-color-highcontrast-dark-content-interactive-inverse: var(--dt-color-white);
383
+ --dt-color-highcontrast-dark-content-interactive-dark: var(--dt-color-black);
384
+ --dt-color-highcontrast-dark-content-interactive-error: var(--dt-color-red-light-hc);
385
+ --dt-color-highcontrast-dark-content-light: var(--dt-color-white);
386
+ --dt-color-highcontrast-dark-content-dark: var(--dt-color-black);
387
+ --dt-color-highcontrast-dark-content-inverse: var(--dt-color-black);
388
+ --dt-color-highcontrast-dark-content-link: var(--dt-color-white);
389
+ --dt-color-highcontrast-dark-content-link-distinct: var(--dt-color-blue-light-hc);
390
+ --dt-color-highcontrast-dark-content-link-light: var(--dt-color-white);
391
+ --dt-color-highcontrast-dark-content-link-inverse: var(--dt-color-black);
392
+ --dt-color-highcontrast-dark-content-link-visited: var(--dt-color-system-purple-10);
393
+ --dt-color-highcontrast-dark-content-link-visited-inverse: var(--dt-color-system-purple);
394
+ --dt-color-highcontrast-dark-content-error: var(--dt-color-red-light-hc);
395
+ --dt-color-highcontrast-dark-content-positive: var(--dt-color-green-light-hc);
396
+ --dt-color-highcontrast-dark-content-disabled: var(--dt-color-charcoal-50);
397
+ --dt-color-highcontrast-dark-content-brand: var(--dt-color-orange-30);
398
+ --dt-color-highcontrast-dark-hover-01: 8%;
399
+ --dt-color-highcontrast-dark-hover-01-dark: 4%;
400
+ --dt-color-highcontrast-dark-hover-02: 4%;
401
+ --dt-color-highcontrast-dark-hover-02-light: 8%;
402
+ --dt-color-highcontrast-dark-active-01: 20%;
403
+ --dt-color-highcontrast-dark-active-01-dark: 12%;
404
+ --dt-color-highcontrast-dark-active-02: 12%;
405
+ --dt-color-highcontrast-dark-active-02-light: 20%;
406
+ --dt-color-highcontrast-dark-focus-inner: var(--dt-color-black);
407
+ --dt-color-highcontrast-dark-focus-outer: var(--dt-color-blue-30);
408
+ --dt-color-highcontrast-dark-disabled-01: var(--dt-color-mozzarella-80);
409
+ --dt-color-highcontrast-dark-disabled-01-inverse: var(--dt-color-mozzarella-20);
410
+ --dt-color-highcontrast-dark-skeleton-01: var(--dt-color-mozzarella-80);
411
+ --dt-color-highcontrast-dark-skeleton-02: var(--dt-color-mozzarella-100);
412
+ --dt-color-highcontrast-dark-skeleton-03: var(--dt-color-mozzarella-90);
413
+ /* Global tokens - Font */
414
+ --dt-font-family-code: 'PTMono';
415
+ --dt-font-family-primary: 'JetSansDigital';
416
+ --dt-font-family-secondary: 'Arial';
417
+ --dt-font-paragraph-spacing-01: 16;
418
+ --dt-font-paragraph-spacing-02: 14;
419
+ --dt-font-paragraph-spacing-03: 12;
420
+ /* Size-12 font theme */
421
+ --dt-font-size-12: 12;
422
+ --dt-font-size-12-line-height: 16;
423
+ /* Size-14 font theme */
424
+ --dt-font-size-14: 14;
425
+ --dt-font-size-14-line-height: 20;
426
+ /* Size-16 font theme */
427
+ --dt-font-size-16: 16;
428
+ --dt-font-size-16-line-height: 24;
429
+ /* Size-19 font theme */
430
+ --dt-font-size-19: 19;
431
+ --dt-font-size-19-line-height: 28;
432
+ /* Size-20 font theme */
433
+ --dt-font-size-20: 20;
434
+ --dt-font-size-20-line-height: 28;
435
+ /* Size-24 font theme */
436
+ --dt-font-size-24: 24;
437
+ --dt-font-size-24-line-height: 32;
438
+ /* Size-28 font theme */
439
+ --dt-font-size-28: 28;
440
+ --dt-font-size-28-line-height: 36;
441
+ /* Size-32 font theme */
442
+ --dt-font-size-32: 32;
443
+ --dt-font-size-32-line-height: 40;
444
+ /* Size-48 font theme */
445
+ --dt-font-size-48: 48;
446
+ --dt-font-size-48-line-height: 56;
447
+ --dt-font-style-underline: underline;
448
+ --dt-font-weight-bold: 700;
449
+ --dt-font-weight-extrabold: 800;
450
+ --dt-font-weight-regular: 400;
451
+ /* Alias tokens - Font */
452
+ /* Heading-s font theme */
453
+ --dt-font-heading-s-size--wide: var(--dt-font-size-20);
454
+ --dt-font-heading-s-size--narrow: var(--dt-font-size-16);
455
+ --dt-font-heading-s-family: var(--dt-font-family-primary);
456
+ --dt-font-heading-s-weight: var(--dt-font-weight-extrabold);
457
+ --dt-font-heading-s-line-height--wide: var(--dt-font-size-20-line-height);
458
+ --dt-font-heading-s-line-height--narrow: var(--dt-font-size-16-line-height);
459
+ /* Heading-m font theme */
460
+ --dt-font-heading-m-size--wide: var(--dt-font-size-24);
461
+ --dt-font-heading-m-size--narrow: var(--dt-font-size-20);
462
+ --dt-font-heading-m-family: var(--dt-font-family-primary);
463
+ --dt-font-heading-m-weight: var(--dt-font-weight-extrabold);
464
+ --dt-font-heading-m-line-height--wide: var(--dt-font-size-24-line-height);
465
+ --dt-font-heading-m-line-height--narrow: var(--dt-font-size-20-line-height);
466
+ /* Heading-l font theme */
467
+ --dt-font-heading-l-size--wide: var(--dt-font-size-28);
468
+ --dt-font-heading-l-size--narrow: var(--dt-font-size-24);
469
+ --dt-font-heading-l-family: var(--dt-font-family-primary);
470
+ --dt-font-heading-l-weight: var(--dt-font-weight-extrabold);
471
+ --dt-font-heading-l-line-height--wide: var(--dt-font-size-28-line-height);
472
+ --dt-font-heading-l-line-height--narrow: var(--dt-font-size-24-line-height);
473
+ /* Heading-xl font theme */
474
+ --dt-font-heading-xl-size--wide: var(--dt-font-size-32);
475
+ --dt-font-heading-xl-size--narrow: var(--dt-font-size-28);
476
+ --dt-font-heading-xl-family: var(--dt-font-family-primary);
477
+ --dt-font-heading-xl-weight: var(--dt-font-weight-extrabold);
478
+ --dt-font-heading-xl-line-height--wide: var(--dt-font-size-32-line-height);
479
+ --dt-font-heading-xl-line-height--narrow: var(--dt-font-size-28-line-height);
480
+ /* Heading-xxl font theme */
481
+ --dt-font-heading-xxl-size--wide: var(--dt-font-size-48);
482
+ --dt-font-heading-xxl-size--narrow: var(--dt-font-size-32);
483
+ --dt-font-heading-xxl-family: var(--dt-font-family-primary);
484
+ --dt-font-heading-xxl-weight: var(--dt-font-weight-extrabold);
485
+ --dt-font-heading-xxl-line-height--wide: var(--dt-font-size-48-line-height);
486
+ --dt-font-heading-xxl-line-height--narrow: var(--dt-font-size-32-line-height);
487
+ /* Subheading-s font theme */
488
+ --dt-font-subheading-s-size--wide: var(--dt-font-size-20);
489
+ --dt-font-subheading-s-size--narrow: var(--dt-font-size-16);
490
+ --dt-font-subheading-s-family: var(--dt-font-family-primary);
491
+ --dt-font-subheading-s-weight: var(--dt-font-weight-regular);
492
+ --dt-font-subheading-s-line-height--wide: var(--dt-font-size-20-line-height);
493
+ --dt-font-subheading-s-line-height--narrow: var(--dt-font-size-16-line-height);
494
+ /* Subheading-l font theme */
495
+ --dt-font-subheading-l-size--wide: var(--dt-font-size-24);
496
+ --dt-font-subheading-l-size--narrow: var(--dt-font-size-20);
497
+ --dt-font-subheading-l-family: var(--dt-font-family-primary);
498
+ --dt-font-subheading-l-weight: var(--dt-font-weight-regular);
499
+ --dt-font-subheading-l-line-height--wide: var(--dt-font-size-24-line-height);
500
+ --dt-font-subheading-l-line-height--narrow: var(--dt-font-size-20-line-height);
501
+ /* Interactive-xs font theme */
502
+ --dt-font-interactive-xs-size: var(--dt-font-size-14);
503
+ --dt-font-interactive-xs-family: var(--dt-font-family-primary);
504
+ --dt-font-interactive-xs-weight: var(--dt-font-weight-bold);
505
+ --dt-font-interactive-xs-line-height: var(--dt-font-size-14-line-height);
506
+ /* Interactive-s font theme */
507
+ --dt-font-interactive-s-size: var(--dt-font-size-16);
508
+ --dt-font-interactive-s-family: var(--dt-font-family-primary);
509
+ --dt-font-interactive-s-weight: var(--dt-font-weight-bold);
510
+ --dt-font-interactive-s-line-height: var(--dt-font-size-16-line-height);
511
+ /* Interactive-m font theme */
512
+ --dt-font-interactive-m-size: var(--dt-font-size-19);
513
+ --dt-font-interactive-m-family: var(--dt-font-family-primary);
514
+ --dt-font-interactive-m-weight: var(--dt-font-weight-bold);
515
+ --dt-font-interactive-m-line-height: var(--dt-font-size-19-line-height);
516
+ /* Interactive-l font theme */
517
+ --dt-font-interactive-l-size: var(--dt-font-size-20);
518
+ --dt-font-interactive-l-family: var(--dt-font-family-primary);
519
+ --dt-font-interactive-l-weight: var(--dt-font-weight-bold);
520
+ --dt-font-interactive-l-line-height: var(--dt-font-size-20-line-height);
521
+ /* Body-s font theme */
522
+ --dt-font-body-s-size: var(--dt-font-size-14);
523
+ --dt-font-body-s-family: var(--dt-font-family-primary);
524
+ --dt-font-body-s-weight: var(--dt-font-weight-regular);
525
+ --dt-font-body-s-paragraph: var(--dt-font-paragraph-spacing-02);
526
+ --dt-font-body-s-line-height: var(--dt-font-size-14-line-height);
527
+ /* Body-s-link font theme */
528
+ --dt-font-body-s-link-size: var(--dt-font-size-14);
529
+ --dt-font-body-s-link-family: var(--dt-font-family-primary);
530
+ --dt-font-body-s-link-weight: var(--dt-font-weight-regular);
531
+ --dt-font-body-s-link-paragraph: var(--dt-font-paragraph-spacing-02);
532
+ --dt-font-body-s-link-text-decoration: var(--dt-font-style-underline);
533
+ --dt-font-body-s-link-line-height: var(--dt-font-size-14-line-height);
534
+ /* Body-l font theme */
535
+ --dt-font-body-l-size: var(--dt-font-size-16);
536
+ --dt-font-body-l-family: var(--dt-font-family-primary);
537
+ --dt-font-body-l-weight: var(--dt-font-weight-regular);
538
+ --dt-font-body-l-paragraph: var(--dt-font-paragraph-spacing-01);
539
+ --dt-font-body-l-line-height: var(--dt-font-size-16-line-height);
540
+ /* Body-l-link font theme */
541
+ --dt-font-body-l-link-size: var(--dt-font-size-16);
542
+ --dt-font-body-l-link-family: var(--dt-font-family-primary);
543
+ --dt-font-body-l-link-weight: var(--dt-font-weight-regular);
544
+ --dt-font-body-l-link-paragraph: var(--dt-font-paragraph-spacing-01);
545
+ --dt-font-body-l-link-text-decoration: var(--dt-font-style-underline);
546
+ --dt-font-body-l-link-line-height: var(--dt-font-size-16-line-height);
547
+ /* Body-strong-s font theme */
548
+ --dt-font-body-strong-s-size: var(--dt-font-size-14);
549
+ --dt-font-body-strong-s-family: var(--dt-font-family-primary);
550
+ --dt-font-body-strong-s-weight: var(--dt-font-weight-bold);
551
+ --dt-font-body-strong-s-paragraph: var(--dt-font-paragraph-spacing-02);
552
+ --dt-font-body-strong-s-line-height: var(--dt-font-size-14-line-height);
553
+ /* Body-strong-s-link font theme */
554
+ --dt-font-body-strong-s-link-size: var(--dt-font-size-14);
555
+ --dt-font-body-strong-s-link-family: var(--dt-font-family-primary);
556
+ --dt-font-body-strong-s-link-weight: var(--dt-font-weight-bold);
557
+ --dt-font-body-strong-s-link-paragraph: var(--dt-font-paragraph-spacing-02);
558
+ --dt-font-body-strong-s-link-text-decoration: var(--dt-font-style-underline);
559
+ --dt-font-body-strong-s-link-line-height: var(--dt-font-size-14-line-height);
560
+ /* Body-strong-l font theme */
561
+ --dt-font-body-strong-l-size: var(--dt-font-size-16);
562
+ --dt-font-body-strong-l-family: var(--dt-font-family-primary);
563
+ --dt-font-body-strong-l-weight: var(--dt-font-weight-bold);
564
+ --dt-font-body-strong-l-paragraph: var(--dt-font-paragraph-spacing-01);
565
+ --dt-font-body-strong-l-line-height: var(--dt-font-size-16-line-height);
566
+ /* Body-strong-l-link font theme */
567
+ --dt-font-body-strong-l-link-size: var(--dt-font-size-16);
568
+ --dt-font-body-strong-l-link-family: var(--dt-font-family-primary);
569
+ --dt-font-body-strong-l-link-weight: var(--dt-font-weight-bold);
570
+ --dt-font-body-strong-l-link-paragraph: var(--dt-font-paragraph-spacing-01);
571
+ --dt-font-body-strong-l-link-text-decoration: var(--dt-font-style-underline);
572
+ --dt-font-body-strong-l-link-line-height: var(--dt-font-size-16-line-height);
573
+ /* Caption font theme */
574
+ --dt-font-caption-size: var(--dt-font-size-12);
575
+ --dt-font-caption-family: var(--dt-font-family-primary);
576
+ --dt-font-caption-weight: var(--dt-font-weight-regular);
577
+ --dt-font-caption-paragraph: var(--dt-font-paragraph-spacing-03);
578
+ --dt-font-caption-line-height: var(--dt-font-size-12-line-height);
579
+ /* Caption-link font theme */
580
+ --dt-font-caption-link-size: var(--dt-font-size-12);
581
+ --dt-font-caption-link-family: var(--dt-font-family-primary);
582
+ --dt-font-caption-link-weight: var(--dt-font-weight-regular);
583
+ --dt-font-caption-link-paragraph: var(--dt-font-paragraph-spacing-03);
584
+ --dt-font-caption-link-text-decoration: var(--dt-font-style-underline);
585
+ --dt-font-caption-link-line-height: var(--dt-font-size-12-line-height);
586
+ /* Caption-strong font theme */
587
+ --dt-font-caption-strong-size: var(--dt-font-size-12);
588
+ --dt-font-caption-strong-family: var(--dt-font-family-primary);
589
+ --dt-font-caption-strong-weight: var(--dt-font-weight-bold);
590
+ --dt-font-caption-strong-paragraph: var(--dt-font-paragraph-spacing-03);
591
+ --dt-font-caption-strong-line-height: var(--dt-font-size-12-line-height);
592
+ /* Caption-strong-link font theme */
593
+ --dt-font-caption-strong-link-size: var(--dt-font-size-12);
594
+ --dt-font-caption-strong-link-family: var(--dt-font-family-primary);
595
+ --dt-font-caption-strong-link-weight: var(--dt-font-weight-bold);
596
+ --dt-font-caption-strong-link-paragraph: var(--dt-font-paragraph-spacing-03);
597
+ --dt-font-caption-strong-link-text-decoration: var(--dt-font-style-underline);
598
+ --dt-font-caption-strong-link-line-height: var(--dt-font-size-12-line-height);
599
+ /* Global tokens - Radius */
600
+ --dt-radius-00: 0;
601
+ --dt-radius-02: 4px;
602
+ --dt-radius-03: 8px;
603
+ --dt-radius-04: 12px;
604
+ --dt-radius-05: 16px;
605
+ --dt-radius-06: 50rem;
606
+ /* Alias tokens - Radius */
607
+ --dt-radius-rounded-none: var(--dt-radius-00);
608
+ --dt-radius-rounded-a: var(--dt-radius-02);
609
+ --dt-radius-rounded-b: var(--dt-radius-03);
610
+ --dt-radius-rounded-c: var(--dt-radius-04);
611
+ --dt-radius-rounded-d: var(--dt-radius-05);
612
+ --dt-radius-rounded-e: var(--dt-radius-06);
613
+ /* Global tokens - Spacing */
614
+ --dt-spacing-10: 80px;
615
+ --dt-spacing-00: 0;
616
+ --dt-spacing-01: 4px;
617
+ --dt-spacing-02: 8px;
618
+ --dt-spacing-03: 12px;
619
+ --dt-spacing-04: 16px;
620
+ --dt-spacing-05: 24px;
621
+ --dt-spacing-06: 32px;
622
+ --dt-spacing-07: 40px;
623
+ --dt-spacing-08: 56px;
624
+ --dt-spacing-09: 64px;
625
+ /* Alias tokens - Spacing */
626
+ --dt-spacing-none: var(--dt-spacing-00);
627
+ --dt-spacing-a: var(--dt-spacing-01);
628
+ --dt-spacing-b: var(--dt-spacing-02);
629
+ --dt-spacing-c: var(--dt-spacing-03);
630
+ --dt-spacing-d: var(--dt-spacing-04);
631
+ --dt-spacing-e: var(--dt-spacing-05);
632
+ --dt-spacing-f: var(--dt-spacing-06);
633
+ --dt-spacing-g: var(--dt-spacing-07);
634
+ --dt-spacing-h: var(--dt-spacing-08);
635
+ --dt-spacing-i: var(--dt-spacing-09);
636
+ --dt-spacing-j: var(--dt-spacing-10);
637
+ /* Global tokens - Elevation */
638
+ --dt-elevation-box-shadow-01: 0px 2px 2px 0px rgba(0, 0, 0, 0.03),0px 3px 1px -2px rgba(0, 0, 0, 0.07),0px 1px 5px 0px rgba(0, 0, 0, 0.06);
639
+ --dt-elevation-box-shadow-02: 0px 4px 6px 0px rgba(0, 0, 0, 0.02),0px 2px 12px -2px rgba(0, 0, 0, 0.08),0px 3px 6px 0px rgba(0, 0, 0, 0.06);
640
+ --dt-elevation-box-shadow-03: 0px 2px 6px 0px rgba(0, 0, 0, 0.04),0px 8px 12px -2px rgba(0, 0, 0, 0.06),0px 4px 6px 0px rgba(0, 0, 0, 0.04);
641
+ --dt-elevation-box-shadow-04: 0px 8px 8px 0px rgba(0, 0, 0, 0.04),0px 8px 20px -3px rgba(0, 0, 0, 0.1),0px 4px 8px -2px rgba(0, 0, 0, 0.06);
642
+ --dt-elevation-box-shadow-05: 0px -4px 6px 0px rgba(0, 0, 0, 0.02),0px -2px 12px -2px rgba(0, 0, 0, 0.08),0px -3px 6px 0px rgba(0, 0, 0, 0.06);
643
+ --dt-elevation-box-shadow-06: 0px 2px 2px 0px rgba(0, 0, 0, 0.12),0px 3px 1px -2px rgba(0, 0, 0, 0.28),0px 1px 5px 0px rgba(0, 0, 0, 0.24);
644
+ --dt-elevation-box-shadow-07: 0px 4px 6px 0px rgba(0, 0, 0, 0.08),0px 2px 12px -2px rgba(0, 0, 0, 0.32),0px 3px 6px 0px rgba(0, 0, 0, 0.24);
645
+ --dt-elevation-box-shadow-08: 0px 2px 6px 0px rgba(0, 0, 0, 0.12),0px 8px 12px -2px rgba(0, 0, 0, 0.24),0px 4px 6px 0px rgba(0, 0, 0, 0.16);
646
+ --dt-elevation-box-shadow-09: 0px 8px 8px 0px rgba(0, 0, 0, 0.16),0px 3px 20px -3px rgba(0, 0, 0, 0.4),0px 4px 8px -2px rgba(0, 0, 0, 0.24);
647
+ --dt-elevation-box-shadow-10: 0px -4px 6px 0px rgba(0, 0, 0, 0.08),0px -2px 12px -2px rgba(0, 0, 0, 0.32),0px -3px 6px 0px rgba(0, 0, 0, 0.24);
648
+ --dt-elevation-box-shadow-11: 0px 0px 1px 0px rgba(0, 0, 0, 0.12),0px 1px 5px 0px rgba(0, 0, 0, 0.04),0px 0px 4px 0px rgba(0, 0, 0, 0.1);
649
+ --dt-elevation-box-shadow-12: 0px 0px 1px 0px rgba(0, 0, 0, 0.24),0px 1px 5px 0px rgba(0, 0, 0, 0.08),0px 0px 4px 0px rgba(0, 0, 0, 0.16);
650
+ /* Alias tokens - Elevation */
651
+ --dt-elevation-01: var(--dt-elevation-box-shadow-01);
652
+ --dt-elevation-02: var(--dt-elevation-box-shadow-02);
653
+ --dt-elevation-03: var(--dt-elevation-box-shadow-03);
654
+ --dt-elevation-04: var(--dt-elevation-box-shadow-04);
655
+ --dt-elevation-05: var(--dt-elevation-box-shadow-05);
656
+ --dt-elevation-card: var(--dt-elevation-box-shadow-11);
657
+ --dt-elevation-inverse-01: var(--dt-elevation-box-shadow-06);
658
+ --dt-elevation-inverse-02: var(--dt-elevation-box-shadow-07);
659
+ --dt-elevation-inverse-03: var(--dt-elevation-box-shadow-08);
660
+ --dt-elevation-inverse-04: var(--dt-elevation-box-shadow-09);
661
+ --dt-elevation-inverse-05: var(--dt-elevation-box-shadow-10);
662
+ --dt-elevation-inverse-card: var(--dt-elevation-box-shadow-12);
663
+ --dt-elevation-dark-01: var(--dt-elevation-box-shadow-06);
664
+ --dt-elevation-dark-02: var(--dt-elevation-box-shadow-07);
665
+ --dt-elevation-dark-03: var(--dt-elevation-box-shadow-08);
666
+ --dt-elevation-dark-04: var(--dt-elevation-box-shadow-09);
667
+ --dt-elevation-dark-05: var(--dt-elevation-box-shadow-10);
668
+ --dt-elevation-dark-card: var(--dt-elevation-box-shadow-12);
669
+ --dt-elevation-dark-inverse-01: var(--dt-elevation-box-shadow-01);
670
+ --dt-elevation-dark-inverse-02: var(--dt-elevation-box-shadow-02);
671
+ --dt-elevation-dark-inverse-03: var(--dt-elevation-box-shadow-03);
672
+ --dt-elevation-dark-inverse-04: var(--dt-elevation-box-shadow-04);
673
+ --dt-elevation-dark-inverse-05: var(--dt-elevation-box-shadow-05);
674
+ --dt-elevation-dark-inverse-card: var(--dt-elevation-box-shadow-11);
675
+ }
676
+ :root {
677
+ --dt-color-aubergine-10-h: 300;
678
+ --dt-color-aubergine-10-s: 26.2%;
679
+ --dt-color-aubergine-10-l: 87.3%;
680
+ --dt-color-aubergine-80-h: 302;
681
+ --dt-color-aubergine-80-s: 26.6%;
682
+ --dt-color-aubergine-80-l: 21.4%;
683
+ --dt-color-berry-10-h: 350;
684
+ --dt-color-berry-10-s: 100%;
685
+ --dt-color-berry-10-l: 95.3%;
686
+ --dt-color-berry-90-h: 351;
687
+ --dt-color-berry-90-s: 37.1%;
688
+ --dt-color-berry-90-l: 28%;
689
+ --dt-color-black-h: 0;
690
+ --dt-color-black-s: 0%;
691
+ --dt-color-black-l: 0%;
692
+ --dt-color-blue-h: 215;
693
+ --dt-color-blue-s: 83.6%;
694
+ --dt-color-blue-l: 43.1%;
695
+ --dt-color-blue-10-h: 196;
696
+ --dt-color-blue-10-s: 60%;
697
+ --dt-color-blue-10-l: 95.1%;
698
+ --dt-color-blue-25-h: 188;
699
+ --dt-color-blue-25-s: 30.5%;
700
+ --dt-color-blue-25-l: 81.4%;
701
+ --dt-color-blue-30-h: 215;
702
+ --dt-color-blue-30-s: 87.3%;
703
+ --dt-color-blue-30-l: 72.2%;
704
+ --dt-color-blue-70-h: 215;
705
+ --dt-color-blue-70-s: 90.1%;
706
+ --dt-color-blue-70-l: 35.5%;
707
+ --dt-color-blue-90-h: 196;
708
+ --dt-color-blue-90-s: 78.7%;
709
+ --dt-color-blue-90-l: 14.7%;
710
+ --dt-color-blue-dark-hc-h: 215;
711
+ --dt-color-blue-dark-hc-s: 83.7%;
712
+ --dt-color-blue-dark-hc-l: 38.4%;
713
+ --dt-color-blue-light-hc-h: 214;
714
+ --dt-color-blue-light-hc-s: 98.3%;
715
+ --dt-color-blue-light-hc-l: 77.1%;
716
+ --dt-color-charcoal-30-h: 200;
717
+ --dt-color-charcoal-30-s: 3.9%;
718
+ --dt-color-charcoal-30-l: 84.9%;
719
+ --dt-color-charcoal-40-h: 189;
720
+ --dt-color-charcoal-40-s: 5.1%;
721
+ --dt-color-charcoal-40-l: 73.1%;
722
+ --dt-color-charcoal-50-h: 188;
723
+ --dt-color-charcoal-50-s: 7%;
724
+ --dt-color-charcoal-50-l: 57.8%;
725
+ --dt-color-charcoal-60-h: 190;
726
+ --dt-color-charcoal-60-s: 11%;
727
+ --dt-color-charcoal-60-l: 41%;
728
+ --dt-color-charcoal-70-h: 189;
729
+ --dt-color-charcoal-70-s: 13.7%;
730
+ --dt-color-charcoal-70-l: 27.3%;
731
+ --dt-color-charcoal-75-h: 188;
732
+ --dt-color-charcoal-75-s: 13.5%;
733
+ --dt-color-charcoal-75-l: 21.8%;
734
+ --dt-color-charcoal-80-h: 190;
735
+ --dt-color-charcoal-80-s: 14.3%;
736
+ --dt-color-charcoal-80-l: 16.5%;
737
+ --dt-color-cupcake-10-h: 188;
738
+ --dt-color-cupcake-10-s: 45.5%;
739
+ --dt-color-cupcake-10-l: 93.5%;
740
+ --dt-color-cupcake-90-h: 186;
741
+ --dt-color-cupcake-90-s: 28.8%;
742
+ --dt-color-cupcake-90-l: 20.4%;
743
+ --dt-color-green-h: 148;
744
+ --dt-color-green-s: 98.4%;
745
+ --dt-color-green-l: 24.1%;
746
+ --dt-color-green-10-h: 149;
747
+ --dt-color-green-10-s: 67.7%;
748
+ --dt-color-green-10-l: 93.9%;
749
+ --dt-color-green-30-h: 146;
750
+ --dt-color-green-30-s: 69.8%;
751
+ --dt-color-green-30-l: 44.1%;
752
+ --dt-color-green-90-h: 150;
753
+ --dt-color-green-90-s: 23.5%;
754
+ --dt-color-green-90-l: 20%;
755
+ --dt-color-green-dark-hc-h: 141;
756
+ --dt-color-green-dark-hc-s: 60.6%;
757
+ --dt-color-green-dark-hc-l: 24.9%;
758
+ --dt-color-green-light-hc-h: 145;
759
+ --dt-color-green-light-hc-s: 69.6%;
760
+ --dt-color-green-light-hc-l: 49%;
761
+ --dt-color-mozzarella-10-h: 30;
762
+ --dt-color-mozzarella-10-s: 16.7%;
763
+ --dt-color-mozzarella-10-l: 95.3%;
764
+ --dt-color-mozzarella-100-h: 60;
765
+ --dt-color-mozzarella-100-s: 2%;
766
+ --dt-color-mozzarella-100-l: 10%;
767
+ --dt-color-mozzarella-20-h: 36;
768
+ --dt-color-mozzarella-20-s: 13.5%;
769
+ --dt-color-mozzarella-20-l: 92.7%;
770
+ --dt-color-mozzarella-30-h: 30;
771
+ --dt-color-mozzarella-30-s: 5.3%;
772
+ --dt-color-mozzarella-30-l: 85.1%;
773
+ --dt-color-mozzarella-5-h: 0;
774
+ --dt-color-mozzarella-5-s: 0%;
775
+ --dt-color-mozzarella-5-l: 98.8%;
776
+ --dt-color-mozzarella-50-h: 30;
777
+ --dt-color-mozzarella-50-s: 2%;
778
+ --dt-color-mozzarella-50-l: 61.2%;
779
+ --dt-color-mozzarella-60-h: 40;
780
+ --dt-color-mozzarella-60-s: 1.3%;
781
+ --dt-color-mozzarella-60-l: 46.9%;
782
+ --dt-color-mozzarella-70-h: 30;
783
+ --dt-color-mozzarella-70-s: 1.2%;
784
+ --dt-color-mozzarella-70-l: 33.7%;
785
+ --dt-color-mozzarella-75-h: 30;
786
+ --dt-color-mozzarella-75-s: 1.4%;
787
+ --dt-color-mozzarella-75-l: 28.2%;
788
+ --dt-color-mozzarella-80-h: 30;
789
+ --dt-color-mozzarella-80-s: 1.7%;
790
+ --dt-color-mozzarella-80-l: 22.7%;
791
+ --dt-color-mozzarella-90-h: 0;
792
+ --dt-color-mozzarella-90-s: 0%;
793
+ --dt-color-mozzarella-90-l: 14.9%;
794
+ --dt-color-orange-h: 25;
795
+ --dt-color-orange-s: 96%;
796
+ --dt-color-orange-l: 48.6%;
797
+ --dt-color-orange-10-h: 31;
798
+ --dt-color-orange-10-s: 100%;
799
+ --dt-color-orange-10-l: 91.6%;
800
+ --dt-color-orange-30-h: 30;
801
+ --dt-color-orange-30-s: 100%;
802
+ --dt-color-orange-30-l: 50%;
803
+ --dt-color-orange-55-h: 16;
804
+ --dt-color-orange-55-s: 92.8%;
805
+ --dt-color-orange-55-l: 56.3%;
806
+ --dt-color-orange-90-h: 30;
807
+ --dt-color-orange-90-s: 35.4%;
808
+ --dt-color-orange-90-l: 18.8%;
809
+ --dt-color-orange-dark-hc-h: 18;
810
+ --dt-color-orange-dark-hc-s: 100%;
811
+ --dt-color-orange-dark-hc-l: 32%;
812
+ --dt-color-purple-h: 300;
813
+ --dt-color-purple-s: 19.7%;
814
+ --dt-color-purple-l: 29.8%;
815
+ --dt-color-purple-light-hc-h: 300;
816
+ --dt-color-purple-light-hc-s: 19.8%;
817
+ --dt-color-purple-light-hc-l: 66.3%;
818
+ --dt-color-red-h: 351;
819
+ --dt-color-red-s: 95.4%;
820
+ --dt-color-red-l: 42.7%;
821
+ --dt-color-red-10-h: 357;
822
+ --dt-color-red-10-s: 100%;
823
+ --dt-color-red-10-l: 95.7%;
824
+ --dt-color-red-25-h: 352;
825
+ --dt-color-red-25-s: 74.5%;
826
+ --dt-color-red-25-l: 80%;
827
+ --dt-color-red-30-h: 351;
828
+ --dt-color-red-30-s: 79.9%;
829
+ --dt-color-red-30-l: 62.9%;
830
+ --dt-color-red-90-h: 352;
831
+ --dt-color-red-90-s: 41.7%;
832
+ --dt-color-red-90-l: 20.2%;
833
+ --dt-color-red-dark-hc-h: 350;
834
+ --dt-color-red-dark-hc-s: 95.2%;
835
+ --dt-color-red-dark-hc-l: 32.9%;
836
+ --dt-color-red-light-hc-h: 357;
837
+ --dt-color-red-light-hc-s: 100%;
838
+ --dt-color-red-light-hc-l: 73.9%;
839
+ --dt-color-system-purple-h: 300;
840
+ --dt-color-system-purple-s: 100%;
841
+ --dt-color-system-purple-l: 25.1%;
842
+ --dt-color-system-purple-10-h: 272;
843
+ --dt-color-system-purple-10-s: 90.2%;
844
+ --dt-color-system-purple-10-l: 75.9%;
845
+ --dt-color-tomato-5-h: 19;
846
+ --dt-color-tomato-5-s: 100%;
847
+ --dt-color-tomato-5-l: 87.5%;
848
+ --dt-color-tomato-90-h: 15;
849
+ --dt-color-tomato-90-s: 60.7%;
850
+ --dt-color-tomato-90-l: 23.9%;
851
+ --dt-color-turmeric-5-h: 49;
852
+ --dt-color-turmeric-5-s: 100%;
853
+ --dt-color-turmeric-5-l: 93.5%;
854
+ --dt-color-turmeric-80-h: 43;
855
+ --dt-color-turmeric-80-s: 100%;
856
+ --dt-color-turmeric-80-l: 22.7%;
857
+ --dt-color-white-h: 0;
858
+ --dt-color-white-s: 0%;
859
+ --dt-color-white-l: 100%;
860
+ --dt-color-yellow-h: 43;
861
+ --dt-color-yellow-s: 90.9%;
862
+ --dt-color-yellow-l: 61.4%;
863
+ --dt-color-yellow-10-h: 49;
864
+ --dt-color-yellow-10-s: 100%;
865
+ --dt-color-yellow-10-l: 93.7%;
866
+ --dt-color-yellow-90-h: 57;
867
+ --dt-color-yellow-90-s: 19.3%;
868
+ --dt-color-yellow-90-l: 23.3%;
869
+ --dt-color-yellow-dark-hc-h: 41;
870
+ --dt-color-yellow-dark-hc-s: 35.9%;
871
+ --dt-color-yellow-dark-hc-l: 30%;
872
+ --dt-color-background-default-h: var(--dt-color-mozzarella-5-h);
873
+ --dt-color-background-default-s: var(--dt-color-mozzarella-5-s);
874
+ --dt-color-background-default-l: var(--dt-color-mozzarella-5-l);
875
+ --dt-color-background-subtle-h: var(--dt-color-mozzarella-10-h);
876
+ --dt-color-background-subtle-s: var(--dt-color-mozzarella-10-s);
877
+ --dt-color-background-subtle-l: var(--dt-color-mozzarella-10-l);
878
+ --dt-color-background-dark-h: var(--dt-color-mozzarella-100-h);
879
+ --dt-color-background-dark-s: var(--dt-color-mozzarella-100-s);
880
+ --dt-color-background-dark-l: var(--dt-color-mozzarella-100-l);
881
+ --dt-color-container-default-h: var(--dt-color-white-h);
882
+ --dt-color-container-default-s: var(--dt-color-white-s);
883
+ --dt-color-container-default-l: var(--dt-color-white-l);
884
+ --dt-color-container-subtle-h: var(--dt-color-mozzarella-10-h);
885
+ --dt-color-container-subtle-s: var(--dt-color-mozzarella-10-s);
886
+ --dt-color-container-subtle-l: var(--dt-color-mozzarella-10-l);
887
+ --dt-color-container-strong-h: var(--dt-color-mozzarella-20-h);
888
+ --dt-color-container-strong-s: var(--dt-color-mozzarella-20-s);
889
+ --dt-color-container-strong-l: var(--dt-color-mozzarella-20-l);
890
+ --dt-color-container-dark-h: var(--dt-color-mozzarella-90-h);
891
+ --dt-color-container-dark-s: var(--dt-color-mozzarella-90-s);
892
+ --dt-color-container-dark-l: var(--dt-color-mozzarella-90-l);
893
+ --dt-color-container-inverse-h: var(--dt-color-mozzarella-90-h);
894
+ --dt-color-container-inverse-s: var(--dt-color-mozzarella-90-s);
895
+ --dt-color-container-inverse-l: var(--dt-color-mozzarella-90-l);
896
+ --dt-color-container-inverse-alternative-h: var(--dt-color-mozzarella-90-h);
897
+ --dt-color-container-inverse-alternative-s: var(--dt-color-mozzarella-90-s);
898
+ --dt-color-container-inverse-alternative-l: var(--dt-color-mozzarella-90-l);
899
+ --dt-color-border-default-h: var(--dt-color-mozzarella-20-h);
900
+ --dt-color-border-default-s: var(--dt-color-mozzarella-20-s);
901
+ --dt-color-border-default-l: var(--dt-color-mozzarella-20-l);
902
+ --dt-color-border-subtle-h: var(--dt-color-mozzarella-10-h);
903
+ --dt-color-border-subtle-s: var(--dt-color-mozzarella-10-s);
904
+ --dt-color-border-subtle-l: var(--dt-color-mozzarella-10-l);
905
+ --dt-color-border-strong-h: var(--dt-color-mozzarella-30-h);
906
+ --dt-color-border-strong-s: var(--dt-color-mozzarella-30-s);
907
+ --dt-color-border-strong-l: var(--dt-color-mozzarella-30-l);
908
+ --dt-color-border-inverse-h: var(--dt-color-mozzarella-70-h);
909
+ --dt-color-border-inverse-s: var(--dt-color-mozzarella-70-s);
910
+ --dt-color-border-inverse-l: var(--dt-color-mozzarella-70-l);
911
+ --dt-color-border-selected-h: var(--dt-color-mozzarella-50-h);
912
+ --dt-color-border-selected-s: var(--dt-color-mozzarella-50-s);
913
+ --dt-color-border-selected-l: var(--dt-color-mozzarella-50-l);
914
+ --dt-color-interactive-brand-h: var(--dt-color-orange-h);
915
+ --dt-color-interactive-brand-s: var(--dt-color-orange-s);
916
+ --dt-color-interactive-brand-l: var(--dt-color-orange-l);
917
+ --dt-color-interactive-primary-h: var(--dt-color-mozzarella-90-h);
918
+ --dt-color-interactive-primary-s: var(--dt-color-mozzarella-90-s);
919
+ --dt-color-interactive-primary-l: var(--dt-color-mozzarella-90-l);
920
+ --dt-color-interactive-secondary-h: var(--dt-color-mozzarella-10-h);
921
+ --dt-color-interactive-secondary-s: var(--dt-color-mozzarella-10-s);
922
+ --dt-color-interactive-secondary-l: var(--dt-color-mozzarella-10-l);
923
+ --dt-color-interactive-inverse-h: var(--dt-color-white-h);
924
+ --dt-color-interactive-inverse-s: var(--dt-color-white-s);
925
+ --dt-color-interactive-inverse-l: var(--dt-color-white-l);
926
+ --dt-color-interactive-light-h: var(--dt-color-white-h);
927
+ --dt-color-interactive-light-s: var(--dt-color-white-s);
928
+ --dt-color-interactive-light-l: var(--dt-color-white-l);
929
+ --dt-color-interactive-form-h: var(--dt-color-mozzarella-60-h);
930
+ --dt-color-interactive-form-s: var(--dt-color-mozzarella-60-s);
931
+ --dt-color-interactive-form-l: var(--dt-color-mozzarella-60-l);
932
+ --dt-color-support-error-h: var(--dt-color-red-h);
933
+ --dt-color-support-error-s: var(--dt-color-red-s);
934
+ --dt-color-support-error-l: var(--dt-color-red-l);
935
+ --dt-color-support-warning-h: var(--dt-color-yellow-h);
936
+ --dt-color-support-warning-s: var(--dt-color-yellow-s);
937
+ --dt-color-support-warning-l: var(--dt-color-yellow-l);
938
+ --dt-color-support-positive-h: var(--dt-color-green-h);
939
+ --dt-color-support-positive-s: var(--dt-color-green-s);
940
+ --dt-color-support-positive-l: var(--dt-color-green-l);
941
+ --dt-color-support-info-h: var(--dt-color-blue-h);
942
+ --dt-color-support-info-s: var(--dt-color-blue-s);
943
+ --dt-color-support-info-l: var(--dt-color-blue-l);
944
+ --dt-color-support-neutral-h: var(--dt-color-mozzarella-20-h);
945
+ --dt-color-support-neutral-s: var(--dt-color-mozzarella-20-s);
946
+ --dt-color-support-neutral-l: var(--dt-color-mozzarella-20-l);
947
+ --dt-color-support-error-02-h: var(--dt-color-red-10-h);
948
+ --dt-color-support-error-02-s: var(--dt-color-red-10-s);
949
+ --dt-color-support-error-02-l: var(--dt-color-red-10-l);
950
+ --dt-color-support-warning-02-h: var(--dt-color-yellow-10-h);
951
+ --dt-color-support-warning-02-s: var(--dt-color-yellow-10-s);
952
+ --dt-color-support-warning-02-l: var(--dt-color-yellow-10-l);
953
+ --dt-color-support-positive-02-h: var(--dt-color-green-10-h);
954
+ --dt-color-support-positive-02-s: var(--dt-color-green-10-s);
955
+ --dt-color-support-positive-02-l: var(--dt-color-green-10-l);
956
+ --dt-color-support-info-02-h: var(--dt-color-blue-10-h);
957
+ --dt-color-support-info-02-s: var(--dt-color-blue-10-s);
958
+ --dt-color-support-info-02-l: var(--dt-color-blue-10-l);
959
+ --dt-color-support-info-inverse-h: var(--dt-color-blue-30-h);
960
+ --dt-color-support-info-inverse-s: var(--dt-color-blue-30-s);
961
+ --dt-color-support-info-inverse-l: var(--dt-color-blue-30-l);
962
+ --dt-color-support-positive-inverse-h: var(--dt-color-green-30-h);
963
+ --dt-color-support-positive-inverse-s: var(--dt-color-green-30-s);
964
+ --dt-color-support-positive-inverse-l: var(--dt-color-green-30-l);
965
+ --dt-color-support-brand-01-h: var(--dt-color-orange-30-h);
966
+ --dt-color-support-brand-01-s: var(--dt-color-orange-30-s);
967
+ --dt-color-support-brand-01-l: var(--dt-color-orange-30-l);
968
+ --dt-color-support-brand-02-h: var(--dt-color-orange-10-h);
969
+ --dt-color-support-brand-02-s: var(--dt-color-orange-10-s);
970
+ --dt-color-support-brand-02-l: var(--dt-color-orange-10-l);
971
+ --dt-color-support-brand-03-h: var(--dt-color-blue-25-h);
972
+ --dt-color-support-brand-03-s: var(--dt-color-blue-25-s);
973
+ --dt-color-support-brand-03-l: var(--dt-color-blue-25-l);
974
+ --dt-color-support-brand-03-subtle-h: var(--dt-color-cupcake-10-h);
975
+ --dt-color-support-brand-03-subtle-s: var(--dt-color-cupcake-10-s);
976
+ --dt-color-support-brand-03-subtle-l: var(--dt-color-cupcake-10-l);
977
+ --dt-color-support-brand-04-h: var(--dt-color-red-25-h);
978
+ --dt-color-support-brand-04-s: var(--dt-color-red-25-s);
979
+ --dt-color-support-brand-04-l: var(--dt-color-red-25-l);
980
+ --dt-color-support-brand-04-subtle-h: var(--dt-color-berry-10-h);
981
+ --dt-color-support-brand-04-subtle-s: var(--dt-color-berry-10-s);
982
+ --dt-color-support-brand-04-subtle-l: var(--dt-color-berry-10-l);
983
+ --dt-color-support-brand-05-h: var(--dt-color-yellow-h);
984
+ --dt-color-support-brand-05-s: var(--dt-color-yellow-s);
985
+ --dt-color-support-brand-05-l: var(--dt-color-yellow-l);
986
+ --dt-color-support-brand-05-subtle-h: var(--dt-color-turmeric-5-h);
987
+ --dt-color-support-brand-05-subtle-s: var(--dt-color-turmeric-5-s);
988
+ --dt-color-support-brand-05-subtle-l: var(--dt-color-turmeric-5-l);
989
+ --dt-color-support-brand-06-h: var(--dt-color-purple-h);
990
+ --dt-color-support-brand-06-s: var(--dt-color-purple-s);
991
+ --dt-color-support-brand-06-l: var(--dt-color-purple-l);
992
+ --dt-color-support-brand-06-subtle-h: var(--dt-color-aubergine-10-h);
993
+ --dt-color-support-brand-06-subtle-s: var(--dt-color-aubergine-10-s);
994
+ --dt-color-support-brand-06-subtle-l: var(--dt-color-aubergine-10-l);
995
+ --dt-color-support-brand-07-h: var(--dt-color-orange-55-h);
996
+ --dt-color-support-brand-07-s: var(--dt-color-orange-55-s);
997
+ --dt-color-support-brand-07-l: var(--dt-color-orange-55-l);
998
+ --dt-color-support-brand-07-subtle-h: var(--dt-color-tomato-5-h);
999
+ --dt-color-support-brand-07-subtle-s: var(--dt-color-tomato-5-s);
1000
+ --dt-color-support-brand-07-subtle-l: var(--dt-color-tomato-5-l);
1001
+ --dt-color-content-default-h: var(--dt-color-charcoal-80-h);
1002
+ --dt-color-content-default-s: var(--dt-color-charcoal-80-s);
1003
+ --dt-color-content-default-l: var(--dt-color-charcoal-80-l);
1004
+ --dt-color-content-subdued-h: var(--dt-color-charcoal-70-h);
1005
+ --dt-color-content-subdued-s: var(--dt-color-charcoal-70-s);
1006
+ --dt-color-content-subdued-l: var(--dt-color-charcoal-70-l);
1007
+ --dt-color-content-interactive-brand-h: var(--dt-color-orange-h);
1008
+ --dt-color-content-interactive-brand-s: var(--dt-color-orange-s);
1009
+ --dt-color-content-interactive-brand-l: var(--dt-color-orange-l);
1010
+ --dt-color-content-interactive-light-h: var(--dt-color-white-h);
1011
+ --dt-color-content-interactive-light-s: var(--dt-color-white-s);
1012
+ --dt-color-content-interactive-light-l: var(--dt-color-white-l);
1013
+ --dt-color-content-interactive-primary-h: var(--dt-color-white-h);
1014
+ --dt-color-content-interactive-primary-s: var(--dt-color-white-s);
1015
+ --dt-color-content-interactive-primary-l: var(--dt-color-white-l);
1016
+ --dt-color-content-interactive-secondary-h: var(--dt-color-charcoal-80-h);
1017
+ --dt-color-content-interactive-secondary-s: var(--dt-color-charcoal-80-s);
1018
+ --dt-color-content-interactive-secondary-l: var(--dt-color-charcoal-80-l);
1019
+ --dt-color-content-interactive-tertiary-h: var(--dt-color-charcoal-75-h);
1020
+ --dt-color-content-interactive-tertiary-s: var(--dt-color-charcoal-75-s);
1021
+ --dt-color-content-interactive-tertiary-l: var(--dt-color-charcoal-75-l);
1022
+ --dt-color-content-interactive-subdued-h: var(--dt-color-charcoal-60-h);
1023
+ --dt-color-content-interactive-subdued-s: var(--dt-color-charcoal-60-s);
1024
+ --dt-color-content-interactive-subdued-l: var(--dt-color-charcoal-60-l);
1025
+ --dt-color-content-interactive-inverse-h: var(--dt-color-charcoal-80-h);
1026
+ --dt-color-content-interactive-inverse-s: var(--dt-color-charcoal-80-s);
1027
+ --dt-color-content-interactive-inverse-l: var(--dt-color-charcoal-80-l);
1028
+ --dt-color-content-interactive-dark-h: var(--dt-color-charcoal-80-h);
1029
+ --dt-color-content-interactive-dark-s: var(--dt-color-charcoal-80-s);
1030
+ --dt-color-content-interactive-dark-l: var(--dt-color-charcoal-80-l);
1031
+ --dt-color-content-interactive-error-h: var(--dt-color-red-h);
1032
+ --dt-color-content-interactive-error-s: var(--dt-color-red-s);
1033
+ --dt-color-content-interactive-error-l: var(--dt-color-red-l);
1034
+ --dt-color-content-light-h: var(--dt-color-white-h);
1035
+ --dt-color-content-light-s: var(--dt-color-white-s);
1036
+ --dt-color-content-light-l: var(--dt-color-white-l);
1037
+ --dt-color-content-dark-h: var(--dt-color-charcoal-80-h);
1038
+ --dt-color-content-dark-s: var(--dt-color-charcoal-80-s);
1039
+ --dt-color-content-dark-l: var(--dt-color-charcoal-80-l);
1040
+ --dt-color-content-inverse-h: var(--dt-color-white-h);
1041
+ --dt-color-content-inverse-s: var(--dt-color-white-s);
1042
+ --dt-color-content-inverse-l: var(--dt-color-white-l);
1043
+ --dt-color-content-link-h: var(--dt-color-charcoal-80-h);
1044
+ --dt-color-content-link-s: var(--dt-color-charcoal-80-s);
1045
+ --dt-color-content-link-l: var(--dt-color-charcoal-80-l);
1046
+ --dt-color-content-link-distinct-h: var(--dt-color-blue-h);
1047
+ --dt-color-content-link-distinct-s: var(--dt-color-blue-s);
1048
+ --dt-color-content-link-distinct-l: var(--dt-color-blue-l);
1049
+ --dt-color-content-link-light-h: var(--dt-color-white-h);
1050
+ --dt-color-content-link-light-s: var(--dt-color-white-s);
1051
+ --dt-color-content-link-light-l: var(--dt-color-white-l);
1052
+ --dt-color-content-link-inverse-h: var(--dt-color-white-h);
1053
+ --dt-color-content-link-inverse-s: var(--dt-color-white-s);
1054
+ --dt-color-content-link-inverse-l: var(--dt-color-white-l);
1055
+ --dt-color-content-link-visited-h: var(--dt-color-system-purple-h);
1056
+ --dt-color-content-link-visited-s: var(--dt-color-system-purple-s);
1057
+ --dt-color-content-link-visited-l: var(--dt-color-system-purple-l);
1058
+ --dt-color-content-link-visited-inverse-h: var(--dt-color-system-purple-10-h);
1059
+ --dt-color-content-link-visited-inverse-s: var(--dt-color-system-purple-10-s);
1060
+ --dt-color-content-link-visited-inverse-l: var(--dt-color-system-purple-10-l);
1061
+ --dt-color-content-error-h: var(--dt-color-red-h);
1062
+ --dt-color-content-error-s: var(--dt-color-red-s);
1063
+ --dt-color-content-error-l: var(--dt-color-red-l);
1064
+ --dt-color-content-positive-h: var(--dt-color-green-h);
1065
+ --dt-color-content-positive-s: var(--dt-color-green-s);
1066
+ --dt-color-content-positive-l: var(--dt-color-green-l);
1067
+ --dt-color-content-disabled-h: var(--dt-color-charcoal-50-h);
1068
+ --dt-color-content-disabled-s: var(--dt-color-charcoal-50-s);
1069
+ --dt-color-content-disabled-l: var(--dt-color-charcoal-50-l);
1070
+ --dt-color-content-brand-h: var(--dt-color-orange-h);
1071
+ --dt-color-content-brand-s: var(--dt-color-orange-s);
1072
+ --dt-color-content-brand-l: var(--dt-color-orange-l);
1073
+ --dt-color-focus-inner-h: var(--dt-color-white-h);
1074
+ --dt-color-focus-inner-s: var(--dt-color-white-s);
1075
+ --dt-color-focus-inner-l: var(--dt-color-white-l);
1076
+ --dt-color-focus-outer-h: var(--dt-color-blue-70-h);
1077
+ --dt-color-focus-outer-s: var(--dt-color-blue-70-s);
1078
+ --dt-color-focus-outer-l: var(--dt-color-blue-70-l);
1079
+ --dt-color-disabled-01-h: var(--dt-color-mozzarella-20-h);
1080
+ --dt-color-disabled-01-s: var(--dt-color-mozzarella-20-s);
1081
+ --dt-color-disabled-01-l: var(--dt-color-mozzarella-20-l);
1082
+ --dt-color-disabled-01-inverse-h: var(--dt-color-mozzarella-80-h);
1083
+ --dt-color-disabled-01-inverse-s: var(--dt-color-mozzarella-80-s);
1084
+ --dt-color-disabled-01-inverse-l: var(--dt-color-mozzarella-80-l);
1085
+ --dt-color-skeleton-01-h: var(--dt-color-mozzarella-10-h);
1086
+ --dt-color-skeleton-01-s: var(--dt-color-mozzarella-10-s);
1087
+ --dt-color-skeleton-01-l: var(--dt-color-mozzarella-10-l);
1088
+ --dt-color-skeleton-02-h: var(--dt-color-mozzarella-20-h);
1089
+ --dt-color-skeleton-02-s: var(--dt-color-mozzarella-20-s);
1090
+ --dt-color-skeleton-02-l: var(--dt-color-mozzarella-20-l);
1091
+ --dt-color-skeleton-03-h: var(--dt-color-white-h);
1092
+ --dt-color-skeleton-03-s: var(--dt-color-white-s);
1093
+ --dt-color-skeleton-03-l: var(--dt-color-white-l);
1094
+ }
1095
+ html {
1096
+ box-sizing: border-box;
1097
+
1098
+ /* These rules with smooth fonts. It makes fonts look crisp and clean on devices
1099
+ that support it. */
1100
+ text-rendering: optimizelegibility;
1101
+ -webkit-font-smoothing: antialiased;
1102
+ -moz-font-smoothing: antialiased;
1103
+
1104
+ /* These are added to prevent text size adjustments in various browsers.
1105
+ In some browsers, such as iOS Safari, will try to increase the font-size
1106
+ when you rotate the screen. This can be jarring and break layouts. */
1107
+ -webkit-text-size-adjust: 100%;
1108
+ text-size-adjust: 100%;
1109
+ }
1110
+ *,
1111
+ *:before,
1112
+ *:after {
1113
+ box-sizing: inherit;
1114
+ }
1115
+ /* The z-index priority order of different components.
1116
+ The values start at a high and specific number to avoid any conflicts */
1117
+ :root {
1118
+ --dt-z-index-dropdown: 1000;
1119
+ --dt-z-index-fab: 1000;
1120
+ --dt-z-index-tooltip: 2000;
1121
+ --dt-z-index-popover: 3000;
1122
+ --dt-z-index-bottom-sheet: 4000;
1123
+ --dt-z-index-side-sheet: 4000;
1124
+ --dt-z-index-modal: 4000;
1125
+ --dt-z-index-cookie-banner: 5000;
1126
+ --dt-z-index-toast: 6000;
1127
+ }