@skra/tokens 0.6.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 (17) hide show
  1. package/README.md +7 -0
  2. package/brutal/_comp.scss +1 -0
  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 +2 -2
  8. package/brutal/_theme.dark.scss +2 -2
  9. package/brutal/_theme.scoped.scss +1 -0
  10. package/manifests/alert.json +117 -107
  11. package/manifests/button.json +134 -133
  12. package/manifests/chip.json +117 -116
  13. package/manifests/toast.json +134 -133
  14. package/package.json +1 -1
  15. package/skra/_comp.scss +1 -0
  16. package/skra/_density.comfortable.scss +1 -0
  17. package/skra/_density.compact.scss +1 -0
package/README.md CHANGED
@@ -92,6 +92,13 @@ component: which `--skra-comp-*` tokens are public override targets, their types
92
92
  and permitted tiers. Tokens absent from a manifest are private regardless of technical
93
93
  overridability.
94
94
 
95
+ A token whose manifest entry carries `scopedBy` (e.g. `["intent", "emphasis"]`) is re-bound by the
96
+ component for each variant, so overriding its **canonical** name from an ancestor is a silent no-op.
97
+ Target the per-variant hook instead: `--skra-comp-<component>-<axis>-<intent>-<emphasis>`
98
+ (e.g. `--skra-comp-alert-focus-ring-color-danger-high`). Became variant-scoped in 0.7:
99
+ `--skra-comp-button-loading-indicator-color` and the `focus-ring-color` of `alert`, `toast` and
100
+ `chip`.
101
+
95
102
  ## Private skins
96
103
 
97
104
  Only skins marked `"publishable": true` in their `skin.config.json` are included in this
package/brutal/_comp.scss CHANGED
@@ -603,6 +603,7 @@
603
603
  --skra-comp-alert-focus-ring-color: var(--skra-sys-color-focus-ring);
604
604
  --skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
605
605
  --skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
606
+ --skra-comp-alert-actions-gap: var(--skra-sys-spacing-2);
606
607
  --skra-comp-avatar-background: var(--skra-sys-color-neutral-soft);
607
608
  --skra-comp-avatar-foreground: var(--skra-sys-color-neutral-strong);
608
609
  --skra-comp-avatar-border-color: var(--skra-sys-color-neutral-border);
package/brutal/_density.comfortable.scoped.scss CHANGED
@@ -34,6 +34,7 @@
34
34
  --skra-comp-alert-padding-inline: var(--skra-sys-spacing-4);
35
35
  --skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
36
36
  --skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
37
+ --skra-comp-alert-actions-gap: var(--skra-sys-spacing-2);
37
38
  --skra-comp-alert-dismiss-size: var(--skra-sys-size-interactive-sm);
38
39
  --skra-comp-avatar-size-sm: var(--skra-sys-size-avatar-sm);
39
40
  --skra-comp-avatar-size-md: var(--skra-sys-size-avatar-md);
package/brutal/_density.comfortable.scss CHANGED
@@ -34,6 +34,7 @@
34
34
  --skra-comp-alert-padding-inline: var(--skra-sys-spacing-4);
35
35
  --skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
36
36
  --skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
37
+ --skra-comp-alert-actions-gap: var(--skra-sys-spacing-2);
37
38
  --skra-comp-alert-dismiss-size: var(--skra-sys-size-interactive-sm);
38
39
  --skra-comp-avatar-size-sm: var(--skra-sys-size-avatar-sm);
39
40
  --skra-comp-avatar-size-md: var(--skra-sys-size-avatar-md);
package/brutal/_density.compact.scoped.scss CHANGED
@@ -34,6 +34,7 @@
34
34
  --skra-comp-alert-padding-inline: var(--skra-sys-spacing-4);
35
35
  --skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
36
36
  --skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
37
+ --skra-comp-alert-actions-gap: var(--skra-sys-spacing-2);
37
38
  --skra-comp-alert-dismiss-size: var(--skra-sys-size-interactive-sm);
38
39
  --skra-comp-avatar-size-sm: var(--skra-sys-size-avatar-sm);
39
40
  --skra-comp-avatar-size-md: var(--skra-sys-size-avatar-md);
package/brutal/_density.compact.scss CHANGED
@@ -34,6 +34,7 @@
34
34
  --skra-comp-alert-padding-inline: var(--skra-sys-spacing-4);
35
35
  --skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
36
36
  --skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
37
+ --skra-comp-alert-actions-gap: var(--skra-sys-spacing-2);
37
38
  --skra-comp-alert-dismiss-size: var(--skra-sys-size-interactive-sm);
38
39
  --skra-comp-avatar-size-sm: var(--skra-sys-size-avatar-sm);
