@skra/tokens 0.8.0 → 0.9.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 (14) 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
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.0",
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);