@skra/tokens 0.5.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/README.md +7 -0
  2. package/brutal/_comp.scss +36 -19
  3. package/brutal/_density.comfortable.scoped.scss +1 -0
  4. package/brutal/_density.comfortable.scss +1 -0
  5. package/brutal/_density.compact.scoped.scss +1 -0
  6. package/brutal/_density.compact.scss +1 -0
  7. package/brutal/_theme.dark.scoped.scss +67 -51
  8. package/brutal/_theme.dark.scss +67 -51
  9. package/brutal/_theme.scoped.scss +48 -31
  10. package/brutal/_theme.scss +15 -12
  11. package/manifests/alert.json +117 -107
  12. package/manifests/button.json +134 -133
  13. package/manifests/chip.json +117 -116
  14. package/manifests/star-rating.json +96 -96
  15. package/manifests/toast.json +134 -133
  16. package/package.json +1 -1
  17. package/skra/_comp.scss +36 -19
  18. package/skra/_density.comfortable.scss +1 -0
  19. package/skra/_density.compact.scss +1 -0
  20. package/skra/_theme.dark.scss +62 -46
  21. package/skra/_theme.scss +7 -4
package/brutal/_theme.dark.scss CHANGED
@@ -11,8 +11,8 @@
11
11
  --skra-sys-color-neutral-strong: oklch(92.0% 0 0);
12
12
  --skra-sys-color-neutral-ink: oklch(75.0% 0 0);
13
13
  --skra-sys-color-neutral-contrast: oklch(18.0% 0 0);
14
- --skra-sys-color-neutral-base-hover: oklch(63.0% 0 0);
15
- --skra-sys-color-neutral-base-active: oklch(57.0% 0 0);
14
+ --skra-sys-color-neutral-base-hover: oklch(87.0% 0 0);
15
+ --skra-sys-color-neutral-base-active: oklch(93.0% 0 0);
16
16
  --skra-sys-color-neutral-border-hover: oklch(80.0% 0 0);
17
17
  --skra-sys-color-neutral-border-active: oklch(74.0% 0 0);
18
18
  --skra-sys-color-neutral-soft-hover: oklch(36.0% 0 0);
@@ -33,8 +33,8 @@
33
33
  --skra-sys-color-primary-base-active: oklch(64.0% 0.153 98);
34
34
  --skra-sys-color-primary-border-hover: oklch(46.0% 0 0);
35
35
  --skra-sys-color-primary-border-active: oklch(40.0% 0 0);
36
- --skra-sys-color-primary-soft-hover: oklch(36.0% 0.06 100);
37
- --skra-sys-color-primary-soft-active: oklch(42.0% 0.06 100);
36
+ --skra-sys-color-primary-soft-hover: oklch(12.0% 0.06 100);
37
+ --skra-sys-color-primary-soft-active: oklch(6.0% 0.06 100);
38
38
  --skra-sys-color-primary-strong-hover: oklch(53.0% 0.099 98);
39
39
  --skra-sys-color-primary-strong-active: oklch(47.0% 0.099 98);
40
40
  --skra-sys-color-primary-ink-hover: oklch(53.0% 0.099 98);
@@ -47,12 +47,12 @@
47
47
  --skra-sys-color-secondary-strong: oklch(62.0% 0.036 250);
48
48
  --skra-sys-color-secondary-ink: oklch(60.0% 0.036 250);
49
49
  --skra-sys-color-secondary-contrast: oklch(18.0% 0 0);
50
- --skra-sys-color-secondary-base-hover: oklch(48.0% 0.036 250);
51
- --skra-sys-color-secondary-base-active: oklch(42.0% 0.036 250);
50
+ --skra-sys-color-secondary-base-hover: oklch(72.0% 0.036 250);
51
+ --skra-sys-color-secondary-base-active: oklch(78.0% 0.036 250);
52
52
  --skra-sys-color-secondary-border-hover: oklch(46.0% 0 0);
53
53
  --skra-sys-color-secondary-border-active: oklch(40.0% 0 0);
54
- --skra-sys-color-secondary-soft-hover: oklch(36.0% 0.02 250);
55
- --skra-sys-color-secondary-soft-active: oklch(42.0% 0.02 250);
54
+ --skra-sys-color-secondary-soft-hover: oklch(12.0% 0.02 250);
55
+ --skra-sys-color-secondary-soft-active: oklch(6.0% 0.02 250);
56
56
  --skra-sys-color-secondary-strong-hover: oklch(50.0% 0.036 250);
57
57
  --skra-sys-color-secondary-strong-active: oklch(44.0% 0.036 250);
58
58
  --skra-sys-color-secondary-ink-hover: oklch(48.0% 0.036 250);
@@ -65,12 +65,12 @@
65
65
  --skra-sys-color-info-strong: oklch(61.5% 0.108 220);
66
66
  --skra-sys-color-info-ink: oklch(65.0% 0.108 220);
67
67
  --skra-sys-color-info-contrast: oklch(18.0% 0 0);
68
- --skra-sys-color-info-base-hover: oklch(53.0% 0.108 220);
69
- --skra-sys-color-info-base-active: oklch(47.0% 0.108 220);
68
+ --skra-sys-color-info-base-hover: oklch(77.0% 0.108 220);
69
+ --skra-sys-color-info-base-active: oklch(83.0% 0.108 220);
70
70
  --skra-sys-color-info-border-hover: oklch(46.0% 0 0);
71
71
  --skra-sys-color-info-border-active: oklch(40.0% 0 0);
72
- --skra-sys-color-info-soft-hover: oklch(36.0% 0.04 220);
73
- --skra-sys-color-info-soft-active: oklch(42.0% 0.04 220);
72
+ --skra-sys-color-info-soft-hover: oklch(12.0% 0.04 220);
73
+ --skra-sys-color-info-soft-active: oklch(6.0% 0.04 220);
74
74
  --skra-sys-color-info-strong-hover: oklch(49.5% 0.108 220);
75
75
  --skra-sys-color-info-strong-active: oklch(43.5% 0.108 220);
76
76
  --skra-sys-color-info-ink-hover: oklch(53.0% 0.108 220);
@@ -83,12 +83,12 @@
83
83
  --skra-sys-color-success-strong: oklch(61.5% 0.117 145);
84
84
  --skra-sys-color-success-ink: oklch(63.0% 0.135 145);
85
85
  --skra-sys-color-success-contrast: oklch(18.0% 0 0);