39
40
  --skra-comp-avatar-size-md: var(--skra-sys-size-avatar-md);
package/brutal/_theme.dark.scoped.scss CHANGED
@@ -419,8 +419,8 @@
419
419
  --skra-comp-select-border-color-validation-invalid-active: oklch(45.0% 0.18 25);
420
420
  --skra-comp-select-arrow-color-hover: oklch(53.0% 0 0);
421
421
  --skra-comp-select-arrow-color-active: oklch(47.0% 0 0);
422
- --skra-comp-select-panel-background-hover: oklch(27.0% 0 0);
423
- --skra-comp-select-panel-background-active: oklch(33.0% 0 0);
422
+ --skra-comp-select-panel-background-hover: oklch(3.0% 0 0);
423
+ --skra-comp-select-panel-background-active: oklch(2.0% 0 0);
424
424
  --skra-comp-select-panel-foreground-hover: oklch(80.0% 0 0);
425
425
  --skra-comp-select-panel-foreground-active: oklch(74.0% 0 0);
426
426
  --skra-comp-select-panel-border-color-hover: oklch(80.0% 0 0);
package/brutal/_theme.dark.scss CHANGED
@@ -420,8 +420,8 @@
420
420
  --skra-comp-select-border-color-validation-invalid-active: oklch(45.0% 0.18 25);
421
421
  --skra-comp-select-arrow-color-hover: oklch(53.0% 0 0);
422
422
  --skra-comp-select-arrow-color-active: oklch(47.0% 0 0);
423
- --skra-comp-select-panel-background-hover: oklch(27.0% 0 0);
424
- --skra-comp-select-panel-background-active: oklch(33.0% 0 0);
423
+ --skra-comp-select-panel-background-hover: oklch(3.0% 0 0);
424
+ --skra-comp-select-panel-background-active: oklch(2.0% 0 0);
425
425
  --skra-comp-select-panel-foreground-hover: oklch(80.0% 0 0);
426
426
  --skra-comp-select-panel-foreground-active: oklch(74.0% 0 0);
427
427
  --skra-comp-select-panel-border-color-hover: oklch(80.0% 0 0);
package/brutal/_theme.scoped.scss CHANGED
@@ -907,6 +907,7 @@
907
907
  --skra-comp-alert-focus-ring-color: var(--skra-sys-color-focus-ring);
908
908
  --skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
909
909
  --skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
910
+ --skra-comp-alert-actions-gap: var(--skra-sys-spacing-2);
910
911
  --skra-comp-avatar-background: var(--skra-sys-color-neutral-soft);
911
912
  --skra-comp-avatar-foreground: var(--skra-sys-color-neutral-strong);
