@skra/tokens 0.2.0 → 0.3.1

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 (40) hide show
  1. package/LICENSE +201 -201
  2. package/NOTICE +7 -7
  3. package/README.md +99 -64
  4. package/brutal/_theme.scoped.scss +18 -18
  5. package/brutal/_theme.scss +60 -12
  6. package/brutal/skin.config.json +40 -40
  7. package/manifests/accordion.json +52 -52
  8. package/manifests/alert.json +107 -107
  9. package/manifests/avatar.json +78 -78
  10. package/manifests/badge.json +63 -63
  11. package/manifests/box.json +34 -34
  12. package/manifests/button.json +133 -133
  13. package/manifests/chip.json +116 -116
  14. package/manifests/combobox.json +141 -141
  15. package/manifests/datepicker.json +159 -159
  16. package/manifests/dialog.json +104 -104
  17. package/manifests/field.json +267 -267
  18. package/manifests/grid.json +61 -61
  19. package/manifests/icon.json +43 -43
  20. package/manifests/kbd.json +68 -68
  21. package/manifests/link.json +107 -107
  22. package/manifests/menu.json +122 -122
  23. package/manifests/popover.json +104 -104
  24. package/manifests/progress.json +69 -69
  25. package/manifests/select.json +177 -177
  26. package/manifests/skeleton.json +43 -43
  27. package/manifests/stack.json +34 -34
  28. package/manifests/star-rating.json +96 -96
  29. package/manifests/status-dot.json +69 -69
  30. package/manifests/tabs.json +52 -52
  31. package/manifests/toast.json +133 -133
  32. package/manifests/tooltip.json +113 -113
  33. package/manifests/typography.json +169 -169
  34. package/package.json +1 -1
  35. package/skra/_form-controls.scss +74 -74
  36. package/skra/_overlay.scss +42 -42
  37. package/skra/_theme.dark.scss +3 -0
  38. package/skra/_theme.scss +61 -10
  39. package/skra/skin.config.json +37 -37
  40. package/skra/utilities.scss +38 -38
