@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/complete_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
 
@@ -1213,7 +1221,7 @@
1213
1221
  :where(.nc-alert) {
1214
1222
  background: var(--surface);
1215
1223
  color: var(--text);
1216
- gap: 1ch;
1224
+ gap: .75em;
1217
1225
  }
1218
1226
 
1219
1227
  :where(.nc-alert) > .nc-icon {
@@ -1240,7 +1248,7 @@
1240
1248
  border-radius: var(--border-radius-small);
1241
1249
  background: var(--surface, transparent);
1242
1250
  inline-size: max-content;
1243
- padding: .5lh 1ch;
1251
+ padding: .5em;
1244
1252
  line-height: 1;
1245
1253
  }
1246
1254
  }
@@ -1265,7 +1273,7 @@
1265
1273
  color: inherit;
1266
1274
  content: "›";
1267
1275
  font-size: inherit;
1268
- padding-inline: 1ch;
1276
+ padding-inline: .5em;
1269
1277
  }
1270
1278
 
1271
1279
  :where(.nc-breadcrumb-link) {
@@ -1398,7 +1406,7 @@
1398
1406
  }
1399
1407
 
1400
1408
  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-small {
1401
- --_button-padding-inline: 1ch;
1409
+ --_button-padding-inline: .5em;
1402
1410
  min-block-size: var(--button-height-small);
1403
1411
  }
1404
1412
 
@@ -1407,8 +1415,8 @@
1407
1415
  }
1408
1416
 
1409
1417
  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-offset {
1410
- --_button-offset-distance: var(--button-offset-distance, -.1lh);
1411
- --_button-offset-distance-hover: var(--button-offset-distance-hover, -.05lh);
1418
+ --_button-offset-distance: var(--button-offset-distance, -.15em);
1419
+ --_button-offset-distance-hover: var(--button-offset-distance-hover, -.075em);
1412
1420
  --_button-transform: translate(var(--_button-offset-distance), var(--_button-offset-distance));
1413
1421
  --_button-hover-transform: translate(var(--_button-offset-distance-hover), var(--_button-offset-distance-hover));
1414
1422
  --button-box-shadow: calc(var(--_button-offset-distance) / -2) calc(var(--_button-offset-distance) / -2) 0 0 var(--shadow-color), calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -1) 0 0 var(--shadow-color), calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -2) 0 var(--shadow-color);
@@ -1423,7 +1431,7 @@
1423
1431
  }
1424
1432
 
1425
1433
  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button):has(svg) {
1426
- gap: .5ch;
1434
+ gap: .25em;
1427
1435
  }
1428
1436
 
1429
1437
  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button)[aria-label], :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-icon {
@@ -1464,7 +1472,7 @@
1464
1472
  border: var(--_input-border);
1465
1473
  min-block-size: var(--button-height-base);
1466
1474
  border-radius: var(--_input-border-radius);
1467
- padding-inline: 0 1ch;
1475
+ padding-inline: 0 .5em;
1468
1476
  }
1469
1477
 
