@skra/tokens 0.5.0 → 0.7.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 (21) hide show
  1. package/README.md +7 -0
  2. package/brutal/_comp.scss +36 -19
  3. package/brutal/_density.comfortable.scoped.scss +1 -0
  4. package/brutal/_density.comfortable.scss +1 -0
  5. package/brutal/_density.compact.scoped.scss +1 -0
  6. package/brutal/_density.compact.scss +1 -0
  7. package/brutal/_theme.dark.scoped.scss +67 -51
  8. package/brutal/_theme.dark.scss +67 -51
  9. package/brutal/_theme.scoped.scss +48 -31
  10. package/brutal/_theme.scss +15 -12
  11. package/manifests/alert.json +117 -107
  12. package/manifests/button.json +134 -133
  13. package/manifests/chip.json +117 -116
  14. package/manifests/star-rating.json +96 -96
  15. package/manifests/toast.json +134 -133
  16. package/package.json +1 -1
  17. package/skra/_comp.scss +36 -19
  18. package/skra/_density.comfortable.scss +1 -0
  19. package/skra/_density.compact.scss +1 -0
  20. package/skra/_theme.dark.scss +62 -46
  21. package/skra/_theme.scss +7 -4
package/brutal/_theme.scss CHANGED
@@ -21,14 +21,14 @@
21
21
  --skra-sys-color-primary-contrast-active: oklch(18.0% 0 0);
22
22
  --skra-sys-color-primary-border-hover: oklch(12.0% 0 0);
23
23
  --skra-sys-color-primary-border-active: oklch(18.0% 0 0);
24
- --skra-sys-color-primary-soft-hover: oklch(84.0% 0.06 100);
25
- --skra-sys-color-primary-soft-active: oklch(78.0% 0.06 100);
24
+ --skra-sys-color-primary-soft-hover: oklch(98.0% 0.06 100);
25
+ --skra-sys-color-primary-soft-active: oklch(98.0% 0.06 100);
26
26
  --skra-sys-color-primary-strong-hover: oklch(62.0% 0.11 98);
27
27
  --skra-sys-color-primary-strong-active: oklch(68.0% 0.11 98);
28
28
  --skra-sys-color-primary-ink-hover: oklch(62.0% 0.11 98);
29
29
  --skra-sys-color-primary-ink-active: oklch(68.0% 0.11 98);
30
- --skra-sys-color-secondary-base-hover: oklch(57.0% 0.04 250);
31
- --skra-sys-color-secondary-base-active: oklch(63.0% 0.04 250);
30
+ --skra-sys-color-secondary-base-hover: oklch(33.0% 0.04 250);
31
+ --skra-sys-color-secondary-base-active: oklch(27.0% 0.04 250);
32
32
  --skra-sys-color-secondary-contrast-hover: oklch(88.0% 0 0);
33
33
  --skra-sys-color-secondary-contrast-active: oklch(82.0% 0 0);
34
34
  --skra-sys-color-secondary-border-hover: oklch(12.0% 0 0);
@@ -39,8 +39,8 @@
39
39
  --skra-sys-color-secondary-strong-active: oklch(48.0% 0.04 250);
40
40
  --skra-sys-color-secondary-ink-hover: oklch(57.0% 0.04 250);
41
41
  --skra-sys-color-secondary-ink-active: oklch(63.0% 0.04 250);
42
- --skra-sys-color-info-base-hover: oklch(62.0% 0.12 220);
43
- --skra-sys-color-info-base-active: oklch(68.0% 0.12 220);
42
+ --skra-sys-color-info-base-hover: oklch(38.0% 0.12 220);
43
+ --skra-sys-color-info-base-active: oklch(32.0% 0.12 220);
44
44
  --skra-sys-color-info-contrast-hover: oklch(88.0% 0 0);
45
45
  --skra-sys-color-info-contrast-active: oklch(82.0% 0 0);
46
46
  --skra-sys-color-info-border-hover: oklch(12.0% 0 0);
@@ -51,8 +51,8 @@
51
51
  --skra-sys-color-info-strong-active: oklch(53.0% 0.12 220);
52
52
  --skra-sys-color-info-ink-hover: oklch(62.0% 0.12 220);
53
53
  --skra-sys-color-info-ink-active: oklch(68.0% 0.12 220);
