@skra/tokens 0.5.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 (10) hide show
  1. package/brutal/_comp.scss +35 -19
  2. package/brutal/_theme.dark.scoped.scss +65 -49
  3. package/brutal/_theme.dark.scss +65 -49
  4. package/brutal/_theme.scoped.scss +47 -31
  5. package/brutal/_theme.scss +15 -12
  6. package/manifests/star-rating.json +96 -96
  7. package/package.json +1 -1
  8. package/skra/_comp.scss +35 -19
  9. package/skra/_theme.dark.scss +62 -46
  10. package/skra/_theme.scss +7 -4
package/skra/_theme.dark.scss CHANGED
@@ -11,8 +11,8 @@
11
11
  --skra-sys-color-neutral-strong: oklch(75.0% 0 0);
12
12
  --skra-sys-color-neutral-ink: oklch(65.0% 0 0);
13
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);
14
+ --skra-sys-color-neutral-base-hover: oklch(43.0% 0 0);
15
+ --skra-sys-color-neutral-base-active: oklch(39.5% 0 0);
16
16
  --skra-sys-color-neutral-border-hover: oklch(53.0% 0 0);
17
17
  --skra-sys-color-neutral-border-active: oklch(49.5% 0 0);
18
18
  --skra-sys-color-neutral-soft-hover: oklch(31.0% 0 0);
@@ -29,12 +29,12 @@
29
29
  --skra-sys-color-primary-strong: oklch(62.0% 0.135 250);
30
30
  --skra-sys-color-primary-ink: oklch(67.0% 0.135 250);
31
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);
32
+ --skra-sys-color-primary-base-hover: oklch(74.0% 0.135 250);
33
+ --skra-sys-color-primary-base-active: oklch(77.5% 0.135 250);
34
34
  --skra-sys-color-primary-border-hover: oklch(60.0% 0.135 250);
35
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);
36
+ --skra-sys-color-primary-soft-hover: oklch(17.0% 0.04 250);
37
+ --skra-sys-color-primary-soft-active: oklch(13.5% 0.04 250);
38
38
  --skra-sys-color-primary-strong-hover: oklch(55.0% 0.135 250);
39
39
  --skra-sys-color-primary-strong-active: oklch(51.5% 0.135 250);
40
40
  --skra-sys-color-primary-ink-hover: oklch(60.0% 0.135 250);
@@ -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(68.0% 0.036 250);
49
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);
50
+ --skra-sys-color-secondary-base-hover: oklch(75.0% 0.036 250);
51
+ --skra-sys-color-secondary-base-active: oklch(78.5% 0.036 250);
52
52
  --skra-sys-color-secondary-border-hover: oklch(53.0% 0.036 250);
53
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);
54
+ --skra-sys-color-secondary-soft-hover: oklch(17.0% 0.02 250);
55
+ --skra-sys-color-secondary-soft-active: oklch(13.5% 0.02 250);
56
56
  --skra-sys-color-secondary-strong-hover: oklch(55.0% 0.036 250);
57
57
  --skra-sys-color-secondary-strong-active: oklch(51.5% 0.036 250);
58
58
  --skra-sys-color-secondary-ink-hover: oklch(61.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(58.0% 0.108 220);
69
- --skra-sys-color-info-base-active: oklch(54.5% 0.108 220);
68
+ --skra-sys-color-info-base-hover: oklch(72.0% 0.108 220);
69
+ --skra-sys-color-info-base-active: oklch(75.5% 0.108 220);
70
70
  --skra-sys-color-info-border-hover: oklch(58.0% 0.108 220);
71
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);
72
+ --skra-sys-color-info-soft-hover: oklch(17.0% 0.04 220);
73
+ --skra-sys-color-info-soft-active: oklch(13.5% 0.04 220);
74
74
  --skra-sys-color-info-strong-hover: oklch(54.5% 0.108 220);
75
75
  --skra-sys-color-info-strong-active: oklch(51.0% 0.108 220);