86
- --skra-sys-color-success-base-hover: oklch(51.0% 0.135 145);
87
- --skra-sys-color-success-base-active: oklch(45.0% 0.135 145);
86
+ --skra-sys-color-success-base-hover: oklch(75.0% 0.135 145);
87
+ --skra-sys-color-success-base-active: oklch(81.0% 0.135 145);
88
88
  --skra-sys-color-success-border-hover: oklch(46.0% 0 0);
89
89
  --skra-sys-color-success-border-active: oklch(40.0% 0 0);
90
- --skra-sys-color-success-soft-hover: oklch(36.0% 0.05 145);
91
- --skra-sys-color-success-soft-active: oklch(42.0% 0.05 145);
90
+ --skra-sys-color-success-soft-hover: oklch(12.0% 0.05 145);
91
+ --skra-sys-color-success-soft-active: oklch(6.0% 0.05 145);
92
92
  --skra-sys-color-success-strong-hover: oklch(49.5% 0.117 145);
93
93
  --skra-sys-color-success-strong-active: oklch(43.5% 0.117 145);
94
94
  --skra-sys-color-success-ink-hover: oklch(51.0% 0.135 145);
@@ -105,8 +105,8 @@
105
105
  --skra-sys-color-warning-base-active: oklch(64.0% 0.135 80);
106
106
  --skra-sys-color-warning-border-hover: oklch(46.0% 0 0);
107
107
  --skra-sys-color-warning-border-active: oklch(40.0% 0 0);
108
- --skra-sys-color-warning-soft-hover: oklch(36.0% 0.05 80);
109
- --skra-sys-color-warning-soft-active: oklch(42.0% 0.05 80);
108
+ --skra-sys-color-warning-soft-hover: oklch(12.0% 0.05 80);
109
+ --skra-sys-color-warning-soft-active: oklch(6.0% 0.05 80);
110
110
  --skra-sys-color-warning-strong-hover: oklch(50.5% 0.108 80);
111
111
  --skra-sys-color-warning-strong-active: oklch(44.5% 0.108 80);
112
112
  --skra-sys-color-warning-ink-hover: oklch(46.0% 0.108 80);
@@ -119,12 +119,12 @@
119
119
  --skra-sys-color-danger-strong: oklch(63.5% 0.144 25);
120
120
  --skra-sys-color-danger-ink: oklch(63.0% 0.18 25);
121
121
  --skra-sys-color-danger-contrast: oklch(18.0% 0 0);
122
- --skra-sys-color-danger-base-hover: oklch(51.0% 0.18 25);
123
- --skra-sys-color-danger-base-active: oklch(45.0% 0.18 25);
122
+ --skra-sys-color-danger-base-hover: oklch(75.0% 0.18 25);
123
+ --skra-sys-color-danger-base-active: oklch(81.0% 0.18 25);
124
124
  --skra-sys-color-danger-border-hover: oklch(46.0% 0 0);
125
125
  --skra-sys-color-danger-border-active: oklch(40.0% 0 0);
126
- --skra-sys-color-danger-soft-hover: oklch(36.0% 0.04 25);
127
- --skra-sys-color-danger-soft-active: oklch(42.0% 0.04 25);
126
+ --skra-sys-color-danger-soft-hover: oklch(12.0% 0.04 25);
127
+ --skra-sys-color-danger-soft-active: oklch(6.0% 0.04 25);
128
128
  --skra-sys-color-danger-strong-hover: oklch(51.5% 0.144 25);
129
129
  --skra-sys-color-danger-strong-active: oklch(45.5% 0.144 25);
130
130
  --skra-sys-color-danger-ink-hover: oklch(51.0% 0.18 25);
@@ -173,7 +173,7 @@
173
173
  --skra-sys-color-hint-active: oklch(47.0% 0 0);
174
174
  --skra-sys-color-focus-ring-hover: oklch(48.0% 0.162 295);
175
175
  --skra-sys-color-focus-ring-active: oklch(42.0% 0.162 295);
176
- --skra-sys-color-link-active: oklch(40.0% 0 0);
176
+ --skra-sys-color-link-active: oklch(76.0% 0 0);
177
177
  --skra-sys-color-shadow-ink-hover: oklch(80.0% 0 0);
178
178
  --skra-sys-color-shadow-ink-active: oklch(74.0% 0 0);
179
179
  --skra-comp-accordion-foreground-hover: oklch(80.0% 0 0);
@@ -194,8 +194,8 @@
194
194
  --skra-comp-accordion-panel-foreground-active: oklch(47.0% 0 0);
195
195
  --skra-comp-alert-background-hover: oklch(36.0% 0 0);
196
196
  --skra-comp-alert-background-active: oklch(42.0% 0 0);
197
- --skra-comp-alert-foreground-hover: oklch(63.0% 0 0);
198
- --skra-comp-alert-foreground-active: oklch(57.0% 0 0);
197
+ --skra-comp-alert-foreground-hover: oklch(80.0% 0 0);
198
+ --skra-comp-alert-foreground-active: oklch(74.0% 0 0);
199
199
  --skra-comp-alert-border-color-hover: oklch(80.0% 0 0);
200
200
  --skra-comp-alert-border-color-active: oklch(74.0% 0 0);
201
201
  --skra-comp-alert-focus-ring-color-hover: oklch(48.0% 0.162 295);
@@ -210,14 +210,14 @@
210
210
  --skra-comp-avatar-focus-ring-color-active: oklch(42.0% 0.162 295);
211
211
  --skra-comp-badge-background-hover: oklch(36.0% 0 0);
212
212
  --skra-comp-badge-background-active: oklch(42.0% 0 0);
213
- --skra-comp-badge-foreground-hover: oklch(63.0% 0 0);
214
- --skra-comp-badge-foreground-active: oklch(57.0% 0 0);
213
+ --skra-comp-badge-foreground-hover: oklch(80.0% 0 0);
214
+ --skra-comp-badge-foreground-active: oklch(74.0% 0 0);
215
215
  --skra-comp-badge-border-color-hover: oklch(80.0% 0 0);
216
216
  --skra-comp-badge-border-color-active: oklch(74.0% 0 0);
217
217
  --skra-comp-badge-focus-ring-color-hover: oklch(48.0% 0.162 295);
218
218
  --skra-comp-badge-focus-ring-color-active: oklch(42.0% 0.162 295);
219
- --skra-comp-button-background-hover: oklch(63.0% 0 0);
220
- --skra-comp-button-background-active: oklch(57.0% 0 0);
219
+ --skra-comp-button-background-hover: oklch(87.0% 0 0);
220
+ --skra-comp-button-background-active: oklch(93.0% 0 0);
221
221
  --skra-comp-button-foreground-hover: oklch(30.0% 0 0);
