@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
@@ -0,0 +1,159 @@
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "datepicker",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-datepicker-background",
8
+ "label": "DatePicker — 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-datepicker-foreground",
17
+ "label": "DatePicker — 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-datepicker-border-color",
26
+ "label": "DatePicker — 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-datepicker-radius",
35
+ "label": "DatePicker — 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-datepicker-icon-color",
44
+ "label": "DatePicker — calendar glyph colour",
45
+ "group": "Surface",
46
+ "type": "color",
47
+ "states": ["default"],
48
+ "constraint": { "oklch": true },
49
+ "overridable": ["overlay", "subtree", "instance"]
50
+ },
51
+ {
52
+ "token": "--skra-comp-datepicker-focus-ring-color",
53
+ "label": "DatePicker — trigger focus ring colour on :focus-visible",
54
+ "group": "State",
55
+ "type": "color",
56
+ "states": ["focus-visible"],
57
+ "constraint": { "oklch": true },
58
+ "overridable": ["overlay"]
59
+ },
60
+ {
61
+ "token": "--skra-comp-datepicker-focus-ring-width",
62
+ "label": "DatePicker — trigger focus ring thickness on :focus-visible",
63
+ "group": "State",
64
+ "type": "dimension",
65
+ "states": ["focus-visible"],
66
+ "constraint": { "unit": "rem", "min": 0.0625, "max": 0.25 },
67
+ "overridable": ["overlay"]
68
+ },
69
+ {
70
+ "token": "--skra-comp-datepicker-border-color-validation-invalid",
71
+ "label": "DatePicker — 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-datepicker-panel-background",
80
+ "label": "DatePicker — calendar 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-datepicker-panel-border-color",
89
+ "label": "DatePicker — calendar panel hairline border colour",
90
+ "group": "Surface",
91
+ "type": "color",
92
+ "states": ["default"],
93
+ "constraint": { "oklch": true },
94
+ "overridable": ["overlay", "subtree"]
95
+ },
96
+ {
97
+ "token": "--skra-comp-datepicker-panel-radius",
98
+ "label": "DatePicker — calendar panel corner radius",
99
+ "group": "Surface",
100
+ "type": "dimension",
101
+ "states": ["default"],
102
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
103
+ "overridable": ["overlay", "subtree"]
104
+ },
105
+ {
106
+ "token": "--skra-comp-datepicker-panel-shadow",
107
+ "label": "DatePicker — calendar panel elevation shadow",
108
+ "group": "Surface",
109
+ "type": "shadow",
110
+ "states": ["default"],
111
+ "overridable": ["overlay"]
112
+ },
113
+ {
114
+ "token": "--skra-comp-datepicker-day-foreground",
115
+ "label": "DatePicker day — text colour",
116
+ "group": "Surface",
117
+ "type": "color",
118
+ "states": ["default"],
119
+ "constraint": { "oklch": true },
120
+ "overridable": ["overlay", "subtree", "instance"]
121
+ },
122
+ {
123
+ "token": "--skra-comp-datepicker-day-background-hover",
124
+ "label": "DatePicker day — highlight background on :hover / focus",
125
+ "group": "State",
126
+ "type": "color",
127
+ "states": ["hover"],
128
+ "constraint": { "oklch": true },
129
+ "overridable": ["overlay", "subtree"]
130
+ },
131
+ {
132
+ "token": "--skra-comp-datepicker-day-background-selected",
133
+ "label": "DatePicker day — background of the selected date",
134
+ "group": "State",
135
+ "type": "color",
136
+ "states": ["selected"],
137
+ "constraint": { "oklch": true },
138
+ "overridable": ["overlay", "subtree"]
139
+ },
140
+ {
141
+ "token": "--skra-comp-datepicker-day-foreground-selected",
142
+ "label": "DatePicker day — text colour of the selected date",
143
+ "group": "State",
144
+ "type": "color",
145
+ "states": ["selected"],
146
+ "constraint": { "oklch": true },
147
+ "overridable": ["overlay", "subtree"]
148
+ },
149
+ {
150
+ "token": "--skra-comp-datepicker-day-today-indicator-color",
151
+ "label": "DatePicker day — today marker colour (aria-current)",
152
+ "group": "State",
153
+ "type": "color",
154
+ "states": ["default"],
155
+ "constraint": { "oklch": true },
156
+ "overridable": ["overlay", "subtree"]
157
+ }
158
+ ]
159
+ }
@@ -0,0 +1,104 @@
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "dialog",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-dialog-background",
8
+ "label": "Dialog — 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-dialog-foreground",
17
+ "label": "Dialog — 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-dialog-radius",
26
+ "label": "Dialog — corner radius",
27
+ "group": "Surface",
28
+ "type": "dimension",
29
+ "states": ["default"],
30
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
31
+ "overridable": ["overlay", "subtree"]
32
+ },
33
+ {
34
+ "token": "--skra-comp-dialog-shadow",
35
+ "label": "Dialog — elevation shadow",
36
+ "group": "Surface",
37
+ "type": "shadow",
38
+ "states": ["default"],
39
+ "overridable": ["overlay"]
40
+ },
41
+ {
42
+ "token": "--skra-comp-dialog-backdrop",
43
+ "label": "Dialog — backdrop scrim colour (::backdrop)",
44
+ "group": "Surface",
45
+ "type": "color",
46
+ "states": ["default"],
47
+ "constraint": { "oklch": true },
48
+ "overridable": ["overlay"]
49
+ },
50
+ {
51
+ "token": "--skra-comp-dialog-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-dialog-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-dialog-padding-block",
70
+ "label": "Dialog — 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-dialog-padding-inline",
79
+ "label": "Dialog — 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-dialog-motion-duration",
88
+ "label": "Dialog — enter/leave + backdrop transition duration",
89
+ "group": "Motion",
90
+ "type": "duration",
91
+ "states": ["default"],
92
+ "constraint": { "unit": "ms" },
93
+ "overridable": ["overlay"]
94
+ },
95
+ {
96
+ "token": "--skra-comp-dialog-motion-easing",
97
+ "label": "Dialog — enter/leave transition easing curve",
98
+ "group": "Motion",
99
+ "type": "cubic-bezier",
100
+ "states": ["default"],
101
+ "overridable": ["overlay"]
102
+ }
103
+ ]
104
+ }
@@ -0,0 +1,267 @@
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "field",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-field-background",
8
+ "label": "Field — control background 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-field-foreground",
17
+ "label": "Field — control 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-field-border-color",
26
+ "label": "Field — control border colour (resting)",
27
+ "group": "Surface",
28
+ "type": "color",
29
+ "states": ["default"],
30
+ "constraint": { "oklch": true },
31
+ "overridable": ["overlay", "subtree"]
32
+ },
33
+ {
34
+ "token": "--skra-comp-field-radius",
35
+ "label": "Field — control 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-field-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-field-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-field-border-color-validation-invalid",
62
+ "label": "Field — border colour when invalid",
63
+ "group": "State",
64
+ "type": "color",
65
+ "states": ["invalid"],
66
+ "constraint": { "oklch": true },
67
+ "overridable": ["overlay"]
68
+ },
69
+ {
70
+ "token": "--skra-comp-field-background-readonly",
71
+ "label": "Field — control background colour when readonly",
72
+ "group": "State",
73
+ "type": "color",
74
+ "states": ["readonly"],
75
+ "constraint": { "oklch": true },
76
+ "overridable": ["overlay", "subtree"]
77
+ },
78
+ {
79
+ "token": "--skra-comp-field-border-color-readonly",
80
+ "label": "Field — control border colour when readonly",
81
+ "group": "State",
82
+ "type": "color",
83
+ "states": ["readonly"],
84
+ "constraint": { "oklch": true },
85
+ "overridable": ["overlay", "subtree"]
86
+ },
87
+ {
88
+ "token": "--skra-comp-field-required-color",
89
+ "label": "Field — required-marker (asterisk) colour",
90
+ "group": "State",
91
+ "type": "color",
92
+ "states": ["required"],
93
+ "constraint": { "oklch": true },
94
+ "overridable": ["overlay", "subtree"]
95
+ },
96
+ {
97
+ "token": "--skra-comp-field-label-color",
98
+ "label": "Field — label text colour",
99
+ "group": "Typography",
100
+ "type": "color",
101
+ "states": ["default"],
102
+ "constraint": { "oklch": true },
103
+ "overridable": ["overlay", "subtree"]
104
+ },
105
+ {
106
+ "token": "--skra-comp-field-hint-color",
107
+ "label": "Field — hint/helper text colour",
108
+ "group": "Typography",
109
+ "type": "color",
110
+ "states": ["default"],
111
+ "constraint": { "oklch": true },
112
+ "overridable": ["overlay"]
113
+ },
114
+ {
115
+ "token": "--skra-comp-field-error-color",
116
+ "label": "Field — error message text colour",
117
+ "group": "State",
118
+ "type": "color",
119
+ "states": ["invalid"],
120
+ "constraint": { "oklch": true },
121
+ "overridable": ["overlay"]
122
+ },
123
+ {
124
+ "token": "--skra-comp-field-gap",
125
+ "label": "Field — vertical gap between label / control / hint / error",
126
+ "group": "Spacing",
127
+ "type": "dimension",
128
+ "states": ["default"],
129
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
130
+ "overridable": ["overlay", "subtree"]
131
+ },
132
+ {
133
+ "token": "--skra-comp-field-motion-duration",
134
+ "label": "Transition duration for control state changes",
135
+ "group": "Motion",
136
+ "type": "duration",
137
+ "states": ["default"],
138
+ "constraint": { "unit": "ms" },
139
+ "overridable": ["overlay"]
140
+ },
141
+ {
142
+ "token": "--skra-comp-field-motion-easing",
143
+ "label": "Transition easing curve",
144
+ "group": "Motion",
145
+ "type": "cubic-bezier",
146
+ "states": ["default"],
147
+ "overridable": ["overlay"]
148
+ },
149
+ {
150
+ "token": "--skra-comp-field-checkbox-border-color",
151
+ "label": "Checkbox — box border colour (unchecked)",
152
+ "group": "Surface",
153
+ "type": "color",
154
+ "states": ["default"],
155
+ "constraint": { "oklch": true },
156
+ "overridable": ["overlay"]
157
+ },
158
+ {
159
+ "token": "--skra-comp-field-checkbox-checked-background",
160
+ "label": "Checkbox — fill colour when checked",
161
+ "group": "State",
162
+ "type": "color",
163
+ "states": ["checked"],
164
+ "constraint": { "oklch": true },
165
+ "overridable": ["overlay"]
166
+ },
167
+ {
168
+ "token": "--skra-comp-field-checkbox-check-color",
169
+ "label": "Checkbox — check-mark glyph colour",
170
+ "group": "State",
171
+ "type": "color",
172
+ "states": ["checked"],
173
+ "constraint": { "oklch": true },
174
+ "overridable": ["overlay"]
175
+ },
176
+ {
177
+ "token": "--skra-comp-field-radio-border-color",
178
+ "label": "Radio — ring border colour (unchecked)",
179
+ "group": "Surface",
180
+ "type": "color",
181
+ "states": ["default"],
182
+ "constraint": { "oklch": true },
183
+ "overridable": ["overlay"]
184
+ },
185
+ {
186
+ "token": "--skra-comp-field-radio-checked-background",
187
+ "label": "Radio — fill colour when checked",
188
+ "group": "State",
189
+ "type": "color",
190
+ "states": ["checked"],
191
+ "constraint": { "oklch": true },
192
+ "overridable": ["overlay"]
193
+ },
194
+ {
195
+ "token": "--skra-comp-field-radio-dot-color",
196
+ "label": "Radio — inner dot colour",
197
+ "group": "State",
198
+ "type": "color",
199
+ "states": ["checked"],
200
+ "constraint": { "oklch": true },
201
+ "overridable": ["overlay"]
202
+ },
203
+ {
204
+ "token": "--skra-comp-field-switch-background",
205
+ "label": "Switch — track fill colour (off)",
206
+ "group": "Surface",
207
+ "type": "color",
208
+ "states": ["default"],
209
+ "constraint": { "oklch": true },
210
+ "overridable": ["overlay"]
211
+ },
212
+ {
213
+ "token": "--skra-comp-field-switch-checked-background",
214
+ "label": "Switch — track fill colour (on)",
215
+ "group": "State",
216
+ "type": "color",
217
+ "states": ["checked"],
218
+ "constraint": { "oklch": true },
219
+ "overridable": ["overlay"]
220
+ },
221
+ {
222
+ "token": "--skra-comp-field-switch-thumb-color",
223
+ "label": "Switch — thumb (knob) colour off",
224
+ "group": "Surface",
225
+ "type": "color",
226
+ "states": ["default"],
227
+ "constraint": { "oklch": true },
228
+ "overridable": ["overlay"]
229
+ },
230
+ {
231
+ "token": "--skra-comp-field-switch-thumb-color-checked",
232
+ "label": "Switch — thumb (knob) colour on",
233
+ "group": "State",
234
+ "type": "color",
235
+ "states": ["checked"],
236
+ "constraint": { "oklch": true },
237
+ "overridable": ["overlay"]
238
+ },
239
+ {
240
+ "token": "--skra-comp-field-select-option-foreground",
241
+ "label": "Select — option text colour (dropdown list)",
242
+ "group": "Surface",
243
+ "type": "color",
244
+ "states": ["default"],
245
+ "constraint": { "oklch": true },
246
+ "overridable": ["overlay"]
247
+ },
248
+ {
249
+ "token": "--skra-comp-field-select-option-background",
250
+ "label": "Select — option background colour (dropdown list)",
251
+ "group": "Surface",
252
+ "type": "color",
253
+ "states": ["default"],
254
+ "constraint": { "oklch": true },
255
+ "overridable": ["overlay"]
256
+ },
257
+ {
258
+ "token": "--skra-comp-field-group-legend-color",
259
+ "label": "Fieldset — legend (group label) text colour",
260
+ "group": "Typography",
261
+ "type": "color",
262
+ "states": ["default"],
263
+ "constraint": { "oklch": true },
264
+ "overridable": ["overlay", "subtree"]
265
+ }
266
+ ]
267
+ }
@@ -0,0 +1,61 @@
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "grid",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-grid-gap-sm",
8
+ "label": "Grid — 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-grid-gap-md",
17
+ "label": "Grid — 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-grid-gap-lg",
26
+ "label": "Grid — 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
+ "token": "--skra-comp-grid-min-sm",
35
+ "label": "Grid — small auto-fit track minimum",
36
+ "group": "Layout",
37
+ "type": "dimension",
38
+ "states": ["default"],
39
+ "constraint": { "unit": "rem", "min": 4, "max": 40 },
40
+ "overridable": ["overlay", "subtree", "instance"]
41
+ },
42
+ {
43
+ "token": "--skra-comp-grid-min-md",
44
+ "label": "Grid — medium auto-fit track minimum",
45
+ "group": "Layout",
46
+ "type": "dimension",
47
+ "states": ["default"],
48
+ "constraint": { "unit": "rem", "min": 4, "max": 40 },
49
+ "overridable": ["overlay", "subtree", "instance"]
50
+ },
51
+ {
52
+ "token": "--skra-comp-grid-min-lg",
53
+ "label": "Grid — large auto-fit track minimum",
54
+ "group": "Layout",
55
+ "type": "dimension",
56
+ "states": ["default"],
57
+ "constraint": { "unit": "rem", "min": 4, "max": 40 },
58
+ "overridable": ["overlay", "subtree", "instance"]
59
+ }
60
+ ]
61
+ }
@@ -0,0 +1,43 @@
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "icon",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-icon-size-default",
8
+ "label": "Icon — default size (when no size preset and no host cascade)",
9
+ "group": "Layout",
10
+ "type": "dimension",
11
+ "states": ["default"],
12
+ "constraint": { "unit": "rem", "min": 0.5, "max": 6 },
13
+ "overridable": ["overlay", "subtree", "instance"]
14
+ },
15
+ {
16
+ "token": "--skra-comp-icon-size-sm",
17
+ "label": "Icon — small size preset",
18
+ "group": "Layout",
19
+ "type": "dimension",
20
+ "states": ["default"],
21
+ "constraint": { "unit": "rem", "min": 0.5, "max": 6 },
22
+ "overridable": ["overlay", "subtree", "instance"]
23
+ },
24
+ {
25
+ "token": "--skra-comp-icon-size-md",
26
+ "label": "Icon — medium size preset",
27
+ "group": "Layout",
28
+ "type": "dimension",
29
+ "states": ["default"],
30
+ "constraint": { "unit": "rem", "min": 0.5, "max": 6 },
31
+ "overridable": ["overlay", "subtree", "instance"]
32
+ },
33
+ {
34
+ "token": "--skra-comp-icon-size-lg",
35
+ "label": "Icon — large size preset",
36
+ "group": "Layout",
37
+ "type": "dimension",
38
+ "states": ["default"],
39
+ "constraint": { "unit": "rem", "min": 0.5, "max": 6 },
40
+ "overridable": ["overlay", "subtree", "instance"]
41
+ }
42
+ ]
43
+ }