1470
1478
  :where(input[type="file"]:not([class]))::-webkit-file-upload-button {
@@ -1478,7 +1486,7 @@
1478
1486
  border-inline-end: var(--border-width-thin) solid var(--color-border-base);
1479
1487
  border-start-end-radius: 0;
1480
1488
  border-end-end-radius: 0;
1481
- margin-inline-end: 1ch;
1489
+ margin-inline-end: .5em;
1482
1490
  inset-block-start: 0;
1483
1491
  inset-inline-start: 0;
1484
1492
  transform: none;
@@ -1495,7 +1503,7 @@
1495
1503
  border-inline-end: var(--border-width-thin) solid var(--color-border-base);
1496
1504
  border-start-end-radius: 0;
1497
1505
  border-end-end-radius: 0;
1498
- margin-inline-end: 1ch;
1506
+ margin-inline-end: .5em;
1499
1507
  inset-block-start: 0;
1500
1508
  inset-inline-start: 0;
1501
1509
  transform: none;
@@ -1528,7 +1536,7 @@
1528
1536
  padding-block: var(--_card-padding-block);
1529
1537
  color: var(--_card-color);
1530
1538
  appearance: none;
1531
- border: 1px solid var(--_card-border-color);
1539
+ border: var(--border-width-thin) solid var(--_card-border-color);
1532
1540
  background-color: var(--_card-background-color);
1533
1541
  border-radius: var(--_card-border-radius);
1534
1542
  box-shadow: var(--_card-shadow);
@@ -1567,6 +1575,34 @@
1567
1575
  :where(.nc-card):is([href], button):hover {
1568
1576
  border-color: var(--color-brand-primary-base);
1569
1577
  }
1578
+
1579
+ :where(.nc-clickable-card) {
1580
+ cursor: pointer;
1581
+ position: relative;
1582
+ }
1583
+
1584
+ :where(.nc-clickable-card):focus-within, :where(.nc-clickable-card):hover {
1585
+ outline: var(--border-width-medium) solid var(--color-brand-primary-base);
1586
+ }
1587
+
1588
+ :where(.nc-clickable-card) a[data-link="main"] {
1589
+ font: inherit;
1590
+ text-decoration: none;
1591
+ }
1592
+
1593
+ :where(.nc-clickable-card) a[data-link="main"]:focus-within:focus-visible, :where(.nc-clickable-card) a[data-link="main"]:hover {
1594
+ outline: none;
1595
+ }
1596
+
1597
+ :where(.nc-clickable-card) a[data-link="main"]:before {
1598
+ content: "";
1599
+ position: absolute;
1600
+ inset: 0;
1601
+ }
1602
+
1603
+ :where(.nc-clickable-card) a[data-link="extra"] {
1604
+ position: relative;
1605
+ }
1570
1606
  }
1571
1607
 
1572
1608
  @layer components.dialogs {
@@ -1587,7 +1623,7 @@
1587
1623
  max-inline-size: var(--_dialog-max-inline-size);
1588
1624
  background: var(--color-surface-base);
1589
1625
  border-radius: var(--_dialog-radius);
1590
- overflow-clip-margin: 1rem;
1626
+ overflow-clip-margin: 1em;
1591
1627
  pointer-events: all;
1592
1628
  max-block-size: 100dvh;
1593
1629
  margin: auto 0;
@@ -1627,7 +1663,7 @@
1627
1663
  block-size: max-content;
1628
1664
  inline-size: 100%;
1629
1665
  max-block-size: var(--_dialog-max-block-size);
1630
- overflow-clip-margin: 1rem;
1666
+ overflow-clip-margin: 1em;
1631
1667
  grid-template: "header header"
1632
1668
  "content content" 1fr
1633
1669
  "footer footer"
@@ -1724,7 +1760,7 @@
1724
1760
  :where(.nc-form-hint) {
1725
1761
  font-size: var(--font-size-large);
1726
1762
  color: var(--color-text-muted);
1727
- margin-block: .5lh;
1763
+ margin-block: .75em;
1728
1764
  }
1729
1765
 
1730
1766
  :where(fieldset:not([class]), .nc-fieldset) {
@@ -1742,12 +1778,12 @@
1742
1778
  }
1743
1779
 
1744
1780
  :where(legend:not([class]), .nc-legend) + * {
1745
- margin-block-start: var(--nc-legend-spacing, .8lh);
1781
+ margin-block-start: var(--nc-legend-spacing, 1em);
1746
1782
  }
1747
1783
 
1748
1784
  :where(:is(fieldset:not([class]), .nc-fieldset):has(:is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint)) > :is(legend:not([class]), .nc-legend) + .nc-hint) {
1749
- --nc-legend-spacing: .125lh;
1750
- margin-block-end: .5lh;
1785
+ --nc-legend-spacing: .2em;
1786
+ margin-block-end: .75em;
1751
1787
  }