222
222
  --skra-comp-button-foreground-active: oklch(36.0% 0 0);
223
223
  --skra-comp-button-border-color-hover: oklch(80.0% 0 0);
@@ -228,8 +228,8 @@
228
228
  --skra-comp-button-loading-indicator-color-active: oklch(74.0% 0 0);
229
229
  --skra-comp-chip-background-hover: oklch(36.0% 0 0);
230
230
  --skra-comp-chip-background-active: oklch(42.0% 0 0);
231
- --skra-comp-chip-foreground-hover: oklch(63.0% 0 0);
232
- --skra-comp-chip-foreground-active: oklch(57.0% 0 0);
231
+ --skra-comp-chip-foreground-hover: oklch(80.0% 0 0);
232
+ --skra-comp-chip-foreground-active: oklch(74.0% 0 0);
233
233
  --skra-comp-chip-border-color-hover: oklch(80.0% 0 0);
234
234
  --skra-comp-chip-border-color-active: oklch(74.0% 0 0);
235
235
  --skra-comp-chip-focus-ring-color-hover: oklch(48.0% 0.162 295);
@@ -248,8 +248,8 @@
248
248
  --skra-comp-combobox-border-color-validation-invalid-active: oklch(45.0% 0.18 25);
249
249
  --skra-comp-combobox-arrow-color-hover: oklch(53.0% 0 0);
250
250
  --skra-comp-combobox-arrow-color-active: oklch(47.0% 0 0);
251
- --skra-comp-combobox-panel-background-hover: oklch(27.0% 0 0);
252
- --skra-comp-combobox-panel-background-active: oklch(33.0% 0 0);
251
+ --skra-comp-combobox-panel-background-hover: oklch(3.0% 0 0);
252
+ --skra-comp-combobox-panel-background-active: oklch(2.0% 0 0);
253
253
  --skra-comp-combobox-panel-foreground-hover: oklch(80.0% 0 0);
254
254
  --skra-comp-combobox-panel-foreground-active: oklch(74.0% 0 0);
255
255
  --skra-comp-combobox-panel-border-color-hover: oklch(80.0% 0 0);
@@ -272,15 +272,15 @@
272
272
  --skra-comp-datepicker-border-color-validation-invalid-active: oklch(45.0% 0.18 25);
273
273
  --skra-comp-datepicker-icon-color-hover: oklch(53.0% 0 0);
274
274
  --skra-comp-datepicker-icon-color-active: oklch(47.0% 0 0);
275
- --skra-comp-datepicker-panel-background-hover: oklch(27.0% 0 0);
276
- --skra-comp-datepicker-panel-background-active: oklch(33.0% 0 0);
275
+ --skra-comp-datepicker-panel-background-hover: oklch(3.0% 0 0);
276
+ --skra-comp-datepicker-panel-background-active: oklch(2.0% 0 0);
277
277
  --skra-comp-datepicker-panel-foreground-hover: oklch(80.0% 0 0);
278
278
  --skra-comp-datepicker-panel-foreground-active: oklch(74.0% 0 0);
279
279
  --skra-comp-datepicker-panel-border-color-hover: oklch(63.0% 0 0);
280
280
  --skra-comp-datepicker-panel-border-color-active: oklch(57.0% 0 0);
281
281
  --skra-comp-datepicker-header-foreground-hover: oklch(80.0% 0 0);
282
282
  --skra-comp-datepicker-header-foreground-active: oklch(74.0% 0 0);
283
- --skra-comp-datepicker-nav-color-active: oklch(47.0% 0 0);
283
+ --skra-comp-datepicker-nav-color-active: oklch(83.0% 0 0);
284
284
  --skra-comp-datepicker-weekday-foreground-hover: oklch(53.0% 0 0);
285
285
  --skra-comp-datepicker-weekday-foreground-active: oklch(47.0% 0 0);
286
286
  --skra-comp-datepicker-cell-foreground-hover: oklch(80.0% 0 0);
@@ -327,6 +327,8 @@
327
327
  --skra-comp-field-checkbox-checked-background-readonly-active: oklch(57.0% 0 0);
328
328
  --skra-comp-field-checkbox-check-color-hover: oklch(30.0% 0 0);
329
329
  --skra-comp-field-checkbox-check-color-active: oklch(36.0% 0 0);
330
+ --skra-comp-field-checkbox-check-color-readonly-hover: oklch(30.0% 0 0);
331
+ --skra-comp-field-checkbox-check-color-readonly-active: oklch(36.0% 0 0);
330
332
  --skra-comp-field-radio-border-color-hover: oklch(80.0% 0 0);
331
333
  --skra-comp-field-radio-border-color-active: oklch(74.0% 0 0);
332
334
  --skra-comp-field-radio-background-hover: oklch(27.0% 0 0);
@@ -337,16 +339,24 @@
337
339
  --skra-comp-field-radio-checked-background-readonly-active: oklch(57.0% 0 0);
338
340
  --skra-comp-field-radio-dot-color-hover: oklch(30.0% 0 0);
339
341
  --skra-comp-field-radio-dot-color-active: oklch(36.0% 0 0);
342
+ --skra-comp-field-radio-dot-color-readonly-hover: oklch(30.0% 0 0);
343
+ --skra-comp-field-radio-dot-color-readonly-active: oklch(36.0% 0 0);
340
344
  --skra-comp-field-switch-border-color-hover: oklch(80.0% 0 0);
341
345
  --skra-comp-field-switch-border-color-active: oklch(74.0% 0 0);
342
346
  --skra-comp-field-switch-background-hover: oklch(63.0% 0 0);
343
347
  --skra-comp-field-switch-background-active: oklch(57.0% 0 0);
348
+ --skra-comp-field-switch-background-readonly-hover: oklch(63.0% 0 0);
349
+ --skra-comp-field-switch-background-readonly-active: oklch(57.0% 0 0);
344
350
  --skra-comp-field-switch-checked-background-hover: oklch(70.0% 0.153 98);
345
351
  --skra-comp-field-switch-checked-background-active: oklch(64.0% 0.153 98);
346
352
  --skra-comp-field-switch-checked-background-readonly-hover: oklch(63.0% 0 0);
347
353
  --skra-comp-field-switch-checked-background-readonly-active: oklch(57.0% 0 0);
348
354
  --skra-comp-field-switch-thumb-color-hover: oklch(27.0% 0 0);
