@skra/tokens 0.4.0 → 0.6.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 (19) hide show
  1. package/brutal/_comp.scss +57 -32
  2. package/brutal/_density.comfortable.scoped.scss +3 -1
  3. package/brutal/_density.comfortable.scss +3 -1
  4. package/brutal/_density.compact.scoped.scss +3 -1
  5. package/brutal/_density.compact.scss +3 -1
  6. package/brutal/_theme.dark.scoped.scss +80 -59
  7. package/brutal/_theme.dark.scss +80 -59
  8. package/brutal/_theme.scoped.scss +69 -44
  9. package/brutal/_theme.scss +15 -12
  10. package/brutal/skin.config.json +40 -40
  11. package/manifests/datepicker.json +19 -10
  12. package/manifests/star-rating.json +96 -96
  13. package/package.json +1 -1
  14. package/skra/_comp.scss +57 -32
  15. package/skra/_density.comfortable.scss +3 -1
  16. package/skra/_density.compact.scss +3 -1
  17. package/skra/_theme.dark.scss +77 -56
  18. package/skra/_theme.scss +7 -4
  19. package/skra/skin.config.json +37 -37
package/brutal/_theme.dark.scoped.scss CHANGED
@@ -10,8 +10,8 @@
10
10
  --skra-sys-color-neutral-strong: oklch(92.0% 0 0);
11
11
  --skra-sys-color-neutral-ink: oklch(75.0% 0 0);
12
12
  --skra-sys-color-neutral-contrast: oklch(18.0% 0 0);
13
- --skra-sys-color-neutral-base-hover: oklch(63.0% 0 0);
14
- --skra-sys-color-neutral-base-active: oklch(57.0% 0 0);
13
+ --skra-sys-color-neutral-base-hover: oklch(87.0% 0 0);
14
+ --skra-sys-color-neutral-base-active: oklch(93.0% 0 0);
15
15
  --skra-sys-color-neutral-border-hover: oklch(80.0% 0 0);
16
16
  --skra-sys-color-neutral-border-active: oklch(74.0% 0 0);
17
17
  --skra-sys-color-neutral-soft-hover: oklch(36.0% 0 0);
@@ -32,8 +32,8 @@
32
32
  --skra-sys-color-primary-base-active: oklch(64.0% 0.153 98);
33
33
  --skra-sys-color-primary-border-hover: oklch(46.0% 0 0);
34
34
  --skra-sys-color-primary-border-active: oklch(40.0% 0 0);
35
- --skra-sys-color-primary-soft-hover: oklch(36.0% 0.06 100);
36
- --skra-sys-color-primary-soft-active: oklch(42.0% 0.06 100);
35
+ --skra-sys-color-primary-soft-hover: oklch(12.0% 0.06 100);
36
+ --skra-sys-color-primary-soft-active: oklch(6.0% 0.06 100);
37
37
  --skra-sys-color-primary-strong-hover: oklch(53.0% 0.099 98);
38
38
  --skra-sys-color-primary-strong-active: oklch(47.0% 0.099 98);
39
39
  --skra-sys-color-primary-ink-hover: oklch(53.0% 0.099 98);
@@ -46,12 +46,12 @@
46
46
  --skra-sys-color-secondary-strong: oklch(62.0% 0.036 250);
47
47
  --skra-sys-color-secondary-ink: oklch(60.0% 0.036 250);
48
48
  --skra-sys-color-secondary-contrast: oklch(18.0% 0 0);
49
- --skra-sys-color-secondary-base-hover: oklch(48.0% 0.036 250);
50
- --skra-sys-color-secondary-base-active: oklch(42.0% 0.036 250);
49
+ --skra-sys-color-secondary-base-hover: oklch(72.0% 0.036 250);
50
+ --skra-sys-color-secondary-base-active: oklch(78.0% 0.036 250);
51
51
  --skra-sys-color-secondary-border-hover: oklch(46.0% 0 0);
52
52
  --skra-sys-color-secondary-border-active: oklch(40.0% 0 0);
53
- --skra-sys-color-secondary-soft-hover: oklch(36.0% 0.02 250);
54
- --skra-sys-color-secondary-soft-active: oklch(42.0% 0.02 250);
53
+ --skra-sys-color-secondary-soft-hover: oklch(12.0% 0.02 250);
54
+ --skra-sys-color-secondary-soft-active: oklch(6.0% 0.02 250);
55
55
  --skra-sys-color-secondary-strong-hover: oklch(50.0% 0.036 250);
