@skra/tokens 0.5.0 → 0.7.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.
- package/README.md +7 -0
- package/brutal/_comp.scss +36 -19
- package/brutal/_density.comfortable.scoped.scss +1 -0
- package/brutal/_density.comfortable.scss +1 -0
- package/brutal/_density.compact.scoped.scss +1 -0
- package/brutal/_density.compact.scss +1 -0
- package/brutal/_theme.dark.scoped.scss +67 -51
- package/brutal/_theme.dark.scss +67 -51
- package/brutal/_theme.scoped.scss +48 -31
- package/brutal/_theme.scss +15 -12
- package/manifests/alert.json +117 -107
- package/manifests/button.json +134 -133
- package/manifests/chip.json +117 -116
- package/manifests/star-rating.json +96 -96
- package/manifests/toast.json +134 -133
- package/package.json +1 -1
- package/skra/_comp.scss +36 -19
- package/skra/_density.comfortable.scss +1 -0
- package/skra/_density.compact.scss +1 -0
- package/skra/_theme.dark.scss +62 -46
- package/skra/_theme.scss +7 -4
package/manifests/toast.json
CHANGED
|
@@ -1,133 +1,134 @@
|
|
|
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
|
-
"
|
|
60
|
-
"
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
"
|
|
65
|
-
"
|
|
66
|
-
"
|
|
67
|
-
"
|
|
68
|
-
"
|
|
69
|
-
"
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
"
|
|
74
|
-
"
|
|
75
|
-
"
|
|
76
|
-
"
|
|
77
|
-
"
|
|
78
|
-
"
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
"
|
|
83
|
-
"
|
|
84
|
-
"
|
|
85
|
-
"
|
|
86
|
-
"
|
|
87
|
-
"
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
"
|
|
92
|
-
"
|
|
93
|
-
"
|
|
94
|
-
"
|
|
95
|
-
"
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
"
|
|
100
|
-
"
|
|
101
|
-
"
|
|
102
|
-
"
|
|
103
|
-
"
|
|
104
|
-
"
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
"
|
|
109
|
-
"
|
|
110
|
-
"
|
|
111
|
-
"
|
|
112
|
-
"
|
|
113
|
-
"
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
"
|
|
118
|
-
"
|
|
119
|
-
"
|
|
120
|
-
"
|
|
121
|
-
"
|
|
122
|
-
"
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
"
|
|
127
|
-
"
|
|
128
|
-
"
|
|
129
|
-
"
|
|
130
|
-
"
|
|
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
|
+
"scopedBy": ["intent", "emphasis"],
|
|
60
|
+
"constraint": { "oklch": true },
|
|
61
|
+
"overridable": ["overlay"]
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"token": "--skra-comp-toast-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-toast-icon-gap",
|
|
74
|
+
"label": "Toast — 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-toast-motion-duration",
|
|
83
|
+
"label": "Toast — enter/transition duration",
|
|
84
|
+
"group": "Motion",
|
|
85
|
+
"type": "duration",
|
|
86
|
+
"states": ["default"],
|
|
87
|
+
"constraint": { "unit": "ms" },
|
|
88
|
+
"overridable": ["overlay"]
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"token": "--skra-comp-toast-motion-easing",
|
|
92
|
+
"label": "Toast — enter/transition easing curve",
|
|
93
|
+
"group": "Motion",
|
|
94
|
+
"type": "cubic-bezier",
|
|
95
|
+
"states": ["default"],
|
|
96
|
+
"overridable": ["overlay"]
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"token": "--skra-comp-toast-region-inset-block",
|
|
100
|
+
"label": "Toast region — distance from the top/bottom viewport edge",
|
|
101
|
+
"group": "Spacing",
|
|
102
|
+
"type": "dimension",
|
|
103
|
+
"states": ["default"],
|
|
104
|
+
"constraint": { "unit": "rem", "min": 0, "max": 8 },
|
|
105
|
+
"overridable": ["overlay", "subtree"]
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"token": "--skra-comp-toast-region-inset-inline",
|
|
109
|
+
"label": "Toast region — distance from the left/right viewport edge",
|
|
110
|
+
"group": "Spacing",
|
|
111
|
+
"type": "dimension",
|
|
112
|
+
"states": ["default"],
|
|
113
|
+
"constraint": { "unit": "rem", "min": 0, "max": 8 },
|
|
114
|
+
"overridable": ["overlay", "subtree"]
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"token": "--skra-comp-toast-region-gap",
|
|
118
|
+
"label": "Toast region — gap between stacked toasts",
|
|
119
|
+
"group": "Spacing",
|
|
120
|
+
"type": "dimension",
|
|
121
|
+
"states": ["default"],
|
|
122
|
+
"constraint": { "unit": "rem", "min": 0, "max": 4 },
|
|
123
|
+
"overridable": ["overlay", "subtree"]
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
"token": "--skra-comp-toast-region-max-inline-size",
|
|
127
|
+
"label": "Toast region — maximum toast/stack width",
|
|
128
|
+
"group": "Spacing",
|
|
129
|
+
"type": "dimension",
|
|
130
|
+
"states": ["default"],
|
|
131
|
+
"overridable": ["overlay", "subtree"]
|
|
132
|
+
}
|
|
133
|
+
]
|
|
134
|
+
}
|
package/package.json
CHANGED
package/skra/_comp.scss
CHANGED
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
--skra-comp-accordion-item-background-expanded: transparent;
|
|
34
34
|
--skra-comp-alert-background-hover: oklch(88.0% 0 0);
|
|
35
35
|
--skra-comp-alert-background-active: oklch(84.5% 0 0);
|
|
36
|
-
--skra-comp-alert-foreground-hover: oklch(
|
|
37
|
-
--skra-comp-alert-foreground-active: oklch(
|
|
36
|
+
--skra-comp-alert-foreground-hover: oklch(32.0% 0 0);
|
|
37
|
+
--skra-comp-alert-foreground-active: oklch(35.5% 0 0);
|
|
38
38
|
--skra-comp-alert-border-color-hover: oklch(47.0% 0 0);
|
|
39
39
|
--skra-comp-alert-border-color-active: oklch(50.5% 0 0);
|
|
40
40
|
--skra-comp-alert-focus-ring-color-hover: oklch(53.0% 0.15 250);
|
|
@@ -67,8 +67,8 @@
|
|
|
67
67
|
--skra-comp-avatar-icon-size: 1em;
|
|
68
68
|
--skra-comp-badge-background-hover: oklch(88.0% 0 0);
|
|
69
69
|
--skra-comp-badge-background-active: oklch(84.5% 0 0);
|
|
70
|
-
--skra-comp-badge-foreground-hover: oklch(
|
|
71
|
-
--skra-comp-badge-foreground-active: oklch(
|
|
70
|
+
--skra-comp-badge-foreground-hover: oklch(32.0% 0 0);
|
|
71
|
+
--skra-comp-badge-foreground-active: oklch(35.5% 0 0);
|
|
72
72
|
--skra-comp-badge-border-color-hover: oklch(47.0% 0 0);
|
|
73
73
|
--skra-comp-badge-border-color-active: oklch(50.5% 0 0);
|
|
74
74
|
--skra-comp-badge-focus-ring-color-hover: oklch(53.0% 0.15 250);
|
|
@@ -79,8 +79,8 @@
|
|
|
79
79
|
--skra-comp-badge-focus-ring-width: 0.125rem;
|
|
80
80
|
--skra-comp-badge-typography-role: label-small;
|
|
81
81
|
--skra-comp-badge-icon-size: 1em;
|
|
82
|
-
--skra-comp-button-background-hover: oklch(
|
|
83
|
-
--skra-comp-button-background-active: oklch(
|
|
82
|
+
--skra-comp-button-background-hover: oklch(43.0% 0 0);
|
|
83
|
+
--skra-comp-button-background-active: oklch(39.5% 0 0);
|
|
84
84
|
--skra-comp-button-foreground-hover: oklch(91.0% 0 0);
|
|
85
85
|
--skra-comp-button-foreground-active: oklch(87.5% 0 0);
|
|
86
86
|
--skra-comp-button-focus-ring-color-hover: oklch(53.0% 0.15 250);
|
|
@@ -99,8 +99,8 @@
|
|
|
99
99
|
--skra-comp-button-icon-size: 1em;
|
|
100
100
|
--skra-comp-chip-background-hover: oklch(88.0% 0 0);
|
|
101
101
|
--skra-comp-chip-background-active: oklch(84.5% 0 0);
|
|
102
|
-
--skra-comp-chip-foreground-hover: oklch(
|
|
103
|
-
--skra-comp-chip-foreground-active: oklch(
|
|
102
|
+
--skra-comp-chip-foreground-hover: oklch(32.0% 0 0);
|
|
103
|
+
--skra-comp-chip-foreground-active: oklch(35.5% 0 0);
|
|
104
104
|
--skra-comp-chip-border-color-hover: oklch(47.0% 0 0);
|
|
105
105
|
--skra-comp-chip-border-color-active: oklch(50.5% 0 0);
|
|
106
106
|
--skra-comp-chip-focus-ring-color-hover: oklch(53.0% 0.15 250);
|
|
@@ -165,7 +165,7 @@
|
|
|
165
165
|
--skra-comp-datepicker-panel-border-color-active: oklch(50.5% 0 0);
|
|
166
166
|
--skra-comp-datepicker-header-foreground-hover: oklch(7.0% 0 0);
|
|
167
167
|
--skra-comp-datepicker-header-foreground-active: oklch(10.5% 0 0);
|
|
168
|
-
--skra-comp-datepicker-nav-color-active: oklch(
|
|
168
|
+
--skra-comp-datepicker-nav-color-active: oklch(24.5% 0 0);
|
|
169
169
|
--skra-comp-datepicker-weekday-foreground-hover: oklch(42.0% 0 0);
|
|
170
170
|
--skra-comp-datepicker-weekday-foreground-active: oklch(45.5% 0 0);
|
|
171
171
|
--skra-comp-datepicker-cell-foreground-hover: oklch(7.0% 0 0);
|
|
@@ -226,6 +226,8 @@
|
|
|
226
226
|
--skra-comp-field-checkbox-checked-background-readonly-active: oklch(60.5% 0 0);
|
|
227
227
|
--skra-comp-field-checkbox-check-color-hover: oklch(93.0% 0 0);
|
|
228
228
|
--skra-comp-field-checkbox-check-color-active: oklch(89.5% 0 0);
|
|
229
|
+
--skra-comp-field-checkbox-check-color-readonly-hover: oklch(91.0% 0 0);
|
|
230
|
+
--skra-comp-field-checkbox-check-color-readonly-active: oklch(87.5% 0 0);
|
|
229
231
|
--skra-comp-field-checkbox-border-width: 0.0625rem;
|
|
230
232
|
--skra-comp-field-radio-border-color-hover: oklch(47.0% 0 0);
|
|
231
233
|
--skra-comp-field-radio-border-color-active: oklch(50.5% 0 0);
|
|
@@ -237,17 +239,25 @@
|
|
|
237
239
|
--skra-comp-field-radio-checked-background-readonly-active: oklch(60.5% 0 0);
|
|
238
240
|
--skra-comp-field-radio-dot-color-hover: oklch(93.0% 0 0);
|
|
239
241
|
--skra-comp-field-radio-dot-color-active: oklch(89.5% 0 0);
|
|
242
|
+
--skra-comp-field-radio-dot-color-readonly-hover: oklch(91.0% 0 0);
|
|
243
|
+
--skra-comp-field-radio-dot-color-readonly-active: oklch(87.5% 0 0);
|
|
240
244
|
--skra-comp-field-radio-border-width: 0.0625rem;
|
|
241
245
|
--skra-comp-field-switch-border-color-hover: oklch(47.0% 0 0);
|
|
242
246
|
--skra-comp-field-switch-border-color-active: oklch(50.5% 0 0);
|
|
243
247
|
--skra-comp-field-switch-background-hover: oklch(47.0% 0 0);
|
|
244
248
|
--skra-comp-field-switch-background-active: oklch(50.5% 0 0);
|
|
249
|
+
--skra-comp-field-switch-background-readonly-hover: oklch(57.0% 0 0);
|
|
250
|
+
--skra-comp-field-switch-background-readonly-active: oklch(60.5% 0 0);
|
|
245
251
|
--skra-comp-field-switch-checked-background-hover: oklch(45.0% 0.15 250);
|
|
246
252
|
--skra-comp-field-switch-checked-background-active: oklch(41.5% 0.15 250);
|
|
247
253
|
--skra-comp-field-switch-checked-background-readonly-hover: oklch(57.0% 0 0);
|
|
248
254
|
--skra-comp-field-switch-checked-background-readonly-active: oklch(60.5% 0 0);
|
|
249
255
|
--skra-comp-field-switch-thumb-color-hover: oklch(93.0% 0 0);
|
|
250
256
|
--skra-comp-field-switch-thumb-color-active: oklch(89.5% 0 0);
|
|
257
|
+
--skra-comp-field-switch-thumb-color-readonly-hover: oklch(91.0% 0 0);
|
|
258
|
+
--skra-comp-field-switch-thumb-color-readonly-active: oklch(87.5% 0 0);
|
|
259
|
+
--skra-comp-field-switch-thumb-color-checked-readonly-hover: oklch(91.0% 0 0);
|
|
260
|
+
--skra-comp-field-switch-thumb-color-checked-readonly-active: oklch(87.5% 0 0);
|
|
251
261
|
--skra-comp-field-switch-track-inline-size: 2.25rem;
|
|
252
262
|
--skra-comp-field-switch-track-block-size: 1.25rem;
|
|
253
263
|
--skra-comp-field-switch-border-width: 0.0625rem;
|
|
@@ -382,8 +392,8 @@
|
|
|
382
392
|
--skra-comp-skeleton-padding-inline: 0rem;
|
|
383
393
|
--skra-comp-skeleton-shadow: none;
|
|
384
394
|
--skra-comp-skeleton-focus-ring-width: 0.125rem;
|
|
385
|
-
--skra-comp-star-rating-star-color-empty-hover: oklch(
|
|
386
|
-
--skra-comp-star-rating-star-color-empty-active: oklch(
|
|
395
|
+
--skra-comp-star-rating-star-color-empty-hover: oklch(47.0% 0 0);
|
|
396
|
+
--skra-comp-star-rating-star-color-empty-active: oklch(50.5% 0 0);
|
|
387
397
|
--skra-comp-star-rating-star-color-filled-hover: oklch(45.0% 0.15 250);
|
|
388
398
|
--skra-comp-star-rating-star-color-filled-active: oklch(41.5% 0.15 250);
|
|
389
399
|
--skra-comp-star-rating-focus-ring-color-hover: oklch(53.0% 0.15 250);
|
|
@@ -438,8 +448,8 @@
|
|
|
438
448
|
--skra-comp-tabs-tablist-border-width: 0.0625rem;
|
|
439
449
|
--skra-comp-toast-background-hover: oklch(88.0% 0 0);
|
|
440
450
|
--skra-comp-toast-background-active: oklch(84.5% 0 0);
|
|
441
|
-
--skra-comp-toast-foreground-hover: oklch(
|
|
442
|
-
--skra-comp-toast-foreground-active: oklch(
|
|
451
|
+
--skra-comp-toast-foreground-hover: oklch(32.0% 0 0);
|
|
452
|
+
--skra-comp-toast-foreground-active: oklch(35.5% 0 0);
|
|
443
453
|
--skra-comp-toast-border-color-hover: oklch(47.0% 0 0);
|
|
444
454
|
--skra-comp-toast-border-color-active: oklch(50.5% 0 0);
|
|
445
455
|
--skra-comp-toast-focus-ring-color-hover: oklch(53.0% 0.15 250);
|
|
@@ -556,7 +566,7 @@
|
|
|
556
566
|
--skra-comp-accordion-panel-padding-block: var(--skra-sys-spacing-3);
|
|
557
567
|
--skra-comp-accordion-panel-padding-inline: var(--skra-sys-spacing-4);
|
|
558
568
|
--skra-comp-alert-background: var(--skra-sys-color-neutral-soft);
|
|
559
|
-
--skra-comp-alert-foreground: var(--skra-sys-color-neutral-
|
|
569
|
+
--skra-comp-alert-foreground: var(--skra-sys-color-neutral-strong);
|
|
560
570
|
--skra-comp-alert-border-color: var(--skra-sys-color-neutral-border);
|
|
561
571
|
--skra-comp-alert-radius: var(--skra-sys-radius-md);
|
|
562
572
|
--skra-comp-alert-padding-block: var(--skra-sys-spacing-3);
|
|
@@ -566,6 +576,7 @@
|
|
|
566
576
|
--skra-comp-alert-focus-ring-color: var(--skra-sys-color-focus-ring);
|
|
567
577
|
--skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
|
|
568
578
|
--skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
|
|
579
|
+
--skra-comp-alert-actions-gap: var(--skra-sys-spacing-2);
|
|
569
580
|
--skra-comp-avatar-background: var(--skra-sys-color-neutral-soft);
|
|
570
581
|
--skra-comp-avatar-foreground: var(--skra-sys-color-neutral-strong);
|
|
571
582
|
--skra-comp-avatar-border-color: var(--skra-sys-color-neutral-border);
|
|
@@ -577,7 +588,7 @@
|
|
|
577
588
|
--skra-comp-avatar-size-md: var(--skra-sys-size-avatar-md);
|
|
578
589
|
--skra-comp-avatar-size-lg: var(--skra-sys-size-avatar-lg);
|
|
579
590
|
--skra-comp-badge-background: var(--skra-sys-color-neutral-soft);
|
|
580
|
-
--skra-comp-badge-foreground: var(--skra-sys-color-neutral-
|
|
591
|
+
--skra-comp-badge-foreground: var(--skra-sys-color-neutral-strong);
|
|
581
592
|
--skra-comp-badge-border-color: var(--skra-sys-color-neutral-border);
|
|
582
593
|
--skra-comp-badge-radius: var(--skra-sys-radius-full);
|
|
583
594
|
--skra-comp-badge-padding-block: var(--skra-sys-spacing-1);
|
|
@@ -605,7 +616,7 @@
|
|
|
605
616
|
--skra-comp-button-icon-gap: var(--skra-sys-spacing-2);
|
|
606
617
|
--skra-comp-button-loading-indicator-color: var(--skra-sys-color-on-surface);
|
|
607
618
|
--skra-comp-chip-background: var(--skra-sys-color-neutral-soft);
|
|
608
|
-
--skra-comp-chip-foreground: var(--skra-sys-color-neutral-
|
|
619
|
+
--skra-comp-chip-foreground: var(--skra-sys-color-neutral-strong);
|
|
609
620
|
--skra-comp-chip-border-color: var(--skra-sys-color-neutral-border);
|
|
610
621
|
--skra-comp-chip-radius: var(--skra-sys-radius-full);
|
|
611
622
|
--skra-comp-chip-padding-block: var(--skra-sys-spacing-1);
|
|
@@ -695,6 +706,7 @@
|
|
|
695
706
|
--skra-comp-field-checkbox-checked-background: var(--skra-sys-color-primary-base);
|
|
696
707
|
--skra-comp-field-checkbox-checked-background-readonly: var(--skra-sys-color-neutral-base);
|
|
697
708
|
--skra-comp-field-checkbox-check-color: var(--skra-sys-color-primary-contrast);
|
|
709
|
+
--skra-comp-field-checkbox-check-color-readonly: var(--skra-sys-color-neutral-contrast);
|
|
698
710
|
--skra-comp-field-checkbox-gap: var(--skra-sys-spacing-2);
|
|
699
711
|
--skra-comp-field-checkbox-touch-target: var(--skra-sys-spacing-6);
|
|
700
712
|
--skra-comp-field-radio-size: var(--skra-sys-spacing-4);
|
|
@@ -703,16 +715,20 @@
|
|
|
703
715
|
--skra-comp-field-radio-checked-background: var(--skra-sys-color-primary-base);
|
|
704
716
|
--skra-comp-field-radio-checked-background-readonly: var(--skra-sys-color-neutral-base);
|
|
705
717
|
--skra-comp-field-radio-dot-color: var(--skra-sys-color-primary-contrast);
|
|
718
|
+
--skra-comp-field-radio-dot-color-readonly: var(--skra-sys-color-neutral-contrast);
|
|
706
719
|
--skra-comp-field-radio-dot-size: var(--skra-sys-spacing-2);
|
|
707
720
|
--skra-comp-field-radio-gap: var(--skra-sys-spacing-2);
|
|
708
721
|
--skra-comp-field-radio-touch-target: var(--skra-sys-spacing-6);
|
|
709
722
|
--skra-comp-field-switch-border-color: var(--skra-sys-color-border-subtle);
|
|
710
723
|
--skra-comp-field-switch-track-radius: var(--skra-sys-radius-full);
|
|
711
724
|
--skra-comp-field-switch-background: var(--skra-sys-color-border-subtle);
|
|
725
|
+
--skra-comp-field-switch-background-readonly: var(--skra-sys-color-neutral-base);
|
|
712
726
|
--skra-comp-field-switch-checked-background: var(--skra-sys-color-primary-base);
|
|
713
727
|
--skra-comp-field-switch-checked-background-readonly: var(--skra-sys-color-neutral-base);
|
|
714
728
|
--skra-comp-field-switch-thumb-color: var(--skra-sys-color-surface);
|
|
729
|
+
--skra-comp-field-switch-thumb-color-readonly: var(--skra-sys-color-neutral-contrast);
|
|
715
730
|
--skra-comp-field-switch-thumb-color-checked: var(--skra-sys-color-primary-contrast);
|
|
731
|
+
--skra-comp-field-switch-thumb-color-checked-readonly: var(--skra-sys-color-neutral-contrast);
|
|
716
732
|
--skra-comp-field-switch-gap: var(--skra-sys-spacing-2);
|
|
717
733
|
--skra-comp-field-switch-touch-target: var(--skra-sys-spacing-6);
|
|
718
734
|
--skra-comp-field-group-gap: var(--skra-sys-spacing-3);
|
|
@@ -841,8 +857,8 @@
|
|
|
841
857
|
--skra-comp-skeleton-motion-duration: var(--skra-sys-motion-duration-fast);
|
|
842
858
|
--skra-comp-skeleton-motion-easing: var(--skra-sys-motion-easing-standard);
|
|
843
859
|
--skra-comp-skeleton-focus-ring-color: var(--skra-sys-color-focus-ring);
|
|
844
|
-
--skra-comp-star-rating-star-color-empty: var(--skra-sys-color-border);
|
|
845
|
-
--skra-comp-star-rating-star-color-filled: var(--skra-sys-color-primary-
|
|
860
|
+
--skra-comp-star-rating-star-color-empty: var(--skra-sys-color-border-subtle);
|
|
861
|
+
--skra-comp-star-rating-star-color-filled: var(--skra-sys-color-primary-ink);
|
|
846
862
|
--skra-comp-star-rating-focus-ring-color: var(--skra-sys-color-focus-ring);
|
|
847
863
|
--skra-comp-star-rating-motion-duration: var(--skra-sys-motion-duration-fast);
|
|
848
864
|
--skra-comp-star-rating-motion-easing: var(--skra-sys-motion-easing-standard);
|
|
@@ -887,7 +903,7 @@
|
|
|
887
903
|
--skra-comp-tabs-panel-padding-block: var(--skra-sys-spacing-4);
|
|
888
904
|
--skra-comp-tabs-panel-padding-inline: var(--skra-sys-spacing-1);
|
|
889
905
|
--skra-comp-toast-background: var(--skra-sys-color-neutral-soft);
|
|
890
|
-
--skra-comp-toast-foreground: var(--skra-sys-color-neutral-
|
|
906
|
+
--skra-comp-toast-foreground: var(--skra-sys-color-neutral-strong);
|
|
891
907
|
--skra-comp-toast-border-color: var(--skra-sys-color-neutral-border);
|
|
892
908
|
--skra-comp-toast-radius: var(--skra-sys-radius-md);
|
|
893
909
|
--skra-comp-toast-padding-block: var(--skra-sys-spacing-3);
|
|
@@ -1012,6 +1028,7 @@
|
|
|
1012
1028
|
/* O-24 — build-baked form-control glyphs (token-resolved colour per scheme) — form-glyph-synth.mjs */
|
|
1013
1029
|
:where(:root, :host) {
|
|
1014
1030
|
--skra-comp-field-checkbox-check-glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='oklch%28100%25%200%200%29' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 19 7'/%3E%3C/svg%3E");
|
|
1031
|
+
--skra-comp-field-checkbox-check-glyph-readonly: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='oklch%2898%25%200%200%29' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 19 7'/%3E%3C/svg%3E");
|
|
1015
1032
|
--skra-comp-field-select-chevron-glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='oklch%280%25%200%200%29' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
|
1016
1033
|
--skra-comp-field-calendar-indicator-glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='oklch%280%25%200%200%29' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3C/svg%3E");
|
|
1017
1034
|
--skra-comp-field-clock-indicator-glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='oklch%280%25%200%200%29' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 16 14'/%3E%3C/svg%3E");
|
|
@@ -34,6 +34,7 @@
|
|
|
34
34
|
--skra-comp-alert-padding-inline: var(--skra-sys-spacing-4);
|
|
35
35
|
--skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
|
|
36
36
|
--skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
|
|
37
|
+
--skra-comp-alert-actions-gap: var(--skra-sys-spacing-2);
|
|
37
38
|
--skra-comp-alert-dismiss-size: var(--skra-sys-size-interactive-sm);
|
|
38
39
|
--skra-comp-avatar-size-sm: var(--skra-sys-size-avatar-sm);
|
|
39
40
|
--skra-comp-avatar-size-md: var(--skra-sys-size-avatar-md);
|
|
@@ -34,6 +34,7 @@
|
|
|
34
34
|
--skra-comp-alert-padding-inline: var(--skra-sys-spacing-4);
|
|
35
35
|
--skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
|
|
36
36
|
--skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
|
|
37
|
+
--skra-comp-alert-actions-gap: var(--skra-sys-spacing-2);
|
|
37
38
|
--skra-comp-alert-dismiss-size: var(--skra-sys-size-interactive-sm);
|
|
38
39
|
--skra-comp-avatar-size-sm: var(--skra-sys-size-avatar-sm);
|
|
39
40
|
--skra-comp-avatar-size-md: var(--skra-sys-size-avatar-md);
|