349
355
  --skra-comp-field-switch-thumb-color-active: oklch(33.0% 0 0);
356
+ --skra-comp-field-switch-thumb-color-readonly-hover: oklch(30.0% 0 0);
357
+ --skra-comp-field-switch-thumb-color-readonly-active: oklch(36.0% 0 0);
358
+ --skra-comp-field-switch-thumb-color-checked-readonly-hover: oklch(30.0% 0 0);
359
+ --skra-comp-field-switch-thumb-color-checked-readonly-active: oklch(36.0% 0 0);
350
360
  --skra-comp-field-group-legend-color-hover: oklch(80.0% 0 0);
351
361
  --skra-comp-field-group-legend-color-active: oklch(74.0% 0 0);
352
362
  --skra-comp-field-select-option-foreground-hover: oklch(80.0% 0 0);
@@ -365,7 +375,7 @@
365
375
  --skra-comp-kbd-border-color-active: oklch(74.0% 0 0);
366
376
  --skra-comp-kbd-focus-ring-color-hover: oklch(48.0% 0.162 295);
367
377
  --skra-comp-kbd-focus-ring-color-active: oklch(42.0% 0.162 295);
368
- --skra-comp-link-foreground-active: oklch(40.0% 0 0);
378
+ --skra-comp-link-foreground-active: oklch(76.0% 0 0);
369
379
  --skra-comp-link-focus-ring-color-hover: oklch(48.0% 0.162 295);
370
380
  --skra-comp-link-focus-ring-color-active: oklch(42.0% 0.162 295);
371
381
  --skra-comp-menu-background-hover: oklch(27.0% 0 0);
@@ -410,8 +420,8 @@
410
420
  --skra-comp-select-border-color-validation-invalid-active: oklch(45.0% 0.18 25);
411
421
  --skra-comp-select-arrow-color-hover: oklch(53.0% 0 0);
412
422
  --skra-comp-select-arrow-color-active: oklch(47.0% 0 0);
413
- --skra-comp-select-panel-background-hover: oklch(27.0% 0 0);
414
- --skra-comp-select-panel-background-active: oklch(33.0% 0 0);
423
+ --skra-comp-select-panel-background-hover: oklch(3.0% 0 0);
424
+ --skra-comp-select-panel-background-active: oklch(2.0% 0 0);
415
425
  --skra-comp-select-panel-foreground-hover: oklch(80.0% 0 0);
416
426
  --skra-comp-select-panel-foreground-active: oklch(74.0% 0 0);
417
427
  --skra-comp-select-panel-border-color-hover: oklch(80.0% 0 0);
@@ -434,10 +444,10 @@
434
444
  --skra-comp-skeleton-border-color-active: oklch(74.0% 0 0);
435
445
  --skra-comp-skeleton-focus-ring-color-hover: oklch(48.0% 0.162 295);
436
446
  --skra-comp-skeleton-focus-ring-color-active: oklch(42.0% 0.162 295);
437
- --skra-comp-star-rating-star-color-empty-hover: oklch(80.0% 0 0);
438
- --skra-comp-star-rating-star-color-empty-active: oklch(74.0% 0 0);
439
- --skra-comp-star-rating-star-color-filled-hover: oklch(70.0% 0.153 98);
440
- --skra-comp-star-rating-star-color-filled-active: oklch(64.0% 0.153 98);
447
+ --skra-comp-star-rating-star-color-empty-hover: oklch(63.0% 0 0);
448
+ --skra-comp-star-rating-star-color-empty-active: oklch(57.0% 0 0);
449
+ --skra-comp-star-rating-star-color-filled-hover: oklch(53.0% 0.099 98);
450
+ --skra-comp-star-rating-star-color-filled-active: oklch(47.0% 0.099 98);
441
451
  --skra-comp-star-rating-focus-ring-color-hover: oklch(48.0% 0.162 295);
442
452
  --skra-comp-star-rating-focus-ring-color-active: oklch(42.0% 0.162 295);
443
453
  --skra-comp-status-dot-background-hover: oklch(63.0% 0 0);
@@ -466,8 +476,8 @@
466
476
  --skra-comp-tabs-tablist-border-color-active: oklch(74.0% 0 0);
467
477
  --skra-comp-toast-background-hover: oklch(36.0% 0 0);
468
478
  --skra-comp-toast-background-active: oklch(42.0% 0 0);
469
- --skra-comp-toast-foreground-hover: oklch(63.0% 0 0);
470
- --skra-comp-toast-foreground-active: oklch(57.0% 0 0);
479
+ --skra-comp-toast-foreground-hover: oklch(80.0% 0 0);
480
+ --skra-comp-toast-foreground-active: oklch(74.0% 0 0);
471
481
  --skra-comp-toast-border-color-hover: oklch(80.0% 0 0);
472
482
  --skra-comp-toast-border-color-active: oklch(74.0% 0 0);
473
483
  --skra-comp-toast-focus-ring-color-hover: oklch(48.0% 0.162 295);
@@ -524,7 +534,7 @@
524
534
  --skra-comp-accordion-item-divider-color: var(--skra-sys-color-border);
525
535
  --skra-comp-accordion-panel-foreground: var(--skra-sys-color-on-surface-subtle);
526
536
  --skra-comp-alert-background: var(--skra-sys-color-neutral-soft);
527
- --skra-comp-alert-foreground: var(--skra-sys-color-neutral-ink);
537
+ --skra-comp-alert-foreground: var(--skra-sys-color-neutral-strong);
528
538
  --skra-comp-alert-border-color: var(--skra-sys-color-neutral-border);
529
539
  --skra-comp-alert-focus-ring-color: var(--skra-sys-color-focus-ring);
530
540
  --skra-comp-avatar-background: var(--skra-sys-color-neutral-soft);
@@ -532,7 +542,7 @@
532
542
  --skra-comp-avatar-border-color: var(--skra-sys-color-neutral-border);
533
543
  --skra-comp-avatar-focus-ring-color: var(--skra-sys-color-focus-ring);
534
544
  --skra-comp-badge-background: var(--skra-sys-color-neutral-soft);
535
- --skra-comp-badge-foreground: var(--skra-sys-color-neutral-ink);
545
+ --skra-comp-badge-foreground: var(--skra-sys-color-neutral-strong);
536
546
  --skra-comp-badge-border-color: var(--skra-sys-color-neutral-border);
537
547
  --skra-comp-badge-focus-ring-color: var(--skra-sys-color-focus-ring);
