@skra/tokens 0.8.0 → 0.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/brutal/_comp.scss +29 -0
  2. package/brutal/_density.comfortable.scoped.scss +2 -0
  3. package/brutal/_density.comfortable.scss +2 -0
  4. package/brutal/_density.compact.scoped.scss +2 -0
  5. package/brutal/_density.compact.scss +2 -0
  6. package/brutal/_theme.dark.scoped.scss +16 -0
  7. package/brutal/_theme.dark.scss +16 -0
  8. package/brutal/_theme.scoped.scss +29 -0
  9. package/manifests/nav-link.json +136 -0
  10. package/package.json +1 -1
  11. package/skra/_comp.scss +29 -0
  12. package/skra/_density.comfortable.scss +2 -0
  13. package/skra/_density.compact.scss +2 -0
  14. package/skra/_theme.dark.scss +16 -0
  15. package/skra/utilities.scss +14 -1
package/brutal/_comp.scss CHANGED
@@ -351,6 +351,22 @@
351
351
  --skra-comp-menu-border-style: solid;
352
352
  --skra-comp-menu-focus-ring-width: 0.1875rem;
353
353
  --skra-comp-menu-typography-role: body-medium;
354
+ --skra-comp-nav-link-foreground-active: oklch(17.0% 0 0);
355
+ --skra-comp-nav-link-focus-ring-color-hover: oklch(57.0% 0.18 295);
356
+ --skra-comp-nav-link-focus-ring-color-active: oklch(63.0% 0.18 295);
357
+ --skra-comp-nav-link-background-current-hover: oklch(98.0% 0.06 100);
358
+ --skra-comp-nav-link-background-current-active: oklch(98.0% 0.06 100);
359
+ --skra-comp-nav-link-foreground-current-hover: oklch(62.0% 0.11 98);
360
+ --skra-comp-nav-link-foreground-current-active: oklch(68.0% 0.11 98);
361
+ --skra-comp-nav-link-border-color-current-hover: oklch(12.0% 0 0);
362
+ --skra-comp-nav-link-border-color-current-active: oklch(18.0% 0 0);
363
+ --skra-comp-nav-link-background: transparent;
364
+ --skra-comp-nav-link-border-color: transparent;
365
+ --skra-comp-nav-link-border-width: 0rem;
366
+ --skra-comp-nav-link-border-style: solid;
367
+ --skra-comp-nav-link-shadow: none;
368
+ --skra-comp-nav-link-focus-ring-width: 0.125rem;
369
+ --skra-comp-nav-link-border-width-current: 0.1875rem;
354
370
  --skra-comp-popover-background-hover: oklch(85.0% 0.015 95);
355
371
  --skra-comp-popover-background-active: oklch(79.0% 0.015 95);
356
372
  --skra-comp-popover-foreground-hover: oklch(12.0% 0 0);
@@ -467,6 +483,7 @@
467
483
  --skra-comp-surface-border-style: solid;
468
484
  --skra-comp-surface-focus-ring-width: 0.1875rem;
469
485
  --skra-comp-surface-border-width-selected: 0.375rem;
486
+ --skra-comp-surface-link-text-decoration: none;
470
487
  --skra-comp-tabs-foreground-hover: oklch(47.0% 0 0);
471
488
  --skra-comp-tabs-foreground-active: oklch(53.0% 0 0);
472
489
  --skra-comp-tabs-focus-ring-color-hover: oklch(57.0% 0.18 295);
@@ -588,6 +605,7 @@
588
605
  --skra-comp-menu-radius: var(--skra-sys-radius-md);
589
606
  --skra-comp-menu-shadow: var(--skra-sys-shadow-lg);
590
607
  --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
608
+ --skra-comp-nav-link-radius: var(--skra-sys-radius-none);
591
609
  --skra-comp-popover-radius: var(--skra-sys-radius-md);
592
610
  --skra-comp-popover-shadow: var(--skra-sys-shadow-lg);
593
611
  --skra-comp-progress-radius: var(--skra-sys-radius-sm);
@@ -879,6 +897,17 @@
879
897
  --skra-comp-menu-item-padding-block: var(--skra-sys-spacing-2);
880
898
  --skra-comp-menu-item-padding-inline: var(--skra-sys-spacing-3);