912
913
  --skra-comp-avatar-border-color: var(--skra-sys-color-neutral-border);
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
+ }
package/manifests/chip.json CHANGED
@@ -1,116 +1,117 @@
1
- {
2
- "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
- "component": "chip",
4
- "skraVersion": ">=1.0.0",
5
- "axes": [
6
- {
7
- "token": "--skra-comp-chip-background",
8
- "label": "Chip — 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-chip-foreground",
18
- "label": "Chip — text/icon/remove-glyph 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-chip-border-color",
28
- "label": "Chip — 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-chip-radius",
38
- "label": "Chip — corner radius (pill by default)",
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-chip-shadow",
47
- "label": "Chip — resting shadow",
48
- "group": "Surface",
49
- "type": "shadow",
50
- "states": ["default"],
51
- "overridable": ["overlay"]
52
- },
53
- {
54
- "token": "--skra-comp-chip-focus-ring-color",
55
- "label": "Remove 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-chip-focus-ring-width",
64
- "label": "Remove 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-chip-icon-gap",
73
- "label": "Chip — gap between the leading icon and the label",
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-chip-remove-gap",
82
- "label": "Chip — gap between the label and the remove control",
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-chip-remove-size",
91
- "label": "Chip — remove control hit-area size (WCAG 2.5.8 target; also the host min-block-size)",
92
- "group": "Spacing",
93
- "type": "dimension",
94
- "states": ["default"],
95
- "constraint": { "unit": "rem", "min": 1, "max": 3 },
96
- "overridable": ["overlay", "subtree"]
97
- },
98
- {
99
- "token": "--skra-comp-chip-motion-duration",
100
- "label": "Remove control — transition duration",
101
- "group": "Motion",
102
- "type": "duration",
103
- "states": ["default"],
104
- "constraint": { "unit": "ms" },
105
- "overridable": ["overlay"]
106
- },
107
- {
108
- "token": "--skra-comp-chip-motion-easing",
109
- "label": "Remove control — transition easing curve",
110
- "group": "Motion",
111
- "type": "cubic-bezier",
112
- "states": ["default"],
113
- "overridable": ["overlay"]
114
- }
115
- ]
116
- }
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "chip",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-chip-background",
8
+ "label": "Chip — 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-chip-foreground",
18
+ "label": "Chip — text/icon/remove-glyph 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-chip-border-color",
28
+ "label": "Chip — 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-chip-radius",
38
+ "label": "Chip — corner radius (pill by default)",
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-chip-shadow",
47
+ "label": "Chip — resting shadow",
48
+ "group": "Surface",
49
+ "type": "shadow",
50
+ "states": ["default"],
51
+ "overridable": ["overlay"]
52
+ },
53
+ {
54
+ "token": "--skra-comp-chip-focus-ring-color",
55
+ "label": "Remove 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-chip-focus-ring-width",
65
+ "label": "Remove 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-chip-icon-gap",
74
+ "label": "Chip — gap between the leading icon and the label",
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-chip-remove-gap",
83
+ "label": "Chip — gap between the label and the remove control",
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-chip-remove-size",
92
+ "label": "Chip — remove control hit-area size (WCAG 2.5.8 target; also the host min-block-size)",
93
+ "group": "Spacing",
94
+ "type": "dimension",
95
+ "states": ["default"],
96
+ "constraint": { "unit": "rem", "min": 1, "max": 3 },
97
+ "overridable": ["overlay", "subtree"]
98
+ },
99
+ {
100
+ "token": "--skra-comp-chip-motion-duration",
101
+ "label": "Remove 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-chip-motion-easing",
110
+ "label": "Remove control — transition easing curve",
111
+ "group": "Motion",
112
+ "type": "cubic-bezier",
113
+ "states": ["default"],
114
+ "overridable": ["overlay"]
115
+ }
116
+ ]
117
+ }
package/manifests/toast.json CHANGED
@@ -1,133 +1,134 @@
1
- {
2
- "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
- "component": "toast",
4
- "skraVersion": ">=1.0.0",
5
- "axes": [
6
- {
7
- "token": "--skra-comp-toast-background",
8
- "label": "Toast — 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-toast-foreground",
18
- "label": "Toast — 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-toast-border-color",
28
- "label": "Toast — 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-toast-radius",
38
- "label": "Toast — 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-toast-shadow",
47
- "label": "Toast — elevation shadow (toasts float above the page)",
48
- "group": "Surface",
49
- "type": "shadow",
50
- "states": ["default"],
51
- "overridable": ["overlay"]
52
- },
53
- {
54
- "token": "--skra-comp-toast-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-toast-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-toast-icon-gap",
73
- "label": "Toast — 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-toast-motion-duration",
82
- "label": "Toast — enter/transition duration",
83
- "group": "Motion",
84
- "type": "duration",
85
- "states": ["default"],
86
- "constraint": { "unit": "ms" },
87
- "overridable": ["overlay"]
88
- },
89
- {
90
- "token": "--skra-comp-toast-motion-easing",
91
- "label": "Toast — enter/transition easing curve",
92
- "group": "Motion",
93
- "type": "cubic-bezier",
94
- "states": ["default"],
95
- "overridable": ["overlay"]
96
- },
97
- {
98
- "token": "--skra-comp-toast-region-inset-block",
99
- "label": "Toast region — distance from the top/bottom viewport edge",
100
- "group": "Spacing",
101
- "type": "dimension",
102
- "states": ["default"],
103
- "constraint": { "unit": "rem", "min": 0, "max": 8 },
104
- "overridable": ["overlay", "subtree"]
105
- },
106
- {
107
- "token": "--skra-comp-toast-region-inset-inline",
108
- "label": "Toast region — distance from the left/right viewport edge",
109
- "group": "Spacing",
110
- "type": "dimension",
111
- "states": ["default"],
112
- "constraint": { "unit": "rem", "min": 0, "max": 8 },
113
- "overridable": ["overlay", "subtree"]
114
- },
115
- {
116
- "token": "--skra-comp-toast-region-gap",
117
- "label": "Toast region — gap between stacked toasts",
118
- "group": "Spacing",
119
- "type": "dimension",
120
- "states": ["default"],
121
- "constraint": { "unit": "rem", "min": 0, "max": 4 },
122
- "overridable": ["overlay", "subtree"]
123
- },
124
- {
125
- "token": "--skra-comp-toast-region-max-inline-size",
126
- "label": "Toast region — maximum toast/stack width",
127
- "group": "Spacing",
128
- "type": "dimension",
129
- "states": ["default"],
130
- "overridable": ["overlay", "subtree"]
131
- }
132
- ]
133
- }
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "toast",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-toast-background",
8
+ "label": "Toast — 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-toast-foreground",
18
+ "label": "Toast — 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-toast-border-color",
28
+ "label": "Toast — 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-toast-radius",
38
+ "label": "Toast — 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-toast-shadow",
47
+ "label": "Toast — elevation shadow (toasts float above the page)",
48
+ "group": "Surface",
49
+ "type": "shadow",
50
+ "states": ["default"],
51
+ "overridable": ["overlay"]
52
+ },
53
+ {
54
+ "token": "--skra-comp-toast-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-toast-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-toast-icon-gap",
74
+ "label": "Toast — 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-toast-motion-duration",
83
+ "label": "Toast — enter/transition duration",
84
+ "group": "Motion",
85
+ "type": "duration",
86
+ "states": ["default"],
87
+ "constraint": { "unit": "ms" },
88
+ "overridable": ["overlay"]
89
+ },
90
+ {
91
+ "token": "--skra-comp-toast-motion-easing",
92
+ "label": "Toast — enter/transition easing curve",
93
+ "group": "Motion",
94
+ "type": "cubic-bezier",
95
+ "states": ["default"],
96
+ "overridable": ["overlay"]
97
+ },
98
+ {
99
+ "token": "--skra-comp-toast-region-inset-block",
100
+ "label": "Toast region — distance from the top/bottom viewport edge",
101
+ "group": "Spacing",
102
+ "type": "dimension",
103
+ "states": ["default"],
104
+ "constraint": { "unit": "rem", "min": 0, "max": 8 },
105
+ "overridable": ["overlay", "subtree"]
106
+ },
107
+ {
108
+ "token": "--skra-comp-toast-region-inset-inline",
109
+ "label": "Toast region — distance from the left/right viewport edge",
110
+ "group": "Spacing",
111
+ "type": "dimension",
112
+ "states": ["default"],
113
+ "constraint": { "unit": "rem", "min": 0, "max": 8 },
114
+ "overridable": ["overlay", "subtree"]
115
+ },
116
+ {
117
+ "token": "--skra-comp-toast-region-gap",
118
+ "label": "Toast region — gap between stacked toasts",
119
+ "group": "Spacing",
120
+ "type": "dimension",
121
+ "states": ["default"],
122
+ "constraint": { "unit": "rem", "min": 0, "max": 4 },
123
+ "overridable": ["overlay", "subtree"]
124
+ },
125
+ {
126
+ "token": "--skra-comp-toast-region-max-inline-size",
127
+ "label": "Toast region — maximum toast/stack width",
128
+ "group": "Spacing",
129
+ "type": "dimension",
130
+ "states": ["default"],
131
+ "overridable": ["overlay", "subtree"]
132
+ }
133
+ ]
134
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skra/tokens",
3
- "version": "0.6.0",
3
+ "version": "0.7.0",
4
4
  "license": "Apache-2.0",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/skra/_comp.scss CHANGED
