@skra/tokens 0.6.0 → 0.8.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 (19) hide show
  1. package/README.md +7 -0
  2. package/brutal/_comp.scss +76 -2
  3. package/brutal/_density.comfortable.scoped.scss +11 -0
  4. package/brutal/_density.comfortable.scss +11 -0
  5. package/brutal/_density.compact.scoped.scss +11 -0
  6. package/brutal/_density.compact.scss +11 -0
  7. package/brutal/_theme.dark.scoped.scss +49 -4
  8. package/brutal/_theme.dark.scss +49 -4
  9. package/brutal/_theme.scoped.scss +76 -2
  10. package/manifests/alert.json +117 -107
  11. package/manifests/button.json +134 -133
  12. package/manifests/chip.json +117 -116
  13. package/manifests/file-item.json +6 -0
  14. package/manifests/toast.json +134 -133
  15. package/package.json +1 -1
  16. package/skra/_comp.scss +74 -2
  17. package/skra/_density.comfortable.scss +11 -0
  18. package/skra/_density.compact.scss +11 -0
  19. package/skra/_theme.dark.scss +44 -2
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/file-item.json ADDED
@@ -0,0 +1,6 @@
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "file-item",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": []
6
+ }
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.8.0",
4
4
  "license": "Apache-2.0",
5
5
  "publishConfig": {
6
6
  "access": "public"