881
899
  --skra-comp-menu-item-gap: var(--skra-sys-spacing-2);
900
+ --skra-comp-nav-link-foreground: var(--skra-sys-color-on-surface-subtle);
901
+ --skra-comp-nav-link-padding-block: var(--skra-sys-spacing-2);
902
+ --skra-comp-nav-link-padding-inline: var(--skra-sys-spacing-4);
903
+ --skra-comp-nav-link-motion-duration: var(--skra-sys-motion-duration-fast);
904
+ --skra-comp-nav-link-motion-easing: var(--skra-sys-motion-easing-standard);
905
+ --skra-comp-nav-link-focus-ring-color: var(--skra-sys-color-focus-ring);
906
+ --skra-comp-nav-link-background-hover: var(--skra-sys-color-surface-hover);
907
+ --skra-comp-nav-link-foreground-hover: var(--skra-sys-color-on-surface-strong);
908
+ --skra-comp-nav-link-background-current: var(--skra-sys-color-primary-soft);
909
+ --skra-comp-nav-link-foreground-current: var(--skra-sys-color-primary-strong);
910
+ --skra-comp-nav-link-border-color-current: var(--skra-sys-color-border);
882
911
  --skra-comp-popover-background: var(--skra-sys-color-surface);
883
912
  --skra-comp-popover-foreground: var(--skra-sys-color-on-surface);
884
913
  --skra-comp-popover-border-color: var(--skra-sys-color-border);
package/brutal/_density.comfortable.scoped.scss CHANGED
@@ -134,6 +134,8 @@
134
134
  --skra-comp-menu-item-padding-inline: var(--skra-sys-spacing-3);
135
135
  --skra-comp-menu-item-gap: var(--skra-sys-spacing-2);
136
136
  --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
137
+ --skra-comp-nav-link-padding-block: var(--skra-sys-spacing-2);
138
+ --skra-comp-nav-link-padding-inline: var(--skra-sys-spacing-4);
137
139
  --skra-comp-popover-padding-block: var(--skra-sys-spacing-3);
138
140
  --skra-comp-popover-padding-inline: var(--skra-sys-spacing-3);
139
141
  --skra-comp-popover-max-inline-size: var(--skra-sys-size-container-sm);
package/brutal/_density.comfortable.scss CHANGED
@@ -134,6 +134,8 @@
134
134
  --skra-comp-menu-item-padding-inline: var(--skra-sys-spacing-3);
135
135
  --skra-comp-menu-item-gap: var(--skra-sys-spacing-2);
136
136
  --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
137
+ --skra-comp-nav-link-padding-block: var(--skra-sys-spacing-2);
138
+ --skra-comp-nav-link-padding-inline: var(--skra-sys-spacing-4);
137
139
  --skra-comp-popover-padding-block: var(--skra-sys-spacing-3);
138
140
  --skra-comp-popover-padding-inline: var(--skra-sys-spacing-3);
139
141
  --skra-comp-popover-max-inline-size: var(--skra-sys-size-container-sm);
package/brutal/_density.compact.scoped.scss CHANGED
@@ -134,6 +134,8 @@
134
134
  --skra-comp-menu-item-padding-inline: var(--skra-sys-spacing-3);
135
135
  --skra-comp-menu-item-gap: var(--skra-sys-spacing-2);
136
136
  --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
137
+ --skra-comp-nav-link-padding-block: var(--skra-sys-spacing-2);
138
+ --skra-comp-nav-link-padding-inline: var(--skra-sys-spacing-4);
137
139
  --skra-comp-popover-padding-block: var(--skra-sys-spacing-3);
138
140
  --skra-comp-popover-padding-inline: var(--skra-sys-spacing-3);
139
141
  --skra-comp-popover-max-inline-size: var(--skra-sys-size-container-sm);
package/brutal/_density.compact.scss CHANGED
@@ -134,6 +134,8 @@
134
134
  --skra-comp-menu-item-padding-inline: var(--skra-sys-spacing-3);
135
135
  --skra-comp-menu-item-gap: var(--skra-sys-spacing-2);
136
136
  --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
137
+ --skra-comp-nav-link-padding-block: var(--skra-sys-spacing-2);
138
+ --skra-comp-nav-link-padding-inline: var(--skra-sys-spacing-4);
137
139
  --skra-comp-popover-padding-block: var(--skra-sys-spacing-3);