76
76
  --skra-sys-color-info-ink-hover: oklch(58.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(67.0% 0.135 145);
85
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);
86
+ --skra-sys-color-success-base-hover: oklch(74.0% 0.135 145);
87
+ --skra-sys-color-success-base-active: oklch(77.5% 0.135 145);
88
88
  --skra-sys-color-success-border-hover: oklch(56.0% 0.135 145);
89
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);
90
+ --skra-sys-color-success-soft-hover: oklch(17.0% 0.05 145);
91
+ --skra-sys-color-success-soft-active: oklch(13.5% 0.05 145);
92
92
  --skra-sys-color-success-strong-hover: oklch(54.5% 0.117 145);
93
93
  --skra-sys-color-success-strong-active: oklch(51.0% 0.117 145);
94
94
  --skra-sys-color-success-ink-hover: oklch(60.0% 0.135 145);
@@ -105,8 +105,8 @@
105
105
  --skra-sys-color-warning-base-active: oklch(71.5% 0.135 80);
106
106
  --skra-sys-color-warning-border-hover: oklch(68.0% 0.135 80);
107
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);
108
+ --skra-sys-color-warning-soft-hover: oklch(17.0% 0.05 80);
109
+ --skra-sys-color-warning-soft-active: oklch(13.5% 0.05 80);
110
110
  --skra-sys-color-warning-strong-hover: oklch(55.5% 0.108 80);
111
111
  --skra-sys-color-warning-strong-active: oklch(52.0% 0.108 80);
112
112
  --skra-sys-color-warning-ink-hover: oklch(51.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(70.0% 0.18 25);
121
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);
122
+ --skra-sys-color-danger-base-hover: oklch(77.0% 0.18 25);
123
+ --skra-sys-color-danger-base-active: oklch(80.5% 0.18 25);
124
124
  --skra-sys-color-danger-border-hover: oklch(56.0% 0.18 25);
125
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);
126
+ --skra-sys-color-danger-soft-hover: oklch(17.0% 0.04 25);
127
+ --skra-sys-color-danger-soft-active: oklch(13.5% 0.04 25);
128
128
  --skra-sys-color-danger-strong-hover: oklch(56.5% 0.144 25);
129
129
  --skra-sys-color-danger-strong-active: oklch(53.0% 0.144 25);
130
130
  --skra-sys-color-danger-ink-hover: oklch(63.0% 0.18 25);
@@ -147,7 +147,7 @@
147
147
  --skra-sys-color-hint: oklch(60.0% 0 0);
148
148
  --skra-sys-color-focus-ring: oklch(75.0% 0.135 250);
149
149
  --skra-sys-color-link: oklch(67.0% 0.135 250);
150
- --skra-sys-color-link-hover: oklch(58.0% 0.135 250);
150
+ --skra-sys-color-link-hover: oklch(74% 0.13 250);
151
151
  --skra-sys-color-link-visited: oklch(60.0% 0.162 295);
152
152
  --skra-sys-color-shadow-ink: oklch(0% 0 0);
153
153
  --skra-sys-color-surface-active: oklch(25.5% 0 0);
@@ -173,7 +173,7 @@
173
173
  --skra-sys-color-hint-active: oklch(49.5% 0 0);
174
174
  --skra-sys-color-focus-ring-hover: oklch(68.0% 0.135 250);
175
175
  --skra-sys-color-focus-ring-active: oklch(64.5% 0.135 250);
176
- --skra-sys-color-link-active: oklch(56.5% 0.135 250);
176
+ --skra-sys-color-link-active: oklch(77.5% 0.135 250);
177
177
  --skra-sys-color-shadow-ink-hover: oklch(7.0% 0 0);
178
178
  --skra-sys-color-shadow-ink-active: oklch(10.5% 0 0);
179
179
  --skra-comp-accordion-foreground-hover: oklch(85.0% 0 0);
@@ -194,8 +194,8 @@
194
194
  --skra-comp-accordion-panel-foreground-active: oklch(54.5% 0 0);
195
195
  --skra-comp-alert-background-hover: oklch(31.0% 0 0);
196
196
  --skra-comp-alert-background-active: oklch(34.5% 0 0);