54
- --skra-sys-color-success-base-hover: oklch(60.0% 0.15 145);
55
- --skra-sys-color-success-base-active: oklch(66.0% 0.15 145);
54
+ --skra-sys-color-success-base-hover: oklch(36.0% 0.15 145);
55
+ --skra-sys-color-success-base-active: oklch(30.0% 0.15 145);
56
56
  --skra-sys-color-success-contrast-hover: oklch(88.0% 0 0);
57
57
  --skra-sys-color-success-contrast-active: oklch(82.0% 0 0);
58
58
  --skra-sys-color-success-border-hover: oklch(12.0% 0 0);
@@ -63,8 +63,8 @@
63
63
  --skra-sys-color-success-strong-active: oklch(50.0% 0.13 145);
64
64
  --skra-sys-color-success-ink-hover: oklch(60.0% 0.15 145);
65
65
  --skra-sys-color-success-ink-active: oklch(66.0% 0.15 145);
66
- --skra-sys-color-warning-base-hover: oklch(58.0% 0.15 80);
67
- --skra-sys-color-warning-base-active: oklch(52.0% 0.15 80);
66
+ --skra-sys-color-warning-base-hover: oklch(82.0% 0.15 80);
67
+ --skra-sys-color-warning-base-active: oklch(88.0% 0.15 80);
68
68
  --skra-sys-color-warning-contrast-hover: oklch(30.0% 0.05 80);
69
69
  --skra-sys-color-warning-contrast-active: oklch(36.0% 0.05 80);
70
70
  --skra-sys-color-warning-border-hover: oklch(12.0% 0 0);
@@ -75,8 +75,8 @@
75
75
  --skra-sys-color-warning-strong-active: oklch(56.0% 0.12 80);
76
76
  --skra-sys-color-warning-ink-hover: oklch(50.0% 0.12 80);
77
77
  --skra-sys-color-warning-ink-active: oklch(56.0% 0.12 80);
78
- --skra-sys-color-danger-base-hover: oklch(60.0% 0.2 25);
79
- --skra-sys-color-danger-base-active: oklch(66.0% 0.2 25);
78
+ --skra-sys-color-danger-base-hover: oklch(36.0% 0.2 25);
79
+ --skra-sys-color-danger-base-active: oklch(30.0% 0.2 25);
80
80
  --skra-sys-color-danger-contrast-hover: oklch(88.0% 0 0);
81
81
  --skra-sys-color-danger-contrast-active: oklch(82.0% 0 0);
82
82
  --skra-sys-color-danger-border-hover: oklch(12.0% 0 0);
@@ -156,6 +156,7 @@
156
156
  --skra-ref-color-neutral-800: oklch(25% 0 0);
157
157
  --skra-ref-color-neutral-1000: oklch(0% 0 0);
158
158
  --skra-ref-color-primary-50: oklch(95% 0.04 250);
159
+ --skra-ref-color-primary-300: oklch(74% 0.13 250);
159
160
  --skra-ref-color-primary-400: oklch(65% 0.15 250);
160
161
  --skra-ref-color-primary-500: oklch(60% 0.15 250);
161
162
  --skra-ref-color-primary-600: oklch(52% 0.15 250);
@@ -186,6 +187,7 @@
186
187
  --skra-ref-color-danger-500: oklch(55% 0.2 25);
187
188
  --skra-ref-color-danger-600: oklch(48% 0.2 25);
188
189
  --skra-ref-color-danger-700: oklch(32% 0.16 25);
190
+ --skra-ref-color-violet-300: oklch(72% 0.16 295);
189
191
  --skra-ref-color-violet-500: oklch(45% 0.18 295);
190
192
  --skra-ref-color-cobalt-50: oklch(95% 0.03 262);
191
193
  --skra-ref-color-cobalt-500: oklch(56% 0.19 262);
@@ -246,6 +248,7 @@
246
248
  --skra-ref-color-sky-50: oklch(96% 0.025 235);
247
249
  --skra-ref-color-sky-300: oklch(84% 0.075 235);
248
250
  --skra-ref-color-sky-500: oklch(70% 0.1 235);
251
+ --skra-ref-color-sky-600: oklch(63% 0.1 235);
249
252
  --skra-ref-color-sky-700: oklch(45% 0.11 235);
250
253
  --skra-ref-color-sky-900: oklch(30% 0.08 235);
251
254
  --skra-ref-color-lilac-50: oklch(96% 0.022 300);