138
140
  --skra-comp-popover-padding-inline: var(--skra-sys-spacing-3);
139
141
  --skra-comp-popover-max-inline-size: var(--skra-sys-size-container-sm);
package/brutal/_theme.dark.scoped.scss CHANGED
@@ -417,6 +417,15 @@
417
417
  --skra-comp-menu-focus-ring-color-active: oklch(42.0% 0.162 295);
418
418
  --skra-comp-menu-item-foreground-hover: oklch(80.0% 0 0);
419
419
  --skra-comp-menu-item-foreground-active: oklch(74.0% 0 0);
420
+ --skra-comp-nav-link-foreground-active: oklch(83.0% 0 0);
421
+ --skra-comp-nav-link-focus-ring-color-hover: oklch(48.0% 0.162 295);
422
+ --skra-comp-nav-link-focus-ring-color-active: oklch(42.0% 0.162 295);
423
+ --skra-comp-nav-link-background-current-hover: oklch(12.0% 0.06 100);
424
+ --skra-comp-nav-link-background-current-active: oklch(6.0% 0.06 100);
425
+ --skra-comp-nav-link-foreground-current-hover: oklch(53.0% 0.099 98);
426
+ --skra-comp-nav-link-foreground-current-active: oklch(47.0% 0.099 98);
427
+ --skra-comp-nav-link-border-color-current-hover: oklch(80.0% 0 0);
428
+ --skra-comp-nav-link-border-color-current-active: oklch(74.0% 0 0);
420
429
  --skra-comp-popover-background-hover: oklch(27.0% 0 0);
421
430
  --skra-comp-popover-background-active: oklch(33.0% 0 0);
422
431
  --skra-comp-popover-foreground-hover: oklch(80.0% 0 0);
@@ -694,6 +703,13 @@
694
703
  --skra-comp-menu-item-foreground: var(--skra-sys-color-on-surface);
695
704
  --skra-comp-menu-item-background-hover: var(--skra-sys-color-surface-hover);
696
705
  --skra-comp-menu-item-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
706
+ --skra-comp-nav-link-foreground: var(--skra-sys-color-on-surface-subtle);
707
+ --skra-comp-nav-link-focus-ring-color: var(--skra-sys-color-focus-ring);
708
+ --skra-comp-nav-link-background-hover: var(--skra-sys-color-surface-hover);
709
+ --skra-comp-nav-link-foreground-hover: var(--skra-sys-color-on-surface-strong);
710
+ --skra-comp-nav-link-background-current: var(--skra-sys-color-primary-soft);
711
+ --skra-comp-nav-link-foreground-current: var(--skra-sys-color-primary-strong);
712
+ --skra-comp-nav-link-border-color-current: var(--skra-sys-color-border);
697
713
  --skra-comp-popover-background: var(--skra-sys-color-surface);
698
714
  --skra-comp-popover-foreground: var(--skra-sys-color-on-surface);
699
715
  --skra-comp-popover-border-color: var(--skra-sys-color-border);
package/brutal/_theme.dark.scss CHANGED
@@ -418,6 +418,15 @@
418
418
  --skra-comp-menu-focus-ring-color-active: oklch(42.0% 0.162 295);
419
419
  --skra-comp-menu-item-foreground-hover: oklch(80.0% 0 0);
420
420
  --skra-comp-menu-item-foreground-active: oklch(74.0% 0 0);
421
+ --skra-comp-nav-link-foreground-active: oklch(83.0% 0 0);
422
+ --skra-comp-nav-link-focus-ring-color-hover: oklch(48.0% 0.162 295);
423
+ --skra-comp-nav-link-focus-ring-color-active: oklch(42.0% 0.162 295);
424
+ --skra-comp-nav-link-background-current-hover: oklch(12.0% 0.06 100);
425
+ --skra-comp-nav-link-background-current-active: oklch(6.0% 0.06 100);
426
+ --skra-comp-nav-link-foreground-current-hover: oklch(53.0% 0.099 98);
427
+ --skra-comp-nav-link-foreground-current-active: oklch(47.0% 0.099 98);
428
+ --skra-comp-nav-link-border-color-current-hover: oklch(80.0% 0 0);
429
+ --skra-comp-nav-link-border-color-current-active: oklch(74.0% 0 0);
421
430
  --skra-comp-popover-background-hover: oklch(27.0% 0 0);