197
- --skra-comp-alert-foreground-hover: oklch(58.0% 0 0);
198
- --skra-comp-alert-foreground-active: oklch(54.5% 0 0);
197
+ --skra-comp-alert-foreground-hover: oklch(68.0% 0 0);
198
+ --skra-comp-alert-foreground-active: oklch(64.5% 0 0);
199
199
  --skra-comp-alert-border-color-hover: oklch(53.0% 0 0);
200
200
  --skra-comp-alert-border-color-active: oklch(49.5% 0 0);
201
201
  --skra-comp-alert-focus-ring-color-hover: oklch(68.0% 0.135 250);
@@ -210,14 +210,14 @@
210
210
  --skra-comp-avatar-focus-ring-color-active: oklch(64.5% 0.135 250);
211
211
  --skra-comp-badge-background-hover: oklch(31.0% 0 0);
212
212
  --skra-comp-badge-background-active: oklch(34.5% 0 0);
213
- --skra-comp-badge-foreground-hover: oklch(58.0% 0 0);
214
- --skra-comp-badge-foreground-active: oklch(54.5% 0 0);
213
+ --skra-comp-badge-foreground-hover: oklch(68.0% 0 0);
214
+ --skra-comp-badge-foreground-active: oklch(64.5% 0 0);
215
215
  --skra-comp-badge-border-color-hover: oklch(53.0% 0 0);
216
216
  --skra-comp-badge-border-color-active: oklch(49.5% 0 0);
217
217
  --skra-comp-badge-focus-ring-color-hover: oklch(68.0% 0.135 250);
218
218
  --skra-comp-badge-focus-ring-color-active: oklch(64.5% 0.135 250);
219
- --skra-comp-button-background-hover: oklch(57.0% 0 0);
220
- --skra-comp-button-background-active: oklch(60.5% 0 0);
219
+ --skra-comp-button-background-hover: oklch(43.0% 0 0);
220
+ --skra-comp-button-background-active: oklch(39.5% 0 0);
221
221
  --skra-comp-button-foreground-hover: oklch(89.0% 0 0);
222
222
  --skra-comp-button-foreground-active: oklch(85.5% 0 0);
223
223
  --skra-comp-button-focus-ring-color-hover: oklch(68.0% 0.135 250);
@@ -226,8 +226,8 @@
226
226
  --skra-comp-button-loading-indicator-color-active: oklch(81.5% 0 0);
227
227
  --skra-comp-chip-background-hover: oklch(31.0% 0 0);
228
228
  --skra-comp-chip-background-active: oklch(34.5% 0 0);
229
- --skra-comp-chip-foreground-hover: oklch(58.0% 0 0);
230
- --skra-comp-chip-foreground-active: oklch(54.5% 0 0);
229
+ --skra-comp-chip-foreground-hover: oklch(68.0% 0 0);
230
+ --skra-comp-chip-foreground-active: oklch(64.5% 0 0);
231
231
  --skra-comp-chip-border-color-hover: oklch(53.0% 0 0);
232
232
  --skra-comp-chip-border-color-active: oklch(49.5% 0 0);
233
233
  --skra-comp-chip-focus-ring-color-hover: oklch(68.0% 0.135 250);
@@ -278,7 +278,7 @@
278
278
  --skra-comp-datepicker-panel-border-color-active: oklch(49.5% 0 0);
279
279
  --skra-comp-datepicker-header-foreground-hover: oklch(85.0% 0 0);
280
280
  --skra-comp-datepicker-header-foreground-active: oklch(81.5% 0 0);
281
- --skra-comp-datepicker-nav-color-active: oklch(54.5% 0 0);
281
+ --skra-comp-datepicker-nav-color-active: oklch(75.5% 0 0);
282
282
  --skra-comp-datepicker-weekday-foreground-hover: oklch(58.0% 0 0);
283
283
  --skra-comp-datepicker-weekday-foreground-active: oklch(54.5% 0 0);
284
284
  --skra-comp-datepicker-cell-foreground-hover: oklch(85.0% 0 0);
@@ -323,6 +323,8 @@
323
323
  --skra-comp-field-checkbox-checked-background-readonly-active: oklch(60.5% 0 0);
