@nordcode/ui 1.1.7 → 1.3.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 (25) hide show
  1. package/CHANGELOG.md +55 -49
  2. package/out/bundle.css +94 -85
  3. package/out/bundle_configless.css +88 -80
  4. package/out/colors.css +66 -53
  5. package/out/complete.css +155 -118
  6. package/out/complete_configless.css +149 -113
  7. package/package.json +1 -1
  8. package/src/styles/components/alerts.css +2 -2
  9. package/src/styles/components/badges.css +1 -1
  10. package/src/styles/components/breadcrumbs.css +1 -1
  11. package/src/styles/components/buttons.css +59 -46
  12. package/src/styles/components/card.css +31 -1
  13. package/src/styles/components/dialogs.css +11 -8
  14. package/src/styles/components/forms.css +12 -6
  15. package/src/styles/components/inputs/base.css +75 -65
  16. package/src/styles/components/inputs/fields.css +11 -11
  17. package/src/styles/components/inputs/segmented.css +23 -13
  18. package/src/styles/components/inputs/tag-select.css +10 -6
  19. package/src/styles/components/lists.css +3 -3
  20. package/src/styles/components/notifications.css +8 -6
  21. package/src/styles/config/config.css +6 -5
  22. package/src/styles/utils/base.css +20 -21
  23. package/src/styles/utils/layouts.css +31 -20
  24. package/src/styles/utils/reset.css +1 -1
  25. package/transform.js +23 -11
package/out/bundle_configless.css CHANGED
@@ -2,71 +2,84 @@
2
2
 
