@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/datepicker.json CHANGED
@@ -1,159 +1,159 @@
1
- {
2
- "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
- "component": "datepicker",
4
- "skraVersion": ">=1.0.0",
5
- "axes": [
6
- {
7
- "token": "--skra-comp-datepicker-background",
8
- "label": "DatePicker — trigger 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-datepicker-foreground",
17
- "label": "DatePicker — trigger 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-datepicker-border-color",
26
- "label": "DatePicker — trigger 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-datepicker-radius",
35
- "label": "DatePicker — trigger 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-datepicker-icon-color",
44
- "label": "DatePicker — calendar glyph colour",
45
- "group": "Surface",
46
- "type": "color",
47
- "states": ["default"],
48
- "constraint": { "oklch": true },
49
- "overridable": ["overlay", "subtree", "instance"]
50
- },
51
- {
52
- "token": "--skra-comp-datepicker-focus-ring-color",
53
- "label": "DatePicker — trigger focus ring colour on :focus-visible",
54
- "group": "State",
55
- "type": "color",
56
- "states": ["focus-visible"],
57
- "constraint": { "oklch": true },
58
- "overridable": ["overlay"]
59
- },
60
- {
61
- "token": "--skra-comp-datepicker-focus-ring-width",
62
- "label": "DatePicker — trigger focus ring thickness on :focus-visible",
63
- "group": "State",
64
- "type": "dimension",
65
- "states": ["focus-visible"],
66
- "constraint": { "unit": "rem", "min": 0.0625, "max": 0.25 },
67
- "overridable": ["overlay"]
68
- },
69
- {
70
- "token": "--skra-comp-datepicker-border-color-validation-invalid",
71
- "label": "DatePicker — trigger 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-datepicker-panel-background",
80
- "label": "DatePicker — calendar 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-datepicker-panel-border-color",
89
- "label": "DatePicker — calendar panel hairline border colour",
90
- "group": "Surface",
91
- "type": "color",
92
- "states": ["default"],
93
- "constraint": { "oklch": true },
94
- "overridable": ["overlay", "subtree"]
95
- },
96
- {
97
- "token": "--skra-comp-datepicker-panel-radius",
98
- "label": "DatePicker — calendar panel corner radius",
99
- "group": "Surface",
100
- "type": "dimension",
101
- "states": ["default"],
102
- "constraint": { "unit": "rem", "min": 0, "max": 2 },
103
- "overridable": ["overlay", "subtree"]
104
- },
105
- {
106
- "token": "--skra-comp-datepicker-panel-shadow",
107
- "label": "DatePicker — calendar panel elevation shadow",
108
- "group": "Surface",
109
- "type": "shadow",
110
- "states": ["default"],
111
- "overridable": ["overlay"]
112
- },
113
- {
114
- "token": "--skra-comp-datepicker-day-foreground",
115
- "label": "DatePicker day — text colour",
116
- "group": "Surface",
117
- "type": "color",
118
- "states": ["default"],
119
- "constraint": { "oklch": true },
120
- "overridable": ["overlay", "subtree", "instance"]
121
- },
122
- {
123
- "token": "--skra-comp-datepicker-day-background-hover",
124
- "label": "DatePicker day — highlight background on :hover / focus",
125
- "group": "State",
126
- "type": "color",
127
- "states": ["hover"],
128
- "constraint": { "oklch": true },
129
- "overridable": ["overlay", "subtree"]
130
- },
131
- {
132
- "token": "--skra-comp-datepicker-day-background-selected",
133
- "label": "DatePicker day — background of the selected date",
134
- "group": "State",
135
- "type": "color",
136
- "states": ["selected"],
137
- "constraint": { "oklch": true },
138
- "overridable": ["overlay", "subtree"]
139
- },
140
- {
141
- "token": "--skra-comp-datepicker-day-foreground-selected",
142
- "label": "DatePicker day — text colour of the selected date",
143
- "group": "State",
144
- "type": "color",
145
- "states": ["selected"],
146
- "constraint": { "oklch": true },
147
- "overridable": ["overlay", "subtree"]
148
- },
149
- {
150
- "token": "--skra-comp-datepicker-day-today-indicator-color",
151
- "label": "DatePicker day — today marker colour (aria-current)",
152
- "group": "State",
153
- "type": "color",
154
- "states": ["default"],
155
- "constraint": { "oklch": true },
156
- "overridable": ["overlay", "subtree"]
157
- }
158
- ]
159
- }
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "datepicker",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-datepicker-background",
8
+ "label": "DatePicker — trigger 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-datepicker-foreground",
17
+ "label": "DatePicker — trigger 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-datepicker-border-color",
26
+ "label": "DatePicker — trigger 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-datepicker-radius",
35
+ "label": "DatePicker — trigger 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-datepicker-icon-color",
44
+ "label": "DatePicker — calendar glyph colour",
45
+ "group": "Surface",
46
+ "type": "color",
47
+ "states": ["default"],
48
+ "constraint": { "oklch": true },
49
+ "overridable": ["overlay", "subtree", "instance"]
50
+ },
51
+ {
52
+ "token": "--skra-comp-datepicker-focus-ring-color",
53
+ "label": "DatePicker — trigger focus ring colour on :focus-visible",
54
+ "group": "State",
55
+ "type": "color",
56
+ "states": ["focus-visible"],
57
+ "constraint": { "oklch": true },
58
+ "overridable": ["overlay"]
59
+ },
60
+ {
61
+ "token": "--skra-comp-datepicker-focus-ring-width",
62
+ "label": "DatePicker — trigger focus ring thickness on :focus-visible",
63
+ "group": "State",
64
+ "type": "dimension",
65
+ "states": ["focus-visible"],
66
+ "constraint": { "unit": "rem", "min": 0.0625, "max": 0.25 },
67
+ "overridable": ["overlay"]
68
+ },
69
+ {
70
+ "token": "--skra-comp-datepicker-border-color-validation-invalid",
71
+ "label": "DatePicker — trigger 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-datepicker-panel-background",
80
+ "label": "DatePicker — calendar 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-datepicker-panel-border-color",
89
+ "label": "DatePicker — calendar panel hairline border colour",
90
+ "group": "Surface",
91
+ "type": "color",
92
+ "states": ["default"],
93
+ "constraint": { "oklch": true },
94
+ "overridable": ["overlay", "subtree"]
95
+ },
96
+ {
97
+ "token": "--skra-comp-datepicker-panel-radius",
98
+ "label": "DatePicker — calendar panel corner radius",
99
+ "group": "Surface",
100
+ "type": "dimension",
101
+ "states": ["default"],
102
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
103
+ "overridable": ["overlay", "subtree"]
104
+ },
105
+ {
106
+ "token": "--skra-comp-datepicker-panel-shadow",
107
+ "label": "DatePicker — calendar panel elevation shadow",
108
+ "group": "Surface",
109
+ "type": "shadow",
110
+ "states": ["default"],
111
+ "overridable": ["overlay"]
112
+ },
113
+ {
114
+ "token": "--skra-comp-datepicker-day-foreground",
115
+ "label": "DatePicker day — text colour",
116
+ "group": "Surface",
117
+ "type": "color",
118
+ "states": ["default"],
119
+ "constraint": { "oklch": true },
120
+ "overridable": ["overlay", "subtree", "instance"]
121
+ },
122
+ {
123
+ "token": "--skra-comp-datepicker-day-background-hover",
124
+ "label": "DatePicker day — highlight background on :hover / focus",
125
+ "group": "State",
126
+ "type": "color",
127
+ "states": ["hover"],
128
+ "constraint": { "oklch": true },
129
+ "overridable": ["overlay", "subtree"]
130
+ },
131
+ {
132
+ "token": "--skra-comp-datepicker-day-background-selected",
133
+ "label": "DatePicker day — background of the selected date",
134
+ "group": "State",
135
+ "type": "color",
136
+ "states": ["selected"],
137
+ "constraint": { "oklch": true },
138
+ "overridable": ["overlay", "subtree"]
139
+ },
140
+ {
141
+ "token": "--skra-comp-datepicker-day-foreground-selected",
142
+ "label": "DatePicker day — text colour of the selected date",
143
+ "group": "State",
144
+ "type": "color",
145
+ "states": ["selected"],
146
+ "constraint": { "oklch": true },
147
+ "overridable": ["overlay", "subtree"]
148
+ },
149
+ {
150
+ "token": "--skra-comp-datepicker-day-today-indicator-color",
151
+ "label": "DatePicker day — today marker colour (aria-current)",
152
+ "group": "State",
153
+ "type": "color",
154
+ "states": ["default"],
155
+ "constraint": { "oklch": true },
156
+ "overridable": ["overlay", "subtree"]
157
+ }
158
+ ]
159
+ }
package/manifests/dialog.json CHANGED
@@ -1,104 +1,104 @@
1
- {
2
- "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
- "component": "dialog",
4
- "skraVersion": ">=1.0.0",
5
- "axes": [
6
- {
7
- "token": "--skra-comp-dialog-background",
8
- "label": "Dialog — surface 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-dialog-foreground",
17
- "label": "Dialog — default 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-dialog-radius",
26
- "label": "Dialog — corner radius",
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-dialog-shadow",
35
- "label": "Dialog — elevation shadow",
36
- "group": "Surface",
37
- "type": "shadow",
38
- "states": ["default"],
39
- "overridable": ["overlay"]
40
- },
41
- {
42
- "token": "--skra-comp-dialog-backdrop",
43
- "label": "Dialog — backdrop scrim colour (::backdrop)",
44
- "group": "Surface",
45
- "type": "color",
46
- "states": ["default"],
47
- "constraint": { "oklch": true },
48
- "overridable": ["overlay"]
49
- },
50
- {
51
- "token": "--skra-comp-dialog-focus-ring-color",
52
- "label": "Focus ring — outline colour on :focus-visible",
53
- "group": "State",
54
- "type": "color",
55
- "states": ["focus-visible"],
56
- "constraint": { "oklch": true },
57
- "overridable": ["overlay"]
58
- },
59
- {
60
- "token": "--skra-comp-dialog-focus-ring-width",
61
- "label": "Focus ring — outline thickness on :focus-visible",
62
- "group": "State",
63
- "type": "dimension",
64
- "states": ["focus-visible"],
65
- "constraint": { "unit": "rem", "min": 0.0625, "max": 0.25 },
66
- "overridable": ["overlay"]
67
- },
68
- {
69
- "token": "--skra-comp-dialog-padding-block",
70
- "label": "Dialog — inner block padding",
71
- "group": "Spacing",
72
- "type": "dimension",
73
- "states": ["default"],
74
- "constraint": { "unit": "rem", "min": 0, "max": 4 },
75
- "overridable": ["overlay", "subtree"]
76
- },
77
- {
78
- "token": "--skra-comp-dialog-padding-inline",
79
- "label": "Dialog — inner inline padding",
80
- "group": "Spacing",
81
- "type": "dimension",
82
- "states": ["default"],
83
- "constraint": { "unit": "rem", "min": 0, "max": 4 },
84
- "overridable": ["overlay", "subtree"]
85
- },
86
- {
87
- "token": "--skra-comp-dialog-motion-duration",
88
- "label": "Dialog — enter/leave + backdrop transition duration",
89
- "group": "Motion",
90
- "type": "duration",
91
- "states": ["default"],
92
- "constraint": { "unit": "ms" },
93
- "overridable": ["overlay"]
94
- },
95
- {
96
- "token": "--skra-comp-dialog-motion-easing",
97
- "label": "Dialog — enter/leave transition easing curve",
98
- "group": "Motion",
99
- "type": "cubic-bezier",
100
- "states": ["default"],
101
- "overridable": ["overlay"]
102
- }
103
- ]
104
- }
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "dialog",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-dialog-background",
8
+ "label": "Dialog — surface 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-dialog-foreground",
17
+ "label": "Dialog — default 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-dialog-radius",
26
+ "label": "Dialog — corner radius",
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-dialog-shadow",
35
+ "label": "Dialog — elevation shadow",
36
+ "group": "Surface",
37
+ "type": "shadow",
38
+ "states": ["default"],
39
+ "overridable": ["overlay"]
40
+ },
41
+ {
42
+ "token": "--skra-comp-dialog-backdrop",
43
+ "label": "Dialog — backdrop scrim colour (::backdrop)",
44
+ "group": "Surface",
45
+ "type": "color",
46
+ "states": ["default"],
47
+ "constraint": { "oklch": true },
48
+ "overridable": ["overlay"]
49
+ },
50
+ {
51
+ "token": "--skra-comp-dialog-focus-ring-color",
52
+ "label": "Focus ring — outline colour on :focus-visible",
53
+ "group": "State",
54
+ "type": "color",
55
+ "states": ["focus-visible"],
56
+ "constraint": { "oklch": true },
57
+ "overridable": ["overlay"]
58
+ },
59
+ {
60
+ "token": "--skra-comp-dialog-focus-ring-width",
61
+ "label": "Focus ring — outline thickness on :focus-visible",
62
+ "group": "State",
63
+ "type": "dimension",
64
+ "states": ["focus-visible"],
65
+ "constraint": { "unit": "rem", "min": 0.0625, "max": 0.25 },
66
+ "overridable": ["overlay"]
67
+ },
68
+ {
69
+ "token": "--skra-comp-dialog-padding-block",
70
+ "label": "Dialog — inner block padding",
71
+ "group": "Spacing",
72
+ "type": "dimension",
73
+ "states": ["default"],
74
+ "constraint": { "unit": "rem", "min": 0, "max": 4 },
75
+ "overridable": ["overlay", "subtree"]
76
+ },
77
+ {
78
+ "token": "--skra-comp-dialog-padding-inline",
79
+ "label": "Dialog — inner inline padding",
80
+ "group": "Spacing",
81
+ "type": "dimension",
82
+ "states": ["default"],
83
+ "constraint": { "unit": "rem", "min": 0, "max": 4 },
84
+ "overridable": ["overlay", "subtree"]
85
+ },
86
+ {
87
+ "token": "--skra-comp-dialog-motion-duration",
88
+ "label": "Dialog — enter/leave + backdrop transition duration",
89
+ "group": "Motion",
90
+ "type": "duration",
91
+ "states": ["default"],
92
+ "constraint": { "unit": "ms" },
93
+ "overridable": ["overlay"]
94
+ },
95
+ {
96
+ "token": "--skra-comp-dialog-motion-easing",
97
+ "label": "Dialog — enter/leave transition easing curve",
98
+ "group": "Motion",
99
+ "type": "cubic-bezier",
100
+ "states": ["default"],
101
+ "overridable": ["overlay"]
102
+ }
103
+ ]
104
+ }