@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/star-rating.json CHANGED
@@ -1,96 +1,96 @@
1
- {
2
- "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
- "component": "star-rating",
4
- "skraVersion": ">=1.0.0",
5
- "axes": [
6
- {
7
- "token": "--skra-comp-star-rating-star-color-empty",
8
- "label": "Star — unselected (empty) glyph colour",
9
- "group": "Surface",
10
- "type": "color",
11
- "states": ["default"],
12
- "constraint": { "oklch": true },
13
- "overridable": ["overlay", "subtree", "instance"]
14
- },
15
- {
16
- "token": "--skra-comp-star-rating-star-color-filled",
17
- "label": "Star — selected / hover-preview glyph colour (the rating accent)",
18
- "group": "Surface",
19
- "type": "color",
20
- "states": ["default"],
21
- "constraint": { "oklch": true },
22
- "overridable": ["overlay", "subtree", "instance"]
23
- },
24
- {
25
- "token": "--skra-comp-star-rating-gap",
26
- "label": "Star rating — gap between stars",
27
- "group": "Spacing",
28
- "type": "dimension",
29
- "states": ["default"],
30
- "constraint": { "unit": "rem", "min": 0, "max": 1 },
31
- "overridable": ["overlay", "subtree"]
32
- },
33
- {
34
- "token": "--skra-comp-star-rating-star-size-sm",
35
- "label": "Star glyph size — size=sm",
36
- "group": "Spacing",
37
- "type": "dimension",
38
- "states": ["default"],
39
- "constraint": { "unit": "rem", "min": 0.5, "max": 3 },
40
- "overridable": ["overlay", "subtree"]
41
- },
42
- {
43
- "token": "--skra-comp-star-rating-star-size-md",
44
- "label": "Star glyph size — size=md (default)",
45
- "group": "Spacing",
46
- "type": "dimension",
47
- "states": ["default"],
48
- "constraint": { "unit": "rem", "min": 0.5, "max": 3 },
49
- "overridable": ["overlay", "subtree"]
50
- },
51
- {
52
- "token": "--skra-comp-star-rating-star-size-lg",
53
- "label": "Star glyph size — size=lg",
54
- "group": "Spacing",
55
- "type": "dimension",
56
- "states": ["default"],
57
- "constraint": { "unit": "rem", "min": 0.5, "max": 3 },
58
- "overridable": ["overlay", "subtree"]
59
- },
60
- {
61
- "token": "--skra-comp-star-rating-focus-ring-color",
62
- "label": "Focused star — focus ring colour on :focus-visible",
63
- "group": "State",
64
- "type": "color",
65
- "states": ["focus-visible"],
66
- "constraint": { "oklch": true },
67
- "overridable": ["overlay"]
68
- },
69
- {
70
- "token": "--skra-comp-star-rating-focus-ring-width",
71
- "label": "Focused star — focus ring thickness on :focus-visible",
72
- "group": "State",
73
- "type": "dimension",
74
- "states": ["focus-visible"],
75
- "constraint": { "unit": "rem", "min": 0.0625, "max": 0.25 },
76
- "overridable": ["overlay"]
77
- },
78
- {
79
- "token": "--skra-comp-star-rating-motion-duration",
80
- "label": "Star fill — colour transition duration",
81
- "group": "Motion",
82
- "type": "duration",
83
- "states": ["default"],
84
- "constraint": { "unit": "ms" },
85
- "overridable": ["overlay"]
86
- },
87
- {
88
- "token": "--skra-comp-star-rating-motion-easing",
89
- "label": "Star fill — colour transition easing curve",
90
- "group": "Motion",
91
- "type": "cubic-bezier",
92
- "states": ["default"],
93
- "overridable": ["overlay"]
94
- }
95
- ]
96
- }
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "star-rating",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-star-rating-star-color-empty",
8
+ "label": "Star — unselected (empty) glyph colour",
9
+ "group": "Surface",
10
+ "type": "color",
11
+ "states": ["default"],
12
+ "constraint": { "oklch": true },
13
+ "overridable": ["overlay", "subtree", "instance"]
14
+ },
15
+ {
16
+ "token": "--skra-comp-star-rating-star-color-filled",
17
+ "label": "Star — selected / hover-preview glyph colour (the rating accent)",
18
+ "group": "Surface",
19
+ "type": "color",
20
+ "states": ["default"],
21
+ "constraint": { "oklch": true },
22
+ "overridable": ["overlay", "subtree", "instance"]
23
+ },
24
+ {
25
+ "token": "--skra-comp-star-rating-gap",
26
+ "label": "Star rating — gap between stars",
27
+ "group": "Spacing",
28
+ "type": "dimension",
29
+ "states": ["default"],
30
+ "constraint": { "unit": "rem", "min": 0, "max": 1 },
31
+ "overridable": ["overlay", "subtree"]
32
+ },
33
+ {
34
+ "token": "--skra-comp-star-rating-star-size-sm",
35
+ "label": "Star glyph size — size=sm",
36
+ "group": "Spacing",
37
+ "type": "dimension",
38
+ "states": ["default"],
39
+ "constraint": { "unit": "rem", "min": 0.5, "max": 3 },
40
+ "overridable": ["overlay", "subtree"]
41
+ },
42
+ {
43
+ "token": "--skra-comp-star-rating-star-size-md",
44
+ "label": "Star glyph size — size=md (default)",
45
+ "group": "Spacing",
46
+ "type": "dimension",
47
+ "states": ["default"],
48
+ "constraint": { "unit": "rem", "min": 0.5, "max": 3 },
49
+ "overridable": ["overlay", "subtree"]
50
+ },
51
+ {
52
+ "token": "--skra-comp-star-rating-star-size-lg",
53
+ "label": "Star glyph size — size=lg",
54
+ "group": "Spacing",
55
+ "type": "dimension",
56
+ "states": ["default"],
57
+ "constraint": { "unit": "rem", "min": 0.5, "max": 3 },
58
+ "overridable": ["overlay", "subtree"]
59
+ },
60
+ {
61
+ "token": "--skra-comp-star-rating-focus-ring-color",
62
+ "label": "Focused star — focus ring colour on :focus-visible",
63
+ "group": "State",
64
+ "type": "color",
65
+ "states": ["focus-visible"],
66
+ "constraint": { "oklch": true },
67
+ "overridable": ["overlay"]
68
+ },
69
+ {
70
+ "token": "--skra-comp-star-rating-focus-ring-width",
71
+ "label": "Focused star — focus ring thickness on :focus-visible",
72
+ "group": "State",
73
+ "type": "dimension",
74
+ "states": ["focus-visible"],
75
+ "constraint": { "unit": "rem", "min": 0.0625, "max": 0.25 },
76
+ "overridable": ["overlay"]
77
+ },
78
+ {
79
+ "token": "--skra-comp-star-rating-motion-duration",
80
+ "label": "Star fill — colour transition duration",
81
+ "group": "Motion",
82
+ "type": "duration",
83
+ "states": ["default"],
84
+ "constraint": { "unit": "ms" },
85
+ "overridable": ["overlay"]
86
+ },
87
+ {
88
+ "token": "--skra-comp-star-rating-motion-easing",
89
+ "label": "Star fill — colour transition easing curve",
90
+ "group": "Motion",
91
+ "type": "cubic-bezier",
92
+ "states": ["default"],
93
+ "overridable": ["overlay"]
94
+ }
95
+ ]
96
+ }
package/manifests/status-dot.json CHANGED
@@ -1,69 +1,69 @@
1
- {
2
- "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
- "component": "status-dot",
4
- "skraVersion": ">=1.0.0",
5
- "axes": [
6
- {
7
- "token": "--skra-comp-status-dot-border-color",
8
- "label": "Status dot — ring/halo colour (the avatar punch-out; surface by default, invisible inline)",
9
- "group": "Surface",
10
- "type": "color",
11
- "states": ["default"],
12
- "constraint": { "oklch": true },
13
- "overridable": ["overlay", "subtree", "instance"]
14
- },
15
- {
16
- "token": "--skra-comp-status-dot-border-width",
17
- "label": "Status dot — ring/halo thickness (0 for no ring)",
18
- "group": "Surface",
19
- "type": "dimension",
20
- "states": ["default"],
21
- "constraint": { "unit": "rem", "min": 0, "max": 1 },
22
- "overridable": ["overlay", "subtree"]
23
- },
24
- {
25
- "token": "--skra-comp-status-dot-radius",
26
- "label": "Status dot — corner radius (circle by default; a skin may ship square)",
27
- "group": "Surface",
28
- "type": "dimension",
29
- "states": ["default"],
30
- "constraint": { "unit": "rem", "min": 0, "max": 2 },
31
- "overridable": ["overlay", "subtree"]
32
- },
33
- {
34
- "token": "--skra-comp-status-dot-shadow",
35
- "label": "Status dot — resting shadow",
36
- "group": "Surface",
37
- "type": "shadow",
38
- "states": ["default"],
39
- "overridable": ["overlay"]
40
- },
41
- {
42
- "token": "--skra-comp-status-dot-size-sm",
43
- "label": "Status dot — diameter (sm)",
44
- "group": "Sizing",
45
- "type": "dimension",
46
- "states": ["default"],
47
- "constraint": { "unit": "rem", "min": 0.25, "max": 2 },
48
- "overridable": ["overlay", "subtree", "instance"]
49
- },
50
- {
51
- "token": "--skra-comp-status-dot-size-md",
52
- "label": "Status dot — diameter (md)",
53
- "group": "Sizing",
54
- "type": "dimension",
55
- "states": ["default"],
56
- "constraint": { "unit": "rem", "min": 0.25, "max": 2 },
57
- "overridable": ["overlay", "subtree", "instance"]
58
- },
59
- {
60
- "token": "--skra-comp-status-dot-size-lg",
61
- "label": "Status dot — diameter (lg)",
62
- "group": "Sizing",
63
- "type": "dimension",
64
- "states": ["default"],
65
- "constraint": { "unit": "rem", "min": 0.25, "max": 2 },
66
- "overridable": ["overlay", "subtree", "instance"]
67
- }
68
- ]
69
- }
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "status-dot",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-status-dot-border-color",
8
+ "label": "Status dot — ring/halo colour (the avatar punch-out; surface by default, invisible inline)",
9
+ "group": "Surface",
10
+ "type": "color",
11
+ "states": ["default"],
12
+ "constraint": { "oklch": true },
13
+ "overridable": ["overlay", "subtree", "instance"]
14
+ },
15
+ {
16
+ "token": "--skra-comp-status-dot-border-width",
17
+ "label": "Status dot — ring/halo thickness (0 for no ring)",
18
+ "group": "Surface",
19
+ "type": "dimension",
20
+ "states": ["default"],
21
+ "constraint": { "unit": "rem", "min": 0, "max": 1 },
22
+ "overridable": ["overlay", "subtree"]
23
+ },
24
+ {
25
+ "token": "--skra-comp-status-dot-radius",
26
+ "label": "Status dot — corner radius (circle by default; a skin may ship square)",
27
+ "group": "Surface",
28
+ "type": "dimension",
29
+ "states": ["default"],
30
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
31
+ "overridable": ["overlay", "subtree"]
32
+ },
33
+ {
34
+ "token": "--skra-comp-status-dot-shadow",
35
+ "label": "Status dot — resting shadow",
36
+ "group": "Surface",
37
+ "type": "shadow",
38
+ "states": ["default"],
39
+ "overridable": ["overlay"]
40
+ },
41
+ {
42
+ "token": "--skra-comp-status-dot-size-sm",
43
+ "label": "Status dot — diameter (sm)",
44
+ "group": "Sizing",
45
+ "type": "dimension",
46
+ "states": ["default"],
47
+ "constraint": { "unit": "rem", "min": 0.25, "max": 2 },
48
+ "overridable": ["overlay", "subtree", "instance"]
49
+ },
50
+ {
51
+ "token": "--skra-comp-status-dot-size-md",
52
+ "label": "Status dot — diameter (md)",
53
+ "group": "Sizing",
54
+ "type": "dimension",
55
+ "states": ["default"],
56
+ "constraint": { "unit": "rem", "min": 0.25, "max": 2 },
57
+ "overridable": ["overlay", "subtree", "instance"]
58
+ },
59
+ {
60
+ "token": "--skra-comp-status-dot-size-lg",
61
+ "label": "Status dot — diameter (lg)",
62
+ "group": "Sizing",
63
+ "type": "dimension",
64
+ "states": ["default"],
65
+ "constraint": { "unit": "rem", "min": 0.25, "max": 2 },
66
+ "overridable": ["overlay", "subtree", "instance"]
67
+ }
68
+ ]
69
+ }
package/manifests/tabs.json CHANGED
@@ -1,52 +1,52 @@
1
- {
2
- "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
- "component": "tabs",
4
- "skraVersion": ">=1.0.0",
5
- "axes": [
6
- {
7
- "token": "--skra-comp-tabs-indicator-color",
8
- "label": "Tabs — active-tab selection indicator (underline)",
9
- "group": "State",
10
- "type": "color",
11
- "states": ["selected"],
12
- "constraint": { "oklch": true },
13
- "overridable": ["overlay", "subtree", "instance"]
14
- },
15
- {
16
- "token": "--skra-comp-tabs-foreground-selected",
17
- "label": "Tabs — selected-tab label colour",
18
- "group": "State",
19
- "type": "color",
20
- "states": ["selected"],
21
- "constraint": { "oklch": true },
22
- "overridable": ["overlay", "subtree", "instance"]
23
- },
24
- {
25
- "token": "--skra-comp-tabs-foreground",
26
- "label": "Tabs — resting (unselected) tab label colour",
27
- "group": "Surface",
28
- "type": "color",
29
- "states": ["default"],
30
- "constraint": { "oklch": true },
31
- "overridable": ["overlay", "subtree"]
32
- },
33
- {
34
- "token": "--skra-comp-tabs-background-hover",
35
- "label": "Tabs — tab hover background tint",
36
- "group": "State",
37
- "type": "color",
38
- "states": ["hover"],
39
- "constraint": { "oklch": true },
40
- "overridable": ["overlay", "subtree"]
41
- },
42
- {
43
- "token": "--skra-comp-tabs-tablist-border-color",
44
- "label": "Tabs — tablist rail (bottom border) colour",
45
- "group": "Surface",
46
- "type": "color",
47
- "states": ["default"],
48
- "constraint": { "oklch": true },
49
- "overridable": ["overlay", "subtree"]
50
- }
51
- ]
52
- }
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "tabs",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-tabs-indicator-color",
8
+ "label": "Tabs — active-tab selection indicator (underline)",
9
+ "group": "State",
10
+ "type": "color",
11
+ "states": ["selected"],
12
+ "constraint": { "oklch": true },
13
+ "overridable": ["overlay", "subtree", "instance"]
14
+ },
15
+ {
16
+ "token": "--skra-comp-tabs-foreground-selected",
17
+ "label": "Tabs — selected-tab label colour",
18
+ "group": "State",
19
+ "type": "color",
20
+ "states": ["selected"],
21
+ "constraint": { "oklch": true },
22
+ "overridable": ["overlay", "subtree", "instance"]
23
+ },
24
+ {
25
+ "token": "--skra-comp-tabs-foreground",
26
+ "label": "Tabs — resting (unselected) tab label colour",
27
+ "group": "Surface",
28
+ "type": "color",
29
+ "states": ["default"],
30
+ "constraint": { "oklch": true },
31
+ "overridable": ["overlay", "subtree"]
32
+ },
33
+ {
34
+ "token": "--skra-comp-tabs-background-hover",
35
+ "label": "Tabs — tab hover background tint",
36
+ "group": "State",
37
+ "type": "color",
38
+ "states": ["hover"],
39
+ "constraint": { "oklch": true },
40
+ "overridable": ["overlay", "subtree"]
41
+ },
42
+ {
43
+ "token": "--skra-comp-tabs-tablist-border-color",
44
+ "label": "Tabs — tablist rail (bottom border) colour",
45
+ "group": "Surface",
46
+ "type": "color",
47
+ "states": ["default"],
48
+ "constraint": { "oklch": true },
49
+ "overridable": ["overlay", "subtree"]
50
+ }
51
+ ]
52
+ }