3
3
  @layer theme {
4
4
  :where(html) {
5
+ --lightningcss-light: initial;
6
+ --lightningcss-dark: ;
5
7
  color-scheme: light dark;
6
8
  }
7
9
 
10
+ @media (prefers-color-scheme: dark) {
11
+ :where(html) {
12
+ --lightningcss-light: ;
13
+ --lightningcss-dark: initial;
14
+ }
15
+ }
16
+
8
17
  :where([data-theme="light"]) {
18
+ --lightningcss-light: initial;
19
+ --lightningcss-dark: ;
9
20
  color-scheme: light;
10
21
  }
11
22
 
12
23
  :where([data-theme="dark"]) {
24
+ --lightningcss-light: ;
25
+ --lightningcss-dark: initial;
13
26
  color-scheme: dark;
14
27
  }
15
28
 
16
29
  :where(:root) {
17
- --l-brand-primary: light-dark(var(--l-brand-primary-light), var(--l-brand-primary-dark));
18
- --color-brand-primary-emphasis: light-dark(var(--color-brand-primary-emphasis-light), var(--color-brand-primary-emphasis-dark));
19
- --color-brand-primary-base: light-dark(var(--color-brand-primary-base-light), var(--color-brand-primary-base-dark));
20
- --color-brand-primary-surface: light-dark(var(--color-brand-primary-surface-light), var(--color-brand-primary-surface-dark));
21
- --color-brand-primary-hover: light-dark(var(--color-brand-primary-hover-light), var(--color-brand-primary-hover-light));
22
- --color-brand-primary-contrast-lightness: light-dark(var(--color-brand-primary-contrast-lightness-light), var(--color-brand-primary-contrast-lightness-dark));
23
- --color-brand-primary-contrast: light-dark(var(--color-brand-primary-contrast-light), var(--color-brand-primary-contrast-dark));
24
- --color-brand-secondary-emphasis: light-dark(var(--color-brand-secondary-emphasis-light), var(--color-brand-secondary-emphasis-dark));
25
- --color-brand-secondary-base: light-dark(var(--color-brand-secondary-base-light), var(--color-brand-secondary-base-dark));
26
- --color-brand-secondary-surface: light-dark(var(--color-brand-secondary-surface-light), var(--color-brand-secondary-surface-dark));
27
- --color-brand-secondary-hover: light-dark(var(--color-brand-secondary-hover-light), var(--color-brand-secondary-hover-dark));
28
- --color-brand-secondary-contrast: light-dark(var(--color-brand-secondary-contrast-light), var(--color-brand-secondary-contrast-dark));
29
- --color-text-base: light-dark(var(--color-text-base-light), var(--color-text-base-dark));
30
- --color-text-muted: light-dark(var(--color-text-muted-light), var(--color-text-muted-dark));
31
- --color-text-subtle: light-dark(var(--color-text-subtle-light), var(--color-text-subtle-dark));
32
- --color-text-on-emphasis: light-dark(var(--color-text-on-emphasis-light), var(--color-text-on-emphasis-dark));
33
- --color-text-hover: light-dark(var(--color-text-hover-light), var(--color-text-hover-dark));
34
- --color-surface-base: light-dark(var(--color-surface-base-light), var(--color-surface-base-dark));
35
- --color-surface-muted: light-dark(var(--color-surface-muted-light), var(--color-surface-muted-dark));
36
- --color-surface-subtle: light-dark(var(--color-surface-subtle-light), var(--color-surface-subtle-dark));
37
- --color-surface-emphasis: light-dark(var(--color-surface-emphasis-light), var(--color-surface-emphasis-dark));
38
- --color-border-base: light-dark(var(--color-border-base-light), var(--color-border-base-dark));
39
- --color-border-muted: light-dark(var(--color-border-muted-light), var(--color-border-muted-dark));
40
- --color-border-subtle: light-dark(var(--color-border-subtle-light), var(--color-border-subtle-dark));
41
- --color-border-on-emphasis: light-dark(var(--color-border-on-emphasis-light), var(--color-border-on-emphasis-dark));
42
- --color-border-hover: light-dark(var(--color-border-hover-light), var(--color-border-hover-dark));
43
- --color-status-info-emphasis: light-dark(var(--color-status-info-emphasis-light), var(--color-status-info-emphasis-dark));
44
- --color-status-info-base: light-dark(var(--color-status-info-base-light), var(--color-status-info-base-dark));
45
- --color-status-info-surface: light-dark(var(--color-status-info-surface-light), var(--color-status-info-surface-dark));
46
- --color-status-info-hover: light-dark(var(--color-status-info-hover-light), var(--color-status-info-hover-light));
47
- --color-status-info-contrast-lightness: light-dark(var(--color-status-info-contrast-lightness-light), var(--color-status-info-contrast-lightness-dark));
48
- --color-status-info-contrast: light-dark(var(--color-status-info-contrast-light), var(--color-status-info-contrast-dark));
49
- --color-status-success-emphasis: light-dark(var(--color-status-success-emphasis-light), var(--color-status-success-emphasis-dark));
50
- --color-status-success-base: light-dark(var(--color-status-success-base-light), var(--color-status-success-base-dark));
51
- --color-status-success-surface: light-dark(var(--color-status-success-surface-light), var(--color-status-success-surface-dark));
52
- --color-status-success-hover: light-dark(var(--color-status-success-hover-light), var(--color-status-success-hover-light));
53
- --color-status-success-contrast-lightness: light-dark(var(--color-status-success-contrast-lightness-light), var(--color-status-success-contrast-lightness-dark));
54
- --color-status-success-contrast: light-dark(var(--color-status-success-contrast-light), var(--color-status-success-contrast-dark));
55
- --color-status-warning-emphasis: light-dark(var(--color-status-warning-emphasis-light), var(--color-status-warning-emphasis-dark));
56
- --color-status-warning-base: light-dark(var(--color-status-warning-base-light), var(--color-status-warning-base-dark));
57
- --color-status-warning-surface: light-dark(var(--color-status-warning-surface-light), var(--color-status-warning-surface-dark));
58
- --color-status-warning-hover: light-dark(var(--color-status-warning-hover-light), var(--color-status-warning-hover-light));
59
- --color-status-warning-contrast-lightness: light-dark(var(--color-status-warning-contrast-lightness-light), var(--color-status-warning-contrast-lightness-dark));
60
- --color-status-warning-contrast: light-dark(var(--color-status-warning-contrast-light), var(--color-status-warning-contrast-dark));
61
- --color-status-danger-emphasis: light-dark(var(--color-status-danger-emphasis-light), var(--color-status-danger-emphasis-dark));
62
- --color-status-danger-base: light-dark(var(--color-status-danger-base-light), var(--color-status-danger-base-dark));
63
- --color-status-danger-surface: light-dark(var(--color-status-danger-surface-light), var(--color-status-danger-surface-dark));
64
- --color-status-danger-hover: light-dark(var(--color-status-danger-hover-light), var(--color-status-danger-hover-light));
65
- --color-status-danger-contrast-lightness: light-dark(var(--color-status-danger-contrast-lightness-light), var(--color-status-danger-contrast-lightness-dark));
66
- --color-status-danger-contrast: light-dark(var(--color-status-danger-contrast-light), var(--color-status-danger-contrast-dark));
67
- --shadow-color: light-dark(var(--shadow-color-light), var(--shadow-color-dark));
68
- --triangle-down-url: light-dark(var(--triangle-down-url-light), var(--triangle-down-url-dark));
69
- --triangle-up-url: light-dark(var(--triangle-up-url-light), var(--triangle-up-url-dark));
30
+ --l-brand-primary: var(--lightningcss-light, var(--l-brand-primary-light)) var(--lightningcss-dark, var(--l-brand-primary-dark));
31
+ --color-brand-primary-emphasis: var(--lightningcss-light, var(--color-brand-primary-emphasis-light)) var(--lightningcss-dark, var(--color-brand-primary-emphasis-dark));
32
+ --color-brand-primary-base: var(--lightningcss-light, var(--color-brand-primary-base-light)) var(--lightningcss-dark, var(--color-brand-primary-base-dark));
33
+ --color-brand-primary-surface: var(--lightningcss-light, var(--color-brand-primary-surface-light)) var(--lightningcss-dark, var(--color-brand-primary-surface-dark));
34
+ --color-brand-primary-hover: var(--lightningcss-light, var(--color-brand-primary-hover-light)) var(--lightningcss-dark, var(--color-brand-primary-hover-light));
35
+ --color-brand-primary-contrast-lightness: var(--lightningcss-light, var(--color-brand-primary-contrast-lightness-light)) var(--lightningcss-dark, var(--color-brand-primary-contrast-lightness-dark));
36
+ --color-brand-primary-contrast: var(--lightningcss-light, var(--color-brand-primary-contrast-light)) var(--lightningcss-dark, var(--color-brand-primary-contrast-dark));
37
+ --color-brand-secondary-emphasis: var(--lightningcss-light, var(--color-brand-secondary-emphasis-light)) var(--lightningcss-dark, var(--color-brand-secondary-emphasis-dark));
38
+ --color-brand-secondary-base: var(--lightningcss-light, var(--color-brand-secondary-base-light)) var(--lightningcss-dark, var(--color-brand-secondary-base-dark));
39
+ --color-brand-secondary-surface: var(--lightningcss-light, var(--color-brand-secondary-surface-light)) var(--lightningcss-dark, var(--color-brand-secondary-surface-dark));
40
+ --color-brand-secondary-hover: var(--lightningcss-light, var(--color-brand-secondary-hover-light)) var(--lightningcss-dark, var(--color-brand-secondary-hover-dark));
41
+ --color-brand-secondary-contrast: var(--lightningcss-light, var(--color-brand-secondary-contrast-light)) var(--lightningcss-dark, var(--color-brand-secondary-contrast-dark));
42
+ --color-text-base: var(--lightningcss-light, var(--color-text-base-light)) var(--lightningcss-dark, var(--color-text-base-dark));
43
+ --color-text-muted: var(--lightningcss-light, var(--color-text-muted-light)) var(--lightningcss-dark, var(--color-text-muted-dark));
44
+ --color-text-subtle: var(--lightningcss-light, var(--color-text-subtle-light)) var(--lightningcss-dark, var(--color-text-subtle-dark));
45
+ --color-text-on-emphasis: var(--lightningcss-light, var(--color-text-on-emphasis-light)) var(--lightningcss-dark, var(--color-text-on-emphasis-dark));
46
+ --color-text-hover: var(--lightningcss-light, var(--color-text-hover-light)) var(--lightningcss-dark, var(--color-text-hover-dark));
47
+ --color-surface-base: var(--lightningcss-light, var(--color-surface-base-light)) var(--lightningcss-dark, var(--color-surface-base-dark));
48
+ --color-surface-muted: var(--lightningcss-light, var(--color-surface-muted-light)) var(--lightningcss-dark, var(--color-surface-muted-dark));
49
+ --color-surface-subtle: var(--lightningcss-light, var(--color-surface-subtle-light)) var(--lightningcss-dark, var(--color-surface-subtle-dark));
50
+ --color-surface-emphasis: var(--lightningcss-light, var(--color-surface-emphasis-light)) var(--lightningcss-dark, var(--color-surface-emphasis-dark));
51
+ --color-border-base: var(--lightningcss-light, var(--color-border-base-light)) var(--lightningcss-dark, var(--color-border-base-dark));
52
+ --color-border-muted: var(--lightningcss-light, var(--color-border-muted-light)) var(--lightningcss-dark, var(--color-border-muted-dark));
53
+ --color-border-subtle: var(--lightningcss-light, var(--color-border-subtle-light)) var(--lightningcss-dark, var(--color-border-subtle-dark));
54
+ --color-border-on-emphasis: var(--lightningcss-light, var(--color-border-on-emphasis-light)) var(--lightningcss-dark, var(--color-border-on-emphasis-dark));
55
+ --color-border-hover: var(--lightningcss-light, var(--color-border-hover-light)) var(--lightningcss-dark, var(--color-border-hover-dark));
56
+ --color-status-info-emphasis: var(--lightningcss-light, var(--color-status-info-emphasis-light)) var(--lightningcss-dark, var(--color-status-info-emphasis-dark));
57
+ --color-status-info-base: var(--lightningcss-light, var(--color-status-info-base-light)) var(--lightningcss-dark, var(--color-status-info-base-dark));
58
+ --color-status-info-surface: var(--lightningcss-light, var(--color-status-info-surface-light)) var(--lightningcss-dark, var(--color-status-info-surface-dark));
59
+ --color-status-info-hover: var(--lightningcss-light, var(--color-status-info-hover-light)) var(--lightningcss-dark, var(--color-status-info-hover-light));
60
+ --color-status-info-contrast-lightness: var(--lightningcss-light, var(--color-status-info-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-info-contrast-lightness-dark));
61
+ --color-status-info-contrast: var(--lightningcss-light, var(--color-status-info-contrast-light)) var(--lightningcss-dark, var(--color-status-info-contrast-dark));
62
+ --color-status-success-emphasis: var(--lightningcss-light, var(--color-status-success-emphasis-light)) var(--lightningcss-dark, var(--color-status-success-emphasis-dark));
63
+ --color-status-success-base: var(--lightningcss-light, var(--color-status-success-base-light)) var(--lightningcss-dark, var(--color-status-success-base-dark));
64
+ --color-status-success-surface: var(--lightningcss-light, var(--color-status-success-surface-light)) var(--lightningcss-dark, var(--color-status-success-surface-dark));
65
+ --color-status-success-hover: var(--lightningcss-light, var(--color-status-success-hover-light)) var(--lightningcss-dark, var(--color-status-success-hover-light));
66
+ --color-status-success-contrast-lightness: var(--lightningcss-light, var(--color-status-success-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-success-contrast-lightness-dark));
67
+ --color-status-success-contrast: var(--lightningcss-light, var(--color-status-success-contrast-light)) var(--lightningcss-dark, var(--color-status-success-contrast-dark));
68
+ --color-status-warning-emphasis: var(--lightningcss-light, var(--color-status-warning-emphasis-light)) var(--lightningcss-dark, var(--color-status-warning-emphasis-dark));
69
+ --color-status-warning-base: var(--lightningcss-light, var(--color-status-warning-base-light)) var(--lightningcss-dark, var(--color-status-warning-base-dark));
70
+ --color-status-warning-surface: var(--lightningcss-light, var(--color-status-warning-surface-light)) var(--lightningcss-dark, var(--color-status-warning-surface-dark));
71
+ --color-status-warning-hover: var(--lightningcss-light, var(--color-status-warning-hover-light)) var(--lightningcss-dark, var(--color-status-warning-hover-light));
72
+ --color-status-warning-contrast-lightness: var(--lightningcss-light, var(--color-status-warning-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-warning-contrast-lightness-dark));
73
+ --color-status-warning-contrast: var(--lightningcss-light, var(--color-status-warning-contrast-light)) var(--lightningcss-dark, var(--color-status-warning-contrast-dark));
74
+ --color-status-danger-emphasis: var(--lightningcss-light, var(--color-status-danger-emphasis-light)) var(--lightningcss-dark, var(--color-status-danger-emphasis-dark));
75
+ --color-status-danger-base: var(--lightningcss-light, var(--color-status-danger-base-light)) var(--lightningcss-dark, var(--color-status-danger-base-dark));
76
+ --color-status-danger-surface: var(--lightningcss-light, var(--color-status-danger-surface-light)) var(--lightningcss-dark, var(--color-status-danger-surface-dark));
77
+ --color-status-danger-hover: var(--lightningcss-light, var(--color-status-danger-hover-light)) var(--lightningcss-dark, var(--color-status-danger-hover-light));
78
+ --color-status-danger-contrast-lightness: var(--lightningcss-light, var(--color-status-danger-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-danger-contrast-lightness-dark));
79
+ --color-status-danger-contrast: var(--lightningcss-light, var(--color-status-danger-contrast-light)) var(--lightningcss-dark, var(--color-status-danger-contrast-dark));
80
+ --shadow-color: var(--lightningcss-light, var(--shadow-color-light)) var(--lightningcss-dark, var(--shadow-color-dark));
81
+ --triangle-down-url: var(--lightningcss-light, var(--triangle-down-url-light)) var(--lightningcss-dark, var(--triangle-down-url-dark));
82
+ --triangle-up-url: var(--lightningcss-light, var(--triangle-up-url-light)) var(--lightningcss-dark, var(--triangle-up-url-dark));
70
83
  }
71
84
  }