422
431
  --skra-comp-popover-background-active: oklch(33.0% 0 0);
423
432
  --skra-comp-popover-foreground-hover: oklch(80.0% 0 0);
@@ -695,6 +704,13 @@
695
704
  --skra-comp-menu-item-foreground: var(--skra-sys-color-on-surface);
696
705
  --skra-comp-menu-item-background-hover: var(--skra-sys-color-surface-hover);
697
706
  --skra-comp-menu-item-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
707
+ --skra-comp-nav-link-foreground: var(--skra-sys-color-on-surface-subtle);
708
+ --skra-comp-nav-link-focus-ring-color: var(--skra-sys-color-focus-ring);
709
+ --skra-comp-nav-link-background-hover: var(--skra-sys-color-surface-hover);
710
+ --skra-comp-nav-link-foreground-hover: var(--skra-sys-color-on-surface-strong);
711
+ --skra-comp-nav-link-background-current: var(--skra-sys-color-primary-soft);
712
+ --skra-comp-nav-link-foreground-current: var(--skra-sys-color-primary-strong);
713
+ --skra-comp-nav-link-border-color-current: var(--skra-sys-color-border);
698
714
  --skra-comp-popover-background: var(--skra-sys-color-surface);
699
715
  --skra-comp-popover-foreground: var(--skra-sys-color-on-surface);
700
716
  --skra-comp-popover-border-color: var(--skra-sys-color-border);
package/brutal/_theme.scoped.scss CHANGED
@@ -492,6 +492,22 @@
492
492
  --skra-comp-menu-border-style: solid;
493
493
  --skra-comp-menu-focus-ring-width: 0.1875rem;
494
494
  --skra-comp-menu-typography-role: body-medium;
495
+ --skra-comp-nav-link-foreground-active: oklch(17.0% 0 0);
496
+ --skra-comp-nav-link-focus-ring-color-hover: oklch(57.0% 0.18 295);
497
+ --skra-comp-nav-link-focus-ring-color-active: oklch(63.0% 0.18 295);
498
+ --skra-comp-nav-link-background-current-hover: oklch(98.0% 0.06 100);
499
+ --skra-comp-nav-link-background-current-active: oklch(98.0% 0.06 100);
500
+ --skra-comp-nav-link-foreground-current-hover: oklch(62.0% 0.11 98);
501
+ --skra-comp-nav-link-foreground-current-active: oklch(68.0% 0.11 98);
502
+ --skra-comp-nav-link-border-color-current-hover: oklch(12.0% 0 0);
503
+ --skra-comp-nav-link-border-color-current-active: oklch(18.0% 0 0);
504
+ --skra-comp-nav-link-background: rgba(0, 0, 0, 0);
505
+ --skra-comp-nav-link-border-color: rgba(0, 0, 0, 0);
506
+ --skra-comp-nav-link-border-width: 0rem;
507
+ --skra-comp-nav-link-border-style: solid;
508
+ --skra-comp-nav-link-shadow: none;
509
+ --skra-comp-nav-link-focus-ring-width: 0.125rem;
510
+ --skra-comp-nav-link-border-width-current: 0.1875rem;
495
511
  --skra-comp-popover-background-hover: oklch(85.0% 0.015 95);
496
512
  --skra-comp-popover-background-active: oklch(79.0% 0.015 95);
497
513
  --skra-comp-popover-foreground-hover: oklch(12.0% 0 0);
@@ -608,6 +624,7 @@
608
624
  --skra-comp-surface-border-style: solid;
609
625
  --skra-comp-surface-focus-ring-width: 0.1875rem;
610
626
  --skra-comp-surface-border-width-selected: 0.375rem;
627
+ --skra-comp-surface-link-text-decoration: none;
611
628
  --skra-comp-tabs-foreground-hover: oklch(47.0% 0 0);
612
629
  --skra-comp-tabs-foreground-active: oklch(53.0% 0 0);
613
630
  --skra-comp-tabs-focus-ring-color-hover: oklch(57.0% 0.18 295);
@@ -892,6 +909,7 @@
892
909
  --skra-comp-menu-radius: var(--skra-sys-radius-md);