324
324
  --skra-comp-field-checkbox-check-color-hover: oklch(25.0% 0 0);
325
325
  --skra-comp-field-checkbox-check-color-active: oklch(28.5% 0 0);
326
+ --skra-comp-field-checkbox-check-color-readonly-hover: oklch(89.0% 0 0);
327
+ --skra-comp-field-checkbox-check-color-readonly-active: oklch(85.5% 0 0);
326
328
  --skra-comp-field-radio-border-color-hover: oklch(53.0% 0 0);
327
329
  --skra-comp-field-radio-border-color-active: oklch(49.5% 0 0);
328
330
  --skra-comp-field-radio-background-hover: oklch(22.0% 0 0);
@@ -333,16 +335,24 @@
333
335
  --skra-comp-field-radio-checked-background-readonly-active: oklch(60.5% 0 0);
334
336
  --skra-comp-field-radio-dot-color-hover: oklch(25.0% 0 0);
335
337
  --skra-comp-field-radio-dot-color-active: oklch(28.5% 0 0);
338
+ --skra-comp-field-radio-dot-color-readonly-hover: oklch(89.0% 0 0);
339
+ --skra-comp-field-radio-dot-color-readonly-active: oklch(85.5% 0 0);
336
340
  --skra-comp-field-switch-border-color-hover: oklch(53.0% 0 0);
337
341
  --skra-comp-field-switch-border-color-active: oklch(49.5% 0 0);
338
342
  --skra-comp-field-switch-background-hover: oklch(53.0% 0 0);
339
343
  --skra-comp-field-switch-background-active: oklch(49.5% 0 0);
344
+ --skra-comp-field-switch-background-readonly-hover: oklch(57.0% 0 0);
345
+ --skra-comp-field-switch-background-readonly-active: oklch(60.5% 0 0);
340
346
  --skra-comp-field-switch-checked-background-hover: oklch(60.0% 0.135 250);
341
347
  --skra-comp-field-switch-checked-background-active: oklch(56.5% 0.135 250);
342
348
  --skra-comp-field-switch-checked-background-readonly-hover: oklch(57.0% 0 0);
343
349
  --skra-comp-field-switch-checked-background-readonly-active: oklch(60.5% 0 0);
344
350
  --skra-comp-field-switch-thumb-color-hover: oklch(22.0% 0 0);
345
351
  --skra-comp-field-switch-thumb-color-active: oklch(25.5% 0 0);
352
+ --skra-comp-field-switch-thumb-color-readonly-hover: oklch(89.0% 0 0);
353
+ --skra-comp-field-switch-thumb-color-readonly-active: oklch(85.5% 0 0);
354
+ --skra-comp-field-switch-thumb-color-checked-readonly-hover: oklch(89.0% 0 0);
355
+ --skra-comp-field-switch-thumb-color-checked-readonly-active: oklch(85.5% 0 0);
346
356
  --skra-comp-field-group-legend-color-hover: oklch(85.0% 0 0);
347
357
  --skra-comp-field-group-legend-color-active: oklch(81.5% 0 0);
348
358
  --skra-comp-field-select-option-foreground-hover: oklch(85.0% 0 0);
@@ -361,7 +371,7 @@
361
371
  --skra-comp-kbd-border-color-active: oklch(49.5% 0 0);
362
372
  --skra-comp-kbd-focus-ring-color-hover: oklch(68.0% 0.135 250);
363
373
  --skra-comp-kbd-focus-ring-color-active: oklch(64.5% 0.135 250);
364
- --skra-comp-link-foreground-active: oklch(56.5% 0.135 250);
374
+ --skra-comp-link-foreground-active: oklch(77.5% 0.135 250);
365
375
  --skra-comp-link-focus-ring-color-hover: oklch(68.0% 0.135 250);
366
376
  --skra-comp-link-focus-ring-color-active: oklch(64.5% 0.135 250);
367
377
  --skra-comp-menu-background-hover: oklch(22.0% 0 0);
@@ -430,8 +440,8 @@
430
440
  --skra-comp-skeleton-border-color-active: oklch(49.5% 0 0);
