@nordcode/ui 1.1.6 → 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.
Files changed (67) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/out/bundle.css +150 -79
  3. package/out/bundle_configless.css +150 -79
  4. package/out/colors.css +53 -66
  5. package/out/complete.css +156 -85
  6. package/out/complete_configless.css +156 -85
  7. package/out/src/assets/fonts/DMMono-Regular.woff +0 -0
  8. package/out/src/assets/fonts/DMMono-Regular.woff2 +0 -0
  9. package/out/src/assets/fonts/fonts.css +7 -0
  10. package/out/src/assets/icons/ArrowRightSolid.svelte +1 -0
  11. package/out/src/assets/icons/arrow-right-solid.svg +1 -0
  12. package/out/src/assets/icons/favicon.png +0 -0
  13. package/out/src/assets/icons/favicon.svg +8 -0
  14. package/out/src/assets/logos/nordcode-logo-icon.svg +3 -0
  15. package/out/src/assets/logos/nordcode-logo.svg +17 -0
  16. package/out/src/modules/copyButtons/ts/copyButtons.ts +9 -0
  17. package/out/src/modules/dialogs/svelte/dialog.svelte +27 -0
  18. package/out/src/modules/dialogs/ts/LICENCE +171 -0
  19. package/out/src/modules/dialogs/ts/dialogs.ts +111 -0
  20. package/out/src/modules/notifications/js/notifications.js +294 -0
  21. package/out/src/modules/notifications/svelte/NotificationCenter.svelte +18 -0
  22. package/out/src/modules/notifications/svelte/NotificationTemplate.svelte +16 -0
  23. package/out/src/modules/sectionObserver/ts/sectionOberserver.ts +34 -0
  24. package/out/src/styles/bundle.css +7 -0
  25. package/out/src/styles/bundle_configless.css +5 -0
  26. package/out/src/styles/complete.css +5 -0
  27. package/out/src/styles/complete_configless.css +5 -0
  28. package/out/src/styles/components/alerts.css +20 -0
  29. package/out/src/styles/components/badges.css +14 -0
  30. package/out/src/styles/components/breadcrumbs.css +37 -0
  31. package/out/src/styles/components/bundle.css +13 -0
  32. package/out/src/styles/components/buttons.css +260 -0
  33. package/out/src/styles/components/card.css +55 -0
  34. package/out/src/styles/components/dialogs.css +138 -0
  35. package/out/src/styles/components/forms.css +41 -0
  36. package/out/src/styles/components/gallery.css +66 -0
  37. package/out/src/styles/components/icons.css +60 -0
  38. package/out/src/styles/components/inputs/base.css +249 -0
  39. package/out/src/styles/components/inputs/bundle.css +5 -0
  40. package/out/src/styles/components/inputs/fields.css +76 -0
  41. package/out/src/styles/components/inputs/segmented.css +114 -0
  42. package/out/src/styles/components/inputs/switch.css +42 -0
  43. package/out/src/styles/components/inputs/tag-select.css +41 -0
  44. package/out/src/styles/components/lists.css +40 -0
  45. package/out/src/styles/components/notifications.css +135 -0
  46. package/out/src/styles/components/tables.css +7 -0
  47. package/out/src/styles/config/bundle.css +2 -0
  48. package/out/src/styles/config/config.css +700 -0
  49. package/out/src/styles/config/extras.css +12 -0
  50. package/out/src/styles/exceptions/bundle.css +3 -0
  51. package/out/src/styles/exceptions/misc.css +21 -0
  52. package/out/src/styles/exceptions/spacings.css +15 -0
  53. package/out/src/styles/exceptions/typography.css +57 -0
  54. package/out/src/styles/theme/colors.css +165 -0
  55. package/out/src/styles/theme/colors_processed.css +87 -0
  56. package/out/src/styles/utils/base.css +415 -0
  57. package/out/src/styles/utils/bundle.css +6 -0
  58. package/out/src/styles/utils/easings.css +364 -0
  59. package/out/src/styles/utils/layouts.css +281 -0
  60. package/out/src/styles/utils/media.css +55 -0
  61. package/out/src/styles/utils/reset.css +145 -0
  62. package/out/src/styles/utils/theme.css +125 -0
  63. package/package.json +1 -1
  64. package/src/styles/exceptions/typography.css +15 -0
  65. package/src/styles/utils/base.css +101 -6
  66. package/src/styles/utils/reset.css +4 -6
  67. package/transform.js +11 -23
package/out/bundle_configless.css CHANGED
@@ -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: 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));
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: .3lh 1ch;
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: .8lh;
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: .3lh;
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, .8lh);
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.3lh;
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: .3lh;
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: 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));
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
  }