56
56
  --skra-sys-color-secondary-strong-active: oklch(44.0% 0.036 250);
57
57
  --skra-sys-color-secondary-ink-hover: oklch(48.0% 0.036 250);
@@ -64,12 +64,12 @@
64
64
  --skra-sys-color-info-strong: oklch(61.5% 0.108 220);
65
65
  --skra-sys-color-info-ink: oklch(65.0% 0.108 220);
66
66
  --skra-sys-color-info-contrast: oklch(18.0% 0 0);
67
- --skra-sys-color-info-base-hover: oklch(53.0% 0.108 220);
68
- --skra-sys-color-info-base-active: oklch(47.0% 0.108 220);
67
+ --skra-sys-color-info-base-hover: oklch(77.0% 0.108 220);
68
+ --skra-sys-color-info-base-active: oklch(83.0% 0.108 220);
69
69
  --skra-sys-color-info-border-hover: oklch(46.0% 0 0);
70
70
  --skra-sys-color-info-border-active: oklch(40.0% 0 0);
71
- --skra-sys-color-info-soft-hover: oklch(36.0% 0.04 220);
72
- --skra-sys-color-info-soft-active: oklch(42.0% 0.04 220);
71
+ --skra-sys-color-info-soft-hover: oklch(12.0% 0.04 220);
72
+ --skra-sys-color-info-soft-active: oklch(6.0% 0.04 220);
73
73
  --skra-sys-color-info-strong-hover: oklch(49.5% 0.108 220);
74
74
  --skra-sys-color-info-strong-active: oklch(43.5% 0.108 220);
75
75
  --skra-sys-color-info-ink-hover: oklch(53.0% 0.108 220);
@@ -82,12 +82,12 @@
82
82
  --skra-sys-color-success-strong: oklch(61.5% 0.117 145);
83
83
  --skra-sys-color-success-ink: oklch(63.0% 0.135 145);
84
84
  --skra-sys-color-success-contrast: oklch(18.0% 0 0);
85
- --skra-sys-color-success-base-hover: oklch(51.0% 0.135 145);
86
- --skra-sys-color-success-base-active: oklch(45.0% 0.135 145);
85
+ --skra-sys-color-success-base-hover: oklch(75.0% 0.135 145);
86
+ --skra-sys-color-success-base-active: oklch(81.0% 0.135 145);
87
87
  --skra-sys-color-success-border-hover: oklch(46.0% 0 0);
88
88
  --skra-sys-color-success-border-active: oklch(40.0% 0 0);
89
- --skra-sys-color-success-soft-hover: oklch(36.0% 0.05 145);
90
- --skra-sys-color-success-soft-active: oklch(42.0% 0.05 145);
89
+ --skra-sys-color-success-soft-hover: oklch(12.0% 0.05 145);
90
+ --skra-sys-color-success-soft-active: oklch(6.0% 0.05 145);
91
91
  --skra-sys-color-success-strong-hover: oklch(49.5% 0.117 145);
92
92
  --skra-sys-color-success-strong-active: oklch(43.5% 0.117 145);
93
93
  --skra-sys-color-success-ink-hover: oklch(51.0% 0.135 145);
@@ -104,8 +104,8 @@
104
104
  --skra-sys-color-warning-base-active: oklch(64.0% 0.135 80);
105
105
  --skra-sys-color-warning-border-hover: oklch(46.0% 0 0);
106
106
  --skra-sys-color-warning-border-active: oklch(40.0% 0 0);
107
- --skra-sys-color-warning-soft-hover: oklch(36.0% 0.05 80);
108
- --skra-sys-color-warning-soft-active: oklch(42.0% 0.05 80);
107
+ --skra-sys-color-warning-soft-hover: oklch(12.0% 0.05 80);
108
+ --skra-sys-color-warning-soft-active: oklch(6.0% 0.05 80);
109
109
  --skra-sys-color-warning-strong-hover: oklch(50.5% 0.108 80);
110
110
  --skra-sys-color-warning-strong-active: oklch(44.5% 0.108 80);
111
111
  --skra-sys-color-warning-ink-hover: oklch(46.0% 0.108 80);
@@ -118,12 +118,12 @@
118
118
  --skra-sys-color-danger-strong: oklch(63.5% 0.144 25);
