@skra/tokens 0.2.0 → 0.3.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 (40) hide show
  1. package/LICENSE +201 -201
  2. package/NOTICE +7 -7
  3. package/README.md +99 -64
  4. package/brutal/_theme.scoped.scss +18 -18
  5. package/brutal/_theme.scss +60 -12
  6. package/brutal/skin.config.json +40 -40
  7. package/manifests/accordion.json +52 -52
  8. package/manifests/alert.json +107 -107
  9. package/manifests/avatar.json +78 -78
  10. package/manifests/badge.json +63 -63
  11. package/manifests/box.json +34 -34
  12. package/manifests/button.json +133 -133
  13. package/manifests/chip.json +116 -116
  14. package/manifests/combobox.json +141 -141
  15. package/manifests/datepicker.json +159 -159
  16. package/manifests/dialog.json +104 -104
  17. package/manifests/field.json +267 -267
  18. package/manifests/grid.json +61 -61
  19. package/manifests/icon.json +43 -43
  20. package/manifests/kbd.json +68 -68
  21. package/manifests/link.json +107 -107
  22. package/manifests/menu.json +122 -122
  23. package/manifests/popover.json +104 -104
  24. package/manifests/progress.json +69 -69
  25. package/manifests/select.json +177 -177
  26. package/manifests/skeleton.json +43 -43
  27. package/manifests/stack.json +34 -34
  28. package/manifests/star-rating.json +96 -96
  29. package/manifests/status-dot.json +69 -69
  30. package/manifests/tabs.json +52 -52
  31. package/manifests/toast.json +133 -133
  32. package/manifests/tooltip.json +113 -113
  33. package/manifests/typography.json +169 -169
  34. package/package.json +1 -1
  35. package/skra/_form-controls.scss +74 -74
  36. package/skra/_overlay.scss +42 -42
  37. package/skra/_theme.dark.scss +3 -0
  38. package/skra/_theme.scss +61 -10
  39. package/skra/skin.config.json +37 -37
  40. package/skra/utilities.scss +38 -38
package/manifests/select.json CHANGED
@@ -1,177 +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
- }
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
+ }
package/manifests/skeleton.json CHANGED
@@ -1,43 +1,43 @@
1
- {
2
- "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
- "component": "skeleton",
4
- "skraVersion": ">=1.0.0",
5
- "axes": [
6
- {
7
- "token": "--skra-comp-skeleton-background",
8
- "label": "Skeleton — placeholder fill colour (the animated bar)",
9
- "group": "Surface",
10
- "type": "color",
11
- "states": ["default"],
12
- "constraint": { "oklch": true },
13
- "overridable": ["overlay", "subtree", "instance"]
14
- },
15
- {
16
- "token": "--skra-comp-skeleton-radius",
17
- "label": "Skeleton — bar corner radius (text/block; circle is structurally round)",
18
- "group": "Surface",
19
- "type": "dimension",
20
- "states": ["default"],
21
- "constraint": { "unit": "rem", "min": 0, "max": 2 },
22
- "overridable": ["overlay", "subtree"]
23
- },
24
- {
25
- "token": "--skra-comp-skeleton-border-color",
26
- "label": "Skeleton — bar border colour (used by stark skins)",
27
- "group": "Surface",
28
- "type": "color",
29
- "states": ["default"],
30
- "constraint": { "oklch": true },
31
- "overridable": ["overlay", "subtree"]
32
- },
33
- {
34
- "token": "--skra-comp-skeleton-border-width",
35
- "label": "Skeleton — bar 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
- }
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "skeleton",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-skeleton-background",
8
+ "label": "Skeleton — placeholder fill colour (the animated bar)",
9
+ "group": "Surface",
10
+ "type": "color",
11
+ "states": ["default"],
12
+ "constraint": { "oklch": true },
13
+ "overridable": ["overlay", "subtree", "instance"]
14
+ },
15
+ {
16
+ "token": "--skra-comp-skeleton-radius",
17
+ "label": "Skeleton — bar corner radius (text/block; circle is structurally round)",
18
+ "group": "Surface",
19
+ "type": "dimension",
20
+ "states": ["default"],
21
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
22
+ "overridable": ["overlay", "subtree"]
23
+ },
24
+ {
25
+ "token": "--skra-comp-skeleton-border-color",
26
+ "label": "Skeleton — bar border colour (used by stark skins)",
27
+ "group": "Surface",
28
+ "type": "color",
29
+ "states": ["default"],
30
+ "constraint": { "oklch": true },
31
+ "overridable": ["overlay", "subtree"]
32
+ },
33
+ {
34
+ "token": "--skra-comp-skeleton-border-width",
35
+ "label": "Skeleton — bar 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
+ }
package/manifests/stack.json CHANGED
@@ -1,34 +1,34 @@
1
- {
2
- "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
- "component": "stack",
4
- "skraVersion": ">=1.0.0",
5
- "axes": [
6
- {
7
- "token": "--skra-comp-stack-gap-sm",
8
- "label": "Stack — small gap preset",
9
- "group": "Spacing",
10
- "type": "dimension",
11
- "states": ["default"],
12
- "constraint": { "unit": "rem", "min": 0, "max": 4 },
13
- "overridable": ["overlay", "subtree", "instance"]
14
- },
15
- {
16
- "token": "--skra-comp-stack-gap-md",
17
- "label": "Stack — medium gap preset",
18
- "group": "Spacing",
19
- "type": "dimension",
20
- "states": ["default"],
21
- "constraint": { "unit": "rem", "min": 0, "max": 4 },
22
- "overridable": ["overlay", "subtree", "instance"]
23
- },
24
- {
25
- "token": "--skra-comp-stack-gap-lg",
26
- "label": "Stack — large gap preset",
27
- "group": "Spacing",
28
- "type": "dimension",
29
- "states": ["default"],
30
- "constraint": { "unit": "rem", "min": 0, "max": 4 },
31
- "overridable": ["overlay", "subtree", "instance"]
32
- }
33
- ]
34
- }
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "stack",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-stack-gap-sm",
8
+ "label": "Stack — small gap preset",
9
+ "group": "Spacing",
10
+ "type": "dimension",
11
+ "states": ["default"],
12
+ "constraint": { "unit": "rem", "min": 0, "max": 4 },
13
+ "overridable": ["overlay", "subtree", "instance"]
14
+ },
15
+ {
16
+ "token": "--skra-comp-stack-gap-md",
17
+ "label": "Stack — medium gap preset",
18
+ "group": "Spacing",
19
+ "type": "dimension",
20
+ "states": ["default"],
21
+ "constraint": { "unit": "rem", "min": 0, "max": 4 },
22
+ "overridable": ["overlay", "subtree", "instance"]
23
+ },
24
+ {
25
+ "token": "--skra-comp-stack-gap-lg",
26
+ "label": "Stack — large gap preset",
27
+ "group": "Spacing",
28
+ "type": "dimension",
29
+ "states": ["default"],
30
+ "constraint": { "unit": "rem", "min": 0, "max": 4 },
31
+ "overridable": ["overlay", "subtree", "instance"]
32
+ }
33
+ ]
34
+ }