1752
1788
  }
1753
1789
 
@@ -1927,9 +1963,9 @@
1927
1963
 
1928
1964
  :where(select:not([class]), .nc-select) {
1929
1965
  background-image: var(--triangle-down-url);
1930
- background-position: right 1ch top 50%;
1931
- background-size: 1.5ch 1.25ch;
1932
- padding-inline-end: 3.5ch;
1966
+ background-position: right .5em top 50%;
1967
+ background-size: 1em .75em;
1968
+ padding-inline-end: 1.75em;
1933
1969
  }
1934
1970
 
1935
1971
  :where(textarea:not([class]), .nc-textarea) {
@@ -2064,11 +2100,11 @@
2064
2100
  --_tag-select-checked-text-color: var(--tag-select-checked-text-color, var(--color-brand-primary-contrast));
2065
2101
  --_tag-select-checked-surface-color: var(--tag-select-checked-surface-color, var(--color-brand-primary-base));
2066
2102
  --_tag-select-border-radius: var(--tag-select-border-radius, var(--_input-border-radius));
2067
- --nc-legend-spacing: .25lh;
2103
+ --nc-legend-spacing: .35em;
2068
2104
  }
2069
2105
 
2070
2106
  :where(.nc-tag-select-field):focus-within:has(:focus-visible) {
2071
- outline-offset: 1ch;
2107
+ outline-offset: .5em;
2072
2108
  outline: var(--_input-outline);
2073
2109
  border-radius: var(--_tag-select-border-radius);
2074
2110
  }
@@ -2105,7 +2141,7 @@
2105
2141
  max-inline-size: var(--input-field-max-inline-size);
2106
2142
  grid-template-columns: minmax(0, 1fr);
2107
2143
  place-items: start;
2108
- gap: .25lh;
2144
+ gap: .35em;
2109
2145
  display: grid;
2110
2146
  }
2111
2147
 
@@ -2114,7 +2150,7 @@
2114
2150
  }
2115
2151
 
2116
2152
  :where(.nc-input-field) > .nc-cluster {
2117
- gap: 1ch;
2153
+ gap: .5em;
2118
2154
  }
2119
2155
 
2120
2156
  :where(.nc-input-error) {
@@ -2135,7 +2171,7 @@
2135
2171
  align-items: center;
2136
2172
  block-size: 1em;
2137
2173
  inline-size: 1em;
2138
- margin-inline-end: 1ch;
2174
+ margin-inline-end: .5em;
2139
2175
  display: inline-flex;
2140
2176
  }
2141
2177
 
@@ -2149,7 +2185,7 @@
2149
2185
 
2150
2186
  :where(.nc-checkbox-wrapper) > [data-label] {
2151
2187
  grid-area: label;
2152
- padding-inline-start: 1ch;
2188
+ padding-inline-start: .5em;
2153
2189
  }
2154
2190
 
2155
2191
  :where(.nc-checkbox-wrapper) .nc-input-label {
@@ -2169,7 +2205,7 @@
2169
2205
  }
2170
2206
 
2171
2207
  :where(.nc-radio-field, .nc-checkbox-field) > :not(:first-child) {
2172
- margin-block-start: .6lh;
2208
+ margin-block-start: .75em;
2173
2209
  }
2174
2210
  }
2175
2211
 
@@ -2178,7 +2214,7 @@
2178
2214
  --_segmented-control-border-radius: var(--segmented-control-border-radius, var(--_input-border-radius));
2179
2215
  --_segmented-control-checked-text-color: var(--segmented-control-checked-text-color, var(--color-brand-primary-contrast));
2180
2216
  --_segmented-control-checked-surface-color: var(--segmented-control-checked-surface-color, var(--color-brand-primary-base));
2181
- --nc-legend-spacing: .25lh;
2217
+ --nc-legend-spacing: .35em;
2182
2218
  container: segmented-control / inline-size;