72
85
 
@@ -98,7 +111,7 @@
98
111
 
99
112
  :where(:not(:active):focus-visible) {
100
113
  outline: var(--border-width-medium) solid var(--color-brand-primary-base);
101
- outline-offset: 1ch;
114
+ outline-offset: .5em;
102
115
  }
103
116
 
104
117
  :where(:focus:not(:focus-visible)) {
@@ -208,7 +221,7 @@
208
221
  }
209
222
 
210
223
  :where(dl:not([class]), .nc-description-list) {
211
- word-break: break-word;
224
+ overflow-wrap: anywhere;
212
225
  grid-template-columns: .25fr .75fr;
213
226
  align-items: flex-start;
214
227
  row-gap: .5lh;
@@ -228,7 +241,7 @@
228
241
  grid-column: 1 / 1;
229
242
  min-block-size: 100%;
230
243
  padding-block-end: 0;
231
- padding-inline-end: 2ch;
244
+ padding-inline-end: 1em;
232
245
  }
233
246
 
234
247
  :where(dt):not(:last-of-type) {
@@ -264,19 +277,19 @@
264
277
  :where(figcaption) {
265
278
  color: var(--color-surface-subtle);
266
279
  background-color: var(--color-text-base);
267
- padding: .25lh 1ch;
280
+ padding: .35em .5em;
268
281
  display: block;
269
282
  }
270
283
 
271
284
  :where(details) {
272
- --p-x-details: 2ch;
273
- --p-y-details: .75lh;
285
+ --p-x-details: 1em;
286
+ --p-y-details: 1em;
274
287
  --b-r-details: var(--border-radius-medium);
275
288
  background-color: var(--color-surface-muted);
276
289
  border-radius: var(--b-r-details);
277
- border: var(--border-width-thin) solid var(--color-border-base);
278
290
  padding: var(--p-y-details) var(--p-x-details);
279
291
  inline-size: 100%;
292
+ box-shadow: 0 0 0 var(--border-width-thin) var(--color-border-base);
280
293
  }
281
294
 
282
295
  :where(details) > summary {
@@ -285,7 +298,7 @@
285
298
  font-weight: var(--font-weight-heading);
286
299
  border-radius: var(--b-r-details);
287
300
  padding: var(--p-y-details) var(--p-x-details);
288
- margin: calc(-1 * var(--p-y-details)) calc(-1 * var(--p-x-details) + var(--border-width-thin));
301
+ margin: calc(-1 * var(--p-y-details)) calc(-1 * var(--p-x-details));
289
302
  }
290
303
 
291
304
  :where(details)[open] > summary {
@@ -302,7 +315,7 @@
302
315
  font-size: var(--font-size-large);
303
316
  margin-inline: 0;
304
317
  padding: 0;
305
- padding-inline-start: 2ch;
318
+ padding-inline-start: 1em;
306
319
  position: relative;
307
320
  }
308
321
 
@@ -329,7 +342,7 @@
329
342
 
330
343
  :is(.note, blockquote) cite:before {
331
344
  content: "—";
332
- margin-inline-end: .5ch;
345
+ margin-inline-end: .5em;
333
346
  }
334
347
 
335
348
  cite {
@@ -392,7 +405,7 @@
392
405
  :where(a, .nc-link) {
393
406
  color: inherit;
394
407
  font-family: var(--font-family-link);
395
- text-underline-offset: .25lh;
408
+ text-underline-offset: .35em;
396
409
  font-weight: var(--font-weight-default);
397
410
  cursor: pointer;
398
411
  letter-spacing: var(--tracking-tight);
@@ -443,7 +456,7 @@
443
456
  line-height: inherit;
444
457
  -webkit-box-decoration-break: clone;
445
458
  box-decoration-break: clone;
446
- padding-inline: .5ch;
459
+ padding-inline: .25em;
447
460
  }
448
461
 
449
462
  :where(code, kbd, var) {
@@ -455,10 +468,9 @@
455
468
  tab-size: 4;
456
469
  text-align: left;
457
470
  word-spacing: normal;
458
- word-break: normal;
459
- word-wrap: normal;
471
+ overflow-wrap: normal;
460
472
  max-inline-size: fit-content;
461
- padding-block: .125lh;
473
+ padding-block: .2em;
462
474
  font-style: normal;
463
475
  }
464
476
 
@@ -485,7 +497,7 @@
485
497
  border-radius: var(--border-radius-medium);
486
498
  background: var(--color-surface-subtle);
487
499
  -webkit-overflow-scrolling: touch;
488
- padding: .5lh 2ch;
500
+ padding: 1em;
489
501
  overflow-x: auto;
490
502
  }
491
503
 
@@ -526,7 +538,7 @@
526
538
  line-height: var(--line-height-small);
527
539
  white-space: nowrap;
528
540
  font-variant-numeric: tabular-nums;
529
- padding: .4lh 1ch;
541
+ padding: .5em;
530
542
  }
