@justeattakeaway/pie-css 0.1.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 (7) hide show
  1. package/LICENSE +17 -0
  2. package/README.md +15 -0
  3. package/dist/index.css +1003 -0
  4. package/package.json +32 -0
  5. package/scss/index.scss +1 -0
  6. package/scss/mixins/_font-size.scss +18 -0
  7. package/scss/mixins/index.scss +1 -0
package/LICENSE ADDED
@@ -0,0 +1,17 @@
1
+ Apache License
2
+ Version 2.0, January 2004
3
+ http://www.apache.org/licenses/
4
+
5
+ Copyright (c) Just Eat Takeaway.com
6
+
7
+ Licensed under the Apache License, Version 2.0 (the "License");
8
+ you may not use this file except in compliance with the License.
9
+ You may obtain a copy of the License at
10
+
11
+ http://www.apache.org/licenses/LICENSE-2.0
12
+
13
+ Unless required by applicable law or agreed to in writing, software
14
+ distributed under the License is distributed on an "AS IS" BASIS,
15
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16
+ See the License for the specific language governing permissions and
17
+ limitations under the License.
package/README.md ADDED
@@ -0,0 +1,15 @@
1
+ <p align="center">
2
+ <img align="center" src="../../../readme_image.png" height="200" alt="">
3
+ </p>
4
+
5
+ <p align="center">
6
+ <a href="https://www.npmjs.com/@justeattakeaway/pie-css">
7
+ <img alt="Currently released NPM version" src="https://img.shields.io/npm/v/@justeattakeaway/pie-css.svg">
8
+ </a>
9
+ </p>
10
+
11
+ # PIE CSS
12
+
13
+ A styling library that provides both a shared collection of ready to use CSS styles to be used across JET web front-ends, and SCSS-based style helpers for our PIE Web Component library.
14
+
15
+ ---
package/dist/index.css ADDED
@@ -0,0 +1,1003 @@
1
+ :root, ::backdrop {
2
+ /* Global tokens - Color */
3
+ --dt-color-black: #000;
4
+ --dt-color-blue: #125fca;
5
+ --dt-color-blue-10: #ebf6fa;
6
+ --dt-color-blue-25: #c1dade;
7
+ --dt-color-blue-30: #7aadf6;
8
+ --dt-color-blue-70: #094dac;
9
+ --dt-color-blue-90: #083343;
10
+ --dt-color-blue-dark-hc: #1054b4;
11
+ --dt-color-blue-light-hc: #8bbcfe;
12
+ --dt-color-charcoal-30: #d7d9da;
13
+ --dt-color-charcoal-40: #b7bdbe;
14
+ --dt-color-charcoal-50: #8c999b;
15
+ --dt-color-charcoal-60: #5d7074;
16
+ --dt-color-charcoal-70: #3c4c4f;
17
+ --dt-color-charcoal-75: #303d3f;
18
+ --dt-color-charcoal-80: #242e30;
19
+ --dt-color-green: #017a39;
20
+ --dt-color-green-10: #e5faef;
21
+ --dt-color-green-30: #22bf65;
22
+ --dt-color-green-90: #273f33;
23
+ --dt-color-green-dark-hc: #196634;
24
+ --dt-color-green-light-hc: #26d46e;
25
+ --dt-color-mozzarella-10: #f5f3f1;
26
+ --dt-color-mozzarella-100: #1a1a19;
27
+ --dt-color-mozzarella-20: #efedea;
28
+ --dt-color-mozzarella-30: #dbd9d7;
29
+ --dt-color-mozzarella-5: #fcfcfc;
30
+ --dt-color-mozzarella-50: #9e9c9a;
31
+ --dt-color-mozzarella-60: #797876;
32
+ --dt-color-mozzarella-70: #575655;
33
+ --dt-color-mozzarella-75: #494847;
34
+ --dt-color-mozzarella-80: #3b3a39;
35
+ --dt-color-mozzarella-90: #262626;
36
+ --dt-color-orange: #f36805;
37
+ --dt-color-orange-10: #ffead4;
38
+ --dt-color-orange-30: #ff8000;
39
+ --dt-color-orange-55: #f75e28;
40
+ --dt-color-orange-90: #41301f;
41
+ --dt-color-orange-dark-hc: #a33100;
42
+ --dt-color-purple: #5b3d5b;
43
+ --dt-color-purple-light-hc: #ba98ba;
44
+ --dt-color-red: #d50525;
45
+ --dt-color-red-10: #ffe9ea;
46
+ --dt-color-red-25: #f2a6b0;
47
+ --dt-color-red-30: #ec556c;
48
+ --dt-color-red-90: #491e24;
49
+ --dt-color-red-dark-hc: #a4041f;
50
+ --dt-color-red-light-hc: #ff7a80;
51
+ --dt-color-system-purple: #800080;
52
+ --dt-color-system-purple-10: #c58af9;
53
+ --dt-color-white: #fff;
54
+ --dt-color-yellow: #f6c243;
55
+ --dt-color-yellow-10: #fff9df;
56
+ --dt-color-yellow-90: #474630;
57
+ --dt-color-yellow-dark-hc: #685731;
58
+ /* Alias tokens - Color */
59
+ /* Default color theme */
60
+ --dt-color-background-default: var(--dt-color-mozzarella-5);
61
+ --dt-color-background-subtle: var(--dt-color-mozzarella-10);
62
+ --dt-color-background-dark: var(--dt-color-mozzarella-100);
63
+ --dt-color-container-default: var(--dt-color-white);
64
+ --dt-color-container-subtle: var(--dt-color-mozzarella-10);
65
+ --dt-color-container-strong: var(--dt-color-mozzarella-20);
66
+ --dt-color-container-dark: var(--dt-color-mozzarella-90);
67
+ --dt-color-container-inverse: var(--dt-color-mozzarella-90);
68
+ --dt-color-border-default: var(--dt-color-mozzarella-20);
69
+ --dt-color-border-subtle: var(--dt-color-mozzarella-10);
70
+ --dt-color-border-strong: var(--dt-color-mozzarella-30);
71
+ --dt-color-border-inverse: var(--dt-color-mozzarella-70);
72
+ --dt-color-divider-default: rgb(0,0,0,0.08);
73
+ --dt-color-divider-inverse: rgb(255,255,255,0.20);
74
+ --dt-color-interactive-brand: var(--dt-color-orange);
75
+ --dt-color-interactive-primary: var(--dt-color-mozzarella-90);
76
+ --dt-color-interactive-secondary: var(--dt-color-mozzarella-10);
77
+ --dt-color-interactive-inverse: var(--dt-color-white);
78
+ --dt-color-interactive-light: var(--dt-color-white);
79
+ --dt-color-interactive-form: var(--dt-color-mozzarella-60);
80
+ --dt-color-overlay: rgb(0,0,0,0.5);
81
+ --dt-color-support-error: var(--dt-color-red);
82
+ --dt-color-support-warning: var(--dt-color-yellow);
83
+ --dt-color-support-positive: var(--dt-color-green);
84
+ --dt-color-support-info: var(--dt-color-blue);
85
+ --dt-color-support-neutral: var(--dt-color-mozzarella-20);
86
+ --dt-color-support-error-02: var(--dt-color-red-10);
87
+ --dt-color-support-warning-02: var(--dt-color-yellow-10);
88
+ --dt-color-support-positive-02: var(--dt-color-green-10);
89
+ --dt-color-support-info-02: var(--dt-color-blue-10);
90
+ --dt-color-support-info-inverse: var(--dt-color-blue-30);
91
+ --dt-color-support-positive-inverse: var(--dt-color-green-30);
92
+ --dt-color-support-brand-01: var(--dt-color-orange-30);
93
+ --dt-color-support-brand-02: var(--dt-color-orange-10);
94
+ --dt-color-support-brand-03: var(--dt-color-blue-25);
95
+ --dt-color-support-brand-04: var(--dt-color-red-25);
96
+ --dt-color-support-brand-05: var(--dt-color-yellow);
97
+ --dt-color-support-brand-06: var(--dt-color-purple);
98
+ --dt-color-support-brand-07: var(--dt-color-orange-55);
99
+ --dt-color-content-default: var(--dt-color-charcoal-80);
100
+ --dt-color-content-subdued: var(--dt-color-charcoal-70);
101
+ --dt-color-content-interactive-brand: var(--dt-color-orange);
102
+ --dt-color-content-interactive-light: var(--dt-color-white);
103
+ --dt-color-content-interactive-primary: var(--dt-color-white);
104
+ --dt-color-content-interactive-secondary: var(--dt-color-charcoal-80);
105
+ --dt-color-content-interactive-tertiary: var(--dt-color-charcoal-75);
106
+ --dt-color-content-interactive-subdued: var(--dt-color-charcoal-60);
107
+ --dt-color-content-interactive-inverse: var(--dt-color-charcoal-80);
108
+ --dt-color-content-interactive-dark: var(--dt-color-charcoal-80);
109
+ --dt-color-content-interactive-error: var(--dt-color-red);
110
+ --dt-color-content-light: var(--dt-color-white);
111
+ --dt-color-content-inverse: var(--dt-color-white);
112
+ --dt-color-content-link: var(--dt-color-charcoal-80);
113
+ --dt-color-content-link-distinct: var(--dt-color-blue);
114
+ --dt-color-content-link-light: var(--dt-color-white);
115
+ --dt-color-content-link-inverse: var(--dt-color-white);
116
+ --dt-color-content-link-visited: var(--dt-color-system-purple);
117
+ --dt-color-content-link-visited-inverse: var(--dt-color-system-purple-10);
118
+ --dt-color-content-error: var(--dt-color-red);
119
+ --dt-color-content-positive: var(--dt-color-green);
120
+ --dt-color-content-disabled: var(--dt-color-charcoal-50);
121
+ --dt-color-content-brand: var(--dt-color-orange);
122
+ --dt-color-hover-01: 4%;
123
+ --dt-color-hover-01-dark: 4%;
124
+ --dt-color-hover-02: 8%;
125
+ --dt-color-hover-02-light: 8%;
126
+ --dt-color-active-01: 12%;
127
+ --dt-color-active-01-dark: 12%;
128
+ --dt-color-active-02: 20%;
129
+ --dt-color-active-02-light: 20%;
130
+ --dt-color-focus-inner: var(--dt-color-white);
131
+ --dt-color-focus-outer: var(--dt-color-blue-70);
132
+ --dt-color-disabled-01: var(--dt-color-mozzarella-20);
133
+ --dt-color-disabled-01-inverse: var(--dt-color-mozzarella-80);
134
+ --dt-color-skeleton-01: var(--dt-color-mozzarella-10);
135
+ --dt-color-skeleton-02: var(--dt-color-mozzarella-20);
136
+ --dt-color-skeleton-03: var(--dt-color-white);
137
+ /* Highcontrast color theme */
138
+ --dt-color-highcontrast-background-default: var(--dt-color-white);
139
+ --dt-color-highcontrast-background-subtle: var(--dt-color-white);
140
+ --dt-color-highcontrast-background-dark: var(--dt-color-black);
141
+ --dt-color-highcontrast-container-default: var(--dt-color-white);
142
+ --dt-color-highcontrast-container-subtle: var(--dt-color-white);
143
+ --dt-color-highcontrast-container-strong: var(--dt-color-white);
144
+ --dt-color-highcontrast-container-dark: var(--dt-color-black);
145
+ --dt-color-highcontrast-container-inverse: var(--dt-color-black);
146
+ --dt-color-highcontrast-border-default: var(--dt-color-black);
147
+ --dt-color-highcontrast-border-subtle: var(--dt-color-black);
148
+ --dt-color-highcontrast-border-strong: var(--dt-color-black);
149
+ --dt-color-highcontrast-border-inverse: var(--dt-color-white);
150
+ --dt-color-highcontrast-divider-default: var(--dt-color-black);
151
+ --dt-color-highcontrast-divider-inverse: var(--dt-color-white);
152
+ --dt-color-highcontrast-interactive-brand: var(--dt-color-orange-dark-hc);
153
+ --dt-color-highcontrast-interactive-primary: var(--dt-color-black);
154
+ --dt-color-highcontrast-interactive-secondary: var(--dt-color-white);
155
+ --dt-color-highcontrast-interactive-inverse: var(--dt-color-white);
156
+ --dt-color-highcontrast-interactive-light: var(--dt-color-white);
157
+ --dt-color-highcontrast-interactive-form: var(--dt-color-black);
158
+ --dt-color-highcontrast-overlay: rgb(0,0,0,0.5);
159
+ --dt-color-highcontrast-support-error: var(--dt-color-red-dark-hc);
160
+ --dt-color-highcontrast-support-warning: var(--dt-color-yellow-dark-hc);
161
+ --dt-color-highcontrast-support-positive: var(--dt-color-green-dark-hc);
162
+ --dt-color-highcontrast-support-info: var(--dt-color-blue-dark-hc);
163
+ --dt-color-highcontrast-support-neutral: var(--dt-color-white);
164
+ --dt-color-highcontrast-support-error-02: var(--dt-color-white);
165
+ --dt-color-highcontrast-support-warning-02: var(--dt-color-white);
166
+ --dt-color-highcontrast-support-positive-02: var(--dt-color-white);
167
+ --dt-color-highcontrast-support-info-02: var(--dt-color-white);
168
+ --dt-color-highcontrast-support-info-inverse: var(--dt-color-blue-light-hc);
169
+ --dt-color-highcontrast-support-positive-inverse: var(--dt-color-green-light-hc);
170
+ --dt-color-highcontrast-support-brand-01: var(--dt-color-orange-30);
171
+ --dt-color-highcontrast-support-brand-02: var(--dt-color-white);
172
+ --dt-color-highcontrast-support-brand-03: var(--dt-color-white);
173
+ --dt-color-highcontrast-support-brand-04: var(--dt-color-white);
174
+ --dt-color-highcontrast-support-brand-05: var(--dt-color-white);
175
+ --dt-color-highcontrast-support-brand-06: var(--dt-color-white);
176
+ --dt-color-highcontrast-support-brand-07: var(--dt-color-white);
177
+ --dt-color-highcontrast-content-default: var(--dt-color-black);
178
+ --dt-color-highcontrast-content-subdued: var(--dt-color-black);
179
+ --dt-color-highcontrast-content-interactive-brand: var(--dt-color-orange-dark-hc);
180
+ --dt-color-highcontrast-content-interactive-light: var(--dt-color-white);
181
+ --dt-color-highcontrast-content-interactive-primary: var(--dt-color-white);
182
+ --dt-color-highcontrast-content-interactive-secondary: var(--dt-color-black);
183
+ --dt-color-highcontrast-content-interactive-tertiary: var(--dt-color-black);
184
+ --dt-color-highcontrast-content-interactive-subdued: var(--dt-color-black);
185
+ --dt-color-highcontrast-content-interactive-inverse: var(--dt-color-black);
186
+ --dt-color-highcontrast-content-interactive-dark: var(--dt-color-black);
187
+ --dt-color-highcontrast-content-interactive-error: var(--dt-color-red-dark-hc);
188
+ --dt-color-highcontrast-content-light: var(--dt-color-white);
189
+ --dt-color-highcontrast-content-inverse: var(--dt-color-white);
190
+ --dt-color-highcontrast-content-link: var(--dt-color-black);
191
+ --dt-color-highcontrast-content-link-distinct: var(--dt-color-blue);
192
+ --dt-color-highcontrast-content-link-light: var(--dt-color-white);
193
+ --dt-color-highcontrast-content-link-inverse: var(--dt-color-white);
194
+ --dt-color-highcontrast-content-link-visited: var(--dt-color-system-purple);
195
+ --dt-color-highcontrast-content-link-visited-inverse: var(--dt-color-system-purple-10);
196
+ --dt-color-highcontrast-content-error: var(--dt-color-red-dark-hc);
197
+ --dt-color-highcontrast-content-positive: var(--dt-color-green-dark-hc);
198
+ --dt-color-highcontrast-content-disabled: var(--dt-color-charcoal-50);
199
+ --dt-color-highcontrast-content-brand: var(--dt-color-orange-dark-hc);
200
+ --dt-color-highcontrast-hover-01: 4%;
201
+ --dt-color-highcontrast-hover-01-dark: 4%;
202
+ --dt-color-highcontrast-hover-02: 8%;
203
+ --dt-color-highcontrast-hover-02-light: 8%;
204
+ --dt-color-highcontrast-active-01: 12%;
205
+ --dt-color-highcontrast-active-01-dark: 12%;
206
+ --dt-color-highcontrast-active-02: 20%;
207
+ --dt-color-highcontrast-active-02-light: 20%;
208
+ --dt-color-highcontrast-focus-inner: var(--dt-color-white);
209
+ --dt-color-highcontrast-focus-outer: var(--dt-color-blue-70);
210
+ --dt-color-highcontrast-disabled-01: var(--dt-color-mozzarella-20);
211
+ --dt-color-highcontrast-disabled-01-inverse: var(--dt-color-mozzarella-80);
212
+ --dt-color-highcontrast-skeleton-01: var(--dt-color-mozzarella-10);
213
+ --dt-color-highcontrast-skeleton-02: var(--dt-color-mozzarella-20);
214
+ --dt-color-highcontrast-skeleton-03: var(--dt-color-white);
215
+ /* Dark color theme */
216
+ --dt-color-dark-background-default: var(--dt-color-mozzarella-100);
217
+ --dt-color-dark-background-subtle: var(--dt-color-mozzarella-80);
218
+ --dt-color-dark-background-dark: var(--dt-color-white);
219
+ --dt-color-dark-container-default: var(--dt-color-mozzarella-90);
220
+ --dt-color-dark-container-subtle: var(--dt-color-mozzarella-80);
221
+ --dt-color-dark-container-strong: var(--dt-color-mozzarella-70);
222
+ --dt-color-dark-container-dark: var(--dt-color-mozzarella-90);
223
+ --dt-color-dark-container-inverse: var(--dt-color-white);
224
+ --dt-color-dark-border-default: var(--dt-color-mozzarella-70);
225
+ --dt-color-dark-border-subtle: var(--dt-color-mozzarella-75);
226
+ --dt-color-dark-border-strong: var(--dt-color-mozzarella-60);
227
+ --dt-color-dark-border-inverse: var(--dt-color-mozzarella-20);
228
+ --dt-color-dark-divider-default: rgb(255,255,255,0.20);
229
+ --dt-color-dark-divider-inverse: rgb(0,0,0,0.08);
230
+ --dt-color-dark-interactive-brand: var(--dt-color-orange);
231
+ --dt-color-dark-interactive-primary: var(--dt-color-white);
232
+ --dt-color-dark-interactive-secondary: var(--dt-color-mozzarella-75);
233
+ --dt-color-dark-interactive-inverse: var(--dt-color-mozzarella-90);
234
+ --dt-color-dark-interactive-light: var(--dt-color-white);
235
+ --dt-color-dark-interactive-form: var(--dt-color-mozzarella-50);
236
+ --dt-color-dark-overlay: rgb(0,0,0,0.5);
237
+ --dt-color-dark-support-error: var(--dt-color-red);
238
+ --dt-color-dark-support-warning: var(--dt-color-yellow);
239
+ --dt-color-dark-support-positive: var(--dt-color-green-30);
240
+ --dt-color-dark-support-info: var(--dt-color-blue-30);
241
+ --dt-color-dark-support-neutral: var(--dt-color-mozzarella-100);
242
+ --dt-color-dark-support-error-02: var(--dt-color-red-90);
243
+ --dt-color-dark-support-warning-02: var(--dt-color-yellow-90);
244
+ --dt-color-dark-support-positive-02: var(--dt-color-green-90);
245
+ --dt-color-dark-support-info-02: var(--dt-color-blue-90);
246
+ --dt-color-dark-support-info-inverse: var(--dt-color-blue);
247
+ --dt-color-dark-support-positive-inverse: var(--dt-color-green);
248
+ --dt-color-dark-support-brand-01: var(--dt-color-orange-30);
249
+ --dt-color-dark-support-brand-02: var(--dt-color-orange-90);
250
+ --dt-color-dark-support-brand-03: var(--dt-color-blue-25);
251
+ --dt-color-dark-support-brand-04: var(--dt-color-red-25);
252
+ --dt-color-dark-support-brand-05: var(--dt-color-yellow);
253
+ --dt-color-dark-support-brand-06: var(--dt-color-purple);
254
+ --dt-color-dark-support-brand-07: var(--dt-color-orange-55);
255
+ --dt-color-dark-content-default: var(--dt-color-white);
256
+ --dt-color-dark-content-subdued: var(--dt-color-charcoal-30);
257
+ --dt-color-dark-content-interactive-brand: var(--dt-color-orange-30);
258
+ --dt-color-dark-content-interactive-light: var(--dt-color-white);
259
+ --dt-color-dark-content-interactive-primary: var(--dt-color-charcoal-80);
260
+ --dt-color-dark-content-interactive-secondary: var(--dt-color-white);
261
+ --dt-color-dark-content-interactive-tertiary: var(--dt-color-white);
262
+ --dt-color-dark-content-interactive-subdued: var(--dt-color-charcoal-40);
263
+ --dt-color-dark-content-interactive-inverse: var(--dt-color-white);
264
+ --dt-color-dark-content-interactive-dark: var(--dt-color-charcoal-80);
265
+ --dt-color-dark-content-interactive-error: var(--dt-color-red-30);
266
+ --dt-color-dark-content-light: var(--dt-color-white);
267
+ --dt-color-dark-content-inverse: var(--dt-color-charcoal-80);
268
+ --dt-color-dark-content-link: var(--dt-color-white);
269
+ --dt-color-dark-content-link-distinct: var(--dt-color-blue-30);
270
+ --dt-color-dark-content-link-light: var(--dt-color-white);
271
+ --dt-color-dark-content-link-inverse: var(--dt-color-charcoal-80);
272
+ --dt-color-dark-content-link-visited: var(--dt-color-system-purple-10);
273
+ --dt-color-dark-content-link-visited-inverse: var(--dt-color-system-purple);
274
+ --dt-color-dark-content-error: var(--dt-color-red-30);
275
+ --dt-color-dark-content-positive: var(--dt-color-green-30);
276
+ --dt-color-dark-content-disabled: var(--dt-color-charcoal-50);
277
+ --dt-color-dark-content-brand: var(--dt-color-orange-30);
278
+ --dt-color-dark-hover-01: 8%;
279
+ --dt-color-dark-hover-01-dark: 4%;
280
+ --dt-color-dark-hover-02: 4%;
281
+ --dt-color-dark-hover-02-light: 8%;
282
+ --dt-color-dark-active-01: 20%;
283
+ --dt-color-dark-active-01-dark: 12%;
284
+ --dt-color-dark-active-02: 12%;
285
+ --dt-color-dark-active-02-light: 20%;
286
+ --dt-color-dark-focus-inner: var(--dt-color-black);
287
+ --dt-color-dark-focus-outer: var(--dt-color-blue-30);
288
+ --dt-color-dark-disabled-01: var(--dt-color-mozzarella-80);
289
+ --dt-color-dark-disabled-01-inverse: var(--dt-color-mozzarella-20);
290
+ --dt-color-dark-skeleton-01: var(--dt-color-mozzarella-80);
291
+ --dt-color-dark-skeleton-02: var(--dt-color-mozzarella-70);
292
+ --dt-color-dark-skeleton-03: var(--dt-color-mozzarella-90);
293
+ /* Highcontrast-dark color theme */
294
+ --dt-color-highcontrast-dark-background-default: var(--dt-color-black);
295
+ --dt-color-highcontrast-dark-background-subtle: var(--dt-color-black);
296
+ --dt-color-highcontrast-dark-background-dark: var(--dt-color-black);
297
+ --dt-color-highcontrast-dark-container-default: var(--dt-color-black);
298
+ --dt-color-highcontrast-dark-container-subtle: var(--dt-color-black);
299
+ --dt-color-highcontrast-dark-container-strong: var(--dt-color-black);
300
+ --dt-color-highcontrast-dark-container-dark: var(--dt-color-black);
301
+ --dt-color-highcontrast-dark-container-inverse: var(--dt-color-white);
302
+ --dt-color-highcontrast-dark-border-default: var(--dt-color-white);
303
+ --dt-color-highcontrast-dark-border-subtle: var(--dt-color-white);
304
+ --dt-color-highcontrast-dark-border-strong: var(--dt-color-white);
305
+ --dt-color-highcontrast-dark-border-inverse: var(--dt-color-black);
306
+ --dt-color-highcontrast-dark-divider-default: var(--dt-color-white);
307
+ --dt-color-highcontrast-dark-divider-inverse: var(--dt-color-black);
308
+ --dt-color-highcontrast-dark-interactive-brand: var(--dt-color-orange-30);
309
+ --dt-color-highcontrast-dark-interactive-primary: var(--dt-color-white);
310
+ --dt-color-highcontrast-dark-interactive-secondary: var(--dt-color-black);
311
+ --dt-color-highcontrast-dark-interactive-inverse: var(--dt-color-black);
312
+ --dt-color-highcontrast-dark-interactive-light: var(--dt-color-white);
313
+ --dt-color-highcontrast-dark-interactive-form: var(--dt-color-white);
314
+ --dt-color-highcontrast-dark-overlay: rgb(0,0,0,0.5);
315
+ --dt-color-highcontrast-dark-support-error: var(--dt-color-red-light-hc);
316
+ --dt-color-highcontrast-dark-support-warning: var(--dt-color-yellow);
317
+ --dt-color-highcontrast-dark-support-positive: var(--dt-color-green-light-hc);
318
+ --dt-color-highcontrast-dark-support-info: var(--dt-color-blue-light-hc);
319
+ --dt-color-highcontrast-dark-support-neutral: var(--dt-color-black);
320
+ --dt-color-highcontrast-dark-support-error-02: var(--dt-color-black);
321
+ --dt-color-highcontrast-dark-support-warning-02: var(--dt-color-black);
322
+ --dt-color-highcontrast-dark-support-positive-02: var(--dt-color-black);
323
+ --dt-color-highcontrast-dark-support-info-02: var(--dt-color-black);
324
+ --dt-color-highcontrast-dark-support-info-inverse: var(--dt-color-blue-dark-hc);
325
+ --dt-color-highcontrast-dark-support-positive-inverse: var(--dt-color-green-dark-hc);
326
+ --dt-color-highcontrast-dark-support-brand-01: var(--dt-color-orange-30);
327
+ --dt-color-highcontrast-dark-support-brand-02: var(--dt-color-black);
328
+ --dt-color-highcontrast-dark-support-brand-03: var(--dt-color-black);
329
+ --dt-color-highcontrast-dark-support-brand-04: var(--dt-color-black);
330
+ --dt-color-highcontrast-dark-support-brand-05: var(--dt-color-black);
331
+ --dt-color-highcontrast-dark-support-brand-06: var(--dt-color-black);
332
+ --dt-color-highcontrast-dark-support-brand-07: var(--dt-color-black);
333
+ --dt-color-highcontrast-dark-content-default: var(--dt-color-white);
334
+ --dt-color-highcontrast-dark-content-subdued: var(--dt-color-white);
335
+ --dt-color-highcontrast-dark-content-interactive-brand: var(--dt-color-orange-30);
336
+ --dt-color-highcontrast-dark-content-interactive-light: var(--dt-color-white);
337
+ --dt-color-highcontrast-dark-content-interactive-primary: var(--dt-color-black);
338
+ --dt-color-highcontrast-dark-content-interactive-secondary: var(--dt-color-white);
339
+ --dt-color-highcontrast-dark-content-interactive-tertiary: var(--dt-color-white);
340
+ --dt-color-highcontrast-dark-content-interactive-subdued: var(--dt-color-white);
341
+ --dt-color-highcontrast-dark-content-interactive-inverse: var(--dt-color-white);
342
+ --dt-color-highcontrast-dark-content-interactive-dark: var(--dt-color-black);
343
+ --dt-color-highcontrast-dark-content-interactive-error: var(--dt-color-red-light-hc);
344
+ --dt-color-highcontrast-dark-content-light: var(--dt-color-white);
345
+ --dt-color-highcontrast-dark-content-inverse: var(--dt-color-black);
346
+ --dt-color-highcontrast-dark-content-link: var(--dt-color-white);
347
+ --dt-color-highcontrast-dark-content-link-distinct: var(--dt-color-blue-light-hc);
348
+ --dt-color-highcontrast-dark-content-link-light: var(--dt-color-white);
349
+ --dt-color-highcontrast-dark-content-link-inverse: var(--dt-color-black);
350
+ --dt-color-highcontrast-dark-content-link-visited: var(--dt-color-system-purple-10);
351
+ --dt-color-highcontrast-dark-content-link-visited-inverse: var(--dt-color-system-purple);
352
+ --dt-color-highcontrast-dark-content-error: var(--dt-color-red-light-hc);
353
+ --dt-color-highcontrast-dark-content-positive: var(--dt-color-green-light-hc);
354
+ --dt-color-highcontrast-dark-content-disabled: var(--dt-color-charcoal-50);
355
+ --dt-color-highcontrast-dark-content-brand: var(--dt-color-orange-30);
356
+ --dt-color-highcontrast-dark-hover-01: 8%;
357
+ --dt-color-highcontrast-dark-hover-01-dark: 4%;
358
+ --dt-color-highcontrast-dark-hover-02: 4%;
359
+ --dt-color-highcontrast-dark-hover-02-light: 8%;
360
+ --dt-color-highcontrast-dark-active-01: 20%;
361
+ --dt-color-highcontrast-dark-active-01-dark: 12%;
362
+ --dt-color-highcontrast-dark-active-02: 12%;
363
+ --dt-color-highcontrast-dark-active-02-light: 20%;
364
+ --dt-color-highcontrast-dark-focus-inner: var(--dt-color-black);
365
+ --dt-color-highcontrast-dark-focus-outer: var(--dt-color-blue-30);
366
+ --dt-color-highcontrast-dark-disabled-01: var(--dt-color-mozzarella-80);
367
+ --dt-color-highcontrast-dark-disabled-01-inverse: var(--dt-color-mozzarella-20);
368
+ --dt-color-highcontrast-dark-skeleton-01: var(--dt-color-mozzarella-80);
369
+ --dt-color-highcontrast-dark-skeleton-02: var(--dt-color-mozzarella-100);
370
+ --dt-color-highcontrast-dark-skeleton-03: var(--dt-color-mozzarella-90);
371
+ /* Global tokens - Font */
372
+ --dt-font-family-code: 'PTMono';
373
+ --dt-font-family-primary: 'JetSansDigital';
374
+ --dt-font-family-secondary: 'Arial';
375
+ --dt-font-paragraph-spacing-01: 16;
376
+ --dt-font-paragraph-spacing-02: 14;
377
+ --dt-font-paragraph-spacing-03: 12;
378
+ /* Size-12 font theme */
379
+ --dt-font-size-12: 12;
380
+ --dt-font-size-12-line-height: 16;
381
+ /* Size-14 font theme */
382
+ --dt-font-size-14: 14;
383
+ --dt-font-size-14-line-height: 20;
384
+ /* Size-16 font theme */
385
+ --dt-font-size-16: 16;
386
+ --dt-font-size-16-line-height: 24;
387
+ /* Size-19 font theme */
388
+ --dt-font-size-19: 19;
389
+ --dt-font-size-19-line-height: 28;
390
+ /* Size-20 font theme */
391
+ --dt-font-size-20: 20;
392
+ --dt-font-size-20-line-height: 28;
393
+ /* Size-24 font theme */
394
+ --dt-font-size-24: 24;
395
+ --dt-font-size-24-line-height: 32;
396
+ /* Size-28 font theme */
397
+ --dt-font-size-28: 28;
398
+ --dt-font-size-28-line-height: 36;
399
+ /* Size-32 font theme */
400
+ --dt-font-size-32: 32;
401
+ --dt-font-size-32-line-height: 40;
402
+ /* Size-48 font theme */
403
+ --dt-font-size-48: 48;
404
+ --dt-font-size-48-line-height: 56;
405
+ --dt-font-style-underline: underline;
406
+ --dt-font-weight-bold: 700;
407
+ --dt-font-weight-extrabold: 800;
408
+ --dt-font-weight-regular: 400;
409
+ /* Alias tokens - Font */
410
+ /* Heading-s font theme */
411
+ --dt-font-heading-s-size--wide: var(--dt-font-size-20);
412
+ --dt-font-heading-s-size--narrow: var(--dt-font-size-16);
413
+ --dt-font-heading-s-family: var(--dt-font-family-primary);
414
+ --dt-font-heading-s-weight: var(--dt-font-weight-extrabold);
415
+ --dt-font-heading-s-line-height--wide: var(--dt-font-size-20-line-height);
416
+ --dt-font-heading-s-line-height--narrow: var(--dt-font-size-16-line-height);
417
+ /* Heading-m font theme */
418
+ --dt-font-heading-m-size--wide: var(--dt-font-size-24);
419
+ --dt-font-heading-m-size--narrow: var(--dt-font-size-20);
420
+ --dt-font-heading-m-family: var(--dt-font-family-primary);
421
+ --dt-font-heading-m-weight: var(--dt-font-weight-extrabold);
422
+ --dt-font-heading-m-line-height--wide: var(--dt-font-size-24-line-height);
423
+ --dt-font-heading-m-line-height--narrow: var(--dt-font-size-20-line-height);
424
+ /* Heading-l font theme */
425
+ --dt-font-heading-l-size--wide: var(--dt-font-size-28);
426
+ --dt-font-heading-l-size--narrow: var(--dt-font-size-24);
427
+ --dt-font-heading-l-family: var(--dt-font-family-primary);
428
+ --dt-font-heading-l-weight: var(--dt-font-weight-extrabold);
429
+ --dt-font-heading-l-line-height--wide: var(--dt-font-size-28-line-height);
430
+ --dt-font-heading-l-line-height--narrow: var(--dt-font-size-24-line-height);
431
+ /* Heading-xl font theme */
432
+ --dt-font-heading-xl-size--wide: var(--dt-font-size-32);
433
+ --dt-font-heading-xl-size--narrow: var(--dt-font-size-28);
434
+ --dt-font-heading-xl-family: var(--dt-font-family-primary);
435
+ --dt-font-heading-xl-weight: var(--dt-font-weight-extrabold);
436
+ --dt-font-heading-xl-line-height--wide: var(--dt-font-size-32-line-height);
437
+ --dt-font-heading-xl-line-height--narrow: var(--dt-font-size-28-line-height);
438
+ /* Heading-xxl font theme */
439
+ --dt-font-heading-xxl-size--wide: var(--dt-font-size-48);
440
+ --dt-font-heading-xxl-size--narrow: var(--dt-font-size-32);
441
+ --dt-font-heading-xxl-family: var(--dt-font-family-primary);
442
+ --dt-font-heading-xxl-weight: var(--dt-font-weight-extrabold);
443
+ --dt-font-heading-xxl-line-height--wide: var(--dt-font-size-48-line-height);
444
+ --dt-font-heading-xxl-line-height--narrow: var(--dt-font-size-32-line-height);
445
+ /* Subheading-s font theme */
446
+ --dt-font-subheading-s-size--wide: var(--dt-font-size-20);
447
+ --dt-font-subheading-s-size--narrow: var(--dt-font-size-16);
448
+ --dt-font-subheading-s-family: var(--dt-font-family-primary);
449
+ --dt-font-subheading-s-weight: var(--dt-font-weight-regular);
450
+ --dt-font-subheading-s-line-height--wide: var(--dt-font-size-20-line-height);
451
+ --dt-font-subheading-s-line-height--narrow: var(--dt-font-size-16-line-height);
452
+ /* Subheading-l font theme */
453
+ --dt-font-subheading-l-size--wide: var(--dt-font-size-24);
454
+ --dt-font-subheading-l-size--narrow: var(--dt-font-size-20);
455
+ --dt-font-subheading-l-family: var(--dt-font-family-primary);
456
+ --dt-font-subheading-l-weight: var(--dt-font-weight-regular);
457
+ --dt-font-subheading-l-line-height--wide: var(--dt-font-size-24-line-height);
458
+ --dt-font-subheading-l-line-height--narrow: var(--dt-font-size-20-line-height);
459
+ /* Interactive-xs font theme */
460
+ --dt-font-interactive-xs-size: var(--dt-font-size-14);
461
+ --dt-font-interactive-xs-family: var(--dt-font-family-primary);
462
+ --dt-font-interactive-xs-weight: var(--dt-font-weight-bold);
463
+ --dt-font-interactive-xs-line-height: var(--dt-font-size-14-line-height);
464
+ /* Interactive-s font theme */
465
+ --dt-font-interactive-s-size: var(--dt-font-size-16);
466
+ --dt-font-interactive-s-family: var(--dt-font-family-primary);
467
+ --dt-font-interactive-s-weight: var(--dt-font-weight-bold);
468
+ --dt-font-interactive-s-line-height: var(--dt-font-size-16-line-height);
469
+ /* Interactive-m font theme */
470
+ --dt-font-interactive-m-size: var(--dt-font-size-19);
471
+ --dt-font-interactive-m-family: var(--dt-font-family-primary);
472
+ --dt-font-interactive-m-weight: var(--dt-font-weight-bold);
473
+ --dt-font-interactive-m-line-height: var(--dt-font-size-19-line-height);
474
+ /* Interactive-l font theme */
475
+ --dt-font-interactive-l-size: var(--dt-font-size-20);
476
+ --dt-font-interactive-l-family: var(--dt-font-family-primary);
477
+ --dt-font-interactive-l-weight: var(--dt-font-weight-bold);
478
+ --dt-font-interactive-l-line-height: var(--dt-font-size-20-line-height);
479
+ /* Body-s font theme */
480
+ --dt-font-body-s-size: var(--dt-font-size-14);
481
+ --dt-font-body-s-family: var(--dt-font-family-primary);
482
+ --dt-font-body-s-weight: var(--dt-font-weight-regular);
483
+ --dt-font-body-s-paragraph: var(--dt-font-paragraph-spacing-02);
484
+ --dt-font-body-s-line-height: var(--dt-font-size-14-line-height);
485
+ /* Body-s-link font theme */
486
+ --dt-font-body-s-link-size: var(--dt-font-size-14);
487
+ --dt-font-body-s-link-family: var(--dt-font-family-primary);
488
+ --dt-font-body-s-link-weight: var(--dt-font-weight-regular);
489
+ --dt-font-body-s-link-paragraph: var(--dt-font-paragraph-spacing-02);
490
+ --dt-font-body-s-link-text-decoration: var(--dt-font-style-underline);
491
+ --dt-font-body-s-link-line-height: var(--dt-font-size-14-line-height);
492
+ /* Body-l font theme */
493
+ --dt-font-body-l-size: var(--dt-font-size-16);
494
+ --dt-font-body-l-family: var(--dt-font-family-primary);
495
+ --dt-font-body-l-weight: var(--dt-font-weight-regular);
496
+ --dt-font-body-l-paragraph: var(--dt-font-paragraph-spacing-01);
497
+ --dt-font-body-l-line-height: var(--dt-font-size-16-line-height);
498
+ /* Body-l-link font theme */
499
+ --dt-font-body-l-link-size: var(--dt-font-size-16);
500
+ --dt-font-body-l-link-family: var(--dt-font-family-primary);
501
+ --dt-font-body-l-link-weight: var(--dt-font-weight-regular);
502
+ --dt-font-body-l-link-paragraph: var(--dt-font-paragraph-spacing-01);
503
+ --dt-font-body-l-link-text-decoration: var(--dt-font-style-underline);
504
+ --dt-font-body-l-link-line-height: var(--dt-font-size-16-line-height);
505
+ /* Body-strong-s font theme */
506
+ --dt-font-body-strong-s-size: var(--dt-font-size-14);
507
+ --dt-font-body-strong-s-family: var(--dt-font-family-primary);
508
+ --dt-font-body-strong-s-weight: var(--dt-font-weight-bold);
509
+ --dt-font-body-strong-s-paragraph: var(--dt-font-paragraph-spacing-02);
510
+ --dt-font-body-strong-s-line-height: var(--dt-font-size-14-line-height);
511
+ /* Body-strong-s-link font theme */
512
+ --dt-font-body-strong-s-link-size: var(--dt-font-size-14);
513
+ --dt-font-body-strong-s-link-family: var(--dt-font-family-primary);
514
+ --dt-font-body-strong-s-link-weight: var(--dt-font-weight-bold);
515
+ --dt-font-body-strong-s-link-paragraph: var(--dt-font-paragraph-spacing-02);
516
+ --dt-font-body-strong-s-link-text-decoration: var(--dt-font-style-underline);
517
+ --dt-font-body-strong-s-link-line-height: var(--dt-font-size-14-line-height);
518
+ /* Body-strong-l font theme */
519
+ --dt-font-body-strong-l-size: var(--dt-font-size-16);
520
+ --dt-font-body-strong-l-family: var(--dt-font-family-primary);
521
+ --dt-font-body-strong-l-weight: var(--dt-font-weight-bold);
522
+ --dt-font-body-strong-l-paragraph: var(--dt-font-paragraph-spacing-01);
523
+ --dt-font-body-strong-l-line-height: var(--dt-font-size-16-line-height);
524
+ /* Body-strong-l-link font theme */
525
+ --dt-font-body-strong-l-link-size: var(--dt-font-size-16);
526
+ --dt-font-body-strong-l-link-family: var(--dt-font-family-primary);
527
+ --dt-font-body-strong-l-link-weight: var(--dt-font-weight-bold);
528
+ --dt-font-body-strong-l-link-paragraph: var(--dt-font-paragraph-spacing-01);
529
+ --dt-font-body-strong-l-link-text-decoration: var(--dt-font-style-underline);
530
+ --dt-font-body-strong-l-link-line-height: var(--dt-font-size-16-line-height);
531
+ /* Caption font theme */
532
+ --dt-font-caption-size: var(--dt-font-size-12);
533
+ --dt-font-caption-family: var(--dt-font-family-primary);
534
+ --dt-font-caption-weight: var(--dt-font-weight-regular);
535
+ --dt-font-caption-paragraph: var(--dt-font-paragraph-spacing-03);
536
+ --dt-font-caption-line-height: var(--dt-font-size-12-line-height);
537
+ /* Caption-link font theme */
538
+ --dt-font-caption-link-size: var(--dt-font-size-12);
539
+ --dt-font-caption-link-family: var(--dt-font-family-primary);
540
+ --dt-font-caption-link-weight: var(--dt-font-weight-regular);
541
+ --dt-font-caption-link-paragraph: var(--dt-font-paragraph-spacing-03);
542
+ --dt-font-caption-link-text-decoration: var(--dt-font-style-underline);
543
+ --dt-font-caption-link-line-height: var(--dt-font-size-12-line-height);
544
+ /* Caption-strong font theme */
545
+ --dt-font-caption-strong-size: var(--dt-font-size-12);
546
+ --dt-font-caption-strong-family: var(--dt-font-family-primary);
547
+ --dt-font-caption-strong-weight: var(--dt-font-weight-bold);
548
+ --dt-font-caption-strong-paragraph: var(--dt-font-paragraph-spacing-03);
549
+ --dt-font-caption-strong-line-height: var(--dt-font-size-12-line-height);
550
+ /* Caption-strong-link font theme */
551
+ --dt-font-caption-strong-link-size: var(--dt-font-size-12);
552
+ --dt-font-caption-strong-link-family: var(--dt-font-family-primary);
553
+ --dt-font-caption-strong-link-weight: var(--dt-font-weight-bold);
554
+ --dt-font-caption-strong-link-paragraph: var(--dt-font-paragraph-spacing-03);
555
+ --dt-font-caption-strong-link-text-decoration: var(--dt-font-style-underline);
556
+ --dt-font-caption-strong-link-line-height: var(--dt-font-size-12-line-height);
557
+ /* Global tokens - Radius */
558
+ --dt-radius-00: 0;
559
+ --dt-radius-02: 4px;
560
+ --dt-radius-03: 8px;
561
+ --dt-radius-04: 12px;
562
+ --dt-radius-05: 16px;
563
+ --dt-radius-06: 50rem;
564
+ /* Alias tokens - Radius */
565
+ --dt-radius-rounded-none: var(--dt-radius-00);
566
+ --dt-radius-rounded-a: var(--dt-radius-02);
567
+ --dt-radius-rounded-b: var(--dt-radius-03);
568
+ --dt-radius-rounded-c: var(--dt-radius-04);
569
+ --dt-radius-rounded-d: var(--dt-radius-05);
570
+ --dt-radius-rounded-e: var(--dt-radius-06);
571
+ /* Global tokens - Spacing */
572
+ --dt-spacing-10: 80px;
573
+ --dt-spacing-00: 0;
574
+ --dt-spacing-01: 4px;
575
+ --dt-spacing-02: 8px;
576
+ --dt-spacing-03: 12px;
577
+ --dt-spacing-04: 16px;
578
+ --dt-spacing-05: 24px;
579
+ --dt-spacing-06: 32px;
580
+ --dt-spacing-07: 40px;
581
+ --dt-spacing-08: 56px;
582
+ --dt-spacing-09: 64px;
583
+ /* Alias tokens - Spacing */
584
+ --dt-spacing-none: var(--dt-spacing-00);
585
+ --dt-spacing-a: var(--dt-spacing-01);
586
+ --dt-spacing-b: var(--dt-spacing-02);
587
+ --dt-spacing-c: var(--dt-spacing-03);
588
+ --dt-spacing-d: var(--dt-spacing-04);
589
+ --dt-spacing-e: var(--dt-spacing-05);
590
+ --dt-spacing-f: var(--dt-spacing-06);
591
+ --dt-spacing-g: var(--dt-spacing-07);
592
+ --dt-spacing-h: var(--dt-spacing-08);
593
+ --dt-spacing-i: var(--dt-spacing-09);
594
+ --dt-spacing-j: var(--dt-spacing-10);
595
+ /* Global tokens - Elevation */
596
+ --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);
597
+ --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);
598
+ --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);
599
+ --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);
600
+ --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);
601
+ --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);
602
+ --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);
603
+ --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);
604
+ --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);
605
+ --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);
606
+ /* Alias tokens - Elevation */
607
+ --dt-elevation-01: var(--dt-elevation-box-shadow-01);
608
+ --dt-elevation-02: var(--dt-elevation-box-shadow-02);
609
+ --dt-elevation-03: var(--dt-elevation-box-shadow-03);
610
+ --dt-elevation-04: var(--dt-elevation-box-shadow-04);
611
+ --dt-elevation-05: var(--dt-elevation-box-shadow-05);
612
+ --dt-elevation-inverse-01: var(--dt-elevation-box-shadow-06);
613
+ --dt-elevation-inverse-02: var(--dt-elevation-box-shadow-07);
614
+ --dt-elevation-inverse-03: var(--dt-elevation-box-shadow-08);
615
+ --dt-elevation-inverse-04: var(--dt-elevation-box-shadow-09);
616
+ --dt-elevation-inverse-05: var(--dt-elevation-box-shadow-10);
617
+ --dt-elevation-dark-01: var(--dt-elevation-box-shadow-06);
618
+ --dt-elevation-dark-02: var(--dt-elevation-box-shadow-07);
619
+ --dt-elevation-dark-03: var(--dt-elevation-box-shadow-08);
620
+ --dt-elevation-dark-04: var(--dt-elevation-box-shadow-09);
621
+ --dt-elevation-dark-05: var(--dt-elevation-box-shadow-10);
622
+ --dt-elevation-dark-inverse-01: var(--dt-elevation-box-shadow-01);
623
+ --dt-elevation-dark-inverse-02: var(--dt-elevation-box-shadow-02);
624
+ --dt-elevation-dark-inverse-03: var(--dt-elevation-box-shadow-03);
625
+ --dt-elevation-dark-inverse-04: var(--dt-elevation-box-shadow-04);
626
+ --dt-elevation-dark-inverse-05: var(--dt-elevation-box-shadow-05);
627
+ }
628
+ :root, ::backdrop {
629
+ --dt-color-black-h: 0;
630
+ --dt-color-black-s: 0%;
631
+ --dt-color-black-l: 0%;
632
+ --dt-color-blue-h: 215;
633
+ --dt-color-blue-s: 83.6%;
634
+ --dt-color-blue-l: 43.1%;
635
+ --dt-color-blue-10-h: 196;
636
+ --dt-color-blue-10-s: 60%;
637
+ --dt-color-blue-10-l: 95.1%;
638
+ --dt-color-blue-25-h: 188;
639
+ --dt-color-blue-25-s: 30.5%;
640
+ --dt-color-blue-25-l: 81.4%;
641
+ --dt-color-blue-30-h: 215;
642
+ --dt-color-blue-30-s: 87.3%;
643
+ --dt-color-blue-30-l: 72.2%;
644
+ --dt-color-blue-70-h: 215;
645
+ --dt-color-blue-70-s: 90.1%;
646
+ --dt-color-blue-70-l: 35.5%;
647
+ --dt-color-blue-90-h: 196;
648
+ --dt-color-blue-90-s: 78.7%;
649
+ --dt-color-blue-90-l: 14.7%;
650
+ --dt-color-blue-dark-hc-h: 215;
651
+ --dt-color-blue-dark-hc-s: 83.7%;
652
+ --dt-color-blue-dark-hc-l: 38.4%;
653
+ --dt-color-blue-light-hc-h: 214;
654
+ --dt-color-blue-light-hc-s: 98.3%;
655
+ --dt-color-blue-light-hc-l: 77.1%;
656
+ --dt-color-charcoal-30-h: 200;
657
+ --dt-color-charcoal-30-s: 3.9%;
658
+ --dt-color-charcoal-30-l: 84.9%;
659
+ --dt-color-charcoal-40-h: 189;
660
+ --dt-color-charcoal-40-s: 5.1%;
661
+ --dt-color-charcoal-40-l: 73.1%;
662
+ --dt-color-charcoal-50-h: 188;
663
+ --dt-color-charcoal-50-s: 7%;
664
+ --dt-color-charcoal-50-l: 57.8%;
665
+ --dt-color-charcoal-60-h: 190;
666
+ --dt-color-charcoal-60-s: 11%;
667
+ --dt-color-charcoal-60-l: 41%;
668
+ --dt-color-charcoal-70-h: 189;
669
+ --dt-color-charcoal-70-s: 13.7%;
670
+ --dt-color-charcoal-70-l: 27.3%;
671
+ --dt-color-charcoal-75-h: 188;
672
+ --dt-color-charcoal-75-s: 13.5%;
673
+ --dt-color-charcoal-75-l: 21.8%;
674
+ --dt-color-charcoal-80-h: 190;
675
+ --dt-color-charcoal-80-s: 14.3%;
676
+ --dt-color-charcoal-80-l: 16.5%;
677
+ --dt-color-green-h: 148;
678
+ --dt-color-green-s: 98.4%;
679
+ --dt-color-green-l: 24.1%;
680
+ --dt-color-green-10-h: 149;
681
+ --dt-color-green-10-s: 67.7%;
682
+ --dt-color-green-10-l: 93.9%;
683
+ --dt-color-green-30-h: 146;
684
+ --dt-color-green-30-s: 69.8%;
685
+ --dt-color-green-30-l: 44.1%;
686
+ --dt-color-green-90-h: 150;
687
+ --dt-color-green-90-s: 23.5%;
688
+ --dt-color-green-90-l: 20%;
689
+ --dt-color-green-dark-hc-h: 141;
690
+ --dt-color-green-dark-hc-s: 60.6%;
691
+ --dt-color-green-dark-hc-l: 24.9%;
692
+ --dt-color-green-light-hc-h: 145;
693
+ --dt-color-green-light-hc-s: 69.6%;
694
+ --dt-color-green-light-hc-l: 49%;
695
+ --dt-color-mozzarella-10-h: 30;
696
+ --dt-color-mozzarella-10-s: 16.7%;
697
+ --dt-color-mozzarella-10-l: 95.3%;
698
+ --dt-color-mozzarella-100-h: 60;
699
+ --dt-color-mozzarella-100-s: 2%;
700
+ --dt-color-mozzarella-100-l: 10%;
701
+ --dt-color-mozzarella-20-h: 36;
702
+ --dt-color-mozzarella-20-s: 13.5%;
703
+ --dt-color-mozzarella-20-l: 92.7%;
704
+ --dt-color-mozzarella-30-h: 30;
705
+ --dt-color-mozzarella-30-s: 5.3%;
706
+ --dt-color-mozzarella-30-l: 85.1%;
707
+ --dt-color-mozzarella-5-h: 0;
708
+ --dt-color-mozzarella-5-s: 0%;
709
+ --dt-color-mozzarella-5-l: 98.8%;
710
+ --dt-color-mozzarella-50-h: 30;
711
+ --dt-color-mozzarella-50-s: 2%;
712
+ --dt-color-mozzarella-50-l: 61.2%;
713
+ --dt-color-mozzarella-60-h: 40;
714
+ --dt-color-mozzarella-60-s: 1.3%;
715
+ --dt-color-mozzarella-60-l: 46.9%;
716
+ --dt-color-mozzarella-70-h: 30;
717
+ --dt-color-mozzarella-70-s: 1.2%;
718
+ --dt-color-mozzarella-70-l: 33.7%;
719
+ --dt-color-mozzarella-75-h: 30;
720
+ --dt-color-mozzarella-75-s: 1.4%;
721
+ --dt-color-mozzarella-75-l: 28.2%;
722
+ --dt-color-mozzarella-80-h: 30;
723
+ --dt-color-mozzarella-80-s: 1.7%;
724
+ --dt-color-mozzarella-80-l: 22.7%;
725
+ --dt-color-mozzarella-90-h: 0;
726
+ --dt-color-mozzarella-90-s: 0%;
727
+ --dt-color-mozzarella-90-l: 14.9%;
728
+ --dt-color-orange-h: 25;
729
+ --dt-color-orange-s: 96%;
730
+ --dt-color-orange-l: 48.6%;
731
+ --dt-color-orange-10-h: 31;
732
+ --dt-color-orange-10-s: 100%;
733
+ --dt-color-orange-10-l: 91.6%;
734
+ --dt-color-orange-30-h: 30;
735
+ --dt-color-orange-30-s: 100%;
736
+ --dt-color-orange-30-l: 50%;
737
+ --dt-color-orange-55-h: 16;
738
+ --dt-color-orange-55-s: 92.8%;
739
+ --dt-color-orange-55-l: 56.3%;
740
+ --dt-color-orange-90-h: 30;
741
+ --dt-color-orange-90-s: 35.4%;
742
+ --dt-color-orange-90-l: 18.8%;
743
+ --dt-color-orange-dark-hc-h: 18;
744
+ --dt-color-orange-dark-hc-s: 100%;
745
+ --dt-color-orange-dark-hc-l: 32%;
746
+ --dt-color-purple-h: 300;
747
+ --dt-color-purple-s: 19.7%;
748
+ --dt-color-purple-l: 29.8%;
749
+ --dt-color-purple-light-hc-h: 300;
750
+ --dt-color-purple-light-hc-s: 19.8%;
751
+ --dt-color-purple-light-hc-l: 66.3%;
752
+ --dt-color-red-h: 351;
753
+ --dt-color-red-s: 95.4%;
754
+ --dt-color-red-l: 42.7%;
755
+ --dt-color-red-10-h: 357;
756
+ --dt-color-red-10-s: 100%;
757
+ --dt-color-red-10-l: 95.7%;
758
+ --dt-color-red-25-h: 352;
759
+ --dt-color-red-25-s: 74.5%;
760
+ --dt-color-red-25-l: 80%;
761
+ --dt-color-red-30-h: 351;
762
+ --dt-color-red-30-s: 79.9%;
763
+ --dt-color-red-30-l: 62.9%;
764
+ --dt-color-red-90-h: 352;
765
+ --dt-color-red-90-s: 41.7%;
766
+ --dt-color-red-90-l: 20.2%;
767
+ --dt-color-red-dark-hc-h: 350;
768
+ --dt-color-red-dark-hc-s: 95.2%;
769
+ --dt-color-red-dark-hc-l: 32.9%;
770
+ --dt-color-red-light-hc-h: 357;
771
+ --dt-color-red-light-hc-s: 100%;
772
+ --dt-color-red-light-hc-l: 73.9%;
773
+ --dt-color-system-purple-h: 300;
774
+ --dt-color-system-purple-s: 100%;
775
+ --dt-color-system-purple-l: 25.1%;
776
+ --dt-color-system-purple-10-h: 272;
777
+ --dt-color-system-purple-10-s: 90.2%;
778
+ --dt-color-system-purple-10-l: 75.9%;
779
+ --dt-color-white-h: 0;
780
+ --dt-color-white-s: 0%;
781
+ --dt-color-white-l: 100%;
782
+ --dt-color-yellow-h: 43;
783
+ --dt-color-yellow-s: 90.9%;
784
+ --dt-color-yellow-l: 61.4%;
785
+ --dt-color-yellow-10-h: 49;
786
+ --dt-color-yellow-10-s: 100%;
787
+ --dt-color-yellow-10-l: 93.7%;
788
+ --dt-color-yellow-90-h: 57;
789
+ --dt-color-yellow-90-s: 19.3%;
790
+ --dt-color-yellow-90-l: 23.3%;
791
+ --dt-color-yellow-dark-hc-h: 41;
792
+ --dt-color-yellow-dark-hc-s: 35.9%;
793
+ --dt-color-yellow-dark-hc-l: 30%;
794
+ --dt-color-background-default-h: var(--dt-color-mozzarella-5-h);
795
+ --dt-color-background-default-s: var(--dt-color-mozzarella-5-s);
796
+ --dt-color-background-default-l: var(--dt-color-mozzarella-5-l);
797
+ --dt-color-background-subtle-h: var(--dt-color-mozzarella-10-h);
798
+ --dt-color-background-subtle-s: var(--dt-color-mozzarella-10-s);
799
+ --dt-color-background-subtle-l: var(--dt-color-mozzarella-10-l);
800
+ --dt-color-background-dark-h: var(--dt-color-mozzarella-100-h);
801
+ --dt-color-background-dark-s: var(--dt-color-mozzarella-100-s);
802
+ --dt-color-background-dark-l: var(--dt-color-mozzarella-100-l);
803
+ --dt-color-container-default-h: var(--dt-color-white-h);
804
+ --dt-color-container-default-s: var(--dt-color-white-s);
805
+ --dt-color-container-default-l: var(--dt-color-white-l);
806
+ --dt-color-container-subtle-h: var(--dt-color-mozzarella-10-h);
807
+ --dt-color-container-subtle-s: var(--dt-color-mozzarella-10-s);
808
+ --dt-color-container-subtle-l: var(--dt-color-mozzarella-10-l);
809
+ --dt-color-container-strong-h: var(--dt-color-mozzarella-20-h);
810
+ --dt-color-container-strong-s: var(--dt-color-mozzarella-20-s);
811
+ --dt-color-container-strong-l: var(--dt-color-mozzarella-20-l);
812
+ --dt-color-container-dark-h: var(--dt-color-mozzarella-90-h);
813
+ --dt-color-container-dark-s: var(--dt-color-mozzarella-90-s);
814
+ --dt-color-container-dark-l: var(--dt-color-mozzarella-90-l);
815
+ --dt-color-container-inverse-h: var(--dt-color-mozzarella-90-h);
816
+ --dt-color-container-inverse-s: var(--dt-color-mozzarella-90-s);
817
+ --dt-color-container-inverse-l: var(--dt-color-mozzarella-90-l);
818
+ --dt-color-border-default-h: var(--dt-color-mozzarella-20-h);
819
+ --dt-color-border-default-s: var(--dt-color-mozzarella-20-s);
820
+ --dt-color-border-default-l: var(--dt-color-mozzarella-20-l);
821
+ --dt-color-border-subtle-h: var(--dt-color-mozzarella-10-h);
822
+ --dt-color-border-subtle-s: var(--dt-color-mozzarella-10-s);
823
+ --dt-color-border-subtle-l: var(--dt-color-mozzarella-10-l);
824
+ --dt-color-border-strong-h: var(--dt-color-mozzarella-30-h);
825
+ --dt-color-border-strong-s: var(--dt-color-mozzarella-30-s);
826
+ --dt-color-border-strong-l: var(--dt-color-mozzarella-30-l);
827
+ --dt-color-border-inverse-h: var(--dt-color-mozzarella-70-h);
828
+ --dt-color-border-inverse-s: var(--dt-color-mozzarella-70-s);
829
+ --dt-color-border-inverse-l: var(--dt-color-mozzarella-70-l);
830
+ --dt-color-interactive-brand-h: var(--dt-color-orange-h);
831
+ --dt-color-interactive-brand-s: var(--dt-color-orange-s);
832
+ --dt-color-interactive-brand-l: var(--dt-color-orange-l);
833
+ --dt-color-interactive-primary-h: var(--dt-color-mozzarella-90-h);
834
+ --dt-color-interactive-primary-s: var(--dt-color-mozzarella-90-s);
835
+ --dt-color-interactive-primary-l: var(--dt-color-mozzarella-90-l);
836
+ --dt-color-interactive-secondary-h: var(--dt-color-mozzarella-10-h);
837
+ --dt-color-interactive-secondary-s: var(--dt-color-mozzarella-10-s);
838
+ --dt-color-interactive-secondary-l: var(--dt-color-mozzarella-10-l);
839
+ --dt-color-interactive-inverse-h: var(--dt-color-white-h);
840
+ --dt-color-interactive-inverse-s: var(--dt-color-white-s);
841
+ --dt-color-interactive-inverse-l: var(--dt-color-white-l);
842
+ --dt-color-interactive-light-h: var(--dt-color-white-h);
843
+ --dt-color-interactive-light-s: var(--dt-color-white-s);
844
+ --dt-color-interactive-light-l: var(--dt-color-white-l);
845
+ --dt-color-interactive-form-h: var(--dt-color-mozzarella-60-h);
846
+ --dt-color-interactive-form-s: var(--dt-color-mozzarella-60-s);
847
+ --dt-color-interactive-form-l: var(--dt-color-mozzarella-60-l);
848
+ --dt-color-support-error-h: var(--dt-color-red-h);
849
+ --dt-color-support-error-s: var(--dt-color-red-s);
850
+ --dt-color-support-error-l: var(--dt-color-red-l);
851
+ --dt-color-support-warning-h: var(--dt-color-yellow-h);
852
+ --dt-color-support-warning-s: var(--dt-color-yellow-s);
853
+ --dt-color-support-warning-l: var(--dt-color-yellow-l);
854
+ --dt-color-support-positive-h: var(--dt-color-green-h);
855
+ --dt-color-support-positive-s: var(--dt-color-green-s);
856
+ --dt-color-support-positive-l: var(--dt-color-green-l);
857
+ --dt-color-support-info-h: var(--dt-color-blue-h);
858
+ --dt-color-support-info-s: var(--dt-color-blue-s);
859
+ --dt-color-support-info-l: var(--dt-color-blue-l);
860
+ --dt-color-support-neutral-h: var(--dt-color-mozzarella-20-h);
861
+ --dt-color-support-neutral-s: var(--dt-color-mozzarella-20-s);
862
+ --dt-color-support-neutral-l: var(--dt-color-mozzarella-20-l);
863
+ --dt-color-support-error-02-h: var(--dt-color-red-10-h);
864
+ --dt-color-support-error-02-s: var(--dt-color-red-10-s);
865
+ --dt-color-support-error-02-l: var(--dt-color-red-10-l);
866
+ --dt-color-support-warning-02-h: var(--dt-color-yellow-10-h);
867
+ --dt-color-support-warning-02-s: var(--dt-color-yellow-10-s);
868
+ --dt-color-support-warning-02-l: var(--dt-color-yellow-10-l);
869
+ --dt-color-support-positive-02-h: var(--dt-color-green-10-h);
870
+ --dt-color-support-positive-02-s: var(--dt-color-green-10-s);
871
+ --dt-color-support-positive-02-l: var(--dt-color-green-10-l);
872
+ --dt-color-support-info-02-h: var(--dt-color-blue-10-h);
873
+ --dt-color-support-info-02-s: var(--dt-color-blue-10-s);
874
+ --dt-color-support-info-02-l: var(--dt-color-blue-10-l);
875
+ --dt-color-support-info-inverse-h: var(--dt-color-blue-30-h);
876
+ --dt-color-support-info-inverse-s: var(--dt-color-blue-30-s);
877
+ --dt-color-support-info-inverse-l: var(--dt-color-blue-30-l);
878
+ --dt-color-support-positive-inverse-h: var(--dt-color-green-30-h);
879
+ --dt-color-support-positive-inverse-s: var(--dt-color-green-30-s);
880
+ --dt-color-support-positive-inverse-l: var(--dt-color-green-30-l);
881
+ --dt-color-support-brand-01-h: var(--dt-color-orange-30-h);
882
+ --dt-color-support-brand-01-s: var(--dt-color-orange-30-s);
883
+ --dt-color-support-brand-01-l: var(--dt-color-orange-30-l);
884
+ --dt-color-support-brand-02-h: var(--dt-color-orange-10-h);
885
+ --dt-color-support-brand-02-s: var(--dt-color-orange-10-s);
886
+ --dt-color-support-brand-02-l: var(--dt-color-orange-10-l);
887
+ --dt-color-support-brand-03-h: var(--dt-color-blue-25-h);
888
+ --dt-color-support-brand-03-s: var(--dt-color-blue-25-s);
889
+ --dt-color-support-brand-03-l: var(--dt-color-blue-25-l);
890
+ --dt-color-support-brand-04-h: var(--dt-color-red-25-h);
891
+ --dt-color-support-brand-04-s: var(--dt-color-red-25-s);
892
+ --dt-color-support-brand-04-l: var(--dt-color-red-25-l);
893
+ --dt-color-support-brand-05-h: var(--dt-color-yellow-h);
894
+ --dt-color-support-brand-05-s: var(--dt-color-yellow-s);
895
+ --dt-color-support-brand-05-l: var(--dt-color-yellow-l);
896
+ --dt-color-support-brand-06-h: var(--dt-color-purple-h);
897
+ --dt-color-support-brand-06-s: var(--dt-color-purple-s);
898
+ --dt-color-support-brand-06-l: var(--dt-color-purple-l);
899
+ --dt-color-support-brand-07-h: var(--dt-color-orange-55-h);
900
+ --dt-color-support-brand-07-s: var(--dt-color-orange-55-s);
901
+ --dt-color-support-brand-07-l: var(--dt-color-orange-55-l);
902
+ --dt-color-content-default-h: var(--dt-color-charcoal-80-h);
903
+ --dt-color-content-default-s: var(--dt-color-charcoal-80-s);
904
+ --dt-color-content-default-l: var(--dt-color-charcoal-80-l);
905
+ --dt-color-content-subdued-h: var(--dt-color-charcoal-70-h);
906
+ --dt-color-content-subdued-s: var(--dt-color-charcoal-70-s);
907
+ --dt-color-content-subdued-l: var(--dt-color-charcoal-70-l);
908
+ --dt-color-content-interactive-brand-h: var(--dt-color-orange-h);
909
+ --dt-color-content-interactive-brand-s: var(--dt-color-orange-s);
910
+ --dt-color-content-interactive-brand-l: var(--dt-color-orange-l);
911
+ --dt-color-content-interactive-light-h: var(--dt-color-white-h);
912
+ --dt-color-content-interactive-light-s: var(--dt-color-white-s);
913
+ --dt-color-content-interactive-light-l: var(--dt-color-white-l);
914
+ --dt-color-content-interactive-primary-h: var(--dt-color-white-h);
915
+ --dt-color-content-interactive-primary-s: var(--dt-color-white-s);
916
+ --dt-color-content-interactive-primary-l: var(--dt-color-white-l);
917
+ --dt-color-content-interactive-secondary-h: var(--dt-color-charcoal-80-h);
918
+ --dt-color-content-interactive-secondary-s: var(--dt-color-charcoal-80-s);
919
+ --dt-color-content-interactive-secondary-l: var(--dt-color-charcoal-80-l);
920
+ --dt-color-content-interactive-tertiary-h: var(--dt-color-charcoal-75-h);
921
+ --dt-color-content-interactive-tertiary-s: var(--dt-color-charcoal-75-s);
922
+ --dt-color-content-interactive-tertiary-l: var(--dt-color-charcoal-75-l);
923
+ --dt-color-content-interactive-subdued-h: var(--dt-color-charcoal-60-h);
924
+ --dt-color-content-interactive-subdued-s: var(--dt-color-charcoal-60-s);
925
+ --dt-color-content-interactive-subdued-l: var(--dt-color-charcoal-60-l);
926
+ --dt-color-content-interactive-inverse-h: var(--dt-color-charcoal-80-h);
927
+ --dt-color-content-interactive-inverse-s: var(--dt-color-charcoal-80-s);
928
+ --dt-color-content-interactive-inverse-l: var(--dt-color-charcoal-80-l);
929
+ --dt-color-content-interactive-dark-h: var(--dt-color-charcoal-80-h);
930
+ --dt-color-content-interactive-dark-s: var(--dt-color-charcoal-80-s);
931
+ --dt-color-content-interactive-dark-l: var(--dt-color-charcoal-80-l);
932
+ --dt-color-content-interactive-error-h: var(--dt-color-red-h);
933
+ --dt-color-content-interactive-error-s: var(--dt-color-red-s);
934
+ --dt-color-content-interactive-error-l: var(--dt-color-red-l);
935
+ --dt-color-content-light-h: var(--dt-color-white-h);
936
+ --dt-color-content-light-s: var(--dt-color-white-s);
937
+ --dt-color-content-light-l: var(--dt-color-white-l);
938
+ --dt-color-content-inverse-h: var(--dt-color-white-h);
939
+ --dt-color-content-inverse-s: var(--dt-color-white-s);
940
+ --dt-color-content-inverse-l: var(--dt-color-white-l);
941
+ --dt-color-content-link-h: var(--dt-color-charcoal-80-h);
942
+ --dt-color-content-link-s: var(--dt-color-charcoal-80-s);
943
+ --dt-color-content-link-l: var(--dt-color-charcoal-80-l);
944
+ --dt-color-content-link-distinct-h: var(--dt-color-blue-h);
945
+ --dt-color-content-link-distinct-s: var(--dt-color-blue-s);
946
+ --dt-color-content-link-distinct-l: var(--dt-color-blue-l);
947
+ --dt-color-content-link-light-h: var(--dt-color-white-h);
948
+ --dt-color-content-link-light-s: var(--dt-color-white-s);
949
+ --dt-color-content-link-light-l: var(--dt-color-white-l);
950
+ --dt-color-content-link-inverse-h: var(--dt-color-white-h);
951
+ --dt-color-content-link-inverse-s: var(--dt-color-white-s);
952
+ --dt-color-content-link-inverse-l: var(--dt-color-white-l);
953
+ --dt-color-content-link-visited-h: var(--dt-color-system-purple-h);
954
+ --dt-color-content-link-visited-s: var(--dt-color-system-purple-s);
955
+ --dt-color-content-link-visited-l: var(--dt-color-system-purple-l);
956
+ --dt-color-content-link-visited-inverse-h: var(--dt-color-system-purple-10-h);
957
+ --dt-color-content-link-visited-inverse-s: var(--dt-color-system-purple-10-s);
958
+ --dt-color-content-link-visited-inverse-l: var(--dt-color-system-purple-10-l);
959
+ --dt-color-content-error-h: var(--dt-color-red-h);
960
+ --dt-color-content-error-s: var(--dt-color-red-s);
961
+ --dt-color-content-error-l: var(--dt-color-red-l);
962
+ --dt-color-content-positive-h: var(--dt-color-green-h);
963
+ --dt-color-content-positive-s: var(--dt-color-green-s);
964
+ --dt-color-content-positive-l: var(--dt-color-green-l);
965
+ --dt-color-content-disabled-h: var(--dt-color-charcoal-50-h);
966
+ --dt-color-content-disabled-s: var(--dt-color-charcoal-50-s);
967
+ --dt-color-content-disabled-l: var(--dt-color-charcoal-50-l);
968
+ --dt-color-content-brand-h: var(--dt-color-orange-h);
969
+ --dt-color-content-brand-s: var(--dt-color-orange-s);
970
+ --dt-color-content-brand-l: var(--dt-color-orange-l);
971
+ --dt-color-focus-inner-h: var(--dt-color-white-h);
972
+ --dt-color-focus-inner-s: var(--dt-color-white-s);
973
+ --dt-color-focus-inner-l: var(--dt-color-white-l);
974
+ --dt-color-focus-outer-h: var(--dt-color-blue-70-h);
975
+ --dt-color-focus-outer-s: var(--dt-color-blue-70-s);
976
+ --dt-color-focus-outer-l: var(--dt-color-blue-70-l);
977
+ --dt-color-disabled-01-h: var(--dt-color-mozzarella-20-h);
978
+ --dt-color-disabled-01-s: var(--dt-color-mozzarella-20-s);
979
+ --dt-color-disabled-01-l: var(--dt-color-mozzarella-20-l);
980
+ --dt-color-disabled-01-inverse-h: var(--dt-color-mozzarella-80-h);
981
+ --dt-color-disabled-01-inverse-s: var(--dt-color-mozzarella-80-s);
982
+ --dt-color-disabled-01-inverse-l: var(--dt-color-mozzarella-80-l);
983
+ --dt-color-skeleton-01-h: var(--dt-color-mozzarella-10-h);
984
+ --dt-color-skeleton-01-s: var(--dt-color-mozzarella-10-s);
985
+ --dt-color-skeleton-01-l: var(--dt-color-mozzarella-10-l);
986
+ --dt-color-skeleton-02-h: var(--dt-color-mozzarella-20-h);
987
+ --dt-color-skeleton-02-s: var(--dt-color-mozzarella-20-s);
988
+ --dt-color-skeleton-02-l: var(--dt-color-mozzarella-20-l);
989
+ --dt-color-skeleton-03-h: var(--dt-color-white-h);
990
+ --dt-color-skeleton-03-s: var(--dt-color-white-s);
991
+ --dt-color-skeleton-03-l: var(--dt-color-white-l);
992
+ }
993
+ html {
994
+ box-sizing: border-box;
995
+ text-rendering: optimizelegibility;
996
+ -webkit-font-smoothing: antialiased;
997
+ -moz-font-smoothing: antialiased;
998
+ }
999
+ *,
1000
+ *:before,
1001
+ *:after {
1002
+ box-sizing: inherit;
1003
+ }
package/package.json ADDED
@@ -0,0 +1,32 @@
1
+ {
2
+ "name": "@justeattakeaway/pie-css",
3
+ "version": "0.1.0",
4
+ "description": "A styling library that provides both a shared collection of ready to use CSS styles to be used across JET web front-ends, and SCSS-based style helpers for our PIE Web Component library.",
5
+ "author": "JustEatTakeaway - Design System Web Team",
6
+ "files": [
7
+ "scss"
8
+ ],
9
+ "main": "dist/index.css",
10
+ "scripts": {
11
+ "build": "run -T ts-node ./buildCss.ts",
12
+ "lint:scripts": "run -T eslint .",
13
+ "lint:scripts:fix": "yarn lint:scripts --fix",
14
+ "lint:style": "run -T stylelint ./**/*.{css,scss}",
15
+ "lint:style:fix": "yarn lint:style --fix",
16
+ "prepublishOnly": "yarn lint:style && yarn lint:scripts && yarn build && yarn test",
17
+ "test": "run -T vitest run"
18
+ },
19
+ "keywords": [
20
+ "PIE",
21
+ "CSS",
22
+ "SCSS",
23
+ "SASS"
24
+ ],
25
+ "repository": "https://github.com/justeattakeaway/pie.git",
26
+ "license": "Apache-2.0",
27
+ "devDependencies": {
28
+ "@types/postcss-import": "14.0.0",
29
+ "postcss-import": "15.1.0",
30
+ "w3c-css-validator": "1.3.1"
31
+ }
32
+ }
package/scss/index.scss ADDED
@@ -0,0 +1 @@
1
+ @forward './mixins/';
package/scss/mixins/_font-size.scss ADDED
@@ -0,0 +1,18 @@
1
+ // -
2
+ // Mixin for setting the font size.
3
+ // The `font-size` mixin allows you to set the font size using a CSS variable.
4
+ // The resulting value will be multiplied by 1px.
5
+ // -
6
+ // @param {String} $token - The CSS variable name to be used for the font size.
7
+ // It should include the `--` prefix used in custom properties.
8
+ // -
9
+ // @example
10
+ // .text {
11
+ // @include font-size(--font-size-small);
12
+ // }
13
+ // -
14
+ // Outputs: .text { font-size: calc(var(--font-size-small) * 1px); }
15
+ // -
16
+ @mixin font-size($token) {
17
+ font-size: calc(var($token) * 1px);
18
+ }
package/scss/mixins/index.scss ADDED
@@ -0,0 +1 @@
1
+ @forward './font-size';