538
548
  --skra-comp-button-background: var(--skra-sys-color-neutral-base);
@@ -544,7 +554,7 @@
544
554
  --skra-comp-button-border-color-disabled: var(--skra-sys-color-border-subtle);
545
555
  --skra-comp-button-loading-indicator-color: var(--skra-sys-color-on-surface);
546
556
  --skra-comp-chip-background: var(--skra-sys-color-neutral-soft);
547
- --skra-comp-chip-foreground: var(--skra-sys-color-neutral-ink);
557
+ --skra-comp-chip-foreground: var(--skra-sys-color-neutral-strong);
548
558
  --skra-comp-chip-border-color: var(--skra-sys-color-neutral-border);
549
559
  --skra-comp-chip-focus-ring-color: var(--skra-sys-color-focus-ring);
550
560
  --skra-comp-combobox-background: var(--skra-sys-color-surface);
@@ -604,17 +614,22 @@
604
614
  --skra-comp-field-checkbox-checked-background: var(--skra-sys-color-primary-base);
605
615
  --skra-comp-field-checkbox-checked-background-readonly: var(--skra-sys-color-neutral-base);
606
616
  --skra-comp-field-checkbox-check-color: var(--skra-sys-color-primary-contrast);
617
+ --skra-comp-field-checkbox-check-color-readonly: var(--skra-sys-color-neutral-contrast);
607
618
  --skra-comp-field-radio-border-color: var(--skra-sys-color-border);
608
619
  --skra-comp-field-radio-background: var(--skra-sys-color-surface);
609
620
  --skra-comp-field-radio-checked-background: var(--skra-sys-color-primary-base);
610
621
  --skra-comp-field-radio-checked-background-readonly: var(--skra-sys-color-neutral-base);
611
622
  --skra-comp-field-radio-dot-color: var(--skra-sys-color-primary-contrast);
623
+ --skra-comp-field-radio-dot-color-readonly: var(--skra-sys-color-neutral-contrast);
612
624
  --skra-comp-field-switch-border-color: var(--skra-sys-color-border);
613
625
  --skra-comp-field-switch-background: var(--skra-sys-color-border-subtle);
626
+ --skra-comp-field-switch-background-readonly: var(--skra-sys-color-neutral-base);
614
627
  --skra-comp-field-switch-checked-background: var(--skra-sys-color-primary-base);
615
628
  --skra-comp-field-switch-checked-background-readonly: var(--skra-sys-color-neutral-base);
616
629
  --skra-comp-field-switch-thumb-color: var(--skra-sys-color-surface);
630
+ --skra-comp-field-switch-thumb-color-readonly: var(--skra-sys-color-neutral-contrast);
617
631
  --skra-comp-field-switch-thumb-color-checked: var(--skra-sys-color-primary-contrast);
632
+ --skra-comp-field-switch-thumb-color-checked-readonly: var(--skra-sys-color-neutral-contrast);
618
633
  --skra-comp-field-group-legend-color: var(--skra-sys-color-on-surface);
619
634
  --skra-comp-field-select-option-foreground: var(--skra-sys-color-on-surface);
620
635
  --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
@@ -671,8 +686,8 @@
671
686
  --skra-comp-skeleton-foreground: var(--skra-sys-color-on-surface);
672
687
  --skra-comp-skeleton-border-color: var(--skra-sys-color-neutral-border);
673
688
  --skra-comp-skeleton-focus-ring-color: var(--skra-sys-color-focus-ring);
674
- --skra-comp-star-rating-star-color-empty: var(--skra-sys-color-border);
675
- --skra-comp-star-rating-star-color-filled: var(--skra-sys-color-primary-base);
689
+ --skra-comp-star-rating-star-color-empty: var(--skra-sys-color-border-subtle);
690
+ --skra-comp-star-rating-star-color-filled: var(--skra-sys-color-primary-ink);
676
691
  --skra-comp-star-rating-focus-ring-color: var(--skra-sys-color-focus-ring);
677
692
  --skra-comp-status-dot-background: var(--skra-sys-color-neutral-base);
678
693
  --skra-comp-status-dot-foreground: var(--skra-sys-color-neutral-contrast);
@@ -692,7 +707,7 @@
692
707
  --skra-comp-tabs-indicator-color: var(--skra-sys-color-primary-base);
693
708
  --skra-comp-tabs-tablist-border-color: var(--skra-sys-color-border);
694
709
  --skra-comp-toast-background: var(--skra-sys-color-neutral-soft);
695
- --skra-comp-toast-foreground: var(--skra-sys-color-neutral-ink);
710
+ --skra-comp-toast-foreground: var(--skra-sys-color-neutral-strong);
696
711
  --skra-comp-toast-border-color: var(--skra-sys-color-neutral-border);
697
712
  --skra-comp-toast-focus-ring-color: var(--skra-sys-color-focus-ring);
698
713
  --skra-comp-tooltip-background: var(--skra-sys-color-inverse-surface);
@@ -721,6 +736,7 @@
721
736
  /* O-24 — build-baked form-control glyphs (token-resolved colour per scheme) — form-glyph-synth.mjs */
722
737
  [data-skra-color-scheme="dark"] {
723
738
  --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");
739
+ --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");
724
740
  --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");
725
741
  --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");
726
742
  --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");
package/brutal/_theme.scoped.scss CHANGED
@@ -21,14 +21,14 @@
21
21
  --skra-sys-color-primary-contrast-active: oklch(18.0% 0 0);
22
22
  --skra-sys-color-primary-border-hover: oklch(12.0% 0 0);
23
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);
24
+ --skra-sys-color-primary-soft-hover: oklch(98.0% 0.06 100);
25
+ --skra-sys-color-primary-soft-active: oklch(98.0% 0.06 100);
26
26
  --skra-sys-color-primary-strong-hover: oklch(62.0% 0.11 98);
27
27
  --skra-sys-color-primary-strong-active: oklch(68.0% 0.11 98);
28
28
  --skra-sys-color-primary-ink-hover: oklch(62.0% 0.11 98);
29
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);
30
+ --skra-sys-color-secondary-base-hover: oklch(33.0% 0.04 250);
31
+ --skra-sys-color-secondary-base-active: oklch(27.0% 0.04 250);
32
32
  --skra-sys-color-secondary-contrast-hover: oklch(88.0% 0 0);
33
33
  --skra-sys-color-secondary-contrast-active: oklch(82.0% 0 0);
34
34
  --skra-sys-color-secondary-border-hover: oklch(12.0% 0 0);
