dibk-designsystemet 1.0.0-rc.1

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 (32) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/LICENSE.md +13 -0
  3. package/README.md +365 -0
  4. package/dist/fonts.css +81 -0
  5. package/dist/icons.cjs +451 -0
  6. package/dist/icons.cjs.map +1 -0
  7. package/dist/icons.d.cts +33 -0
  8. package/dist/icons.d.ts +33 -0
  9. package/dist/icons.js +412 -0
  10. package/dist/icons.js.map +1 -0
  11. package/dist/index.cjs +706 -0
  12. package/dist/index.cjs.map +1 -0
  13. package/dist/index.css +886 -0
  14. package/dist/index.css.map +1 -0
  15. package/dist/index.d.cts +280 -0
  16. package/dist/index.d.ts +280 -0
  17. package/dist/index.js +666 -0
  18. package/dist/index.js.map +1 -0
  19. package/dist/layout.cjs +65 -0
  20. package/dist/layout.cjs.map +1 -0
  21. package/dist/layout.css +60 -0
  22. package/dist/layout.css.map +1 -0
  23. package/dist/layout.d.cts +42 -0
  24. package/dist/layout.d.ts +42 -0
  25. package/dist/layout.js +36 -0
  26. package/dist/layout.js.map +1 -0
  27. package/dist/styles.css +5 -0
  28. package/dist/swagger.css +213 -0
  29. package/dist/theme.css +982 -0
  30. package/icons/package.json +9 -0
  31. package/layout/package.json +9 -0
  32. package/package.json +106 -0
