@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/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
+ }