893
910
  --skra-comp-menu-shadow: var(--skra-sys-shadow-lg);
894
911
  --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
912
+ --skra-comp-nav-link-radius: var(--skra-sys-radius-none);
895
913
  --skra-comp-popover-radius: var(--skra-sys-radius-md);
896
914
  --skra-comp-popover-shadow: var(--skra-sys-shadow-lg);
897
915
  --skra-comp-progress-radius: var(--skra-sys-radius-sm);
@@ -1183,6 +1201,17 @@
1183
1201
  --skra-comp-menu-item-padding-block: var(--skra-sys-spacing-2);
1184
1202
  --skra-comp-menu-item-padding-inline: var(--skra-sys-spacing-3);
1185
1203
  --skra-comp-menu-item-gap: var(--skra-sys-spacing-2);
1204
+ --skra-comp-nav-link-foreground: var(--skra-sys-color-on-surface-subtle);
1205
+ --skra-comp-nav-link-padding-block: var(--skra-sys-spacing-2);
1206
+ --skra-comp-nav-link-padding-inline: var(--skra-sys-spacing-4);
1207
+ --skra-comp-nav-link-motion-duration: var(--skra-sys-motion-duration-fast);
1208
+ --skra-comp-nav-link-motion-easing: var(--skra-sys-motion-easing-standard);
1209
+ --skra-comp-nav-link-focus-ring-color: var(--skra-sys-color-focus-ring);
1210
+ --skra-comp-nav-link-background-hover: var(--skra-sys-color-surface-hover);
1211
+ --skra-comp-nav-link-foreground-hover: var(--skra-sys-color-on-surface-strong);
1212
+ --skra-comp-nav-link-background-current: var(--skra-sys-color-primary-soft);
1213
+ --skra-comp-nav-link-foreground-current: var(--skra-sys-color-primary-strong);
1214
+ --skra-comp-nav-link-border-color-current: var(--skra-sys-color-border);
1186
1215
  --skra-comp-popover-background: var(--skra-sys-color-surface);
1187
1216
  --skra-comp-popover-foreground: var(--skra-sys-color-on-surface);
1188
1217
  --skra-comp-popover-border-color: var(--skra-sys-color-border);