531
543
 
532
544
  :where(td), :where(thead th) {
@@ -596,15 +608,11 @@
596
608
  }
597
609
 
598
610
  :where(ul, ol) {
599
- padding-inline-start: 2ch;
600
- }
601
-
602
- :where(li + li) {
603
- margin-block-start: .5lh;
611
+ padding-inline-start: 1em;
604
612
  }
605
613
 
606
- :where(li > :is(ul, ol)) {
607
- margin-block-start: .25lh;
614
+ :where(li + li), :where(li > :is(ul, ol)) {
615
+ margin-block-start: .5em;
608
616
  }
609
617
 
610
618
  @supports (font-variant-position: sub) {
@@ -638,7 +646,7 @@
638
646
  content: close-quote;
639
647
  content: "“";
640
648
  content: "”";
641
- margin-inline-start: -.87ch;
649
+ margin-inline-start: -.5em;
642
650
  }
643
651
 
644
652
  :where(.quoted p) {
@@ -731,11 +739,11 @@
731
739
  }
732
740
 
733
741
  :where(.nc-flow) > * {
734
- max-inline-size: var(--flow-base-meassure, 72ch);
742
+ max-inline-size: var(--flow-base-meassure, 36em);
735
743
  }
736
744
 
737
745
  :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) {
738
- max-inline-size: var(--flow-headline-meassure, 32ch);
746
+ max-inline-size: var(--flow-headline-meassure, 16em);
739
747
  --flow-gap: 1.5lh;
740
748
  }