119
119
  --skra-sys-color-danger-ink: oklch(63.0% 0.18 25);
120
120
  --skra-sys-color-danger-contrast: oklch(18.0% 0 0);
121
- --skra-sys-color-danger-base-hover: oklch(51.0% 0.18 25);
122
- --skra-sys-color-danger-base-active: oklch(45.0% 0.18 25);
121
+ --skra-sys-color-danger-base-hover: oklch(75.0% 0.18 25);
122
+ --skra-sys-color-danger-base-active: oklch(81.0% 0.18 25);
123
123
  --skra-sys-color-danger-border-hover: oklch(46.0% 0 0);
124
124
  --skra-sys-color-danger-border-active: oklch(40.0% 0 0);
125
- --skra-sys-color-danger-soft-hover: oklch(36.0% 0.04 25);
126
- --skra-sys-color-danger-soft-active: oklch(42.0% 0.04 25);
125
+ --skra-sys-color-danger-soft-hover: oklch(12.0% 0.04 25);
126
+ --skra-sys-color-danger-soft-active: oklch(6.0% 0.04 25);
127
127
  --skra-sys-color-danger-strong-hover: oklch(51.5% 0.144 25);
128
128
  --skra-sys-color-danger-strong-active: oklch(45.5% 0.144 25);
129
129
  --skra-sys-color-danger-ink-hover: oklch(51.0% 0.18 25);
@@ -172,7 +172,7 @@
172
172
  --skra-sys-color-hint-active: oklch(47.0% 0 0);
173
173
  --skra-sys-color-focus-ring-hover: oklch(48.0% 0.162 295);
174
174
  --skra-sys-color-focus-ring-active: oklch(42.0% 0.162 295);
175
- --skra-sys-color-link-active: oklch(40.0% 0 0);
175
+ --skra-sys-color-link-active: oklch(76.0% 0 0);
176
176
  --skra-sys-color-shadow-ink-hover: oklch(80.0% 0 0);
177
177
  --skra-sys-color-shadow-ink-active: oklch(74.0% 0 0);
178
178
  --skra-comp-accordion-foreground-hover: oklch(80.0% 0 0);
@@ -193,8 +193,8 @@
193
193
  --skra-comp-accordion-panel-foreground-active: oklch(47.0% 0 0);
194
194
  --skra-comp-alert-background-hover: oklch(36.0% 0 0);
195
195
  --skra-comp-alert-background-active: oklch(42.0% 0 0);
196
- --skra-comp-alert-foreground-hover: oklch(63.0% 0 0);
197
- --skra-comp-alert-foreground-active: oklch(57.0% 0 0);
196
+ --skra-comp-alert-foreground-hover: oklch(80.0% 0 0);
197
+ --skra-comp-alert-foreground-active: oklch(74.0% 0 0);
198
198
  --skra-comp-alert-border-color-hover: oklch(80.0% 0 0);
199
199
  --skra-comp-alert-border-color-active: oklch(74.0% 0 0);
200
200
  --skra-comp-alert-focus-ring-color-hover: oklch(48.0% 0.162 295);
@@ -209,14 +209,14 @@
209
209
  --skra-comp-avatar-focus-ring-color-active: oklch(42.0% 0.162 295);
210
210
  --skra-comp-badge-background-hover: oklch(36.0% 0 0);
211
211
  --skra-comp-badge-background-active: oklch(42.0% 0 0);
212
- --skra-comp-badge-foreground-hover: oklch(63.0% 0 0);
213
- --skra-comp-badge-foreground-active: oklch(57.0% 0 0);
212
+ --skra-comp-badge-foreground-hover: oklch(80.0% 0 0);
213
+ --skra-comp-badge-foreground-active: oklch(74.0% 0 0);
214
214
  --skra-comp-badge-border-color-hover: oklch(80.0% 0 0);
215
215
  --skra-comp-badge-border-color-active: oklch(74.0% 0 0);
216
216
  --skra-comp-badge-focus-ring-color-hover: oklch(48.0% 0.162 295);
217
217
  --skra-comp-badge-focus-ring-color-active: oklch(42.0% 0.162 295);
218
- --skra-comp-button-background-hover: oklch(63.0% 0 0);
219
- --skra-comp-button-background-active: oklch(57.0% 0 0);
218
+ --skra-comp-button-background-hover: oklch(87.0% 0 0);
219
+ --skra-comp-button-background-active: oklch(93.0% 0 0);
220
220
  --skra-comp-button-foreground-hover: oklch(30.0% 0 0);