431
441
  --skra-comp-skeleton-focus-ring-color-hover: oklch(68.0% 0.135 250);
432
442
  --skra-comp-skeleton-focus-ring-color-active: oklch(64.5% 0.135 250);
433
- --skra-comp-star-rating-star-color-empty-hover: oklch(85.0% 0 0);
434
- --skra-comp-star-rating-star-color-empty-active: oklch(81.5% 0 0);
443
+ --skra-comp-star-rating-star-color-empty-hover: oklch(53.0% 0 0);
444
+ --skra-comp-star-rating-star-color-empty-active: oklch(49.5% 0 0);
435
445
  --skra-comp-star-rating-star-color-filled-hover: oklch(60.0% 0.135 250);
436
446
  --skra-comp-star-rating-star-color-filled-active: oklch(56.5% 0.135 250);
437
447
  --skra-comp-star-rating-focus-ring-color-hover: oklch(68.0% 0.135 250);
@@ -462,8 +472,8 @@
462
472
  --skra-comp-tabs-tablist-border-color-active: oklch(49.5% 0 0);
463
473
  --skra-comp-toast-background-hover: oklch(31.0% 0 0);
464
474
  --skra-comp-toast-background-active: oklch(34.5% 0 0);
465
- --skra-comp-toast-foreground-hover: oklch(58.0% 0 0);
466
- --skra-comp-toast-foreground-active: oklch(54.5% 0 0);
475
+ --skra-comp-toast-foreground-hover: oklch(68.0% 0 0);
476
+ --skra-comp-toast-foreground-active: oklch(64.5% 0 0);
467
477
  --skra-comp-toast-border-color-hover: oklch(53.0% 0 0);
468
478
  --skra-comp-toast-border-color-active: oklch(49.5% 0 0);
469
479
  --skra-comp-toast-focus-ring-color-hover: oklch(68.0% 0.135 250);
@@ -520,7 +530,7 @@
520
530
  --skra-comp-accordion-item-divider-color: var(--skra-sys-color-border-subtle);
521
531
  --skra-comp-accordion-panel-foreground: var(--skra-sys-color-on-surface-subtle);
522
532
  --skra-comp-alert-background: var(--skra-sys-color-neutral-soft);
523
- --skra-comp-alert-foreground: var(--skra-sys-color-neutral-ink);
533
+ --skra-comp-alert-foreground: var(--skra-sys-color-neutral-strong);
524
534
  --skra-comp-alert-border-color: var(--skra-sys-color-neutral-border);
525
535
  --skra-comp-alert-focus-ring-color: var(--skra-sys-color-focus-ring);
526
536
  --skra-comp-avatar-background: var(--skra-sys-color-neutral-soft);
@@ -528,7 +538,7 @@
528
538
  --skra-comp-avatar-border-color: var(--skra-sys-color-neutral-border);
529
539
  --skra-comp-avatar-focus-ring-color: var(--skra-sys-color-focus-ring);
530
540
  --skra-comp-badge-background: var(--skra-sys-color-neutral-soft);
531
- --skra-comp-badge-foreground: var(--skra-sys-color-neutral-ink);
541
+ --skra-comp-badge-foreground: var(--skra-sys-color-neutral-strong);
532
542
  --skra-comp-badge-border-color: var(--skra-sys-color-neutral-border);
533
543
  --skra-comp-badge-focus-ring-color: var(--skra-sys-color-focus-ring);
534
544
  --skra-comp-button-background: var(--skra-sys-color-neutral-base);
@@ -538,7 +548,7 @@
538
548
  --skra-comp-button-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
539
549
  --skra-comp-button-loading-indicator-color: var(--skra-sys-color-on-surface);
540
550
  --skra-comp-chip-background: var(--skra-sys-color-neutral-soft);
541
- --skra-comp-chip-foreground: var(--skra-sys-color-neutral-ink);
551
+ --skra-comp-chip-foreground: var(--skra-sys-color-neutral-strong);
542
552
  --skra-comp-chip-border-color: var(--skra-sys-color-neutral-border);
543
553
  --skra-comp-chip-focus-ring-color: var(--skra-sys-color-focus-ring);
