@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/_theme.scoped.scss ADDED
@@ -0,0 +1,1289 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ [data-skra-skin="brutal"] {
6
+ --skra-sys-color-neutral-base-hover: oklch(37.0% 0 0);
7
+ --skra-sys-color-neutral-base-active: oklch(43.0% 0 0);
8
+ --skra-sys-color-neutral-contrast-hover: oklch(88.0% 0 0);
9
+ --skra-sys-color-neutral-contrast-active: oklch(82.0% 0 0);
10
+ --skra-sys-color-neutral-border-hover: oklch(12.0% 0 0);
11
+ --skra-sys-color-neutral-border-active: oklch(18.0% 0 0);
12
+ --skra-sys-color-neutral-soft-hover: oklch(83.0% 0 0);
13
+ --skra-sys-color-neutral-soft-active: oklch(77.0% 0 0);
14
+ --skra-sys-color-neutral-strong-hover: oklch(12.0% 0 0);
15
+ --skra-sys-color-neutral-strong-active: oklch(18.0% 0 0);
16
+ --skra-sys-color-neutral-ink-hover: oklch(37.0% 0 0);
17
+ --skra-sys-color-neutral-ink-active: oklch(43.0% 0 0);
18
+ --skra-sys-color-primary-base-hover: oklch(73.0% 0.17 98);
19
+ --skra-sys-color-primary-base-active: oklch(67.0% 0.17 98);
20
+ --skra-sys-color-primary-contrast-hover: oklch(12.0% 0 0);
21
+ --skra-sys-color-primary-contrast-active: oklch(18.0% 0 0);
22
+ --skra-sys-color-primary-border-hover: oklch(12.0% 0 0);
23
+ --skra-sys-color-primary-border-active: oklch(18.0% 0 0);
24
+ --skra-sys-color-primary-soft-hover: oklch(84.0% 0.06 100);
25
+ --skra-sys-color-primary-soft-active: oklch(78.0% 0.06 100);
26
+ --skra-sys-color-primary-strong-hover: oklch(62.0% 0.11 98);
27
+ --skra-sys-color-primary-strong-active: oklch(68.0% 0.11 98);
28
+ --skra-sys-color-primary-ink-hover: oklch(62.0% 0.11 98);
29
+ --skra-sys-color-primary-ink-active: oklch(68.0% 0.11 98);
30
+ --skra-sys-color-secondary-base-hover: oklch(57.0% 0.04 250);
31
+ --skra-sys-color-secondary-base-active: oklch(63.0% 0.04 250);
32
+ --skra-sys-color-secondary-contrast-hover: oklch(88.0% 0 0);
33
+ --skra-sys-color-secondary-contrast-active: oklch(82.0% 0 0);
34
+ --skra-sys-color-secondary-border-hover: oklch(12.0% 0 0);
35
+ --skra-sys-color-secondary-border-active: oklch(18.0% 0 0);
36
+ --skra-sys-color-secondary-soft-hover: oklch(82.0% 0.02 250);
37
+ --skra-sys-color-secondary-soft-active: oklch(76.0% 0.02 250);
38
+ --skra-sys-color-secondary-strong-hover: oklch(42.0% 0.04 250);
39
+ --skra-sys-color-secondary-strong-active: oklch(48.0% 0.04 250);
40
+ --skra-sys-color-secondary-ink-hover: oklch(57.0% 0.04 250);
41
+ --skra-sys-color-secondary-ink-active: oklch(63.0% 0.04 250);
42
+ --skra-sys-color-info-base-hover: oklch(62.0% 0.12 220);
43
+ --skra-sys-color-info-base-active: oklch(68.0% 0.12 220);
44
+ --skra-sys-color-info-contrast-hover: oklch(88.0% 0 0);
45
+ --skra-sys-color-info-contrast-active: oklch(82.0% 0 0);
46
+ --skra-sys-color-info-border-hover: oklch(12.0% 0 0);
47
+ --skra-sys-color-info-border-active: oklch(18.0% 0 0);
48
+ --skra-sys-color-info-soft-hover: oklch(82.0% 0.04 220);
49
+ --skra-sys-color-info-soft-active: oklch(76.0% 0.04 220);
50
+ --skra-sys-color-info-strong-hover: oklch(47.0% 0.12 220);
51
+ --skra-sys-color-info-strong-active: oklch(53.0% 0.12 220);
52
+ --skra-sys-color-info-ink-hover: oklch(62.0% 0.12 220);
53
+ --skra-sys-color-info-ink-active: oklch(68.0% 0.12 220);
54
+ --skra-sys-color-success-base-hover: oklch(60.0% 0.15 145);
55
+ --skra-sys-color-success-base-active: oklch(66.0% 0.15 145);
56
+ --skra-sys-color-success-contrast-hover: oklch(88.0% 0 0);
57
+ --skra-sys-color-success-contrast-active: oklch(82.0% 0 0);
58
+ --skra-sys-color-success-border-hover: oklch(12.0% 0 0);
59
+ --skra-sys-color-success-border-active: oklch(18.0% 0 0);
60
+ --skra-sys-color-success-soft-hover: oklch(82.0% 0.05 145);
61
+ --skra-sys-color-success-soft-active: oklch(76.0% 0.05 145);
62
+ --skra-sys-color-success-strong-hover: oklch(44.0% 0.13 145);
63
+ --skra-sys-color-success-strong-active: oklch(50.0% 0.13 145);
64
+ --skra-sys-color-success-ink-hover: oklch(60.0% 0.15 145);
65
+ --skra-sys-color-success-ink-active: oklch(66.0% 0.15 145);
66
+ --skra-sys-color-warning-base-hover: oklch(58.0% 0.15 80);
67
+ --skra-sys-color-warning-base-active: oklch(52.0% 0.15 80);
68
+ --skra-sys-color-warning-contrast-hover: oklch(30.0% 0.05 80);
69
+ --skra-sys-color-warning-contrast-active: oklch(36.0% 0.05 80);
70
+ --skra-sys-color-warning-border-hover: oklch(12.0% 0 0);
71
+ --skra-sys-color-warning-border-active: oklch(18.0% 0 0);
72
+ --skra-sys-color-warning-soft-hover: oklch(83.0% 0.05 80);
73
+ --skra-sys-color-warning-soft-active: oklch(77.0% 0.05 80);
74
+ --skra-sys-color-warning-strong-hover: oklch(50.0% 0.12 80);
75
+ --skra-sys-color-warning-strong-active: oklch(56.0% 0.12 80);
76
+ --skra-sys-color-warning-ink-hover: oklch(50.0% 0.12 80);
77
+ --skra-sys-color-warning-ink-active: oklch(56.0% 0.12 80);
78
+ --skra-sys-color-danger-base-hover: oklch(60.0% 0.2 25);
79
+ --skra-sys-color-danger-base-active: oklch(66.0% 0.2 25);
80
+ --skra-sys-color-danger-contrast-hover: oklch(88.0% 0 0);
81
+ --skra-sys-color-danger-contrast-active: oklch(82.0% 0 0);
82
+ --skra-sys-color-danger-border-hover: oklch(12.0% 0 0);
83
+ --skra-sys-color-danger-border-active: oklch(18.0% 0 0);
84
+ --skra-sys-color-danger-soft-hover: oklch(82.0% 0.04 25);
85
+ --skra-sys-color-danger-soft-active: oklch(76.0% 0.04 25);
86
+ --skra-sys-color-danger-strong-hover: oklch(44.0% 0.16 25);
87
+ --skra-sys-color-danger-strong-active: oklch(50.0% 0.16 25);
88
+ --skra-sys-color-danger-ink-hover: oklch(60.0% 0.2 25);
89
+ --skra-sys-color-danger-ink-active: oklch(66.0% 0.2 25);
90
+ --skra-sys-color-surface-active: oklch(79.0% 0.015 95);
91
+ --skra-sys-color-surface-raised-hover: oklch(81.0% 0.025 95);
92
+ --skra-sys-color-surface-raised-active: oklch(75.0% 0.025 95);
93
+ --skra-sys-color-surface-muted-hover: oklch(74.0% 0 0);
94
+ --skra-sys-color-surface-muted-active: oklch(68.0% 0 0);
95
+ --skra-sys-color-on-surface-hover: oklch(12.0% 0 0);
96
+ --skra-sys-color-on-surface-active: oklch(18.0% 0 0);
97
+ --skra-sys-color-on-surface-strong-hover: oklch(12.0% 0 0);
98
+ --skra-sys-color-on-surface-strong-active: oklch(18.0% 0 0);
99
+ --skra-sys-color-on-surface-subtle-hover: oklch(47.0% 0 0);
100
+ --skra-sys-color-on-surface-subtle-active: oklch(53.0% 0 0);
101
+ --skra-sys-color-inverse-surface-hover: oklch(12.0% 0 0);
102
+ --skra-sys-color-inverse-surface-active: oklch(18.0% 0 0);
103
+ --skra-sys-color-on-inverse-surface-hover: oklch(88.0% 0 0);
104
+ --skra-sys-color-on-inverse-surface-active: oklch(82.0% 0 0);
105
+ --skra-sys-color-border-hover: oklch(12.0% 0 0);
106
+ --skra-sys-color-border-active: oklch(18.0% 0 0);
107
+ --skra-sys-color-border-subtle-hover: oklch(37.0% 0 0);
108
+ --skra-sys-color-border-subtle-active: oklch(43.0% 0 0);
109
+ --skra-sys-color-hint-hover: oklch(47.0% 0 0);
110
+ --skra-sys-color-hint-active: oklch(53.0% 0 0);
111
+ --skra-sys-color-focus-ring-hover: oklch(57.0% 0.18 295);
112
+ --skra-sys-color-focus-ring-active: oklch(63.0% 0.18 295);
113
+ --skra-sys-color-link-active: oklch(18.0% 0 0);
114
+ --skra-sys-color-shadow-ink-hover: oklch(12.0% 0 0);
115
+ --skra-sys-color-shadow-ink-active: oklch(18.0% 0 0);
116
+ --skra-sys-icon-size-sm: 1em;
117
+ --skra-sys-icon-size-md: 1.25em;
118
+ --skra-sys-icon-size-lg: 1.5em;
119
+ --skra-sys-radius-none: 0;
120
+ --skra-sys-radius-sm: 0;
121
+ --skra-sys-radius-md: 0;
122
+ --skra-sys-radius-lg: 0;
123
+ --skra-sys-radius-full: 0;
124
+ --skra-sys-shadow-none: none;
125
+ --skra-sys-shadow-sm: 2px 2px 0 var(--skra-sys-color-shadow-ink);
126
+ --skra-sys-shadow-md: 4px 4px 0 var(--skra-sys-color-shadow-ink);
127
+ --skra-sys-shadow-lg: 6px 6px 0 var(--skra-sys-color-shadow-ink);
128
+ --skra-sys-shadow-xl: 10px 10px 0 var(--skra-sys-color-shadow-ink);
129
+ --skra-sys-size-interactive-sm: 1.75rem;
130
+ --skra-sys-size-interactive-md: 2.25rem;
131
+ --skra-sys-size-interactive-lg: 2.75rem;
132
+ --skra-sys-typography-role-display-large-letter-spacing: 0;
133
+ --skra-sys-typography-role-display-medium-letter-spacing: 0;
134
+ --skra-sys-typography-role-display-small-letter-spacing: 0;
135
+ --skra-sys-typography-role-headline-large-letter-spacing: 0;
136
+ --skra-sys-typography-role-headline-medium-letter-spacing: 0;
137
+ --skra-sys-typography-role-headline-small-letter-spacing: 0;
138
+ --skra-sys-typography-role-title-large-letter-spacing: 0;
139
+ --skra-sys-typography-role-title-medium-letter-spacing: 0;
140
+ --skra-sys-typography-role-title-small-letter-spacing: 0;
141
+ --skra-sys-typography-role-body-large-letter-spacing: 0;
142
+ --skra-sys-typography-role-body-medium-letter-spacing: 0;
143
+ --skra-sys-typography-role-body-small-letter-spacing: 0;
144
+ --skra-sys-typography-role-label-large-letter-spacing: 0.05em;
145
+ --skra-sys-typography-role-label-medium-letter-spacing: 0.05em;
146
+ --skra-sys-typography-role-label-small-letter-spacing: 0.05em;
147
+ --skra-comp-accordion-foreground-hover: oklch(12.0% 0 0);
148
+ --skra-comp-accordion-foreground-active: oklch(18.0% 0 0);
149
+ --skra-comp-accordion-focus-ring-color-hover: oklch(57.0% 0.18 295);
150
+ --skra-comp-accordion-focus-ring-color-active: oklch(63.0% 0.18 295);
151
+ --skra-comp-accordion-header-foreground-expanded-hover: oklch(12.0% 0 0);
152
+ --skra-comp-accordion-header-foreground-expanded-active: oklch(18.0% 0 0);
153
+ --skra-comp-accordion-indicator-color-hover: oklch(12.0% 0 0);
154
+ --skra-comp-accordion-indicator-color-active: oklch(18.0% 0 0);
155
+ --skra-comp-accordion-root-background-hover: oklch(85.0% 0.015 95);
156
+ --skra-comp-accordion-root-background-active: oklch(79.0% 0.015 95);
157
+ --skra-comp-accordion-root-border-color-hover: oklch(12.0% 0 0);
158
+ --skra-comp-accordion-root-border-color-active: oklch(18.0% 0 0);
159
+ --skra-comp-accordion-item-divider-color-hover: oklch(12.0% 0 0);
160
+ --skra-comp-accordion-item-divider-color-active: oklch(18.0% 0 0);
161
+ --skra-comp-accordion-panel-foreground-hover: oklch(47.0% 0 0);
162
+ --skra-comp-accordion-panel-foreground-active: oklch(53.0% 0 0);
163
+ --skra-comp-accordion-background: rgba(0, 0, 0, 0);
164
+ --skra-comp-accordion-border-color: rgba(0, 0, 0, 0);
165
+ --skra-comp-accordion-border-width: 0;
166
+ --skra-comp-accordion-border-style: solid;
167
+ --skra-comp-accordion-shadow: none;
168
+ --skra-comp-accordion-focus-ring-width: 0.1875rem;
169
+ --skra-comp-accordion-icon-size: 1em;
170
+ --skra-comp-accordion-header-typography-role: label-large;
171
+ --skra-comp-accordion-indicator-size: 0.875rem;
172
+ --skra-comp-accordion-root-border-width: 0.1875rem;
173
+ --skra-comp-accordion-item-divider-width: 0.1875rem;
174
+ --skra-comp-accordion-item-background-expanded: rgba(0, 0, 0, 0);
175
+ --skra-comp-alert-background-hover: oklch(83.0% 0 0);
176
+ --skra-comp-alert-background-active: oklch(77.0% 0 0);
177
+ --skra-comp-alert-foreground-hover: oklch(37.0% 0 0);
178
+ --skra-comp-alert-foreground-active: oklch(43.0% 0 0);
179
+ --skra-comp-alert-border-color-hover: oklch(12.0% 0 0);
180
+ --skra-comp-alert-border-color-active: oklch(18.0% 0 0);
181
+ --skra-comp-alert-focus-ring-color-hover: oklch(57.0% 0.18 295);
182
+ --skra-comp-alert-focus-ring-color-active: oklch(63.0% 0.18 295);
183
+ --skra-comp-alert-border-width: 0.1875rem;
184
+ --skra-comp-alert-border-style: solid;
185
+ --skra-comp-alert-focus-ring-width: 0.1875rem;
186
+ --skra-comp-alert-typography-role: body-medium;
187
+ --skra-comp-alert-icon-size: 1em;
188
+ --skra-comp-alert-title-typography-role: label-large;
189
+ --skra-comp-avatar-background-hover: oklch(83.0% 0 0);
190
+ --skra-comp-avatar-background-active: oklch(77.0% 0 0);
191
+ --skra-comp-avatar-foreground-hover: oklch(12.0% 0 0);
192
+ --skra-comp-avatar-foreground-active: oklch(18.0% 0 0);
193
+ --skra-comp-avatar-border-color-hover: oklch(12.0% 0 0);
194
+ --skra-comp-avatar-border-color-active: oklch(18.0% 0 0);
195
+ --skra-comp-avatar-focus-ring-color-hover: oklch(57.0% 0.18 295);
196
+ --skra-comp-avatar-focus-ring-color-active: oklch(63.0% 0.18 295);
197
+ --skra-comp-avatar-border-width: 0;
198
+ --skra-comp-avatar-border-style: solid;
199
+ --skra-comp-avatar-padding-block: 0;
200
+ --skra-comp-avatar-padding-inline: 0;
201
+ --skra-comp-avatar-shadow: none;
202
+ --skra-comp-avatar-focus-ring-width: 0.125rem;
203
+ --skra-comp-avatar-font-size-sm: 0.75rem;
204
+ --skra-comp-avatar-font-size-md: 0.9375rem;
205
+ --skra-comp-avatar-font-size-lg: 1.125rem;
206
+ --skra-comp-avatar-typography-role: label-medium;
207
+ --skra-comp-avatar-icon-size: 1em;
208
+ --skra-comp-badge-background-hover: oklch(83.0% 0 0);
209
+ --skra-comp-badge-background-active: oklch(77.0% 0 0);
210
+ --skra-comp-badge-foreground-hover: oklch(37.0% 0 0);
211
+ --skra-comp-badge-foreground-active: oklch(43.0% 0 0);
212
+ --skra-comp-badge-border-color-hover: oklch(12.0% 0 0);
213
+ --skra-comp-badge-border-color-active: oklch(18.0% 0 0);
214
+ --skra-comp-badge-focus-ring-color-hover: oklch(57.0% 0.18 295);
215
+ --skra-comp-badge-focus-ring-color-active: oklch(63.0% 0.18 295);
216
+ --skra-comp-badge-border-width: 0.1875rem;
217
+ --skra-comp-badge-border-style: solid;
218
+ --skra-comp-badge-focus-ring-width: 0.1875rem;
219
+ --skra-comp-badge-typography-role: label-small;
220
+ --skra-comp-badge-icon-size: 1em;
221
+ --skra-comp-button-background-hover: oklch(37.0% 0 0);
222
+ --skra-comp-button-background-active: oklch(43.0% 0 0);
223
+ --skra-comp-button-foreground-hover: oklch(88.0% 0 0);
224
+ --skra-comp-button-foreground-active: oklch(82.0% 0 0);
225
+ --skra-comp-button-border-color-hover: oklch(12.0% 0 0);
226
+ --skra-comp-button-border-color-active: oklch(18.0% 0 0);
227
+ --skra-comp-button-focus-ring-color-hover: oklch(57.0% 0.18 295);
228
+ --skra-comp-button-focus-ring-color-active: oklch(63.0% 0.18 295);
229
+ --skra-comp-button-loading-indicator-color-hover: oklch(12.0% 0 0);
230
+ --skra-comp-button-loading-indicator-color-active: oklch(18.0% 0 0);
231
+ --skra-comp-button-border-width: 0.1875rem;
232
+ --skra-comp-button-border-style: solid;
233
+ --skra-comp-button-focus-ring-width: 0.1875rem;
234
+ --skra-comp-button-size-sm-typography-role: label-small;
235
+ --skra-comp-button-size-md-typography-role: label-medium;
236
+ --skra-comp-button-size-lg-typography-role: label-large;
237
+ --skra-comp-button-icon-size: 1em;
238
+ --skra-comp-chip-background-hover: oklch(83.0% 0 0);
239
+ --skra-comp-chip-background-active: oklch(77.0% 0 0);
240
+ --skra-comp-chip-foreground-hover: oklch(37.0% 0 0);
241
+ --skra-comp-chip-foreground-active: oklch(43.0% 0 0);
242
+ --skra-comp-chip-border-color-hover: oklch(12.0% 0 0);
243
+ --skra-comp-chip-border-color-active: oklch(18.0% 0 0);
244
+ --skra-comp-chip-focus-ring-color-hover: oklch(57.0% 0.18 295);
245
+ --skra-comp-chip-focus-ring-color-active: oklch(63.0% 0.18 295);
246
+ --skra-comp-chip-border-width: 0.1875rem;
247
+ --skra-comp-chip-border-style: solid;
248
+ --skra-comp-chip-focus-ring-width: 0.1875rem;
249
+ --skra-comp-chip-typography-role: label-medium;
250
+ --skra-comp-chip-icon-size: 1em;
251
+ --skra-comp-chip-remove-size: 1.5rem;
252
+ --skra-comp-combobox-background-hover: oklch(85.0% 0.015 95);
253
+ --skra-comp-combobox-background-active: oklch(79.0% 0.015 95);
254
+ --skra-comp-combobox-foreground-hover: oklch(12.0% 0 0);
255
+ --skra-comp-combobox-foreground-active: oklch(18.0% 0 0);
256
+ --skra-comp-combobox-border-color-hover: oklch(12.0% 0 0);
257
+ --skra-comp-combobox-border-color-active: oklch(18.0% 0 0);
258
+ --skra-comp-combobox-focus-ring-color-hover: oklch(57.0% 0.18 295);
259
+ --skra-comp-combobox-focus-ring-color-active: oklch(63.0% 0.18 295);
260
+ --skra-comp-combobox-background-readonly-hover: oklch(81.0% 0.025 95);
261
+ --skra-comp-combobox-background-readonly-active: oklch(75.0% 0.025 95);
262
+ --skra-comp-combobox-border-color-validation-invalid-hover: oklch(60.0% 0.2 25);
263
+ --skra-comp-combobox-border-color-validation-invalid-active: oklch(66.0% 0.2 25);
264
+ --skra-comp-combobox-arrow-color-hover: oklch(47.0% 0 0);
265
+ --skra-comp-combobox-arrow-color-active: oklch(53.0% 0 0);
266
+ --skra-comp-combobox-panel-background-hover: oklch(85.0% 0.015 95);
267
+ --skra-comp-combobox-panel-background-active: oklch(79.0% 0.015 95);
268
+ --skra-comp-combobox-panel-foreground-hover: oklch(12.0% 0 0);
269
+ --skra-comp-combobox-panel-foreground-active: oklch(18.0% 0 0);
270
+ --skra-comp-combobox-panel-border-color-hover: oklch(12.0% 0 0);
271
+ --skra-comp-combobox-panel-border-color-active: oklch(18.0% 0 0);
272
+ --skra-comp-combobox-loading-indicator-color-hover: oklch(12.0% 0 0);
273
+ --skra-comp-combobox-loading-indicator-color-active: oklch(18.0% 0 0);
274
+ --skra-comp-combobox-empty-foreground-hover: oklch(47.0% 0 0);
275
+ --skra-comp-combobox-empty-foreground-active: oklch(53.0% 0 0);
276
+ --skra-comp-combobox-border-width: 0.125rem;
277
+ --skra-comp-combobox-border-style: solid;
278
+ --skra-comp-combobox-shadow: none;
279
+ --skra-comp-combobox-focus-ring-width: 0.1875rem;
280
+ --skra-comp-combobox-typography-role: body-medium;
281
+ --skra-comp-combobox-icon-size: 1em;
282
+ --skra-comp-combobox-arrow-icon-size: 1em;
283
+ --skra-comp-datepicker-background-hover: oklch(85.0% 0.015 95);
284
+ --skra-comp-datepicker-background-active: oklch(79.0% 0.015 95);
285
+ --skra-comp-datepicker-foreground-hover: oklch(12.0% 0 0);
286
+ --skra-comp-datepicker-foreground-active: oklch(18.0% 0 0);
287
+ --skra-comp-datepicker-border-color-hover: oklch(12.0% 0 0);
288
+ --skra-comp-datepicker-border-color-active: oklch(18.0% 0 0);
289
+ --skra-comp-datepicker-focus-ring-color-hover: oklch(57.0% 0.18 295);
290
+ --skra-comp-datepicker-focus-ring-color-active: oklch(63.0% 0.18 295);
291
+ --skra-comp-datepicker-background-readonly-hover: oklch(81.0% 0.025 95);
292
+ --skra-comp-datepicker-background-readonly-active: oklch(75.0% 0.025 95);
293
+ --skra-comp-datepicker-border-color-validation-invalid-hover: oklch(60.0% 0.2 25);
294
+ --skra-comp-datepicker-border-color-validation-invalid-active: oklch(66.0% 0.2 25);
295
+ --skra-comp-datepicker-icon-color-hover: oklch(47.0% 0 0);
296
+ --skra-comp-datepicker-icon-color-active: oklch(53.0% 0 0);
297
+ --skra-comp-datepicker-panel-background-hover: oklch(85.0% 0.015 95);
298
+ --skra-comp-datepicker-panel-background-active: oklch(79.0% 0.015 95);
299
+ --skra-comp-datepicker-panel-foreground-hover: oklch(12.0% 0 0);
300
+ --skra-comp-datepicker-panel-foreground-active: oklch(18.0% 0 0);
301
+ --skra-comp-datepicker-panel-border-color-hover: oklch(37.0% 0 0);
302
+ --skra-comp-datepicker-panel-border-color-active: oklch(43.0% 0 0);
303
+ --skra-comp-datepicker-header-foreground-hover: oklch(12.0% 0 0);
304
+ --skra-comp-datepicker-header-foreground-active: oklch(18.0% 0 0);
305
+ --skra-comp-datepicker-nav-color-active: oklch(53.0% 0 0);
306
+ --skra-comp-datepicker-weekday-foreground-hover: oklch(47.0% 0 0);
307
+ --skra-comp-datepicker-weekday-foreground-active: oklch(53.0% 0 0);
308
+ --skra-comp-datepicker-day-foreground-hover: oklch(12.0% 0 0);
309
+ --skra-comp-datepicker-day-foreground-active: oklch(18.0% 0 0);
310
+ --skra-comp-datepicker-day-today-indicator-color-hover: oklch(62.0% 0.11 98);
311
+ --skra-comp-datepicker-day-today-indicator-color-active: oklch(68.0% 0.11 98);
312
+ --skra-comp-datepicker-border-width: 0.125rem;
313
+ --skra-comp-datepicker-border-style: solid;
314
+ --skra-comp-datepicker-shadow: none;
315
+ --skra-comp-datepicker-focus-ring-width: 0.1875rem;
316
+ --skra-comp-datepicker-typography-role: body-medium;
317
+ --skra-comp-datepicker-icon-size: 1em;
318
+ --skra-comp-datepicker-header-typography-role: body-medium;
319
+ --skra-comp-datepicker-nav-icon-size: 1.25em;
320
+ --skra-comp-datepicker-weekday-typography-role: body-small;
321
+ --skra-comp-datepicker-day-typography-role: body-medium;
322
+ --skra-comp-dialog-background-hover: oklch(85.0% 0.015 95);
323
+ --skra-comp-dialog-background-active: oklch(79.0% 0.015 95);
324
+ --skra-comp-dialog-foreground-hover: oklch(12.0% 0 0);
325
+ --skra-comp-dialog-foreground-active: oklch(18.0% 0 0);
326
+ --skra-comp-dialog-border-color-hover: oklch(12.0% 0 0);
327
+ --skra-comp-dialog-border-color-active: oklch(18.0% 0 0);
328
+ --skra-comp-dialog-focus-ring-color-hover: oklch(57.0% 0.18 295);
329
+ --skra-comp-dialog-focus-ring-color-active: oklch(63.0% 0.18 295);
330
+ --skra-comp-dialog-border-width: 0.25rem;
331
+ --skra-comp-dialog-border-style: solid;
332
+ --skra-comp-dialog-focus-ring-width: 0.1875rem;
333
+ --skra-comp-dialog-typography-role: body-medium;
334
+ --skra-comp-field-background-hover: oklch(85.0% 0.015 95);
335
+ --skra-comp-field-background-active: oklch(79.0% 0.015 95);
336
+ --skra-comp-field-foreground-hover: oklch(12.0% 0 0);
337
+ --skra-comp-field-foreground-active: oklch(18.0% 0 0);
338
+ --skra-comp-field-border-color-hover: oklch(12.0% 0 0);
339
+ --skra-comp-field-border-color-active: oklch(18.0% 0 0);
340
+ --skra-comp-field-focus-ring-color-hover: oklch(57.0% 0.18 295);
341
+ --skra-comp-field-focus-ring-color-active: oklch(63.0% 0.18 295);
342
+ --skra-comp-field-label-color-hover: oklch(12.0% 0 0);
343
+ --skra-comp-field-label-color-active: oklch(18.0% 0 0);
344
+ --skra-comp-field-hint-color-hover: oklch(47.0% 0 0);
345
+ --skra-comp-field-hint-color-active: oklch(53.0% 0 0);
346
+ --skra-comp-field-error-color-hover: oklch(60.0% 0.2 25);
347
+ --skra-comp-field-error-color-active: oklch(66.0% 0.2 25);
348
+ --skra-comp-field-border-color-validation-invalid-hover: oklch(60.0% 0.2 25);
349
+ --skra-comp-field-border-color-validation-invalid-active: oklch(66.0% 0.2 25);
350
+ --skra-comp-field-background-readonly-hover: oklch(81.0% 0.025 95);
351
+ --skra-comp-field-background-readonly-active: oklch(75.0% 0.025 95);
352
+ --skra-comp-field-border-color-readonly-hover: oklch(37.0% 0 0);
353
+ --skra-comp-field-border-color-readonly-active: oklch(43.0% 0 0);
354
+ --skra-comp-field-required-color-hover: oklch(60.0% 0.2 25);
355
+ --skra-comp-field-required-color-active: oklch(66.0% 0.2 25);
356
+ --skra-comp-field-checkbox-border-color-hover: oklch(12.0% 0 0);
357
+ --skra-comp-field-checkbox-border-color-active: oklch(18.0% 0 0);
358
+ --skra-comp-field-checkbox-background-hover: oklch(85.0% 0.015 95);
359
+ --skra-comp-field-checkbox-background-active: oklch(79.0% 0.015 95);
360
+ --skra-comp-field-checkbox-checked-background-hover: oklch(73.0% 0.17 98);
361
+ --skra-comp-field-checkbox-checked-background-active: oklch(67.0% 0.17 98);
362
+ --skra-comp-field-checkbox-checked-background-readonly-hover: oklch(37.0% 0 0);
363
+ --skra-comp-field-checkbox-checked-background-readonly-active: oklch(43.0% 0 0);
364
+ --skra-comp-field-checkbox-check-color-hover: oklch(12.0% 0 0);
365
+ --skra-comp-field-checkbox-check-color-active: oklch(18.0% 0 0);
366
+ --skra-comp-field-checkbox-border-width: 0.125rem;
367
+ --skra-comp-field-radio-border-color-hover: oklch(12.0% 0 0);
368
+ --skra-comp-field-radio-border-color-active: oklch(18.0% 0 0);
369
+ --skra-comp-field-radio-background-hover: oklch(85.0% 0.015 95);
370
+ --skra-comp-field-radio-background-active: oklch(79.0% 0.015 95);
371
+ --skra-comp-field-radio-checked-background-hover: oklch(73.0% 0.17 98);
372
+ --skra-comp-field-radio-checked-background-active: oklch(67.0% 0.17 98);
373
+ --skra-comp-field-radio-checked-background-readonly-hover: oklch(37.0% 0 0);
374
+ --skra-comp-field-radio-checked-background-readonly-active: oklch(43.0% 0 0);
375
+ --skra-comp-field-radio-dot-color-hover: oklch(12.0% 0 0);
376
+ --skra-comp-field-radio-dot-color-active: oklch(18.0% 0 0);
377
+ --skra-comp-field-radio-border-width: 0.125rem;
378
+ --skra-comp-field-switch-border-color-hover: oklch(12.0% 0 0);
379
+ --skra-comp-field-switch-border-color-active: oklch(18.0% 0 0);
380
+ --skra-comp-field-switch-background-hover: oklch(37.0% 0 0);
381
+ --skra-comp-field-switch-background-active: oklch(43.0% 0 0);
382
+ --skra-comp-field-switch-checked-background-hover: oklch(73.0% 0.17 98);
383
+ --skra-comp-field-switch-checked-background-active: oklch(67.0% 0.17 98);
384
+ --skra-comp-field-switch-checked-background-readonly-hover: oklch(37.0% 0 0);
385
+ --skra-comp-field-switch-checked-background-readonly-active: oklch(43.0% 0 0);
386
+ --skra-comp-field-switch-thumb-color-hover: oklch(85.0% 0.015 95);
387
+ --skra-comp-field-switch-thumb-color-active: oklch(79.0% 0.015 95);
388
+ --skra-comp-field-switch-track-inline-size: 2.25rem;
389
+ --skra-comp-field-switch-track-block-size: 1.25rem;
390
+ --skra-comp-field-switch-border-width: 0.125rem;
391
+ --skra-comp-field-switch-thumb-size: 1rem;
392
+ --skra-comp-field-switch-thumb-inset: 0.125rem;
393
+ --skra-comp-field-group-legend-color-hover: oklch(12.0% 0 0);
394
+ --skra-comp-field-group-legend-color-active: oklch(18.0% 0 0);
395
+ --skra-comp-field-select-option-foreground-hover: oklch(12.0% 0 0);
396
+ --skra-comp-field-select-option-foreground-active: oklch(18.0% 0 0);
397
+ --skra-comp-field-select-option-background-hover: oklch(85.0% 0.015 95);
398
+ --skra-comp-field-select-option-background-active: oklch(79.0% 0.015 95);
399
+ --skra-comp-field-select-optgroup-foreground-hover: oklch(12.0% 0 0);
400
+ --skra-comp-field-select-optgroup-foreground-active: oklch(18.0% 0 0);
401
+ --skra-comp-field-select-arrow-icon-size: 1em;
402
+ --skra-comp-field-border-width: 0.125rem;
403
+ --skra-comp-field-border-style: solid;
404
+ --skra-comp-field-shadow: none;
405
+ --skra-comp-field-focus-ring-width: 0.1875rem;
406
+ --skra-comp-kbd-background-hover: oklch(81.0% 0.025 95);
407
+ --skra-comp-kbd-background-active: oklch(75.0% 0.025 95);
408
+ --skra-comp-kbd-foreground-hover: oklch(12.0% 0 0);
409
+ --skra-comp-kbd-foreground-active: oklch(18.0% 0 0);
410
+ --skra-comp-kbd-border-color-hover: oklch(12.0% 0 0);
411
+ --skra-comp-kbd-border-color-active: oklch(18.0% 0 0);
412
+ --skra-comp-kbd-focus-ring-color-hover: oklch(57.0% 0.18 295);
413
+ --skra-comp-kbd-focus-ring-color-active: oklch(63.0% 0.18 295);
414
+ --skra-comp-kbd-border-width: 0.125rem;
415
+ --skra-comp-kbd-border-style: solid;
416
+ --skra-comp-kbd-focus-ring-width: 0.1875rem;
417
+ --skra-comp-link-foreground-active: oklch(18.0% 0 0);
418
+ --skra-comp-link-focus-ring-color-hover: oklch(57.0% 0.18 295);
419
+ --skra-comp-link-focus-ring-color-active: oklch(63.0% 0.18 295);
420
+ --skra-comp-link-focus-ring-width: 0.1875rem;
421
+ --skra-comp-link-text-decoration-line: underline;
422
+ --skra-comp-link-text-decoration-thickness: 0.1875rem;
423
+ --skra-comp-link-text-underline-offset: 0.25rem;
424
+ --skra-comp-menu-background-hover: oklch(85.0% 0.015 95);
425
+ --skra-comp-menu-background-active: oklch(79.0% 0.015 95);
426
+ --skra-comp-menu-foreground-hover: oklch(12.0% 0 0);
427
+ --skra-comp-menu-foreground-active: oklch(18.0% 0 0);
428
+ --skra-comp-menu-border-color-hover: oklch(12.0% 0 0);
429
+ --skra-comp-menu-border-color-active: oklch(18.0% 0 0);
430
+ --skra-comp-menu-focus-ring-color-hover: oklch(57.0% 0.18 295);
431
+ --skra-comp-menu-focus-ring-color-active: oklch(63.0% 0.18 295);
432
+ --skra-comp-menu-item-foreground-hover: oklch(12.0% 0 0);
433
+ --skra-comp-menu-item-foreground-active: oklch(18.0% 0 0);
434
+ --skra-comp-menu-border-width: 0.1875rem;
435
+ --skra-comp-menu-border-style: solid;
436
+ --skra-comp-menu-focus-ring-width: 0.1875rem;
437
+ --skra-comp-menu-typography-role: body-medium;
438
+ --skra-comp-popover-background-hover: oklch(85.0% 0.015 95);
439
+ --skra-comp-popover-background-active: oklch(79.0% 0.015 95);
440
+ --skra-comp-popover-foreground-hover: oklch(12.0% 0 0);
441
+ --skra-comp-popover-foreground-active: oklch(18.0% 0 0);
442
+ --skra-comp-popover-border-color-hover: oklch(12.0% 0 0);
443
+ --skra-comp-popover-border-color-active: oklch(18.0% 0 0);
444
+ --skra-comp-popover-focus-ring-color-hover: oklch(57.0% 0.18 295);
445
+ --skra-comp-popover-focus-ring-color-active: oklch(63.0% 0.18 295);
446
+ --skra-comp-popover-border-width: 0.1875rem;
447
+ --skra-comp-popover-border-style: solid;
448
+ --skra-comp-popover-focus-ring-width: 0.1875rem;
449
+ --skra-comp-popover-typography-role: body-medium;
450
+ --skra-comp-progress-background-hover: oklch(83.0% 0 0);
451
+ --skra-comp-progress-background-active: oklch(77.0% 0 0);
452
+ --skra-comp-progress-foreground-hover: oklch(12.0% 0 0);
453
+ --skra-comp-progress-foreground-active: oklch(18.0% 0 0);
454
+ --skra-comp-progress-border-color-hover: oklch(12.0% 0 0);
455
+ --skra-comp-progress-border-color-active: oklch(18.0% 0 0);
456
+ --skra-comp-progress-focus-ring-color-hover: oklch(57.0% 0.18 295);
457
+ --skra-comp-progress-focus-ring-color-active: oklch(63.0% 0.18 295);
458
+ --skra-comp-progress-fill-color-hover: oklch(73.0% 0.17 98);
459
+ --skra-comp-progress-fill-color-active: oklch(67.0% 0.17 98);
460
+ --skra-comp-progress-border-width: 0.1875rem;
461
+ --skra-comp-progress-border-style: solid;
462
+ --skra-comp-progress-padding-block: 0;
463
+ --skra-comp-progress-padding-inline: 0;
464
+ --skra-comp-progress-focus-ring-width: 0.1875rem;
465
+ --skra-comp-progress-block-size: 0.875rem;
466
+ --skra-comp-select-background-hover: oklch(85.0% 0.015 95);
467
+ --skra-comp-select-background-active: oklch(79.0% 0.015 95);
468
+ --skra-comp-select-foreground-hover: oklch(12.0% 0 0);
469
+ --skra-comp-select-foreground-active: oklch(18.0% 0 0);
470
+ --skra-comp-select-border-color-hover: oklch(12.0% 0 0);
471
+ --skra-comp-select-border-color-active: oklch(18.0% 0 0);
472
+ --skra-comp-select-focus-ring-color-hover: oklch(57.0% 0.18 295);
473
+ --skra-comp-select-focus-ring-color-active: oklch(63.0% 0.18 295);
474
+ --skra-comp-select-background-readonly-hover: oklch(81.0% 0.025 95);
475
+ --skra-comp-select-background-readonly-active: oklch(75.0% 0.025 95);
476
+ --skra-comp-select-border-color-validation-invalid-hover: oklch(60.0% 0.2 25);
477
+ --skra-comp-select-border-color-validation-invalid-active: oklch(66.0% 0.2 25);
478
+ --skra-comp-select-arrow-color-hover: oklch(47.0% 0 0);
479
+ --skra-comp-select-arrow-color-active: oklch(53.0% 0 0);
480
+ --skra-comp-select-panel-background-hover: oklch(85.0% 0.015 95);
481
+ --skra-comp-select-panel-background-active: oklch(79.0% 0.015 95);
482
+ --skra-comp-select-panel-foreground-hover: oklch(12.0% 0 0);
483
+ --skra-comp-select-panel-foreground-active: oklch(18.0% 0 0);
484
+ --skra-comp-select-panel-border-color-hover: oklch(12.0% 0 0);
485
+ --skra-comp-select-panel-border-color-active: oklch(18.0% 0 0);
486
+ --skra-comp-select-option-foreground-hover: oklch(12.0% 0 0);
487
+ --skra-comp-select-option-foreground-active: oklch(18.0% 0 0);
488
+ --skra-comp-select-option-detail-foreground-hover: oklch(47.0% 0 0);
489
+ --skra-comp-select-option-detail-foreground-active: oklch(53.0% 0 0);
490
+ --skra-comp-select-indicator-color-hover: oklch(62.0% 0.11 98);
491
+ --skra-comp-select-indicator-color-active: oklch(68.0% 0.11 98);
492
+ --skra-comp-select-option-checkbox-border-color-hover: oklch(12.0% 0 0);
493
+ --skra-comp-select-option-checkbox-border-color-active: oklch(18.0% 0 0);
494
+ --skra-comp-select-option-checkbox-check-color-hover: oklch(12.0% 0 0);
495
+ --skra-comp-select-option-checkbox-check-color-active: oklch(18.0% 0 0);
496
+ --skra-comp-select-border-width: 0.125rem;
497
+ --skra-comp-select-border-style: solid;
498
+ --skra-comp-select-shadow: none;
499
+ --skra-comp-select-focus-ring-width: 0.1875rem;
500
+ --skra-comp-select-typography-role: body-medium;
501
+ --skra-comp-select-icon-size: 1em;
502
+ --skra-comp-select-arrow-icon-size: 1em;
503
+ --skra-comp-select-option-checkbox-size: 1em;
504
+ --skra-comp-skeleton-background-hover: oklch(74.0% 0 0);
505
+ --skra-comp-skeleton-background-active: oklch(68.0% 0 0);
506
+ --skra-comp-skeleton-foreground-hover: oklch(12.0% 0 0);
507
+ --skra-comp-skeleton-foreground-active: oklch(18.0% 0 0);
508
+ --skra-comp-skeleton-border-color-hover: oklch(12.0% 0 0);
509
+ --skra-comp-skeleton-border-color-active: oklch(18.0% 0 0);
510
+ --skra-comp-skeleton-focus-ring-color-hover: oklch(57.0% 0.18 295);
511
+ --skra-comp-skeleton-focus-ring-color-active: oklch(63.0% 0.18 295);
512
+ --skra-comp-skeleton-border-width: 0.1875rem;
513
+ --skra-comp-skeleton-border-style: solid;
514
+ --skra-comp-skeleton-padding-block: 0;
515
+ --skra-comp-skeleton-padding-inline: 0;
516
+ --skra-comp-skeleton-focus-ring-width: 0.1875rem;
517
+ --skra-comp-star-rating-star-color-empty-hover: oklch(12.0% 0 0);
518
+ --skra-comp-star-rating-star-color-empty-active: oklch(18.0% 0 0);
519
+ --skra-comp-star-rating-star-color-filled-hover: oklch(73.0% 0.17 98);
520
+ --skra-comp-star-rating-star-color-filled-active: oklch(67.0% 0.17 98);
521
+ --skra-comp-star-rating-focus-ring-color-hover: oklch(57.0% 0.18 295);
522
+ --skra-comp-star-rating-focus-ring-color-active: oklch(63.0% 0.18 295);
523
+ --skra-comp-star-rating-gap: 0.25rem;
524
+ --skra-comp-star-rating-star-size-sm: 1.125rem;
525
+ --skra-comp-star-rating-star-size-md: 1.375rem;
526
+ --skra-comp-star-rating-star-size-lg: 1.625rem;
527
+ --skra-comp-star-rating-focus-ring-width: 0.1875rem;
528
+ --skra-comp-status-dot-background-hover: oklch(37.0% 0 0);
529
+ --skra-comp-status-dot-background-active: oklch(43.0% 0 0);
530
+ --skra-comp-status-dot-foreground-hover: oklch(88.0% 0 0);
531
+ --skra-comp-status-dot-foreground-active: oklch(82.0% 0 0);
532
+ --skra-comp-status-dot-border-color-hover: oklch(85.0% 0.015 95);
533
+ --skra-comp-status-dot-border-color-active: oklch(79.0% 0.015 95);
534
+ --skra-comp-status-dot-focus-ring-color-hover: oklch(57.0% 0.18 295);
535
+ --skra-comp-status-dot-focus-ring-color-active: oklch(63.0% 0.18 295);
536
+ --skra-comp-status-dot-border-width: 0.1875rem;
537
+ --skra-comp-status-dot-border-style: solid;
538
+ --skra-comp-status-dot-padding-block: 0;
539
+ --skra-comp-status-dot-padding-inline: 0;
540
+ --skra-comp-status-dot-shadow: none;
541
+ --skra-comp-status-dot-focus-ring-width: 0.125rem;
542
+ --skra-comp-tabs-foreground-hover: oklch(47.0% 0 0);
543
+ --skra-comp-tabs-foreground-active: oklch(53.0% 0 0);
544
+ --skra-comp-tabs-focus-ring-color-hover: oklch(57.0% 0.18 295);
545
+ --skra-comp-tabs-focus-ring-color-active: oklch(63.0% 0.18 295);
546
+ --skra-comp-tabs-indicator-color-hover: oklch(73.0% 0.17 98);
547
+ --skra-comp-tabs-indicator-color-active: oklch(67.0% 0.17 98);
548
+ --skra-comp-tabs-tablist-border-color-hover: oklch(12.0% 0 0);
549
+ --skra-comp-tabs-tablist-border-color-active: oklch(18.0% 0 0);
550
+ --skra-comp-tabs-background: rgba(0, 0, 0, 0);
551
+ --skra-comp-tabs-border-color: rgba(0, 0, 0, 0);
552
+ --skra-comp-tabs-border-width: 0;
553
+ --skra-comp-tabs-border-style: solid;
554
+ --skra-comp-tabs-shadow: none;
555
+ --skra-comp-tabs-focus-ring-width: 0.125rem;
556
+ --skra-comp-tabs-indicator-thickness: 0.25rem;
557
+ --skra-comp-tabs-typography-role: label-large;
558
+ --skra-comp-tabs-tablist-border-width: 0.1875rem;
559
+ --skra-comp-toast-background-hover: oklch(83.0% 0 0);
560
+ --skra-comp-toast-background-active: oklch(77.0% 0 0);
561
+ --skra-comp-toast-foreground-hover: oklch(37.0% 0 0);
562
+ --skra-comp-toast-foreground-active: oklch(43.0% 0 0);
563
+ --skra-comp-toast-border-color-hover: oklch(12.0% 0 0);
564
+ --skra-comp-toast-border-color-active: oklch(18.0% 0 0);
565
+ --skra-comp-toast-focus-ring-color-hover: oklch(57.0% 0.18 295);
566
+ --skra-comp-toast-focus-ring-color-active: oklch(63.0% 0.18 295);
567
+ --skra-comp-toast-border-width: 0.1875rem;
568
+ --skra-comp-toast-border-style: solid;
569
+ --skra-comp-toast-focus-ring-width: 0.1875rem;
570
+ --skra-comp-toast-typography-role: body-medium;
571
+ --skra-comp-toast-icon-size: 1em;
572
+ --skra-comp-tooltip-background-hover: oklch(12.0% 0 0);
573
+ --skra-comp-tooltip-background-active: oklch(18.0% 0 0);
574
+ --skra-comp-tooltip-foreground-hover: oklch(88.0% 0 0);
575
+ --skra-comp-tooltip-foreground-active: oklch(82.0% 0 0);
576
+ --skra-comp-tooltip-focus-ring-color-hover: oklch(57.0% 0.18 295);
577
+ --skra-comp-tooltip-focus-ring-color-active: oklch(63.0% 0.18 295);
578
+ --skra-comp-tooltip-border-color: rgba(0, 0, 0, 0);
579
+ --skra-comp-tooltip-border-width: 0;
580
+ --skra-comp-tooltip-border-style: solid;
581
+ --skra-comp-tooltip-focus-ring-width: 0.125rem;
582
+ --skra-comp-tooltip-typography-role: body-small;
583
+ --skra-comp-typography-display-large-foreground-hover: oklch(12.0% 0 0);
584
+ --skra-comp-typography-display-large-foreground-active: oklch(18.0% 0 0);
585
+ --skra-comp-typography-display-medium-foreground-hover: oklch(12.0% 0 0);
586
+ --skra-comp-typography-display-medium-foreground-active: oklch(18.0% 0 0);
587
+ --skra-comp-typography-display-small-foreground-hover: oklch(12.0% 0 0);
588
+ --skra-comp-typography-display-small-foreground-active: oklch(18.0% 0 0);
589
+ --skra-comp-typography-headline-large-foreground-hover: oklch(12.0% 0 0);
590
+ --skra-comp-typography-headline-large-foreground-active: oklch(18.0% 0 0);
591
+ --skra-comp-typography-headline-medium-foreground-hover: oklch(12.0% 0 0);
592
+ --skra-comp-typography-headline-medium-foreground-active: oklch(18.0% 0 0);
593
+ --skra-comp-typography-headline-small-foreground-hover: oklch(12.0% 0 0);
594
+ --skra-comp-typography-headline-small-foreground-active: oklch(18.0% 0 0);
595
+ --skra-comp-typography-title-large-foreground-hover: oklch(12.0% 0 0);
596
+ --skra-comp-typography-title-large-foreground-active: oklch(18.0% 0 0);
597
+ --skra-comp-typography-title-medium-foreground-hover: oklch(12.0% 0 0);
598
+ --skra-comp-typography-title-medium-foreground-active: oklch(18.0% 0 0);
599
+ --skra-comp-typography-title-small-foreground-hover: oklch(12.0% 0 0);
600
+ --skra-comp-typography-title-small-foreground-active: oklch(18.0% 0 0);
601
+ --skra-comp-typography-body-large-foreground-hover: oklch(12.0% 0 0);
602
+ --skra-comp-typography-body-large-foreground-active: oklch(18.0% 0 0);
603
+ --skra-comp-typography-body-medium-foreground-hover: oklch(12.0% 0 0);
604
+ --skra-comp-typography-body-medium-foreground-active: oklch(18.0% 0 0);
605
+ --skra-comp-typography-body-small-foreground-hover: oklch(47.0% 0 0);
606
+ --skra-comp-typography-body-small-foreground-active: oklch(53.0% 0 0);
607
+ --skra-comp-typography-label-large-foreground-hover: oklch(12.0% 0 0);
608
+ --skra-comp-typography-label-large-foreground-active: oklch(18.0% 0 0);
609
+ --skra-comp-typography-label-medium-foreground-hover: oklch(12.0% 0 0);
610
+ --skra-comp-typography-label-medium-foreground-active: oklch(18.0% 0 0);
611
+ --skra-comp-typography-label-small-foreground-hover: oklch(47.0% 0 0);
612
+ --skra-comp-typography-label-small-foreground-active: oklch(53.0% 0 0);
613
+ --skra-comp-typography-foreground-error-hover: oklch(60.0% 0.2 25);
614
+ --skra-comp-typography-foreground-error-active: oklch(66.0% 0.2 25);
615
+ --skra-comp-typography-foreground-warning-hover: oklch(50.0% 0.12 80);
616
+ --skra-comp-typography-foreground-warning-active: oklch(56.0% 0.12 80);
617
+ --skra-comp-typography-foreground-success-hover: oklch(60.0% 0.15 145);
618
+ --skra-comp-typography-foreground-success-active: oklch(66.0% 0.15 145);
619
+ --skra-sys-color-neutral-base: var(--skra-ref-color-neutral-800);
620
+ --skra-sys-color-neutral-contrast: var(--skra-ref-color-neutral-0);
621
+ --skra-sys-color-neutral-border: var(--skra-ref-color-neutral-1000);
622
+ --skra-sys-color-neutral-soft: var(--skra-ref-color-neutral-100);
623
+ --skra-sys-color-neutral-strong: var(--skra-ref-color-neutral-1000);
624
+ --skra-sys-color-neutral-ink: var(--skra-ref-color-neutral-800);
625
+ --skra-sys-color-primary-base: var(--skra-ref-color-acid-500);
626
+ --skra-sys-color-primary-contrast: var(--skra-ref-color-neutral-1000);
627
+ --skra-sys-color-primary-border: var(--skra-ref-color-neutral-1000);
628
+ --skra-sys-color-primary-soft: var(--skra-ref-color-acid-50);
629
+ --skra-sys-color-primary-strong: var(--skra-ref-color-acid-700);
630
+ --skra-sys-color-primary-ink: var(--skra-ref-color-acid-700);
631
+ --skra-sys-color-secondary-base: var(--skra-ref-color-secondary-600);
632
+ --skra-sys-color-secondary-contrast: var(--skra-ref-color-neutral-0);
633
+ --skra-sys-color-secondary-border: var(--skra-ref-color-neutral-1000);
634
+ --skra-sys-color-secondary-soft: var(--skra-ref-color-secondary-50);
635
+ --skra-sys-color-secondary-strong: var(--skra-ref-color-secondary-700);
636
+ --skra-sys-color-secondary-ink: var(--skra-ref-color-secondary-600);
637
+ --skra-sys-color-info-base: var(--skra-ref-color-info-600);
638
+ --skra-sys-color-info-contrast: var(--skra-ref-color-neutral-0);
639
+ --skra-sys-color-info-border: var(--skra-ref-color-neutral-1000);
640
+ --skra-sys-color-info-soft: var(--skra-ref-color-info-50);
641
+ --skra-sys-color-info-strong: var(--skra-ref-color-info-700);
642
+ --skra-sys-color-info-ink: var(--skra-ref-color-info-600);
643
+ --skra-sys-color-success-base: var(--skra-ref-color-success-600);
644
+ --skra-sys-color-success-contrast: var(--skra-ref-color-neutral-0);
645
+ --skra-sys-color-success-border: var(--skra-ref-color-neutral-1000);
646
+ --skra-sys-color-success-soft: var(--skra-ref-color-success-50);
647
+ --skra-sys-color-success-strong: var(--skra-ref-color-success-700);
648
+ --skra-sys-color-success-ink: var(--skra-ref-color-success-600);
649
+ --skra-sys-color-warning-base: var(--skra-ref-color-warning-500);
650
+ --skra-sys-color-warning-contrast: var(--skra-ref-color-warning-ink);
651
+ --skra-sys-color-warning-border: var(--skra-ref-color-neutral-1000);
652
+ --skra-sys-color-warning-soft: var(--skra-ref-color-warning-50);
653
+ --skra-sys-color-warning-strong: var(--skra-ref-color-warning-700);
654
+ --skra-sys-color-warning-ink: var(--skra-ref-color-warning-700);
655
+ --skra-sys-color-danger-base: var(--skra-ref-color-danger-600);
656
+ --skra-sys-color-danger-contrast: var(--skra-ref-color-neutral-0);
657
+ --skra-sys-color-danger-border: var(--skra-ref-color-neutral-1000);
658
+ --skra-sys-color-danger-soft: var(--skra-ref-color-danger-50);
659
+ --skra-sys-color-danger-strong: var(--skra-ref-color-danger-700);
660
+ --skra-sys-color-danger-ink: var(--skra-ref-color-danger-600);
661
+ --skra-sys-color-surface: var(--skra-ref-color-cream-50);
662
+ --skra-sys-color-surface-raised: var(--skra-ref-color-cream-100);
663
+ --skra-sys-color-surface-hover: var(--skra-ref-color-cream-100);
664
+ --skra-sys-color-surface-disabled: var(--skra-ref-color-neutral-100);
665
+ --skra-sys-color-surface-muted: var(--skra-ref-color-neutral-300);
666
+ --skra-sys-color-on-surface: var(--skra-ref-color-neutral-1000);
667
+ --skra-sys-color-on-surface-strong: var(--skra-ref-color-neutral-1000);
668
+ --skra-sys-color-on-surface-subtle: var(--skra-ref-color-neutral-700);
669
+ --skra-sys-color-on-surface-disabled: var(--skra-ref-color-neutral-600);
670
+ --skra-sys-color-inverse-surface: var(--skra-ref-color-neutral-1000);
671
+ --skra-sys-color-on-inverse-surface: var(--skra-ref-color-neutral-0);
672
+ --skra-sys-color-border: var(--skra-ref-color-neutral-1000);
673
+ --skra-sys-color-border-subtle: var(--skra-ref-color-neutral-800);
674
+ --skra-sys-color-hint: var(--skra-ref-color-neutral-700);
675
+ --skra-sys-color-focus-ring: var(--skra-ref-color-violet-500);
676
+ --skra-sys-color-link: var(--skra-ref-color-neutral-1000);
677
+ --skra-sys-color-link-hover: var(--skra-ref-color-acid-700);
678
+ --skra-sys-color-link-visited: var(--skra-ref-color-violet-500);
679
+ --skra-sys-color-scrim: var(--skra-ref-color-scrim);
680
+ --skra-sys-color-shadow-ink: var(--skra-ref-color-neutral-1000);
681
+ --skra-sys-motion-duration-fast: var(--skra-ref-motion-duration-100);
682
+ --skra-sys-motion-duration-normal: var(--skra-ref-motion-duration-100);
683
+ --skra-sys-motion-duration-slow: var(--skra-ref-motion-duration-200);
684
+ --skra-sys-motion-delay-short: var(--skra-ref-motion-delay-short);
685
+ --skra-sys-motion-delay-long: var(--skra-ref-motion-delay-long);
686
+ --skra-sys-motion-easing-linear: var(--skra-ref-motion-easing-linear);
687
+ --skra-sys-motion-easing-standard: var(--skra-ref-motion-easing-linear);
688
+ --skra-sys-motion-easing-emphasized: var(--skra-ref-motion-easing-linear);
689
+ --skra-sys-size-container-sm: var(--skra-ref-size-container-sm);
690
+ --skra-sys-size-container-md: var(--skra-ref-size-container-md);
691
+ --skra-sys-size-container-lg: var(--skra-ref-size-container-lg);
692
+ --skra-sys-size-tooltip-max: var(--skra-ref-size-sm);
693
+ --skra-sys-size-avatar-sm: var(--skra-ref-size-avatar-sm);
694
+ --skra-sys-size-avatar-md: var(--skra-ref-size-avatar-md);
695
+ --skra-sys-size-avatar-lg: var(--skra-ref-size-avatar-lg);
696
+ --skra-sys-size-status-dot-sm: var(--skra-ref-size-status-dot-sm);
697
+ --skra-sys-size-status-dot-md: var(--skra-ref-size-status-dot-md);
698
+ --skra-sys-size-status-dot-lg: var(--skra-ref-size-status-dot-lg);
699
+ --skra-sys-size-icon-sm: var(--skra-ref-spacing-3);
700
+ --skra-sys-size-icon-md: var(--skra-ref-spacing-4);
701
+ --skra-sys-size-icon-lg: var(--skra-ref-spacing-6);
702
+ --skra-sys-size-grid-track-sm: var(--skra-ref-size-sm);
703
+ --skra-sys-size-grid-track-md: var(--skra-ref-size-md);
704
+ --skra-sys-size-grid-track-lg: var(--skra-ref-size-lg);
705
+ --skra-sys-font-family-display: var(--skra-ref-font-family-grotesk);
706
+ --skra-sys-font-family-body: var(--skra-ref-font-family-grotesk);
707
+ --skra-sys-font-family-code: var(--skra-ref-font-family-mono);
708
+ --skra-sys-typography-role-display-large-font-family: var(--skra-ref-font-family-grotesk);
709
+ --skra-sys-typography-role-display-large-font-size: var(--skra-ref-font-size-6xl);
710
+ --skra-sys-typography-role-display-large-font-weight: var(--skra-ref-font-weight-bold);
711
+ --skra-sys-typography-role-display-large-line-height: var(--skra-ref-line-height-tight);
712
+ --skra-sys-typography-role-display-medium-font-family: var(--skra-ref-font-family-grotesk);
713
+ --skra-sys-typography-role-display-medium-font-size: var(--skra-ref-font-size-5xl);
714
+ --skra-sys-typography-role-display-medium-font-weight: var(--skra-ref-font-weight-bold);
715
+ --skra-sys-typography-role-display-medium-line-height: var(--skra-ref-line-height-tight);
716
+ --skra-sys-typography-role-display-small-font-family: var(--skra-ref-font-family-grotesk);
717
+ --skra-sys-typography-role-display-small-font-size: var(--skra-ref-font-size-4xl);
718
+ --skra-sys-typography-role-display-small-font-weight: var(--skra-ref-font-weight-bold);
719
+ --skra-sys-typography-role-display-small-line-height: var(--skra-ref-line-height-tight);
720
+ --skra-sys-typography-role-headline-large-font-family: var(--skra-ref-font-family-grotesk);
721
+ --skra-sys-typography-role-headline-large-font-size: var(--skra-ref-font-size-3xl);
722
+ --skra-sys-typography-role-headline-large-font-weight: var(--skra-ref-font-weight-bold);
723
+ --skra-sys-typography-role-headline-large-line-height: var(--skra-ref-line-height-tight);
724
+ --skra-sys-typography-role-headline-medium-font-family: var(--skra-ref-font-family-grotesk);
725
+ --skra-sys-typography-role-headline-medium-font-size: var(--skra-ref-font-size-2xl);
726
+ --skra-sys-typography-role-headline-medium-font-weight: var(--skra-ref-font-weight-bold);
727
+ --skra-sys-typography-role-headline-medium-line-height: var(--skra-ref-line-height-tight);
728
+ --skra-sys-typography-role-headline-small-font-family: var(--skra-ref-font-family-grotesk);
729
+ --skra-sys-typography-role-headline-small-font-size: var(--skra-ref-font-size-xl);
730
+ --skra-sys-typography-role-headline-small-font-weight: var(--skra-ref-font-weight-bold);
731
+ --skra-sys-typography-role-headline-small-line-height: var(--skra-ref-line-height-tight);
732
+ --skra-sys-typography-role-title-large-font-family: var(--skra-ref-font-family-grotesk);
733
+ --skra-sys-typography-role-title-large-font-size: var(--skra-ref-font-size-lg);
734
+ --skra-sys-typography-role-title-large-font-weight: var(--skra-ref-font-weight-bold);
735
+ --skra-sys-typography-role-title-large-line-height: var(--skra-ref-line-height-snug);
736
+ --skra-sys-typography-role-title-medium-font-family: var(--skra-ref-font-family-grotesk);
737
+ --skra-sys-typography-role-title-medium-font-size: var(--skra-ref-font-size-md);
738
+ --skra-sys-typography-role-title-medium-font-weight: var(--skra-ref-font-weight-bold);
739
+ --skra-sys-typography-role-title-medium-line-height: var(--skra-ref-line-height-snug);
740
+ --skra-sys-typography-role-title-small-font-family: var(--skra-ref-font-family-grotesk);
741
+ --skra-sys-typography-role-title-small-font-size: var(--skra-ref-font-size-sm);
742
+ --skra-sys-typography-role-title-small-font-weight: var(--skra-ref-font-weight-bold);
743
+ --skra-sys-typography-role-title-small-line-height: var(--skra-ref-line-height-snug);
744
+ --skra-sys-typography-role-body-large-font-family: var(--skra-ref-font-family-grotesk);
745
+ --skra-sys-typography-role-body-large-font-size: var(--skra-ref-font-size-lg);
746
+ --skra-sys-typography-role-body-large-font-weight: var(--skra-ref-font-weight-regular);
747
+ --skra-sys-typography-role-body-large-line-height: var(--skra-ref-line-height-normal);
748
+ --skra-sys-typography-role-body-medium-font-family: var(--skra-ref-font-family-grotesk);
749
+ --skra-sys-typography-role-body-medium-font-size: var(--skra-ref-font-size-md);
750
+ --skra-sys-typography-role-body-medium-font-weight: var(--skra-ref-font-weight-regular);
751
+ --skra-sys-typography-role-body-medium-line-height: var(--skra-ref-line-height-normal);
752
+ --skra-sys-typography-role-body-small-font-family: var(--skra-ref-font-family-grotesk);
753
+ --skra-sys-typography-role-body-small-font-size: var(--skra-ref-font-size-sm);
754
+ --skra-sys-typography-role-body-small-font-weight: var(--skra-ref-font-weight-regular);
755
+ --skra-sys-typography-role-body-small-line-height: var(--skra-ref-line-height-normal);
756
+ --skra-sys-typography-role-label-large-font-family: var(--skra-ref-font-family-grotesk);
757
+ --skra-sys-typography-role-label-large-font-size: var(--skra-ref-font-size-md);
758
+ --skra-sys-typography-role-label-large-font-weight: var(--skra-ref-font-weight-semibold);
759
+ --skra-sys-typography-role-label-large-line-height: var(--skra-ref-line-height-snug);
760
+ --skra-sys-typography-role-label-medium-font-family: var(--skra-ref-font-family-grotesk);
761
+ --skra-sys-typography-role-label-medium-font-size: var(--skra-ref-font-size-sm);
762
+ --skra-sys-typography-role-label-medium-font-weight: var(--skra-ref-font-weight-semibold);
763
+ --skra-sys-typography-role-label-medium-line-height: var(--skra-ref-line-height-snug);
764
+ --skra-sys-typography-role-label-small-font-family: var(--skra-ref-font-family-grotesk);
765
+ --skra-sys-typography-role-label-small-font-size: var(--skra-ref-font-size-xs);
766
+ --skra-sys-typography-role-label-small-font-weight: var(--skra-ref-font-weight-semibold);
767
+ --skra-sys-typography-role-label-small-line-height: var(--skra-ref-line-height-snug);
768
+ --skra-sys-spacing-1: var(--skra-ref-spacing-1);
769
+ --skra-sys-spacing-2: var(--skra-ref-spacing-1);
770
+ --skra-sys-spacing-3: var(--skra-ref-spacing-2);
771
+ --skra-sys-spacing-4: var(--skra-ref-spacing-3);
772
+ --skra-sys-spacing-5: var(--skra-ref-spacing-4);
773
+ --skra-sys-spacing-6: var(--skra-ref-spacing-4);
774
+ --skra-sys-spacing-8: var(--skra-ref-spacing-6);
775
+ --skra-sys-font-size-hint: var(--skra-ref-font-size-xs);
776
+ --skra-sys-font-size-small: var(--skra-ref-font-size-sm);
777
+ --skra-sys-font-size-body: var(--skra-ref-font-size-md);
778
+ --skra-sys-font-size-lg: var(--skra-ref-font-size-lg);
779
+ --skra-sys-font-size-label: var(--skra-ref-font-size-sm);
780
+ --skra-sys-opacity-disabled: var(--skra-ref-opacity-disabled);
781
+ --skra-sys-opacity-hover: var(--skra-ref-opacity-hover);
782
+ --skra-comp-accordion-radius: var(--skra-sys-radius-none);
783
+ --skra-comp-accordion-min-block-size: var(--skra-sys-size-interactive-md);
784
+ --skra-comp-accordion-root-radius: var(--skra-sys-radius-none);
785
+ --skra-comp-alert-radius: var(--skra-sys-radius-md);
786
+ --skra-comp-alert-shadow: var(--skra-sys-shadow-sm);
787
+ --skra-comp-alert-dismiss-size: var(--skra-sys-size-interactive-sm);
788
+ --skra-comp-avatar-radius: var(--skra-sys-radius-full);
789
+ --skra-comp-badge-radius: var(--skra-sys-radius-md);
790
+ --skra-comp-badge-shadow: var(--skra-sys-shadow-sm);
791
+ --skra-comp-button-radius: var(--skra-sys-radius-md);
792
+ --skra-comp-button-shadow: var(--skra-sys-shadow-sm);
793
+ --skra-comp-button-shadow-hover: var(--skra-sys-shadow-md);
794
+ --skra-comp-button-min-block-size: var(--skra-sys-size-interactive-md);
795
+ --skra-comp-button-size-sm-min-block-size: var(--skra-sys-size-interactive-sm);
796
+ --skra-comp-button-size-md-min-block-size: var(--skra-sys-size-interactive-md);
797
+ --skra-comp-button-size-lg-min-block-size: var(--skra-sys-size-interactive-lg);
798
+ --skra-comp-button-loading-indicator-size: var(--skra-sys-icon-size-md);
799
+ --skra-comp-chip-radius: var(--skra-sys-radius-md);
800
+ --skra-comp-chip-shadow: var(--skra-sys-shadow-sm);
801
+ --skra-comp-combobox-radius: var(--skra-sys-radius-sm);
802
+ --skra-comp-combobox-min-block-size: var(--skra-sys-size-interactive-md);
803
+ --skra-comp-combobox-panel-radius: var(--skra-sys-radius-md);
804
+ --skra-comp-combobox-panel-shadow: var(--skra-sys-shadow-lg);
805
+ --skra-comp-datepicker-radius: var(--skra-sys-radius-sm);
806
+ --skra-comp-datepicker-min-block-size: var(--skra-sys-size-interactive-md);
807
+ --skra-comp-datepicker-panel-radius: var(--skra-sys-radius-md);
808
+ --skra-comp-datepicker-panel-shadow: var(--skra-sys-shadow-lg);
809
+ --skra-comp-datepicker-day-size: var(--skra-sys-size-interactive-md);
810
+ --skra-comp-datepicker-day-radius: var(--skra-sys-radius-sm);
811
+ --skra-comp-dialog-radius: var(--skra-sys-radius-lg);
812
+ --skra-comp-dialog-shadow: var(--skra-sys-shadow-xl);
813
+ --skra-comp-field-checkbox-border-radius: var(--skra-sys-radius-sm);
814
+ --skra-comp-field-switch-track-radius: var(--skra-sys-radius-sm);
815
+ --skra-comp-field-radius: var(--skra-sys-radius-sm);
816
+ --skra-comp-kbd-radius: var(--skra-sys-radius-none);
817
+ --skra-comp-kbd-shadow: var(--skra-sys-shadow-sm);
818
+ --skra-comp-menu-radius: var(--skra-sys-radius-md);
819
+ --skra-comp-menu-shadow: var(--skra-sys-shadow-lg);
820
+ --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
821
+ --skra-comp-popover-radius: var(--skra-sys-radius-md);
822
+ --skra-comp-popover-shadow: var(--skra-sys-shadow-lg);
823
+ --skra-comp-progress-radius: var(--skra-sys-radius-sm);
824
+ --skra-comp-progress-shadow: var(--skra-sys-shadow-sm);
825
+ --skra-comp-select-radius: var(--skra-sys-radius-sm);
826
+ --skra-comp-select-min-block-size: var(--skra-sys-size-interactive-md);
827
+ --skra-comp-select-panel-radius: var(--skra-sys-radius-md);
828
+ --skra-comp-select-panel-shadow: var(--skra-sys-shadow-lg);
829
+ --skra-comp-select-option-min-block-size: var(--skra-sys-size-interactive-md);
830
+ --skra-comp-select-option-checkbox-radius: var(--skra-sys-radius-sm);
831
+ --skra-comp-skeleton-radius: var(--skra-sys-radius-sm);
832
+ --skra-comp-skeleton-shadow: var(--skra-sys-shadow-sm);
833
+ --skra-comp-status-dot-radius: var(--skra-sys-radius-full);
834
+ --skra-comp-tabs-radius: var(--skra-sys-radius-sm);
835
+ --skra-comp-toast-radius: var(--skra-sys-radius-md);
836
+ --skra-comp-toast-shadow: var(--skra-sys-shadow-lg);
837
+ --skra-comp-toast-dismiss-size: var(--skra-sys-size-interactive-sm);
838
+ --skra-comp-tooltip-radius: var(--skra-sys-radius-sm);
839
+ --skra-comp-tooltip-shadow: var(--skra-sys-shadow-md);
840
+ --skra-comp-typography-display-large-letter-spacing: var(--skra-sys-typography-role-display-large-letter-spacing);
841
+ --skra-comp-typography-display-medium-letter-spacing: var(--skra-sys-typography-role-display-medium-letter-spacing);
842
+ --skra-comp-typography-display-small-letter-spacing: var(--skra-sys-typography-role-display-small-letter-spacing);
843
+ --skra-comp-typography-headline-large-letter-spacing: var(--skra-sys-typography-role-headline-large-letter-spacing);
844
+ --skra-comp-typography-headline-medium-letter-spacing: var(--skra-sys-typography-role-headline-medium-letter-spacing);
845
+ --skra-comp-typography-headline-small-letter-spacing: var(--skra-sys-typography-role-headline-small-letter-spacing);
846
+ --skra-comp-typography-title-large-letter-spacing: var(--skra-sys-typography-role-title-large-letter-spacing);
847
+ --skra-comp-typography-title-medium-letter-spacing: var(--skra-sys-typography-role-title-medium-letter-spacing);
848
+ --skra-comp-typography-title-small-letter-spacing: var(--skra-sys-typography-role-title-small-letter-spacing);
849
+ --skra-comp-typography-body-large-letter-spacing: var(--skra-sys-typography-role-body-large-letter-spacing);
850
+ --skra-comp-typography-body-medium-letter-spacing: var(--skra-sys-typography-role-body-medium-letter-spacing);
851
+ --skra-comp-typography-body-small-letter-spacing: var(--skra-sys-typography-role-body-small-letter-spacing);
852
+ --skra-comp-typography-label-large-letter-spacing: var(--skra-sys-typography-role-label-large-letter-spacing);
853
+ --skra-comp-typography-label-medium-letter-spacing: var(--skra-sys-typography-role-label-medium-letter-spacing);
854
+ --skra-comp-typography-label-small-letter-spacing: var(--skra-sys-typography-role-label-small-letter-spacing);
855
+ --skra-comp-accordion-foreground: var(--skra-sys-color-on-surface);
856
+ --skra-comp-accordion-padding-block: var(--skra-sys-spacing-3);
857
+ --skra-comp-accordion-padding-inline: var(--skra-sys-spacing-4);
858
+ --skra-comp-accordion-motion-duration: var(--skra-sys-motion-duration-fast);
859
+ --skra-comp-accordion-motion-easing: var(--skra-sys-motion-easing-standard);
860
+ --skra-comp-accordion-focus-ring-color: var(--skra-sys-color-focus-ring);
861
+ --skra-comp-accordion-header-background-hover: var(--skra-sys-color-surface-hover);
862
+ --skra-comp-accordion-header-foreground-expanded: var(--skra-sys-color-on-surface-strong);
863
+ --skra-comp-accordion-header-gap: var(--skra-sys-spacing-3);
864
+ --skra-comp-accordion-indicator-color: var(--skra-sys-color-on-surface);
865
+ --skra-comp-accordion-root-background: var(--skra-sys-color-surface);
866
+ --skra-comp-accordion-root-border-color: var(--skra-sys-color-border);
867
+ --skra-comp-accordion-item-divider-color: var(--skra-sys-color-border);
868
+ --skra-comp-accordion-panel-foreground: var(--skra-sys-color-on-surface-subtle);
869
+ --skra-comp-accordion-panel-padding-block: var(--skra-sys-spacing-3);
870
+ --skra-comp-accordion-panel-padding-inline: var(--skra-sys-spacing-4);
871
+ --skra-comp-alert-background: var(--skra-sys-color-neutral-soft);
872
+ --skra-comp-alert-foreground: var(--skra-sys-color-neutral-ink);
873
+ --skra-comp-alert-border-color: var(--skra-sys-color-neutral-border);
874
+ --skra-comp-alert-padding-block: var(--skra-sys-spacing-3);
875
+ --skra-comp-alert-padding-inline: var(--skra-sys-spacing-4);
876
+ --skra-comp-alert-motion-duration: var(--skra-sys-motion-duration-fast);
877
+ --skra-comp-alert-motion-easing: var(--skra-sys-motion-easing-standard);
878
+ --skra-comp-alert-focus-ring-color: var(--skra-sys-color-focus-ring);
879
+ --skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
880
+ --skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
881
+ --skra-comp-avatar-background: var(--skra-sys-color-neutral-soft);
882
+ --skra-comp-avatar-foreground: var(--skra-sys-color-neutral-strong);
883
+ --skra-comp-avatar-border-color: var(--skra-sys-color-neutral-border);
884
+ --skra-comp-avatar-motion-duration: var(--skra-sys-motion-duration-fast);
885
+ --skra-comp-avatar-motion-easing: var(--skra-sys-motion-easing-standard);
886
+ --skra-comp-avatar-focus-ring-color: var(--skra-sys-color-focus-ring);
887
+ --skra-comp-avatar-size-sm: var(--skra-sys-size-avatar-sm);
888
+ --skra-comp-avatar-size-md: var(--skra-sys-size-avatar-md);
889
+ --skra-comp-avatar-size-lg: var(--skra-sys-size-avatar-lg);
890
+ --skra-comp-badge-background: var(--skra-sys-color-neutral-soft);
891
+ --skra-comp-badge-foreground: var(--skra-sys-color-neutral-ink);
892
+ --skra-comp-badge-border-color: var(--skra-sys-color-neutral-border);
893
+ --skra-comp-badge-padding-block: var(--skra-sys-spacing-1);
894
+ --skra-comp-badge-padding-inline: var(--skra-sys-spacing-2);
895
+ --skra-comp-badge-motion-duration: var(--skra-sys-motion-duration-fast);
896
+ --skra-comp-badge-motion-easing: var(--skra-sys-motion-easing-standard);
897
+ --skra-comp-badge-focus-ring-color: var(--skra-sys-color-focus-ring);
898
+ --skra-comp-badge-icon-gap: var(--skra-sys-spacing-1);
899
+ --skra-comp-button-background: var(--skra-sys-color-neutral-base);
900
+ --skra-comp-button-foreground: var(--skra-sys-color-neutral-contrast);
901
+ --skra-comp-button-border-color: var(--skra-sys-color-border);
902
+ --skra-comp-button-padding-block: var(--skra-sys-spacing-2);
903
+ --skra-comp-button-padding-inline: var(--skra-sys-spacing-4);
904
+ --skra-comp-button-motion-duration: var(--skra-sys-motion-duration-fast);
905
+ --skra-comp-button-motion-easing: var(--skra-sys-motion-easing-standard);
906
+ --skra-comp-button-focus-ring-color: var(--skra-sys-color-focus-ring);
907
+ --skra-comp-button-background-disabled: var(--skra-sys-color-surface-disabled);
908
+ --skra-comp-button-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
909
+ --skra-comp-button-border-color-disabled: var(--skra-sys-color-border-subtle);
910
+ --skra-comp-button-size-sm-padding-block: var(--skra-sys-spacing-1);
911
+ --skra-comp-button-size-sm-padding-inline: var(--skra-sys-spacing-3);
912
+ --skra-comp-button-size-md-padding-block: var(--skra-sys-spacing-2);
913
+ --skra-comp-button-size-md-padding-inline: var(--skra-sys-spacing-4);
914
+ --skra-comp-button-size-lg-padding-block: var(--skra-sys-spacing-3);
915
+ --skra-comp-button-size-lg-padding-inline: var(--skra-sys-spacing-5);
916
+ --skra-comp-button-icon-gap: var(--skra-sys-spacing-2);
917
+ --skra-comp-button-loading-indicator-color: var(--skra-sys-color-on-surface);
918
+ --skra-comp-chip-background: var(--skra-sys-color-neutral-soft);
919
+ --skra-comp-chip-foreground: var(--skra-sys-color-neutral-ink);
920
+ --skra-comp-chip-border-color: var(--skra-sys-color-neutral-border);
921
+ --skra-comp-chip-padding-block: var(--skra-sys-spacing-1);
922
+ --skra-comp-chip-padding-inline: var(--skra-sys-spacing-2);
923
+ --skra-comp-chip-motion-duration: var(--skra-sys-motion-duration-fast);
924
+ --skra-comp-chip-motion-easing: var(--skra-sys-motion-easing-standard);
925
+ --skra-comp-chip-focus-ring-color: var(--skra-sys-color-focus-ring);
926
+ --skra-comp-chip-icon-gap: var(--skra-sys-spacing-1);
927
+ --skra-comp-chip-remove-gap: var(--skra-sys-spacing-1);
928
+ --skra-comp-combobox-background: var(--skra-sys-color-surface);
929
+ --skra-comp-combobox-foreground: var(--skra-sys-color-on-surface);
930
+ --skra-comp-combobox-border-color: var(--skra-sys-color-border);
931
+ --skra-comp-combobox-padding-block: var(--skra-sys-spacing-2);
932
+ --skra-comp-combobox-padding-inline: var(--skra-sys-spacing-3);
933
+ --skra-comp-combobox-motion-duration: var(--skra-sys-motion-duration-fast);
934
+ --skra-comp-combobox-motion-easing: var(--skra-sys-motion-easing-standard);
935
+ --skra-comp-combobox-focus-ring-color: var(--skra-sys-color-focus-ring);
936
+ --skra-comp-combobox-background-disabled: var(--skra-sys-color-surface-disabled);
937
+ --skra-comp-combobox-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
938
+ --skra-comp-combobox-background-readonly: var(--skra-sys-color-surface-raised);
939
+ --skra-comp-combobox-border-color-validation-invalid: var(--skra-sys-color-danger-ink);
940
+ --skra-comp-combobox-gap: var(--skra-sys-spacing-2);
941
+ --skra-comp-combobox-arrow-color: var(--skra-sys-color-on-surface-subtle);
942
+ --skra-comp-combobox-panel-background: var(--skra-sys-color-surface);
943
+ --skra-comp-combobox-panel-foreground: var(--skra-sys-color-on-surface);
944
+ --skra-comp-combobox-panel-border-color: var(--skra-sys-color-border);
945
+ --skra-comp-combobox-panel-max-block-size: var(--skra-sys-size-container-sm);
946
+ --skra-comp-combobox-panel-padding-block: var(--skra-sys-spacing-1);
947
+ --skra-comp-combobox-panel-padding-inline: var(--skra-sys-spacing-1);
948
+ --skra-comp-combobox-panel-offset: var(--skra-sys-spacing-1);
949
+ --skra-comp-combobox-panel-viewport-padding: var(--skra-sys-spacing-2);
950
+ --skra-comp-combobox-loading-indicator-color: var(--skra-sys-color-on-surface);
951
+ --skra-comp-combobox-empty-foreground: var(--skra-sys-color-on-surface-subtle);
952
+ --skra-comp-combobox-status-padding-block: var(--skra-sys-spacing-2);
953
+ --skra-comp-combobox-status-padding-inline: var(--skra-sys-spacing-3);
954
+ --skra-comp-datepicker-background: var(--skra-sys-color-surface);
955
+ --skra-comp-datepicker-foreground: var(--skra-sys-color-on-surface);
956
+ --skra-comp-datepicker-border-color: var(--skra-sys-color-border);
957
+ --skra-comp-datepicker-padding-block: var(--skra-sys-spacing-2);
958
+ --skra-comp-datepicker-padding-inline: var(--skra-sys-spacing-3);
959
+ --skra-comp-datepicker-motion-duration: var(--skra-sys-motion-duration-fast);
960
+ --skra-comp-datepicker-motion-easing: var(--skra-sys-motion-easing-standard);
961
+ --skra-comp-datepicker-focus-ring-color: var(--skra-sys-color-focus-ring);
962
+ --skra-comp-datepicker-background-disabled: var(--skra-sys-color-surface-disabled);
963
+ --skra-comp-datepicker-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
964
+ --skra-comp-datepicker-background-readonly: var(--skra-sys-color-surface-raised);
965
+ --skra-comp-datepicker-border-color-validation-invalid: var(--skra-sys-color-danger-ink);
966
+ --skra-comp-datepicker-icon-color: var(--skra-sys-color-on-surface-subtle);
967
+ --skra-comp-datepicker-gap: var(--skra-sys-spacing-2);
968
+ --skra-comp-datepicker-panel-background: var(--skra-sys-color-surface);
969
+ --skra-comp-datepicker-panel-foreground: var(--skra-sys-color-on-surface);
970
+ --skra-comp-datepicker-panel-border-color: var(--skra-sys-color-border-subtle);
971
+ --skra-comp-datepicker-panel-padding: var(--skra-sys-spacing-3);
972
+ --skra-comp-datepicker-panel-offset: var(--skra-sys-spacing-1);
973
+ --skra-comp-datepicker-panel-viewport-padding: var(--skra-sys-spacing-2);
974
+ --skra-comp-datepicker-header-foreground: var(--skra-sys-color-on-surface);
975
+ --skra-comp-datepicker-nav-color: var(--skra-sys-color-on-surface-subtle);
976
+ --skra-comp-datepicker-nav-color-hover: var(--skra-sys-color-on-surface);
977
+ --skra-comp-datepicker-weekday-foreground: var(--skra-sys-color-on-surface-subtle);
978
+ --skra-comp-datepicker-day-foreground: var(--skra-sys-color-on-surface);
979
+ --skra-comp-datepicker-day-background-hover: var(--skra-sys-color-surface-hover);
980
+ --skra-comp-datepicker-day-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
981
+ --skra-comp-datepicker-day-background-selected: var(--skra-sys-color-primary-base);
982
+ --skra-comp-datepicker-day-foreground-selected: var(--skra-sys-color-primary-contrast);
983
+ --skra-comp-datepicker-day-today-indicator-color: var(--skra-sys-color-primary-ink);
984
+ --skra-comp-dialog-background: var(--skra-sys-color-surface);
985
+ --skra-comp-dialog-foreground: var(--skra-sys-color-on-surface);
986
+ --skra-comp-dialog-border-color: var(--skra-sys-color-border);
987
+ --skra-comp-dialog-padding-block: var(--skra-sys-spacing-5);
988
+ --skra-comp-dialog-padding-inline: var(--skra-sys-spacing-5);
989
+ --skra-comp-dialog-motion-duration: var(--skra-sys-motion-duration-normal);
990
+ --skra-comp-dialog-motion-easing: var(--skra-sys-motion-easing-emphasized);
991
+ --skra-comp-dialog-focus-ring-color: var(--skra-sys-color-focus-ring);
992
+ --skra-comp-dialog-backdrop: var(--skra-sys-color-scrim);
993
+ --skra-comp-dialog-size-sm-max-inline-size: var(--skra-sys-size-container-sm);
994
+ --skra-comp-dialog-size-md-max-inline-size: var(--skra-sys-size-container-md);
995
+ --skra-comp-dialog-size-lg-max-inline-size: var(--skra-sys-size-container-lg);
996
+ --skra-comp-field-checkbox-size: var(--skra-sys-spacing-4);
997
+ --skra-comp-field-checkbox-border-color: var(--skra-sys-color-border);
998
+ --skra-comp-field-checkbox-background: var(--skra-sys-color-surface);
999
+ --skra-comp-field-checkbox-checked-background: var(--skra-sys-color-primary-base);
1000
+ --skra-comp-field-checkbox-checked-background-readonly: var(--skra-sys-color-neutral-base);
1001
+ --skra-comp-field-checkbox-check-color: var(--skra-sys-color-primary-contrast);
1002
+ --skra-comp-field-checkbox-gap: var(--skra-sys-spacing-2);
1003
+ --skra-comp-field-checkbox-touch-target: var(--skra-sys-spacing-6);
1004
+ --skra-comp-field-radio-size: var(--skra-sys-spacing-4);
1005
+ --skra-comp-field-radio-border-color: var(--skra-sys-color-border);
1006
+ --skra-comp-field-radio-background: var(--skra-sys-color-surface);
1007
+ --skra-comp-field-radio-checked-background: var(--skra-sys-color-primary-base);
1008
+ --skra-comp-field-radio-checked-background-readonly: var(--skra-sys-color-neutral-base);
1009
+ --skra-comp-field-radio-dot-color: var(--skra-sys-color-primary-contrast);
1010
+ --skra-comp-field-radio-dot-size: var(--skra-sys-spacing-2);
1011
+ --skra-comp-field-radio-gap: var(--skra-sys-spacing-2);
1012
+ --skra-comp-field-radio-touch-target: var(--skra-sys-spacing-6);
1013
+ --skra-comp-field-switch-border-color: var(--skra-sys-color-border);
1014
+ --skra-comp-field-switch-background: var(--skra-sys-color-border-subtle);
1015
+ --skra-comp-field-switch-checked-background: var(--skra-sys-color-primary-base);
1016
+ --skra-comp-field-switch-checked-background-readonly: var(--skra-sys-color-neutral-base);
1017
+ --skra-comp-field-switch-thumb-color: var(--skra-sys-color-surface);
1018
+ --skra-comp-field-switch-thumb-color-checked: var(--skra-sys-color-primary-contrast);
1019
+ --skra-comp-field-switch-gap: var(--skra-sys-spacing-2);
1020
+ --skra-comp-field-switch-touch-target: var(--skra-sys-spacing-6);
1021
+ --skra-comp-field-group-gap: var(--skra-sys-spacing-3);
1022
+ --skra-comp-field-group-legend-color: var(--skra-sys-color-on-surface);
1023
+ --skra-comp-field-group-legend-spacing-block-end: var(--skra-sys-spacing-2);
1024
+ --skra-comp-field-select-arrow-padding-inline-end: var(--skra-sys-spacing-6);
1025
+ --skra-comp-field-select-option-foreground: var(--skra-sys-color-on-surface);
1026
+ --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
1027
+ --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
1028
+ --skra-comp-field-background: var(--skra-sys-color-surface);
1029
+ --skra-comp-field-foreground: var(--skra-sys-color-on-surface);
1030
+ --skra-comp-field-border-color: var(--skra-sys-color-border);
1031
+ --skra-comp-field-padding-block: var(--skra-sys-spacing-2);
1032
+ --skra-comp-field-padding-inline: var(--skra-sys-spacing-4);
1033
+ --skra-comp-field-motion-duration: var(--skra-sys-motion-duration-fast);
1034
+ --skra-comp-field-motion-easing: var(--skra-sys-motion-easing-standard);
1035
+ --skra-comp-field-focus-ring-color: var(--skra-sys-color-focus-ring);
1036
+ --skra-comp-field-gap: var(--skra-sys-spacing-2);
1037
+ --skra-comp-field-label-color: var(--skra-sys-color-on-surface);
1038
+ --skra-comp-field-hint-color: var(--skra-sys-color-hint);
1039
+ --skra-comp-field-error-color: var(--skra-sys-color-danger-ink);
1040
+ --skra-comp-field-border-color-validation-invalid: var(--skra-sys-color-danger-ink);
1041
+ --skra-comp-field-background-readonly: var(--skra-sys-color-surface-raised);
1042
+ --skra-comp-field-border-color-readonly: var(--skra-sys-color-border-subtle);
1043
+ --skra-comp-field-required-color: var(--skra-sys-color-danger-ink);
1044
+ --skra-comp-kbd-background: var(--skra-sys-color-surface-raised);
1045
+ --skra-comp-kbd-foreground: var(--skra-sys-color-on-surface);
1046
+ --skra-comp-kbd-border-color: var(--skra-sys-color-border);
1047
+ --skra-comp-kbd-padding-block: var(--skra-sys-spacing-1);
1048
+ --skra-comp-kbd-padding-inline: var(--skra-sys-spacing-2);
1049
+ --skra-comp-kbd-motion-duration: var(--skra-sys-motion-duration-fast);
1050
+ --skra-comp-kbd-motion-easing: var(--skra-sys-motion-easing-standard);
1051
+ --skra-comp-kbd-focus-ring-color: var(--skra-sys-color-focus-ring);
1052
+ --skra-comp-kbd-font-family: var(--skra-sys-font-family-code);
1053
+ --skra-comp-link-foreground: var(--skra-sys-color-link);
1054
+ --skra-comp-link-foreground-hover: var(--skra-sys-color-link-hover);
1055
+ --skra-comp-link-foreground-visited: var(--skra-sys-color-link-visited);
1056
+ --skra-comp-link-focus-ring-color: var(--skra-sys-color-focus-ring);
1057
+ --skra-comp-link-motion-duration: var(--skra-sys-motion-duration-fast);
1058
+ --skra-comp-link-motion-easing: var(--skra-sys-motion-easing-standard);
1059
+ --skra-comp-menu-background: var(--skra-sys-color-surface);
1060
+ --skra-comp-menu-foreground: var(--skra-sys-color-on-surface);
1061
+ --skra-comp-menu-border-color: var(--skra-sys-color-border);
1062
+ --skra-comp-menu-padding-block: var(--skra-sys-spacing-1);
1063
+ --skra-comp-menu-padding-inline: var(--skra-sys-spacing-1);
1064
+ --skra-comp-menu-motion-duration: var(--skra-sys-motion-duration-fast);
1065
+ --skra-comp-menu-motion-easing: var(--skra-sys-motion-easing-standard);
1066
+ --skra-comp-menu-focus-ring-color: var(--skra-sys-color-focus-ring);
1067
+ --skra-comp-menu-max-inline-size: var(--skra-sys-size-container-sm);
1068
+ --skra-comp-menu-offset: var(--skra-sys-spacing-2);
1069
+ --skra-comp-menu-viewport-padding: var(--skra-sys-spacing-2);
1070
+ --skra-comp-menu-item-foreground: var(--skra-sys-color-on-surface);
1071
+ --skra-comp-menu-item-background-hover: var(--skra-sys-color-surface-hover);
1072
+ --skra-comp-menu-item-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
1073
+ --skra-comp-menu-item-padding-block: var(--skra-sys-spacing-2);
1074
+ --skra-comp-menu-item-padding-inline: var(--skra-sys-spacing-3);
1075
+ --skra-comp-menu-item-gap: var(--skra-sys-spacing-2);
1076
+ --skra-comp-popover-background: var(--skra-sys-color-surface);
1077
+ --skra-comp-popover-foreground: var(--skra-sys-color-on-surface);
1078
+ --skra-comp-popover-border-color: var(--skra-sys-color-border);
1079
+ --skra-comp-popover-padding-block: var(--skra-sys-spacing-3);
1080
+ --skra-comp-popover-padding-inline: var(--skra-sys-spacing-3);
1081
+ --skra-comp-popover-motion-duration: var(--skra-sys-motion-duration-fast);
1082
+ --skra-comp-popover-motion-easing: var(--skra-sys-motion-easing-standard);
1083
+ --skra-comp-popover-focus-ring-color: var(--skra-sys-color-focus-ring);
1084
+ --skra-comp-popover-max-inline-size: var(--skra-sys-size-container-sm);
1085
+ --skra-comp-popover-offset: var(--skra-sys-spacing-2);
1086
+ --skra-comp-popover-viewport-padding: var(--skra-sys-spacing-2);
1087
+ --skra-comp-progress-background: var(--skra-sys-color-neutral-soft);
1088
+ --skra-comp-progress-foreground: var(--skra-sys-color-on-surface);
1089
+ --skra-comp-progress-border-color: var(--skra-sys-color-neutral-border);
1090
+ --skra-comp-progress-motion-duration: var(--skra-sys-motion-duration-fast);
1091
+ --skra-comp-progress-motion-easing: var(--skra-sys-motion-easing-standard);
1092
+ --skra-comp-progress-focus-ring-color: var(--skra-sys-color-focus-ring);
1093
+ --skra-comp-progress-fill-color: var(--skra-sys-color-primary-base);
1094
+ --skra-comp-select-background: var(--skra-sys-color-surface);
1095
+ --skra-comp-select-foreground: var(--skra-sys-color-on-surface);
1096
+ --skra-comp-select-border-color: var(--skra-sys-color-border);
1097
+ --skra-comp-select-padding-block: var(--skra-sys-spacing-2);
1098
+ --skra-comp-select-padding-inline: var(--skra-sys-spacing-3);
1099
+ --skra-comp-select-motion-duration: var(--skra-sys-motion-duration-fast);
1100
+ --skra-comp-select-motion-easing: var(--skra-sys-motion-easing-standard);
1101
+ --skra-comp-select-focus-ring-color: var(--skra-sys-color-focus-ring);
1102
+ --skra-comp-select-background-disabled: var(--skra-sys-color-surface-disabled);
1103
+ --skra-comp-select-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
1104
+ --skra-comp-select-background-readonly: var(--skra-sys-color-surface-raised);
1105
+ --skra-comp-select-border-color-validation-invalid: var(--skra-sys-color-danger-ink);
1106
+ --skra-comp-select-gap: var(--skra-sys-spacing-2);
1107
+ --skra-comp-select-arrow-color: var(--skra-sys-color-on-surface-subtle);
1108
+ --skra-comp-select-panel-background: var(--skra-sys-color-surface);
1109
+ --skra-comp-select-panel-foreground: var(--skra-sys-color-on-surface);
1110
+ --skra-comp-select-panel-border-color: var(--skra-sys-color-border);
1111
+ --skra-comp-select-panel-max-block-size: var(--skra-sys-size-container-sm);
1112
+ --skra-comp-select-panel-padding-block: var(--skra-sys-spacing-1);
1113
+ --skra-comp-select-panel-padding-inline: var(--skra-sys-spacing-1);
1114
+ --skra-comp-select-panel-offset: var(--skra-sys-spacing-1);
1115
+ --skra-comp-select-panel-viewport-padding: var(--skra-sys-spacing-2);
1116
+ --skra-comp-select-option-foreground: var(--skra-sys-color-on-surface);
1117
+ --skra-comp-select-option-background-hover: var(--skra-sys-color-surface-hover);
1118
+ --skra-comp-select-option-background-active: var(--skra-sys-color-surface-hover);
1119
+ --skra-comp-select-option-background-selected: var(--skra-sys-color-primary-soft);
1120
+ --skra-comp-select-option-foreground-selected: var(--skra-sys-color-on-surface);
1121
+ --skra-comp-select-option-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
1122
+ --skra-comp-select-option-detail-foreground: var(--skra-sys-color-on-surface-subtle);
1123
+ --skra-comp-select-option-padding-block: var(--skra-sys-spacing-2);
1124
+ --skra-comp-select-option-padding-inline: var(--skra-sys-spacing-3);
1125
+ --skra-comp-select-option-gap: var(--skra-sys-spacing-2);
1126
+ --skra-comp-select-indicator-color: var(--skra-sys-color-primary-ink);
1127
+ --skra-comp-select-option-checkbox-border-color: var(--skra-sys-color-border);
1128
+ --skra-comp-select-option-checkbox-background-selected: var(--skra-sys-color-primary-base);
1129
+ --skra-comp-select-option-checkbox-check-color: var(--skra-sys-color-primary-contrast);
1130
+ --skra-comp-skeleton-background: var(--skra-sys-color-surface-muted);
1131
+ --skra-comp-skeleton-foreground: var(--skra-sys-color-on-surface);
1132
+ --skra-comp-skeleton-border-color: var(--skra-sys-color-neutral-border);
1133
+ --skra-comp-skeleton-motion-duration: var(--skra-sys-motion-duration-fast);
1134
+ --skra-comp-skeleton-motion-easing: var(--skra-sys-motion-easing-standard);
1135
+ --skra-comp-skeleton-focus-ring-color: var(--skra-sys-color-focus-ring);
1136
+ --skra-comp-star-rating-star-color-empty: var(--skra-sys-color-border);
1137
+ --skra-comp-star-rating-star-color-filled: var(--skra-sys-color-primary-base);
1138
+ --skra-comp-star-rating-focus-ring-color: var(--skra-sys-color-focus-ring);
1139
+ --skra-comp-star-rating-motion-duration: var(--skra-sys-motion-duration-fast);
1140
+ --skra-comp-star-rating-motion-easing: var(--skra-sys-motion-easing-standard);
1141
+ --skra-comp-status-dot-background: var(--skra-sys-color-neutral-base);
1142
+ --skra-comp-status-dot-foreground: var(--skra-sys-color-neutral-contrast);
1143
+ --skra-comp-status-dot-border-color: var(--skra-sys-color-surface);
1144
+ --skra-comp-status-dot-motion-duration: var(--skra-sys-motion-duration-fast);
1145
+ --skra-comp-status-dot-motion-easing: var(--skra-sys-motion-easing-standard);
1146
+ --skra-comp-status-dot-focus-ring-color: var(--skra-sys-color-focus-ring);
1147
+ --skra-comp-status-dot-size-sm: var(--skra-sys-size-status-dot-sm);
1148
+ --skra-comp-status-dot-size-md: var(--skra-sys-size-status-dot-md);
1149
+ --skra-comp-status-dot-size-lg: var(--skra-sys-size-status-dot-lg);
1150
+ --skra-comp-tabs-foreground: var(--skra-sys-color-on-surface-subtle);
1151
+ --skra-comp-tabs-padding-block: var(--skra-sys-spacing-2);
1152
+ --skra-comp-tabs-padding-inline: var(--skra-sys-spacing-4);
1153
+ --skra-comp-tabs-motion-duration: var(--skra-sys-motion-duration-fast);
1154
+ --skra-comp-tabs-motion-easing: var(--skra-sys-motion-easing-standard);
1155
+ --skra-comp-tabs-focus-ring-color: var(--skra-sys-color-focus-ring);
1156
+ --skra-comp-tabs-foreground-selected: var(--skra-sys-color-on-surface-strong);
1157
+ --skra-comp-tabs-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
1158
+ --skra-comp-tabs-background-hover: var(--skra-sys-color-surface-hover);
1159
+ --skra-comp-tabs-indicator-color: var(--skra-sys-color-primary-base);
1160
+ --skra-comp-tabs-tablist-border-color: var(--skra-sys-color-border);
1161
+ --skra-comp-tabs-gap: var(--skra-sys-spacing-1);
1162
+ --skra-comp-tabs-panel-padding-block: var(--skra-sys-spacing-4);
1163
+ --skra-comp-tabs-panel-padding-inline: var(--skra-sys-spacing-1);
1164
+ --skra-comp-toast-background: var(--skra-sys-color-neutral-soft);
1165
+ --skra-comp-toast-foreground: var(--skra-sys-color-neutral-ink);
1166
+ --skra-comp-toast-border-color: var(--skra-sys-color-neutral-border);
1167
+ --skra-comp-toast-padding-block: var(--skra-sys-spacing-3);
1168
+ --skra-comp-toast-padding-inline: var(--skra-sys-spacing-4);
1169
+ --skra-comp-toast-motion-duration: var(--skra-sys-motion-duration-normal);
1170
+ --skra-comp-toast-motion-easing: var(--skra-sys-motion-easing-emphasized);
1171
+ --skra-comp-toast-focus-ring-color: var(--skra-sys-color-focus-ring);
1172
+ --skra-comp-toast-icon-gap: var(--skra-sys-spacing-3);
1173
+ --skra-comp-toast-region-inset-block: var(--skra-sys-spacing-5);
1174
+ --skra-comp-toast-region-inset-inline: var(--skra-sys-spacing-5);
1175
+ --skra-comp-toast-region-gap: var(--skra-sys-spacing-3);
1176
+ --skra-comp-toast-region-max-inline-size: var(--skra-sys-size-container-sm);
1177
+ --skra-comp-tooltip-background: var(--skra-sys-color-inverse-surface);
1178
+ --skra-comp-tooltip-foreground: var(--skra-sys-color-on-inverse-surface);
1179
+ --skra-comp-tooltip-padding-block: var(--skra-sys-spacing-1);
1180
+ --skra-comp-tooltip-padding-inline: var(--skra-sys-spacing-2);
1181
+ --skra-comp-tooltip-motion-duration: var(--skra-sys-motion-duration-fast);
1182
+ --skra-comp-tooltip-motion-easing: var(--skra-sys-motion-easing-standard);
1183
+ --skra-comp-tooltip-focus-ring-color: var(--skra-sys-color-focus-ring);
1184
+ --skra-comp-tooltip-max-inline-size: var(--skra-sys-size-tooltip-max);
1185
+ --skra-comp-tooltip-offset: var(--skra-sys-spacing-2);
1186
+ --skra-comp-tooltip-viewport-padding: var(--skra-sys-spacing-2);
1187
+ --skra-comp-tooltip-show-delay: var(--skra-sys-motion-delay-long);
1188
+ --skra-comp-tooltip-hide-delay: var(--skra-sys-motion-delay-short);
1189
+ --skra-comp-typography-display-large-font-family: var(--skra-sys-typography-role-display-large-font-family);
1190
+ --skra-comp-typography-display-large-font-size: var(--skra-sys-typography-role-display-large-font-size);
1191
+ --skra-comp-typography-display-large-font-weight: var(--skra-sys-typography-role-display-large-font-weight);
1192
+ --skra-comp-typography-display-large-line-height: var(--skra-sys-typography-role-display-large-line-height);
1193
+ --skra-comp-typography-display-large-foreground: var(--skra-sys-color-on-surface);
1194
+ --skra-comp-typography-display-medium-font-family: var(--skra-sys-typography-role-display-medium-font-family);
1195
+ --skra-comp-typography-display-medium-font-size: var(--skra-sys-typography-role-display-medium-font-size);
1196
+ --skra-comp-typography-display-medium-font-weight: var(--skra-sys-typography-role-display-medium-font-weight);
1197
+ --skra-comp-typography-display-medium-line-height: var(--skra-sys-typography-role-display-medium-line-height);
1198
+ --skra-comp-typography-display-medium-foreground: var(--skra-sys-color-on-surface);
1199
+ --skra-comp-typography-display-small-font-family: var(--skra-sys-typography-role-display-small-font-family);
1200
+ --skra-comp-typography-display-small-font-size: var(--skra-sys-typography-role-display-small-font-size);
1201
+ --skra-comp-typography-display-small-font-weight: var(--skra-sys-typography-role-display-small-font-weight);
1202
+ --skra-comp-typography-display-small-line-height: var(--skra-sys-typography-role-display-small-line-height);
1203
+ --skra-comp-typography-display-small-foreground: var(--skra-sys-color-on-surface);
1204
+ --skra-comp-typography-headline-large-font-family: var(--skra-sys-typography-role-headline-large-font-family);
1205
+ --skra-comp-typography-headline-large-font-size: var(--skra-sys-typography-role-headline-large-font-size);
1206
+ --skra-comp-typography-headline-large-font-weight: var(--skra-sys-typography-role-headline-large-font-weight);
1207
+ --skra-comp-typography-headline-large-line-height: var(--skra-sys-typography-role-headline-large-line-height);
1208
+ --skra-comp-typography-headline-large-foreground: var(--skra-sys-color-on-surface);
1209
+ --skra-comp-typography-headline-medium-font-family: var(--skra-sys-typography-role-headline-medium-font-family);
1210
+ --skra-comp-typography-headline-medium-font-size: var(--skra-sys-typography-role-headline-medium-font-size);
1211
+ --skra-comp-typography-headline-medium-font-weight: var(--skra-sys-typography-role-headline-medium-font-weight);
1212
+ --skra-comp-typography-headline-medium-line-height: var(--skra-sys-typography-role-headline-medium-line-height);
1213
+ --skra-comp-typography-headline-medium-foreground: var(--skra-sys-color-on-surface);
1214
+ --skra-comp-typography-headline-small-font-family: var(--skra-sys-typography-role-headline-small-font-family);
1215
+ --skra-comp-typography-headline-small-font-size: var(--skra-sys-typography-role-headline-small-font-size);
1216
+ --skra-comp-typography-headline-small-font-weight: var(--skra-sys-typography-role-headline-small-font-weight);
1217
+ --skra-comp-typography-headline-small-line-height: var(--skra-sys-typography-role-headline-small-line-height);
1218
+ --skra-comp-typography-headline-small-foreground: var(--skra-sys-color-on-surface);
1219
+ --skra-comp-typography-title-large-font-family: var(--skra-sys-typography-role-title-large-font-family);
1220
+ --skra-comp-typography-title-large-font-size: var(--skra-sys-typography-role-title-large-font-size);
1221
+ --skra-comp-typography-title-large-font-weight: var(--skra-sys-typography-role-title-large-font-weight);
1222
+ --skra-comp-typography-title-large-line-height: var(--skra-sys-typography-role-title-large-line-height);
1223
+ --skra-comp-typography-title-large-foreground: var(--skra-sys-color-on-surface);
1224
+ --skra-comp-typography-title-medium-font-family: var(--skra-sys-typography-role-title-medium-font-family);
1225
+ --skra-comp-typography-title-medium-font-size: var(--skra-sys-typography-role-title-medium-font-size);
1226
+ --skra-comp-typography-title-medium-font-weight: var(--skra-sys-typography-role-title-medium-font-weight);
1227
+ --skra-comp-typography-title-medium-line-height: var(--skra-sys-typography-role-title-medium-line-height);
1228
+ --skra-comp-typography-title-medium-foreground: var(--skra-sys-color-on-surface);
1229
+ --skra-comp-typography-title-small-font-family: var(--skra-sys-typography-role-title-small-font-family);
1230
+ --skra-comp-typography-title-small-font-size: var(--skra-sys-typography-role-title-small-font-size);
1231
+ --skra-comp-typography-title-small-font-weight: var(--skra-sys-typography-role-title-small-font-weight);
1232
+ --skra-comp-typography-title-small-line-height: var(--skra-sys-typography-role-title-small-line-height);
1233
+ --skra-comp-typography-title-small-foreground: var(--skra-sys-color-on-surface);
1234
+ --skra-comp-typography-body-large-font-family: var(--skra-sys-typography-role-body-large-font-family);
1235
+ --skra-comp-typography-body-large-font-size: var(--skra-sys-typography-role-body-large-font-size);
1236
+ --skra-comp-typography-body-large-font-weight: var(--skra-sys-typography-role-body-large-font-weight);
1237
+ --skra-comp-typography-body-large-line-height: var(--skra-sys-typography-role-body-large-line-height);
1238
+ --skra-comp-typography-body-large-foreground: var(--skra-sys-color-on-surface);
1239
+ --skra-comp-typography-body-medium-font-family: var(--skra-sys-typography-role-body-medium-font-family);
1240
+ --skra-comp-typography-body-medium-font-size: var(--skra-sys-typography-role-body-medium-font-size);
1241
+ --skra-comp-typography-body-medium-font-weight: var(--skra-sys-typography-role-body-medium-font-weight);
1242
+ --skra-comp-typography-body-medium-line-height: var(--skra-sys-typography-role-body-medium-line-height);
1243
+ --skra-comp-typography-body-medium-foreground: var(--skra-sys-color-on-surface);
1244
+ --skra-comp-typography-body-small-font-family: var(--skra-sys-typography-role-body-small-font-family);
1245
+ --skra-comp-typography-body-small-font-size: var(--skra-sys-typography-role-body-small-font-size);
1246
+ --skra-comp-typography-body-small-font-weight: var(--skra-sys-typography-role-body-small-font-weight);
1247
+ --skra-comp-typography-body-small-line-height: var(--skra-sys-typography-role-body-small-line-height);
1248
+ --skra-comp-typography-body-small-foreground: var(--skra-sys-color-on-surface-subtle);
1249
+ --skra-comp-typography-label-large-font-family: var(--skra-sys-typography-role-label-large-font-family);
1250
+ --skra-comp-typography-label-large-font-size: var(--skra-sys-typography-role-label-large-font-size);
1251
+ --skra-comp-typography-label-large-font-weight: var(--skra-sys-typography-role-label-large-font-weight);
1252
+ --skra-comp-typography-label-large-line-height: var(--skra-sys-typography-role-label-large-line-height);
1253
+ --skra-comp-typography-label-large-foreground: var(--skra-sys-color-on-surface);
1254
+ --skra-comp-typography-label-medium-font-family: var(--skra-sys-typography-role-label-medium-font-family);
1255
+ --skra-comp-typography-label-medium-font-size: var(--skra-sys-typography-role-label-medium-font-size);
1256
+ --skra-comp-typography-label-medium-font-weight: var(--skra-sys-typography-role-label-medium-font-weight);
1257
+ --skra-comp-typography-label-medium-line-height: var(--skra-sys-typography-role-label-medium-line-height);
1258
+ --skra-comp-typography-label-medium-foreground: var(--skra-sys-color-on-surface);
1259
+ --skra-comp-typography-label-small-font-family: var(--skra-sys-typography-role-label-small-font-family);
1260
+ --skra-comp-typography-label-small-font-size: var(--skra-sys-typography-role-label-small-font-size);
1261
+ --skra-comp-typography-label-small-font-weight: var(--skra-sys-typography-role-label-small-font-weight);
1262
+ --skra-comp-typography-label-small-line-height: var(--skra-sys-typography-role-label-small-line-height);
1263
+ --skra-comp-typography-label-small-foreground: var(--skra-sys-color-on-surface-subtle);
1264
+ --skra-comp-typography-foreground-error: var(--skra-sys-color-danger-ink);
1265
+ --skra-comp-typography-foreground-warning: var(--skra-sys-color-warning-ink);
1266
+ --skra-comp-typography-foreground-success: var(--skra-sys-color-success-ink);
1267
+ --skra-comp-box-padding-sm: var(--skra-sys-spacing-1);
1268
+ --skra-comp-box-padding-md: var(--skra-sys-spacing-2);
1269
+ --skra-comp-box-padding-lg: var(--skra-sys-spacing-4);
1270
+ --skra-comp-grid-gap-sm: var(--skra-sys-spacing-1);
1271
+ --skra-comp-grid-gap-md: var(--skra-sys-spacing-2);
1272
+ --skra-comp-grid-gap-lg: var(--skra-sys-spacing-4);
1273
+ --skra-comp-grid-min-sm: var(--skra-sys-size-grid-track-sm);
1274
+ --skra-comp-grid-min-md: var(--skra-sys-size-grid-track-md);
1275
+ --skra-comp-grid-min-lg: var(--skra-sys-size-grid-track-lg);
1276
+ --skra-comp-icon-size-default: var(--skra-sys-size-icon-md);
1277
+ --skra-comp-icon-size-sm: var(--skra-sys-size-icon-sm);
1278
+ --skra-comp-icon-size-md: var(--skra-sys-size-icon-md);
1279
+ --skra-comp-icon-size-lg: var(--skra-sys-size-icon-lg);
1280
+ --skra-comp-stack-gap-sm: var(--skra-sys-spacing-1);
1281
+ --skra-comp-stack-gap-md: var(--skra-sys-spacing-2);
1282
+ --skra-comp-stack-gap-lg: var(--skra-sys-spacing-4);
1283
+ }
1284
+
1285
+ /* O-24 — build-baked form-control glyphs (token-resolved colour per scheme) — form-glyph-synth.mjs */
1286
+ [data-skra-skin="brutal"] {
1287
+ --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");
1288
+ --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");
1289
+ }