221
221
  --skra-comp-button-foreground-active: oklch(36.0% 0 0);
222
222
  --skra-comp-button-border-color-hover: oklch(80.0% 0 0);
@@ -227,8 +227,8 @@
227
227
  --skra-comp-button-loading-indicator-color-active: oklch(74.0% 0 0);
228
228
  --skra-comp-chip-background-hover: oklch(36.0% 0 0);
229
229
  --skra-comp-chip-background-active: oklch(42.0% 0 0);
230
- --skra-comp-chip-foreground-hover: oklch(63.0% 0 0);
231
- --skra-comp-chip-foreground-active: oklch(57.0% 0 0);
230
+ --skra-comp-chip-foreground-hover: oklch(80.0% 0 0);
231
+ --skra-comp-chip-foreground-active: oklch(74.0% 0 0);
232
232
  --skra-comp-chip-border-color-hover: oklch(80.0% 0 0);
233
233
  --skra-comp-chip-border-color-active: oklch(74.0% 0 0);
234
234
  --skra-comp-chip-focus-ring-color-hover: oklch(48.0% 0.162 295);
@@ -247,8 +247,8 @@
247
247
  --skra-comp-combobox-border-color-validation-invalid-active: oklch(45.0% 0.18 25);
248
248
  --skra-comp-combobox-arrow-color-hover: oklch(53.0% 0 0);
249
249
  --skra-comp-combobox-arrow-color-active: oklch(47.0% 0 0);
250
- --skra-comp-combobox-panel-background-hover: oklch(27.0% 0 0);
251
- --skra-comp-combobox-panel-background-active: oklch(33.0% 0 0);
250
+ --skra-comp-combobox-panel-background-hover: oklch(3.0% 0 0);
251
+ --skra-comp-combobox-panel-background-active: oklch(2.0% 0 0);
252
252
  --skra-comp-combobox-panel-foreground-hover: oklch(80.0% 0 0);
253
253
  --skra-comp-combobox-panel-foreground-active: oklch(74.0% 0 0);
254
254
  --skra-comp-combobox-panel-border-color-hover: oklch(80.0% 0 0);
@@ -271,21 +271,21 @@
271
271
  --skra-comp-datepicker-border-color-validation-invalid-active: oklch(45.0% 0.18 25);
272
272
  --skra-comp-datepicker-icon-color-hover: oklch(53.0% 0 0);
273
273
  --skra-comp-datepicker-icon-color-active: oklch(47.0% 0 0);
274
- --skra-comp-datepicker-panel-background-hover: oklch(27.0% 0 0);
275
- --skra-comp-datepicker-panel-background-active: oklch(33.0% 0 0);
274
+ --skra-comp-datepicker-panel-background-hover: oklch(3.0% 0 0);
275
+ --skra-comp-datepicker-panel-background-active: oklch(2.0% 0 0);
276
276
  --skra-comp-datepicker-panel-foreground-hover: oklch(80.0% 0 0);
277
277
  --skra-comp-datepicker-panel-foreground-active: oklch(74.0% 0 0);
278
278
  --skra-comp-datepicker-panel-border-color-hover: oklch(63.0% 0 0);
279
279
  --skra-comp-datepicker-panel-border-color-active: oklch(57.0% 0 0);
280
280
  --skra-comp-datepicker-header-foreground-hover: oklch(80.0% 0 0);
281
281
  --skra-comp-datepicker-header-foreground-active: oklch(74.0% 0 0);
282
- --skra-comp-datepicker-nav-color-active: oklch(47.0% 0 0);
282
+ --skra-comp-datepicker-nav-color-active: oklch(83.0% 0 0);
283
283
  --skra-comp-datepicker-weekday-foreground-hover: oklch(53.0% 0 0);
284
284
  --skra-comp-datepicker-weekday-foreground-active: oklch(47.0% 0 0);