544
554
  --skra-comp-combobox-background: var(--skra-sys-color-surface);
@@ -597,17 +607,22 @@
597
607
  --skra-comp-field-checkbox-checked-background: var(--skra-sys-color-primary-base);
598
608
  --skra-comp-field-checkbox-checked-background-readonly: var(--skra-sys-color-neutral-base);
599
609
  --skra-comp-field-checkbox-check-color: var(--skra-sys-color-primary-contrast);
610
+ --skra-comp-field-checkbox-check-color-readonly: var(--skra-sys-color-neutral-contrast);
600
611
  --skra-comp-field-radio-border-color: var(--skra-sys-color-border-subtle);
601
612
  --skra-comp-field-radio-background: var(--skra-sys-color-surface);
602
613
  --skra-comp-field-radio-checked-background: var(--skra-sys-color-primary-base);
603
614
  --skra-comp-field-radio-checked-background-readonly: var(--skra-sys-color-neutral-base);
604
615
  --skra-comp-field-radio-dot-color: var(--skra-sys-color-primary-contrast);
616
+ --skra-comp-field-radio-dot-color-readonly: var(--skra-sys-color-neutral-contrast);
605
617
  --skra-comp-field-switch-border-color: var(--skra-sys-color-border-subtle);
606
618
  --skra-comp-field-switch-background: var(--skra-sys-color-border-subtle);
619
+ --skra-comp-field-switch-background-readonly: var(--skra-sys-color-neutral-base);
607
620
  --skra-comp-field-switch-checked-background: var(--skra-sys-color-primary-base);
608
621
  --skra-comp-field-switch-checked-background-readonly: var(--skra-sys-color-neutral-base);
609
622
  --skra-comp-field-switch-thumb-color: var(--skra-sys-color-surface);
623
+ --skra-comp-field-switch-thumb-color-readonly: var(--skra-sys-color-neutral-contrast);
610
624
  --skra-comp-field-switch-thumb-color-checked: var(--skra-sys-color-primary-contrast);
625
+ --skra-comp-field-switch-thumb-color-checked-readonly: var(--skra-sys-color-neutral-contrast);
611
626
  --skra-comp-field-group-legend-color: var(--skra-sys-color-on-surface);
612
627
  --skra-comp-field-select-option-foreground: var(--skra-sys-color-on-surface);
613
628
  --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
@@ -664,8 +679,8 @@
664
679
  --skra-comp-skeleton-foreground: var(--skra-sys-color-on-surface);
665
680
  --skra-comp-skeleton-border-color: var(--skra-sys-color-border-subtle);
666
681
  --skra-comp-skeleton-focus-ring-color: var(--skra-sys-color-focus-ring);
667
- --skra-comp-star-rating-star-color-empty: var(--skra-sys-color-border);
668
- --skra-comp-star-rating-star-color-filled: var(--skra-sys-color-primary-base);
682
+ --skra-comp-star-rating-star-color-empty: var(--skra-sys-color-border-subtle);
683
+ --skra-comp-star-rating-star-color-filled: var(--skra-sys-color-primary-ink);
669
684
  --skra-comp-star-rating-focus-ring-color: var(--skra-sys-color-focus-ring);
670
685
  --skra-comp-status-dot-background: var(--skra-sys-color-neutral-base);
671
686
  --skra-comp-status-dot-foreground: var(--skra-sys-color-neutral-contrast);
@@ -685,7 +700,7 @@
685
700
  --skra-comp-tabs-indicator-color: var(--skra-sys-color-primary-base);
686
701
  --skra-comp-tabs-tablist-border-color: var(--skra-sys-color-border-subtle);
687
702
  --skra-comp-toast-background: var(--skra-sys-color-neutral-soft);
688
- --skra-comp-toast-foreground: var(--skra-sys-color-neutral-ink);
703
+ --skra-comp-toast-foreground: var(--skra-sys-color-neutral-strong);
689
704
  --skra-comp-toast-border-color: var(--skra-sys-color-neutral-border);
690
705
  --skra-comp-toast-focus-ring-color: var(--skra-sys-color-focus-ring);