package/manifests/toast.json CHANGED
@@ -1,133 +1,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
- "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
+ "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
+ }
package/manifests/tooltip.json CHANGED
@@ -1,113 +1,113 @@
1
- {
2
- "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
- "component": "tooltip",
4
- "skraVersion": ">=1.0.0",
5
- "axes": [
6
- {
7
- "token": "--skra-comp-tooltip-background",
8
- "label": "Tooltip — surface background (inverse by default)",
9
- "group": "Surface",
10
- "type": "color",
11
- "states": ["default"],
12
- "constraint": { "oklch": true },
13
- "overridable": ["overlay", "subtree", "instance"]
14
- },
15
- {
16
- "token": "--skra-comp-tooltip-foreground",
17
- "label": "Tooltip — text colour",
18
- "group": "Surface",
19
- "type": "color",
20
- "states": ["default"],
21
- "constraint": { "oklch": true },
22
- "overridable": ["overlay", "subtree", "instance"]
23
- },
24
- {
25
- "token": "--skra-comp-tooltip-radius",
26
- "label": "Tooltip — corner radius",
27
- "group": "Surface",
28
- "type": "dimension",
29
- "states": ["default"],
30
- "constraint": { "unit": "rem", "min": 0, "max": 1 },
31
- "overridable": ["overlay", "subtree"]
32
- },
33
- {
34
- "token": "--skra-comp-tooltip-shadow",
35
- "label": "Tooltip — elevation shadow",
36
- "group": "Surface",
37
- "type": "shadow",
38
- "states": ["default"],
39
- "overridable": ["overlay"]
40
- },
41
- {
42
- "token": "--skra-comp-tooltip-padding-block",
43
- "label": "Tooltip — inner block padding",
44
- "group": "Spacing",
45
- "type": "dimension",
46
- "states": ["default"],
47
- "constraint": { "unit": "rem", "min": 0, "max": 2 },
48
- "overridable": ["overlay", "subtree"]
49
- },
50
- {
51
- "token": "--skra-comp-tooltip-padding-inline",
52
- "label": "Tooltip — inner inline padding",
53
- "group": "Spacing",
54
- "type": "dimension",
55
- "states": ["default"],
56
- "constraint": { "unit": "rem", "min": 0, "max": 2 },
57
- "overridable": ["overlay", "subtree"]
58
- },
59
- {
60
- "token": "--skra-comp-tooltip-max-inline-size",
61
- "label": "Tooltip — maximum width before text wraps",
62
- "group": "Spacing",
63
- "type": "dimension",
64
- "states": ["default"],
65
- "constraint": { "unit": "rem", "min": 8, "max": 32 },
66
- "overridable": ["overlay", "subtree"]
67
- },
68
- {
69
- "token": "--skra-comp-tooltip-offset",
70
- "label": "Tooltip — gap between trigger and panel",
71
- "group": "Spacing",
72
- "type": "dimension",
73
- "states": ["default"],
74
- "constraint": { "unit": "rem", "min": 0, "max": 1 },
75
- "overridable": ["overlay", "subtree"]
76
- },
77
- {
78
- "token": "--skra-comp-tooltip-motion-duration",
79
- "label": "Tooltip — enter/leave transition duration",
80
- "group": "Motion",
81
- "type": "duration",
82
- "states": ["default"],
83
- "constraint": { "unit": "ms" },
84
- "overridable": ["overlay"]
85
- },
86
- {
87
- "token": "--skra-comp-tooltip-motion-easing",
88
- "label": "Tooltip — enter/leave transition easing curve",
89
- "group": "Motion",
90
- "type": "cubic-bezier",
91
- "states": ["default"],
92
- "overridable": ["overlay"]
93
- },
94
- {
95
- "token": "--skra-comp-tooltip-show-delay",
96
- "label": "Tooltip — hover open delay",
97
- "group": "Motion",
98
- "type": "duration",
99
- "states": ["default"],
100
- "constraint": { "unit": "ms" },
101
- "overridable": ["overlay"]
102
- },
103
- {
104
- "token": "--skra-comp-tooltip-hide-delay",
105
- "label": "Tooltip — hover close grace delay (WCAG 1.4.13 hoverable)",
106
- "group": "Motion",
107
- "type": "duration",
108
- "states": ["default"],
109
- "constraint": { "unit": "ms" },
110
- "overridable": ["overlay"]
111
- }
112
- ]
113
- }
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "tooltip",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-tooltip-background",
8
+ "label": "Tooltip — surface background (inverse by default)",
9
+ "group": "Surface",
10
+ "type": "color",
11
+ "states": ["default"],
12
+ "constraint": { "oklch": true },
13
+ "overridable": ["overlay", "subtree", "instance"]
14
+ },
15
+ {
16
+ "token": "--skra-comp-tooltip-foreground",
17
+ "label": "Tooltip — text colour",
18
+ "group": "Surface",
19
+ "type": "color",
20
+ "states": ["default"],
21
+ "constraint": { "oklch": true },
22
+ "overridable": ["overlay", "subtree", "instance"]
23
+ },
24
+ {
25
+ "token": "--skra-comp-tooltip-radius",
26
+ "label": "Tooltip — corner radius",
27
+ "group": "Surface",
28
+ "type": "dimension",
29
+ "states": ["default"],
30
+ "constraint": { "unit": "rem", "min": 0, "max": 1 },
31
+ "overridable": ["overlay", "subtree"]
32
+ },
33
+ {
34
+ "token": "--skra-comp-tooltip-shadow",
35
+ "label": "Tooltip — elevation shadow",
36
+ "group": "Surface",
37
+ "type": "shadow",
38
+ "states": ["default"],
39
+ "overridable": ["overlay"]
40
+ },
41
+ {
42
+ "token": "--skra-comp-tooltip-padding-block",
43
+ "label": "Tooltip — inner block padding",
44
+ "group": "Spacing",
45
+ "type": "dimension",
46
+ "states": ["default"],
47
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
48
+ "overridable": ["overlay", "subtree"]
49
+ },
50
+ {
51
+ "token": "--skra-comp-tooltip-padding-inline",
52
+ "label": "Tooltip — inner inline padding",
53
+ "group": "Spacing",
54
+ "type": "dimension",
55
+ "states": ["default"],
56
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
57
+ "overridable": ["overlay", "subtree"]
58
+ },
59
+ {
60
+ "token": "--skra-comp-tooltip-max-inline-size",
61
+ "label": "Tooltip — maximum width before text wraps",
62
+ "group": "Spacing",
63
+ "type": "dimension",
64
+ "states": ["default"],
65
+ "constraint": { "unit": "rem", "min": 8, "max": 32 },
66
+ "overridable": ["overlay", "subtree"]
67
+ },
68
+ {
69
+ "token": "--skra-comp-tooltip-offset",
70
+ "label": "Tooltip — gap between trigger and panel",
71
+ "group": "Spacing",
72
+ "type": "dimension",
73
+ "states": ["default"],
74
+ "constraint": { "unit": "rem", "min": 0, "max": 1 },
75
+ "overridable": ["overlay", "subtree"]
76
+ },
77
+ {
78
+ "token": "--skra-comp-tooltip-motion-duration",
79
+ "label": "Tooltip — enter/leave transition duration",
80
+ "group": "Motion",
81
+ "type": "duration",
82
+ "states": ["default"],
83
+ "constraint": { "unit": "ms" },
84
+ "overridable": ["overlay"]
85
+ },
86
+ {
87
+ "token": "--skra-comp-tooltip-motion-easing",
88
+ "label": "Tooltip — enter/leave transition easing curve",
89
+ "group": "Motion",
90
+ "type": "cubic-bezier",
91
+ "states": ["default"],
92
+ "overridable": ["overlay"]
93
+ },
94
+ {
95
+ "token": "--skra-comp-tooltip-show-delay",
96
+ "label": "Tooltip — hover open delay",
97
+ "group": "Motion",
98
+ "type": "duration",
99
+ "states": ["default"],
100
+ "constraint": { "unit": "ms" },
101
+ "overridable": ["overlay"]
102
+ },
103
+ {
104
+ "token": "--skra-comp-tooltip-hide-delay",
105
+ "label": "Tooltip — hover close grace delay (WCAG 1.4.13 hoverable)",
106
+ "group": "Motion",
107
+ "type": "duration",
108
+ "states": ["default"],
109
+ "constraint": { "unit": "ms" },
110
+ "overridable": ["overlay"]
111
+ }
112
+ ]
113
+ }