2183
2219
  }
2184
2220
 
@@ -2335,7 +2371,7 @@
2335
2371
  }
2336
2372
 
2337
2373
  :where(.nc-meta-list-item):not(:last-child) {
2338
- margin-block-end: 1ch;
2374
+ margin-block-end: .5em;
2339
2375
  }
2340
2376
 
2341
2377
  @container metalist (width >= 20rem) {
@@ -2347,7 +2383,7 @@
2347
2383
  content: "";
2348
2384
  border-right: var(--border-width-medium) solid var(--color-border-muted);
2349
2385
  transform: calc(var(--border-width-medium) / 2);
2350
- margin: 0 1ch;
2386
+ margin: 0 .5em;
2351
2387
  }
2352
2388
  }
2353
2389
 
@@ -2367,7 +2403,7 @@
2367
2403
  --_notification-max-width: var(--notifications-max-width, 20rem);
2368
2404
  --_notification-gap: var(--notification-gap, var(--spacing-base));
2369
2405
  --_notification-border-color: var(--notification-border-color, var(--color-border-base));
2370
- --_notification-center-background: var(--notification-center-background, color-mix(in oklch, var(---color-surface-subtle), transparent 95%) ;);
2406
+ --_notification-center-background: var(--notification-center-background, color-mix(in oklch, var(---color-surface-subtle), transparent 95%));
2371
2407
  }
2372
2408
 
2373
2409
  :where(.nc-notification-center, .nc-notification-output) {
@@ -2432,7 +2468,7 @@
2432
2468
  color: var(--color-text-base);
2433
2469
  pointer-events: all;
2434
2470
  flex-direction: column;
2435
- padding: .5lh 2ch;
2471
+ padding: .5em 1em;
2436
2472
  display: flex;
2437
2473
  }
2438
2474
 
@@ -2459,7 +2495,7 @@
2459
2495
  justify-content: space-between;
2460
2496
  align-items: flex-end;
2461
2497
  inline-size: 100%;
2462
- margin-block-start: .5ch;
2498
+ margin-block-start: .25em;
2463
2499
  display: flex;
2464
2500
  }
2465
2501
 
package/package.json CHANGED
@@ -12,7 +12,7 @@
12
12
  "type": "git",
13
13
  "url": "https://github.com/nordcode-agency/nordcode/tree/main/packages/ui"
14
14
  },
15
- "version": "1.1.7",
15
+ "version": "1.3.0",
16
16
  "publishConfig": {
17
17
  "access": "public"
18
18
  },
package/src/styles/components/alerts.css CHANGED
@@ -2,10 +2,10 @@
2
2
  :where(.nc-alert) {
3
3
  background: var(--surface);
4
4
  color: var(--text);
5
- gap: 1ch;
5
+ gap: 0.75em;
6
6
  }
7
7
 
8
- :where(.nc-alert)>.nc-icon {
8
+ :where(.nc-alert) > .nc-icon {
9
9
  margin-block: calc((var(--line-height-base) - var(--icon-size)) / 2);
10
10
  }
11
11
 
package/src/styles/components/badges.css CHANGED
@@ -7,7 +7,7 @@
7
7
  border: var(--border-width-thin) solid var(--text, var(--color-text-base));
8
8
  border-radius: var(--border-radius-small);
9
9
  background: var(--surface, transparent);
10
- padding: 0.5lh 1ch;
10
+ padding: 0.5em;
11
11
  inline-size: max-content;
12
12
  line-height: 1;
13
13
  }
package/src/styles/components/breadcrumbs.css CHANGED
@@ -14,7 +14,7 @@
14
14
  }
15
15
 
16
16
  &:not(:last-child):after {
17
- padding-inline: 1ch;
17
+ padding-inline: 0.5em;
18
18
  color: inherit;
19
19
  content: "›";
20
20
  font-size: inherit;