@skra/tokens 0.2.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 (55) hide show
  1. package/LICENSE +201 -0
  2. package/NOTICE +7 -0
  3. package/README.md +64 -0
  4. package/brutal/_baseline.scss +22 -0
  5. package/brutal/_comp.scss +985 -0
  6. package/brutal/_density.comfortable.scoped.scss +166 -0
  7. package/brutal/_density.comfortable.scss +166 -0
  8. package/brutal/_density.compact.scoped.scss +166 -0
  9. package/brutal/_density.compact.scss +166 -0
  10. package/brutal/_theme.dark.scoped.scss +707 -0
  11. package/brutal/_theme.dark.scss +708 -0
  12. package/brutal/_theme.scoped.scss +1289 -0
  13. package/brutal/_theme.scss +451 -0
  14. package/brutal/skin.config.json +40 -0
  15. package/manifests/accordion.json +52 -0
  16. package/manifests/alert.json +107 -0
  17. package/manifests/avatar.json +78 -0
  18. package/manifests/badge.json +63 -0
  19. package/manifests/box.json +34 -0
  20. package/manifests/button.json +133 -0
  21. package/manifests/chip.json +116 -0
  22. package/manifests/combobox.json +141 -0
  23. package/manifests/datepicker.json +159 -0
  24. package/manifests/dialog.json +104 -0
  25. package/manifests/field.json +267 -0
  26. package/manifests/grid.json +61 -0
  27. package/manifests/icon.json +43 -0
  28. package/manifests/kbd.json +68 -0
  29. package/manifests/link.json +107 -0
  30. package/manifests/menu.json +122 -0
  31. package/manifests/popover.json +104 -0
  32. package/manifests/progress.json +69 -0
  33. package/manifests/select.json +177 -0
  34. package/manifests/skeleton.json +43 -0
  35. package/manifests/stack.json +34 -0
  36. package/manifests/star-rating.json +96 -0
  37. package/manifests/status-dot.json +69 -0
  38. package/manifests/tabs.json +52 -0
  39. package/manifests/toast.json +133 -0
  40. package/manifests/tooltip.json +113 -0
  41. package/manifests/typography.json +169 -0
  42. package/overlays/brand-jade.scss +9 -0
  43. package/overlays/round-corners.scss +8 -0
  44. package/overlays/square-corners.scss +8 -0
  45. package/package.json +19 -0
  46. package/skra/_baseline.scss +22 -0
  47. package/skra/_comp.scss +981 -0
  48. package/skra/_density.comfortable.scss +166 -0
  49. package/skra/_density.compact.scss +166 -0
  50. package/skra/_form-controls.scss +74 -0
  51. package/skra/_overlay.scss +42 -0
  52. package/skra/_theme.dark.scss +698 -0
  53. package/skra/_theme.scss +448 -0
  54. package/skra/skin.config.json +37 -0
  55. package/skra/utilities.scss +38 -0