741
749
 
package/out/colors.css CHANGED
@@ -1,69 +1,82 @@
1
1
  @layer theme {
2
2
  :where(html) {
3
+ --lightningcss-light: initial;
4
+ --lightningcss-dark: ;
3
5
  color-scheme: light dark;
4
6
  }
5
7
 
8
+ @media (prefers-color-scheme: dark) {
9
+ :where(html) {
10
+ --lightningcss-light: ;
11
+ --lightningcss-dark: initial;
12
+ }
13
+ }
14
+
6
15
  :where([data-theme="light"]) {
16
+ --lightningcss-light: initial;
17
+ --lightningcss-dark: ;
7
18
  color-scheme: light;
8
19
  }
9
20
 
10
21
  :where([data-theme="dark"]) {
22
+ --lightningcss-light: ;
23
+ --lightningcss-dark: initial;
11
24
  color-scheme: dark;
12
25
  }
13
26
 
14
27
  :where(:root) {
15
- --l-brand-primary: light-dark(var(--l-brand-primary-light), var(--l-brand-primary-dark));
16
- --color-brand-primary-emphasis: light-dark(var(--color-brand-primary-emphasis-light), var(--color-brand-primary-emphasis-dark));
17
- --color-brand-primary-base: light-dark(var(--color-brand-primary-base-light), var(--color-brand-primary-base-dark));
18
- --color-brand-primary-surface: light-dark(var(--color-brand-primary-surface-light), var(--color-brand-primary-surface-dark));
19
- --color-brand-primary-hover: light-dark(var(--color-brand-primary-hover-light), var(--color-brand-primary-hover-light));
20
- --color-brand-primary-contrast-lightness: light-dark(var(--color-brand-primary-contrast-lightness-light), var(--color-brand-primary-contrast-lightness-dark));
21
- --color-brand-primary-contrast: light-dark(var(--color-brand-primary-contrast-light), var(--color-brand-primary-contrast-dark));
22
- --color-brand-secondary-emphasis: light-dark(var(--color-brand-secondary-emphasis-light), var(--color-brand-secondary-emphasis-dark));
23
- --color-brand-secondary-base: light-dark(var(--color-brand-secondary-base-light), var(--color-brand-secondary-base-dark));
24
- --color-brand-secondary-surface: light-dark(var(--color-brand-secondary-surface-light), var(--color-brand-secondary-surface-dark));
25
- --color-brand-secondary-hover: light-dark(var(--color-brand-secondary-hover-light), var(--color-brand-secondary-hover-dark));
26
- --color-brand-secondary-contrast: light-dark(var(--color-brand-secondary-contrast-light), var(--color-brand-secondary-contrast-dark));
27
- --color-text-base: light-dark(var(--color-text-base-light), var(--color-text-base-dark));
28
- --color-text-muted: light-dark(var(--color-text-muted-light), var(--color-text-muted-dark));
29
- --color-text-subtle: light-dark(var(--color-text-subtle-light), var(--color-text-subtle-dark));
30
- --color-text-on-emphasis: light-dark(var(--color-text-on-emphasis-light), var(--color-text-on-emphasis-dark));
31
- --color-text-hover: light-dark(var(--color-text-hover-light), var(--color-text-hover-dark));
32
- --color-surface-base: light-dark(var(--color-surface-base-light), var(--color-surface-base-dark));
33
- --color-surface-muted: light-dark(var(--color-surface-muted-light), var(--color-surface-muted-dark));
34
- --color-surface-subtle: light-dark(var(--color-surface-subtle-light), var(--color-surface-subtle-dark));
35
- --color-surface-emphasis: light-dark(var(--color-surface-emphasis-light), var(--color-surface-emphasis-dark));
36
- --color-border-base: light-dark(var(--color-border-base-light), var(--color-border-base-dark));
37
- --color-border-muted: light-dark(var(--color-border-muted-light), var(--color-border-muted-dark));
38
- --color-border-subtle: light-dark(var(--color-border-subtle-light), var(--color-border-subtle-dark));
39
- --color-border-on-emphasis: light-dark(var(--color-border-on-emphasis-light), var(--color-border-on-emphasis-dark));
40
- --color-border-hover: light-dark(var(--color-border-hover-light), var(--color-border-hover-dark));
41
- --color-status-info-emphasis: light-dark(var(--color-status-info-emphasis-light), var(--color-status-info-emphasis-dark));
42
- --color-status-info-base: light-dark(var(--color-status-info-base-light), var(--color-status-info-base-dark));
43
- --color-status-info-surface: light-dark(var(--color-status-info-surface-light), var(--color-status-info-surface-dark));
44
- --color-status-info-hover: light-dark(var(--color-status-info-hover-light), var(--color-status-info-hover-light));
45
- --color-status-info-contrast-lightness: light-dark(var(--color-status-info-contrast-lightness-light), var(--color-status-info-contrast-lightness-dark));
46
- --color-status-info-contrast: light-dark(var(--color-status-info-contrast-light), var(--color-status-info-contrast-dark));
47
- --color-status-success-emphasis: light-dark(var(--color-status-success-emphasis-light), var(--color-status-success-emphasis-dark));
48
- --color-status-success-base: light-dark(var(--color-status-success-base-light), var(--color-status-success-base-dark));
49
- --color-status-success-surface: light-dark(var(--color-status-success-surface-light), var(--color-status-success-surface-dark));
50
- --color-status-success-hover: light-dark(var(--color-status-success-hover-light), var(--color-status-success-hover-light));
51
- --color-status-success-contrast-lightness: light-dark(var(--color-status-success-contrast-lightness-light), var(--color-status-success-contrast-lightness-dark));
52
- --color-status-success-contrast: light-dark(var(--color-status-success-contrast-light), var(--color-status-success-contrast-dark));
53
- --color-status-warning-emphasis: light-dark(var(--color-status-warning-emphasis-light), var(--color-status-warning-emphasis-dark));
54
- --color-status-warning-base: light-dark(var(--color-status-warning-base-light), var(--color-status-warning-base-dark));
55
- --color-status-warning-surface: light-dark(var(--color-status-warning-surface-light), var(--color-status-warning-surface-dark));
56
- --color-status-warning-hover: light-dark(var(--color-status-warning-hover-light), var(--color-status-warning-hover-light));
57
- --color-status-warning-contrast-lightness: light-dark(var(--color-status-warning-contrast-lightness-light), var(--color-status-warning-contrast-lightness-dark));
58
- --color-status-warning-contrast: light-dark(var(--color-status-warning-contrast-light), var(--color-status-warning-contrast-dark));
59
- --color-status-danger-emphasis: light-dark(var(--color-status-danger-emphasis-light), var(--color-status-danger-emphasis-dark));
60
- --color-status-danger-base: light-dark(var(--color-status-danger-base-light), var(--color-status-danger-base-dark));
61
- --color-status-danger-surface: light-dark(var(--color-status-danger-surface-light), var(--color-status-danger-surface-dark));
62
- --color-status-danger-hover: light-dark(var(--color-status-danger-hover-light), var(--color-status-danger-hover-light));
63
- --color-status-danger-contrast-lightness: light-dark(var(--color-status-danger-contrast-lightness-light), var(--color-status-danger-contrast-lightness-dark));
64
- --color-status-danger-contrast: light-dark(var(--color-status-danger-contrast-light), var(--color-status-danger-contrast-dark));
65
- --shadow-color: light-dark(var(--shadow-color-light), var(--shadow-color-dark));
66
- --triangle-down-url: light-dark(var(--triangle-down-url-light), var(--triangle-down-url-dark));
67
- --triangle-up-url: light-dark(var(--triangle-up-url-light), var(--triangle-up-url-dark));
28
+ --l-brand-primary: var(--lightningcss-light, var(--l-brand-primary-light)) var(--lightningcss-dark, var(--l-brand-primary-dark));
29
+ --color-brand-primary-emphasis: var(--lightningcss-light, var(--color-brand-primary-emphasis-light)) var(--lightningcss-dark, var(--color-brand-primary-emphasis-dark));
30
+ --color-brand-primary-base: var(--lightningcss-light, var(--color-brand-primary-base-light)) var(--lightningcss-dark, var(--color-brand-primary-base-dark));
31
+ --color-brand-primary-surface: var(--lightningcss-light, var(--color-brand-primary-surface-light)) var(--lightningcss-dark, var(--color-brand-primary-surface-dark));
32
+ --color-brand-primary-hover: var(--lightningcss-light, var(--color-brand-primary-hover-light)) var(--lightningcss-dark, var(--color-brand-primary-hover-light));
33
+ --color-brand-primary-contrast-lightness: var(--lightningcss-light, var(--color-brand-primary-contrast-lightness-light)) var(--lightningcss-dark, var(--color-brand-primary-contrast-lightness-dark));
34
+ --color-brand-primary-contrast: var(--lightningcss-light, var(--color-brand-primary-contrast-light)) var(--lightningcss-dark, var(--color-brand-primary-contrast-dark));
35
+ --color-brand-secondary-emphasis: var(--lightningcss-light, var(--color-brand-secondary-emphasis-light)) var(--lightningcss-dark, var(--color-brand-secondary-emphasis-dark));
36
+ --color-brand-secondary-base: var(--lightningcss-light, var(--color-brand-secondary-base-light)) var(--lightningcss-dark, var(--color-brand-secondary-base-dark));
37
+ --color-brand-secondary-surface: var(--lightningcss-light, var(--color-brand-secondary-surface-light)) var(--lightningcss-dark, var(--color-brand-secondary-surface-dark));
38
+ --color-brand-secondary-hover: var(--lightningcss-light, var(--color-brand-secondary-hover-light)) var(--lightningcss-dark, var(--color-brand-secondary-hover-dark));
39
+ --color-brand-secondary-contrast: var(--lightningcss-light, var(--color-brand-secondary-contrast-light)) var(--lightningcss-dark, var(--color-brand-secondary-contrast-dark));
40
+ --color-text-base: var(--lightningcss-light, var(--color-text-base-light)) var(--lightningcss-dark, var(--color-text-base-dark));
41
+ --color-text-muted: var(--lightningcss-light, var(--color-text-muted-light)) var(--lightningcss-dark, var(--color-text-muted-dark));
42
+ --color-text-subtle: var(--lightningcss-light, var(--color-text-subtle-light)) var(--lightningcss-dark, var(--color-text-subtle-dark));
43
+ --color-text-on-emphasis: var(--lightningcss-light, var(--color-text-on-emphasis-light)) var(--lightningcss-dark, var(--color-text-on-emphasis-dark));
44
+ --color-text-hover: var(--lightningcss-light, var(--color-text-hover-light)) var(--lightningcss-dark, var(--color-text-hover-dark));
45
+ --color-surface-base: var(--lightningcss-light, var(--color-surface-base-light)) var(--lightningcss-dark, var(--color-surface-base-dark));
46
+ --color-surface-muted: var(--lightningcss-light, var(--color-surface-muted-light)) var(--lightningcss-dark, var(--color-surface-muted-dark));
47
+ --color-surface-subtle: var(--lightningcss-light, var(--color-surface-subtle-light)) var(--lightningcss-dark, var(--color-surface-subtle-dark));
48
+ --color-surface-emphasis: var(--lightningcss-light, var(--color-surface-emphasis-light)) var(--lightningcss-dark, var(--color-surface-emphasis-dark));
49
+ --color-border-base: var(--lightningcss-light, var(--color-border-base-light)) var(--lightningcss-dark, var(--color-border-base-dark));
50
+ --color-border-muted: var(--lightningcss-light, var(--color-border-muted-light)) var(--lightningcss-dark, var(--color-border-muted-dark));
51
+ --color-border-subtle: var(--lightningcss-light, var(--color-border-subtle-light)) var(--lightningcss-dark, var(--color-border-subtle-dark));
52
+ --color-border-on-emphasis: var(--lightningcss-light, var(--color-border-on-emphasis-light)) var(--lightningcss-dark, var(--color-border-on-emphasis-dark));
53
+ --color-border-hover: var(--lightningcss-light, var(--color-border-hover-light)) var(--lightningcss-dark, var(--color-border-hover-dark));
54
+ --color-status-info-emphasis: var(--lightningcss-light, var(--color-status-info-emphasis-light)) var(--lightningcss-dark, var(--color-status-info-emphasis-dark));
55
+ --color-status-info-base: var(--lightningcss-light, var(--color-status-info-base-light)) var(--lightningcss-dark, var(--color-status-info-base-dark));
56
+ --color-status-info-surface: var(--lightningcss-light, var(--color-status-info-surface-light)) var(--lightningcss-dark, var(--color-status-info-surface-dark));
57
+ --color-status-info-hover: var(--lightningcss-light, var(--color-status-info-hover-light)) var(--lightningcss-dark, var(--color-status-info-hover-light));
58
+ --color-status-info-contrast-lightness: var(--lightningcss-light, var(--color-status-info-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-info-contrast-lightness-dark));
59
+ --color-status-info-contrast: var(--lightningcss-light, var(--color-status-info-contrast-light)) var(--lightningcss-dark, var(--color-status-info-contrast-dark));
60
+ --color-status-success-emphasis: var(--lightningcss-light, var(--color-status-success-emphasis-light)) var(--lightningcss-dark, var(--color-status-success-emphasis-dark));
61
+ --color-status-success-base: var(--lightningcss-light, var(--color-status-success-base-light)) var(--lightningcss-dark, var(--color-status-success-base-dark));
62
+ --color-status-success-surface: var(--lightningcss-light, var(--color-status-success-surface-light)) var(--lightningcss-dark, var(--color-status-success-surface-dark));
63
+ --color-status-success-hover: var(--lightningcss-light, var(--color-status-success-hover-light)) var(--lightningcss-dark, var(--color-status-success-hover-light));
64
+ --color-status-success-contrast-lightness: var(--lightningcss-light, var(--color-status-success-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-success-contrast-lightness-dark));
65
+ --color-status-success-contrast: var(--lightningcss-light, var(--color-status-success-contrast-light)) var(--lightningcss-dark, var(--color-status-success-contrast-dark));
66
+ --color-status-warning-emphasis: var(--lightningcss-light, var(--color-status-warning-emphasis-light)) var(--lightningcss-dark, var(--color-status-warning-emphasis-dark));
67
+ --color-status-warning-base: var(--lightningcss-light, var(--color-status-warning-base-light)) var(--lightningcss-dark, var(--color-status-warning-base-dark));
68
+ --color-status-warning-surface: var(--lightningcss-light, var(--color-status-warning-surface-light)) var(--lightningcss-dark, var(--color-status-warning-surface-dark));
69
+ --color-status-warning-hover: var(--lightningcss-light, var(--color-status-warning-hover-light)) var(--lightningcss-dark, var(--color-status-warning-hover-light));
70
+ --color-status-warning-contrast-lightness: var(--lightningcss-light, var(--color-status-warning-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-warning-contrast-lightness-dark));
71
+ --color-status-warning-contrast: var(--lightningcss-light, var(--color-status-warning-contrast-light)) var(--lightningcss-dark, var(--color-status-warning-contrast-dark));
72
+ --color-status-danger-emphasis: var(--lightningcss-light, var(--color-status-danger-emphasis-light)) var(--lightningcss-dark, var(--color-status-danger-emphasis-dark));
73
+ --color-status-danger-base: var(--lightningcss-light, var(--color-status-danger-base-light)) var(--lightningcss-dark, var(--color-status-danger-base-dark));
74
+ --color-status-danger-surface: var(--lightningcss-light, var(--color-status-danger-surface-light)) var(--lightningcss-dark, var(--color-status-danger-surface-dark));
75
+ --color-status-danger-hover: var(--lightningcss-light, var(--color-status-danger-hover-light)) var(--lightningcss-dark, var(--color-status-danger-hover-light));
76
+ --color-status-danger-contrast-lightness: var(--lightningcss-light, var(--color-status-danger-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-danger-contrast-lightness-dark));
77
+ --color-status-danger-contrast: var(--lightningcss-light, var(--color-status-danger-contrast-light)) var(--lightningcss-dark, var(--color-status-danger-contrast-dark));
78
+ --shadow-color: var(--lightningcss-light, var(--shadow-color-light)) var(--lightningcss-dark, var(--shadow-color-dark));
79
+ --triangle-down-url: var(--lightningcss-light, var(--triangle-down-url-light)) var(--lightningcss-dark, var(--triangle-down-url-dark));
80
+ --triangle-up-url: var(--lightningcss-light, var(--triangle-up-url-light)) var(--lightningcss-dark, var(--triangle-up-url-dark));
68
81
  }
69
82
  }