285
- --skra-comp-datepicker-day-foreground-hover: oklch(80.0% 0 0);
286
- --skra-comp-datepicker-day-foreground-active: oklch(74.0% 0 0);
287
- --skra-comp-datepicker-day-today-indicator-color-hover: oklch(53.0% 0.099 98);
288
- --skra-comp-datepicker-day-today-indicator-color-active: oklch(47.0% 0.099 98);
285
+ --skra-comp-datepicker-cell-foreground-hover: oklch(80.0% 0 0);
286
+ --skra-comp-datepicker-cell-foreground-active: oklch(74.0% 0 0);
287
+ --skra-comp-datepicker-cell-today-indicator-color-hover: oklch(53.0% 0.099 98);
288
+ --skra-comp-datepicker-cell-today-indicator-color-active: oklch(47.0% 0.099 98);
289
289
  --skra-comp-dialog-background-hover: oklch(27.0% 0 0);
290
290
  --skra-comp-dialog-background-active: oklch(33.0% 0 0);
291
291
  --skra-comp-dialog-foreground-hover: oklch(80.0% 0 0);
@@ -326,6 +326,8 @@
326
326
  --skra-comp-field-checkbox-checked-background-readonly-active: oklch(57.0% 0 0);
327
327
  --skra-comp-field-checkbox-check-color-hover: oklch(30.0% 0 0);
328
328
  --skra-comp-field-checkbox-check-color-active: oklch(36.0% 0 0);
329
+ --skra-comp-field-checkbox-check-color-readonly-hover: oklch(30.0% 0 0);
330
+ --skra-comp-field-checkbox-check-color-readonly-active: oklch(36.0% 0 0);
329
331
  --skra-comp-field-radio-border-color-hover: oklch(80.0% 0 0);
330
332
  --skra-comp-field-radio-border-color-active: oklch(74.0% 0 0);
331
333
  --skra-comp-field-radio-background-hover: oklch(27.0% 0 0);
@@ -336,16 +338,24 @@
336
338
  --skra-comp-field-radio-checked-background-readonly-active: oklch(57.0% 0 0);
337
339
  --skra-comp-field-radio-dot-color-hover: oklch(30.0% 0 0);
338
340
  --skra-comp-field-radio-dot-color-active: oklch(36.0% 0 0);
341
+ --skra-comp-field-radio-dot-color-readonly-hover: oklch(30.0% 0 0);
342
+ --skra-comp-field-radio-dot-color-readonly-active: oklch(36.0% 0 0);
339
343
  --skra-comp-field-switch-border-color-hover: oklch(80.0% 0 0);
340
344
  --skra-comp-field-switch-border-color-active: oklch(74.0% 0 0);
341
345
  --skra-comp-field-switch-background-hover: oklch(63.0% 0 0);
342
346
  --skra-comp-field-switch-background-active: oklch(57.0% 0 0);
347
+ --skra-comp-field-switch-background-readonly-hover: oklch(63.0% 0 0);
348
+ --skra-comp-field-switch-background-readonly-active: oklch(57.0% 0 0);
343
349
  --skra-comp-field-switch-checked-background-hover: oklch(70.0% 0.153 98);
344
350
  --skra-comp-field-switch-checked-background-active: oklch(64.0% 0.153 98);
345
351
  --skra-comp-field-switch-checked-background-readonly-hover: oklch(63.0% 0 0);
346
352
  --skra-comp-field-switch-checked-background-readonly-active: oklch(57.0% 0 0);
347
353
  --skra-comp-field-switch-thumb-color-hover: oklch(27.0% 0 0);
348
354
  --skra-comp-field-switch-thumb-color-active: oklch(33.0% 0 0);
355
+ --skra-comp-field-switch-thumb-color-readonly-hover: oklch(30.0% 0 0);
356
+ --skra-comp-field-switch-thumb-color-readonly-active: oklch(36.0% 0 0);
357
+ --skra-comp-field-switch-thumb-color-checked-readonly-hover: oklch(30.0% 0 0);
358
+ --skra-comp-field-switch-thumb-color-checked-readonly-active: oklch(36.0% 0 0);
349
359
  --skra-comp-field-group-legend-color-hover: oklch(80.0% 0 0);
350
360
  --skra-comp-field-group-legend-color-active: oklch(74.0% 0 0);
351
361
  --skra-comp-field-select-option-foreground-hover: oklch(80.0% 0 0);
@@ -354,6 +364,8 @@
354
364
  --skra-comp-field-select-option-background-active: oklch(33.0% 0 0);
355
365
  --skra-comp-field-select-optgroup-foreground-hover: oklch(80.0% 0 0);
