@skra/tokens 0.2.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 (55) hide show
  1. package/LICENSE +201 -0
  2. package/NOTICE +7 -0
  3. package/README.md +64 -0
  4. package/brutal/_baseline.scss +22 -0
  5. package/brutal/_comp.scss +985 -0
  6. package/brutal/_density.comfortable.scoped.scss +166 -0
  7. package/brutal/_density.comfortable.scss +166 -0
  8. package/brutal/_density.compact.scoped.scss +166 -0
  9. package/brutal/_density.compact.scss +166 -0
  10. package/brutal/_theme.dark.scoped.scss +707 -0
  11. package/brutal/_theme.dark.scss +708 -0
  12. package/brutal/_theme.scoped.scss +1289 -0
  13. package/brutal/_theme.scss +451 -0
  14. package/brutal/skin.config.json +40 -0
  15. package/manifests/accordion.json +52 -0
  16. package/manifests/alert.json +107 -0
  17. package/manifests/avatar.json +78 -0
  18. package/manifests/badge.json +63 -0
  19. package/manifests/box.json +34 -0
  20. package/manifests/button.json +133 -0
  21. package/manifests/chip.json +116 -0
  22. package/manifests/combobox.json +141 -0
  23. package/manifests/datepicker.json +159 -0
  24. package/manifests/dialog.json +104 -0
  25. package/manifests/field.json +267 -0
  26. package/manifests/grid.json +61 -0
  27. package/manifests/icon.json +43 -0
  28. package/manifests/kbd.json +68 -0
  29. package/manifests/link.json +107 -0
  30. package/manifests/menu.json +122 -0
  31. package/manifests/popover.json +104 -0
  32. package/manifests/progress.json +69 -0
  33. package/manifests/select.json +177 -0
  34. package/manifests/skeleton.json +43 -0
  35. package/manifests/stack.json +34 -0
  36. package/manifests/star-rating.json +96 -0
  37. package/manifests/status-dot.json +69 -0
  38. package/manifests/tabs.json +52 -0
  39. package/manifests/toast.json +133 -0
  40. package/manifests/tooltip.json +113 -0
  41. package/manifests/typography.json +169 -0
  42. package/overlays/brand-jade.scss +9 -0
  43. package/overlays/round-corners.scss +8 -0
  44. package/overlays/square-corners.scss +8 -0
  45. package/package.json +19 -0
  46. package/skra/_baseline.scss +22 -0
  47. package/skra/_comp.scss +981 -0
  48. package/skra/_density.comfortable.scss +166 -0
  49. package/skra/_density.compact.scss +166 -0
  50. package/skra/_form-controls.scss +74 -0
  51. package/skra/_overlay.scss +42 -0
  52. package/skra/_theme.dark.scss +698 -0
  53. package/skra/_theme.scss +448 -0
  54. package/skra/skin.config.json +37 -0
  55. package/skra/utilities.scss +38 -0