@@ -576,6 +576,7 @@
576
576
  --skra-comp-alert-focus-ring-color: var(--skra-sys-color-focus-ring);
577
577
  --skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
578
578
  --skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
579
+ --skra-comp-alert-actions-gap: var(--skra-sys-spacing-2);
579
580
  --skra-comp-avatar-background: var(--skra-sys-color-neutral-soft);
580
581
  --skra-comp-avatar-foreground: var(--skra-sys-color-neutral-strong);
581
582
  --skra-comp-avatar-border-color: var(--skra-sys-color-neutral-border);
package/skra/_density.comfortable.scss CHANGED
@@ -34,6 +34,7 @@
34
34
  --skra-comp-alert-padding-inline: var(--skra-sys-spacing-4);
35
35
  --skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
36
36
  --skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
37
+ --skra-comp-alert-actions-gap: var(--skra-sys-spacing-2);
37
38
  --skra-comp-alert-dismiss-size: var(--skra-sys-size-interactive-sm);
38
39
  --skra-comp-avatar-size-sm: var(--skra-sys-size-avatar-sm);
39
40
  --skra-comp-avatar-size-md: var(--skra-sys-size-avatar-md);
package/skra/_density.compact.scss CHANGED
@@ -34,6 +34,7 @@
34
34
  --skra-comp-alert-padding-inline: var(--skra-sys-spacing-4);
35
35
  --skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
36
36
  --skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
37
+ --skra-comp-alert-actions-gap: var(--skra-sys-spacing-2);
37
38
  --skra-comp-alert-dismiss-size: var(--skra-sys-size-interactive-sm);
38
39
  --skra-comp-avatar-size-sm: var(--skra-sys-size-avatar-sm);
39
40
  --skra-comp-avatar-size-md: var(--skra-sys-size-avatar-md);