356
366
  --skra-comp-field-select-optgroup-foreground-active: oklch(74.0% 0 0);
367
+ --skra-comp-field-temporal-indicator-color-hover: oklch(80.0% 0 0);
368
+ --skra-comp-field-temporal-indicator-color-active: oklch(74.0% 0 0);
357
369
  --skra-comp-kbd-background-hover: oklch(31.0% 0 0);
358
370
  --skra-comp-kbd-background-active: oklch(37.0% 0 0);
359
371
  --skra-comp-kbd-foreground-hover: oklch(80.0% 0 0);
@@ -362,7 +374,7 @@
362
374
  --skra-comp-kbd-border-color-active: oklch(74.0% 0 0);
363
375
  --skra-comp-kbd-focus-ring-color-hover: oklch(48.0% 0.162 295);
364
376
  --skra-comp-kbd-focus-ring-color-active: oklch(42.0% 0.162 295);
365
- --skra-comp-link-foreground-active: oklch(40.0% 0 0);
377
+ --skra-comp-link-foreground-active: oklch(76.0% 0 0);
366
378
  --skra-comp-link-focus-ring-color-hover: oklch(48.0% 0.162 295);
367
379
  --skra-comp-link-focus-ring-color-active: oklch(42.0% 0.162 295);
368
380
  --skra-comp-menu-background-hover: oklch(27.0% 0 0);
@@ -431,10 +443,10 @@
431
443
  --skra-comp-skeleton-border-color-active: oklch(74.0% 0 0);
432
444
  --skra-comp-skeleton-focus-ring-color-hover: oklch(48.0% 0.162 295);
433
445
  --skra-comp-skeleton-focus-ring-color-active: oklch(42.0% 0.162 295);
434
- --skra-comp-star-rating-star-color-empty-hover: oklch(80.0% 0 0);
435
- --skra-comp-star-rating-star-color-empty-active: oklch(74.0% 0 0);
436
- --skra-comp-star-rating-star-color-filled-hover: oklch(70.0% 0.153 98);
437
- --skra-comp-star-rating-star-color-filled-active: oklch(64.0% 0.153 98);
446
+ --skra-comp-star-rating-star-color-empty-hover: oklch(63.0% 0 0);
447
+ --skra-comp-star-rating-star-color-empty-active: oklch(57.0% 0 0);
448
+ --skra-comp-star-rating-star-color-filled-hover: oklch(53.0% 0.099 98);
449
+ --skra-comp-star-rating-star-color-filled-active: oklch(47.0% 0.099 98);
438
450
  --skra-comp-star-rating-focus-ring-color-hover: oklch(48.0% 0.162 295);
439
451
  --skra-comp-star-rating-focus-ring-color-active: oklch(42.0% 0.162 295);
440
452
  --skra-comp-status-dot-background-hover: oklch(63.0% 0 0);
@@ -463,8 +475,8 @@
463
475
  --skra-comp-tabs-tablist-border-color-active: oklch(74.0% 0 0);
464
476
  --skra-comp-toast-background-hover: oklch(36.0% 0 0);
465
477
  --skra-comp-toast-background-active: oklch(42.0% 0 0);
466
- --skra-comp-toast-foreground-hover: oklch(63.0% 0 0);
467
- --skra-comp-toast-foreground-active: oklch(57.0% 0 0);
478
+ --skra-comp-toast-foreground-hover: oklch(80.0% 0 0);
479
+ --skra-comp-toast-foreground-active: oklch(74.0% 0 0);
468
480
  --skra-comp-toast-border-color-hover: oklch(80.0% 0 0);
469
481
  --skra-comp-toast-border-color-active: oklch(74.0% 0 0);
470
482
  --skra-comp-toast-focus-ring-color-hover: oklch(48.0% 0.162 295);
@@ -521,7 +533,7 @@
521
533
  --skra-comp-accordion-item-divider-color: var(--skra-sys-color-border);
522
534
  --skra-comp-accordion-panel-foreground: var(--skra-sys-color-on-surface-subtle);
523
535
  --skra-comp-alert-background: var(--skra-sys-color-neutral-soft);
524
- --skra-comp-alert-foreground: var(--skra-sys-color-neutral-ink);
536
+ --skra-comp-alert-foreground: var(--skra-sys-color-neutral-strong);
525
537
  --skra-comp-alert-border-color: var(--skra-sys-color-neutral-border);