package/manifests/kbd.json ADDED
@@ -0,0 +1,68 @@
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "kbd",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-kbd-background",
8
+ "label": "Kbd — key-cap fill colour",
9
+ "group": "Surface",
10
+ "type": "color",
11
+ "states": ["default"],
12
+ "constraint": { "oklch": true },
13
+ "overridable": ["overlay", "subtree", "instance"]
14
+ },
15
+ {
16
+ "token": "--skra-comp-kbd-foreground",
17
+ "label": "Kbd — key text colour",
18
+ "group": "Surface",
19
+ "type": "color",
20
+ "states": ["default"],
21
+ "constraint": { "oklch": true },
22
+ "overridable": ["overlay", "subtree", "instance"]
23
+ },
24
+ {
25
+ "token": "--skra-comp-kbd-border-color",
26
+ "label": "Kbd — key-cap edge colour",
27
+ "group": "Surface",
28
+ "type": "color",
29
+ "states": ["default"],
30
+ "constraint": { "oklch": true },
31
+ "overridable": ["overlay", "subtree"]
32
+ },
33
+ {
34
+ "token": "--skra-comp-kbd-border-width",
35
+ "label": "Kbd — key-cap edge width",
36
+ "group": "Surface",
37
+ "type": "dimension",
38
+ "states": ["default"],
39
+ "constraint": { "unit": "rem", "min": 0, "max": 0.5 },
40
+ "overridable": ["overlay", "subtree"]
41
+ },
42
+ {
43
+ "token": "--skra-comp-kbd-radius",
44
+ "label": "Kbd — key corner radius",
45
+ "group": "Surface",
46
+ "type": "dimension",
47
+ "states": ["default"],
48
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
49
+ "overridable": ["overlay", "subtree"]
50
+ },
51
+ {
52
+ "token": "--skra-comp-kbd-shadow",
53
+ "label": "Kbd — key-cap depth shadow (flat in forge; offset in brutal)",
54
+ "group": "Surface",
55
+ "type": "shadow",
56
+ "states": ["default"],
57
+ "overridable": ["overlay", "subtree"]
58
+ },
59
+ {
60
+ "token": "--skra-comp-kbd-font-family",
61
+ "label": "Kbd — key typeface (monospace; the defining cue)",
62
+ "group": "Typography",
63
+ "type": "string",
64
+ "states": ["default"],
65
+ "overridable": ["overlay", "subtree"]
66
+ }
67
+ ]
68
+ }
package/manifests/link.json ADDED
@@ -0,0 +1,107 @@
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "link",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-link-foreground",
8
+ "label": "Link — text colour (default / unvisited)",
9
+ "group": "Surface",
10
+ "type": "color",
11
+ "states": ["default"],
12
+ "constraint": { "oklch": true },
13
+ "overridable": ["overlay", "subtree", "instance"]
14
+ },
15
+ {
16
+ "token": "--skra-comp-link-foreground-hover",
17
+ "label": "Link — text colour on hover",
18
+ "group": "State",
19
+ "type": "color",
20
+ "states": ["hover"],
21
+ "constraint": { "oklch": true },
22
+ "overridable": ["overlay"]
23
+ },
24
+ {
25
+ "token": "--skra-comp-link-foreground-active",
26
+ "label": "Link — text colour while pressed",
27
+ "group": "State",
28
+ "type": "color",
29
+ "states": ["active"],
30
+ "constraint": { "oklch": true },
31
+ "overridable": ["overlay"]
32
+ },
33
+ {
34
+ "token": "--skra-comp-link-foreground-visited",
35
+ "label": "Link — text colour after the URL has been visited (UA history state)",
36
+ "group": "State",
37
+ "type": "color",
38
+ "states": ["visited"],
39
+ "constraint": { "oklch": true },
40
+ "overridable": ["overlay"]
41
+ },
42
+ {
43
+ "token": "--skra-comp-link-focus-ring-color",
44
+ "label": "Focus ring — outline colour on :focus-visible",
45
+ "group": "State",
46
+ "type": "color",
47
+ "states": ["focus-visible"],
48
+ "constraint": { "oklch": true },
49
+ "overridable": ["overlay"]
50
+ },
51
+ {
52
+ "token": "--skra-comp-link-focus-ring-width",
53
+ "label": "Focus ring — outline thickness on :focus-visible",
54
+ "group": "State",
55
+ "type": "dimension",
56
+ "states": ["focus-visible"],
57
+ "constraint": { "unit": "rem", "min": 0.0625, "max": 0.25 },
58
+ "overridable": ["overlay"]
59
+ },
60
+ {
61
+ "token": "--skra-comp-link-text-decoration-line",
62
+ "label": "Underline mode — none / underline / dotted / dashed",
63
+ "group": "Typography",
64
+ "type": "string",
65
+ "states": ["default"],
66
+ "constraint": {
67
+ "enum": ["none", "underline", "overline", "dotted", "dashed", "wavy"]
68
+ },
69
+ "overridable": ["overlay", "subtree"]
70
+ },
71
+ {
72
+ "token": "--skra-comp-link-text-decoration-thickness",
73
+ "label": "Underline thickness",
74
+ "group": "Typography",
75
+ "type": "dimension",
76
+ "states": ["default"],
77
+ "constraint": { "unit": "rem", "min": 0.0625, "max": 0.1875 },
78
+ "overridable": ["overlay"]
79
+ },
80
+ {
81
+ "token": "--skra-comp-link-text-underline-offset",
82
+ "label": "Underline vertical offset from text baseline",
83
+ "group": "Typography",
84
+ "type": "dimension",
85
+ "states": ["default"],
86
+ "constraint": { "unit": "rem", "min": 0.0625, "max": 0.5 },
87
+ "overridable": ["overlay"]
88
+ },
89
+ {
90
+ "token": "--skra-comp-link-motion-duration",
91
+ "label": "Transition duration for colour state changes",
92
+ "group": "Motion",
93
+ "type": "duration",
94
+ "states": ["default"],
95
+ "constraint": { "unit": "ms" },
96
+ "overridable": ["overlay"]
97
+ },
98
+ {
99
+ "token": "--skra-comp-link-motion-easing",
100
+ "label": "Transition easing curve",
101
+ "group": "Motion",
102
+ "type": "cubic-bezier",
103
+ "states": ["default"],
104
+ "overridable": ["overlay"]
105
+ }
106
+ ]
107
+ }
package/manifests/menu.json ADDED
@@ -0,0 +1,122 @@
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "menu",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-menu-background",
8
+ "label": "Menu — panel surface background",
9
+ "group": "Surface",
10
+ "type": "color",
11
+ "states": ["default"],
12
+ "constraint": { "oklch": true },
13
+ "overridable": ["overlay", "subtree", "instance"]
14
+ },
15
+ {
16
+ "token": "--skra-comp-menu-foreground",
17
+ "label": "Menu — panel default text colour",
18
+ "group": "Surface",
19
+ "type": "color",
20
+ "states": ["default"],
21
+ "constraint": { "oklch": true },
22
+ "overridable": ["overlay", "subtree", "instance"]
23
+ },
24
+ {
25
+ "token": "--skra-comp-menu-border-color",
26
+ "label": "Menu — hairline border colour",
27
+ "group": "Surface",
28
+ "type": "color",
29
+ "states": ["default"],
30
+ "constraint": { "oklch": true },
31
+ "overridable": ["overlay", "subtree"]
32
+ },
33
+ {
34
+ "token": "--skra-comp-menu-radius",
35
+ "label": "Menu — corner radius",
36
+ "group": "Surface",
37
+ "type": "dimension",
38
+ "states": ["default"],
39
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
40
+ "overridable": ["overlay", "subtree"]
41
+ },
42
+ {
43
+ "token": "--skra-comp-menu-shadow",
44
+ "label": "Menu — elevation shadow",
45
+ "group": "Surface",
46
+ "type": "shadow",
47
+ "states": ["default"],
48
+ "overridable": ["overlay"]
49
+ },
50
+ {
51
+ "token": "--skra-comp-menu-focus-ring-color",
52
+ "label": "Menu item — focus ring colour on :focus-visible",
53
+ "group": "State",
54
+ "type": "color",
55
+ "states": ["focus-visible"],
56
+ "constraint": { "oklch": true },
57
+ "overridable": ["overlay"]
58
+ },
59
+ {
60
+ "token": "--skra-comp-menu-focus-ring-width",
61
+ "label": "Menu item — focus ring thickness on :focus-visible",
62
+ "group": "State",
63
+ "type": "dimension",
64
+ "states": ["focus-visible"],
65
+ "constraint": { "unit": "rem", "min": 0.0625, "max": 0.25 },
66
+ "overridable": ["overlay"]
67
+ },
68
+ {
69
+ "token": "--skra-comp-menu-padding-block",
70
+ "label": "Menu — panel inner block padding",
71
+ "group": "Spacing",
72
+ "type": "dimension",
73
+ "states": ["default"],
74
+ "constraint": { "unit": "rem", "min": 0, "max": 4 },
75
+ "overridable": ["overlay", "subtree"]
76
+ },
77
+ {
78
+ "token": "--skra-comp-menu-padding-inline",
79
+ "label": "Menu — panel inner inline padding",
80
+ "group": "Spacing",
81
+ "type": "dimension",
82
+ "states": ["default"],
83
+ "constraint": { "unit": "rem", "min": 0, "max": 4 },
84
+ "overridable": ["overlay", "subtree"]
85
+ },
86
+ {
87
+ "token": "--skra-comp-menu-motion-duration",
88
+ "label": "Menu — enter/leave transition duration",
89
+ "group": "Motion",
90
+ "type": "duration",
91
+ "states": ["default"],
92
+ "constraint": { "unit": "ms" },
93
+ "overridable": ["overlay"]
94
+ },
95
+ {
96
+ "token": "--skra-comp-menu-motion-easing",
97
+ "label": "Menu — enter/leave transition easing curve",
98
+ "group": "Motion",
99
+ "type": "cubic-bezier",
100
+ "states": ["default"],
101
+ "overridable": ["overlay"]
102
+ },
103
+ {
104
+ "token": "--skra-comp-menu-item-foreground",
105
+ "label": "Menu item — text colour",
106
+ "group": "Surface",
107
+ "type": "color",
108
+ "states": ["default"],
109
+ "constraint": { "oklch": true },
110
+ "overridable": ["overlay", "subtree", "instance"]
111
+ },
112
+ {
113
+ "token": "--skra-comp-menu-item-background-hover",
114
+ "label": "Menu item — highlight background on :hover / roving :focus-visible",
115
+ "group": "State",
116
+ "type": "color",
117
+ "states": ["hover", "focus-visible"],
118
+ "constraint": { "oklch": true },
119
+ "overridable": ["overlay", "subtree"]
120
+ }
121
+ ]
122
+ }
package/manifests/popover.json ADDED
@@ -0,0 +1,104 @@
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "popover",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-popover-background",
8
+ "label": "Popover — surface background",
9
+ "group": "Surface",
10
+ "type": "color",
11
+ "states": ["default"],
12
+ "constraint": { "oklch": true },
13
+ "overridable": ["overlay", "subtree", "instance"]
14
+ },
15
+ {
16
+ "token": "--skra-comp-popover-foreground",
17
+ "label": "Popover — default text colour",
18
+ "group": "Surface",
19
+ "type": "color",
20
+ "states": ["default"],
21
+ "constraint": { "oklch": true },
22
+ "overridable": ["overlay", "subtree", "instance"]
23
+ },
24
+ {
25
+ "token": "--skra-comp-popover-border-color",
26
+ "label": "Popover — hairline border colour",
27
+ "group": "Surface",
28
+ "type": "color",
29
+ "states": ["default"],
30
+ "constraint": { "oklch": true },
31
+ "overridable": ["overlay", "subtree"]
32
+ },
33
+ {
34
+ "token": "--skra-comp-popover-radius",
35
+ "label": "Popover — corner radius",
36
+ "group": "Surface",
37
+ "type": "dimension",
38
+ "states": ["default"],
39
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
40
+ "overridable": ["overlay", "subtree"]
41
+ },
42
+ {
43
+ "token": "--skra-comp-popover-shadow",
44
+ "label": "Popover — elevation shadow",
45
+ "group": "Surface",
46
+ "type": "shadow",
47
+ "states": ["default"],
48
+ "overridable": ["overlay"]
49
+ },
50
+ {
51
+ "token": "--skra-comp-popover-focus-ring-color",
52
+ "label": "Focus ring — outline colour on :focus-visible",
53
+ "group": "State",
54
+ "type": "color",
55
+ "states": ["focus-visible"],
56
+ "constraint": { "oklch": true },
57
+ "overridable": ["overlay"]
58
+ },
59
+ {
60
+ "token": "--skra-comp-popover-focus-ring-width",
61
+ "label": "Focus ring — outline thickness on :focus-visible",
62
+ "group": "State",
63
+ "type": "dimension",
64
+ "states": ["focus-visible"],
65
+ "constraint": { "unit": "rem", "min": 0.0625, "max": 0.25 },
66
+ "overridable": ["overlay"]
67
+ },
68
+ {
69
+ "token": "--skra-comp-popover-padding-block",
70
+ "label": "Popover — inner block padding",
71
+ "group": "Spacing",
72
+ "type": "dimension",
73
+ "states": ["default"],
74
+ "constraint": { "unit": "rem", "min": 0, "max": 4 },
75
+ "overridable": ["overlay", "subtree"]
76
+ },
77
+ {
78
+ "token": "--skra-comp-popover-padding-inline",
79
+ "label": "Popover — inner inline padding",
80
+ "group": "Spacing",
81
+ "type": "dimension",
82
+ "states": ["default"],
83
+ "constraint": { "unit": "rem", "min": 0, "max": 4 },
84
+ "overridable": ["overlay", "subtree"]
85
+ },
86
+ {
87
+ "token": "--skra-comp-popover-motion-duration",
88
+ "label": "Popover — enter/leave transition duration",
89
+ "group": "Motion",
90
+ "type": "duration",
91
+ "states": ["default"],
92
+ "constraint": { "unit": "ms" },
93
+ "overridable": ["overlay"]
94
+ },
95
+ {
96
+ "token": "--skra-comp-popover-motion-easing",
97
+ "label": "Popover — enter/leave transition easing curve",
98
+ "group": "Motion",
99
+ "type": "cubic-bezier",
100
+ "states": ["default"],
101
+ "overridable": ["overlay"]
102
+ }
103
+ ]
104
+ }
package/manifests/progress.json ADDED
@@ -0,0 +1,69 @@
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "progress",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-progress-fill-color",
8
+ "label": "Progress — fill colour (the completed portion)",
9
+ "group": "Surface",
10
+ "type": "color",
11
+ "states": ["default"],
12
+ "constraint": { "oklch": true },
13
+ "overridable": ["overlay", "subtree", "instance"]
14
+ },
15
+ {
16
+ "token": "--skra-comp-progress-background",
17
+ "label": "Progress — track colour (the empty bar)",
18
+ "group": "Surface",
19
+ "type": "color",
20
+ "states": ["default"],
21
+ "constraint": { "oklch": true },
22
+ "overridable": ["overlay", "subtree", "instance"]
23
+ },
24
+ {
25
+ "token": "--skra-comp-progress-border-color",
26
+ "label": "Progress — track border colour",
27
+ "group": "Surface",
28
+ "type": "color",
29
+ "states": ["default"],
30
+ "constraint": { "oklch": true },
31
+ "overridable": ["overlay", "subtree"]
32
+ },
33
+ {
34
+ "token": "--skra-comp-progress-border-width",
35
+ "label": "Progress — track border width",
36
+ "group": "Surface",
37
+ "type": "dimension",
38
+ "states": ["default"],
39
+ "constraint": { "unit": "rem", "min": 0, "max": 0.5 },
40
+ "overridable": ["overlay", "subtree"]
41
+ },
42
+ {
43
+ "token": "--skra-comp-progress-radius",
44
+ "label": "Progress — corner radius (pill by default)",
45
+ "group": "Surface",
46
+ "type": "dimension",
47
+ "states": ["default"],
48
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
49
+ "overridable": ["overlay", "subtree"]
50
+ },
51
+ {
52
+ "token": "--skra-comp-progress-shadow",
53
+ "label": "Progress — track shadow",
54
+ "group": "Surface",
55
+ "type": "shadow",
56
+ "states": ["default"],
57
+ "overridable": ["overlay"]
58
+ },
59
+ {
60
+ "token": "--skra-comp-progress-block-size",
61
+ "label": "Progress — bar thickness",
62
+ "group": "Sizing",
63
+ "type": "dimension",
64
+ "states": ["default"],
65
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
66
+ "overridable": ["overlay", "subtree", "instance"]
67
+ }
68
+ ]
69
+ }
package/manifests/select.json ADDED
@@ -0,0 +1,177 @@
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "select",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-select-background",
8
+ "label": "Select — trigger background",
9
+ "group": "Surface",
10
+ "type": "color",
11
+ "states": ["default"],
12
+ "constraint": { "oklch": true },
13
+ "overridable": ["overlay", "subtree", "instance"]
14
+ },
15
+ {
16
+ "token": "--skra-comp-select-foreground",
17
+ "label": "Select — trigger text colour",
18
+ "group": "Surface",
19
+ "type": "color",
20
+ "states": ["default"],
21
+ "constraint": { "oklch": true },
22
+ "overridable": ["overlay", "subtree", "instance"]
23
+ },
24
+ {
25
+ "token": "--skra-comp-select-border-color",
26
+ "label": "Select — trigger border colour",
27
+ "group": "Surface",
28
+ "type": "color",
29
+ "states": ["default"],
30
+ "constraint": { "oklch": true },
31
+ "overridable": ["overlay", "subtree"]
32
+ },
33
+ {
34
+ "token": "--skra-comp-select-radius",
35
+ "label": "Select — trigger corner radius",
36
+ "group": "Surface",
37
+ "type": "dimension",
38
+ "states": ["default"],
39
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
40
+ "overridable": ["overlay", "subtree"]
41
+ },
42
+ {
43
+ "token": "--skra-comp-select-focus-ring-color",
44
+ "label": "Select — trigger focus ring colour on :focus-visible",
45
+ "group": "State",
46
+ "type": "color",
47
+ "states": ["focus-visible"],
48
+ "constraint": { "oklch": true },
49
+ "overridable": ["overlay"]
50
+ },
51
+ {
52
+ "token": "--skra-comp-select-focus-ring-width",
53
+ "label": "Select — trigger focus ring thickness on :focus-visible",
54
+ "group": "State",
55
+ "type": "dimension",
56
+ "states": ["focus-visible"],
57
+ "constraint": { "unit": "rem", "min": 0.0625, "max": 0.25 },
58
+ "overridable": ["overlay"]
59
+ },
60
+ {
61
+ "token": "--skra-comp-select-arrow-color",
62
+ "label": "Select — chevron colour (independent of trigger text)",
63
+ "group": "Surface",
64
+ "type": "color",
65
+ "states": ["default"],
66
+ "constraint": { "oklch": true },
67
+ "overridable": ["overlay", "subtree", "instance"]
68
+ },
69
+ {
70
+ "token": "--skra-comp-select-border-color-validation-invalid",
71
+ "label": "Select — trigger border colour when invalid",
72
+ "group": "State",
73
+ "type": "color",
74
+ "states": ["invalid"],
75
+ "constraint": { "oklch": true },
76
+ "overridable": ["overlay"]
77
+ },
78
+ {
79
+ "token": "--skra-comp-select-panel-background",
80
+ "label": "Select — listbox panel background",
81
+ "group": "Surface",
82
+ "type": "color",
83
+ "states": ["default"],
84
+ "constraint": { "oklch": true },
85
+ "overridable": ["overlay", "subtree", "instance"]
86
+ },
87
+ {
88
+ "token": "--skra-comp-select-panel-foreground",
89
+ "label": "Select — listbox panel default text colour",
90
+ "group": "Surface",
91
+ "type": "color",
92
+ "states": ["default"],
93
+ "constraint": { "oklch": true },
94
+ "overridable": ["overlay", "subtree", "instance"]
95
+ },
96
+ {
97
+ "token": "--skra-comp-select-panel-border-color",
98
+ "label": "Select — listbox panel hairline border colour",
99
+ "group": "Surface",
100
+ "type": "color",
101
+ "states": ["default"],
102
+ "constraint": { "oklch": true },
103
+ "overridable": ["overlay", "subtree"]
104
+ },
105
+ {
106
+ "token": "--skra-comp-select-panel-radius",
107
+ "label": "Select — listbox panel corner radius",
108
+ "group": "Surface",
109
+ "type": "dimension",
110
+ "states": ["default"],
111
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
112
+ "overridable": ["overlay", "subtree"]
113
+ },
114
+ {
115
+ "token": "--skra-comp-select-panel-shadow",
116
+ "label": "Select — listbox panel elevation shadow",
117
+ "group": "Surface",
118
+ "type": "shadow",
119
+ "states": ["default"],
120
+ "overridable": ["overlay"]
121
+ },
122
+ {
123
+ "token": "--skra-comp-select-option-foreground",
124
+ "label": "Select option — text colour",
125
+ "group": "Surface",
126
+ "type": "color",
127
+ "states": ["default"],
128
+ "constraint": { "oklch": true },
129
+ "overridable": ["overlay", "subtree", "instance"]
130
+ },
131
+ {
132
+ "token": "--skra-comp-select-option-background-hover",
133
+ "label": "Select option — highlight background on :hover / active descendant",
134
+ "group": "State",
135
+ "type": "color",
136
+ "states": ["hover", "active"],
137
+ "constraint": { "oklch": true },
138
+ "overridable": ["overlay", "subtree"]
139
+ },
140
+ {
141
+ "token": "--skra-comp-select-option-background-selected",
142
+ "label": "Select option — background when selected",
143
+ "group": "State",
144
+ "type": "color",
145
+ "states": ["selected"],
146
+ "constraint": { "oklch": true },
147
+ "overridable": ["overlay", "subtree"]
148
+ },
149
+ {
150
+ "token": "--skra-comp-select-indicator-color",
151
+ "label": "Select option — selected-checkmark colour (single-select)",
152
+ "group": "State",
153
+ "type": "color",
154
+ "states": ["selected"],
155
+ "constraint": { "oklch": true },
156
+ "overridable": ["overlay", "subtree"]
157
+ },
158
+ {
159
+ "token": "--skra-comp-select-option-checkbox-border-color",
160
+ "label": "Select option — multi-select checkbox border colour",
161
+ "group": "State",
162
+ "type": "color",
163
+ "states": ["default"],
164
+ "constraint": { "oklch": true },
165
+ "overridable": ["overlay", "subtree"]
166
+ },
167
+ {
168
+ "token": "--skra-comp-select-option-checkbox-background-selected",
169
+ "label": "Select option — multi-select checkbox fill when selected",
170
+ "group": "State",
171
+ "type": "color",
172
+ "states": ["selected"],
173
+ "constraint": { "oklch": true },
174
+ "overridable": ["overlay", "subtree"]
175
+ }
176
+ ]
177
+ }