691
706
  --skra-comp-tooltip-background: var(--skra-sys-color-inverse-surface);
@@ -714,6 +729,7 @@
714
729
  /* O-24 — build-baked form-control glyphs (token-resolved colour per scheme) — form-glyph-synth.mjs */
715
730
  [data-skra-color-scheme="dark"] {
716
731
  --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");
732
+ --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%2896.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");
717
733
  --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");
718
734
  --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");
719
735
  --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/skra/_theme.scss CHANGED
@@ -3,8 +3,8 @@
3
3
  */
4
4
 
5
5
  :root {
6
- --skra-sys-color-neutral-base-hover: oklch(57.0% 0 0);
7
- --skra-sys-color-neutral-base-active: oklch(60.5% 0 0);
6
+ --skra-sys-color-neutral-base-hover: oklch(43.0% 0 0);
7
+ --skra-sys-color-neutral-base-active: oklch(39.5% 0 0);
8
8
  --skra-sys-color-neutral-contrast-hover: oklch(91.0% 0 0);
9
9
  --skra-sys-color-neutral-contrast-active: oklch(87.5% 0 0);
10
10
  --skra-sys-color-neutral-border-hover: oklch(47.0% 0 0);
@@ -39,8 +39,8 @@
39
39
  --skra-sys-color-secondary-strong-active: oklch(40.5% 0.04 250);
40
40
  --skra-sys-color-secondary-ink-hover: oklch(46.0% 0.04 250);
41
41
  --skra-sys-color-secondary-ink-active: oklch(42.5% 0.04 250);
42
- --skra-sys-color-info-base-hover: oklch(57.0% 0.12 220);
43
- --skra-sys-color-info-base-active: oklch(60.5% 0.12 220);
42
+ --skra-sys-color-info-base-hover: oklch(43.0% 0.12 220);
43
+ --skra-sys-color-info-base-active: oklch(39.5% 0.12 220);
44
44
  --skra-sys-color-info-contrast-hover: oklch(93.0% 0 0);
45
45
  --skra-sys-color-info-contrast-active: oklch(89.5% 0 0);
46
46
  --skra-sys-color-info-border-hover: oklch(57.0% 0.12 220);
@@ -152,6 +152,7 @@
152
152
  --skra-ref-color-neutral-800: oklch(25% 0 0);
153
153
  --skra-ref-color-neutral-1000: oklch(0% 0 0);
154
154
  --skra-ref-color-primary-50: oklch(95% 0.04 250);
155
+ --skra-ref-color-primary-300: oklch(74% 0.13 250);
155
156
  --skra-ref-color-primary-400: oklch(65% 0.15 250);
156
157
  --skra-ref-color-primary-500: oklch(60% 0.15 250);
157
158
  --skra-ref-color-primary-600: oklch(52% 0.15 250);
@@ -182,6 +183,7 @@
182
183
  --skra-ref-color-danger-500: oklch(55% 0.2 25);
183
184
  --skra-ref-color-danger-600: oklch(48% 0.2 25);
184
185
  --skra-ref-color-danger-700: oklch(32% 0.16 25);
186
+ --skra-ref-color-violet-300: oklch(72% 0.16 295);
185
187
  --skra-ref-color-violet-500: oklch(45% 0.18 295);
186
188
  --skra-ref-color-cobalt-50: oklch(95% 0.03 262);
187
189
  --skra-ref-color-cobalt-500: oklch(56% 0.19 262);
@@ -242,6 +244,7 @@
242
244
  --skra-ref-color-sky-50: oklch(96% 0.025 235);
243
245
  --skra-ref-color-sky-300: oklch(84% 0.075 235);
244
246
  --skra-ref-color-sky-500: oklch(70% 0.1 235);
247
+ --skra-ref-color-sky-600: oklch(63% 0.1 235);
245
248
  --skra-ref-color-sky-700: oklch(45% 0.11 235);
246
249
  --skra-ref-color-sky-900: oklch(30% 0.08 235);
247
250
  --skra-ref-color-lilac-50: oklch(96% 0.022 300);