@@ -0,0 +1,78 @@
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "avatar",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-avatar-background",
8
+ "label": "Avatar — placeholder background (behind initials / before the image paints)",
9
+ "group": "Surface",
10
+ "type": "color",
11
+ "states": ["default"],
12
+ "constraint": { "oklch": true },
13
+ "overridable": ["overlay", "subtree", "instance"]
14
+ },
15
+ {
16
+ "token": "--skra-comp-avatar-foreground",
17
+ "label": "Avatar — initials 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-avatar-border-color",
26
+ "label": "Avatar — ring/border colour (border-width 0 by default)",
27
+ "group": "Surface",
28
+ "type": "color",
29
+ "states": ["default"],
30
+ "constraint": { "oklch": true },
31
+ "overridable": ["overlay", "subtree"]
32
+ },
33
+ {
34
+ "token": "--skra-comp-avatar-radius",
35
+ "label": "Avatar — corner radius (circle by default; a skin may ship square)",
36
+ "group": "Surface",
37
+ "type": "dimension",
38
+ "states": ["default"],
39
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
40
+ "overridable": ["overlay", "subtree"]
41
+ },
42
+ {
43
+ "token": "--skra-comp-avatar-shadow",
44
+ "label": "Avatar — resting shadow",
45
+ "group": "Surface",
46
+ "type": "shadow",
47
+ "states": ["default"],
48
+ "overridable": ["overlay"]
49
+ },
50
+ {
51
+ "token": "--skra-comp-avatar-size-sm",
52
+ "label": "Avatar — box size (sm)",
53
+ "group": "Sizing",
54
+ "type": "dimension",
55
+ "states": ["default"],
56
+ "constraint": { "unit": "rem", "min": 1, "max": 8 },
57
+ "overridable": ["overlay", "subtree"]
58
+ },
59
+ {
60
+ "token": "--skra-comp-avatar-size-md",
61
+ "label": "Avatar — box size (md)",
62
+ "group": "Sizing",
63
+ "type": "dimension",
64
+ "states": ["default"],
65
+ "constraint": { "unit": "rem", "min": 1, "max": 8 },
66
+ "overridable": ["overlay", "subtree"]
67
+ },
68
+ {
69
+ "token": "--skra-comp-avatar-size-lg",
70
+ "label": "Avatar — box size (lg)",
71
+ "group": "Sizing",
72
+ "type": "dimension",
73
+ "states": ["default"],
74
+ "constraint": { "unit": "rem", "min": 1, "max": 8 },
75
+ "overridable": ["overlay", "subtree"]
76
+ }
77
+ ]
78
+ }
@@ -0,0 +1,63 @@
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "badge",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-badge-background",
8
+ "label": "Badge — 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-badge-foreground",
18
+ "label": "Badge — 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-badge-border-color",
28
+ "label": "Badge — 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-badge-radius",
38
+ "label": "Badge — 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-badge-shadow",
47
+ "label": "Badge — resting shadow",
48
+ "group": "Surface",
49
+ "type": "shadow",
50
+ "states": ["default"],
51
+ "overridable": ["overlay"]
52
+ },
53
+ {
54
+ "token": "--skra-comp-badge-icon-gap",
55
+ "label": "Badge — gap between the leading icon and the label",
56
+ "group": "Spacing",
57
+ "type": "dimension",
58
+ "states": ["default"],
59
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
60
+ "overridable": ["overlay", "subtree"]
61
+ }
62
+ ]
63
+ }
@@ -0,0 +1,34 @@
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "box",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-box-padding-sm",
8
+ "label": "Box — small padding preset",
9
+ "group": "Spacing",
10
+ "type": "dimension",
11
+ "states": ["default"],
12
+ "constraint": { "unit": "rem", "min": 0, "max": 4 },
13
+ "overridable": ["overlay", "subtree", "instance"]
14
+ },
15
+ {
16
+ "token": "--skra-comp-box-padding-md",
17
+ "label": "Box — medium padding preset",
18
+ "group": "Spacing",
19
+ "type": "dimension",
20
+ "states": ["default"],
21
+ "constraint": { "unit": "rem", "min": 0, "max": 4 },
22
+ "overridable": ["overlay", "subtree", "instance"]
23
+ },
24
+ {
25
+ "token": "--skra-comp-box-padding-lg",
26
+ "label": "Box — large padding preset",
27
+ "group": "Spacing",
28
+ "type": "dimension",
29
+ "states": ["default"],
30
+ "constraint": { "unit": "rem", "min": 0, "max": 4 },
31
+ "overridable": ["overlay", "subtree", "instance"]
32
+ }
33
+ ]
34
+ }
@@ -0,0 +1,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"]
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
+ }
@@ -0,0 +1,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
+ "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
+ }
@@ -0,0 +1,141 @@
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "combobox",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-combobox-background",
8
+ "label": "Combobox — input background",
9
+ "group": "Surface",
10
+ "type": "color",
11
+ "states": ["default"],
12
+ "constraint": { "oklch": true },
13
+ "overridable": ["overlay", "subtree", "instance"]
14
+ },
15
+ {
16
+ "token": "--skra-comp-combobox-foreground",
17
+ "label": "Combobox — input 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-combobox-border-color",
26
+ "label": "Combobox — input border colour",
27
+ "group": "Surface",
28
+ "type": "color",
29
+ "states": ["default"],
30
+ "constraint": { "oklch": true },
31
+ "overridable": ["overlay", "subtree"]
32
+ },
33
+ {
34
+ "token": "--skra-comp-combobox-radius",
35
+ "label": "Combobox — input corner radius",
36
+ "group": "Surface",
37
+ "type": "dimension",
38
+ "states": ["default"],
39
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
40
+ "overridable": ["overlay", "subtree"]
41
+ },
42
+ {
43
+ "token": "--skra-comp-combobox-focus-ring-color",
44
+ "label": "Combobox — input focus ring colour on :focus-visible",
45
+ "group": "State",
46
+ "type": "color",
47
+ "states": ["focus-visible"],
48
+ "constraint": { "oklch": true },
49
+ "overridable": ["overlay"]
50
+ },
51
+ {
52
+ "token": "--skra-comp-combobox-focus-ring-width",
53
+ "label": "Combobox — input focus ring thickness on :focus-visible",
54
+ "group": "State",
55
+ "type": "dimension",
56
+ "states": ["focus-visible"],
57
+ "constraint": { "unit": "rem", "min": 0.0625, "max": 0.25 },
58
+ "overridable": ["overlay"]
59
+ },
60
+ {
61
+ "token": "--skra-comp-combobox-arrow-color",
62
+ "label": "Combobox — chevron colour (independent of input text)",
63
+ "group": "Surface",
64
+ "type": "color",
65
+ "states": ["default"],
66
+ "constraint": { "oklch": true },
67
+ "overridable": ["overlay", "subtree", "instance"]
68
+ },
69
+ {
70
+ "token": "--skra-comp-combobox-border-color-validation-invalid",
71
+ "label": "Combobox — input border colour when invalid",
72
+ "group": "State",
73
+ "type": "color",
74
+ "states": ["invalid"],
75
+ "constraint": { "oklch": true },
76
+ "overridable": ["overlay"]
77
+ },
78
+ {
79
+ "token": "--skra-comp-combobox-panel-background",
80
+ "label": "Combobox — listbox panel background",
81
+ "group": "Surface",
82
+ "type": "color",
83
+ "states": ["default"],
84
+ "constraint": { "oklch": true },
85
+ "overridable": ["overlay", "subtree", "instance"]
86
+ },
87
+ {
88
+ "token": "--skra-comp-combobox-panel-foreground",
89
+ "label": "Combobox — listbox panel default text colour",
90
+ "group": "Surface",
91
+ "type": "color",
92
+ "states": ["default"],
93
+ "constraint": { "oklch": true },
94
+ "overridable": ["overlay", "subtree", "instance"]
95
+ },
96
+ {
97
+ "token": "--skra-comp-combobox-panel-border-color",
98
+ "label": "Combobox — listbox panel hairline border colour",
99
+ "group": "Surface",
100
+ "type": "color",
101
+ "states": ["default"],
102
+ "constraint": { "oklch": true },
103
+ "overridable": ["overlay", "subtree"]
104
+ },
105
+ {
106
+ "token": "--skra-comp-combobox-panel-radius",
107
+ "label": "Combobox — listbox panel corner radius",
108
+ "group": "Surface",
109
+ "type": "dimension",
110
+ "states": ["default"],
111
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
112
+ "overridable": ["overlay", "subtree"]
113
+ },
114
+ {
115
+ "token": "--skra-comp-combobox-panel-shadow",
116
+ "label": "Combobox — listbox panel elevation shadow",
117
+ "group": "Surface",
118
+ "type": "shadow",
119
+ "states": ["default"],
120
+ "overridable": ["overlay"]
121
+ },
122
+ {
123
+ "token": "--skra-comp-combobox-loading-indicator-color",
124
+ "label": "Combobox — async loading indicator colour",
125
+ "group": "State",
126
+ "type": "color",
127
+ "states": ["loading"],
128
+ "constraint": { "oklch": true },
129
+ "overridable": ["overlay", "subtree"]
130
+ },
131
+ {
132
+ "token": "--skra-comp-combobox-empty-foreground",
133
+ "label": "Combobox — no-results message text colour",
134
+ "group": "State",
135
+ "type": "color",
136
+ "states": ["default"],
137
+ "constraint": { "oklch": true },
138
+ "overridable": ["overlay", "subtree"]
139
+ }
140
+ ]
141
+ }