package/manifests/nav-link.json ADDED
@@ -0,0 +1,136 @@
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "nav-link",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-nav-link-background",
8
+ "label": "Nav link \u2014 resting fill (quiet by design: no button container, ADR 0060 R5.2)",
9
+ "group": "Surface",
10
+ "type": "color",
11
+ "states": ["default"],
12
+ "constraint": {
13
+ "oklch": true
14
+ },
15
+ "overridable": ["overlay", "subtree"]
16
+ },
17
+ {
18
+ "token": "--skra-comp-nav-link-foreground",
19
+ "label": "Nav link \u2014 resting label colour",
20
+ "group": "Surface",
21
+ "type": "color",
22
+ "states": ["default"],
23
+ "constraint": {
24
+ "oklch": true
25
+ },
26
+ "overridable": ["overlay", "subtree", "instance"]
27
+ },
28
+ {
29
+ "token": "--skra-comp-nav-link-radius",
30
+ "label": "Nav link \u2014 corner radius (the pill is a skin choice)",
31
+ "group": "Surface",
32
+ "type": "dimension",
33
+ "states": ["default"],
34
+ "constraint": {
35
+ "unit": "rem",
36
+ "min": 0,
37
+ "max": 100
38
+ },
39
+ "overridable": ["overlay", "subtree"]
40
+ },
41
+ {
42
+ "token": "--skra-comp-nav-link-padding-block",
43
+ "label": "Nav link \u2014 block padding",
44
+ "group": "Spacing",
45
+ "type": "dimension",
46
+ "states": ["default"],
47
+ "constraint": {
48
+ "unit": "rem",
49
+ "min": 0,
50
+ "max": 4
51
+ },
52
+ "overridable": ["overlay", "subtree"]
53
+ },
54
+ {
55
+ "token": "--skra-comp-nav-link-padding-inline",
56
+ "label": "Nav link \u2014 inline padding",
57
+ "group": "Spacing",
58
+ "type": "dimension",
59
+ "states": ["default"],
60
+ "constraint": {
61
+ "unit": "rem",
62
+ "min": 0,
63
+ "max": 4
64
+ },
65
+ "overridable": ["overlay", "subtree"]
66
+ },
67
+ {
68
+ "token": "--skra-comp-nav-link-background-hover",
69
+ "label": "Nav link \u2014 fill under the pointer (not on the current item)",
70
+ "group": "State",
71
+ "type": "color",
72
+ "states": ["hover"],
73
+ "constraint": {
74
+ "oklch": true
75
+ },
76
+ "overridable": ["overlay"]
77
+ },
78
+ {
79
+ "token": "--skra-comp-nav-link-foreground-hover",
80
+ "label": "Nav link \u2014 label colour under the pointer",
81
+ "group": "State",
82
+ "type": "color",
83
+ "states": ["hover"],
84
+ "constraint": {
85
+ "oklch": true
86
+ },
87
+ "overridable": ["overlay"]
88
+ },
89
+ {
90
+ "token": "--skra-comp-nav-link-background-current",
91
+ "label": "Nav link \u2014 fill of the current destination (aria-current)",
92
+ "group": "State",
93
+ "type": "color",
94
+ "states": ["current"],
95
+ "constraint": {
96
+ "oklch": true
97
+ },
98
+ "overridable": ["overlay", "subtree"]
99
+ },
100
+ {
101
+ "token": "--skra-comp-nav-link-foreground-current",
102
+ "label": "Nav link \u2014 label colour of the current destination",
103
+ "group": "State",
104
+ "type": "color",
105
+ "states": ["current"],
106
+ "constraint": {
107
+ "oklch": true
108
+ },
109
+ "overridable": ["overlay", "subtree"]
110
+ },
111
+ {
112
+ "token": "--skra-comp-nav-link-border-color-current",
113
+ "label": "Nav link \u2014 edge colour of the current destination",
114
+ "group": "State",
115
+ "type": "color",
116
+ "states": ["current"],
117
+ "constraint": {
118
+ "oklch": true
119
+ },
120
+ "overridable": ["overlay", "subtree"]
121
+ },
122
+ {
123
+ "token": "--skra-comp-nav-link-border-width-current",
124
+ "label": "Nav link \u2014 edge width of the current destination (WCAG 1.4.1 non-colour channel \u2014 must differ from the resting width, R-60.1)",
125
+ "group": "State",
126
+ "type": "dimension",
127
+ "states": ["current"],
128
+ "constraint": {
129
+ "unit": "rem",
130
+ "min": 0,
131
+ "max": 0.5
132
+ },
133
+ "overridable": ["overlay", "subtree"]
134
+ }
135
+ ]
136
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skra/tokens",
3
- "version": "0.8.0",
3
+ "version": "0.9.1",
4
4
  "license": "Apache-2.0",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/skra/_comp.scss CHANGED
@@ -354,6 +354,22 @@
354
354
  --skra-comp-menu-border-style: solid;
355
355
  --skra-comp-menu-focus-ring-width: 0.125rem;
356
356
  --skra-comp-menu-typography-role: body-medium;
357
+ --skra-comp-nav-link-foreground-active: oklch(24.5% 0 0);
358
+ --skra-comp-nav-link-focus-ring-color-hover: oklch(53.0% 0.15 250);
359
+ --skra-comp-nav-link-focus-ring-color-active: oklch(49.5% 0.15 250);
360
+ --skra-comp-nav-link-background-current-hover: oklch(88.0% 0.04 250);
361
+ --skra-comp-nav-link-background-current-active: oklch(84.5% 0.04 250);
362
+ --skra-comp-nav-link-foreground-current-hover: oklch(42.0% 0.15 250);
363
+ --skra-comp-nav-link-foreground-current-active: oklch(45.5% 0.15 250);
364
+ --skra-comp-nav-link-border-color-current-hover: oklch(45.0% 0.15 250);
365
+ --skra-comp-nav-link-border-color-current-active: oklch(41.5% 0.15 250);
366
+ --skra-comp-nav-link-background: transparent;
367
+ --skra-comp-nav-link-border-color: transparent;
368
+ --skra-comp-nav-link-border-width: 0rem;
369
+ --skra-comp-nav-link-border-style: solid;
370
+ --skra-comp-nav-link-shadow: none;
371
+ --skra-comp-nav-link-focus-ring-width: 0.125rem;
372
+ --skra-comp-nav-link-border-width-current: 0.0625rem;
357
373
  --skra-comp-popover-background-hover: oklch(93.0% 0 0);