@@ -39,8 +39,8 @@
39
39
  --skra-sys-color-secondary-strong-active: oklch(48.0% 0.04 250);
40
40
  --skra-sys-color-secondary-ink-hover: oklch(57.0% 0.04 250);
41
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);
42
+ --skra-sys-color-info-base-hover: oklch(38.0% 0.12 220);
43
+ --skra-sys-color-info-base-active: oklch(32.0% 0.12 220);
44
44
  --skra-sys-color-info-contrast-hover: oklch(88.0% 0 0);
45
45
  --skra-sys-color-info-contrast-active: oklch(82.0% 0 0);
46
46
  --skra-sys-color-info-border-hover: oklch(12.0% 0 0);
@@ -51,8 +51,8 @@
51
51
  --skra-sys-color-info-strong-active: oklch(53.0% 0.12 220);
52
52
  --skra-sys-color-info-ink-hover: oklch(62.0% 0.12 220);
53
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);
54
+ --skra-sys-color-success-base-hover: oklch(36.0% 0.15 145);
55
+ --skra-sys-color-success-base-active: oklch(30.0% 0.15 145);
56
56
  --skra-sys-color-success-contrast-hover: oklch(88.0% 0 0);
57
57
  --skra-sys-color-success-contrast-active: oklch(82.0% 0 0);
58
58
  --skra-sys-color-success-border-hover: oklch(12.0% 0 0);
@@ -63,8 +63,8 @@
63
63
  --skra-sys-color-success-strong-active: oklch(50.0% 0.13 145);
64
64
  --skra-sys-color-success-ink-hover: oklch(60.0% 0.15 145);
65
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);
66
+ --skra-sys-color-warning-base-hover: oklch(82.0% 0.15 80);
67
+ --skra-sys-color-warning-base-active: oklch(88.0% 0.15 80);
68
68
  --skra-sys-color-warning-contrast-hover: oklch(30.0% 0.05 80);
69
69
  --skra-sys-color-warning-contrast-active: oklch(36.0% 0.05 80);
70
70
  --skra-sys-color-warning-border-hover: oklch(12.0% 0 0);
@@ -75,8 +75,8 @@
75
75
  --skra-sys-color-warning-strong-active: oklch(56.0% 0.12 80);
76
76
  --skra-sys-color-warning-ink-hover: oklch(50.0% 0.12 80);
77
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);
78
+ --skra-sys-color-danger-base-hover: oklch(36.0% 0.2 25);
79
+ --skra-sys-color-danger-base-active: oklch(30.0% 0.2 25);
80
80
  --skra-sys-color-danger-contrast-hover: oklch(88.0% 0 0);
81
81
  --skra-sys-color-danger-contrast-active: oklch(82.0% 0 0);
82
82
  --skra-sys-color-danger-border-hover: oklch(12.0% 0 0);
@@ -174,8 +174,8 @@
174
174
  --skra-comp-accordion-item-background-expanded: rgba(0, 0, 0, 0);
175
175
  --skra-comp-alert-background-hover: oklch(83.0% 0 0);
176
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);
177
+ --skra-comp-alert-foreground-hover: oklch(12.0% 0 0);
178
+ --skra-comp-alert-foreground-active: oklch(18.0% 0 0);
179
179
  --skra-comp-alert-border-color-hover: oklch(12.0% 0 0);
180
180
  --skra-comp-alert-border-color-active: oklch(18.0% 0 0);
181
181
  --skra-comp-alert-focus-ring-color-hover: oklch(57.0% 0.18 295);
@@ -207,8 +207,8 @@
207
207
  --skra-comp-avatar-icon-size: 1em;
208
208
  --skra-comp-badge-background-hover: oklch(83.0% 0 0);
209
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);
210
+ --skra-comp-badge-foreground-hover: oklch(12.0% 0 0);
211
+ --skra-comp-badge-foreground-active: oklch(18.0% 0 0);
212
212
  --skra-comp-badge-border-color-hover: oklch(12.0% 0 0);
213
213
  --skra-comp-badge-border-color-active: oklch(18.0% 0 0);
214
214
  --skra-comp-badge-focus-ring-color-hover: oklch(57.0% 0.18 295);
@@ -237,8 +237,8 @@
237
237
  --skra-comp-button-icon-size: 1em;
238
238
  --skra-comp-chip-background-hover: oklch(83.0% 0 0);
239
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);
240
+ --skra-comp-chip-foreground-hover: oklch(12.0% 0 0);
241
+ --skra-comp-chip-foreground-active: oklch(18.0% 0 0);
242
242
  --skra-comp-chip-border-color-hover: oklch(12.0% 0 0);
243
243
  --skra-comp-chip-border-color-active: oklch(18.0% 0 0);
244
244
  --skra-comp-chip-focus-ring-color-hover: oklch(57.0% 0.18 295);
@@ -302,7 +302,7 @@
302
302
  --skra-comp-datepicker-panel-border-color-active: oklch(43.0% 0 0);
303
303
  --skra-comp-datepicker-header-foreground-hover: oklch(12.0% 0 0);
304
304
  --skra-comp-datepicker-header-foreground-active: oklch(18.0% 0 0);
305
- --skra-comp-datepicker-nav-color-active: oklch(53.0% 0 0);
305
+ --skra-comp-datepicker-nav-color-active: oklch(17.0% 0 0);
306
306
  --skra-comp-datepicker-weekday-foreground-hover: oklch(47.0% 0 0);
307
307
  --skra-comp-datepicker-weekday-foreground-active: oklch(53.0% 0 0);
308
308
  --skra-comp-datepicker-cell-foreground-hover: oklch(12.0% 0 0);
@@ -364,6 +364,8 @@
364
364
  --skra-comp-field-checkbox-checked-background-readonly-active: oklch(43.0% 0 0);
365
365
  --skra-comp-field-checkbox-check-color-hover: oklch(12.0% 0 0);
366
366
  --skra-comp-field-checkbox-check-color-active: oklch(18.0% 0 0);
367
+ --skra-comp-field-checkbox-check-color-readonly-hover: oklch(88.0% 0 0);
368
+ --skra-comp-field-checkbox-check-color-readonly-active: oklch(82.0% 0 0);
367
369
  --skra-comp-field-checkbox-border-width: 0.125rem;
368
370
  --skra-comp-field-radio-border-color-hover: oklch(12.0% 0 0);
369
371
  --skra-comp-field-radio-border-color-active: oklch(18.0% 0 0);
@@ -375,17 +377,25 @@
375
377
  --skra-comp-field-radio-checked-background-readonly-active: oklch(43.0% 0 0);