526
538
  --skra-comp-alert-focus-ring-color: var(--skra-sys-color-focus-ring);
527
539
  --skra-comp-avatar-background: var(--skra-sys-color-neutral-soft);
@@ -529,7 +541,7 @@
529
541
  --skra-comp-avatar-border-color: var(--skra-sys-color-neutral-border);
530
542
  --skra-comp-avatar-focus-ring-color: var(--skra-sys-color-focus-ring);
531
543
  --skra-comp-badge-background: var(--skra-sys-color-neutral-soft);
532
- --skra-comp-badge-foreground: var(--skra-sys-color-neutral-ink);
544
+ --skra-comp-badge-foreground: var(--skra-sys-color-neutral-strong);
533
545
  --skra-comp-badge-border-color: var(--skra-sys-color-neutral-border);
534
546
  --skra-comp-badge-focus-ring-color: var(--skra-sys-color-focus-ring);
535
547
  --skra-comp-button-background: var(--skra-sys-color-neutral-base);
@@ -541,7 +553,7 @@
541
553
  --skra-comp-button-border-color-disabled: var(--skra-sys-color-border-subtle);
542
554
  --skra-comp-button-loading-indicator-color: var(--skra-sys-color-on-surface);
543
555
  --skra-comp-chip-background: var(--skra-sys-color-neutral-soft);
544
- --skra-comp-chip-foreground: var(--skra-sys-color-neutral-ink);
556
+ --skra-comp-chip-foreground: var(--skra-sys-color-neutral-strong);
545
557
  --skra-comp-chip-border-color: var(--skra-sys-color-neutral-border);
546
558
  --skra-comp-chip-focus-ring-color: var(--skra-sys-color-focus-ring);
547
559
  --skra-comp-combobox-background: var(--skra-sys-color-surface);
@@ -574,12 +586,12 @@
574
586
  --skra-comp-datepicker-nav-color: var(--skra-sys-color-on-surface-subtle);
575
587
  --skra-comp-datepicker-nav-color-hover: var(--skra-sys-color-on-surface);
576
588
  --skra-comp-datepicker-weekday-foreground: var(--skra-sys-color-on-surface-subtle);
577
- --skra-comp-datepicker-day-foreground: var(--skra-sys-color-on-surface);
578
- --skra-comp-datepicker-day-background-hover: var(--skra-sys-color-surface-hover);
579
- --skra-comp-datepicker-day-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
580
- --skra-comp-datepicker-day-background-selected: var(--skra-sys-color-primary-base);
581
- --skra-comp-datepicker-day-foreground-selected: var(--skra-sys-color-primary-contrast);
582
- --skra-comp-datepicker-day-today-indicator-color: var(--skra-sys-color-primary-ink);
589
+ --skra-comp-datepicker-cell-foreground: var(--skra-sys-color-on-surface);
590
+ --skra-comp-datepicker-cell-background-hover: var(--skra-sys-color-surface-hover);
591
+ --skra-comp-datepicker-cell-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
592
+ --skra-comp-datepicker-cell-background-selected: var(--skra-sys-color-primary-base);
593
+ --skra-comp-datepicker-cell-foreground-selected: var(--skra-sys-color-primary-contrast);
594
+ --skra-comp-datepicker-cell-today-indicator-color: var(--skra-sys-color-primary-ink);
583
595
  --skra-comp-dialog-background: var(--skra-sys-color-surface);
584
596
  --skra-comp-dialog-foreground: var(--skra-sys-color-on-surface);
585
597
  --skra-comp-dialog-border-color: var(--skra-sys-color-border);
@@ -601,21 +613,27 @@
601
613
  --skra-comp-field-checkbox-checked-background: var(--skra-sys-color-primary-base);
602
614
  --skra-comp-field-checkbox-checked-background-readonly: var(--skra-sys-color-neutral-base);
603
615
  --skra-comp-field-checkbox-check-color: var(--skra-sys-color-primary-contrast);
616
+ --skra-comp-field-checkbox-check-color-readonly: var(--skra-sys-color-neutral-contrast);
604
617
  --skra-comp-field-radio-border-color: var(--skra-sys-color-border);
605
618
  --skra-comp-field-radio-background: var(--skra-sys-color-surface);
606
619
  --skra-comp-field-radio-checked-background: var(--skra-sys-color-primary-base);
607
620
  --skra-comp-field-radio-checked-background-readonly: var(--skra-sys-color-neutral-base);
