@nordcode/ui 1.1.5 → 1.1.7
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.
- package/CHANGELOG.md +12 -0
- package/out/bundle.css +150 -79
- package/out/bundle_configless.css +150 -79
- package/out/colors.css +53 -66
- package/out/complete.css +156 -85
- package/out/complete_configless.css +156 -85
- package/out/src/assets/fonts/DMMono-Regular.woff +0 -0
- package/out/src/assets/fonts/DMMono-Regular.woff2 +0 -0
- package/out/src/assets/fonts/fonts.css +7 -0
- package/out/src/assets/icons/ArrowRightSolid.svelte +1 -0
- package/out/src/assets/icons/arrow-right-solid.svg +1 -0
- package/out/src/assets/icons/favicon.png +0 -0
- package/out/src/assets/icons/favicon.svg +8 -0
- package/out/src/assets/logos/nordcode-logo-icon.svg +3 -0
- package/out/src/assets/logos/nordcode-logo.svg +17 -0
- package/out/src/modules/copyButtons/ts/copyButtons.ts +9 -0
- package/out/src/modules/dialogs/svelte/dialog.svelte +27 -0
- package/out/src/modules/dialogs/ts/LICENCE +171 -0
- package/out/src/modules/dialogs/ts/dialogs.ts +111 -0
- package/out/src/modules/notifications/js/notifications.js +294 -0
- package/out/src/modules/notifications/svelte/NotificationCenter.svelte +18 -0
- package/out/src/modules/notifications/svelte/NotificationTemplate.svelte +16 -0
- package/out/src/modules/sectionObserver/ts/sectionOberserver.ts +34 -0
- package/out/src/styles/bundle.css +7 -0
- package/out/src/styles/bundle_configless.css +5 -0
- package/out/src/styles/complete.css +5 -0
- package/out/src/styles/complete_configless.css +5 -0
- package/out/src/styles/components/alerts.css +20 -0
- package/out/src/styles/components/badges.css +14 -0
- package/out/src/styles/components/breadcrumbs.css +37 -0
- package/out/src/styles/components/bundle.css +13 -0
- package/out/src/styles/components/buttons.css +260 -0
- package/out/src/styles/components/card.css +55 -0
- package/out/src/styles/components/dialogs.css +138 -0
- package/out/src/styles/components/forms.css +41 -0
- package/out/src/styles/components/gallery.css +66 -0
- package/out/src/styles/components/icons.css +60 -0
- package/out/src/styles/components/inputs/base.css +249 -0
- package/out/src/styles/components/inputs/bundle.css +5 -0
- package/out/src/styles/components/inputs/fields.css +76 -0
- package/out/src/styles/components/inputs/segmented.css +114 -0
- package/out/src/styles/components/inputs/switch.css +42 -0
- package/out/src/styles/components/inputs/tag-select.css +41 -0
- package/out/src/styles/components/lists.css +40 -0
- package/out/src/styles/components/notifications.css +135 -0
- package/out/src/styles/components/tables.css +7 -0
- package/out/src/styles/config/bundle.css +2 -0
- package/out/src/styles/config/config.css +700 -0
- package/out/src/styles/config/extras.css +12 -0
- package/out/src/styles/exceptions/bundle.css +3 -0
- package/out/src/styles/exceptions/misc.css +21 -0
- package/out/src/styles/exceptions/spacings.css +15 -0
- package/out/src/styles/exceptions/typography.css +57 -0
- package/out/src/styles/theme/colors.css +165 -0
- package/out/src/styles/theme/colors_processed.css +87 -0
- package/out/src/styles/utils/base.css +415 -0
- package/out/src/styles/utils/bundle.css +6 -0
- package/out/src/styles/utils/easings.css +364 -0
- package/out/src/styles/utils/layouts.css +281 -0
- package/out/src/styles/utils/media.css +55 -0
- package/out/src/styles/utils/reset.css +145 -0
- package/out/src/styles/utils/theme.css +125 -0
- package/package.json +1 -1
- package/src/styles/components/icons.css +2 -2
- package/src/styles/components/inputs/base.css +1 -1
- package/src/styles/components/inputs/fields.css +2 -2
- package/src/styles/components/inputs/segmented.css +1 -1
- package/src/styles/components/inputs/tag-select.css +1 -1
- package/src/styles/exceptions/typography.css +15 -0
- package/src/styles/utils/base.css +104 -9
- package/src/styles/utils/layouts.css +3 -3
- package/src/styles/utils/reset.css +4 -6
- package/transform.js +11 -23
|
@@ -2,84 +2,71 @@
|
|
|
2
2
|
|
|
3
3
|
@layer theme {
|
|
4
4
|
:where(html) {
|
|
5
|
-
--lightningcss-light: initial;
|
|
6
|
-
--lightningcss-dark: ;
|
|
7
5
|
color-scheme: light dark;
|
|
8
6
|
}
|
|
9
7
|
|
|
10
|
-
@media (prefers-color-scheme: dark) {
|
|
11
|
-
:where(html) {
|
|
12
|
-
--lightningcss-light: ;
|
|
13
|
-
--lightningcss-dark: initial;
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
|
|
17
8
|
:where([data-theme="light"]) {
|
|
18
|
-
--lightningcss-light: initial;
|
|
19
|
-
--lightningcss-dark: ;
|
|
20
9
|
color-scheme: light;
|
|
21
10
|
}
|
|
22
11
|
|
|
23
12
|
:where([data-theme="dark"]) {
|
|
24
|
-
--lightningcss-light: ;
|
|
25
|
-
--lightningcss-dark: initial;
|
|
26
13
|
color-scheme: dark;
|
|
27
14
|
}
|
|
28
15
|
|
|
29
16
|
:where(:root) {
|
|
30
|
-
--l-brand-primary:
|
|
31
|
-
--color-brand-primary-emphasis:
|
|
32
|
-
--color-brand-primary-base:
|
|
33
|
-
--color-brand-primary-surface:
|
|
34
|
-
--color-brand-primary-hover:
|
|
35
|
-
--color-brand-primary-contrast-lightness:
|
|
36
|
-
--color-brand-primary-contrast:
|
|
37
|
-
--color-brand-secondary-emphasis:
|
|
38
|
-
--color-brand-secondary-base:
|
|
39
|
-
--color-brand-secondary-surface:
|
|
40
|
-
--color-brand-secondary-hover:
|
|
41
|
-
--color-brand-secondary-contrast:
|
|
42
|
-
--color-text-base:
|
|
43
|
-
--color-text-muted:
|
|
44
|
-
--color-text-subtle:
|
|
45
|
-
--color-text-on-emphasis:
|
|
46
|
-
--color-text-hover:
|
|
47
|
-
--color-surface-base:
|
|
48
|
-
--color-surface-muted:
|
|
49
|
-
--color-surface-subtle:
|
|
50
|
-
--color-surface-emphasis:
|
|
51
|
-
--color-border-base:
|
|
52
|
-
--color-border-muted:
|
|
53
|
-
--color-border-subtle:
|
|
54
|
-
--color-border-on-emphasis:
|
|
55
|
-
--color-border-hover:
|
|
56
|
-
--color-status-info-emphasis:
|
|
57
|
-
--color-status-info-base:
|
|
58
|
-
--color-status-info-surface:
|
|
59
|
-
--color-status-info-hover:
|
|
60
|
-
--color-status-info-contrast-lightness:
|
|
61
|
-
--color-status-info-contrast:
|
|
62
|
-
--color-status-success-emphasis:
|
|
63
|
-
--color-status-success-base:
|
|
64
|
-
--color-status-success-surface:
|
|
65
|
-
--color-status-success-hover:
|
|
66
|
-
--color-status-success-contrast-lightness:
|
|
67
|
-
--color-status-success-contrast:
|
|
68
|
-
--color-status-warning-emphasis:
|
|
69
|
-
--color-status-warning-base:
|
|
70
|
-
--color-status-warning-surface:
|
|
71
|
-
--color-status-warning-hover:
|
|
72
|
-
--color-status-warning-contrast-lightness:
|
|
73
|
-
--color-status-warning-contrast:
|
|
74
|
-
--color-status-danger-emphasis:
|
|
75
|
-
--color-status-danger-base:
|
|
76
|
-
--color-status-danger-surface:
|
|
77
|
-
--color-status-danger-hover:
|
|
78
|
-
--color-status-danger-contrast-lightness:
|
|
79
|
-
--color-status-danger-contrast:
|
|
80
|
-
--shadow-color:
|
|
81
|
-
--triangle-down-url:
|
|
82
|
-
--triangle-up-url:
|
|
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));
|
|
83
70
|
}
|
|
84
71
|
}
|
|
85
72
|
|
|
@@ -136,6 +123,10 @@
|
|
|
136
123
|
}
|
|
137
124
|
|
|
138
125
|
:where(body) {
|
|
126
|
+
-webkit-text-decoration-skip-ink: auto;
|
|
127
|
+
text-decoration-skip-ink: auto;
|
|
128
|
+
font-optical-sizing: auto;
|
|
129
|
+
font-kerning: normal;
|
|
139
130
|
min-block-size: 100vh;
|
|
140
131
|
}
|
|
141
132
|
|
|
@@ -148,8 +139,6 @@
|
|
|
148
139
|
}
|
|
149
140
|
|
|
150
141
|
:where(a:not([class])) {
|
|
151
|
-
-webkit-text-decoration-skip-ink: auto;
|
|
152
|
-
text-decoration-skip-ink: auto;
|
|
153
142
|
color: currentColor;
|
|
154
143
|
}
|
|
155
144
|
|
|
@@ -190,11 +179,6 @@
|
|
|
190
179
|
letter-spacing: inherit;
|
|
191
180
|
}
|
|
192
181
|
|
|
193
|
-
:where(p) {
|
|
194
|
-
text-wrap: pretty;
|
|
195
|
-
max-inline-size: var(--measure-base);
|
|
196
|
-
}
|
|
197
|
-
|
|
198
182
|
:where(html):has(dialog:modal) {
|
|
199
183
|
scrollbar-gutter: stable;
|
|
200
184
|
overflow: hidden;
|
|
@@ -280,13 +264,13 @@
|
|
|
280
264
|
:where(figcaption) {
|
|
281
265
|
color: var(--color-surface-subtle);
|
|
282
266
|
background-color: var(--color-text-base);
|
|
283
|
-
padding: .
|
|
267
|
+
padding: .25lh 1ch;
|
|
284
268
|
display: block;
|
|
285
269
|
}
|
|
286
270
|
|
|
287
271
|
:where(details) {
|
|
288
272
|
--p-x-details: 2ch;
|
|
289
|
-
--p-y-details: .
|
|
273
|
+
--p-y-details: .75lh;
|
|
290
274
|
--b-r-details: var(--border-radius-medium);
|
|
291
275
|
background-color: var(--color-surface-muted);
|
|
292
276
|
border-radius: var(--b-r-details);
|
|
@@ -442,6 +426,9 @@
|
|
|
442
426
|
:where(abbr) {
|
|
443
427
|
-webkit-text-decoration-color: var(--color-brand-primary-base);
|
|
444
428
|
text-decoration-color: var(--color-brand-primary-base);
|
|
429
|
+
font-variant-numeric: oldstyle-nums;
|
|
430
|
+
font-size: 110%;
|
|
431
|
+
font-variant-caps: all-small-caps;
|
|
445
432
|
}
|
|
446
433
|
|
|
447
434
|
:where([aria-disabled="true"], .disabled, :disabled) {
|
|
@@ -581,6 +568,10 @@
|
|
|
581
568
|
background-color: var(--color-surface-muted);
|
|
582
569
|
}
|
|
583
570
|
|
|
571
|
+
:where(td, math, time[datetime*=":"]) {
|
|
572
|
+
font-variant-numeric: tabular-nums lining-nums slashed-zero;
|
|
573
|
+
}
|
|
574
|
+
|
|
584
575
|
:target {
|
|
585
576
|
scroll-margin-block-start: 2ex;
|
|
586
577
|
}
|
|
@@ -613,7 +604,72 @@
|
|
|
613
604
|
}
|
|
614
605
|
|
|
615
606
|
:where(li > :is(ul, ol)) {
|
|
616
|
-
margin-block-start: .
|
|
607
|
+
margin-block-start: .25lh;
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
@supports (font-variant-position: sub) {
|
|
611
|
+
:where(sub) {
|
|
612
|
+
vertical-align: baseline;
|
|
613
|
+
font-size: 100%;
|
|
614
|
+
line-height: inherit;
|
|
615
|
+
font-variant-position: sub;
|
|
616
|
+
}
|
|
617
|
+
}
|
|
618
|
+
|
|
619
|
+
@supports (font-variant-position: super) {
|
|
620
|
+
:where(sup) {
|
|
621
|
+
vertical-align: baseline;
|
|
622
|
+
font-size: 100%;
|
|
623
|
+
line-height: inherit;
|
|
624
|
+
font-variant-position: super;
|
|
625
|
+
}
|
|
626
|
+
}
|
|
627
|
+
|
|
628
|
+
:lang(en) > * {
|
|
629
|
+
quotes: "“" "”" "‘" "’";
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
:lang(de) > * {
|
|
633
|
+
quotes: "„" "“" "‚" "‘";
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
:where() {
|
|
637
|
+
content: open-quote;
|
|
638
|
+
content: close-quote;
|
|
639
|
+
content: "“";
|
|
640
|
+
content: "”";
|
|
641
|
+
margin-inline-start: -.87ch;
|
|
642
|
+
}
|
|
643
|
+
|
|
644
|
+
:where(.quoted p) {
|
|
645
|
+
hanging-punctuation: first last;
|
|
646
|
+
}
|
|
647
|
+
|
|
648
|
+
@supports (hanging-punctuation: first last) {
|
|
649
|
+
:where() {
|
|
650
|
+
margin-inline-start: 0;
|
|
651
|
+
}
|
|
652
|
+
}
|
|
653
|
+
|
|
654
|
+
:where(.prose) {
|
|
655
|
+
-webkit-hyphens: auto;
|
|
656
|
+
hyphens: auto;
|
|
657
|
+
hyphenate-limit-chars: 7 4 3;
|
|
658
|
+
hyphenate-limit-lines: 2;
|
|
659
|
+
hyphenate-limit-zone: 8%;
|
|
660
|
+
hyphenate-limit-last: always;
|
|
661
|
+
text-wrap: pretty;
|
|
662
|
+
}
|
|
663
|
+
|
|
664
|
+
:where(.prose p) {
|
|
665
|
+
text-wrap: pretty;
|
|
666
|
+
font-variant-numeric: oldstyle-nums proportional-nums;
|
|
667
|
+
max-inline-size: var(--measure-base);
|
|
668
|
+
}
|
|
669
|
+
|
|
670
|
+
:where(.prose pre, .prose code, .prose var, .prose samp, .prose kbd, .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6) {
|
|
671
|
+
-webkit-hyphens: manual;
|
|
672
|
+
hyphens: manual;
|
|
617
673
|
}
|
|
618
674
|
}
|
|
619
675
|
|
|
@@ -671,7 +727,7 @@
|
|
|
671
727
|
}
|
|
672
728
|
|
|
673
729
|
:where(.nc-flow) > * + * {
|
|
674
|
-
margin-block-start: var(--flow-gap,
|
|
730
|
+
margin-block-start: var(--flow-gap, 1lh);
|
|
675
731
|
}
|
|
676
732
|
|
|
677
733
|
:where(.nc-flow) > * {
|
|
@@ -680,11 +736,11 @@
|
|
|
680
736
|
|
|
681
737
|
:where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) {
|
|
682
738
|
max-inline-size: var(--flow-headline-meassure, 32ch);
|
|
683
|
-
--flow-gap: 1.
|
|
739
|
+
--flow-gap: 1.5lh;
|
|
684
740
|
}
|
|
685
741
|
|
|
686
742
|
:where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) + :not([class]) {
|
|
687
|
-
--flow-gap: .
|
|
743
|
+
--flow-gap: .5lh;
|
|
688
744
|
}
|
|
689
745
|
|
|
690
746
|
:where(.nc-flow) > figure {
|
|
@@ -1082,6 +1138,21 @@
|
|
|
1082
1138
|
text-transform: capitalize;
|
|
1083
1139
|
}
|
|
1084
1140
|
|
|
1141
|
+
.centered {
|
|
1142
|
+
text-align: center;
|
|
1143
|
+
text-wrap: balance;
|
|
1144
|
+
}
|
|
1145
|
+
|
|
1146
|
+
.uppercase {
|
|
1147
|
+
text-transform: uppercase;
|
|
1148
|
+
--opentype-case: on;
|
|
1149
|
+
}
|
|
1150
|
+
|
|
1151
|
+
.smallcaps {
|
|
1152
|
+
font-variant-numeric: oldstyle-nums;
|
|
1153
|
+
font-variant-caps: all-small-caps;
|
|
1154
|
+
}
|
|
1155
|
+
|
|
1085
1156
|
.strong {
|
|
1086
1157
|
font-weight: var(--font-weight-strong);
|
|
1087
1158
|
}
|
package/out/colors.css
CHANGED
|
@@ -1,82 +1,69 @@
|
|
|
1
1
|
@layer theme {
|
|
2
2
|
:where(html) {
|
|
3
|
-
--lightningcss-light: initial;
|
|
4
|
-
--lightningcss-dark: ;
|
|
5
3
|
color-scheme: light dark;
|
|
6
4
|
}
|
|
7
5
|
|
|
8
|
-
@media (prefers-color-scheme: dark) {
|
|
9
|
-
:where(html) {
|
|
10
|
-
--lightningcss-light: ;
|
|
11
|
-
--lightningcss-dark: initial;
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
|
|
15
6
|
:where([data-theme="light"]) {
|
|
16
|
-
--lightningcss-light: initial;
|
|
17
|
-
--lightningcss-dark: ;
|
|
18
7
|
color-scheme: light;
|
|
19
8
|
}
|
|
20
9
|
|
|
21
10
|
:where([data-theme="dark"]) {
|
|
22
|
-
--lightningcss-light: ;
|
|
23
|
-
--lightningcss-dark: initial;
|
|
24
11
|
color-scheme: dark;
|
|
25
12
|
}
|
|
26
13
|
|
|
27
14
|
:where(:root) {
|
|
28
|
-
--l-brand-primary:
|
|
29
|
-
--color-brand-primary-emphasis:
|
|
30
|
-
--color-brand-primary-base:
|
|
31
|
-
--color-brand-primary-surface:
|
|
32
|
-
--color-brand-primary-hover:
|
|
33
|
-
--color-brand-primary-contrast-lightness:
|
|
34
|
-
--color-brand-primary-contrast:
|
|
35
|
-
--color-brand-secondary-emphasis:
|
|
36
|
-
--color-brand-secondary-base:
|
|
37
|
-
--color-brand-secondary-surface:
|
|
38
|
-
--color-brand-secondary-hover:
|
|
39
|
-
--color-brand-secondary-contrast:
|
|
40
|
-
--color-text-base:
|
|
41
|
-
--color-text-muted:
|
|
42
|
-
--color-text-subtle:
|
|
43
|
-
--color-text-on-emphasis:
|
|
44
|
-
--color-text-hover:
|
|
45
|
-
--color-surface-base:
|
|
46
|
-
--color-surface-muted:
|
|
47
|
-
--color-surface-subtle:
|
|
48
|
-
--color-surface-emphasis:
|
|
49
|
-
--color-border-base:
|
|
50
|
-
--color-border-muted:
|
|
51
|
-
--color-border-subtle:
|
|
52
|
-
--color-border-on-emphasis:
|
|
53
|
-
--color-border-hover:
|
|
54
|
-
--color-status-info-emphasis:
|
|
55
|
-
--color-status-info-base:
|
|
56
|
-
--color-status-info-surface:
|
|
57
|
-
--color-status-info-hover:
|
|
58
|
-
--color-status-info-contrast-lightness:
|
|
59
|
-
--color-status-info-contrast:
|
|
60
|
-
--color-status-success-emphasis:
|
|
61
|
-
--color-status-success-base:
|
|
62
|
-
--color-status-success-surface:
|
|
63
|
-
--color-status-success-hover:
|
|
64
|
-
--color-status-success-contrast-lightness:
|
|
65
|
-
--color-status-success-contrast:
|
|
66
|
-
--color-status-warning-emphasis:
|
|
67
|
-
--color-status-warning-base:
|
|
68
|
-
--color-status-warning-surface:
|
|
69
|
-
--color-status-warning-hover:
|
|
70
|
-
--color-status-warning-contrast-lightness:
|
|
71
|
-
--color-status-warning-contrast:
|
|
72
|
-
--color-status-danger-emphasis:
|
|
73
|
-
--color-status-danger-base:
|
|
74
|
-
--color-status-danger-surface:
|
|
75
|
-
--color-status-danger-hover:
|
|
76
|
-
--color-status-danger-contrast-lightness:
|
|
77
|
-
--color-status-danger-contrast:
|
|
78
|
-
--shadow-color:
|
|
79
|
-
--triangle-down-url:
|
|
80
|
-
--triangle-up-url:
|
|
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));
|
|
81
68
|
}
|
|
82
69
|
}
|