358
374
  --skra-comp-popover-background-active: oklch(89.5% 0 0);
359
375
  --skra-comp-popover-foreground-hover: oklch(7.0% 0 0);
@@ -472,6 +488,7 @@
472
488
  --skra-comp-surface-border-style: solid;
473
489
  --skra-comp-surface-focus-ring-width: 0.125rem;
474
490
  --skra-comp-surface-border-width-selected: 0.125rem;
491
+ --skra-comp-surface-link-text-decoration: none;
475
492
  --skra-comp-tabs-foreground-hover: oklch(42.0% 0 0);
476
493
  --skra-comp-tabs-foreground-active: oklch(45.5% 0 0);
477
494
  --skra-comp-tabs-focus-ring-color-hover: oklch(53.0% 0.15 250);
@@ -862,6 +879,18 @@
862
879
  --skra-comp-menu-item-padding-block: var(--skra-sys-spacing-2);
863
880
  --skra-comp-menu-item-padding-inline: var(--skra-sys-spacing-3);
864
881
  --skra-comp-menu-item-gap: var(--skra-sys-spacing-2);
882
+ --skra-comp-nav-link-foreground: var(--skra-sys-color-on-surface-subtle);
883
+ --skra-comp-nav-link-radius: var(--skra-sys-radius-full);
884
+ --skra-comp-nav-link-padding-block: var(--skra-sys-spacing-2);
885
+ --skra-comp-nav-link-padding-inline: var(--skra-sys-spacing-4);
886
+ --skra-comp-nav-link-motion-duration: var(--skra-sys-motion-duration-fast);
887
+ --skra-comp-nav-link-motion-easing: var(--skra-sys-motion-easing-standard);
888
+ --skra-comp-nav-link-focus-ring-color: var(--skra-sys-color-focus-ring);
889
+ --skra-comp-nav-link-background-hover: var(--skra-sys-color-surface-hover);
890
+ --skra-comp-nav-link-foreground-hover: var(--skra-sys-color-on-surface-strong);
891
+ --skra-comp-nav-link-background-current: var(--skra-sys-color-primary-soft);
892
+ --skra-comp-nav-link-foreground-current: var(--skra-sys-color-primary-strong);
893
+ --skra-comp-nav-link-border-color-current: var(--skra-sys-color-primary-border);
865
894
  --skra-comp-popover-background: var(--skra-sys-color-surface);
866
895
  --skra-comp-popover-foreground: var(--skra-sys-color-on-surface);
867
896
  --skra-comp-popover-border-color: var(--skra-sys-color-border-subtle);
package/skra/_density.comfortable.scss CHANGED
@@ -134,6 +134,8 @@
134
134
  --skra-comp-menu-item-padding-inline: var(--skra-sys-spacing-3);
135
135
  --skra-comp-menu-item-gap: var(--skra-sys-spacing-2);
136
136
  --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
137
+ --skra-comp-nav-link-padding-block: var(--skra-sys-spacing-2);
138
+ --skra-comp-nav-link-padding-inline: var(--skra-sys-spacing-4);
137
139
  --skra-comp-popover-padding-block: var(--skra-sys-spacing-3);
138
140
  --skra-comp-popover-padding-inline: var(--skra-sys-spacing-3);
139
141
  --skra-comp-popover-max-inline-size: var(--skra-sys-size-container-sm);
package/skra/_density.compact.scss CHANGED
@@ -134,6 +134,8 @@
134
134
  --skra-comp-menu-item-padding-inline: var(--skra-sys-spacing-3);
135
135
  --skra-comp-menu-item-gap: var(--skra-sys-spacing-2);
136
136
  --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
137
+ --skra-comp-nav-link-padding-block: var(--skra-sys-spacing-2);
138
+ --skra-comp-nav-link-padding-inline: var(--skra-sys-spacing-4);
137
139
  --skra-comp-popover-padding-block: var(--skra-sys-spacing-3);
138
140
  --skra-comp-popover-padding-inline: var(--skra-sys-spacing-3);