608
621
  --skra-comp-field-radio-dot-color: var(--skra-sys-color-primary-contrast);
622
+ --skra-comp-field-radio-dot-color-readonly: var(--skra-sys-color-neutral-contrast);
609
623
  --skra-comp-field-switch-border-color: var(--skra-sys-color-border);
610
624
  --skra-comp-field-switch-background: var(--skra-sys-color-border-subtle);
625
+ --skra-comp-field-switch-background-readonly: var(--skra-sys-color-neutral-base);
611
626
  --skra-comp-field-switch-checked-background: var(--skra-sys-color-primary-base);
612
627
  --skra-comp-field-switch-checked-background-readonly: var(--skra-sys-color-neutral-base);
613
628
  --skra-comp-field-switch-thumb-color: var(--skra-sys-color-surface);
629
+ --skra-comp-field-switch-thumb-color-readonly: var(--skra-sys-color-neutral-contrast);
614
630
  --skra-comp-field-switch-thumb-color-checked: var(--skra-sys-color-primary-contrast);
631
+ --skra-comp-field-switch-thumb-color-checked-readonly: var(--skra-sys-color-neutral-contrast);
615
632
  --skra-comp-field-group-legend-color: var(--skra-sys-color-on-surface);
616
633
  --skra-comp-field-select-option-foreground: var(--skra-sys-color-on-surface);
617
634
  --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
618
635
  --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
636
+ --skra-comp-field-temporal-indicator-color: var(--skra-sys-color-on-surface);
619
637
  --skra-comp-kbd-background: var(--skra-sys-color-surface-raised);
620
638
  --skra-comp-kbd-foreground: var(--skra-sys-color-on-surface);
621
639
  --skra-comp-kbd-border-color: var(--skra-sys-color-border);
@@ -667,8 +685,8 @@
667
685
  --skra-comp-skeleton-foreground: var(--skra-sys-color-on-surface);
668
686
  --skra-comp-skeleton-border-color: var(--skra-sys-color-neutral-border);
669
687
  --skra-comp-skeleton-focus-ring-color: var(--skra-sys-color-focus-ring);
670
- --skra-comp-star-rating-star-color-empty: var(--skra-sys-color-border);
671
- --skra-comp-star-rating-star-color-filled: var(--skra-sys-color-primary-base);
688
+ --skra-comp-star-rating-star-color-empty: var(--skra-sys-color-border-subtle);
689
+ --skra-comp-star-rating-star-color-filled: var(--skra-sys-color-primary-ink);
672
690
  --skra-comp-star-rating-focus-ring-color: var(--skra-sys-color-focus-ring);
673
691
  --skra-comp-status-dot-background: var(--skra-sys-color-neutral-base);
674
692
  --skra-comp-status-dot-foreground: var(--skra-sys-color-neutral-contrast);
@@ -688,7 +706,7 @@
688
706
  --skra-comp-tabs-indicator-color: var(--skra-sys-color-primary-base);
689
707
  --skra-comp-tabs-tablist-border-color: var(--skra-sys-color-border);
690
708
  --skra-comp-toast-background: var(--skra-sys-color-neutral-soft);
691
- --skra-comp-toast-foreground: var(--skra-sys-color-neutral-ink);
709
+ --skra-comp-toast-foreground: var(--skra-sys-color-neutral-strong);
692
710
  --skra-comp-toast-border-color: var(--skra-sys-color-neutral-border);
693
711
  --skra-comp-toast-focus-ring-color: var(--skra-sys-color-focus-ring);
694
712
  --skra-comp-tooltip-background: var(--skra-sys-color-inverse-surface);
@@ -717,5 +735,8 @@
717
735
  /* O-24 — build-baked form-control glyphs (token-resolved colour per scheme) — form-glyph-synth.mjs */
718
736
  [data-skra-skin="brutal"][data-skra-color-scheme="dark"] {
719
737
  --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");
738
+ --skra-comp-field-checkbox-check-glyph-readonly: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='oklch%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");
720
739
  --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");
740
+ --skra-comp-field-calendar-indicator-glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='oklch%2892.0%25%200%200%29' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3C/svg%3E");
741
+ --skra-comp-field-clock-indicator-glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='oklch%2892.0%25%200%200%29' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 16 14'/%3E%3C/svg%3E");
721
742
  }