package/manifests/alert.json CHANGED
@@ -1,107 +1,117 @@
1
- {
2
- "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
- "component": "alert",
4
- "skraVersion": ">=1.0.0",
5
- "axes": [
6
- {
7
- "token": "--skra-comp-alert-background",
8
- "label": "Alert — background colour (resting)",
9
- "group": "Surface",
10
- "type": "color",
11
- "states": ["default"],
12
- "scopedBy": ["intent", "emphasis"],
13
- "constraint": { "oklch": true },
14
- "overridable": ["overlay", "subtree", "instance"]
15
- },
16
- {
17
- "token": "--skra-comp-alert-foreground",
18
- "label": "Alert — text/icon colour (resting)",
19
- "group": "Surface",
20
- "type": "color",
21
- "states": ["default"],
22
- "scopedBy": ["intent", "emphasis"],
23
- "constraint": { "oklch": true },
24
- "overridable": ["overlay", "subtree", "instance"]
25
- },
26
- {
27
- "token": "--skra-comp-alert-border-color",
28
- "label": "Alert — border colour",
29
- "group": "Surface",
30
- "type": "color",
31
- "states": ["default"],
32
- "scopedBy": ["intent", "emphasis"],
33
- "constraint": { "oklch": true },
34
- "overridable": ["overlay", "subtree"]
35
- },
36
- {
37
- "token": "--skra-comp-alert-radius",
38
- "label": "Alert — corner radius",
39
- "group": "Surface",
40
- "type": "dimension",
41
- "states": ["default"],
42
- "constraint": { "unit": "rem", "min": 0, "max": 2 },
43
- "overridable": ["overlay", "subtree"]
44
- },
45
- {
46
- "token": "--skra-comp-alert-shadow",
47
- "label": "Alert — resting shadow",
48
- "group": "Surface",
49
- "type": "shadow",
50
- "states": ["default"],
51
- "overridable": ["overlay"]
52
- },
53
- {
54
- "token": "--skra-comp-alert-focus-ring-color",
55
- "label": "Dismiss control — focus ring colour on :focus-visible",
56
- "group": "State",
57
- "type": "color",
58
- "states": ["focus-visible"],
59
- "constraint": { "oklch": true },
60
- "overridable": ["overlay"]
61
- },
62
- {
63
- "token": "--skra-comp-alert-focus-ring-width",
64
- "label": "Dismiss control — focus ring thickness on :focus-visible",
65
- "group": "State",
66
- "type": "dimension",
67
- "states": ["focus-visible"],
68
- "constraint": { "unit": "rem", "min": 0.0625, "max": 0.25 },
69
- "overridable": ["overlay"]
70
- },
71
- {
72
- "token": "--skra-comp-alert-icon-gap",
73
- "label": "Alert — gap between icon, message, and dismiss control",
74
- "group": "Spacing",
75
- "type": "dimension",
76
- "states": ["default"],
77
- "constraint": { "unit": "rem", "min": 0, "max": 2 },
78
- "overridable": ["overlay", "subtree"]
79
- },
80
- {
81
- "token": "--skra-comp-alert-title-gap",
82
- "label": "Alert — gap between the title and the message",
83
- "group": "Spacing",
84
- "type": "dimension",
85
- "states": ["default"],
86
- "constraint": { "unit": "rem", "min": 0, "max": 2 },
87
- "overridable": ["overlay", "subtree"]
88
- },
89
- {
90
- "token": "--skra-comp-alert-motion-duration",
91
- "label": "Dismiss control — transition duration",
92
- "group": "Motion",
93
- "type": "duration",
94
- "states": ["default"],
95
- "constraint": { "unit": "ms" },
96
- "overridable": ["overlay"]
97
- },
98
- {
99
- "token": "--skra-comp-alert-motion-easing",
100
- "label": "Dismiss control — transition easing curve",
101
- "group": "Motion",
102
- "type": "cubic-bezier",
103
- "states": ["default"],
104
- "overridable": ["overlay"]
105
- }
106
- ]
107
- }
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "alert",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-alert-background",
8
+ "label": "Alert — background colour (resting)",
9
+ "group": "Surface",
10
+ "type": "color",
11
+ "states": ["default"],
12
+ "scopedBy": ["intent", "emphasis"],
13
+ "constraint": { "oklch": true },
14
+ "overridable": ["overlay", "subtree", "instance"]
15
+ },
16
+ {
17
+ "token": "--skra-comp-alert-foreground",
18
+ "label": "Alert — text/icon colour (resting)",
19
+ "group": "Surface",
20
+ "type": "color",
21
+ "states": ["default"],
22
+ "scopedBy": ["intent", "emphasis"],
23
+ "constraint": { "oklch": true },
24
+ "overridable": ["overlay", "subtree", "instance"]
25
+ },
26
+ {
27
+ "token": "--skra-comp-alert-border-color",
28
+ "label": "Alert — border colour",
29
+ "group": "Surface",
30
+ "type": "color",
31
+ "states": ["default"],
32
+ "scopedBy": ["intent", "emphasis"],
33
+ "constraint": { "oklch": true },
34
+ "overridable": ["overlay", "subtree"]
35
+ },
36
+ {
37
+ "token": "--skra-comp-alert-radius",
38
+ "label": "Alert — corner radius",
39
+ "group": "Surface",
40
+ "type": "dimension",
41
+ "states": ["default"],
42
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
43
+ "overridable": ["overlay", "subtree"]
44
+ },
45
+ {
46
+ "token": "--skra-comp-alert-shadow",
47
+ "label": "Alert — resting shadow",
48
+ "group": "Surface",
49
+ "type": "shadow",
50
+ "states": ["default"],
51
+ "overridable": ["overlay"]
52
+ },
53
+ {
54
+ "token": "--skra-comp-alert-focus-ring-color",
55
+ "label": "Dismiss control — focus ring colour on :focus-visible",
56
+ "group": "State",
57
+ "type": "color",
58
+ "states": ["focus-visible"],
59
+ "scopedBy": ["intent", "emphasis"],
60
+ "constraint": { "oklch": true },
61
+ "overridable": ["overlay"]
62
+ },
63
+ {
64
+ "token": "--skra-comp-alert-focus-ring-width",
65
+ "label": "Dismiss control — focus ring thickness on :focus-visible",
66
+ "group": "State",
67
+ "type": "dimension",
68
+ "states": ["focus-visible"],
69
+ "constraint": { "unit": "rem", "min": 0.0625, "max": 0.25 },
70
+ "overridable": ["overlay"]
71
+ },
72
+ {
73
+ "token": "--skra-comp-alert-icon-gap",
74
+ "label": "Alert — gap between icon, message, and dismiss control",
75
+ "group": "Spacing",
76
+ "type": "dimension",
77
+ "states": ["default"],
78
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
79
+ "overridable": ["overlay", "subtree"]
80
+ },
81
+ {
82
+ "token": "--skra-comp-alert-title-gap",
83
+ "label": "Alert — gap between the title and the message",
84
+ "group": "Spacing",
85
+ "type": "dimension",
86
+ "states": ["default"],
87
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
88
+ "overridable": ["overlay", "subtree"]
89
+ },
90
+ {
91
+ "token": "--skra-comp-alert-actions-gap",
92
+ "label": "Alert — gap between actions; added to title-gap between the message and the actions",
93
+ "group": "Spacing",
94
+ "type": "dimension",
95
+ "states": ["default"],
96
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
97
+ "overridable": ["overlay", "subtree"]
98
+ },
99
+ {
100
+ "token": "--skra-comp-alert-motion-duration",
101
+ "label": "Dismiss control — transition duration",
102
+ "group": "Motion",
103
+ "type": "duration",
104
+ "states": ["default"],
105
+ "constraint": { "unit": "ms" },
106
+ "overridable": ["overlay"]
107
+ },
108
+ {
109
+ "token": "--skra-comp-alert-motion-easing",
110
+ "label": "Dismiss control — transition easing curve",
111
+ "group": "Motion",
112
+ "type": "cubic-bezier",
113
+ "states": ["default"],
114
+ "overridable": ["overlay"]
115
+ }
116
+ ]
117
+ }
package/manifests/button.json CHANGED
@@ -1,133 +1,134 @@
1
- {
2
- "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
- "component": "button",
4
- "skraVersion": ">=1.0.0",
5
- "axes": [
6
- {
7
- "token": "--skra-comp-button-background",
8
- "label": "Button — background colour (resting)",
9
- "group": "Surface",
10
- "type": "color",
11
- "states": ["default"],
12
- "scopedBy": ["intent", "emphasis"],
13
- "constraint": { "oklch": true },
14
- "overridable": ["overlay", "subtree", "instance"]
15
- },
16
- {
17
- "token": "--skra-comp-button-foreground",
18
- "label": "Button — label/icon colour (resting)",
19
- "group": "Surface",
20
- "type": "color",
21
- "states": ["default"],
22
- "scopedBy": ["intent", "emphasis"],
23
- "constraint": { "oklch": true },
24
- "overridable": ["overlay", "subtree", "instance"]
25
- },
26
- {
27
- "token": "--skra-comp-button-border-color",
28
- "label": "Button — border colour",
29
- "group": "Surface",
30
- "type": "color",
31
- "states": ["default"],
32
- "scopedBy": ["intent", "emphasis"],
33
- "constraint": { "oklch": true },
34
- "overridable": ["overlay", "subtree"]
35
- },
36
- {
37
- "token": "--skra-comp-button-radius",
38
- "label": "Button — corner radius",
39
- "group": "Surface",
40
- "type": "dimension",
41
- "states": ["default"],
42
- "constraint": { "unit": "rem", "min": 0, "max": 2 },
43
- "overridable": ["overlay", "subtree"]
44
- },
45
- {
46
- "token": "--skra-comp-button-shadow",
47
- "label": "Button — resting shadow",
48
- "group": "Surface",
49
- "type": "shadow",
50
- "states": ["default"],
51
- "overridable": ["overlay"]
52
- },
53
- {
54
- "token": "--skra-comp-button-shadow-hover",
55
- "label": "Button — shadow on hover",
56
- "group": "State",
57
- "type": "shadow",
58
- "states": ["hover"],
59
- "overridable": ["overlay"]
60
- },
61
- {
62
- "token": "--skra-comp-button-focus-ring-color",
63
- "label": "Focus ring — outline colour on :focus-visible",
64
- "group": "State",
65
- "type": "color",
66
- "states": ["focus-visible"],
67
- "constraint": { "oklch": true },
68
- "overridable": ["overlay"]
69
- },
70
- {
71
- "token": "--skra-comp-button-focus-ring-width",
72
- "label": "Focus ring — outline thickness on :focus-visible",
73
- "group": "State",
74
- "type": "dimension",
75
- "states": ["focus-visible"],
76
- "constraint": { "unit": "rem", "min": 0.0625, "max": 0.25 },
77
- "overridable": ["overlay"]
78
- },
79
- {
80
- "token": "--skra-comp-button-background-disabled",
81
- "label": "Button — background colour when disabled",
82
- "group": "State",
83
- "type": "color",
84
- "states": ["disabled"],
85
- "constraint": { "oklch": true },
86
- "overridable": ["overlay"]
87
- },
88
- {
89
- "token": "--skra-comp-button-foreground-disabled",
90
- "label": "Button — label colour when disabled",
91
- "group": "State",
92
- "type": "color",
93
- "states": ["disabled"],
94
- "constraint": { "oklch": true },
95
- "overridable": ["overlay"]
96
- },
97
- {
98
- "token": "--skra-comp-button-loading-indicator-color",
99
- "label": "Button — loading spinner colour",
100
- "group": "State",
101
- "type": "color",
102
- "states": ["loading"],
103
- "constraint": { "oklch": true },
104
- "overridable": ["overlay"]
105
- },
106
- {
107
- "token": "--skra-comp-button-icon-gap",
108
- "label": "Button — gap between icon slot and label",
109
- "group": "Spacing",
110
- "type": "dimension",
111
- "states": ["default"],
112
- "constraint": { "unit": "rem", "min": 0, "max": 2 },
113
- "overridable": ["overlay", "subtree"]
114
- },
115
- {
116
- "token": "--skra-comp-button-motion-duration",
117
- "label": "Transition duration for state changes",
118
- "group": "Motion",
119
- "type": "duration",
120
- "states": ["default"],
121
- "constraint": { "unit": "ms" },
122
- "overridable": ["overlay"]
123
- },
124
- {
125
- "token": "--skra-comp-button-motion-easing",
126
- "label": "Transition easing curve",
127
- "group": "Motion",
128
- "type": "cubic-bezier",
129
- "states": ["default"],
130
- "overridable": ["overlay"]
131
- }
132
- ]
133
- }
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "button",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-button-background",
8
+ "label": "Button — background colour (resting)",
9
+ "group": "Surface",
10
+ "type": "color",
11
+ "states": ["default"],
12
+ "scopedBy": ["intent", "emphasis"],
13
+ "constraint": { "oklch": true },
14
+ "overridable": ["overlay", "subtree", "instance"]
15
+ },
16
+ {
17
+ "token": "--skra-comp-button-foreground",
18
+ "label": "Button — label/icon colour (resting)",
19
+ "group": "Surface",
20
+ "type": "color",
21
+ "states": ["default"],
22
+ "scopedBy": ["intent", "emphasis"],
23
+ "constraint": { "oklch": true },
24
+ "overridable": ["overlay", "subtree", "instance"]
25
+ },
26
+ {
27
+ "token": "--skra-comp-button-border-color",
28
+ "label": "Button — border colour",
29
+ "group": "Surface",
30
+ "type": "color",
31
+ "states": ["default"],
32
+ "scopedBy": ["intent", "emphasis"],
33
+ "constraint": { "oklch": true },
34
+ "overridable": ["overlay", "subtree"]
35
+ },
36
+ {
37
+ "token": "--skra-comp-button-radius",
38
+ "label": "Button — corner radius",
39
+ "group": "Surface",
40
+ "type": "dimension",
41
+ "states": ["default"],
42
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
43
+ "overridable": ["overlay", "subtree"]
44
+ },
45
+ {
46
+ "token": "--skra-comp-button-shadow",
47
+ "label": "Button — resting shadow",
48
+ "group": "Surface",
49
+ "type": "shadow",
50
+ "states": ["default"],
51
+ "overridable": ["overlay"]
52
+ },
53
+ {
54
+ "token": "--skra-comp-button-shadow-hover",
55
+ "label": "Button — shadow on hover",
56
+ "group": "State",
57
+ "type": "shadow",
58
+ "states": ["hover"],
59
+ "overridable": ["overlay"]
60
+ },
61
+ {
62
+ "token": "--skra-comp-button-focus-ring-color",
63
+ "label": "Focus ring — outline colour on :focus-visible",
64
+ "group": "State",
65
+ "type": "color",
66
+ "states": ["focus-visible"],
67
+ "constraint": { "oklch": true },
68
+ "overridable": ["overlay", "subtree"]
69
+ },
70
+ {
71
+ "token": "--skra-comp-button-focus-ring-width",
72
+ "label": "Focus ring — outline thickness on :focus-visible",
73
+ "group": "State",
74
+ "type": "dimension",
75
+ "states": ["focus-visible"],
76
+ "constraint": { "unit": "rem", "min": 0.0625, "max": 0.25 },
77
+ "overridable": ["overlay"]
78
+ },
79
+ {
80
+ "token": "--skra-comp-button-background-disabled",
81
+ "label": "Button — background colour when disabled",
82
+ "group": "State",
83
+ "type": "color",
84
+ "states": ["disabled"],
85
+ "constraint": { "oklch": true },
86
+ "overridable": ["overlay"]
87
+ },
88
+ {
89
+ "token": "--skra-comp-button-foreground-disabled",
90
+ "label": "Button — label colour when disabled",
91
+ "group": "State",
92
+ "type": "color",
93
+ "states": ["disabled"],
94
+ "constraint": { "oklch": true },
95
+ "overridable": ["overlay"]
96
+ },
97
+ {
98
+ "token": "--skra-comp-button-loading-indicator-color",
99
+ "label": "Button — loading spinner colour",
100
+ "group": "State",
101
+ "type": "color",
102
+ "states": ["loading"],
103
+ "scopedBy": ["intent", "emphasis"],
104
+ "constraint": { "oklch": true },
105
+ "overridable": ["overlay"]
106
+ },
107
+ {
108
+ "token": "--skra-comp-button-icon-gap",
109
+ "label": "Button — gap between icon slot and label",
110
+ "group": "Spacing",
111
+ "type": "dimension",
112
+ "states": ["default"],
113
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
114
+ "overridable": ["overlay", "subtree"]
115
+ },
116
+ {
117
+ "token": "--skra-comp-button-motion-duration",
118
+ "label": "Transition duration for state changes",
119
+ "group": "Motion",
120
+ "type": "duration",
121
+ "states": ["default"],
122
+ "constraint": { "unit": "ms" },
123
+ "overridable": ["overlay"]
124
+ },
125
+ {
126
+ "token": "--skra-comp-button-motion-easing",
127
+ "label": "Transition easing curve",
128
+ "group": "Motion",
129
+ "type": "cubic-bezier",
130
+ "states": ["default"],
131
+ "overridable": ["overlay"]
132
+ }
133
+ ]
134
+ }