@skra/tokens 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/LICENSE +201 -0
  2. package/NOTICE +7 -0
  3. package/README.md +64 -0
  4. package/brutal/_baseline.scss +22 -0
  5. package/brutal/_comp.scss +985 -0
  6. package/brutal/_density.comfortable.scoped.scss +166 -0
  7. package/brutal/_density.comfortable.scss +166 -0
  8. package/brutal/_density.compact.scoped.scss +166 -0
  9. package/brutal/_density.compact.scss +166 -0
  10. package/brutal/_theme.dark.scoped.scss +707 -0
  11. package/brutal/_theme.dark.scss +708 -0
  12. package/brutal/_theme.scoped.scss +1289 -0
  13. package/brutal/_theme.scss +451 -0
  14. package/brutal/skin.config.json +40 -0
  15. package/manifests/accordion.json +52 -0
  16. package/manifests/alert.json +107 -0
  17. package/manifests/avatar.json +78 -0
  18. package/manifests/badge.json +63 -0
  19. package/manifests/box.json +34 -0
  20. package/manifests/button.json +133 -0
  21. package/manifests/chip.json +116 -0
  22. package/manifests/combobox.json +141 -0
  23. package/manifests/datepicker.json +159 -0
  24. package/manifests/dialog.json +104 -0
  25. package/manifests/field.json +267 -0
  26. package/manifests/grid.json +61 -0
  27. package/manifests/icon.json +43 -0
  28. package/manifests/kbd.json +68 -0
  29. package/manifests/link.json +107 -0
  30. package/manifests/menu.json +122 -0
  31. package/manifests/popover.json +104 -0
  32. package/manifests/progress.json +69 -0
  33. package/manifests/select.json +177 -0
  34. package/manifests/skeleton.json +43 -0
  35. package/manifests/stack.json +34 -0
  36. package/manifests/star-rating.json +96 -0
  37. package/manifests/status-dot.json +69 -0
  38. package/manifests/tabs.json +52 -0
  39. package/manifests/toast.json +133 -0
  40. package/manifests/tooltip.json +113 -0
  41. package/manifests/typography.json +169 -0
  42. package/overlays/brand-jade.scss +9 -0
  43. package/overlays/round-corners.scss +8 -0
  44. package/overlays/square-corners.scss +8 -0
  45. package/package.json +19 -0
  46. package/skra/_baseline.scss +22 -0
  47. package/skra/_comp.scss +981 -0
  48. package/skra/_density.comfortable.scss +166 -0
  49. package/skra/_density.compact.scss +166 -0
  50. package/skra/_form-controls.scss +74 -0
  51. package/skra/_overlay.scss +42 -0
  52. package/skra/_theme.dark.scss +698 -0
  53. package/skra/_theme.scss +448 -0
  54. package/skra/skin.config.json +37 -0
  55. package/skra/utilities.scss +38 -0