package/dist/theme.css ADDED
@@ -0,0 +1,982 @@
1
+ @charset "UTF-8";
2
+ /*
3
+ build: v1.15.0
4
+ */
5
+
6
+ @layer ds.theme.size-mode {
7
+ :root /* small */ {
8
+ --ds-size-mode-font-size--sm: 1;
9
+ }
10
+ }
11
+
12
+ @layer ds.theme.size-mode {
13
+ :root /* medium */ {
14
+ --ds-size-mode-font-size--md: 1.125;
15
+ }
16
+ }
17
+
18
+ @layer ds.theme.size-mode {
19
+ :root /* large */ {
20
+ --ds-size-mode-font-size--lg: 1.3125;
21
+ }
22
+ }
23
+
24
+ @layer ds.theme.size-mode {
25
+ :root, [data-size] {
26
+ --ds-size: var(--ds-size--md);
27
+ --ds-size--sm: var(--ds-size,);
28
+ --ds-size--md: var(--ds-size,);
29
+ --ds-size--lg: var(--ds-size,);
30
+ --ds-size-mode-font-size:
31
+ var(--ds-size--sm, var(--ds-size-mode-font-size--sm))
32
+ var(--ds-size--md, var(--ds-size-mode-font-size--md))
33
+ var(--ds-size--lg, var(--ds-size-mode-font-size--lg));
34
+ }
35
+
36
+ [data-size='sm'] { --ds-size: var(--ds-size--sm); }
37
+ [data-size='md'] { --ds-size: var(--ds-size--md); }
38
+ [data-size='lg'] { --ds-size: var(--ds-size--lg); }
39
+ }
40
+
41
+ @layer ds.theme.type-scale {
42
+ :root, [data-size] {
43
+ --_ds-font-size-factor: calc(var(--ds-size-mode-font-size) / (var(--ds-size-base) / 16));
44
+ --ds-font-size-1: calc(0.75rem * var(--_ds-font-size-factor));
45
+ --ds-font-size-2: calc(0.875rem * var(--_ds-font-size-factor));
46
+ --ds-font-size-3: calc(1rem * var(--_ds-font-size-factor));
47
+ --ds-font-size-4: calc(1.125rem * var(--_ds-font-size-factor));
48
+ --ds-font-size-5: calc(1.3125rem * var(--_ds-font-size-factor));
49
+ --ds-font-size-6: calc(1.5rem * var(--_ds-font-size-factor));
50
+ --ds-font-size-7: calc(1.875rem * var(--_ds-font-size-factor));
51
+ --ds-font-size-8: calc(2.25rem * var(--_ds-font-size-factor));
52
+ --ds-font-size-9: calc(3rem * var(--_ds-font-size-factor));
53
+ --ds-font-size-10: calc(3.75rem * var(--_ds-font-size-factor));
54
+ --ds-heading-2xl-font-size: var(--ds-font-size-10);
55
+ --ds-heading-xl-font-size: var(--ds-font-size-9);
56
+ --ds-heading-lg-font-size: var(--ds-font-size-8);
57
+ --ds-heading-md-font-size: var(--ds-font-size-7);
58
+ --ds-heading-sm-font-size: var(--ds-font-size-6);
59
+ --ds-heading-xs-font-size: var(--ds-font-size-5);
60
+ --ds-heading-2xs-font-size: var(--ds-font-size-4);
61
+ --ds-body-xl-font-size: var(--ds-font-size-6);
62
+ --ds-body-lg-font-size: var(--ds-font-size-5);
63
+ --ds-body-md-font-size: var(--ds-font-size-4);
64
+ --ds-body-sm-font-size: var(--ds-font-size-3);
65
+ --ds-body-xs-font-size: var(--ds-font-size-2);
66
+ --ds-body-short-xl-font-size: var(--ds-font-size-6);
67
+ --ds-body-short-lg-font-size: var(--ds-font-size-5);
68
+ --ds-body-short-md-font-size: var(--ds-font-size-4);
69
+ --ds-body-short-sm-font-size: var(--ds-font-size-3);
70
+ --ds-body-short-xs-font-size: var(--ds-font-size-2);
71
+ --ds-body-long-xl-font-size: var(--ds-font-size-6);
72
+ --ds-body-long-lg-font-size: var(--ds-font-size-5);
73
+ --ds-body-long-md-font-size: var(--ds-font-size-4);
74
+ --ds-body-long-sm-font-size: var(--ds-font-size-3);
75
+ --ds-body-long-xs-font-size: var(--ds-font-size-2);
76
+
77
+ @supports (width: round(down, .1em, 1px)) {
78
+ --ds-font-size-1: round(calc(0.75rem * var(--_ds-font-size-factor)), 1px);
79
+ --ds-font-size-2: round(calc(0.875rem * var(--_ds-font-size-factor)), 1px);
80
+ --ds-font-size-3: round(calc(1rem * var(--_ds-font-size-factor)), 1px);
81
+ --ds-font-size-4: round(calc(1.125rem * var(--_ds-font-size-factor)), 1px);
82
+ --ds-font-size-5: round(calc(1.3125rem * var(--_ds-font-size-factor)), 1px);
83
+ --ds-font-size-6: round(calc(1.5rem * var(--_ds-font-size-factor)), 1px);
84
+ --ds-font-size-7: round(calc(1.875rem * var(--_ds-font-size-factor)), 1px);
85
+ --ds-font-size-8: round(calc(2.25rem * var(--_ds-font-size-factor)), 1px);
86
+ --ds-font-size-9: round(calc(3rem * var(--_ds-font-size-factor)), 1px);
87
+ --ds-font-size-10: round(calc(3.75rem * var(--_ds-font-size-factor)), 1px);
88
+ }
89
+ }
90
+ }
91
+ @layer ds.theme.color-scheme.light {
92
+ :root, [data-color-scheme="light"] {
93
+ --ds-color-accent-background-default: #ffffff;
94
+ --ds-color-accent-background-tinted: #f1f4f5;
95
+ --ds-color-accent-surface-default: #ffffff;
96
+ --ds-color-accent-surface-tinted: #e4e9eb;
97
+ --ds-color-accent-surface-hover: #d3dbdf;
98
+ --ds-color-accent-surface-active: #c0ccd1;
99
+ --ds-color-accent-border-subtle: #afbec5;
100
+ --ds-color-accent-border-default: #5f7d8a;
101
+ --ds-color-accent-border-strong: #3e6272;
102
+ --ds-color-accent-text-subtle: #3e6272;
103
+ --ds-color-accent-text-default: #002f44;
104
+ --ds-color-accent-base-default: #003045;
105
+ --ds-color-accent-base-hover: #174356;
106
+ --ds-color-accent-base-active: #2e5566;
107
+ --ds-color-accent-base-contrast-subtle: #b6c3c9;
108
+ --ds-color-accent-base-contrast-default: #ffffff;
109
+ --ds-color-neutral-background-default: #ffffff;
110
+ --ds-color-neutral-background-tinted: #f4f3f3;
111
+ --ds-color-neutral-surface-default: #ffffff;
112
+ --ds-color-neutral-surface-tinted: #e9e8e8;
113
+ --ds-color-neutral-surface-hover: #dbdad8;
114
+ --ds-color-neutral-surface-active: #cccac8;
115
+ --ds-color-neutral-border-subtle: #bebbb9;
116
+ --ds-color-neutral-border-default: #7d7873;
117
+ --ds-color-neutral-border-strong: #625c58;
118
+ --ds-color-neutral-text-subtle: #625c58;
119
+ --ds-color-neutral-text-default: #2d2b29;
120
+ --ds-color-neutral-base-default: #6b6560;
121
+ --ds-color-neutral-base-hover: #57524e;
122
+ --ds-color-neutral-base-active: #433f3c;
123
+ --ds-color-neutral-base-contrast-subtle: #ecebea;
124
+ --ds-color-neutral-base-contrast-default: #ffffff;
125
+ --ds-color-brand1-background-default: #ffffff;
126
+ --ds-color-brand1-background-tinted: #e9f8e4;
127
+ --ds-color-brand1-surface-default: #ffffff;
128
+ --ds-color-brand1-surface-tinted: #d3f1c9;
129
+ --ds-color-brand1-surface-hover: #b5e8a4;
130
+ --ds-color-brand1-surface-active: #93dc79;
131
+ --ds-color-brand1-border-subtle: #71d24f;
132
+ --ds-color-brand1-border-default: #3e8924;
133
+ --ds-color-brand1-border-strong: #306a1c;
134
+ --ds-color-brand1-text-subtle: #306a1c;
135
+ --ds-color-brand1-text-default: #16320d;
136
+ --ds-color-brand1-base-default: #5ccb35;
137
+ --ds-color-brand1-base-hover: #51b32f;
138
+ --ds-color-brand1-base-active: #469b29;
139
+ --ds-color-brand1-base-contrast-subtle: #12270a;
140
+ --ds-color-brand1-base-contrast-default: #000000;
141
+ --ds-color-info-background-default: #ffffff;
142
+ --ds-color-info-background-tinted: #edf5fa;
143
+ --ds-color-info-surface-default: #ffffff;
144
+ --ds-color-info-surface-tinted: #dcebf6;
145
+ --ds-color-info-surface-hover: #c5ddf0;
146
+ --ds-color-info-surface-active: #abcfe9;
147
+ --ds-color-info-border-subtle: #94c1e3;
148
+ --ds-color-info-border-default: #1f7dc5;
149
+ --ds-color-info-border-strong: #0860a3;
150
+ --ds-color-info-text-subtle: #0860a3;
151
+ --ds-color-info-text-default: #042d4d;
152
+ --ds-color-info-base-default: #0A71C0;
153
+ --ds-color-info-base-hover: #085d9f;
154
+ --ds-color-info-base-active: #074a7e;
155
+ --ds-color-info-base-contrast-subtle: #eff6fb;
156
+ --ds-color-info-base-contrast-default: #ffffff;
157
+ --ds-color-success-background-default: #ffffff;
158
+ --ds-color-success-background-tinted: #ecf6ee;
159
+ --ds-color-success-surface-default: #ffffff;
160
+ --ds-color-success-surface-tinted: #daeddd;
161
+ --ds-color-success-surface-hover: #c3e2c7;
162
+ --ds-color-success-surface-active: #a8d5ae;
163
+ --ds-color-success-border-subtle: #8fc997;
164
+ --ds-color-success-border-default: #108c22;
165
+ --ds-color-success-border-strong: #056d13;
166
+ --ds-color-success-text-subtle: #056d13;
167
+ --ds-color-success-text-default: #023409;
168
+ --ds-color-success-base-default: #068718;
169
+ --ds-color-success-base-hover: #057014;
170
+ --ds-color-success-base-active: #045a10;
171
+ --ds-color-success-base-contrast-subtle: #fafdfb;
172
+ --ds-color-success-base-contrast-default: #ffffff;
173
+ --ds-color-warning-background-default: #ffffff;
174
+ --ds-color-warning-background-tinted: #fcf2e2;
175
+ --ds-color-warning-surface-default: #ffffff;
176
+ --ds-color-warning-surface-tinted: #fae6c6;
177
+ --ds-color-warning-surface-hover: #f6d5a0;
178
+ --ds-color-warning-surface-active: #f2c275;
179
+ --ds-color-warning-border-subtle: #eeb04c;
180
+ --ds-color-warning-border-default: #a56d13;
181
+ --ds-color-warning-border-strong: #80540f;
182
+ --ds-color-warning-text-subtle: #80540f;
183
+ --ds-color-warning-text-default: #3c2807;
184
+ --ds-color-warning-base-default: #EA9B1B;
185
+ --ds-color-warning-base-hover: #cd8818;
186
+ --ds-color-warning-base-active: #b27614;
187
+ --ds-color-warning-base-contrast-subtle: #271a04;
188
+ --ds-color-warning-base-contrast-default: #000000;
189
+ --ds-color-danger-background-default: #ffffff;
190
+ --ds-color-danger-background-tinted: #fbf1f1;
191
+ --ds-color-danger-surface-default: #ffffff;
192
+ --ds-color-danger-surface-tinted: #f8e4e4;
193
+ --ds-color-danger-surface-hover: #f3d2d2;
194
+ --ds-color-danger-surface-active: #edbfbf;
195
+ --ds-color-danger-border-subtle: #e8adad;
196
+ --ds-color-danger-border-default: #ce4d4d;
197
+ --ds-color-danger-border-strong: #b81a1a;
198
+ --ds-color-danger-text-subtle: #b81a1a;
199
+ --ds-color-danger-text-default: #590d0d;
200
+ --ds-color-danger-base-default: #C01B1B;
201
+ --ds-color-danger-base-hover: #9b1616;
202
+ --ds-color-danger-base-active: #791111;
203
+ --ds-color-danger-base-contrast-subtle: #f7e1e1;
204
+ --ds-color-danger-base-contrast-default: #ffffff;
205
+ --ds-color-focus-inner: #ffffff;
206
+ --ds-color-focus-outer: #2d2b29;
207
+ --ds-link-color-visited: #663299;
208
+
209
+ color-scheme: light;
210
+ }
211
+
212
+ @media (prefers-color-scheme: light) {
213
+ [data-color-scheme="auto"] {
214
+ --ds-color-accent-background-default: #ffffff;
215
+ --ds-color-accent-background-tinted: #f1f4f5;
216
+ --ds-color-accent-surface-default: #ffffff;
217
+ --ds-color-accent-surface-tinted: #e4e9eb;
218
+ --ds-color-accent-surface-hover: #d3dbdf;
219
+ --ds-color-accent-surface-active: #c0ccd1;
220
+ --ds-color-accent-border-subtle: #afbec5;
221
+ --ds-color-accent-border-default: #5f7d8a;
222
+ --ds-color-accent-border-strong: #3e6272;
223
+ --ds-color-accent-text-subtle: #3e6272;
224
+ --ds-color-accent-text-default: #002f44;
225
+ --ds-color-accent-base-default: #003045;
226
+ --ds-color-accent-base-hover: #174356;
227
+ --ds-color-accent-base-active: #2e5566;
228
+ --ds-color-accent-base-contrast-subtle: #b6c3c9;
229
+ --ds-color-accent-base-contrast-default: #ffffff;
230
+ --ds-color-neutral-background-default: #ffffff;
231
+ --ds-color-neutral-background-tinted: #f4f3f3;
232
+ --ds-color-neutral-surface-default: #ffffff;
233
+ --ds-color-neutral-surface-tinted: #e9e8e8;
234
+ --ds-color-neutral-surface-hover: #dbdad8;
235
+ --ds-color-neutral-surface-active: #cccac8;
236
+ --ds-color-neutral-border-subtle: #bebbb9;
237
+ --ds-color-neutral-border-default: #7d7873;
238
+ --ds-color-neutral-border-strong: #625c58;
239
+ --ds-color-neutral-text-subtle: #625c58;
240
+ --ds-color-neutral-text-default: #2d2b29;
241
+ --ds-color-neutral-base-default: #6b6560;
242
+ --ds-color-neutral-base-hover: #57524e;
243
+ --ds-color-neutral-base-active: #433f3c;
244
+ --ds-color-neutral-base-contrast-subtle: #ecebea;
245
+ --ds-color-neutral-base-contrast-default: #ffffff;
246
+ --ds-color-brand1-background-default: #ffffff;
247
+ --ds-color-brand1-background-tinted: #e9f8e4;
248
+ --ds-color-brand1-surface-default: #ffffff;
249
+ --ds-color-brand1-surface-tinted: #d3f1c9;
250
+ --ds-color-brand1-surface-hover: #b5e8a4;
251
+ --ds-color-brand1-surface-active: #93dc79;
252
+ --ds-color-brand1-border-subtle: #71d24f;
253
+ --ds-color-brand1-border-default: #3e8924;
254
+ --ds-color-brand1-border-strong: #306a1c;
255
+ --ds-color-brand1-text-subtle: #306a1c;
256
+ --ds-color-brand1-text-default: #16320d;
257
+ --ds-color-brand1-base-default: #5ccb35;
258
+ --ds-color-brand1-base-hover: #51b32f;
259
+ --ds-color-brand1-base-active: #469b29;
260
+ --ds-color-brand1-base-contrast-subtle: #12270a;
261
+ --ds-color-brand1-base-contrast-default: #000000;
262
+ --ds-color-info-background-default: #ffffff;
263
+ --ds-color-info-background-tinted: #edf5fa;
264
+ --ds-color-info-surface-default: #ffffff;
265
+ --ds-color-info-surface-tinted: #dcebf6;
266
+ --ds-color-info-surface-hover: #c5ddf0;
267
+ --ds-color-info-surface-active: #abcfe9;
268
+ --ds-color-info-border-subtle: #94c1e3;
269
+ --ds-color-info-border-default: #1f7dc5;
270
+ --ds-color-info-border-strong: #0860a3;
271
+ --ds-color-info-text-subtle: #0860a3;
272
+ --ds-color-info-text-default: #042d4d;
273
+ --ds-color-info-base-default: #0A71C0;
274
+ --ds-color-info-base-hover: #085d9f;
275
+ --ds-color-info-base-active: #074a7e;
276
+ --ds-color-info-base-contrast-subtle: #eff6fb;
277
+ --ds-color-info-base-contrast-default: #ffffff;
278
+ --ds-color-success-background-default: #ffffff;
279
+ --ds-color-success-background-tinted: #ecf6ee;
280
+ --ds-color-success-surface-default: #ffffff;
281
+ --ds-color-success-surface-tinted: #daeddd;
282
+ --ds-color-success-surface-hover: #c3e2c7;
283
+ --ds-color-success-surface-active: #a8d5ae;
284
+ --ds-color-success-border-subtle: #8fc997;
285
+ --ds-color-success-border-default: #108c22;
286
+ --ds-color-success-border-strong: #056d13;
287
+ --ds-color-success-text-subtle: #056d13;
288
+ --ds-color-success-text-default: #023409;
289
+ --ds-color-success-base-default: #068718;
290
+ --ds-color-success-base-hover: #057014;
291
+ --ds-color-success-base-active: #045a10;
292
+ --ds-color-success-base-contrast-subtle: #fafdfb;
293
+ --ds-color-success-base-contrast-default: #ffffff;
294
+ --ds-color-warning-background-default: #ffffff;
295
+ --ds-color-warning-background-tinted: #fcf2e2;
296
+ --ds-color-warning-surface-default: #ffffff;
297
+ --ds-color-warning-surface-tinted: #fae6c6;
298
+ --ds-color-warning-surface-hover: #f6d5a0;
299
+ --ds-color-warning-surface-active: #f2c275;
300
+ --ds-color-warning-border-subtle: #eeb04c;
301
+ --ds-color-warning-border-default: #a56d13;
302
+ --ds-color-warning-border-strong: #80540f;
303
+ --ds-color-warning-text-subtle: #80540f;
304
+ --ds-color-warning-text-default: #3c2807;
305
+ --ds-color-warning-base-default: #EA9B1B;
306
+ --ds-color-warning-base-hover: #cd8818;
307
+ --ds-color-warning-base-active: #b27614;
308
+ --ds-color-warning-base-contrast-subtle: #271a04;
309
+ --ds-color-warning-base-contrast-default: #000000;
310
+ --ds-color-danger-background-default: #ffffff;
311
+ --ds-color-danger-background-tinted: #fbf1f1;
312
+ --ds-color-danger-surface-default: #ffffff;
313
+ --ds-color-danger-surface-tinted: #f8e4e4;
314
+ --ds-color-danger-surface-hover: #f3d2d2;
315
+ --ds-color-danger-surface-active: #edbfbf;
316
+ --ds-color-danger-border-subtle: #e8adad;
317
+ --ds-color-danger-border-default: #ce4d4d;
318
+ --ds-color-danger-border-strong: #b81a1a;
319
+ --ds-color-danger-text-subtle: #b81a1a;
320
+ --ds-color-danger-text-default: #590d0d;
321
+ --ds-color-danger-base-default: #C01B1B;
322
+ --ds-color-danger-base-hover: #9b1616;
323
+ --ds-color-danger-base-active: #791111;
324
+ --ds-color-danger-base-contrast-subtle: #f7e1e1;
325
+ --ds-color-danger-base-contrast-default: #ffffff;
326
+ --ds-color-focus-inner: #ffffff;
327
+ --ds-color-focus-outer: #2d2b29;
328
+ --ds-link-color-visited: #663299;
329
+
330
+ color-scheme: light;
331
+ }
332
+
333
+ }
334
+
335
+ }
336
+
337
+ @layer ds.theme.typography.secondary {
338
+ [data-typography="secondary"] {
339
+ --ds-line-height-sm: 1.3;
340
+ --ds-line-height-md: 1.5;
341
+ --ds-line-height-lg: 1.7;
342
+ --ds-letter-spacing-1: -0.01em;
343
+ --ds-letter-spacing-2: -0.005em;
344
+ --ds-letter-spacing-3: -0.0025em;
345
+ --ds-letter-spacing-4: -0.0015em;
346
+ --ds-letter-spacing-5: 0em;
347
+ --ds-letter-spacing-6: 0.0015em;
348
+ --ds-letter-spacing-7: 0.0025em;
349
+ --ds-letter-spacing-8: 0.005em;
350
+ --ds-letter-spacing-9: 0.015em;
351
+ --ds-font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
352
+ --ds-font-weight-medium: 500;
353
+ --ds-font-weight-semibold: 600;
354
+ --ds-font-weight-regular: 400;
355
+ --ds-heading-2xl-font-weight: 500;
356
+ --ds-heading-2xl-line-height: 1.3;
357
+ --ds-heading-2xl-letter-spacing: -0.01em;
358
+ --ds-heading-xl-font-weight: 500;
359
+ --ds-heading-xl-line-height: 1.3;
360
+ --ds-heading-xl-letter-spacing: -0.01em;
361
+ --ds-heading-lg-font-weight: 500;
362
+ --ds-heading-lg-line-height: 1.3;
363
+ --ds-heading-lg-letter-spacing: -0.005em;
364
+ --ds-heading-md-font-weight: 500;
365
+ --ds-heading-md-line-height: 1.3;
366
+ --ds-heading-md-letter-spacing: -0.0025em;
367
+ --ds-heading-sm-font-weight: 500;
368
+ --ds-heading-sm-line-height: 1.3;
369
+ --ds-heading-sm-letter-spacing: 0em;
370
+ --ds-heading-xs-font-weight: 500;
371
+ --ds-heading-xs-line-height: 1.3;
372
+ --ds-heading-xs-letter-spacing: 0.0015em;
373
+ --ds-heading-2xs-font-weight: 500;
374
+ --ds-heading-2xs-line-height: 1.3;
375
+ --ds-heading-2xs-letter-spacing: 0.0015em;
376
+ --ds-body-xl-font-weight: 400;
377
+ --ds-body-xl-line-height: 1.5;
378
+ --ds-body-xl-letter-spacing: 0.005em;
379
+ --ds-body-lg-font-weight: 400;
380
+ --ds-body-lg-line-height: 1.5;
381
+ --ds-body-lg-letter-spacing: 0.005em;
382
+ --ds-body-md-font-weight: 400;
383
+ --ds-body-md-line-height: 1.5;
384
+ --ds-body-md-letter-spacing: 0.005em;
385
+ --ds-body-sm-font-weight: 400;
386
+ --ds-body-sm-line-height: 1.5;
387
+ --ds-body-sm-letter-spacing: 0.0025em;
388
+ --ds-body-xs-font-weight: 400;
389
+ --ds-body-xs-line-height: 1.5;
390
+ --ds-body-xs-letter-spacing: 0.0015em;
391
+ --ds-body-short-xl-font-weight: 400;
392
+ --ds-body-short-xl-line-height: 1.3;
393
+ --ds-body-short-xl-letter-spacing: 0.005em;
394
+ --ds-body-short-lg-font-weight: 400;
395
+ --ds-body-short-lg-line-height: 1.3;
396
+ --ds-body-short-lg-letter-spacing: 0.005em;
397
+ --ds-body-short-md-font-weight: 400;
398
+ --ds-body-short-md-line-height: 1.3;
399
+ --ds-body-short-md-letter-spacing: 0.005em;
400
+ --ds-body-short-sm-font-weight: 400;
401
+ --ds-body-short-sm-line-height: 1.3;
402
+ --ds-body-short-sm-letter-spacing: 0.0025em;
403
+ --ds-body-short-xs-font-weight: 400;
404
+ --ds-body-short-xs-line-height: 1.3;
405
+ --ds-body-short-xs-letter-spacing: 0.0015em;
406
+ --ds-body-long-xl-font-weight: 400;
407
+ --ds-body-long-xl-line-height: 1.7;
408
+ --ds-body-long-xl-letter-spacing: 0.005em;
409
+ --ds-body-long-lg-font-weight: 400;
410
+ --ds-body-long-lg-line-height: 1.7;
411
+ --ds-body-long-lg-letter-spacing: 0.005em;
412
+ --ds-body-long-md-font-weight: 400;
413
+ --ds-body-long-md-line-height: 1.7;
414
+ --ds-body-long-md-letter-spacing: 0.005em;
415
+ --ds-body-long-sm-font-weight: 400;
416
+ --ds-body-long-sm-line-height: 1.7;
417
+ --ds-body-long-sm-letter-spacing: 0.0025em;
418
+ --ds-body-long-xs-font-weight: 400;
419
+ --ds-body-long-xs-line-height: 1.7;
420
+ --ds-body-long-xs-letter-spacing: 0.0015em;
421
+ }
422
+ }
423
+ @layer ds.theme.size {
424
+ :root, [data-size] {
425
+ --ds-size-base: 18;
426
+ --ds-size-step: 4;
427
+
428
+ --ds-size-0: calc(var(--ds-size-unit) * 0);
429
+ --ds-size-1: calc(var(--ds-size-unit) * 1);
430
+ --ds-size-2: calc(var(--ds-size-unit) * 2);
431
+ --ds-size-3: calc(var(--ds-size-unit) * 3);
432
+ --ds-size-4: calc(var(--ds-size-unit) * 4);
433
+ --ds-size-5: calc(var(--ds-size-unit) * 5);
434
+ --ds-size-6: calc(var(--ds-size-unit) * 6);
435
+ --ds-size-7: calc(var(--ds-size-unit) * 7);
436
+ --ds-size-8: calc(var(--ds-size-unit) * 8);
437
+ --ds-size-9: calc(var(--ds-size-unit) * 9);
438
+ --ds-size-10: calc(var(--ds-size-unit) * 10);
439
+ --ds-size-11: calc(var(--ds-size-unit) * 11);
440
+ --ds-size-12: calc(var(--ds-size-unit) * 12);
441
+ --ds-size-13: calc(var(--ds-size-unit) * 13);
442
+ --ds-size-14: calc(var(--ds-size-unit) * 14);
443
+ --ds-size-15: calc(var(--ds-size-unit) * 15);
444
+ --ds-size-18: calc(var(--ds-size-unit) * 18);
445
+ --ds-size-22: calc(var(--ds-size-unit) * 22);
446
+ --ds-size-26: calc(var(--ds-size-unit) * 26);
447
+ --ds-size-30: calc(var(--ds-size-unit) * 30);
448
+ --ds-size-unit: calc(1rem * var(--ds-size-step) / var(--ds-size-base) * var(--ds-size-mode-font-size));
449
+
450
+ @supports (width: round(down, .1em, 1px)) {
451
+ --ds-size-0: round(down, calc(var(--ds-size-unit) * 0), 1px);
452
+ --ds-size-1: round(down, calc(var(--ds-size-unit) * 1), 1px);
453
+ --ds-size-2: round(down, calc(var(--ds-size-unit) * 2), 1px);
454
+ --ds-size-3: round(down, calc(var(--ds-size-unit) * 3), 1px);
455
+ --ds-size-4: round(down, calc(var(--ds-size-unit) * 4), 1px);
456
+ --ds-size-5: round(down, calc(var(--ds-size-unit) * 5), 1px);
457
+ --ds-size-6: round(down, calc(var(--ds-size-unit) * 6), 1px);
458
+ --ds-size-7: round(down, calc(var(--ds-size-unit) * 7), 1px);
459
+ --ds-size-8: round(down, calc(var(--ds-size-unit) * 8), 1px);
460
+ --ds-size-9: round(down, calc(var(--ds-size-unit) * 9), 1px);
461
+ --ds-size-10: round(down, calc(var(--ds-size-unit) * 10), 1px);
462
+ --ds-size-11: round(down, calc(var(--ds-size-unit) * 11), 1px);
463
+ --ds-size-12: round(down, calc(var(--ds-size-unit) * 12), 1px);
464
+ --ds-size-13: round(down, calc(var(--ds-size-unit) * 13), 1px);
465
+ --ds-size-14: round(down, calc(var(--ds-size-unit) * 14), 1px);
466
+ --ds-size-15: round(down, calc(var(--ds-size-unit) * 15), 1px);
467
+ --ds-size-18: round(down, calc(var(--ds-size-unit) * 18), 1px);
468
+ --ds-size-22: round(down, calc(var(--ds-size-unit) * 22), 1px);
469
+ --ds-size-26: round(down, calc(var(--ds-size-unit) * 26), 1px);
470
+ --ds-size-30: round(down, calc(var(--ds-size-unit) * 30), 1px);
471
+ }
472
+ }
473
+
474
+ }
475
+
476
+ @layer ds.theme.semantic {
477
+ :root {
478
+ --ds-border-radius-base: 0;
479
+ --ds-border-radius-scale: 0.25rem;
480
+ --ds-border-radius-sm: min(var(--ds-border-radius-base)*0.5,var(--ds-border-radius-scale));
481
+ --ds-border-radius-md: min(var(--ds-border-radius-base),var(--ds-border-radius-scale)*2);
482
+ --ds-border-radius-lg: min(var(--ds-border-radius-base)*2,var(--ds-border-radius-scale)*5);
483
+ --ds-border-radius-xl: min(var(--ds-border-radius-base)*3,var(--ds-border-radius-scale)*7);
484
+ --ds-border-radius-default: var(--ds-border-radius-base);
485
+ --ds-border-radius-full: 624.9375rem;
486
+ --ds-border-width-default: 1px;
487
+ --ds-border-width-focus: 3px;
488
+ --ds-shadow-xs: 0 0 1px 0 rgba(0,0,0,0.16), 0 1px 2px 0 rgba(0,0,0,0.12);
489
+ --ds-shadow-sm: 0 0 1px 0 rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.1);
490
+ --ds-shadow-md: 0 0 1px 0 rgba(0,0,0,0.14), 0 2px 4px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.12);
491
+ --ds-shadow-lg: 0 0 1px 0 rgba(0,0,0,0.13), 0 3px 5px 0 rgba(0,0,0,0.13), 0 6px 12px 0 rgba(0,0,0,0.14);
492
+ --ds-shadow-xl: 0 0 1px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.16), 0 12px 24px 0 rgba(0,0,0,0.16);
493
+ --ds-opacity-disabled: 30%;
494
+ }
495
+
496
+ }
497
+
498
+ @layer ds.theme.color-scheme.dark {
499
+ [data-color-scheme="dark"] {
500
+ --ds-color-accent-background-default: #0b1922;
501
+ --ds-color-accent-background-tinted: #0e222c;
502
+ --ds-color-accent-surface-default: #122a38;
503
+ --ds-color-accent-surface-tinted: #163140;
504
+ --ds-color-accent-surface-hover: #1f3847;
505
+ --ds-color-accent-surface-active: #2e4653;
506
+ --ds-color-accent-border-subtle: #3d535f;
507
+ --ds-color-accent-border-default: #74848d;
508
+ --ds-color-accent-border-strong: #9eaab0;
509
+ --ds-color-accent-text-subtle: #9eaab0;
510
+ --ds-color-accent-text-default: #eaedee;
511
+ --ds-color-accent-base-default: #9baeb6;
512
+ --ds-color-accent-base-hover: #829aa4;
513
+ --ds-color-accent-base-active: #698592;
514
+ --ds-color-accent-base-contrast-subtle: #191c1d;
515
+ --ds-color-accent-base-contrast-default: #000000;
516
+ --ds-color-neutral-background-default: #191817;
517
+ --ds-color-neutral-background-tinted: #211f1e;
518
+ --ds-color-neutral-surface-default: #292726;
519
+ --ds-color-neutral-surface-tinted: #302d2c;
520
+ --ds-color-neutral-surface-hover: #373533;
521
+ --ds-color-neutral-surface-active: #464240;
522
+ --ds-color-neutral-border-subtle: #534f4d;
523
+ --ds-color-neutral-border-default: #85807e;
524
+ --ds-color-neutral-border-strong: #aaa7a5;
525
+ --ds-color-neutral-text-subtle: #aaa7a5;
526
+ --ds-color-neutral-text-default: #edecec;
527
+ --ds-color-neutral-base-default: #8c8783;
528
+ --ds-color-neutral-base-hover: #a09c99;
529
+ --ds-color-neutral-base-active: #b6b3b0;
530
+ --ds-color-neutral-base-contrast-subtle: #161514;
531
+ --ds-color-neutral-base-contrast-default: #000000;
532
+ --ds-color-brand1-background-default: #101a0e;
533
+ --ds-color-brand1-background-tinted: #162312;
534
+ --ds-color-brand1-surface-default: #1c2c17;
535
+ --ds-color-brand1-surface-tinted: #20321a;
536
+ --ds-color-brand1-surface-hover: #253b1f;
537
+ --ds-color-brand1-surface-active: #2e4a27;
538
+ --ds-color-brand1-border-subtle: #37582e;
539
+ --ds-color-brand1-border-default: #598e4a;
540
+ --ds-color-brand1-border-strong: #73b860;
541
+ --ds-color-brand1-text-subtle: #73b860;
542
+ --ds-color-brand1-text-default: #e0f1dc;
543
+ --ds-color-brand1-base-default: #214913;
544
+ --ds-color-brand1-base-hover: #2a5d18;
545
+ --ds-color-brand1-base-active: #34731e;
546
+ --ds-color-brand1-base-contrast-subtle: #d5dcd2;
547
+ --ds-color-brand1-base-contrast-default: #ffffff;
548
+ --ds-color-info-background-default: #0d1925;
549
+ --ds-color-info-background-tinted: #112130;
550
+ --ds-color-info-surface-default: #15293d;
551
+ --ds-color-info-surface-tinted: #182f46;
552
+ --ds-color-info-surface-hover: #1c3751;
553
+ --ds-color-info-surface-active: #234566;
554
+ --ds-color-info-border-subtle: #2a537a;
555
+ --ds-color-info-border-default: #5585b4;
556
+ --ds-color-info-border-strong: #8aabcb;
557
+ --ds-color-info-text-subtle: #8aabcb;
558
+ --ds-color-info-text-default: #e6edf4;
559
+ --ds-color-info-base-default: #2d85c9;
560
+ --ds-color-info-base-hover: #519ad2;
561
+ --ds-color-info-base-active: #77b0dc;
562
+ --ds-color-info-base-contrast-subtle: #050e15;
563
+ --ds-color-info-base-contrast-default: #000000;
564
+ --ds-color-success-background-default: #0d1b0d;
565
+ --ds-color-success-background-tinted: #112411;
566
+ --ds-color-success-surface-default: #152d15;
567
+ --ds-color-success-surface-tinted: #183418;
568
+ --ds-color-success-surface-hover: #1c3c1c;
569
+ --ds-color-success-surface-active: #244c24;
570
+ --ds-color-success-border-subtle: #2b5a2b;
571
+ --ds-color-success-border-default: #528f52;
572
+ --ds-color-success-border-strong: #89b289;
573
+ --ds-color-success-text-subtle: #89b289;
574
+ --ds-color-success-text-default: #e6efe6;
575
+ --ds-color-success-base-default: #138d24;
576
+ --ds-color-success-base-hover: #3ca14b;
577
+ --ds-color-success-base-active: #66b571;
578
+ --ds-color-success-base-contrast-subtle: #010501;
579
+ --ds-color-success-base-contrast-default: #000000;
580
+ --ds-color-warning-background-default: #1e160d;
581
+ --ds-color-warning-background-tinted: #281e11;
582
+ --ds-color-warning-surface-default: #322616;
583
+ --ds-color-warning-surface-tinted: #3a2b19;
584
+ --ds-color-warning-surface-hover: #43321d;
585
+ --ds-color-warning-surface-active: #543f24;
586
+ --ds-color-warning-border-subtle: #654b2b;
587
+ --ds-color-warning-border-default: #a37a46;
588
+ --ds-color-warning-border-strong: #d39e5b;
589
+ --ds-color-warning-text-subtle: #d39e5b;
590
+ --ds-color-warning-text-default: #f7ebdb;
591
+ --ds-color-warning-base-default: #60400b;
592
+ --ds-color-warning-base-hover: #7a510e;
593
+ --ds-color-warning-base-active: #946211;
594
+ --ds-color-warning-base-contrast-subtle: #e6e2d9;
595
+ --ds-color-warning-base-contrast-default: #ffffff;
596
+ --ds-color-danger-background-default: #2a100e;
597
+ --ds-color-danger-background-tinted: #371512;
598
+ --ds-color-danger-surface-default: #451b17;
599
+ --ds-color-danger-surface-tinted: #4f1f1b;
600
+ --ds-color-danger-surface-hover: #5c241f;
601
+ --ds-color-danger-surface-active: #722d27;
602
+ --ds-color-danger-border-subtle: #88352e;
603
+ --ds-color-danger-border-default: #bc6b64;
604
+ --ds-color-danger-border-strong: #d19a96;
605
+ --ds-color-danger-text-subtle: #d19a96;
606
+ --ds-color-danger-text-default: #f5eae9;
607
+ --ds-color-danger-base-default: #d76e6e;
608
+ --ds-color-danger-base-hover: #df8b8b;
609
+ --ds-color-danger-base-active: #e7a8a8;
610
+ --ds-color-danger-base-contrast-subtle: #271414;
611
+ --ds-color-danger-base-contrast-default: #000000;
612
+ --ds-color-focus-inner: #191817;
613
+ --ds-color-focus-outer: #edecec;
614
+ --ds-link-color-visited: #b49acd;
615
+
616
+ color-scheme: dark;
617
+ }
618
+
619
+ @media (prefers-color-scheme: dark) {
620
+ [data-color-scheme="auto"] {
621
+ --ds-color-accent-background-default: #0b1922;
622
+ --ds-color-accent-background-tinted: #0e222c;
623
+ --ds-color-accent-surface-default: #122a38;
624
+ --ds-color-accent-surface-tinted: #163140;
625
+ --ds-color-accent-surface-hover: #1f3847;
626
+ --ds-color-accent-surface-active: #2e4653;
627
+ --ds-color-accent-border-subtle: #3d535f;
628
+ --ds-color-accent-border-default: #74848d;
629
+ --ds-color-accent-border-strong: #9eaab0;
630
+ --ds-color-accent-text-subtle: #9eaab0;
631
+ --ds-color-accent-text-default: #eaedee;
632
+ --ds-color-accent-base-default: #9baeb6;
633
+ --ds-color-accent-base-hover: #829aa4;
634
+ --ds-color-accent-base-active: #698592;
635
+ --ds-color-accent-base-contrast-subtle: #191c1d;
636
+ --ds-color-accent-base-contrast-default: #000000;
637
+ --ds-color-neutral-background-default: #191817;
638
+ --ds-color-neutral-background-tinted: #211f1e;
639
+ --ds-color-neutral-surface-default: #292726;
640
+ --ds-color-neutral-surface-tinted: #302d2c;
641
+ --ds-color-neutral-surface-hover: #373533;
642
+ --ds-color-neutral-surface-active: #464240;
643
+ --ds-color-neutral-border-subtle: #534f4d;
644
+ --ds-color-neutral-border-default: #85807e;
645
+ --ds-color-neutral-border-strong: #aaa7a5;
646
+ --ds-color-neutral-text-subtle: #aaa7a5;
647
+ --ds-color-neutral-text-default: #edecec;
648
+ --ds-color-neutral-base-default: #8c8783;
649
+ --ds-color-neutral-base-hover: #a09c99;
650
+ --ds-color-neutral-base-active: #b6b3b0;
651
+ --ds-color-neutral-base-contrast-subtle: #161514;
652
+ --ds-color-neutral-base-contrast-default: #000000;
653
+ --ds-color-brand1-background-default: #101a0e;
654
+ --ds-color-brand1-background-tinted: #162312;
655
+ --ds-color-brand1-surface-default: #1c2c17;
656
+ --ds-color-brand1-surface-tinted: #20321a;
657
+ --ds-color-brand1-surface-hover: #253b1f;
658
+ --ds-color-brand1-surface-active: #2e4a27;
659
+ --ds-color-brand1-border-subtle: #37582e;
660
+ --ds-color-brand1-border-default: #598e4a;
661
+ --ds-color-brand1-border-strong: #73b860;
662
+ --ds-color-brand1-text-subtle: #73b860;
663
+ --ds-color-brand1-text-default: #e0f1dc;
664
+ --ds-color-brand1-base-default: #214913;
665
+ --ds-color-brand1-base-hover: #2a5d18;
666
+ --ds-color-brand1-base-active: #34731e;
667
+ --ds-color-brand1-base-contrast-subtle: #d5dcd2;
668
+ --ds-color-brand1-base-contrast-default: #ffffff;
669
+ --ds-color-info-background-default: #0d1925;
670
+ --ds-color-info-background-tinted: #112130;
671
+ --ds-color-info-surface-default: #15293d;
672
+ --ds-color-info-surface-tinted: #182f46;
673
+ --ds-color-info-surface-hover: #1c3751;
674
+ --ds-color-info-surface-active: #234566;
675
+ --ds-color-info-border-subtle: #2a537a;
676
+ --ds-color-info-border-default: #5585b4;
677
+ --ds-color-info-border-strong: #8aabcb;
678
+ --ds-color-info-text-subtle: #8aabcb;
679
+ --ds-color-info-text-default: #e6edf4;
680
+ --ds-color-info-base-default: #2d85c9;
681
+ --ds-color-info-base-hover: #519ad2;
682
+ --ds-color-info-base-active: #77b0dc;
683
+ --ds-color-info-base-contrast-subtle: #050e15;
684
+ --ds-color-info-base-contrast-default: #000000;
685
+ --ds-color-success-background-default: #0d1b0d;
686
+ --ds-color-success-background-tinted: #112411;
687
+ --ds-color-success-surface-default: #152d15;
688
+ --ds-color-success-surface-tinted: #183418;
689
+ --ds-color-success-surface-hover: #1c3c1c;
690
+ --ds-color-success-surface-active: #244c24;
691
+ --ds-color-success-border-subtle: #2b5a2b;
692
+ --ds-color-success-border-default: #528f52;
693
+ --ds-color-success-border-strong: #89b289;
694
+ --ds-color-success-text-subtle: #89b289;
695
+ --ds-color-success-text-default: #e6efe6;
696
+ --ds-color-success-base-default: #138d24;
697
+ --ds-color-success-base-hover: #3ca14b;
698
+ --ds-color-success-base-active: #66b571;
699
+ --ds-color-success-base-contrast-subtle: #010501;
700
+ --ds-color-success-base-contrast-default: #000000;
701
+ --ds-color-warning-background-default: #1e160d;
702
+ --ds-color-warning-background-tinted: #281e11;
703
+ --ds-color-warning-surface-default: #322616;
704
+ --ds-color-warning-surface-tinted: #3a2b19;
705
+ --ds-color-warning-surface-hover: #43321d;
706
+ --ds-color-warning-surface-active: #543f24;
707
+ --ds-color-warning-border-subtle: #654b2b;
708
+ --ds-color-warning-border-default: #a37a46;
709
+ --ds-color-warning-border-strong: #d39e5b;
710
+ --ds-color-warning-text-subtle: #d39e5b;
711
+ --ds-color-warning-text-default: #f7ebdb;
712
+ --ds-color-warning-base-default: #60400b;
713
+ --ds-color-warning-base-hover: #7a510e;
714
+ --ds-color-warning-base-active: #946211;
715
+ --ds-color-warning-base-contrast-subtle: #e6e2d9;
716
+ --ds-color-warning-base-contrast-default: #ffffff;
717
+ --ds-color-danger-background-default: #2a100e;
718
+ --ds-color-danger-background-tinted: #371512;
719
+ --ds-color-danger-surface-default: #451b17;
720
+ --ds-color-danger-surface-tinted: #4f1f1b;
721
+ --ds-color-danger-surface-hover: #5c241f;
722
+ --ds-color-danger-surface-active: #722d27;
723
+ --ds-color-danger-border-subtle: #88352e;
724
+ --ds-color-danger-border-default: #bc6b64;
725
+ --ds-color-danger-border-strong: #d19a96;
726
+ --ds-color-danger-text-subtle: #d19a96;
727
+ --ds-color-danger-text-default: #f5eae9;
728
+ --ds-color-danger-base-default: #d76e6e;
729
+ --ds-color-danger-base-hover: #df8b8b;
730
+ --ds-color-danger-base-active: #e7a8a8;
731
+ --ds-color-danger-base-contrast-subtle: #271414;
732
+ --ds-color-danger-base-contrast-default: #000000;
733
+ --ds-color-focus-inner: #191817;
734
+ --ds-color-focus-outer: #edecec;
735
+ --ds-link-color-visited: #b49acd;
736
+
737
+ color-scheme: dark;
738
+ }
739
+
740
+ }
741
+
742
+ }
743
+
744
+ @layer ds.theme.typography.primary {
745
+ :root, [data-typography="primary"] {
746
+ --ds-line-height-sm: 1.3;
747
+ --ds-line-height-md: 1.5;
748
+ --ds-line-height-lg: 1.7;
749
+ --ds-letter-spacing-1: -0.01em;
750
+ --ds-letter-spacing-2: -0.005em;
751
+ --ds-letter-spacing-3: -0.0025em;
752
+ --ds-letter-spacing-4: -0.0015em;
753
+ --ds-letter-spacing-5: 0em;
754
+ --ds-letter-spacing-6: 0.0015em;
755
+ --ds-letter-spacing-7: 0.0025em;
756
+ --ds-letter-spacing-8: 0.005em;
757
+ --ds-letter-spacing-9: 0.015em;
758
+ --ds-font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
759
+ --ds-font-weight-medium: 500;
760
+ --ds-font-weight-semibold: 600;
761
+ --ds-font-weight-regular: 400;
762
+ --ds-heading-2xl-font-weight: 500;
763
+ --ds-heading-2xl-line-height: 1.3;
764
+ --ds-heading-2xl-letter-spacing: -0.01em;
765
+ --ds-heading-xl-font-weight: 500;
766
+ --ds-heading-xl-line-height: 1.3;
767
+ --ds-heading-xl-letter-spacing: -0.01em;
768
+ --ds-heading-lg-font-weight: 500;
769
+ --ds-heading-lg-line-height: 1.3;
770
+ --ds-heading-lg-letter-spacing: -0.005em;
771
+ --ds-heading-md-font-weight: 500;
772
+ --ds-heading-md-line-height: 1.3;
773
+ --ds-heading-md-letter-spacing: -0.0025em;
774
+ --ds-heading-sm-font-weight: 500;
775
+ --ds-heading-sm-line-height: 1.3;
776
+ --ds-heading-sm-letter-spacing: 0em;
777
+ --ds-heading-xs-font-weight: 500;
778
+ --ds-heading-xs-line-height: 1.3;
779
+ --ds-heading-xs-letter-spacing: 0.0015em;
780
+ --ds-heading-2xs-font-weight: 500;
781
+ --ds-heading-2xs-line-height: 1.3;
782
+ --ds-heading-2xs-letter-spacing: 0.0015em;
783
+ --ds-body-xl-font-weight: 400;
784
+ --ds-body-xl-line-height: 1.5;
785
+ --ds-body-xl-letter-spacing: 0.005em;
786
+ --ds-body-lg-font-weight: 400;
787
+ --ds-body-lg-line-height: 1.5;
788
+ --ds-body-lg-letter-spacing: 0.005em;
789
+ --ds-body-md-font-weight: 400;
790
+ --ds-body-md-line-height: 1.5;
791
+ --ds-body-md-letter-spacing: 0.005em;
792
+ --ds-body-sm-font-weight: 400;
793
+ --ds-body-sm-line-height: 1.5;
794
+ --ds-body-sm-letter-spacing: 0.0025em;
795
+ --ds-body-xs-font-weight: 400;
796
+ --ds-body-xs-line-height: 1.5;
797
+ --ds-body-xs-letter-spacing: 0.0015em;
798
+ --ds-body-short-xl-font-weight: 400;
799
+ --ds-body-short-xl-line-height: 1.3;
800
+ --ds-body-short-xl-letter-spacing: 0.005em;
801
+ --ds-body-short-lg-font-weight: 400;
802
+ --ds-body-short-lg-line-height: 1.3;
803
+ --ds-body-short-lg-letter-spacing: 0.005em;
804
+ --ds-body-short-md-font-weight: 400;
805
+ --ds-body-short-md-line-height: 1.3;
806
+ --ds-body-short-md-letter-spacing: 0.005em;
807
+ --ds-body-short-sm-font-weight: 400;
808
+ --ds-body-short-sm-line-height: 1.3;
809
+ --ds-body-short-sm-letter-spacing: 0.0025em;
810
+ --ds-body-short-xs-font-weight: 400;
811
+ --ds-body-short-xs-line-height: 1.3;
812
+ --ds-body-short-xs-letter-spacing: 0.0015em;
813
+ --ds-body-long-xl-font-weight: 400;
814
+ --ds-body-long-xl-line-height: 1.7;
815
+ --ds-body-long-xl-letter-spacing: 0.005em;
816
+ --ds-body-long-lg-font-weight: 400;
817
+ --ds-body-long-lg-line-height: 1.7;
818
+ --ds-body-long-lg-letter-spacing: 0.005em;
819
+ --ds-body-long-md-font-weight: 400;
820
+ --ds-body-long-md-line-height: 1.7;
821
+ --ds-body-long-md-letter-spacing: 0.005em;
822
+ --ds-body-long-sm-font-weight: 400;
823
+ --ds-body-long-sm-line-height: 1.7;
824
+ --ds-body-long-sm-letter-spacing: 0.0025em;
825
+ --ds-body-long-xs-font-weight: 400;
826
+ --ds-body-long-xs-line-height: 1.7;
827
+ --ds-body-long-xs-letter-spacing: 0.0015em;
828
+ }
829
+ }
830
+ @layer ds.theme.color {
831
+ :root, [data-color-scheme], [data-color="accent"] {
832
+ --ds-color-background-default: var(--ds-color-accent-background-default);
833
+ --ds-color-background-tinted: var(--ds-color-accent-background-tinted);
834
+ --ds-color-surface-default: var(--ds-color-accent-surface-default);
835
+ --ds-color-surface-tinted: var(--ds-color-accent-surface-tinted);
836
+ --ds-color-surface-hover: var(--ds-color-accent-surface-hover);
837
+ --ds-color-surface-active: var(--ds-color-accent-surface-active);
838
+ --ds-color-border-subtle: var(--ds-color-accent-border-subtle);
839
+ --ds-color-border-default: var(--ds-color-accent-border-default);
840
+ --ds-color-border-strong: var(--ds-color-accent-border-strong);
841
+ --ds-color-text-subtle: var(--ds-color-accent-text-subtle);
842
+ --ds-color-text-default: var(--ds-color-accent-text-default);
843
+ --ds-color-base-default: var(--ds-color-accent-base-default);
844
+ --ds-color-base-hover: var(--ds-color-accent-base-hover);
845
+ --ds-color-base-active: var(--ds-color-accent-base-active);
846
+ --ds-color-base-contrast-subtle: var(--ds-color-accent-base-contrast-subtle);
847
+ --ds-color-base-contrast-default: var(--ds-color-accent-base-contrast-default);
848
+ }
849
+
850
+ }
851
+
852
+ @layer ds.theme.color {
853
+ [data-color="brand1"], [data-color-scheme][data-color="brand1"] {
854
+ --ds-color-background-default: var(--ds-color-brand1-background-default);
855
+ --ds-color-background-tinted: var(--ds-color-brand1-background-tinted);
856
+ --ds-color-surface-default: var(--ds-color-brand1-surface-default);
857
+ --ds-color-surface-tinted: var(--ds-color-brand1-surface-tinted);
858
+ --ds-color-surface-hover: var(--ds-color-brand1-surface-hover);
859
+ --ds-color-surface-active: var(--ds-color-brand1-surface-active);
860
+ --ds-color-border-subtle: var(--ds-color-brand1-border-subtle);
861
+ --ds-color-border-default: var(--ds-color-brand1-border-default);
862
+ --ds-color-border-strong: var(--ds-color-brand1-border-strong);
863
+ --ds-color-text-subtle: var(--ds-color-brand1-text-subtle);
864
+ --ds-color-text-default: var(--ds-color-brand1-text-default);
865
+ --ds-color-base-default: var(--ds-color-brand1-base-default);
866
+ --ds-color-base-hover: var(--ds-color-brand1-base-hover);
867
+ --ds-color-base-active: var(--ds-color-brand1-base-active);
868
+ --ds-color-base-contrast-subtle: var(--ds-color-brand1-base-contrast-subtle);
869
+ --ds-color-base-contrast-default: var(--ds-color-brand1-base-contrast-default);
870
+ }
871
+
872
+ }
873
+
874
+ @layer ds.theme.color {
875
+ [data-color="danger"], [data-color-scheme][data-color="danger"] {
876
+ --ds-color-background-default: var(--ds-color-danger-background-default);
877
+ --ds-color-background-tinted: var(--ds-color-danger-background-tinted);
878
+ --ds-color-surface-default: var(--ds-color-danger-surface-default);
879
+ --ds-color-surface-tinted: var(--ds-color-danger-surface-tinted);
880
+ --ds-color-surface-hover: var(--ds-color-danger-surface-hover);
881
+ --ds-color-surface-active: var(--ds-color-danger-surface-active);
882
+ --ds-color-border-subtle: var(--ds-color-danger-border-subtle);
883
+ --ds-color-border-default: var(--ds-color-danger-border-default);
884
+ --ds-color-border-strong: var(--ds-color-danger-border-strong);
885
+ --ds-color-text-subtle: var(--ds-color-danger-text-subtle);
886
+ --ds-color-text-default: var(--ds-color-danger-text-default);
887
+ --ds-color-base-default: var(--ds-color-danger-base-default);
888
+ --ds-color-base-hover: var(--ds-color-danger-base-hover);
889
+ --ds-color-base-active: var(--ds-color-danger-base-active);
890
+ --ds-color-base-contrast-subtle: var(--ds-color-danger-base-contrast-subtle);
891
+ --ds-color-base-contrast-default: var(--ds-color-danger-base-contrast-default);
892
+ }
893
+
894
+ }
895
+
896
+ @layer ds.theme.color {
897
+ [data-color="info"], [data-color-scheme][data-color="info"] {
898
+ --ds-color-background-default: var(--ds-color-info-background-default);
899
+ --ds-color-background-tinted: var(--ds-color-info-background-tinted);
900
+ --ds-color-surface-default: var(--ds-color-info-surface-default);
901
+ --ds-color-surface-tinted: var(--ds-color-info-surface-tinted);
902
+ --ds-color-surface-hover: var(--ds-color-info-surface-hover);
903
+ --ds-color-surface-active: var(--ds-color-info-surface-active);
904
+ --ds-color-border-subtle: var(--ds-color-info-border-subtle);
905
+ --ds-color-border-default: var(--ds-color-info-border-default);
906
+ --ds-color-border-strong: var(--ds-color-info-border-strong);
907
+ --ds-color-text-subtle: var(--ds-color-info-text-subtle);
908
+ --ds-color-text-default: var(--ds-color-info-text-default);
909
+ --ds-color-base-default: var(--ds-color-info-base-default);
910
+ --ds-color-base-hover: var(--ds-color-info-base-hover);
911
+ --ds-color-base-active: var(--ds-color-info-base-active);
912
+ --ds-color-base-contrast-subtle: var(--ds-color-info-base-contrast-subtle);
913
+ --ds-color-base-contrast-default: var(--ds-color-info-base-contrast-default);
914
+ }
915
+
916
+ }
917
+
918
+ @layer ds.theme.color {
919
+ [data-color="neutral"], [data-color-scheme][data-color="neutral"] {
920
+ --ds-color-background-default: var(--ds-color-neutral-background-default);
921
+ --ds-color-background-tinted: var(--ds-color-neutral-background-tinted);
922
+ --ds-color-surface-default: var(--ds-color-neutral-surface-default);
923
+ --ds-color-surface-tinted: var(--ds-color-neutral-surface-tinted);
924
+ --ds-color-surface-hover: var(--ds-color-neutral-surface-hover);
925
+ --ds-color-surface-active: var(--ds-color-neutral-surface-active);
926
+ --ds-color-border-subtle: var(--ds-color-neutral-border-subtle);
927
+ --ds-color-border-default: var(--ds-color-neutral-border-default);
928
+ --ds-color-border-strong: var(--ds-color-neutral-border-strong);
929
+ --ds-color-text-subtle: var(--ds-color-neutral-text-subtle);
930
+ --ds-color-text-default: var(--ds-color-neutral-text-default);
931
+ --ds-color-base-default: var(--ds-color-neutral-base-default);
932
+ --ds-color-base-hover: var(--ds-color-neutral-base-hover);
933
+ --ds-color-base-active: var(--ds-color-neutral-base-active);
934
+ --ds-color-base-contrast-subtle: var(--ds-color-neutral-base-contrast-subtle);
935
+ --ds-color-base-contrast-default: var(--ds-color-neutral-base-contrast-default);
936
+ }
937
+
938
+ }
939
+
940
+ @layer ds.theme.color {
941
+ [data-color="success"], [data-color-scheme][data-color="success"] {
942
+ --ds-color-background-default: var(--ds-color-success-background-default);
943
+ --ds-color-background-tinted: var(--ds-color-success-background-tinted);
944
+ --ds-color-surface-default: var(--ds-color-success-surface-default);
945
+ --ds-color-surface-tinted: var(--ds-color-success-surface-tinted);
946
+ --ds-color-surface-hover: var(--ds-color-success-surface-hover);
947
+ --ds-color-surface-active: var(--ds-color-success-surface-active);
948
+ --ds-color-border-subtle: var(--ds-color-success-border-subtle);
949
+ --ds-color-border-default: var(--ds-color-success-border-default);
950
+ --ds-color-border-strong: var(--ds-color-success-border-strong);
951
+ --ds-color-text-subtle: var(--ds-color-success-text-subtle);
952
+ --ds-color-text-default: var(--ds-color-success-text-default);
953
+ --ds-color-base-default: var(--ds-color-success-base-default);
954
+ --ds-color-base-hover: var(--ds-color-success-base-hover);
955
+ --ds-color-base-active: var(--ds-color-success-base-active);
956
+ --ds-color-base-contrast-subtle: var(--ds-color-success-base-contrast-subtle);
957
+ --ds-color-base-contrast-default: var(--ds-color-success-base-contrast-default);
958
+ }
959
+
960
+ }
961
+
962
+ @layer ds.theme.color {
963
+ [data-color="warning"], [data-color-scheme][data-color="warning"] {
964
+ --ds-color-background-default: var(--ds-color-warning-background-default);
965
+ --ds-color-background-tinted: var(--ds-color-warning-background-tinted);
966
+ --ds-color-surface-default: var(--ds-color-warning-surface-default);
967
+ --ds-color-surface-tinted: var(--ds-color-warning-surface-tinted);
968
+ --ds-color-surface-hover: var(--ds-color-warning-surface-hover);
969
+ --ds-color-surface-active: var(--ds-color-warning-surface-active);
970
+ --ds-color-border-subtle: var(--ds-color-warning-border-subtle);
971
+ --ds-color-border-default: var(--ds-color-warning-border-default);
972
+ --ds-color-border-strong: var(--ds-color-warning-border-strong);
973
+ --ds-color-text-subtle: var(--ds-color-warning-text-subtle);
974
+ --ds-color-text-default: var(--ds-color-warning-text-default);
975
+ --ds-color-base-default: var(--ds-color-warning-base-default);
976
+ --ds-color-base-hover: var(--ds-color-warning-base-hover);
977
+ --ds-color-base-active: var(--ds-color-warning-base-active);
978
+ --ds-color-base-contrast-subtle: var(--ds-color-warning-base-contrast-subtle);
979
+ --ds-color-base-contrast-default: var(--ds-color-warning-base-contrast-default);
980
+ }
981
+
982
+ }