139
141
  --skra-comp-popover-max-inline-size: var(--skra-sys-size-container-sm);
package/skra/_theme.dark.scss CHANGED
@@ -412,6 +412,15 @@
412
412
  --skra-comp-menu-focus-ring-color-active: oklch(64.5% 0.135 250);
413
413
  --skra-comp-menu-item-foreground-hover: oklch(85.0% 0 0);
414
414
  --skra-comp-menu-item-foreground-active: oklch(81.5% 0 0);
415
+ --skra-comp-nav-link-foreground-active: oklch(75.5% 0 0);
416
+ --skra-comp-nav-link-focus-ring-color-hover: oklch(68.0% 0.135 250);
417
+ --skra-comp-nav-link-focus-ring-color-active: oklch(64.5% 0.135 250);
418
+ --skra-comp-nav-link-background-current-hover: oklch(17.0% 0.04 250);
419
+ --skra-comp-nav-link-background-current-active: oklch(13.5% 0.04 250);
420
+ --skra-comp-nav-link-foreground-current-hover: oklch(55.0% 0.135 250);
421
+ --skra-comp-nav-link-foreground-current-active: oklch(51.5% 0.135 250);
422
+ --skra-comp-nav-link-border-color-current-hover: oklch(60.0% 0.135 250);
423
+ --skra-comp-nav-link-border-color-current-active: oklch(56.5% 0.135 250);
415
424
  --skra-comp-popover-background-hover: oklch(22.0% 0 0);
416
425
  --skra-comp-popover-background-active: oklch(25.5% 0 0);
417
426
  --skra-comp-popover-foreground-hover: oklch(85.0% 0 0);
@@ -685,6 +694,13 @@
685
694
  --skra-comp-menu-item-foreground: var(--skra-sys-color-on-surface);
686
695
  --skra-comp-menu-item-background-hover: var(--skra-sys-color-surface-hover);
687
696
  --skra-comp-menu-item-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
697
+ --skra-comp-nav-link-foreground: var(--skra-sys-color-on-surface-subtle);
698
+ --skra-comp-nav-link-focus-ring-color: var(--skra-sys-color-focus-ring);
699
+ --skra-comp-nav-link-background-hover: var(--skra-sys-color-surface-hover);
700
+ --skra-comp-nav-link-foreground-hover: var(--skra-sys-color-on-surface-strong);
701
+ --skra-comp-nav-link-background-current: var(--skra-sys-color-primary-soft);
702
+ --skra-comp-nav-link-foreground-current: var(--skra-sys-color-primary-strong);
703
+ --skra-comp-nav-link-border-color-current: var(--skra-sys-color-primary-border);
688
704
  --skra-comp-popover-background: var(--skra-sys-color-surface);
689
705
  --skra-comp-popover-foreground: var(--skra-sys-color-on-surface);
690
706
  --skra-comp-popover-border-color: var(--skra-sys-color-border-subtle);
package/skra/utilities.scss CHANGED
@@ -7,7 +7,7 @@
7
7
  //
8
8
  // Add only utilities that:
9
9
  // - are inherently static (no token references), AND
10
- // - are mandated by a Forge ADR.
10
+ // - are mandated by a Forge ADR or component spec.
11
11
 
12
12
  // ─── Accessible Name Contract (ADR 033) ──────────────────────────────────────
13
13
  // Visually-hidden utility for Path 2 (visible text + hidden extension).
@@ -36,3 +36,16 @@ textarea[skraAutoResize],
36
36
  input[skraAutoResize] {
37
37
  field-sizing: content;
38
38
  }
39
+
40
+ // No manual handle once content drives the size (GitHub #12, O-94; spec
41
+ // `component-textarea-spec.md` §Sizing contract). A drag writes an inline `height`
42
+ // on the element (the user agent does it, measured 2026-11-12 on Chromium and
43
+ // Firefox) that outranks `field-sizing`, so one drag silently ends the growth for
44
+ // good. Gated on support: where `field-sizing` does not ship the field cannot
45
+ // grow, and the handle is the user's only way to see more. (The `rows` floor the
46
+ // marker needs is box-dependent, so it lives with the field box in `textarea.scss`.)
47
+ @supports (field-sizing: content) {
48
+ textarea[skraAutoResize] {
49
+ resize: none;
50
+ }
51
+ }