@@ -0,0 +1,698 @@
1
+ /* dist/tokens/skra/_theme.dark.scss — auto-generated by build-tokens.mjs (ADR 026 §7.1 / O-5)
2
+ * Role-aware OKLCH dark scheme. Opt-in: import AFTER _theme.scss, then set
3
+ * [data-skra-color-scheme="dark"] on an ancestor. Tune any token by hand in
4
+ * tokens/skins/skra/sys/color-dark.json (manual wins over synthesis).
5
+ */
6
+
7
+ [data-skra-color-scheme="dark"] {
8
+ --skra-sys-color-neutral-base: oklch(50.0% 0 0);
9
+ --skra-sys-color-neutral-border: oklch(60.0% 0 0);
10
+ --skra-sys-color-neutral-soft: oklch(24.0% 0 0);
11
+ --skra-sys-color-neutral-strong: oklch(75.0% 0 0);
12
+ --skra-sys-color-neutral-ink: oklch(65.0% 0 0);
13
+ --skra-sys-color-neutral-contrast: oklch(96.0% 0 0);
14
+ --skra-sys-color-neutral-base-hover: oklch(57.0% 0 0);
15
+ --skra-sys-color-neutral-base-active: oklch(60.5% 0 0);
16
+ --skra-sys-color-neutral-border-hover: oklch(53.0% 0 0);
17
+ --skra-sys-color-neutral-border-active: oklch(49.5% 0 0);
18
+ --skra-sys-color-neutral-soft-hover: oklch(31.0% 0 0);
19
+ --skra-sys-color-neutral-soft-active: oklch(34.5% 0 0);
20
+ --skra-sys-color-neutral-strong-hover: oklch(68.0% 0 0);
21
+ --skra-sys-color-neutral-strong-active: oklch(64.5% 0 0);
22
+ --skra-sys-color-neutral-ink-hover: oklch(58.0% 0 0);
23
+ --skra-sys-color-neutral-ink-active: oklch(54.5% 0 0);
24
+ --skra-sys-color-neutral-contrast-hover: oklch(89.0% 0 0);
25
+ --skra-sys-color-neutral-contrast-active: oklch(85.5% 0 0);
26
+ --skra-sys-color-primary-base: oklch(67.0% 0.135 250);
27
+ --skra-sys-color-primary-border: oklch(67.0% 0.135 250);
28
+ --skra-sys-color-primary-soft: oklch(24.0% 0.04 250);
29
+ --skra-sys-color-primary-strong: oklch(62.0% 0.135 250);
30
+ --skra-sys-color-primary-ink: oklch(67.0% 0.135 250);
31
+ --skra-sys-color-primary-contrast: oklch(18.0% 0 0);
32
+ --skra-sys-color-primary-base-hover: oklch(60.0% 0.135 250);
33
+ --skra-sys-color-primary-base-active: oklch(56.5% 0.135 250);
34
+ --skra-sys-color-primary-border-hover: oklch(60.0% 0.135 250);
35
+ --skra-sys-color-primary-border-active: oklch(56.5% 0.135 250);
36
+ --skra-sys-color-primary-soft-hover: oklch(31.0% 0.04 250);
37
+ --skra-sys-color-primary-soft-active: oklch(34.5% 0.04 250);
38
+ --skra-sys-color-primary-strong-hover: oklch(55.0% 0.135 250);
39
+ --skra-sys-color-primary-strong-active: oklch(51.5% 0.135 250);
40
+ --skra-sys-color-primary-ink-hover: oklch(60.0% 0.135 250);
41
+ --skra-sys-color-primary-ink-active: oklch(56.5% 0.135 250);
42
+ --skra-sys-color-primary-contrast-hover: oklch(25.0% 0 0);
43
+ --skra-sys-color-primary-contrast-active: oklch(28.5% 0 0);
44
+ --skra-sys-color-secondary-base: oklch(68.0% 0.036 250);
45
+ --skra-sys-color-secondary-border: oklch(60.0% 0.036 250);
46
+ --skra-sys-color-secondary-soft: oklch(24.0% 0.02 250);
47
+ --skra-sys-color-secondary-strong: oklch(62.0% 0.036 250);
48
+ --skra-sys-color-secondary-ink: oklch(68.0% 0.036 250);
49
+ --skra-sys-color-secondary-contrast: oklch(18.0% 0 0);
50
+ --skra-sys-color-secondary-base-hover: oklch(61.0% 0.036 250);
51
+ --skra-sys-color-secondary-base-active: oklch(57.5% 0.036 250);
52
+ --skra-sys-color-secondary-border-hover: oklch(53.0% 0.036 250);
53
+ --skra-sys-color-secondary-border-active: oklch(49.5% 0.036 250);
54
+ --skra-sys-color-secondary-soft-hover: oklch(31.0% 0.02 250);
55
+ --skra-sys-color-secondary-soft-active: oklch(34.5% 0.02 250);
56
+ --skra-sys-color-secondary-strong-hover: oklch(55.0% 0.036 250);
57
+ --skra-sys-color-secondary-strong-active: oklch(51.5% 0.036 250);
58
+ --skra-sys-color-secondary-ink-hover: oklch(61.0% 0.036 250);
59
+ --skra-sys-color-secondary-ink-active: oklch(57.5% 0.036 250);
60
+ --skra-sys-color-secondary-contrast-hover: oklch(25.0% 0 0);
61
+ --skra-sys-color-secondary-contrast-active: oklch(28.5% 0 0);
62
+ --skra-sys-color-info-base: oklch(65.0% 0.108 220);
63
+ --skra-sys-color-info-border: oklch(65.0% 0.108 220);
64
+ --skra-sys-color-info-soft: oklch(24.0% 0.04 220);
65
+ --skra-sys-color-info-strong: oklch(61.5% 0.108 220);
66
+ --skra-sys-color-info-ink: oklch(65.0% 0.108 220);
67
+ --skra-sys-color-info-contrast: oklch(18.0% 0 0);
68
+ --skra-sys-color-info-base-hover: oklch(58.0% 0.108 220);
69
+ --skra-sys-color-info-base-active: oklch(54.5% 0.108 220);
70
+ --skra-sys-color-info-border-hover: oklch(58.0% 0.108 220);
71
+ --skra-sys-color-info-border-active: oklch(54.5% 0.108 220);
72
+ --skra-sys-color-info-soft-hover: oklch(31.0% 0.04 220);
73
+ --skra-sys-color-info-soft-active: oklch(34.5% 0.04 220);
74
+ --skra-sys-color-info-strong-hover: oklch(54.5% 0.108 220);
75
+ --skra-sys-color-info-strong-active: oklch(51.0% 0.108 220);
76
+ --skra-sys-color-info-ink-hover: oklch(58.0% 0.108 220);
77
+ --skra-sys-color-info-ink-active: oklch(54.5% 0.108 220);
78
+ --skra-sys-color-info-contrast-hover: oklch(25.0% 0 0);
79
+ --skra-sys-color-info-contrast-active: oklch(28.5% 0 0);
80
+ --skra-sys-color-success-base: oklch(67.0% 0.135 145);
81
+ --skra-sys-color-success-border: oklch(63.0% 0.135 145);
82
+ --skra-sys-color-success-soft: oklch(24.0% 0.05 145);
83
+ --skra-sys-color-success-strong: oklch(61.5% 0.117 145);
84
+ --skra-sys-color-success-ink: oklch(67.0% 0.135 145);
85
+ --skra-sys-color-success-contrast: oklch(18.0% 0 0);
86
+ --skra-sys-color-success-base-hover: oklch(60.0% 0.135 145);
87
+ --skra-sys-color-success-base-active: oklch(56.5% 0.135 145);
88
+ --skra-sys-color-success-border-hover: oklch(56.0% 0.135 145);
89
+ --skra-sys-color-success-border-active: oklch(52.5% 0.135 145);
90
+ --skra-sys-color-success-soft-hover: oklch(31.0% 0.05 145);
91
+ --skra-sys-color-success-soft-active: oklch(34.5% 0.05 145);
92
+ --skra-sys-color-success-strong-hover: oklch(54.5% 0.117 145);
93
+ --skra-sys-color-success-strong-active: oklch(51.0% 0.117 145);
94
+ --skra-sys-color-success-ink-hover: oklch(60.0% 0.135 145);
95
+ --skra-sys-color-success-ink-active: oklch(56.5% 0.135 145);
96
+ --skra-sys-color-success-contrast-hover: oklch(25.0% 0 0);
97
+ --skra-sys-color-success-contrast-active: oklch(28.5% 0 0);
98
+ --skra-sys-color-warning-base: oklch(82.0% 0.135 80);
99
+ --skra-sys-color-warning-border: oklch(75.0% 0.135 80);
100
+ --skra-sys-color-warning-soft: oklch(24.0% 0.05 80);
101
+ --skra-sys-color-warning-strong: oklch(62.5% 0.108 80);
102
+ --skra-sys-color-warning-ink: oklch(58.0% 0.108 80);
103
+ --skra-sys-color-warning-contrast: oklch(18.0% 0 0);
104
+ --skra-sys-color-warning-base-hover: oklch(75.0% 0.135 80);
105
+ --skra-sys-color-warning-base-active: oklch(71.5% 0.135 80);
106
+ --skra-sys-color-warning-border-hover: oklch(68.0% 0.135 80);
107
+ --skra-sys-color-warning-border-active: oklch(64.5% 0.135 80);
108
+ --skra-sys-color-warning-soft-hover: oklch(31.0% 0.05 80);
109
+ --skra-sys-color-warning-soft-active: oklch(34.5% 0.05 80);
110
+ --skra-sys-color-warning-strong-hover: oklch(55.5% 0.108 80);
111
+ --skra-sys-color-warning-strong-active: oklch(52.0% 0.108 80);
112
+ --skra-sys-color-warning-ink-hover: oklch(51.0% 0.108 80);
113
+ --skra-sys-color-warning-ink-active: oklch(47.5% 0.108 80);
114
+ --skra-sys-color-warning-contrast-hover: oklch(25.0% 0 0);
115
+ --skra-sys-color-warning-contrast-active: oklch(28.5% 0 0);
116
+ --skra-sys-color-danger-base: oklch(70.0% 0.18 25);
117
+ --skra-sys-color-danger-border: oklch(63.0% 0.18 25);
118
+ --skra-sys-color-danger-soft: oklch(24.0% 0.04 25);
119
+ --skra-sys-color-danger-strong: oklch(63.5% 0.144 25);
120
+ --skra-sys-color-danger-ink: oklch(70.0% 0.18 25);
121
+ --skra-sys-color-danger-contrast: oklch(18.0% 0 0);
122
+ --skra-sys-color-danger-base-hover: oklch(63.0% 0.18 25);
123
+ --skra-sys-color-danger-base-active: oklch(59.5% 0.18 25);
124
+ --skra-sys-color-danger-border-hover: oklch(56.0% 0.18 25);
125
+ --skra-sys-color-danger-border-active: oklch(52.5% 0.18 25);
126
+ --skra-sys-color-danger-soft-hover: oklch(31.0% 0.04 25);
127
+ --skra-sys-color-danger-soft-active: oklch(34.5% 0.04 25);
128
+ --skra-sys-color-danger-strong-hover: oklch(56.5% 0.144 25);
129
+ --skra-sys-color-danger-strong-active: oklch(53.0% 0.144 25);
130
+ --skra-sys-color-danger-ink-hover: oklch(63.0% 0.18 25);
131
+ --skra-sys-color-danger-ink-active: oklch(59.5% 0.18 25);
132
+ --skra-sys-color-danger-contrast-hover: oklch(25.0% 0 0);
133
+ --skra-sys-color-danger-contrast-active: oklch(28.5% 0 0);
134
+ --skra-sys-color-surface: oklch(15.0% 0 0);
135
+ --skra-sys-color-surface-raised: oklch(19.0% 0 0);
136
+ --skra-sys-color-surface-hover: oklch(23.0% 0 0);
137
+ --skra-sys-color-surface-disabled: oklch(19.0% 0 0);
138
+ --skra-sys-color-surface-muted: oklch(36.0% 0 0);
139
+ --skra-sys-color-on-surface: oklch(92.0% 0 0);
140
+ --skra-sys-color-on-surface-strong: oklch(92.0% 0 0);
141
+ --skra-sys-color-on-surface-subtle: oklch(65.0% 0 0);
142
+ --skra-sys-color-on-surface-disabled: oklch(60.0% 0 0);
143
+ --skra-sys-color-inverse-surface: oklch(75.0% 0 0);
144
+ --skra-sys-color-on-inverse-surface: oklch(10.0% 0 0);
145
+ --skra-sys-color-border: oklch(92.0% 0 0);
146
+ --skra-sys-color-border-subtle: oklch(60.0% 0 0);
147
+ --skra-sys-color-hint: oklch(60.0% 0 0);
148
+ --skra-sys-color-focus-ring: oklch(75.0% 0.135 250);
149
+ --skra-sys-color-link: oklch(67.0% 0.135 250);
150
+ --skra-sys-color-link-hover: oklch(58.0% 0.135 250);
151
+ --skra-sys-color-link-visited: oklch(60.0% 0.162 295);
152
+ --skra-sys-color-surface-active: oklch(25.5% 0 0);
153
+ --skra-sys-color-surface-raised-hover: oklch(26.0% 0 0);
154
+ --skra-sys-color-surface-raised-active: oklch(29.5% 0 0);
155
+ --skra-sys-color-surface-muted-hover: oklch(43.0% 0 0);
156
+ --skra-sys-color-surface-muted-active: oklch(46.5% 0 0);
157
+ --skra-sys-color-on-surface-hover: oklch(85.0% 0 0);
158
+ --skra-sys-color-on-surface-active: oklch(81.5% 0 0);
159
+ --skra-sys-color-on-surface-strong-hover: oklch(85.0% 0 0);
160
+ --skra-sys-color-on-surface-strong-active: oklch(81.5% 0 0);
161
+ --skra-sys-color-on-surface-subtle-hover: oklch(58.0% 0 0);
162
+ --skra-sys-color-on-surface-subtle-active: oklch(54.5% 0 0);
163
+ --skra-sys-color-inverse-surface-hover: oklch(68.0% 0 0);
164
+ --skra-sys-color-inverse-surface-active: oklch(64.5% 0 0);
165
+ --skra-sys-color-on-inverse-surface-hover: oklch(17.0% 0 0);
166
+ --skra-sys-color-on-inverse-surface-active: oklch(20.5% 0 0);
167
+ --skra-sys-color-border-hover: oklch(85.0% 0 0);
168
+ --skra-sys-color-border-active: oklch(81.5% 0 0);
169
+ --skra-sys-color-border-subtle-hover: oklch(53.0% 0 0);
170
+ --skra-sys-color-border-subtle-active: oklch(49.5% 0 0);
171
+ --skra-sys-color-hint-hover: oklch(53.0% 0 0);
172
+ --skra-sys-color-hint-active: oklch(49.5% 0 0);
173
+ --skra-sys-color-focus-ring-hover: oklch(68.0% 0.135 250);
174
+ --skra-sys-color-focus-ring-active: oklch(64.5% 0.135 250);
175
+ --skra-sys-color-link-active: oklch(56.5% 0.135 250);
176
+ --skra-comp-accordion-foreground-hover: oklch(85.0% 0 0);
177
+ --skra-comp-accordion-foreground-active: oklch(81.5% 0 0);
178
+ --skra-comp-accordion-focus-ring-color-hover: oklch(68.0% 0.135 250);
179
+ --skra-comp-accordion-focus-ring-color-active: oklch(64.5% 0.135 250);
180
+ --skra-comp-accordion-header-foreground-expanded-hover: oklch(85.0% 0 0);
181
+ --skra-comp-accordion-header-foreground-expanded-active: oklch(81.5% 0 0);
182
+ --skra-comp-accordion-indicator-color-hover: oklch(58.0% 0 0);
183
+ --skra-comp-accordion-indicator-color-active: oklch(54.5% 0 0);
184
+ --skra-comp-accordion-root-background-hover: oklch(22.0% 0 0);
185
+ --skra-comp-accordion-root-background-active: oklch(25.5% 0 0);
186
+ --skra-comp-accordion-root-border-color-hover: oklch(53.0% 0 0);
187
+ --skra-comp-accordion-root-border-color-active: oklch(49.5% 0 0);
188
+ --skra-comp-accordion-item-divider-color-hover: oklch(53.0% 0 0);
189
+ --skra-comp-accordion-item-divider-color-active: oklch(49.5% 0 0);
190
+ --skra-comp-accordion-panel-foreground-hover: oklch(58.0% 0 0);
191
+ --skra-comp-accordion-panel-foreground-active: oklch(54.5% 0 0);
192
+ --skra-comp-alert-background-hover: oklch(31.0% 0 0);
193
+ --skra-comp-alert-background-active: oklch(34.5% 0 0);
194
+ --skra-comp-alert-foreground-hover: oklch(58.0% 0 0);
195
+ --skra-comp-alert-foreground-active: oklch(54.5% 0 0);
196
+ --skra-comp-alert-border-color-hover: oklch(53.0% 0 0);
197
+ --skra-comp-alert-border-color-active: oklch(49.5% 0 0);
198
+ --skra-comp-alert-focus-ring-color-hover: oklch(68.0% 0.135 250);
199
+ --skra-comp-alert-focus-ring-color-active: oklch(64.5% 0.135 250);
200
+ --skra-comp-avatar-background-hover: oklch(31.0% 0 0);
201
+ --skra-comp-avatar-background-active: oklch(34.5% 0 0);
202
+ --skra-comp-avatar-foreground-hover: oklch(68.0% 0 0);
203
+ --skra-comp-avatar-foreground-active: oklch(64.5% 0 0);
204
+ --skra-comp-avatar-border-color-hover: oklch(53.0% 0 0);
205
+ --skra-comp-avatar-border-color-active: oklch(49.5% 0 0);
206
+ --skra-comp-avatar-focus-ring-color-hover: oklch(68.0% 0.135 250);
207
+ --skra-comp-avatar-focus-ring-color-active: oklch(64.5% 0.135 250);
208
+ --skra-comp-badge-background-hover: oklch(31.0% 0 0);
209
+ --skra-comp-badge-background-active: oklch(34.5% 0 0);
210
+ --skra-comp-badge-foreground-hover: oklch(58.0% 0 0);
211
+ --skra-comp-badge-foreground-active: oklch(54.5% 0 0);
212
+ --skra-comp-badge-border-color-hover: oklch(53.0% 0 0);
213
+ --skra-comp-badge-border-color-active: oklch(49.5% 0 0);
214
+ --skra-comp-badge-focus-ring-color-hover: oklch(68.0% 0.135 250);
215
+ --skra-comp-badge-focus-ring-color-active: oklch(64.5% 0.135 250);
216
+ --skra-comp-button-background-hover: oklch(57.0% 0 0);
217
+ --skra-comp-button-background-active: oklch(60.5% 0 0);
218
+ --skra-comp-button-foreground-hover: oklch(89.0% 0 0);
219
+ --skra-comp-button-foreground-active: oklch(85.5% 0 0);
220
+ --skra-comp-button-focus-ring-color-hover: oklch(68.0% 0.135 250);
221
+ --skra-comp-button-focus-ring-color-active: oklch(64.5% 0.135 250);
222
+ --skra-comp-button-loading-indicator-color-hover: oklch(85.0% 0 0);
223
+ --skra-comp-button-loading-indicator-color-active: oklch(81.5% 0 0);
224
+ --skra-comp-chip-background-hover: oklch(31.0% 0 0);
225
+ --skra-comp-chip-background-active: oklch(34.5% 0 0);
226
+ --skra-comp-chip-foreground-hover: oklch(58.0% 0 0);
227
+ --skra-comp-chip-foreground-active: oklch(54.5% 0 0);
228
+ --skra-comp-chip-border-color-hover: oklch(53.0% 0 0);
229
+ --skra-comp-chip-border-color-active: oklch(49.5% 0 0);
230
+ --skra-comp-chip-focus-ring-color-hover: oklch(68.0% 0.135 250);
231
+ --skra-comp-chip-focus-ring-color-active: oklch(64.5% 0.135 250);
232
+ --skra-comp-combobox-background-hover: oklch(22.0% 0 0);
233
+ --skra-comp-combobox-background-active: oklch(25.5% 0 0);
234
+ --skra-comp-combobox-foreground-hover: oklch(85.0% 0 0);
235
+ --skra-comp-combobox-foreground-active: oklch(81.5% 0 0);
236
+ --skra-comp-combobox-border-color-hover: oklch(85.0% 0 0);
237
+ --skra-comp-combobox-border-color-active: oklch(81.5% 0 0);
238
+ --skra-comp-combobox-focus-ring-color-hover: oklch(68.0% 0.135 250);
239
+ --skra-comp-combobox-focus-ring-color-active: oklch(64.5% 0.135 250);
240
+ --skra-comp-combobox-background-readonly-hover: oklch(26.0% 0 0);
241
+ --skra-comp-combobox-background-readonly-active: oklch(29.5% 0 0);
242
+ --skra-comp-combobox-border-color-validation-invalid-hover: oklch(63.0% 0.18 25);
243
+ --skra-comp-combobox-border-color-validation-invalid-active: oklch(59.5% 0.18 25);
244
+ --skra-comp-combobox-arrow-color-hover: oklch(58.0% 0 0);
245
+ --skra-comp-combobox-arrow-color-active: oklch(54.5% 0 0);
246
+ --skra-comp-combobox-panel-background-hover: oklch(22.0% 0 0);
247
+ --skra-comp-combobox-panel-background-active: oklch(25.5% 0 0);
248
+ --skra-comp-combobox-panel-foreground-hover: oklch(85.0% 0 0);
249
+ --skra-comp-combobox-panel-foreground-active: oklch(81.5% 0 0);
250
+ --skra-comp-combobox-panel-border-color-hover: oklch(53.0% 0 0);
251
+ --skra-comp-combobox-panel-border-color-active: oklch(49.5% 0 0);
252
+ --skra-comp-combobox-loading-indicator-color-hover: oklch(85.0% 0 0);
253
+ --skra-comp-combobox-loading-indicator-color-active: oklch(81.5% 0 0);
254
+ --skra-comp-combobox-empty-foreground-hover: oklch(58.0% 0 0);
255
+ --skra-comp-combobox-empty-foreground-active: oklch(54.5% 0 0);
256
+ --skra-comp-datepicker-background-hover: oklch(22.0% 0 0);
257
+ --skra-comp-datepicker-background-active: oklch(25.5% 0 0);
258
+ --skra-comp-datepicker-foreground-hover: oklch(85.0% 0 0);
259
+ --skra-comp-datepicker-foreground-active: oklch(81.5% 0 0);
260
+ --skra-comp-datepicker-border-color-hover: oklch(85.0% 0 0);
261
+ --skra-comp-datepicker-border-color-active: oklch(81.5% 0 0);
262
+ --skra-comp-datepicker-focus-ring-color-hover: oklch(68.0% 0.135 250);
263
+ --skra-comp-datepicker-focus-ring-color-active: oklch(64.5% 0.135 250);
264
+ --skra-comp-datepicker-background-readonly-hover: oklch(26.0% 0 0);
265
+ --skra-comp-datepicker-background-readonly-active: oklch(29.5% 0 0);
266
+ --skra-comp-datepicker-border-color-validation-invalid-hover: oklch(63.0% 0.18 25);
267
+ --skra-comp-datepicker-border-color-validation-invalid-active: oklch(59.5% 0.18 25);
268
+ --skra-comp-datepicker-icon-color-hover: oklch(58.0% 0 0);
269
+ --skra-comp-datepicker-icon-color-active: oklch(54.5% 0 0);
270
+ --skra-comp-datepicker-panel-background-hover: oklch(22.0% 0 0);
271
+ --skra-comp-datepicker-panel-background-active: oklch(25.5% 0 0);
272
+ --skra-comp-datepicker-panel-foreground-hover: oklch(85.0% 0 0);
273
+ --skra-comp-datepicker-panel-foreground-active: oklch(81.5% 0 0);
274
+ --skra-comp-datepicker-panel-border-color-hover: oklch(53.0% 0 0);
275
+ --skra-comp-datepicker-panel-border-color-active: oklch(49.5% 0 0);
276
+ --skra-comp-datepicker-header-foreground-hover: oklch(85.0% 0 0);
277
+ --skra-comp-datepicker-header-foreground-active: oklch(81.5% 0 0);
278
+ --skra-comp-datepicker-nav-color-active: oklch(54.5% 0 0);
279
+ --skra-comp-datepicker-weekday-foreground-hover: oklch(58.0% 0 0);
280
+ --skra-comp-datepicker-weekday-foreground-active: oklch(54.5% 0 0);
281
+ --skra-comp-datepicker-day-foreground-hover: oklch(85.0% 0 0);
282
+ --skra-comp-datepicker-day-foreground-active: oklch(81.5% 0 0);
283
+ --skra-comp-datepicker-day-today-indicator-color-hover: oklch(60.0% 0.135 250);
284
+ --skra-comp-datepicker-day-today-indicator-color-active: oklch(56.5% 0.135 250);
285
+ --skra-comp-dialog-background-hover: oklch(22.0% 0 0);
286
+ --skra-comp-dialog-background-active: oklch(25.5% 0 0);
287
+ --skra-comp-dialog-foreground-hover: oklch(85.0% 0 0);
288
+ --skra-comp-dialog-foreground-active: oklch(81.5% 0 0);
289
+ --skra-comp-dialog-focus-ring-color-hover: oklch(68.0% 0.135 250);
290
+ --skra-comp-dialog-focus-ring-color-active: oklch(64.5% 0.135 250);
291
+ --skra-comp-field-background-hover: oklch(22.0% 0 0);
292
+ --skra-comp-field-background-active: oklch(25.5% 0 0);
293
+ --skra-comp-field-foreground-hover: oklch(85.0% 0 0);
294
+ --skra-comp-field-foreground-active: oklch(81.5% 0 0);
295
+ --skra-comp-field-border-color-hover: oklch(85.0% 0 0);
296
+ --skra-comp-field-border-color-active: oklch(81.5% 0 0);
297
+ --skra-comp-field-focus-ring-color-hover: oklch(68.0% 0.135 250);
298
+ --skra-comp-field-focus-ring-color-active: oklch(64.5% 0.135 250);
299
+ --skra-comp-field-label-color-hover: oklch(85.0% 0 0);
300
+ --skra-comp-field-label-color-active: oklch(81.5% 0 0);
301
+ --skra-comp-field-hint-color-hover: oklch(53.0% 0 0);
302
+ --skra-comp-field-hint-color-active: oklch(49.5% 0 0);
303
+ --skra-comp-field-error-color-hover: oklch(63.0% 0.18 25);
304
+ --skra-comp-field-error-color-active: oklch(59.5% 0.18 25);
305
+ --skra-comp-field-border-color-validation-invalid-hover: oklch(63.0% 0.18 25);
306
+ --skra-comp-field-border-color-validation-invalid-active: oklch(59.5% 0.18 25);
307
+ --skra-comp-field-background-readonly-hover: oklch(26.0% 0 0);
308
+ --skra-comp-field-background-readonly-active: oklch(29.5% 0 0);
309
+ --skra-comp-field-border-color-readonly-hover: oklch(53.0% 0 0);
310
+ --skra-comp-field-border-color-readonly-active: oklch(49.5% 0 0);
311
+ --skra-comp-field-required-color-hover: oklch(63.0% 0.18 25);
312
+ --skra-comp-field-required-color-active: oklch(59.5% 0.18 25);
313
+ --skra-comp-field-checkbox-border-color-hover: oklch(53.0% 0 0);
314
+ --skra-comp-field-checkbox-border-color-active: oklch(49.5% 0 0);
315
+ --skra-comp-field-checkbox-background-hover: oklch(22.0% 0 0);
316
+ --skra-comp-field-checkbox-background-active: oklch(25.5% 0 0);
317
+ --skra-comp-field-checkbox-checked-background-hover: oklch(60.0% 0.135 250);
318
+ --skra-comp-field-checkbox-checked-background-active: oklch(56.5% 0.135 250);
319
+ --skra-comp-field-checkbox-checked-background-readonly-hover: oklch(57.0% 0 0);
320
+ --skra-comp-field-checkbox-checked-background-readonly-active: oklch(60.5% 0 0);
321
+ --skra-comp-field-checkbox-check-color-hover: oklch(25.0% 0 0);
322
+ --skra-comp-field-checkbox-check-color-active: oklch(28.5% 0 0);
323
+ --skra-comp-field-radio-border-color-hover: oklch(53.0% 0 0);
324
+ --skra-comp-field-radio-border-color-active: oklch(49.5% 0 0);
325
+ --skra-comp-field-radio-background-hover: oklch(22.0% 0 0);
326
+ --skra-comp-field-radio-background-active: oklch(25.5% 0 0);
327
+ --skra-comp-field-radio-checked-background-hover: oklch(60.0% 0.135 250);
328
+ --skra-comp-field-radio-checked-background-active: oklch(56.5% 0.135 250);
329
+ --skra-comp-field-radio-checked-background-readonly-hover: oklch(57.0% 0 0);
330
+ --skra-comp-field-radio-checked-background-readonly-active: oklch(60.5% 0 0);
331
+ --skra-comp-field-radio-dot-color-hover: oklch(25.0% 0 0);
332
+ --skra-comp-field-radio-dot-color-active: oklch(28.5% 0 0);
333
+ --skra-comp-field-switch-border-color-hover: oklch(53.0% 0 0);
334
+ --skra-comp-field-switch-border-color-active: oklch(49.5% 0 0);
335
+ --skra-comp-field-switch-background-hover: oklch(53.0% 0 0);
336
+ --skra-comp-field-switch-background-active: oklch(49.5% 0 0);
337
+ --skra-comp-field-switch-checked-background-hover: oklch(60.0% 0.135 250);
338
+ --skra-comp-field-switch-checked-background-active: oklch(56.5% 0.135 250);
339
+ --skra-comp-field-switch-checked-background-readonly-hover: oklch(57.0% 0 0);
340
+ --skra-comp-field-switch-checked-background-readonly-active: oklch(60.5% 0 0);
341
+ --skra-comp-field-switch-thumb-color-hover: oklch(22.0% 0 0);
342
+ --skra-comp-field-switch-thumb-color-active: oklch(25.5% 0 0);
343
+ --skra-comp-field-group-legend-color-hover: oklch(85.0% 0 0);
344
+ --skra-comp-field-group-legend-color-active: oklch(81.5% 0 0);
345
+ --skra-comp-field-select-option-foreground-hover: oklch(85.0% 0 0);
346
+ --skra-comp-field-select-option-foreground-active: oklch(81.5% 0 0);
347
+ --skra-comp-field-select-option-background-hover: oklch(22.0% 0 0);
348
+ --skra-comp-field-select-option-background-active: oklch(25.5% 0 0);
349
+ --skra-comp-field-select-optgroup-foreground-hover: oklch(85.0% 0 0);
350
+ --skra-comp-field-select-optgroup-foreground-active: oklch(81.5% 0 0);
351
+ --skra-comp-kbd-background-hover: oklch(26.0% 0 0);
352
+ --skra-comp-kbd-background-active: oklch(29.5% 0 0);
353
+ --skra-comp-kbd-foreground-hover: oklch(85.0% 0 0);
354
+ --skra-comp-kbd-foreground-active: oklch(81.5% 0 0);
355
+ --skra-comp-kbd-border-color-hover: oklch(53.0% 0 0);
356
+ --skra-comp-kbd-border-color-active: oklch(49.5% 0 0);
357
+ --skra-comp-kbd-focus-ring-color-hover: oklch(68.0% 0.135 250);
358
+ --skra-comp-kbd-focus-ring-color-active: oklch(64.5% 0.135 250);
359
+ --skra-comp-link-foreground-active: oklch(56.5% 0.135 250);
360
+ --skra-comp-link-focus-ring-color-hover: oklch(68.0% 0.135 250);
361
+ --skra-comp-link-focus-ring-color-active: oklch(64.5% 0.135 250);
362
+ --skra-comp-menu-background-hover: oklch(22.0% 0 0);
363
+ --skra-comp-menu-background-active: oklch(25.5% 0 0);
364
+ --skra-comp-menu-foreground-hover: oklch(85.0% 0 0);
365
+ --skra-comp-menu-foreground-active: oklch(81.5% 0 0);
366
+ --skra-comp-menu-border-color-hover: oklch(53.0% 0 0);
367
+ --skra-comp-menu-border-color-active: oklch(49.5% 0 0);
368
+ --skra-comp-menu-focus-ring-color-hover: oklch(68.0% 0.135 250);
369
+ --skra-comp-menu-focus-ring-color-active: oklch(64.5% 0.135 250);
370
+ --skra-comp-menu-item-foreground-hover: oklch(85.0% 0 0);
371
+ --skra-comp-menu-item-foreground-active: oklch(81.5% 0 0);
372
+ --skra-comp-popover-background-hover: oklch(22.0% 0 0);
373
+ --skra-comp-popover-background-active: oklch(25.5% 0 0);
374
+ --skra-comp-popover-foreground-hover: oklch(85.0% 0 0);
375
+ --skra-comp-popover-foreground-active: oklch(81.5% 0 0);
376
+ --skra-comp-popover-border-color-hover: oklch(53.0% 0 0);
377
+ --skra-comp-popover-border-color-active: oklch(49.5% 0 0);
378
+ --skra-comp-popover-focus-ring-color-hover: oklch(68.0% 0.135 250);
379
+ --skra-comp-popover-focus-ring-color-active: oklch(64.5% 0.135 250);
380
+ --skra-comp-progress-background-hover: oklch(53.0% 0 0);
381
+ --skra-comp-progress-background-active: oklch(49.5% 0 0);
382
+ --skra-comp-progress-foreground-hover: oklch(85.0% 0 0);
383
+ --skra-comp-progress-foreground-active: oklch(81.5% 0 0);
384
+ --skra-comp-progress-border-color-hover: oklch(53.0% 0 0);
385
+ --skra-comp-progress-border-color-active: oklch(49.5% 0 0);
386
+ --skra-comp-progress-focus-ring-color-hover: oklch(68.0% 0.135 250);
387
+ --skra-comp-progress-focus-ring-color-active: oklch(64.5% 0.135 250);
388
+ --skra-comp-progress-fill-color-hover: oklch(60.0% 0.135 250);
389
+ --skra-comp-progress-fill-color-active: oklch(56.5% 0.135 250);
390
+ --skra-comp-select-background-hover: oklch(22.0% 0 0);
391
+ --skra-comp-select-background-active: oklch(25.5% 0 0);
392
+ --skra-comp-select-foreground-hover: oklch(85.0% 0 0);
393
+ --skra-comp-select-foreground-active: oklch(81.5% 0 0);
394
+ --skra-comp-select-border-color-hover: oklch(85.0% 0 0);
395
+ --skra-comp-select-border-color-active: oklch(81.5% 0 0);
396
+ --skra-comp-select-focus-ring-color-hover: oklch(68.0% 0.135 250);
397
+ --skra-comp-select-focus-ring-color-active: oklch(64.5% 0.135 250);
398
+ --skra-comp-select-background-readonly-hover: oklch(26.0% 0 0);
399
+ --skra-comp-select-background-readonly-active: oklch(29.5% 0 0);
400
+ --skra-comp-select-border-color-validation-invalid-hover: oklch(63.0% 0.18 25);
401
+ --skra-comp-select-border-color-validation-invalid-active: oklch(59.5% 0.18 25);
402
+ --skra-comp-select-arrow-color-hover: oklch(58.0% 0 0);
403
+ --skra-comp-select-arrow-color-active: oklch(54.5% 0 0);
404
+ --skra-comp-select-panel-background-hover: oklch(22.0% 0 0);
405
+ --skra-comp-select-panel-background-active: oklch(25.5% 0 0);
406
+ --skra-comp-select-panel-foreground-hover: oklch(85.0% 0 0);
407
+ --skra-comp-select-panel-foreground-active: oklch(81.5% 0 0);
408
+ --skra-comp-select-panel-border-color-hover: oklch(53.0% 0 0);
409
+ --skra-comp-select-panel-border-color-active: oklch(49.5% 0 0);
410
+ --skra-comp-select-option-foreground-hover: oklch(85.0% 0 0);
411
+ --skra-comp-select-option-foreground-active: oklch(81.5% 0 0);
412
+ --skra-comp-select-option-detail-foreground-hover: oklch(58.0% 0 0);
413
+ --skra-comp-select-option-detail-foreground-active: oklch(54.5% 0 0);
414
+ --skra-comp-select-indicator-color-hover: oklch(60.0% 0.135 250);
415
+ --skra-comp-select-indicator-color-active: oklch(56.5% 0.135 250);
416
+ --skra-comp-select-option-checkbox-border-color-hover: oklch(85.0% 0 0);
417
+ --skra-comp-select-option-checkbox-border-color-active: oklch(81.5% 0 0);
418
+ --skra-comp-select-option-checkbox-check-color-hover: oklch(25.0% 0 0);
419
+ --skra-comp-select-option-checkbox-check-color-active: oklch(28.5% 0 0);
420
+ --skra-comp-skeleton-background-hover: oklch(43.0% 0 0);
421
+ --skra-comp-skeleton-background-active: oklch(46.5% 0 0);
422
+ --skra-comp-skeleton-foreground-hover: oklch(85.0% 0 0);
423
+ --skra-comp-skeleton-foreground-active: oklch(81.5% 0 0);
424
+ --skra-comp-skeleton-border-color-hover: oklch(53.0% 0 0);
425
+ --skra-comp-skeleton-border-color-active: oklch(49.5% 0 0);
426
+ --skra-comp-skeleton-focus-ring-color-hover: oklch(68.0% 0.135 250);
427
+ --skra-comp-skeleton-focus-ring-color-active: oklch(64.5% 0.135 250);
428
+ --skra-comp-star-rating-star-color-empty-hover: oklch(85.0% 0 0);
429
+ --skra-comp-star-rating-star-color-empty-active: oklch(81.5% 0 0);
430
+ --skra-comp-star-rating-star-color-filled-hover: oklch(60.0% 0.135 250);
431
+ --skra-comp-star-rating-star-color-filled-active: oklch(56.5% 0.135 250);
432
+ --skra-comp-star-rating-focus-ring-color-hover: oklch(68.0% 0.135 250);
433
+ --skra-comp-star-rating-focus-ring-color-active: oklch(64.5% 0.135 250);
434
+ --skra-comp-status-dot-background-hover: oklch(57.0% 0 0);
435
+ --skra-comp-status-dot-background-active: oklch(60.5% 0 0);
436
+ --skra-comp-status-dot-foreground-hover: oklch(89.0% 0 0);
437
+ --skra-comp-status-dot-foreground-active: oklch(85.5% 0 0);
438
+ --skra-comp-status-dot-border-color-hover: oklch(22.0% 0 0);
439
+ --skra-comp-status-dot-border-color-active: oklch(25.5% 0 0);
440
+ --skra-comp-status-dot-focus-ring-color-hover: oklch(68.0% 0.135 250);
441
+ --skra-comp-status-dot-focus-ring-color-active: oklch(64.5% 0.135 250);
442
+ --skra-comp-tabs-foreground-hover: oklch(58.0% 0 0);
443
+ --skra-comp-tabs-foreground-active: oklch(54.5% 0 0);
444
+ --skra-comp-tabs-focus-ring-color-hover: oklch(68.0% 0.135 250);
445
+ --skra-comp-tabs-focus-ring-color-active: oklch(64.5% 0.135 250);
446
+ --skra-comp-tabs-indicator-color-hover: oklch(60.0% 0.135 250);
447
+ --skra-comp-tabs-indicator-color-active: oklch(56.5% 0.135 250);
448
+ --skra-comp-tabs-tablist-border-color-hover: oklch(53.0% 0 0);
449
+ --skra-comp-tabs-tablist-border-color-active: oklch(49.5% 0 0);
450
+ --skra-comp-toast-background-hover: oklch(31.0% 0 0);
451
+ --skra-comp-toast-background-active: oklch(34.5% 0 0);
452
+ --skra-comp-toast-foreground-hover: oklch(58.0% 0 0);
453
+ --skra-comp-toast-foreground-active: oklch(54.5% 0 0);
454
+ --skra-comp-toast-border-color-hover: oklch(53.0% 0 0);
455
+ --skra-comp-toast-border-color-active: oklch(49.5% 0 0);
456
+ --skra-comp-toast-focus-ring-color-hover: oklch(68.0% 0.135 250);
457
+ --skra-comp-toast-focus-ring-color-active: oklch(64.5% 0.135 250);
458
+ --skra-comp-tooltip-background-hover: oklch(68.0% 0 0);
459
+ --skra-comp-tooltip-background-active: oklch(64.5% 0 0);
460
+ --skra-comp-tooltip-foreground-hover: oklch(17.0% 0 0);
461
+ --skra-comp-tooltip-foreground-active: oklch(20.5% 0 0);
462
+ --skra-comp-tooltip-focus-ring-color-hover: oklch(68.0% 0.135 250);
463
+ --skra-comp-tooltip-focus-ring-color-active: oklch(64.5% 0.135 250);
464
+ --skra-comp-typography-display-large-foreground-hover: oklch(85.0% 0 0);
465
+ --skra-comp-typography-display-large-foreground-active: oklch(81.5% 0 0);
466
+ --skra-comp-typography-display-medium-foreground-hover: oklch(85.0% 0 0);
467
+ --skra-comp-typography-display-medium-foreground-active: oklch(81.5% 0 0);
468
+ --skra-comp-typography-display-small-foreground-hover: oklch(85.0% 0 0);
469
+ --skra-comp-typography-display-small-foreground-active: oklch(81.5% 0 0);
470
+ --skra-comp-typography-headline-large-foreground-hover: oklch(85.0% 0 0);
471
+ --skra-comp-typography-headline-large-foreground-active: oklch(81.5% 0 0);
472
+ --skra-comp-typography-headline-medium-foreground-hover: oklch(85.0% 0 0);
473
+ --skra-comp-typography-headline-medium-foreground-active: oklch(81.5% 0 0);
474
+ --skra-comp-typography-headline-small-foreground-hover: oklch(85.0% 0 0);
475
+ --skra-comp-typography-headline-small-foreground-active: oklch(81.5% 0 0);
476
+ --skra-comp-typography-title-large-foreground-hover: oklch(85.0% 0 0);
477
+ --skra-comp-typography-title-large-foreground-active: oklch(81.5% 0 0);
478
+ --skra-comp-typography-title-medium-foreground-hover: oklch(85.0% 0 0);
479
+ --skra-comp-typography-title-medium-foreground-active: oklch(81.5% 0 0);
480
+ --skra-comp-typography-title-small-foreground-hover: oklch(85.0% 0 0);
481
+ --skra-comp-typography-title-small-foreground-active: oklch(81.5% 0 0);
482
+ --skra-comp-typography-body-large-foreground-hover: oklch(85.0% 0 0);
483
+ --skra-comp-typography-body-large-foreground-active: oklch(81.5% 0 0);
484
+ --skra-comp-typography-body-medium-foreground-hover: oklch(85.0% 0 0);
485
+ --skra-comp-typography-body-medium-foreground-active: oklch(81.5% 0 0);
486
+ --skra-comp-typography-body-small-foreground-hover: oklch(58.0% 0 0);
487
+ --skra-comp-typography-body-small-foreground-active: oklch(54.5% 0 0);
488
+ --skra-comp-typography-label-large-foreground-hover: oklch(85.0% 0 0);
489
+ --skra-comp-typography-label-large-foreground-active: oklch(81.5% 0 0);
490
+ --skra-comp-typography-label-medium-foreground-hover: oklch(85.0% 0 0);
491
+ --skra-comp-typography-label-medium-foreground-active: oklch(81.5% 0 0);
492
+ --skra-comp-typography-label-small-foreground-hover: oklch(58.0% 0 0);
493
+ --skra-comp-typography-label-small-foreground-active: oklch(54.5% 0 0);
494
+ --skra-comp-typography-foreground-error-hover: oklch(63.0% 0.18 25);
495
+ --skra-comp-typography-foreground-error-active: oklch(59.5% 0.18 25);
496
+ --skra-comp-typography-foreground-warning-hover: oklch(51.0% 0.108 80);
497
+ --skra-comp-typography-foreground-warning-active: oklch(47.5% 0.108 80);
498
+ --skra-comp-typography-foreground-success-hover: oklch(60.0% 0.135 145);
499
+ --skra-comp-typography-foreground-success-active: oklch(56.5% 0.135 145);
500
+ --skra-comp-accordion-foreground: var(--skra-sys-color-on-surface);
501
+ --skra-comp-accordion-focus-ring-color: var(--skra-sys-color-focus-ring);
502
+ --skra-comp-accordion-header-background-hover: var(--skra-sys-color-surface-hover);
503
+ --skra-comp-accordion-header-foreground-expanded: var(--skra-sys-color-on-surface-strong);
504
+ --skra-comp-accordion-indicator-color: var(--skra-sys-color-on-surface-subtle);
505
+ --skra-comp-accordion-root-background: var(--skra-sys-color-surface);
506
+ --skra-comp-accordion-root-border-color: var(--skra-sys-color-border-subtle);
507
+ --skra-comp-accordion-item-divider-color: var(--skra-sys-color-border-subtle);
508
+ --skra-comp-accordion-panel-foreground: var(--skra-sys-color-on-surface-subtle);
509
+ --skra-comp-alert-background: var(--skra-sys-color-neutral-soft);
510
+ --skra-comp-alert-foreground: var(--skra-sys-color-neutral-ink);
511
+ --skra-comp-alert-border-color: var(--skra-sys-color-neutral-border);
512
+ --skra-comp-alert-focus-ring-color: var(--skra-sys-color-focus-ring);
513
+ --skra-comp-avatar-background: var(--skra-sys-color-neutral-soft);
514
+ --skra-comp-avatar-foreground: var(--skra-sys-color-neutral-strong);
515
+ --skra-comp-avatar-border-color: var(--skra-sys-color-neutral-border);
516
+ --skra-comp-avatar-focus-ring-color: var(--skra-sys-color-focus-ring);
517
+ --skra-comp-badge-background: var(--skra-sys-color-neutral-soft);
518
+ --skra-comp-badge-foreground: var(--skra-sys-color-neutral-ink);
519
+ --skra-comp-badge-border-color: var(--skra-sys-color-neutral-border);
520
+ --skra-comp-badge-focus-ring-color: var(--skra-sys-color-focus-ring);
521
+ --skra-comp-button-background: var(--skra-sys-color-neutral-base);
522
+ --skra-comp-button-foreground: var(--skra-sys-color-neutral-contrast);
523
+ --skra-comp-button-focus-ring-color: var(--skra-sys-color-focus-ring);
524
+ --skra-comp-button-background-disabled: var(--skra-sys-color-surface-disabled);
525
+ --skra-comp-button-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
526
+ --skra-comp-button-loading-indicator-color: var(--skra-sys-color-on-surface);
527
+ --skra-comp-chip-background: var(--skra-sys-color-neutral-soft);
528
+ --skra-comp-chip-foreground: var(--skra-sys-color-neutral-ink);
529
+ --skra-comp-chip-border-color: var(--skra-sys-color-neutral-border);
530
+ --skra-comp-chip-focus-ring-color: var(--skra-sys-color-focus-ring);
531
+ --skra-comp-combobox-background: var(--skra-sys-color-surface);
532
+ --skra-comp-combobox-foreground: var(--skra-sys-color-on-surface);
533
+ --skra-comp-combobox-border-color: var(--skra-sys-color-border);
534
+ --skra-comp-combobox-focus-ring-color: var(--skra-sys-color-focus-ring);
535
+ --skra-comp-combobox-background-disabled: var(--skra-sys-color-surface-disabled);
536
+ --skra-comp-combobox-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
537
+ --skra-comp-combobox-background-readonly: var(--skra-sys-color-surface-raised);
538
+ --skra-comp-combobox-border-color-validation-invalid: var(--skra-sys-color-danger-ink);
539
+ --skra-comp-combobox-arrow-color: var(--skra-sys-color-on-surface-subtle);
540
+ --skra-comp-combobox-panel-background: var(--skra-sys-color-surface);
541
+ --skra-comp-combobox-panel-foreground: var(--skra-sys-color-on-surface);
542
+ --skra-comp-combobox-panel-border-color: var(--skra-sys-color-border-subtle);
543
+ --skra-comp-combobox-loading-indicator-color: var(--skra-sys-color-on-surface);
544
+ --skra-comp-combobox-empty-foreground: var(--skra-sys-color-on-surface-subtle);
545
+ --skra-comp-datepicker-background: var(--skra-sys-color-surface);
546
+ --skra-comp-datepicker-foreground: var(--skra-sys-color-on-surface);
547
+ --skra-comp-datepicker-border-color: var(--skra-sys-color-border);
548
+ --skra-comp-datepicker-focus-ring-color: var(--skra-sys-color-focus-ring);
549
+ --skra-comp-datepicker-background-disabled: var(--skra-sys-color-surface-disabled);
550
+ --skra-comp-datepicker-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
551
+ --skra-comp-datepicker-background-readonly: var(--skra-sys-color-surface-raised);
552
+ --skra-comp-datepicker-border-color-validation-invalid: var(--skra-sys-color-danger-ink);
553
+ --skra-comp-datepicker-icon-color: var(--skra-sys-color-on-surface-subtle);
554
+ --skra-comp-datepicker-panel-background: var(--skra-sys-color-surface);
555
+ --skra-comp-datepicker-panel-foreground: var(--skra-sys-color-on-surface);
556
+ --skra-comp-datepicker-panel-border-color: var(--skra-sys-color-border-subtle);
557
+ --skra-comp-datepicker-header-foreground: var(--skra-sys-color-on-surface);
558
+ --skra-comp-datepicker-nav-color: var(--skra-sys-color-on-surface-subtle);
559
+ --skra-comp-datepicker-nav-color-hover: var(--skra-sys-color-on-surface);
560
+ --skra-comp-datepicker-weekday-foreground: var(--skra-sys-color-on-surface-subtle);
561
+ --skra-comp-datepicker-day-foreground: var(--skra-sys-color-on-surface);
562
+ --skra-comp-datepicker-day-background-hover: var(--skra-sys-color-surface-hover);
563
+ --skra-comp-datepicker-day-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
564
+ --skra-comp-datepicker-day-background-selected: var(--skra-sys-color-primary-base);
565
+ --skra-comp-datepicker-day-foreground-selected: var(--skra-sys-color-primary-contrast);
566
+ --skra-comp-datepicker-day-today-indicator-color: var(--skra-sys-color-primary-ink);
567
+ --skra-comp-dialog-background: var(--skra-sys-color-surface);
568
+ --skra-comp-dialog-foreground: var(--skra-sys-color-on-surface);
569
+ --skra-comp-dialog-focus-ring-color: var(--skra-sys-color-focus-ring);
570
+ --skra-comp-dialog-backdrop: var(--skra-sys-color-scrim);
571
+ --skra-comp-field-background: var(--skra-sys-color-surface);
572
+ --skra-comp-field-foreground: var(--skra-sys-color-on-surface);
573
+ --skra-comp-field-border-color: var(--skra-sys-color-border);
574
+ --skra-comp-field-focus-ring-color: var(--skra-sys-color-focus-ring);
575
+ --skra-comp-field-label-color: var(--skra-sys-color-on-surface);
576
+ --skra-comp-field-hint-color: var(--skra-sys-color-hint);
577
+ --skra-comp-field-error-color: var(--skra-sys-color-danger-ink);
578
+ --skra-comp-field-border-color-validation-invalid: var(--skra-sys-color-danger-ink);
579
+ --skra-comp-field-background-readonly: var(--skra-sys-color-surface-raised);
580
+ --skra-comp-field-border-color-readonly: var(--skra-sys-color-border-subtle);
581
+ --skra-comp-field-required-color: var(--skra-sys-color-danger-ink);
582
+ --skra-comp-field-checkbox-border-color: var(--skra-sys-color-border-subtle);
583
+ --skra-comp-field-checkbox-background: var(--skra-sys-color-surface);
584
+ --skra-comp-field-checkbox-checked-background: var(--skra-sys-color-primary-base);
585
+ --skra-comp-field-checkbox-checked-background-readonly: var(--skra-sys-color-neutral-base);
586
+ --skra-comp-field-checkbox-check-color: var(--skra-sys-color-primary-contrast);
587
+ --skra-comp-field-radio-border-color: var(--skra-sys-color-border-subtle);
588
+ --skra-comp-field-radio-background: var(--skra-sys-color-surface);
589
+ --skra-comp-field-radio-checked-background: var(--skra-sys-color-primary-base);
590
+ --skra-comp-field-radio-checked-background-readonly: var(--skra-sys-color-neutral-base);
591
+ --skra-comp-field-radio-dot-color: var(--skra-sys-color-primary-contrast);
592
+ --skra-comp-field-switch-border-color: var(--skra-sys-color-border-subtle);
593
+ --skra-comp-field-switch-background: var(--skra-sys-color-border-subtle);
594
+ --skra-comp-field-switch-checked-background: var(--skra-sys-color-primary-base);
595
+ --skra-comp-field-switch-checked-background-readonly: var(--skra-sys-color-neutral-base);
596
+ --skra-comp-field-switch-thumb-color: var(--skra-sys-color-surface);
597
+ --skra-comp-field-switch-thumb-color-checked: var(--skra-sys-color-primary-contrast);
598
+ --skra-comp-field-group-legend-color: var(--skra-sys-color-on-surface);
599
+ --skra-comp-field-select-option-foreground: var(--skra-sys-color-on-surface);
600
+ --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
601
+ --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
602
+ --skra-comp-kbd-background: var(--skra-sys-color-surface-raised);
603
+ --skra-comp-kbd-foreground: var(--skra-sys-color-on-surface);
604
+ --skra-comp-kbd-border-color: var(--skra-sys-color-border-subtle);
605
+ --skra-comp-kbd-focus-ring-color: var(--skra-sys-color-focus-ring);
606
+ --skra-comp-link-foreground: var(--skra-sys-color-link);
607
+ --skra-comp-link-foreground-hover: var(--skra-sys-color-link-hover);
608
+ --skra-comp-link-foreground-visited: var(--skra-sys-color-link-visited);
609
+ --skra-comp-link-focus-ring-color: var(--skra-sys-color-focus-ring);
610
+ --skra-comp-menu-background: var(--skra-sys-color-surface);
611
+ --skra-comp-menu-foreground: var(--skra-sys-color-on-surface);
612
+ --skra-comp-menu-border-color: var(--skra-sys-color-border-subtle);
613
+ --skra-comp-menu-focus-ring-color: var(--skra-sys-color-focus-ring);
614
+ --skra-comp-menu-item-foreground: var(--skra-sys-color-on-surface);
615
+ --skra-comp-menu-item-background-hover: var(--skra-sys-color-surface-hover);
616
+ --skra-comp-menu-item-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
617
+ --skra-comp-popover-background: var(--skra-sys-color-surface);
618
+ --skra-comp-popover-foreground: var(--skra-sys-color-on-surface);
619
+ --skra-comp-popover-border-color: var(--skra-sys-color-border-subtle);
620
+ --skra-comp-popover-focus-ring-color: var(--skra-sys-color-focus-ring);
621
+ --skra-comp-progress-background: var(--skra-sys-color-border-subtle);
622
+ --skra-comp-progress-foreground: var(--skra-sys-color-on-surface);
623
+ --skra-comp-progress-border-color: var(--skra-sys-color-border-subtle);
624
+ --skra-comp-progress-focus-ring-color: var(--skra-sys-color-focus-ring);
625
+ --skra-comp-progress-fill-color: var(--skra-sys-color-primary-base);
626
+ --skra-comp-select-background: var(--skra-sys-color-surface);
627
+ --skra-comp-select-foreground: var(--skra-sys-color-on-surface);
628
+ --skra-comp-select-border-color: var(--skra-sys-color-border);
629
+ --skra-comp-select-focus-ring-color: var(--skra-sys-color-focus-ring);
630
+ --skra-comp-select-background-disabled: var(--skra-sys-color-surface-disabled);
631
+ --skra-comp-select-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
632
+ --skra-comp-select-background-readonly: var(--skra-sys-color-surface-raised);
633
+ --skra-comp-select-border-color-validation-invalid: var(--skra-sys-color-danger-ink);
634
+ --skra-comp-select-arrow-color: var(--skra-sys-color-on-surface-subtle);
635
+ --skra-comp-select-panel-background: var(--skra-sys-color-surface);
636
+ --skra-comp-select-panel-foreground: var(--skra-sys-color-on-surface);
637
+ --skra-comp-select-panel-border-color: var(--skra-sys-color-border-subtle);
638
+ --skra-comp-select-option-foreground: var(--skra-sys-color-on-surface);
639
+ --skra-comp-select-option-background-hover: var(--skra-sys-color-surface-hover);
640
+ --skra-comp-select-option-background-active: var(--skra-sys-color-surface-hover);
641
+ --skra-comp-select-option-background-selected: var(--skra-sys-color-primary-soft);
642
+ --skra-comp-select-option-foreground-selected: var(--skra-sys-color-on-surface);
643
+ --skra-comp-select-option-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
644
+ --skra-comp-select-option-detail-foreground: var(--skra-sys-color-on-surface-subtle);
645
+ --skra-comp-select-indicator-color: var(--skra-sys-color-primary-ink);
646
+ --skra-comp-select-option-checkbox-border-color: var(--skra-sys-color-border);
647
+ --skra-comp-select-option-checkbox-background-selected: var(--skra-sys-color-primary-base);
648
+ --skra-comp-select-option-checkbox-check-color: var(--skra-sys-color-primary-contrast);
649
+ --skra-comp-skeleton-background: var(--skra-sys-color-surface-muted);
650
+ --skra-comp-skeleton-foreground: var(--skra-sys-color-on-surface);
651
+ --skra-comp-skeleton-border-color: var(--skra-sys-color-border-subtle);
652
+ --skra-comp-skeleton-focus-ring-color: var(--skra-sys-color-focus-ring);
653
+ --skra-comp-star-rating-star-color-empty: var(--skra-sys-color-border);
654
+ --skra-comp-star-rating-star-color-filled: var(--skra-sys-color-primary-base);
655
+ --skra-comp-star-rating-focus-ring-color: var(--skra-sys-color-focus-ring);
656
+ --skra-comp-status-dot-background: var(--skra-sys-color-neutral-base);
657
+ --skra-comp-status-dot-foreground: var(--skra-sys-color-neutral-contrast);
658
+ --skra-comp-status-dot-border-color: var(--skra-sys-color-surface);
659
+ --skra-comp-status-dot-focus-ring-color: var(--skra-sys-color-focus-ring);
660
+ --skra-comp-tabs-foreground: var(--skra-sys-color-on-surface-subtle);
661
+ --skra-comp-tabs-focus-ring-color: var(--skra-sys-color-focus-ring);
662
+ --skra-comp-tabs-foreground-selected: var(--skra-sys-color-on-surface-strong);
663
+ --skra-comp-tabs-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
664
+ --skra-comp-tabs-background-hover: var(--skra-sys-color-surface-hover);
665
+ --skra-comp-tabs-indicator-color: var(--skra-sys-color-primary-base);
666
+ --skra-comp-tabs-tablist-border-color: var(--skra-sys-color-border-subtle);
667
+ --skra-comp-toast-background: var(--skra-sys-color-neutral-soft);
668
+ --skra-comp-toast-foreground: var(--skra-sys-color-neutral-ink);
669
+ --skra-comp-toast-border-color: var(--skra-sys-color-neutral-border);
670
+ --skra-comp-toast-focus-ring-color: var(--skra-sys-color-focus-ring);
671
+ --skra-comp-tooltip-background: var(--skra-sys-color-inverse-surface);
672
+ --skra-comp-tooltip-foreground: var(--skra-sys-color-on-inverse-surface);
673
+ --skra-comp-tooltip-focus-ring-color: var(--skra-sys-color-focus-ring);
674
+ --skra-comp-typography-display-large-foreground: var(--skra-sys-color-on-surface);
675
+ --skra-comp-typography-display-medium-foreground: var(--skra-sys-color-on-surface);
676
+ --skra-comp-typography-display-small-foreground: var(--skra-sys-color-on-surface);
677
+ --skra-comp-typography-headline-large-foreground: var(--skra-sys-color-on-surface);
678
+ --skra-comp-typography-headline-medium-foreground: var(--skra-sys-color-on-surface);
679
+ --skra-comp-typography-headline-small-foreground: var(--skra-sys-color-on-surface);
680
+ --skra-comp-typography-title-large-foreground: var(--skra-sys-color-on-surface);
681
+ --skra-comp-typography-title-medium-foreground: var(--skra-sys-color-on-surface);
682
+ --skra-comp-typography-title-small-foreground: var(--skra-sys-color-on-surface);
683
+ --skra-comp-typography-body-large-foreground: var(--skra-sys-color-on-surface);
684
+ --skra-comp-typography-body-medium-foreground: var(--skra-sys-color-on-surface);
685
+ --skra-comp-typography-body-small-foreground: var(--skra-sys-color-on-surface-subtle);
686
+ --skra-comp-typography-label-large-foreground: var(--skra-sys-color-on-surface);
687
+ --skra-comp-typography-label-medium-foreground: var(--skra-sys-color-on-surface);
688
+ --skra-comp-typography-label-small-foreground: var(--skra-sys-color-on-surface-subtle);
689
+ --skra-comp-typography-foreground-error: var(--skra-sys-color-danger-ink);
690
+ --skra-comp-typography-foreground-warning: var(--skra-sys-color-warning-ink);
691
+ --skra-comp-typography-foreground-success: var(--skra-sys-color-success-ink);
692
+ }
693
+
694
+ /* O-24 — build-baked form-control glyphs (token-resolved colour per scheme) — form-glyph-synth.mjs */
695
+ [data-skra-color-scheme="dark"] {
696
+ --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%2818.0%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");
697
+ --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%2892.0%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");
698
+ }