376
378
  --skra-comp-field-radio-dot-color-hover: oklch(12.0% 0 0);
377
379
  --skra-comp-field-radio-dot-color-active: oklch(18.0% 0 0);
380
+ --skra-comp-field-radio-dot-color-readonly-hover: oklch(88.0% 0 0);
381
+ --skra-comp-field-radio-dot-color-readonly-active: oklch(82.0% 0 0);
378
382
  --skra-comp-field-radio-border-width: 0.125rem;
379
383
  --skra-comp-field-switch-border-color-hover: oklch(12.0% 0 0);
380
384
  --skra-comp-field-switch-border-color-active: oklch(18.0% 0 0);
381
385
  --skra-comp-field-switch-background-hover: oklch(37.0% 0 0);
382
386
  --skra-comp-field-switch-background-active: oklch(43.0% 0 0);
387
+ --skra-comp-field-switch-background-readonly-hover: oklch(37.0% 0 0);
388
+ --skra-comp-field-switch-background-readonly-active: oklch(43.0% 0 0);
383
389
  --skra-comp-field-switch-checked-background-hover: oklch(73.0% 0.17 98);
384
390
  --skra-comp-field-switch-checked-background-active: oklch(67.0% 0.17 98);
385
391
  --skra-comp-field-switch-checked-background-readonly-hover: oklch(37.0% 0 0);
386
392
  --skra-comp-field-switch-checked-background-readonly-active: oklch(43.0% 0 0);
387
393
  --skra-comp-field-switch-thumb-color-hover: oklch(85.0% 0.015 95);
388
394
  --skra-comp-field-switch-thumb-color-active: oklch(79.0% 0.015 95);
395
+ --skra-comp-field-switch-thumb-color-readonly-hover: oklch(88.0% 0 0);
396
+ --skra-comp-field-switch-thumb-color-readonly-active: oklch(82.0% 0 0);
397
+ --skra-comp-field-switch-thumb-color-checked-readonly-hover: oklch(88.0% 0 0);
398
+ --skra-comp-field-switch-thumb-color-checked-readonly-active: oklch(82.0% 0 0);
389
399
  --skra-comp-field-switch-track-inline-size: 2.25rem;
390
400
  --skra-comp-field-switch-track-block-size: 1.25rem;
391
401
  --skra-comp-field-switch-border-width: 0.125rem;
@@ -517,10 +527,10 @@
517
527
  --skra-comp-skeleton-padding-block: 0rem;
518
528
  --skra-comp-skeleton-padding-inline: 0rem;
519
529
  --skra-comp-skeleton-focus-ring-width: 0.1875rem;
520
- --skra-comp-star-rating-star-color-empty-hover: oklch(12.0% 0 0);
521
- --skra-comp-star-rating-star-color-empty-active: oklch(18.0% 0 0);
522
- --skra-comp-star-rating-star-color-filled-hover: oklch(73.0% 0.17 98);
523
- --skra-comp-star-rating-star-color-filled-active: oklch(67.0% 0.17 98);
530
+ --skra-comp-star-rating-star-color-empty-hover: oklch(37.0% 0 0);
531
+ --skra-comp-star-rating-star-color-empty-active: oklch(43.0% 0 0);
532
+ --skra-comp-star-rating-star-color-filled-hover: oklch(62.0% 0.11 98);
533
+ --skra-comp-star-rating-star-color-filled-active: oklch(68.0% 0.11 98);
524
534
  --skra-comp-star-rating-focus-ring-color-hover: oklch(57.0% 0.18 295);
525
535
  --skra-comp-star-rating-focus-ring-color-active: oklch(63.0% 0.18 295);
526
536
  --skra-comp-star-rating-gap: 0.25rem;
@@ -573,8 +583,8 @@
573
583
  --skra-comp-tabs-tablist-border-width: 0.1875rem;
574
584
  --skra-comp-toast-background-hover: oklch(83.0% 0 0);
575
585
  --skra-comp-toast-background-active: oklch(77.0% 0 0);
576
- --skra-comp-toast-foreground-hover: oklch(37.0% 0 0);
577
- --skra-comp-toast-foreground-active: oklch(43.0% 0 0);
586
+ --skra-comp-toast-foreground-hover: oklch(12.0% 0 0);
587
+ --skra-comp-toast-foreground-active: oklch(18.0% 0 0);
578
588
  --skra-comp-toast-border-color-hover: oklch(12.0% 0 0);
579
589
  --skra-comp-toast-border-color-active: oklch(18.0% 0 0);
580
590
  --skra-comp-toast-focus-ring-color-hover: oklch(57.0% 0.18 295);
@@ -888,7 +898,7 @@
888
898
  --skra-comp-accordion-panel-padding-block: var(--skra-sys-spacing-3);
889
899
  --skra-comp-accordion-panel-padding-inline: var(--skra-sys-spacing-4);
890
900
  --skra-comp-alert-background: var(--skra-sys-color-neutral-soft);
891
- --skra-comp-alert-foreground: var(--skra-sys-color-neutral-ink);
901
+ --skra-comp-alert-foreground: var(--skra-sys-color-neutral-strong);
892
902
  --skra-comp-alert-border-color: var(--skra-sys-color-neutral-border);
893
903
  --skra-comp-alert-padding-block: var(--skra-sys-spacing-3);
894
904
  --skra-comp-alert-padding-inline: var(--skra-sys-spacing-4);
@@ -897,6 +907,7 @@
897
907
  --skra-comp-alert-focus-ring-color: var(--skra-sys-color-focus-ring);
898
908
  --skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
899
909
  --skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
910
+ --skra-comp-alert-actions-gap: var(--skra-sys-spacing-2);
900
911
  --skra-comp-avatar-background: var(--skra-sys-color-neutral-soft);
901
912
  --skra-comp-avatar-foreground: var(--skra-sys-color-neutral-strong);
902
913
  --skra-comp-avatar-border-color: var(--skra-sys-color-neutral-border);
@@ -907,7 +918,7 @@
907
918
  --skra-comp-avatar-size-md: var(--skra-sys-size-avatar-md);
908
919
  --skra-comp-avatar-size-lg: var(--skra-sys-size-avatar-lg);
909
920
  --skra-comp-badge-background: var(--skra-sys-color-neutral-soft);
910
- --skra-comp-badge-foreground: var(--skra-sys-color-neutral-ink);
921
+ --skra-comp-badge-foreground: var(--skra-sys-color-neutral-strong);
911
922
  --skra-comp-badge-border-color: var(--skra-sys-color-neutral-border);
