@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
package/brutal/_comp.scss ADDED
@@ -0,0 +1,985 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :where(:root, :host) {
6
+ --skra-comp-accordion-foreground-hover: oklch(12.0% 0 0);
7
+ --skra-comp-accordion-foreground-active: oklch(18.0% 0 0);
8
+ --skra-comp-accordion-focus-ring-color-hover: oklch(57.0% 0.18 295);
9
+ --skra-comp-accordion-focus-ring-color-active: oklch(63.0% 0.18 295);
10
+ --skra-comp-accordion-header-foreground-expanded-hover: oklch(12.0% 0 0);
11
+ --skra-comp-accordion-header-foreground-expanded-active: oklch(18.0% 0 0);
12
+ --skra-comp-accordion-indicator-color-hover: oklch(12.0% 0 0);
13
+ --skra-comp-accordion-indicator-color-active: oklch(18.0% 0 0);
14
+ --skra-comp-accordion-root-background-hover: oklch(85.0% 0.015 95);
15
+ --skra-comp-accordion-root-background-active: oklch(79.0% 0.015 95);
16
+ --skra-comp-accordion-root-border-color-hover: oklch(12.0% 0 0);
17
+ --skra-comp-accordion-root-border-color-active: oklch(18.0% 0 0);
18
+ --skra-comp-accordion-item-divider-color-hover: oklch(12.0% 0 0);
19
+ --skra-comp-accordion-item-divider-color-active: oklch(18.0% 0 0);
20
+ --skra-comp-accordion-panel-foreground-hover: oklch(47.0% 0 0);
21
+ --skra-comp-accordion-panel-foreground-active: oklch(53.0% 0 0);
22
+ --skra-comp-accordion-background: transparent;
23
+ --skra-comp-accordion-border-color: transparent;
24
+ --skra-comp-accordion-border-width: 0rem;
25
+ --skra-comp-accordion-border-style: solid;
26
+ --skra-comp-accordion-shadow: none;
27
+ --skra-comp-accordion-focus-ring-width: 0.1875rem;
28
+ --skra-comp-accordion-icon-size: 1em;
29
+ --skra-comp-accordion-header-typography-role: label-large;
30
+ --skra-comp-accordion-indicator-size: 0.875rem;
31
+ --skra-comp-accordion-root-border-width: 0.1875rem;
32
+ --skra-comp-accordion-item-divider-width: 0.1875rem;
33
+ --skra-comp-accordion-item-background-expanded: transparent;
34
+ --skra-comp-alert-background-hover: oklch(83.0% 0 0);
35
+ --skra-comp-alert-background-active: oklch(77.0% 0 0);
36
+ --skra-comp-alert-foreground-hover: oklch(37.0% 0 0);
37
+ --skra-comp-alert-foreground-active: oklch(43.0% 0 0);
38
+ --skra-comp-alert-border-color-hover: oklch(12.0% 0 0);
39
+ --skra-comp-alert-border-color-active: oklch(18.0% 0 0);
40
+ --skra-comp-alert-focus-ring-color-hover: oklch(57.0% 0.18 295);
41
+ --skra-comp-alert-focus-ring-color-active: oklch(63.0% 0.18 295);
42
+ --skra-comp-alert-border-width: 0.1875rem;
43
+ --skra-comp-alert-border-style: solid;
44
+ --skra-comp-alert-focus-ring-width: 0.1875rem;
45
+ --skra-comp-alert-typography-role: body-medium;
46
+ --skra-comp-alert-icon-size: 1em;
47
+ --skra-comp-alert-title-typography-role: label-large;
48
+ --skra-comp-avatar-background-hover: oklch(83.0% 0 0);
49
+ --skra-comp-avatar-background-active: oklch(77.0% 0 0);
50
+ --skra-comp-avatar-foreground-hover: oklch(12.0% 0 0);
51
+ --skra-comp-avatar-foreground-active: oklch(18.0% 0 0);
52
+ --skra-comp-avatar-border-color-hover: oklch(12.0% 0 0);
53
+ --skra-comp-avatar-border-color-active: oklch(18.0% 0 0);
54
+ --skra-comp-avatar-focus-ring-color-hover: oklch(57.0% 0.18 295);
55
+ --skra-comp-avatar-focus-ring-color-active: oklch(63.0% 0.18 295);
56
+ --skra-comp-avatar-border-width: 0;
57
+ --skra-comp-avatar-border-style: solid;
58
+ --skra-comp-avatar-padding-block: 0;
59
+ --skra-comp-avatar-padding-inline: 0;
60
+ --skra-comp-avatar-shadow: none;
61
+ --skra-comp-avatar-focus-ring-width: 0.125rem;
62
+ --skra-comp-avatar-font-size-sm: 0.75rem;
63
+ --skra-comp-avatar-font-size-md: 0.9375rem;
64
+ --skra-comp-avatar-font-size-lg: 1.125rem;
65
+ --skra-comp-avatar-typography-role: label-medium;
66
+ --skra-comp-avatar-icon-size: 1em;
67
+ --skra-comp-badge-background-hover: oklch(83.0% 0 0);
68
+ --skra-comp-badge-background-active: oklch(77.0% 0 0);
69
+ --skra-comp-badge-foreground-hover: oklch(37.0% 0 0);
70
+ --skra-comp-badge-foreground-active: oklch(43.0% 0 0);
71
+ --skra-comp-badge-border-color-hover: oklch(12.0% 0 0);
72
+ --skra-comp-badge-border-color-active: oklch(18.0% 0 0);
73
+ --skra-comp-badge-focus-ring-color-hover: oklch(57.0% 0.18 295);
74
+ --skra-comp-badge-focus-ring-color-active: oklch(63.0% 0.18 295);
75
+ --skra-comp-badge-border-width: 0.1875rem;
76
+ --skra-comp-badge-border-style: solid;
77
+ --skra-comp-badge-focus-ring-width: 0.1875rem;
78
+ --skra-comp-badge-typography-role: label-small;
79
+ --skra-comp-badge-icon-size: 1em;
80
+ --skra-comp-button-background-hover: oklch(37.0% 0 0);
81
+ --skra-comp-button-background-active: oklch(43.0% 0 0);
82
+ --skra-comp-button-foreground-hover: oklch(88.0% 0 0);
83
+ --skra-comp-button-foreground-active: oklch(82.0% 0 0);
84
+ --skra-comp-button-border-color-hover: oklch(12.0% 0 0);
85
+ --skra-comp-button-border-color-active: oklch(18.0% 0 0);
86
+ --skra-comp-button-focus-ring-color-hover: oklch(57.0% 0.18 295);
87
+ --skra-comp-button-focus-ring-color-active: oklch(63.0% 0.18 295);
88
+ --skra-comp-button-loading-indicator-color-hover: oklch(12.0% 0 0);
89
+ --skra-comp-button-loading-indicator-color-active: oklch(18.0% 0 0);
90
+ --skra-comp-button-border-width: 0.1875rem;
91
+ --skra-comp-button-border-style: solid;
92
+ --skra-comp-button-focus-ring-width: 0.1875rem;
93
+ --skra-comp-button-size-sm-typography-role: label-small;
94
+ --skra-comp-button-size-md-typography-role: label-medium;
95
+ --skra-comp-button-size-lg-typography-role: label-large;
96
+ --skra-comp-button-icon-size: 1em;
97
+ --skra-comp-chip-background-hover: oklch(83.0% 0 0);
98
+ --skra-comp-chip-background-active: oklch(77.0% 0 0);
99
+ --skra-comp-chip-foreground-hover: oklch(37.0% 0 0);
100
+ --skra-comp-chip-foreground-active: oklch(43.0% 0 0);
101
+ --skra-comp-chip-border-color-hover: oklch(12.0% 0 0);
102
+ --skra-comp-chip-border-color-active: oklch(18.0% 0 0);
103
+ --skra-comp-chip-focus-ring-color-hover: oklch(57.0% 0.18 295);
104
+ --skra-comp-chip-focus-ring-color-active: oklch(63.0% 0.18 295);
105
+ --skra-comp-chip-border-width: 0.1875rem;
106
+ --skra-comp-chip-border-style: solid;
107
+ --skra-comp-chip-focus-ring-width: 0.1875rem;
108
+ --skra-comp-chip-typography-role: label-medium;
109
+ --skra-comp-chip-icon-size: 1em;
110
+ --skra-comp-chip-remove-size: 1.5rem;
111
+ --skra-comp-combobox-background-hover: oklch(85.0% 0.015 95);
112
+ --skra-comp-combobox-background-active: oklch(79.0% 0.015 95);
113
+ --skra-comp-combobox-foreground-hover: oklch(12.0% 0 0);
114
+ --skra-comp-combobox-foreground-active: oklch(18.0% 0 0);
115
+ --skra-comp-combobox-border-color-hover: oklch(12.0% 0 0);
116
+ --skra-comp-combobox-border-color-active: oklch(18.0% 0 0);
117
+ --skra-comp-combobox-focus-ring-color-hover: oklch(57.0% 0.18 295);
118
+ --skra-comp-combobox-focus-ring-color-active: oklch(63.0% 0.18 295);
119
+ --skra-comp-combobox-background-readonly-hover: oklch(81.0% 0.025 95);
120
+ --skra-comp-combobox-background-readonly-active: oklch(75.0% 0.025 95);
121
+ --skra-comp-combobox-border-color-validation-invalid-hover: oklch(60.0% 0.2 25);
122
+ --skra-comp-combobox-border-color-validation-invalid-active: oklch(66.0% 0.2 25);
123
+ --skra-comp-combobox-arrow-color-hover: oklch(47.0% 0 0);
124
+ --skra-comp-combobox-arrow-color-active: oklch(53.0% 0 0);
125
+ --skra-comp-combobox-panel-background-hover: oklch(85.0% 0.015 95);
126
+ --skra-comp-combobox-panel-background-active: oklch(79.0% 0.015 95);
127
+ --skra-comp-combobox-panel-foreground-hover: oklch(12.0% 0 0);
128
+ --skra-comp-combobox-panel-foreground-active: oklch(18.0% 0 0);
129
+ --skra-comp-combobox-panel-border-color-hover: oklch(12.0% 0 0);
130
+ --skra-comp-combobox-panel-border-color-active: oklch(18.0% 0 0);
131
+ --skra-comp-combobox-loading-indicator-color-hover: oklch(12.0% 0 0);
132
+ --skra-comp-combobox-loading-indicator-color-active: oklch(18.0% 0 0);
133
+ --skra-comp-combobox-empty-foreground-hover: oklch(47.0% 0 0);
134
+ --skra-comp-combobox-empty-foreground-active: oklch(53.0% 0 0);
135
+ --skra-comp-combobox-border-width: 0.125rem;
136
+ --skra-comp-combobox-border-style: solid;
137
+ --skra-comp-combobox-shadow: none;
138
+ --skra-comp-combobox-focus-ring-width: 0.1875rem;
139
+ --skra-comp-combobox-typography-role: body-medium;
140
+ --skra-comp-combobox-icon-size: 1em;
141
+ --skra-comp-combobox-arrow-icon-size: 1em;
142
+ --skra-comp-datepicker-background-hover: oklch(85.0% 0.015 95);
143
+ --skra-comp-datepicker-background-active: oklch(79.0% 0.015 95);
144
+ --skra-comp-datepicker-foreground-hover: oklch(12.0% 0 0);
145
+ --skra-comp-datepicker-foreground-active: oklch(18.0% 0 0);
146
+ --skra-comp-datepicker-border-color-hover: oklch(12.0% 0 0);
147
+ --skra-comp-datepicker-border-color-active: oklch(18.0% 0 0);
148
+ --skra-comp-datepicker-focus-ring-color-hover: oklch(57.0% 0.18 295);
149
+ --skra-comp-datepicker-focus-ring-color-active: oklch(63.0% 0.18 295);
150
+ --skra-comp-datepicker-background-readonly-hover: oklch(81.0% 0.025 95);
151
+ --skra-comp-datepicker-background-readonly-active: oklch(75.0% 0.025 95);
152
+ --skra-comp-datepicker-border-color-validation-invalid-hover: oklch(60.0% 0.2 25);
153
+ --skra-comp-datepicker-border-color-validation-invalid-active: oklch(66.0% 0.2 25);
154
+ --skra-comp-datepicker-icon-color-hover: oklch(47.0% 0 0);
155
+ --skra-comp-datepicker-icon-color-active: oklch(53.0% 0 0);
156
+ --skra-comp-datepicker-panel-background-hover: oklch(85.0% 0.015 95);
157
+ --skra-comp-datepicker-panel-background-active: oklch(79.0% 0.015 95);
158
+ --skra-comp-datepicker-panel-foreground-hover: oklch(12.0% 0 0);
159
+ --skra-comp-datepicker-panel-foreground-active: oklch(18.0% 0 0);
160
+ --skra-comp-datepicker-panel-border-color-hover: oklch(37.0% 0 0);
161
+ --skra-comp-datepicker-panel-border-color-active: oklch(43.0% 0 0);
162
+ --skra-comp-datepicker-header-foreground-hover: oklch(12.0% 0 0);
163
+ --skra-comp-datepicker-header-foreground-active: oklch(18.0% 0 0);
164
+ --skra-comp-datepicker-nav-color-active: oklch(53.0% 0 0);
165
+ --skra-comp-datepicker-weekday-foreground-hover: oklch(47.0% 0 0);
166
+ --skra-comp-datepicker-weekday-foreground-active: oklch(53.0% 0 0);
167
+ --skra-comp-datepicker-day-foreground-hover: oklch(12.0% 0 0);
168
+ --skra-comp-datepicker-day-foreground-active: oklch(18.0% 0 0);
169
+ --skra-comp-datepicker-day-today-indicator-color-hover: oklch(62.0% 0.11 98);
170
+ --skra-comp-datepicker-day-today-indicator-color-active: oklch(68.0% 0.11 98);
171
+ --skra-comp-datepicker-border-width: 0.125rem;
172
+ --skra-comp-datepicker-border-style: solid;
173
+ --skra-comp-datepicker-shadow: none;
174
+ --skra-comp-datepicker-focus-ring-width: 0.1875rem;
175
+ --skra-comp-datepicker-typography-role: body-medium;
176
+ --skra-comp-datepicker-icon-size: 1em;
177
+ --skra-comp-datepicker-header-typography-role: body-medium;
178
+ --skra-comp-datepicker-nav-icon-size: 1.25em;
179
+ --skra-comp-datepicker-weekday-typography-role: body-small;
180
+ --skra-comp-datepicker-day-typography-role: body-medium;
181
+ --skra-comp-dialog-background-hover: oklch(85.0% 0.015 95);
182
+ --skra-comp-dialog-background-active: oklch(79.0% 0.015 95);
183
+ --skra-comp-dialog-foreground-hover: oklch(12.0% 0 0);
184
+ --skra-comp-dialog-foreground-active: oklch(18.0% 0 0);
185
+ --skra-comp-dialog-border-color-hover: oklch(12.0% 0 0);
186
+ --skra-comp-dialog-border-color-active: oklch(18.0% 0 0);
187
+ --skra-comp-dialog-focus-ring-color-hover: oklch(57.0% 0.18 295);
188
+ --skra-comp-dialog-focus-ring-color-active: oklch(63.0% 0.18 295);
189
+ --skra-comp-dialog-border-width: 0.25rem;
190
+ --skra-comp-dialog-border-style: solid;
191
+ --skra-comp-dialog-focus-ring-width: 0.1875rem;
192
+ --skra-comp-dialog-typography-role: body-medium;
193
+ --skra-comp-field-background-hover: oklch(85.0% 0.015 95);
194
+ --skra-comp-field-background-active: oklch(79.0% 0.015 95);
195
+ --skra-comp-field-foreground-hover: oklch(12.0% 0 0);
196
+ --skra-comp-field-foreground-active: oklch(18.0% 0 0);
197
+ --skra-comp-field-border-color-hover: oklch(12.0% 0 0);
198
+ --skra-comp-field-border-color-active: oklch(18.0% 0 0);
199
+ --skra-comp-field-focus-ring-color-hover: oklch(57.0% 0.18 295);
200
+ --skra-comp-field-focus-ring-color-active: oklch(63.0% 0.18 295);
201
+ --skra-comp-field-label-color-hover: oklch(12.0% 0 0);
202
+ --skra-comp-field-label-color-active: oklch(18.0% 0 0);
203
+ --skra-comp-field-hint-color-hover: oklch(47.0% 0 0);
204
+ --skra-comp-field-hint-color-active: oklch(53.0% 0 0);
205
+ --skra-comp-field-error-color-hover: oklch(60.0% 0.2 25);
206
+ --skra-comp-field-error-color-active: oklch(66.0% 0.2 25);
207
+ --skra-comp-field-border-color-validation-invalid-hover: oklch(60.0% 0.2 25);
208
+ --skra-comp-field-border-color-validation-invalid-active: oklch(66.0% 0.2 25);
209
+ --skra-comp-field-background-readonly-hover: oklch(81.0% 0.025 95);
210
+ --skra-comp-field-background-readonly-active: oklch(75.0% 0.025 95);
211
+ --skra-comp-field-border-color-readonly-hover: oklch(37.0% 0 0);
212
+ --skra-comp-field-border-color-readonly-active: oklch(43.0% 0 0);
213
+ --skra-comp-field-required-color-hover: oklch(60.0% 0.2 25);
214
+ --skra-comp-field-required-color-active: oklch(66.0% 0.2 25);
215
+ --skra-comp-field-checkbox-border-color-hover: oklch(12.0% 0 0);
216
+ --skra-comp-field-checkbox-border-color-active: oklch(18.0% 0 0);
217
+ --skra-comp-field-checkbox-background-hover: oklch(85.0% 0.015 95);
218
+ --skra-comp-field-checkbox-background-active: oklch(79.0% 0.015 95);
219
+ --skra-comp-field-checkbox-checked-background-hover: oklch(73.0% 0.17 98);
220
+ --skra-comp-field-checkbox-checked-background-active: oklch(67.0% 0.17 98);
221
+ --skra-comp-field-checkbox-checked-background-readonly-hover: oklch(37.0% 0 0);
222
+ --skra-comp-field-checkbox-checked-background-readonly-active: oklch(43.0% 0 0);
223
+ --skra-comp-field-checkbox-check-color-hover: oklch(12.0% 0 0);
224
+ --skra-comp-field-checkbox-check-color-active: oklch(18.0% 0 0);
225
+ --skra-comp-field-checkbox-border-width: 0.125rem;
226
+ --skra-comp-field-radio-border-color-hover: oklch(12.0% 0 0);
227
+ --skra-comp-field-radio-border-color-active: oklch(18.0% 0 0);
228
+ --skra-comp-field-radio-background-hover: oklch(85.0% 0.015 95);
229
+ --skra-comp-field-radio-background-active: oklch(79.0% 0.015 95);
230
+ --skra-comp-field-radio-checked-background-hover: oklch(73.0% 0.17 98);
231
+ --skra-comp-field-radio-checked-background-active: oklch(67.0% 0.17 98);
232
+ --skra-comp-field-radio-checked-background-readonly-hover: oklch(37.0% 0 0);
233
+ --skra-comp-field-radio-checked-background-readonly-active: oklch(43.0% 0 0);
234
+ --skra-comp-field-radio-dot-color-hover: oklch(12.0% 0 0);
235
+ --skra-comp-field-radio-dot-color-active: oklch(18.0% 0 0);
236
+ --skra-comp-field-radio-border-width: 0.125rem;
237
+ --skra-comp-field-switch-border-color-hover: oklch(12.0% 0 0);
238
+ --skra-comp-field-switch-border-color-active: oklch(18.0% 0 0);
239
+ --skra-comp-field-switch-background-hover: oklch(37.0% 0 0);
240
+ --skra-comp-field-switch-background-active: oklch(43.0% 0 0);
241
+ --skra-comp-field-switch-checked-background-hover: oklch(73.0% 0.17 98);
242
+ --skra-comp-field-switch-checked-background-active: oklch(67.0% 0.17 98);
243
+ --skra-comp-field-switch-checked-background-readonly-hover: oklch(37.0% 0 0);
244
+ --skra-comp-field-switch-checked-background-readonly-active: oklch(43.0% 0 0);
245
+ --skra-comp-field-switch-thumb-color-hover: oklch(85.0% 0.015 95);
246
+ --skra-comp-field-switch-thumb-color-active: oklch(79.0% 0.015 95);
247
+ --skra-comp-field-switch-track-inline-size: 2.25rem;
248
+ --skra-comp-field-switch-track-block-size: 1.25rem;
249
+ --skra-comp-field-switch-border-width: 0.125rem;
250
+ --skra-comp-field-switch-thumb-size: 1rem;
251
+ --skra-comp-field-switch-thumb-inset: 0.125rem;
252
+ --skra-comp-field-group-legend-color-hover: oklch(12.0% 0 0);
253
+ --skra-comp-field-group-legend-color-active: oklch(18.0% 0 0);
254
+ --skra-comp-field-select-option-foreground-hover: oklch(12.0% 0 0);
255
+ --skra-comp-field-select-option-foreground-active: oklch(18.0% 0 0);
256
+ --skra-comp-field-select-option-background-hover: oklch(85.0% 0.015 95);
257
+ --skra-comp-field-select-option-background-active: oklch(79.0% 0.015 95);
258
+ --skra-comp-field-select-optgroup-foreground-hover: oklch(12.0% 0 0);
259
+ --skra-comp-field-select-optgroup-foreground-active: oklch(18.0% 0 0);
260
+ --skra-comp-field-select-arrow-icon-size: 1em;
261
+ --skra-comp-field-border-width: 0.125rem;
262
+ --skra-comp-field-border-style: solid;
263
+ --skra-comp-field-shadow: none;
264
+ --skra-comp-field-focus-ring-width: 0.1875rem;
265
+ --skra-comp-kbd-background-hover: oklch(81.0% 0.025 95);
266
+ --skra-comp-kbd-background-active: oklch(75.0% 0.025 95);
267
+ --skra-comp-kbd-foreground-hover: oklch(12.0% 0 0);
268
+ --skra-comp-kbd-foreground-active: oklch(18.0% 0 0);
269
+ --skra-comp-kbd-border-color-hover: oklch(12.0% 0 0);
270
+ --skra-comp-kbd-border-color-active: oklch(18.0% 0 0);
271
+ --skra-comp-kbd-focus-ring-color-hover: oklch(57.0% 0.18 295);
272
+ --skra-comp-kbd-focus-ring-color-active: oklch(63.0% 0.18 295);
273
+ --skra-comp-kbd-border-width: 0.125rem;
274
+ --skra-comp-kbd-border-style: solid;
275
+ --skra-comp-kbd-focus-ring-width: 0.1875rem;
276
+ --skra-comp-link-foreground-active: oklch(18.0% 0 0);
277
+ --skra-comp-link-focus-ring-color-hover: oklch(57.0% 0.18 295);
278
+ --skra-comp-link-focus-ring-color-active: oklch(63.0% 0.18 295);
279
+ --skra-comp-link-focus-ring-width: 0.1875rem;
280
+ --skra-comp-link-text-decoration-line: underline;
281
+ --skra-comp-link-text-decoration-thickness: 0.1875rem;
282
+ --skra-comp-link-text-underline-offset: 0.25rem;
283
+ --skra-comp-menu-background-hover: oklch(85.0% 0.015 95);
284
+ --skra-comp-menu-background-active: oklch(79.0% 0.015 95);
285
+ --skra-comp-menu-foreground-hover: oklch(12.0% 0 0);
286
+ --skra-comp-menu-foreground-active: oklch(18.0% 0 0);
287
+ --skra-comp-menu-border-color-hover: oklch(12.0% 0 0);
288
+ --skra-comp-menu-border-color-active: oklch(18.0% 0 0);
289
+ --skra-comp-menu-focus-ring-color-hover: oklch(57.0% 0.18 295);
290
+ --skra-comp-menu-focus-ring-color-active: oklch(63.0% 0.18 295);
291
+ --skra-comp-menu-item-foreground-hover: oklch(12.0% 0 0);
292
+ --skra-comp-menu-item-foreground-active: oklch(18.0% 0 0);
293
+ --skra-comp-menu-border-width: 0.1875rem;
294
+ --skra-comp-menu-border-style: solid;
295
+ --skra-comp-menu-focus-ring-width: 0.1875rem;
296
+ --skra-comp-menu-typography-role: body-medium;
297
+ --skra-comp-popover-background-hover: oklch(85.0% 0.015 95);
298
+ --skra-comp-popover-background-active: oklch(79.0% 0.015 95);
299
+ --skra-comp-popover-foreground-hover: oklch(12.0% 0 0);
300
+ --skra-comp-popover-foreground-active: oklch(18.0% 0 0);
301
+ --skra-comp-popover-border-color-hover: oklch(12.0% 0 0);
302
+ --skra-comp-popover-border-color-active: oklch(18.0% 0 0);
303
+ --skra-comp-popover-focus-ring-color-hover: oklch(57.0% 0.18 295);
304
+ --skra-comp-popover-focus-ring-color-active: oklch(63.0% 0.18 295);
305
+ --skra-comp-popover-border-width: 0.1875rem;
306
+ --skra-comp-popover-border-style: solid;
307
+ --skra-comp-popover-focus-ring-width: 0.1875rem;
308
+ --skra-comp-popover-typography-role: body-medium;
309
+ --skra-comp-progress-background-hover: oklch(83.0% 0 0);
310
+ --skra-comp-progress-background-active: oklch(77.0% 0 0);
311
+ --skra-comp-progress-foreground-hover: oklch(12.0% 0 0);
312
+ --skra-comp-progress-foreground-active: oklch(18.0% 0 0);
313
+ --skra-comp-progress-border-color-hover: oklch(12.0% 0 0);
314
+ --skra-comp-progress-border-color-active: oklch(18.0% 0 0);
315
+ --skra-comp-progress-focus-ring-color-hover: oklch(57.0% 0.18 295);
316
+ --skra-comp-progress-focus-ring-color-active: oklch(63.0% 0.18 295);
317
+ --skra-comp-progress-fill-color-hover: oklch(73.0% 0.17 98);
318
+ --skra-comp-progress-fill-color-active: oklch(67.0% 0.17 98);
319
+ --skra-comp-progress-border-width: 0.1875rem;
320
+ --skra-comp-progress-border-style: solid;
321
+ --skra-comp-progress-padding-block: 0rem;
322
+ --skra-comp-progress-padding-inline: 0rem;
323
+ --skra-comp-progress-focus-ring-width: 0.1875rem;
324
+ --skra-comp-progress-block-size: 0.875rem;
325
+ --skra-comp-select-background-hover: oklch(85.0% 0.015 95);
326
+ --skra-comp-select-background-active: oklch(79.0% 0.015 95);
327
+ --skra-comp-select-foreground-hover: oklch(12.0% 0 0);
328
+ --skra-comp-select-foreground-active: oklch(18.0% 0 0);
329
+ --skra-comp-select-border-color-hover: oklch(12.0% 0 0);
330
+ --skra-comp-select-border-color-active: oklch(18.0% 0 0);
331
+ --skra-comp-select-focus-ring-color-hover: oklch(57.0% 0.18 295);
332
+ --skra-comp-select-focus-ring-color-active: oklch(63.0% 0.18 295);
333
+ --skra-comp-select-background-readonly-hover: oklch(81.0% 0.025 95);
334
+ --skra-comp-select-background-readonly-active: oklch(75.0% 0.025 95);
335
+ --skra-comp-select-border-color-validation-invalid-hover: oklch(60.0% 0.2 25);
336
+ --skra-comp-select-border-color-validation-invalid-active: oklch(66.0% 0.2 25);
337
+ --skra-comp-select-arrow-color-hover: oklch(47.0% 0 0);
338
+ --skra-comp-select-arrow-color-active: oklch(53.0% 0 0);
339
+ --skra-comp-select-panel-background-hover: oklch(85.0% 0.015 95);
340
+ --skra-comp-select-panel-background-active: oklch(79.0% 0.015 95);
341
+ --skra-comp-select-panel-foreground-hover: oklch(12.0% 0 0);
342
+ --skra-comp-select-panel-foreground-active: oklch(18.0% 0 0);
343
+ --skra-comp-select-panel-border-color-hover: oklch(12.0% 0 0);
344
+ --skra-comp-select-panel-border-color-active: oklch(18.0% 0 0);
345
+ --skra-comp-select-option-foreground-hover: oklch(12.0% 0 0);
346
+ --skra-comp-select-option-foreground-active: oklch(18.0% 0 0);
347
+ --skra-comp-select-option-detail-foreground-hover: oklch(47.0% 0 0);
348
+ --skra-comp-select-option-detail-foreground-active: oklch(53.0% 0 0);
349
+ --skra-comp-select-indicator-color-hover: oklch(62.0% 0.11 98);
350
+ --skra-comp-select-indicator-color-active: oklch(68.0% 0.11 98);
351
+ --skra-comp-select-option-checkbox-border-color-hover: oklch(12.0% 0 0);
352
+ --skra-comp-select-option-checkbox-border-color-active: oklch(18.0% 0 0);
353
+ --skra-comp-select-option-checkbox-check-color-hover: oklch(12.0% 0 0);
354
+ --skra-comp-select-option-checkbox-check-color-active: oklch(18.0% 0 0);
355
+ --skra-comp-select-border-width: 0.125rem;
356
+ --skra-comp-select-border-style: solid;
357
+ --skra-comp-select-shadow: none;
358
+ --skra-comp-select-focus-ring-width: 0.1875rem;
359
+ --skra-comp-select-typography-role: body-medium;
360
+ --skra-comp-select-icon-size: 1em;
361
+ --skra-comp-select-arrow-icon-size: 1em;
362
+ --skra-comp-select-option-checkbox-size: 1em;
363
+ --skra-comp-skeleton-background-hover: oklch(74.0% 0 0);
364
+ --skra-comp-skeleton-background-active: oklch(68.0% 0 0);
365
+ --skra-comp-skeleton-foreground-hover: oklch(12.0% 0 0);
366
+ --skra-comp-skeleton-foreground-active: oklch(18.0% 0 0);
367
+ --skra-comp-skeleton-border-color-hover: oklch(12.0% 0 0);
368
+ --skra-comp-skeleton-border-color-active: oklch(18.0% 0 0);
369
+ --skra-comp-skeleton-focus-ring-color-hover: oklch(57.0% 0.18 295);
370
+ --skra-comp-skeleton-focus-ring-color-active: oklch(63.0% 0.18 295);
371
+ --skra-comp-skeleton-border-width: 0.1875rem;
372
+ --skra-comp-skeleton-border-style: solid;
373
+ --skra-comp-skeleton-padding-block: 0rem;
374
+ --skra-comp-skeleton-padding-inline: 0rem;
375
+ --skra-comp-skeleton-focus-ring-width: 0.1875rem;
376
+ --skra-comp-star-rating-star-color-empty-hover: oklch(12.0% 0 0);
377
+ --skra-comp-star-rating-star-color-empty-active: oklch(18.0% 0 0);
378
+ --skra-comp-star-rating-star-color-filled-hover: oklch(73.0% 0.17 98);
379
+ --skra-comp-star-rating-star-color-filled-active: oklch(67.0% 0.17 98);
380
+ --skra-comp-star-rating-focus-ring-color-hover: oklch(57.0% 0.18 295);
381
+ --skra-comp-star-rating-focus-ring-color-active: oklch(63.0% 0.18 295);
382
+ --skra-comp-star-rating-gap: 0.25rem;
383
+ --skra-comp-star-rating-star-size-sm: 1.125rem;
384
+ --skra-comp-star-rating-star-size-md: 1.375rem;
385
+ --skra-comp-star-rating-star-size-lg: 1.625rem;
386
+ --skra-comp-star-rating-focus-ring-width: 0.1875rem;
387
+ --skra-comp-status-dot-background-hover: oklch(37.0% 0 0);
388
+ --skra-comp-status-dot-background-active: oklch(43.0% 0 0);
389
+ --skra-comp-status-dot-foreground-hover: oklch(88.0% 0 0);
390
+ --skra-comp-status-dot-foreground-active: oklch(82.0% 0 0);
391
+ --skra-comp-status-dot-border-color-hover: oklch(85.0% 0.015 95);
392
+ --skra-comp-status-dot-border-color-active: oklch(79.0% 0.015 95);
393
+ --skra-comp-status-dot-focus-ring-color-hover: oklch(57.0% 0.18 295);
394
+ --skra-comp-status-dot-focus-ring-color-active: oklch(63.0% 0.18 295);
395
+ --skra-comp-status-dot-border-width: 0.1875rem;
396
+ --skra-comp-status-dot-border-style: solid;
397
+ --skra-comp-status-dot-padding-block: 0;
398
+ --skra-comp-status-dot-padding-inline: 0;
399
+ --skra-comp-status-dot-shadow: none;
400
+ --skra-comp-status-dot-focus-ring-width: 0.125rem;
401
+ --skra-comp-tabs-foreground-hover: oklch(47.0% 0 0);
402
+ --skra-comp-tabs-foreground-active: oklch(53.0% 0 0);
403
+ --skra-comp-tabs-focus-ring-color-hover: oklch(57.0% 0.18 295);
404
+ --skra-comp-tabs-focus-ring-color-active: oklch(63.0% 0.18 295);
405
+ --skra-comp-tabs-indicator-color-hover: oklch(73.0% 0.17 98);
406
+ --skra-comp-tabs-indicator-color-active: oklch(67.0% 0.17 98);
407
+ --skra-comp-tabs-tablist-border-color-hover: oklch(12.0% 0 0);
408
+ --skra-comp-tabs-tablist-border-color-active: oklch(18.0% 0 0);
409
+ --skra-comp-tabs-background: transparent;
410
+ --skra-comp-tabs-border-color: transparent;
411
+ --skra-comp-tabs-border-width: 0rem;
412
+ --skra-comp-tabs-border-style: solid;
413
+ --skra-comp-tabs-shadow: none;
414
+ --skra-comp-tabs-focus-ring-width: 0.125rem;
415
+ --skra-comp-tabs-indicator-thickness: 0.25rem;
416
+ --skra-comp-tabs-typography-role: label-large;
417
+ --skra-comp-tabs-tablist-border-width: 0.1875rem;
418
+ --skra-comp-toast-background-hover: oklch(83.0% 0 0);
419
+ --skra-comp-toast-background-active: oklch(77.0% 0 0);
420
+ --skra-comp-toast-foreground-hover: oklch(37.0% 0 0);
421
+ --skra-comp-toast-foreground-active: oklch(43.0% 0 0);
422
+ --skra-comp-toast-border-color-hover: oklch(12.0% 0 0);
423
+ --skra-comp-toast-border-color-active: oklch(18.0% 0 0);
424
+ --skra-comp-toast-focus-ring-color-hover: oklch(57.0% 0.18 295);
425
+ --skra-comp-toast-focus-ring-color-active: oklch(63.0% 0.18 295);
426
+ --skra-comp-toast-border-width: 0.1875rem;
427
+ --skra-comp-toast-border-style: solid;
428
+ --skra-comp-toast-focus-ring-width: 0.1875rem;
429
+ --skra-comp-toast-typography-role: body-medium;
430
+ --skra-comp-toast-icon-size: 1em;
431
+ --skra-comp-tooltip-background-hover: oklch(12.0% 0 0);
432
+ --skra-comp-tooltip-background-active: oklch(18.0% 0 0);
433
+ --skra-comp-tooltip-foreground-hover: oklch(88.0% 0 0);
434
+ --skra-comp-tooltip-foreground-active: oklch(82.0% 0 0);
435
+ --skra-comp-tooltip-focus-ring-color-hover: oklch(57.0% 0.18 295);
436
+ --skra-comp-tooltip-focus-ring-color-active: oklch(63.0% 0.18 295);
437
+ --skra-comp-tooltip-border-color: transparent;
438
+ --skra-comp-tooltip-border-width: 0;
439
+ --skra-comp-tooltip-border-style: solid;
440
+ --skra-comp-tooltip-focus-ring-width: 0.125rem;
441
+ --skra-comp-tooltip-typography-role: body-small;
442
+ --skra-comp-typography-display-large-foreground-hover: oklch(12.0% 0 0);
443
+ --skra-comp-typography-display-large-foreground-active: oklch(18.0% 0 0);
444
+ --skra-comp-typography-display-medium-foreground-hover: oklch(12.0% 0 0);
445
+ --skra-comp-typography-display-medium-foreground-active: oklch(18.0% 0 0);
446
+ --skra-comp-typography-display-small-foreground-hover: oklch(12.0% 0 0);
447
+ --skra-comp-typography-display-small-foreground-active: oklch(18.0% 0 0);
448
+ --skra-comp-typography-headline-large-foreground-hover: oklch(12.0% 0 0);
449
+ --skra-comp-typography-headline-large-foreground-active: oklch(18.0% 0 0);
450
+ --skra-comp-typography-headline-medium-foreground-hover: oklch(12.0% 0 0);
451
+ --skra-comp-typography-headline-medium-foreground-active: oklch(18.0% 0 0);
452
+ --skra-comp-typography-headline-small-foreground-hover: oklch(12.0% 0 0);
453
+ --skra-comp-typography-headline-small-foreground-active: oklch(18.0% 0 0);
454
+ --skra-comp-typography-title-large-foreground-hover: oklch(12.0% 0 0);
455
+ --skra-comp-typography-title-large-foreground-active: oklch(18.0% 0 0);
456
+ --skra-comp-typography-title-medium-foreground-hover: oklch(12.0% 0 0);
457
+ --skra-comp-typography-title-medium-foreground-active: oklch(18.0% 0 0);
458
+ --skra-comp-typography-title-small-foreground-hover: oklch(12.0% 0 0);
459
+ --skra-comp-typography-title-small-foreground-active: oklch(18.0% 0 0);
460
+ --skra-comp-typography-body-large-foreground-hover: oklch(12.0% 0 0);
461
+ --skra-comp-typography-body-large-foreground-active: oklch(18.0% 0 0);
462
+ --skra-comp-typography-body-medium-foreground-hover: oklch(12.0% 0 0);
463
+ --skra-comp-typography-body-medium-foreground-active: oklch(18.0% 0 0);
464
+ --skra-comp-typography-body-small-foreground-hover: oklch(47.0% 0 0);
465
+ --skra-comp-typography-body-small-foreground-active: oklch(53.0% 0 0);
466
+ --skra-comp-typography-label-large-foreground-hover: oklch(12.0% 0 0);
467
+ --skra-comp-typography-label-large-foreground-active: oklch(18.0% 0 0);
468
+ --skra-comp-typography-label-medium-foreground-hover: oklch(12.0% 0 0);
469
+ --skra-comp-typography-label-medium-foreground-active: oklch(18.0% 0 0);
470
+ --skra-comp-typography-label-small-foreground-hover: oklch(47.0% 0 0);
471
+ --skra-comp-typography-label-small-foreground-active: oklch(53.0% 0 0);
472
+ --skra-comp-typography-foreground-error-hover: oklch(60.0% 0.2 25);
473
+ --skra-comp-typography-foreground-error-active: oklch(66.0% 0.2 25);
474
+ --skra-comp-typography-foreground-warning-hover: oklch(50.0% 0.12 80);
475
+ --skra-comp-typography-foreground-warning-active: oklch(56.0% 0.12 80);
476
+ --skra-comp-typography-foreground-success-hover: oklch(60.0% 0.15 145);
477
+ --skra-comp-typography-foreground-success-active: oklch(66.0% 0.15 145);
478
+ --skra-comp-accordion-radius: var(--skra-sys-radius-none);
479
+ --skra-comp-accordion-min-block-size: var(--skra-sys-size-interactive-md);
480
+ --skra-comp-accordion-root-radius: var(--skra-sys-radius-none);
481
+ --skra-comp-alert-radius: var(--skra-sys-radius-md);
482
+ --skra-comp-alert-shadow: var(--skra-sys-shadow-sm);
483
+ --skra-comp-alert-dismiss-size: var(--skra-sys-size-interactive-sm);
484
+ --skra-comp-avatar-radius: var(--skra-sys-radius-full);
485
+ --skra-comp-badge-radius: var(--skra-sys-radius-md);
486
+ --skra-comp-badge-shadow: var(--skra-sys-shadow-sm);
487
+ --skra-comp-button-radius: var(--skra-sys-radius-md);
488
+ --skra-comp-button-shadow: var(--skra-sys-shadow-sm);
489
+ --skra-comp-button-shadow-hover: var(--skra-sys-shadow-md);
490
+ --skra-comp-button-min-block-size: var(--skra-sys-size-interactive-md);
491
+ --skra-comp-button-size-sm-min-block-size: var(--skra-sys-size-interactive-sm);
492
+ --skra-comp-button-size-md-min-block-size: var(--skra-sys-size-interactive-md);
493
+ --skra-comp-button-size-lg-min-block-size: var(--skra-sys-size-interactive-lg);
494
+ --skra-comp-button-loading-indicator-size: var(--skra-sys-icon-size-md);
495
+ --skra-comp-chip-radius: var(--skra-sys-radius-md);
496
+ --skra-comp-chip-shadow: var(--skra-sys-shadow-sm);
497
+ --skra-comp-combobox-radius: var(--skra-sys-radius-sm);
498
+ --skra-comp-combobox-min-block-size: var(--skra-sys-size-interactive-md);
499
+ --skra-comp-combobox-panel-radius: var(--skra-sys-radius-md);
500
+ --skra-comp-combobox-panel-shadow: var(--skra-sys-shadow-lg);
501
+ --skra-comp-datepicker-radius: var(--skra-sys-radius-sm);
502
+ --skra-comp-datepicker-min-block-size: var(--skra-sys-size-interactive-md);
503
+ --skra-comp-datepicker-panel-radius: var(--skra-sys-radius-md);
504
+ --skra-comp-datepicker-panel-shadow: var(--skra-sys-shadow-lg);
505
+ --skra-comp-datepicker-day-size: var(--skra-sys-size-interactive-md);
506
+ --skra-comp-datepicker-day-radius: var(--skra-sys-radius-sm);
507
+ --skra-comp-dialog-radius: var(--skra-sys-radius-lg);
508
+ --skra-comp-dialog-shadow: var(--skra-sys-shadow-xl);
509
+ --skra-comp-field-checkbox-border-radius: var(--skra-sys-radius-sm);
510
+ --skra-comp-field-switch-track-radius: var(--skra-sys-radius-sm);
511
+ --skra-comp-field-radius: var(--skra-sys-radius-sm);
512
+ --skra-comp-kbd-radius: var(--skra-sys-radius-none);
513
+ --skra-comp-kbd-shadow: var(--skra-sys-shadow-sm);
514
+ --skra-comp-menu-radius: var(--skra-sys-radius-md);
515
+ --skra-comp-menu-shadow: var(--skra-sys-shadow-lg);
516
+ --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
517
+ --skra-comp-popover-radius: var(--skra-sys-radius-md);
518
+ --skra-comp-popover-shadow: var(--skra-sys-shadow-lg);
519
+ --skra-comp-progress-radius: var(--skra-sys-radius-sm);
520
+ --skra-comp-progress-shadow: var(--skra-sys-shadow-sm);
521
+ --skra-comp-select-radius: var(--skra-sys-radius-sm);
522
+ --skra-comp-select-min-block-size: var(--skra-sys-size-interactive-md);
523
+ --skra-comp-select-panel-radius: var(--skra-sys-radius-md);
524
+ --skra-comp-select-panel-shadow: var(--skra-sys-shadow-lg);
525
+ --skra-comp-select-option-min-block-size: var(--skra-sys-size-interactive-md);
526
+ --skra-comp-select-option-checkbox-radius: var(--skra-sys-radius-sm);
527
+ --skra-comp-skeleton-radius: var(--skra-sys-radius-sm);
528
+ --skra-comp-skeleton-shadow: var(--skra-sys-shadow-sm);
529
+ --skra-comp-status-dot-radius: var(--skra-sys-radius-full);
530
+ --skra-comp-tabs-radius: var(--skra-sys-radius-sm);
531
+ --skra-comp-toast-radius: var(--skra-sys-radius-md);
532
+ --skra-comp-toast-shadow: var(--skra-sys-shadow-lg);
533
+ --skra-comp-toast-dismiss-size: var(--skra-sys-size-interactive-sm);
534
+ --skra-comp-tooltip-radius: var(--skra-sys-radius-sm);
535
+ --skra-comp-tooltip-shadow: var(--skra-sys-shadow-md);
536
+ --skra-comp-typography-display-large-letter-spacing: var(--skra-sys-typography-role-display-large-letter-spacing);
537
+ --skra-comp-typography-display-medium-letter-spacing: var(--skra-sys-typography-role-display-medium-letter-spacing);
538
+ --skra-comp-typography-display-small-letter-spacing: var(--skra-sys-typography-role-display-small-letter-spacing);
539
+ --skra-comp-typography-headline-large-letter-spacing: var(--skra-sys-typography-role-headline-large-letter-spacing);
540
+ --skra-comp-typography-headline-medium-letter-spacing: var(--skra-sys-typography-role-headline-medium-letter-spacing);
541
+ --skra-comp-typography-headline-small-letter-spacing: var(--skra-sys-typography-role-headline-small-letter-spacing);
542
+ --skra-comp-typography-title-large-letter-spacing: var(--skra-sys-typography-role-title-large-letter-spacing);
543
+ --skra-comp-typography-title-medium-letter-spacing: var(--skra-sys-typography-role-title-medium-letter-spacing);
544
+ --skra-comp-typography-title-small-letter-spacing: var(--skra-sys-typography-role-title-small-letter-spacing);
545
+ --skra-comp-typography-body-large-letter-spacing: var(--skra-sys-typography-role-body-large-letter-spacing);
546
+ --skra-comp-typography-body-medium-letter-spacing: var(--skra-sys-typography-role-body-medium-letter-spacing);
547
+ --skra-comp-typography-body-small-letter-spacing: var(--skra-sys-typography-role-body-small-letter-spacing);
548
+ --skra-comp-typography-label-large-letter-spacing: var(--skra-sys-typography-role-label-large-letter-spacing);
549
+ --skra-comp-typography-label-medium-letter-spacing: var(--skra-sys-typography-role-label-medium-letter-spacing);
550
+ --skra-comp-typography-label-small-letter-spacing: var(--skra-sys-typography-role-label-small-letter-spacing);
551
+ --skra-comp-accordion-foreground: var(--skra-sys-color-on-surface);
552
+ --skra-comp-accordion-padding-block: var(--skra-sys-spacing-3);
553
+ --skra-comp-accordion-padding-inline: var(--skra-sys-spacing-4);
554
+ --skra-comp-accordion-motion-duration: var(--skra-sys-motion-duration-fast);
555
+ --skra-comp-accordion-motion-easing: var(--skra-sys-motion-easing-standard);
556
+ --skra-comp-accordion-focus-ring-color: var(--skra-sys-color-focus-ring);
557
+ --skra-comp-accordion-header-background-hover: var(--skra-sys-color-surface-hover);
558
+ --skra-comp-accordion-header-foreground-expanded: var(--skra-sys-color-on-surface-strong);
559
+ --skra-comp-accordion-header-gap: var(--skra-sys-spacing-3);
560
+ --skra-comp-accordion-indicator-color: var(--skra-sys-color-on-surface);
561
+ --skra-comp-accordion-root-background: var(--skra-sys-color-surface);
562
+ --skra-comp-accordion-root-border-color: var(--skra-sys-color-border);
563
+ --skra-comp-accordion-item-divider-color: var(--skra-sys-color-border);
564
+ --skra-comp-accordion-panel-foreground: var(--skra-sys-color-on-surface-subtle);
565
+ --skra-comp-accordion-panel-padding-block: var(--skra-sys-spacing-3);
566
+ --skra-comp-accordion-panel-padding-inline: var(--skra-sys-spacing-4);
567
+ --skra-comp-alert-background: var(--skra-sys-color-neutral-soft);
568
+ --skra-comp-alert-foreground: var(--skra-sys-color-neutral-ink);
569
+ --skra-comp-alert-border-color: var(--skra-sys-color-neutral-border);
570
+ --skra-comp-alert-padding-block: var(--skra-sys-spacing-3);
571
+ --skra-comp-alert-padding-inline: var(--skra-sys-spacing-4);
572
+ --skra-comp-alert-motion-duration: var(--skra-sys-motion-duration-fast);
573
+ --skra-comp-alert-motion-easing: var(--skra-sys-motion-easing-standard);
574
+ --skra-comp-alert-focus-ring-color: var(--skra-sys-color-focus-ring);
575
+ --skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
576
+ --skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
577
+ --skra-comp-avatar-background: var(--skra-sys-color-neutral-soft);
578
+ --skra-comp-avatar-foreground: var(--skra-sys-color-neutral-strong);
579
+ --skra-comp-avatar-border-color: var(--skra-sys-color-neutral-border);
580
+ --skra-comp-avatar-motion-duration: var(--skra-sys-motion-duration-fast);
581
+ --skra-comp-avatar-motion-easing: var(--skra-sys-motion-easing-standard);
582
+ --skra-comp-avatar-focus-ring-color: var(--skra-sys-color-focus-ring);
583
+ --skra-comp-avatar-size-sm: var(--skra-sys-size-avatar-sm);
584
+ --skra-comp-avatar-size-md: var(--skra-sys-size-avatar-md);
585
+ --skra-comp-avatar-size-lg: var(--skra-sys-size-avatar-lg);
586
+ --skra-comp-badge-background: var(--skra-sys-color-neutral-soft);
587
+ --skra-comp-badge-foreground: var(--skra-sys-color-neutral-ink);
588
+ --skra-comp-badge-border-color: var(--skra-sys-color-neutral-border);
589
+ --skra-comp-badge-padding-block: var(--skra-sys-spacing-1);
590
+ --skra-comp-badge-padding-inline: var(--skra-sys-spacing-2);
591
+ --skra-comp-badge-motion-duration: var(--skra-sys-motion-duration-fast);
592
+ --skra-comp-badge-motion-easing: var(--skra-sys-motion-easing-standard);
593
+ --skra-comp-badge-focus-ring-color: var(--skra-sys-color-focus-ring);
594
+ --skra-comp-badge-icon-gap: var(--skra-sys-spacing-1);
595
+ --skra-comp-button-background: var(--skra-sys-color-neutral-base);
596
+ --skra-comp-button-foreground: var(--skra-sys-color-neutral-contrast);
597
+ --skra-comp-button-border-color: var(--skra-sys-color-border);
598
+ --skra-comp-button-padding-block: var(--skra-sys-spacing-2);
599
+ --skra-comp-button-padding-inline: var(--skra-sys-spacing-4);
600
+ --skra-comp-button-motion-duration: var(--skra-sys-motion-duration-fast);
601
+ --skra-comp-button-motion-easing: var(--skra-sys-motion-easing-standard);
602
+ --skra-comp-button-focus-ring-color: var(--skra-sys-color-focus-ring);
603
+ --skra-comp-button-background-disabled: var(--skra-sys-color-surface-disabled);
604
+ --skra-comp-button-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
605
+ --skra-comp-button-border-color-disabled: var(--skra-sys-color-border-subtle);
606
+ --skra-comp-button-size-sm-padding-block: var(--skra-sys-spacing-1);
607
+ --skra-comp-button-size-sm-padding-inline: var(--skra-sys-spacing-3);
608
+ --skra-comp-button-size-md-padding-block: var(--skra-sys-spacing-2);
609
+ --skra-comp-button-size-md-padding-inline: var(--skra-sys-spacing-4);
610
+ --skra-comp-button-size-lg-padding-block: var(--skra-sys-spacing-3);
611
+ --skra-comp-button-size-lg-padding-inline: var(--skra-sys-spacing-5);
612
+ --skra-comp-button-icon-gap: var(--skra-sys-spacing-2);
613
+ --skra-comp-button-loading-indicator-color: var(--skra-sys-color-on-surface);
614
+ --skra-comp-chip-background: var(--skra-sys-color-neutral-soft);
615
+ --skra-comp-chip-foreground: var(--skra-sys-color-neutral-ink);
616
+ --skra-comp-chip-border-color: var(--skra-sys-color-neutral-border);
617
+ --skra-comp-chip-padding-block: var(--skra-sys-spacing-1);
618
+ --skra-comp-chip-padding-inline: var(--skra-sys-spacing-2);
619
+ --skra-comp-chip-motion-duration: var(--skra-sys-motion-duration-fast);
620
+ --skra-comp-chip-motion-easing: var(--skra-sys-motion-easing-standard);
621
+ --skra-comp-chip-focus-ring-color: var(--skra-sys-color-focus-ring);
622
+ --skra-comp-chip-icon-gap: var(--skra-sys-spacing-1);
623
+ --skra-comp-chip-remove-gap: var(--skra-sys-spacing-1);
624
+ --skra-comp-combobox-background: var(--skra-sys-color-surface);
625
+ --skra-comp-combobox-foreground: var(--skra-sys-color-on-surface);
626
+ --skra-comp-combobox-border-color: var(--skra-sys-color-border);
627
+ --skra-comp-combobox-padding-block: var(--skra-sys-spacing-2);
628
+ --skra-comp-combobox-padding-inline: var(--skra-sys-spacing-3);
629
+ --skra-comp-combobox-motion-duration: var(--skra-sys-motion-duration-fast);
630
+ --skra-comp-combobox-motion-easing: var(--skra-sys-motion-easing-standard);
631
+ --skra-comp-combobox-focus-ring-color: var(--skra-sys-color-focus-ring);
632
+ --skra-comp-combobox-background-disabled: var(--skra-sys-color-surface-disabled);
633
+ --skra-comp-combobox-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
634
+ --skra-comp-combobox-background-readonly: var(--skra-sys-color-surface-raised);
635
+ --skra-comp-combobox-border-color-validation-invalid: var(--skra-sys-color-danger-ink);
636
+ --skra-comp-combobox-gap: var(--skra-sys-spacing-2);
637
+ --skra-comp-combobox-arrow-color: var(--skra-sys-color-on-surface-subtle);
638
+ --skra-comp-combobox-panel-background: var(--skra-sys-color-surface);
639
+ --skra-comp-combobox-panel-foreground: var(--skra-sys-color-on-surface);
640
+ --skra-comp-combobox-panel-border-color: var(--skra-sys-color-border);
641
+ --skra-comp-combobox-panel-max-block-size: var(--skra-sys-size-container-sm);
642
+ --skra-comp-combobox-panel-padding-block: var(--skra-sys-spacing-1);
643
+ --skra-comp-combobox-panel-padding-inline: var(--skra-sys-spacing-1);
644
+ --skra-comp-combobox-panel-offset: var(--skra-sys-spacing-1);
645
+ --skra-comp-combobox-panel-viewport-padding: var(--skra-sys-spacing-2);
646
+ --skra-comp-combobox-loading-indicator-color: var(--skra-sys-color-on-surface);
647
+ --skra-comp-combobox-empty-foreground: var(--skra-sys-color-on-surface-subtle);
648
+ --skra-comp-combobox-status-padding-block: var(--skra-sys-spacing-2);
649
+ --skra-comp-combobox-status-padding-inline: var(--skra-sys-spacing-3);
650
+ --skra-comp-datepicker-background: var(--skra-sys-color-surface);
651
+ --skra-comp-datepicker-foreground: var(--skra-sys-color-on-surface);
652
+ --skra-comp-datepicker-border-color: var(--skra-sys-color-border);
653
+ --skra-comp-datepicker-padding-block: var(--skra-sys-spacing-2);
654
+ --skra-comp-datepicker-padding-inline: var(--skra-sys-spacing-3);
655
+ --skra-comp-datepicker-motion-duration: var(--skra-sys-motion-duration-fast);
656
+ --skra-comp-datepicker-motion-easing: var(--skra-sys-motion-easing-standard);
657
+ --skra-comp-datepicker-focus-ring-color: var(--skra-sys-color-focus-ring);
658
+ --skra-comp-datepicker-background-disabled: var(--skra-sys-color-surface-disabled);
659
+ --skra-comp-datepicker-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
660
+ --skra-comp-datepicker-background-readonly: var(--skra-sys-color-surface-raised);
661
+ --skra-comp-datepicker-border-color-validation-invalid: var(--skra-sys-color-danger-ink);
662
+ --skra-comp-datepicker-icon-color: var(--skra-sys-color-on-surface-subtle);
663
+ --skra-comp-datepicker-gap: var(--skra-sys-spacing-2);
664
+ --skra-comp-datepicker-panel-background: var(--skra-sys-color-surface);
665
+ --skra-comp-datepicker-panel-foreground: var(--skra-sys-color-on-surface);
666
+ --skra-comp-datepicker-panel-border-color: var(--skra-sys-color-border-subtle);
667
+ --skra-comp-datepicker-panel-padding: var(--skra-sys-spacing-3);
668
+ --skra-comp-datepicker-panel-offset: var(--skra-sys-spacing-1);
669
+ --skra-comp-datepicker-panel-viewport-padding: var(--skra-sys-spacing-2);
670
+ --skra-comp-datepicker-header-foreground: var(--skra-sys-color-on-surface);
671
+ --skra-comp-datepicker-nav-color: var(--skra-sys-color-on-surface-subtle);
672
+ --skra-comp-datepicker-nav-color-hover: var(--skra-sys-color-on-surface);
673
+ --skra-comp-datepicker-weekday-foreground: var(--skra-sys-color-on-surface-subtle);
674
+ --skra-comp-datepicker-day-foreground: var(--skra-sys-color-on-surface);
675
+ --skra-comp-datepicker-day-background-hover: var(--skra-sys-color-surface-hover);
676
+ --skra-comp-datepicker-day-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
677
+ --skra-comp-datepicker-day-background-selected: var(--skra-sys-color-primary-base);
678
+ --skra-comp-datepicker-day-foreground-selected: var(--skra-sys-color-primary-contrast);
679
+ --skra-comp-datepicker-day-today-indicator-color: var(--skra-sys-color-primary-ink);
680
+ --skra-comp-dialog-background: var(--skra-sys-color-surface);
681
+ --skra-comp-dialog-foreground: var(--skra-sys-color-on-surface);
682
+ --skra-comp-dialog-border-color: var(--skra-sys-color-border);
683
+ --skra-comp-dialog-padding-block: var(--skra-sys-spacing-5);
684
+ --skra-comp-dialog-padding-inline: var(--skra-sys-spacing-5);
685
+ --skra-comp-dialog-motion-duration: var(--skra-sys-motion-duration-normal);
686
+ --skra-comp-dialog-motion-easing: var(--skra-sys-motion-easing-emphasized);
687
+ --skra-comp-dialog-focus-ring-color: var(--skra-sys-color-focus-ring);
688
+ --skra-comp-dialog-backdrop: var(--skra-sys-color-scrim);
689
+ --skra-comp-dialog-size-sm-max-inline-size: var(--skra-sys-size-container-sm);
690
+ --skra-comp-dialog-size-md-max-inline-size: var(--skra-sys-size-container-md);
691
+ --skra-comp-dialog-size-lg-max-inline-size: var(--skra-sys-size-container-lg);
692
+ --skra-comp-field-checkbox-size: var(--skra-sys-spacing-4);
693
+ --skra-comp-field-checkbox-border-color: var(--skra-sys-color-border);
694
+ --skra-comp-field-checkbox-background: var(--skra-sys-color-surface);
695
+ --skra-comp-field-checkbox-checked-background: var(--skra-sys-color-primary-base);
696
+ --skra-comp-field-checkbox-checked-background-readonly: var(--skra-sys-color-neutral-base);
697
+ --skra-comp-field-checkbox-check-color: var(--skra-sys-color-primary-contrast);
698
+ --skra-comp-field-checkbox-gap: var(--skra-sys-spacing-2);
699
+ --skra-comp-field-checkbox-touch-target: var(--skra-sys-spacing-6);
700
+ --skra-comp-field-radio-size: var(--skra-sys-spacing-4);
701
+ --skra-comp-field-radio-border-color: var(--skra-sys-color-border);
702
+ --skra-comp-field-radio-background: var(--skra-sys-color-surface);
703
+ --skra-comp-field-radio-checked-background: var(--skra-sys-color-primary-base);
704
+ --skra-comp-field-radio-checked-background-readonly: var(--skra-sys-color-neutral-base);
705
+ --skra-comp-field-radio-dot-color: var(--skra-sys-color-primary-contrast);
706
+ --skra-comp-field-radio-dot-size: var(--skra-sys-spacing-2);
707
+ --skra-comp-field-radio-gap: var(--skra-sys-spacing-2);
708
+ --skra-comp-field-radio-touch-target: var(--skra-sys-spacing-6);
709
+ --skra-comp-field-switch-border-color: var(--skra-sys-color-border);
710
+ --skra-comp-field-switch-background: var(--skra-sys-color-border-subtle);
711
+ --skra-comp-field-switch-checked-background: var(--skra-sys-color-primary-base);
712
+ --skra-comp-field-switch-checked-background-readonly: var(--skra-sys-color-neutral-base);
713
+ --skra-comp-field-switch-thumb-color: var(--skra-sys-color-surface);
714
+ --skra-comp-field-switch-thumb-color-checked: var(--skra-sys-color-primary-contrast);
715
+ --skra-comp-field-switch-gap: var(--skra-sys-spacing-2);
716
+ --skra-comp-field-switch-touch-target: var(--skra-sys-spacing-6);
717
+ --skra-comp-field-group-gap: var(--skra-sys-spacing-3);
718
+ --skra-comp-field-group-legend-color: var(--skra-sys-color-on-surface);
719
+ --skra-comp-field-group-legend-spacing-block-end: var(--skra-sys-spacing-2);
720
+ --skra-comp-field-select-arrow-padding-inline-end: var(--skra-sys-spacing-6);
721
+ --skra-comp-field-select-option-foreground: var(--skra-sys-color-on-surface);
722
+ --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
723
+ --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
724
+ --skra-comp-field-background: var(--skra-sys-color-surface);
725
+ --skra-comp-field-foreground: var(--skra-sys-color-on-surface);
726
+ --skra-comp-field-border-color: var(--skra-sys-color-border);
727
+ --skra-comp-field-padding-block: var(--skra-sys-spacing-2);
728
+ --skra-comp-field-padding-inline: var(--skra-sys-spacing-4);
729
+ --skra-comp-field-motion-duration: var(--skra-sys-motion-duration-fast);
730
+ --skra-comp-field-motion-easing: var(--skra-sys-motion-easing-standard);
731
+ --skra-comp-field-focus-ring-color: var(--skra-sys-color-focus-ring);
732
+ --skra-comp-field-gap: var(--skra-sys-spacing-2);
733
+ --skra-comp-field-label-color: var(--skra-sys-color-on-surface);
734
+ --skra-comp-field-hint-color: var(--skra-sys-color-hint);
735
+ --skra-comp-field-error-color: var(--skra-sys-color-danger-ink);
736
+ --skra-comp-field-border-color-validation-invalid: var(--skra-sys-color-danger-ink);
737
+ --skra-comp-field-background-readonly: var(--skra-sys-color-surface-raised);
738
+ --skra-comp-field-border-color-readonly: var(--skra-sys-color-border-subtle);
739
+ --skra-comp-field-required-color: var(--skra-sys-color-danger-ink);
740
+ --skra-comp-kbd-background: var(--skra-sys-color-surface-raised);
741
+ --skra-comp-kbd-foreground: var(--skra-sys-color-on-surface);
742
+ --skra-comp-kbd-border-color: var(--skra-sys-color-border);
743
+ --skra-comp-kbd-padding-block: var(--skra-sys-spacing-1);
744
+ --skra-comp-kbd-padding-inline: var(--skra-sys-spacing-2);
745
+ --skra-comp-kbd-motion-duration: var(--skra-sys-motion-duration-fast);
746
+ --skra-comp-kbd-motion-easing: var(--skra-sys-motion-easing-standard);
747
+ --skra-comp-kbd-focus-ring-color: var(--skra-sys-color-focus-ring);
748
+ --skra-comp-kbd-font-family: var(--skra-sys-font-family-code);
749
+ --skra-comp-link-foreground: var(--skra-sys-color-link);
750
+ --skra-comp-link-foreground-hover: var(--skra-sys-color-link-hover);
751
+ --skra-comp-link-foreground-visited: var(--skra-sys-color-link-visited);
752
+ --skra-comp-link-focus-ring-color: var(--skra-sys-color-focus-ring);
753
+ --skra-comp-link-motion-duration: var(--skra-sys-motion-duration-fast);
754
+ --skra-comp-link-motion-easing: var(--skra-sys-motion-easing-standard);
755
+ --skra-comp-menu-background: var(--skra-sys-color-surface);
756
+ --skra-comp-menu-foreground: var(--skra-sys-color-on-surface);
757
+ --skra-comp-menu-border-color: var(--skra-sys-color-border);
758
+ --skra-comp-menu-padding-block: var(--skra-sys-spacing-1);
759
+ --skra-comp-menu-padding-inline: var(--skra-sys-spacing-1);
760
+ --skra-comp-menu-motion-duration: var(--skra-sys-motion-duration-fast);
761
+ --skra-comp-menu-motion-easing: var(--skra-sys-motion-easing-standard);
762
+ --skra-comp-menu-focus-ring-color: var(--skra-sys-color-focus-ring);
763
+ --skra-comp-menu-max-inline-size: var(--skra-sys-size-container-sm);
764
+ --skra-comp-menu-offset: var(--skra-sys-spacing-2);
765
+ --skra-comp-menu-viewport-padding: var(--skra-sys-spacing-2);
766
+ --skra-comp-menu-item-foreground: var(--skra-sys-color-on-surface);
767
+ --skra-comp-menu-item-background-hover: var(--skra-sys-color-surface-hover);
768
+ --skra-comp-menu-item-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
769
+ --skra-comp-menu-item-padding-block: var(--skra-sys-spacing-2);
770
+ --skra-comp-menu-item-padding-inline: var(--skra-sys-spacing-3);
771
+ --skra-comp-menu-item-gap: var(--skra-sys-spacing-2);
772
+ --skra-comp-popover-background: var(--skra-sys-color-surface);
773
+ --skra-comp-popover-foreground: var(--skra-sys-color-on-surface);
774
+ --skra-comp-popover-border-color: var(--skra-sys-color-border);
775
+ --skra-comp-popover-padding-block: var(--skra-sys-spacing-3);
776
+ --skra-comp-popover-padding-inline: var(--skra-sys-spacing-3);
777
+ --skra-comp-popover-motion-duration: var(--skra-sys-motion-duration-fast);
778
+ --skra-comp-popover-motion-easing: var(--skra-sys-motion-easing-standard);
779
+ --skra-comp-popover-focus-ring-color: var(--skra-sys-color-focus-ring);
780
+ --skra-comp-popover-max-inline-size: var(--skra-sys-size-container-sm);
781
+ --skra-comp-popover-offset: var(--skra-sys-spacing-2);
782
+ --skra-comp-popover-viewport-padding: var(--skra-sys-spacing-2);
783
+ --skra-comp-progress-background: var(--skra-sys-color-neutral-soft);
784
+ --skra-comp-progress-foreground: var(--skra-sys-color-on-surface);
785
+ --skra-comp-progress-border-color: var(--skra-sys-color-neutral-border);
786
+ --skra-comp-progress-motion-duration: var(--skra-sys-motion-duration-fast);
787
+ --skra-comp-progress-motion-easing: var(--skra-sys-motion-easing-standard);
788
+ --skra-comp-progress-focus-ring-color: var(--skra-sys-color-focus-ring);
789
+ --skra-comp-progress-fill-color: var(--skra-sys-color-primary-base);
790
+ --skra-comp-select-background: var(--skra-sys-color-surface);
791
+ --skra-comp-select-foreground: var(--skra-sys-color-on-surface);
792
+ --skra-comp-select-border-color: var(--skra-sys-color-border);
793
+ --skra-comp-select-padding-block: var(--skra-sys-spacing-2);
794
+ --skra-comp-select-padding-inline: var(--skra-sys-spacing-3);
795
+ --skra-comp-select-motion-duration: var(--skra-sys-motion-duration-fast);
796
+ --skra-comp-select-motion-easing: var(--skra-sys-motion-easing-standard);
797
+ --skra-comp-select-focus-ring-color: var(--skra-sys-color-focus-ring);
798
+ --skra-comp-select-background-disabled: var(--skra-sys-color-surface-disabled);
799
+ --skra-comp-select-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
800
+ --skra-comp-select-background-readonly: var(--skra-sys-color-surface-raised);
801
+ --skra-comp-select-border-color-validation-invalid: var(--skra-sys-color-danger-ink);
802
+ --skra-comp-select-gap: var(--skra-sys-spacing-2);
803
+ --skra-comp-select-arrow-color: var(--skra-sys-color-on-surface-subtle);
804
+ --skra-comp-select-panel-background: var(--skra-sys-color-surface);
805
+ --skra-comp-select-panel-foreground: var(--skra-sys-color-on-surface);
806
+ --skra-comp-select-panel-border-color: var(--skra-sys-color-border);
807
+ --skra-comp-select-panel-max-block-size: var(--skra-sys-size-container-sm);
808
+ --skra-comp-select-panel-padding-block: var(--skra-sys-spacing-1);
809
+ --skra-comp-select-panel-padding-inline: var(--skra-sys-spacing-1);
810
+ --skra-comp-select-panel-offset: var(--skra-sys-spacing-1);
811
+ --skra-comp-select-panel-viewport-padding: var(--skra-sys-spacing-2);
812
+ --skra-comp-select-option-foreground: var(--skra-sys-color-on-surface);
813
+ --skra-comp-select-option-background-hover: var(--skra-sys-color-surface-hover);
814
+ --skra-comp-select-option-background-active: var(--skra-sys-color-surface-hover);
815
+ --skra-comp-select-option-background-selected: var(--skra-sys-color-primary-soft);
816
+ --skra-comp-select-option-foreground-selected: var(--skra-sys-color-on-surface);
817
+ --skra-comp-select-option-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
818
+ --skra-comp-select-option-detail-foreground: var(--skra-sys-color-on-surface-subtle);
819
+ --skra-comp-select-option-padding-block: var(--skra-sys-spacing-2);
820
+ --skra-comp-select-option-padding-inline: var(--skra-sys-spacing-3);
821
+ --skra-comp-select-option-gap: var(--skra-sys-spacing-2);
822
+ --skra-comp-select-indicator-color: var(--skra-sys-color-primary-ink);
823
+ --skra-comp-select-option-checkbox-border-color: var(--skra-sys-color-border);
824
+ --skra-comp-select-option-checkbox-background-selected: var(--skra-sys-color-primary-base);
825
+ --skra-comp-select-option-checkbox-check-color: var(--skra-sys-color-primary-contrast);
826
+ --skra-comp-skeleton-background: var(--skra-sys-color-surface-muted);
827
+ --skra-comp-skeleton-foreground: var(--skra-sys-color-on-surface);
828
+ --skra-comp-skeleton-border-color: var(--skra-sys-color-neutral-border);
829
+ --skra-comp-skeleton-motion-duration: var(--skra-sys-motion-duration-fast);
830
+ --skra-comp-skeleton-motion-easing: var(--skra-sys-motion-easing-standard);
831
+ --skra-comp-skeleton-focus-ring-color: var(--skra-sys-color-focus-ring);
832
+ --skra-comp-star-rating-star-color-empty: var(--skra-sys-color-border);
833
+ --skra-comp-star-rating-star-color-filled: var(--skra-sys-color-primary-base);
834
+ --skra-comp-star-rating-focus-ring-color: var(--skra-sys-color-focus-ring);
835
+ --skra-comp-star-rating-motion-duration: var(--skra-sys-motion-duration-fast);
836
+ --skra-comp-star-rating-motion-easing: var(--skra-sys-motion-easing-standard);
837
+ --skra-comp-status-dot-background: var(--skra-sys-color-neutral-base);
838
+ --skra-comp-status-dot-foreground: var(--skra-sys-color-neutral-contrast);
839
+ --skra-comp-status-dot-border-color: var(--skra-sys-color-surface);
840
+ --skra-comp-status-dot-motion-duration: var(--skra-sys-motion-duration-fast);
841
+ --skra-comp-status-dot-motion-easing: var(--skra-sys-motion-easing-standard);
842
+ --skra-comp-status-dot-focus-ring-color: var(--skra-sys-color-focus-ring);
843
+ --skra-comp-status-dot-size-sm: var(--skra-sys-size-status-dot-sm);
844
+ --skra-comp-status-dot-size-md: var(--skra-sys-size-status-dot-md);
845
+ --skra-comp-status-dot-size-lg: var(--skra-sys-size-status-dot-lg);
846
+ --skra-comp-tabs-foreground: var(--skra-sys-color-on-surface-subtle);
847
+ --skra-comp-tabs-padding-block: var(--skra-sys-spacing-2);
848
+ --skra-comp-tabs-padding-inline: var(--skra-sys-spacing-4);
849
+ --skra-comp-tabs-motion-duration: var(--skra-sys-motion-duration-fast);
850
+ --skra-comp-tabs-motion-easing: var(--skra-sys-motion-easing-standard);
851
+ --skra-comp-tabs-focus-ring-color: var(--skra-sys-color-focus-ring);
852
+ --skra-comp-tabs-foreground-selected: var(--skra-sys-color-on-surface-strong);
853
+ --skra-comp-tabs-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
854
+ --skra-comp-tabs-background-hover: var(--skra-sys-color-surface-hover);
855
+ --skra-comp-tabs-indicator-color: var(--skra-sys-color-primary-base);
856
+ --skra-comp-tabs-tablist-border-color: var(--skra-sys-color-border);
857
+ --skra-comp-tabs-gap: var(--skra-sys-spacing-1);
858
+ --skra-comp-tabs-panel-padding-block: var(--skra-sys-spacing-4);
859
+ --skra-comp-tabs-panel-padding-inline: var(--skra-sys-spacing-1);
860
+ --skra-comp-toast-background: var(--skra-sys-color-neutral-soft);
861
+ --skra-comp-toast-foreground: var(--skra-sys-color-neutral-ink);
862
+ --skra-comp-toast-border-color: var(--skra-sys-color-neutral-border);
863
+ --skra-comp-toast-padding-block: var(--skra-sys-spacing-3);
864
+ --skra-comp-toast-padding-inline: var(--skra-sys-spacing-4);
865
+ --skra-comp-toast-motion-duration: var(--skra-sys-motion-duration-normal);
866
+ --skra-comp-toast-motion-easing: var(--skra-sys-motion-easing-emphasized);
867
+ --skra-comp-toast-focus-ring-color: var(--skra-sys-color-focus-ring);
868
+ --skra-comp-toast-icon-gap: var(--skra-sys-spacing-3);
869
+ --skra-comp-toast-region-inset-block: var(--skra-sys-spacing-5);
870
+ --skra-comp-toast-region-inset-inline: var(--skra-sys-spacing-5);
871
+ --skra-comp-toast-region-gap: var(--skra-sys-spacing-3);
872
+ --skra-comp-toast-region-max-inline-size: var(--skra-sys-size-container-sm);
873
+ --skra-comp-tooltip-background: var(--skra-sys-color-inverse-surface);
874
+ --skra-comp-tooltip-foreground: var(--skra-sys-color-on-inverse-surface);
875
+ --skra-comp-tooltip-padding-block: var(--skra-sys-spacing-1);
876
+ --skra-comp-tooltip-padding-inline: var(--skra-sys-spacing-2);
877
+ --skra-comp-tooltip-motion-duration: var(--skra-sys-motion-duration-fast);
878
+ --skra-comp-tooltip-motion-easing: var(--skra-sys-motion-easing-standard);
879
+ --skra-comp-tooltip-focus-ring-color: var(--skra-sys-color-focus-ring);
880
+ --skra-comp-tooltip-max-inline-size: var(--skra-sys-size-tooltip-max);
881
+ --skra-comp-tooltip-offset: var(--skra-sys-spacing-2);
882
+ --skra-comp-tooltip-viewport-padding: var(--skra-sys-spacing-2);
883
+ --skra-comp-tooltip-show-delay: var(--skra-sys-motion-delay-long);
884
+ --skra-comp-tooltip-hide-delay: var(--skra-sys-motion-delay-short);
885
+ --skra-comp-typography-display-large-font-family: var(--skra-sys-typography-role-display-large-font-family);
886
+ --skra-comp-typography-display-large-font-size: var(--skra-sys-typography-role-display-large-font-size);
887
+ --skra-comp-typography-display-large-font-weight: var(--skra-sys-typography-role-display-large-font-weight);
888
+ --skra-comp-typography-display-large-line-height: var(--skra-sys-typography-role-display-large-line-height);
889
+ --skra-comp-typography-display-large-foreground: var(--skra-sys-color-on-surface);
890
+ --skra-comp-typography-display-medium-font-family: var(--skra-sys-typography-role-display-medium-font-family);
891
+ --skra-comp-typography-display-medium-font-size: var(--skra-sys-typography-role-display-medium-font-size);
892
+ --skra-comp-typography-display-medium-font-weight: var(--skra-sys-typography-role-display-medium-font-weight);
893
+ --skra-comp-typography-display-medium-line-height: var(--skra-sys-typography-role-display-medium-line-height);
894
+ --skra-comp-typography-display-medium-foreground: var(--skra-sys-color-on-surface);
895
+ --skra-comp-typography-display-small-font-family: var(--skra-sys-typography-role-display-small-font-family);
896
+ --skra-comp-typography-display-small-font-size: var(--skra-sys-typography-role-display-small-font-size);
897
+ --skra-comp-typography-display-small-font-weight: var(--skra-sys-typography-role-display-small-font-weight);
898
+ --skra-comp-typography-display-small-line-height: var(--skra-sys-typography-role-display-small-line-height);
899
+ --skra-comp-typography-display-small-foreground: var(--skra-sys-color-on-surface);
900
+ --skra-comp-typography-headline-large-font-family: var(--skra-sys-typography-role-headline-large-font-family);
901
+ --skra-comp-typography-headline-large-font-size: var(--skra-sys-typography-role-headline-large-font-size);
902
+ --skra-comp-typography-headline-large-font-weight: var(--skra-sys-typography-role-headline-large-font-weight);
903
+ --skra-comp-typography-headline-large-line-height: var(--skra-sys-typography-role-headline-large-line-height);
904
+ --skra-comp-typography-headline-large-foreground: var(--skra-sys-color-on-surface);
905
+ --skra-comp-typography-headline-medium-font-family: var(--skra-sys-typography-role-headline-medium-font-family);
906
+ --skra-comp-typography-headline-medium-font-size: var(--skra-sys-typography-role-headline-medium-font-size);
907
+ --skra-comp-typography-headline-medium-font-weight: var(--skra-sys-typography-role-headline-medium-font-weight);
908
+ --skra-comp-typography-headline-medium-line-height: var(--skra-sys-typography-role-headline-medium-line-height);
909
+ --skra-comp-typography-headline-medium-foreground: var(--skra-sys-color-on-surface);
910
+ --skra-comp-typography-headline-small-font-family: var(--skra-sys-typography-role-headline-small-font-family);
911
+ --skra-comp-typography-headline-small-font-size: var(--skra-sys-typography-role-headline-small-font-size);
912
+ --skra-comp-typography-headline-small-font-weight: var(--skra-sys-typography-role-headline-small-font-weight);
913
+ --skra-comp-typography-headline-small-line-height: var(--skra-sys-typography-role-headline-small-line-height);
914
+ --skra-comp-typography-headline-small-foreground: var(--skra-sys-color-on-surface);
915
+ --skra-comp-typography-title-large-font-family: var(--skra-sys-typography-role-title-large-font-family);
916
+ --skra-comp-typography-title-large-font-size: var(--skra-sys-typography-role-title-large-font-size);
917
+ --skra-comp-typography-title-large-font-weight: var(--skra-sys-typography-role-title-large-font-weight);
918
+ --skra-comp-typography-title-large-line-height: var(--skra-sys-typography-role-title-large-line-height);
919
+ --skra-comp-typography-title-large-foreground: var(--skra-sys-color-on-surface);
920
+ --skra-comp-typography-title-medium-font-family: var(--skra-sys-typography-role-title-medium-font-family);
921
+ --skra-comp-typography-title-medium-font-size: var(--skra-sys-typography-role-title-medium-font-size);
922
+ --skra-comp-typography-title-medium-font-weight: var(--skra-sys-typography-role-title-medium-font-weight);
923
+ --skra-comp-typography-title-medium-line-height: var(--skra-sys-typography-role-title-medium-line-height);
924
+ --skra-comp-typography-title-medium-foreground: var(--skra-sys-color-on-surface);
925
+ --skra-comp-typography-title-small-font-family: var(--skra-sys-typography-role-title-small-font-family);
926
+ --skra-comp-typography-title-small-font-size: var(--skra-sys-typography-role-title-small-font-size);
927
+ --skra-comp-typography-title-small-font-weight: var(--skra-sys-typography-role-title-small-font-weight);
928
+ --skra-comp-typography-title-small-line-height: var(--skra-sys-typography-role-title-small-line-height);
929
+ --skra-comp-typography-title-small-foreground: var(--skra-sys-color-on-surface);
930
+ --skra-comp-typography-body-large-font-family: var(--skra-sys-typography-role-body-large-font-family);
931
+ --skra-comp-typography-body-large-font-size: var(--skra-sys-typography-role-body-large-font-size);
932
+ --skra-comp-typography-body-large-font-weight: var(--skra-sys-typography-role-body-large-font-weight);
933
+ --skra-comp-typography-body-large-line-height: var(--skra-sys-typography-role-body-large-line-height);
934
+ --skra-comp-typography-body-large-foreground: var(--skra-sys-color-on-surface);
935
+ --skra-comp-typography-body-medium-font-family: var(--skra-sys-typography-role-body-medium-font-family);
936
+ --skra-comp-typography-body-medium-font-size: var(--skra-sys-typography-role-body-medium-font-size);
937
+ --skra-comp-typography-body-medium-font-weight: var(--skra-sys-typography-role-body-medium-font-weight);
938
+ --skra-comp-typography-body-medium-line-height: var(--skra-sys-typography-role-body-medium-line-height);
939
+ --skra-comp-typography-body-medium-foreground: var(--skra-sys-color-on-surface);
940
+ --skra-comp-typography-body-small-font-family: var(--skra-sys-typography-role-body-small-font-family);
941
+ --skra-comp-typography-body-small-font-size: var(--skra-sys-typography-role-body-small-font-size);
942
+ --skra-comp-typography-body-small-font-weight: var(--skra-sys-typography-role-body-small-font-weight);
943
+ --skra-comp-typography-body-small-line-height: var(--skra-sys-typography-role-body-small-line-height);
944
+ --skra-comp-typography-body-small-foreground: var(--skra-sys-color-on-surface-subtle);
945
+ --skra-comp-typography-label-large-font-family: var(--skra-sys-typography-role-label-large-font-family);
946
+ --skra-comp-typography-label-large-font-size: var(--skra-sys-typography-role-label-large-font-size);
947
+ --skra-comp-typography-label-large-font-weight: var(--skra-sys-typography-role-label-large-font-weight);
948
+ --skra-comp-typography-label-large-line-height: var(--skra-sys-typography-role-label-large-line-height);
949
+ --skra-comp-typography-label-large-foreground: var(--skra-sys-color-on-surface);
950
+ --skra-comp-typography-label-medium-font-family: var(--skra-sys-typography-role-label-medium-font-family);
951
+ --skra-comp-typography-label-medium-font-size: var(--skra-sys-typography-role-label-medium-font-size);
952
+ --skra-comp-typography-label-medium-font-weight: var(--skra-sys-typography-role-label-medium-font-weight);
953
+ --skra-comp-typography-label-medium-line-height: var(--skra-sys-typography-role-label-medium-line-height);
954
+ --skra-comp-typography-label-medium-foreground: var(--skra-sys-color-on-surface);
955
+ --skra-comp-typography-label-small-font-family: var(--skra-sys-typography-role-label-small-font-family);
956
+ --skra-comp-typography-label-small-font-size: var(--skra-sys-typography-role-label-small-font-size);
957
+ --skra-comp-typography-label-small-font-weight: var(--skra-sys-typography-role-label-small-font-weight);
958
+ --skra-comp-typography-label-small-line-height: var(--skra-sys-typography-role-label-small-line-height);
959
+ --skra-comp-typography-label-small-foreground: var(--skra-sys-color-on-surface-subtle);
960
+ --skra-comp-typography-foreground-error: var(--skra-sys-color-danger-ink);
961
+ --skra-comp-typography-foreground-warning: var(--skra-sys-color-warning-ink);
962
+ --skra-comp-typography-foreground-success: var(--skra-sys-color-success-ink);
963
+ --skra-comp-box-padding-sm: var(--skra-sys-spacing-1);
964
+ --skra-comp-box-padding-md: var(--skra-sys-spacing-2);
965
+ --skra-comp-box-padding-lg: var(--skra-sys-spacing-4);
966
+ --skra-comp-grid-gap-sm: var(--skra-sys-spacing-1);
967
+ --skra-comp-grid-gap-md: var(--skra-sys-spacing-2);
968
+ --skra-comp-grid-gap-lg: var(--skra-sys-spacing-4);
969
+ --skra-comp-grid-min-sm: var(--skra-sys-size-grid-track-sm);
970
+ --skra-comp-grid-min-md: var(--skra-sys-size-grid-track-md);
971
+ --skra-comp-grid-min-lg: var(--skra-sys-size-grid-track-lg);
972
+ --skra-comp-icon-size-default: var(--skra-sys-size-icon-md);
973
+ --skra-comp-icon-size-sm: var(--skra-sys-size-icon-sm);
974
+ --skra-comp-icon-size-md: var(--skra-sys-size-icon-md);
975
+ --skra-comp-icon-size-lg: var(--skra-sys-size-icon-lg);
976
+ --skra-comp-stack-gap-sm: var(--skra-sys-spacing-1);
977
+ --skra-comp-stack-gap-md: var(--skra-sys-spacing-2);
978
+ --skra-comp-stack-gap-lg: var(--skra-sys-spacing-4);
979
+ }
980
+
981
+ /* O-24 — build-baked form-control glyphs (token-resolved colour per scheme) — form-glyph-synth.mjs */
982
+ :where(:root, :host) {
983
+ --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%280%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");
984
+ --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");
985
+ }