912
923
  --skra-comp-badge-padding-block: var(--skra-sys-spacing-1);
913
924
  --skra-comp-badge-padding-inline: var(--skra-sys-spacing-2);
@@ -935,7 +946,7 @@
935
946
  --skra-comp-button-icon-gap: var(--skra-sys-spacing-2);
936
947
  --skra-comp-button-loading-indicator-color: var(--skra-sys-color-on-surface);
937
948
  --skra-comp-chip-background: var(--skra-sys-color-neutral-soft);
938
- --skra-comp-chip-foreground: var(--skra-sys-color-neutral-ink);
949
+ --skra-comp-chip-foreground: var(--skra-sys-color-neutral-strong);
939
950
  --skra-comp-chip-border-color: var(--skra-sys-color-neutral-border);
940
951
  --skra-comp-chip-padding-block: var(--skra-sys-spacing-1);
941
952
  --skra-comp-chip-padding-inline: var(--skra-sys-spacing-2);
@@ -1018,6 +1029,7 @@
1018
1029
  --skra-comp-field-checkbox-checked-background: var(--skra-sys-color-primary-base);
1019
1030
  --skra-comp-field-checkbox-checked-background-readonly: var(--skra-sys-color-neutral-base);
1020
1031
  --skra-comp-field-checkbox-check-color: var(--skra-sys-color-primary-contrast);
1032
+ --skra-comp-field-checkbox-check-color-readonly: var(--skra-sys-color-neutral-contrast);
1021
1033
  --skra-comp-field-checkbox-gap: var(--skra-sys-spacing-2);
1022
1034
  --skra-comp-field-checkbox-touch-target: var(--skra-sys-spacing-6);
1023
1035
  --skra-comp-field-radio-size: var(--skra-sys-spacing-4);
@@ -1026,15 +1038,19 @@
1026
1038
  --skra-comp-field-radio-checked-background: var(--skra-sys-color-primary-base);
1027
1039
  --skra-comp-field-radio-checked-background-readonly: var(--skra-sys-color-neutral-base);
1028
1040
  --skra-comp-field-radio-dot-color: var(--skra-sys-color-primary-contrast);
1041
+ --skra-comp-field-radio-dot-color-readonly: var(--skra-sys-color-neutral-contrast);
1029
1042
  --skra-comp-field-radio-dot-size: var(--skra-sys-spacing-2);
1030
1043
  --skra-comp-field-radio-gap: var(--skra-sys-spacing-2);
1031
1044
  --skra-comp-field-radio-touch-target: var(--skra-sys-spacing-6);
1032
1045
  --skra-comp-field-switch-border-color: var(--skra-sys-color-border);
1033
1046
  --skra-comp-field-switch-background: var(--skra-sys-color-border-subtle);
1047
+ --skra-comp-field-switch-background-readonly: var(--skra-sys-color-neutral-base);
1034
1048
  --skra-comp-field-switch-checked-background: var(--skra-sys-color-primary-base);
1035
1049
  --skra-comp-field-switch-checked-background-readonly: var(--skra-sys-color-neutral-base);
1036
1050
  --skra-comp-field-switch-thumb-color: var(--skra-sys-color-surface);
1051
+ --skra-comp-field-switch-thumb-color-readonly: var(--skra-sys-color-neutral-contrast);
1037
1052
  --skra-comp-field-switch-thumb-color-checked: var(--skra-sys-color-primary-contrast);
1053
+ --skra-comp-field-switch-thumb-color-checked-readonly: var(--skra-sys-color-neutral-contrast);
1038
1054
  --skra-comp-field-switch-gap: var(--skra-sys-spacing-2);
1039
1055
  --skra-comp-field-switch-touch-target: var(--skra-sys-spacing-6);
1040
1056
  --skra-comp-field-group-gap: var(--skra-sys-spacing-3);
@@ -1154,8 +1170,8 @@
1154
1170
  --skra-comp-skeleton-motion-duration: var(--skra-sys-motion-duration-fast);
1155
1171
  --skra-comp-skeleton-motion-easing: var(--skra-sys-motion-easing-standard);
1156
1172
  --skra-comp-skeleton-focus-ring-color: var(--skra-sys-color-focus-ring);
1157
- --skra-comp-star-rating-star-color-empty: var(--skra-sys-color-border);
1158
- --skra-comp-star-rating-star-color-filled: var(--skra-sys-color-primary-base);
1173
+ --skra-comp-star-rating-star-color-empty: var(--skra-sys-color-border-subtle);
1174
+ --skra-comp-star-rating-star-color-filled: var(--skra-sys-color-primary-ink);
1159
1175
  --skra-comp-star-rating-focus-ring-color: var(--skra-sys-color-focus-ring);
1160
1176
  --skra-comp-star-rating-motion-duration: var(--skra-sys-motion-duration-fast);
1161
1177
  --skra-comp-star-rating-motion-easing: var(--skra-sys-motion-easing-standard);
@@ -1197,7 +1213,7 @@
1197
1213
  --skra-comp-tabs-panel-padding-block: var(--skra-sys-spacing-4);
1198
1214
  --skra-comp-tabs-panel-padding-inline: var(--skra-sys-spacing-1);
1199
1215
  --skra-comp-toast-background: var(--skra-sys-color-neutral-soft);
1200
- --skra-comp-toast-foreground: var(--skra-sys-color-neutral-ink);
1216
+ --skra-comp-toast-foreground: var(--skra-sys-color-neutral-strong);
1201
1217
  --skra-comp-toast-border-color: var(--skra-sys-color-neutral-border);
1202
1218
  --skra-comp-toast-padding-block: var(--skra-sys-spacing-3);
1203
1219
  --skra-comp-toast-padding-inline: var(--skra-sys-spacing-4);
@@ -1320,6 +1336,7 @@
1320
1336
  /* O-24 — build-baked form-control glyphs (token-resolved colour per scheme) — form-glyph-synth.mjs */
1321
1337
  [data-skra-skin="brutal"] {
1322
1338
  --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");
1339
+ --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%28100%25%200%200%29' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 19 7'/%3E%3C/svg%3E");
1323
1340
  --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");
1324
1341
  --skra-comp-field-calendar-indicator-glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='oklch%280%25%200%200%29' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3C/svg%3E");
1325
1342
  --skra-comp-field-clock-indicator-glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='oklch%280%25%200%200%29' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 16 14'/%3E%3C/svg%3E");