@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/_comp.scss CHANGED
@@ -33,8 +33,8 @@
33
33
  --skra-comp-accordion-item-background-expanded: transparent;
34
34
  --skra-comp-alert-background-hover: oklch(83.0% 0 0);
35
35
  --skra-comp-alert-background-active: oklch(77.0% 0 0);
36
- --skra-comp-alert-foreground-hover: oklch(37.0% 0 0);
37
- --skra-comp-alert-foreground-active: oklch(43.0% 0 0);
36
+ --skra-comp-alert-foreground-hover: oklch(12.0% 0 0);
37
+ --skra-comp-alert-foreground-active: oklch(18.0% 0 0);
38
38
  --skra-comp-alert-border-color-hover: oklch(12.0% 0 0);
39
39
  --skra-comp-alert-border-color-active: oklch(18.0% 0 0);
40
40
  --skra-comp-alert-focus-ring-color-hover: oklch(57.0% 0.18 295);
@@ -66,8 +66,8 @@
66
66
  --skra-comp-avatar-icon-size: 1em;
67
67
  --skra-comp-badge-background-hover: oklch(83.0% 0 0);
68
68
  --skra-comp-badge-background-active: oklch(77.0% 0 0);
69
- --skra-comp-badge-foreground-hover: oklch(37.0% 0 0);
70
- --skra-comp-badge-foreground-active: oklch(43.0% 0 0);
69
+ --skra-comp-badge-foreground-hover: oklch(12.0% 0 0);
70
+ --skra-comp-badge-foreground-active: oklch(18.0% 0 0);
71
71
  --skra-comp-badge-border-color-hover: oklch(12.0% 0 0);
72
72
  --skra-comp-badge-border-color-active: oklch(18.0% 0 0);
73
73
  --skra-comp-badge-focus-ring-color-hover: oklch(57.0% 0.18 295);
@@ -96,8 +96,8 @@
96
96
  --skra-comp-button-icon-size: 1em;
97
97
  --skra-comp-chip-background-hover: oklch(83.0% 0 0);
98
98
  --skra-comp-chip-background-active: oklch(77.0% 0 0);
99
- --skra-comp-chip-foreground-hover: oklch(37.0% 0 0);
100
- --skra-comp-chip-foreground-active: oklch(43.0% 0 0);
99
+ --skra-comp-chip-foreground-hover: oklch(12.0% 0 0);
100
+ --skra-comp-chip-foreground-active: oklch(18.0% 0 0);
101
101
  --skra-comp-chip-border-color-hover: oklch(12.0% 0 0);
102
102
  --skra-comp-chip-border-color-active: oklch(18.0% 0 0);
103
103
  --skra-comp-chip-focus-ring-color-hover: oklch(57.0% 0.18 295);
@@ -161,13 +161,13 @@
161
161
  --skra-comp-datepicker-panel-border-color-active: oklch(43.0% 0 0);
162
162
  --skra-comp-datepicker-header-foreground-hover: oklch(12.0% 0 0);
163
163
  --skra-comp-datepicker-header-foreground-active: oklch(18.0% 0 0);
164
- --skra-comp-datepicker-nav-color-active: oklch(53.0% 0 0);
164
+ --skra-comp-datepicker-nav-color-active: oklch(17.0% 0 0);
165
165
  --skra-comp-datepicker-weekday-foreground-hover: oklch(47.0% 0 0);
166
166
  --skra-comp-datepicker-weekday-foreground-active: oklch(53.0% 0 0);
167
- --skra-comp-datepicker-day-foreground-hover: oklch(12.0% 0 0);
168
- --skra-comp-datepicker-day-foreground-active: oklch(18.0% 0 0);
169
- --skra-comp-datepicker-day-today-indicator-color-hover: oklch(62.0% 0.11 98);
170
- --skra-comp-datepicker-day-today-indicator-color-active: oklch(68.0% 0.11 98);
167
+ --skra-comp-datepicker-cell-foreground-hover: oklch(12.0% 0 0);
168
+ --skra-comp-datepicker-cell-foreground-active: oklch(18.0% 0 0);
169
+ --skra-comp-datepicker-cell-today-indicator-color-hover: oklch(62.0% 0.11 98);
170
+ --skra-comp-datepicker-cell-today-indicator-color-active: oklch(68.0% 0.11 98);
171
171
  --skra-comp-datepicker-border-width: 0.125rem;
172
172
  --skra-comp-datepicker-border-style: solid;
173
173
  --skra-comp-datepicker-shadow: none;
@@ -177,7 +177,8 @@
177
177
  --skra-comp-datepicker-header-typography-role: body-medium;
178
178
  --skra-comp-datepicker-nav-icon-size: 1.25em;
179
179
  --skra-comp-datepicker-weekday-typography-role: body-small;
180
- --skra-comp-datepicker-day-typography-role: body-medium;
180
+ --skra-comp-datepicker-cell-typography-role: body-medium;
181
+ --skra-comp-datepicker-month-cell-min-inline-size: 5.5rem;
181
182
  --skra-comp-dialog-background-hover: oklch(85.0% 0.015 95);
182
183
  --skra-comp-dialog-background-active: oklch(79.0% 0.015 95);
183
184
  --skra-comp-dialog-foreground-hover: oklch(12.0% 0 0);
@@ -222,6 +223,8 @@
222
223
  --skra-comp-field-checkbox-checked-background-readonly-active: oklch(43.0% 0 0);
223
224
  --skra-comp-field-checkbox-check-color-hover: oklch(12.0% 0 0);
224
225
  --skra-comp-field-checkbox-check-color-active: oklch(18.0% 0 0);
226
+ --skra-comp-field-checkbox-check-color-readonly-hover: oklch(88.0% 0 0);
227
+ --skra-comp-field-checkbox-check-color-readonly-active: oklch(82.0% 0 0);
225
228
  --skra-comp-field-checkbox-border-width: 0.125rem;
226
229
  --skra-comp-field-radio-border-color-hover: oklch(12.0% 0 0);
227
230
  --skra-comp-field-radio-border-color-active: oklch(18.0% 0 0);
@@ -233,17 +236,25 @@
233
236
  --skra-comp-field-radio-checked-background-readonly-active: oklch(43.0% 0 0);
234
237
  --skra-comp-field-radio-dot-color-hover: oklch(12.0% 0 0);
235
238
  --skra-comp-field-radio-dot-color-active: oklch(18.0% 0 0);
239
+ --skra-comp-field-radio-dot-color-readonly-hover: oklch(88.0% 0 0);
240
+ --skra-comp-field-radio-dot-color-readonly-active: oklch(82.0% 0 0);
236
241
  --skra-comp-field-radio-border-width: 0.125rem;
237
242
  --skra-comp-field-switch-border-color-hover: oklch(12.0% 0 0);
238
243
  --skra-comp-field-switch-border-color-active: oklch(18.0% 0 0);
239
244
  --skra-comp-field-switch-background-hover: oklch(37.0% 0 0);
240
245
  --skra-comp-field-switch-background-active: oklch(43.0% 0 0);
246
+ --skra-comp-field-switch-background-readonly-hover: oklch(37.0% 0 0);
247
+ --skra-comp-field-switch-background-readonly-active: oklch(43.0% 0 0);
241
248
  --skra-comp-field-switch-checked-background-hover: oklch(73.0% 0.17 98);
242
249
  --skra-comp-field-switch-checked-background-active: oklch(67.0% 0.17 98);
243
250
  --skra-comp-field-switch-checked-background-readonly-hover: oklch(37.0% 0 0);
244
251
  --skra-comp-field-switch-checked-background-readonly-active: oklch(43.0% 0 0);
245
252
  --skra-comp-field-switch-thumb-color-hover: oklch(85.0% 0.015 95);
246
253
  --skra-comp-field-switch-thumb-color-active: oklch(79.0% 0.015 95);
254
+ --skra-comp-field-switch-thumb-color-readonly-hover: oklch(88.0% 0 0);
255
+ --skra-comp-field-switch-thumb-color-readonly-active: oklch(82.0% 0 0);
256
+ --skra-comp-field-switch-thumb-color-checked-readonly-hover: oklch(88.0% 0 0);
257
+ --skra-comp-field-switch-thumb-color-checked-readonly-active: oklch(82.0% 0 0);
247
258
  --skra-comp-field-switch-track-inline-size: 2.25rem;
248
259
  --skra-comp-field-switch-track-block-size: 1.25rem;
249
260
  --skra-comp-field-switch-border-width: 0.125rem;
@@ -258,6 +269,8 @@
258
269
  --skra-comp-field-select-optgroup-foreground-hover: oklch(12.0% 0 0);
259
270
  --skra-comp-field-select-optgroup-foreground-active: oklch(18.0% 0 0);
260
271
  --skra-comp-field-select-arrow-icon-size: 1em;
272
+ --skra-comp-field-temporal-indicator-color-hover: oklch(12.0% 0 0);
273
+ --skra-comp-field-temporal-indicator-color-active: oklch(18.0% 0 0);
261
274
  --skra-comp-field-border-width: 0.125rem;
262
275
  --skra-comp-field-border-style: solid;
263
276
  --skra-comp-field-shadow: none;
@@ -373,10 +386,10 @@
373
386
  --skra-comp-skeleton-padding-block: 0rem;
374
387
  --skra-comp-skeleton-padding-inline: 0rem;
375
388
  --skra-comp-skeleton-focus-ring-width: 0.1875rem;
376
- --skra-comp-star-rating-star-color-empty-hover: oklch(12.0% 0 0);
377
- --skra-comp-star-rating-star-color-empty-active: oklch(18.0% 0 0);
378
- --skra-comp-star-rating-star-color-filled-hover: oklch(73.0% 0.17 98);
379
- --skra-comp-star-rating-star-color-filled-active: oklch(67.0% 0.17 98);
389
+ --skra-comp-star-rating-star-color-empty-hover: oklch(37.0% 0 0);
390
+ --skra-comp-star-rating-star-color-empty-active: oklch(43.0% 0 0);
391
+ --skra-comp-star-rating-star-color-filled-hover: oklch(62.0% 0.11 98);
392
+ --skra-comp-star-rating-star-color-filled-active: oklch(68.0% 0.11 98);
380
393
  --skra-comp-star-rating-focus-ring-color-hover: oklch(57.0% 0.18 295);
381
394
  --skra-comp-star-rating-focus-ring-color-active: oklch(63.0% 0.18 295);
382
395
  --skra-comp-star-rating-gap: 0.25rem;
@@ -429,8 +442,8 @@
429
442
  --skra-comp-tabs-tablist-border-width: 0.1875rem;
430
443
  --skra-comp-toast-background-hover: oklch(83.0% 0 0);
431
444
  --skra-comp-toast-background-active: oklch(77.0% 0 0);
432
- --skra-comp-toast-foreground-hover: oklch(37.0% 0 0);
433
- --skra-comp-toast-foreground-active: oklch(43.0% 0 0);
445
+ --skra-comp-toast-foreground-hover: oklch(12.0% 0 0);
446
+ --skra-comp-toast-foreground-active: oklch(18.0% 0 0);
434
447
  --skra-comp-toast-border-color-hover: oklch(12.0% 0 0);
435
448
  --skra-comp-toast-border-color-active: oklch(18.0% 0 0);
436
449
  --skra-comp-toast-focus-ring-color-hover: oklch(57.0% 0.18 295);
@@ -514,12 +527,14 @@
514
527
  --skra-comp-datepicker-min-block-size: var(--skra-sys-size-interactive-md);
515
528
  --skra-comp-datepicker-panel-radius: var(--skra-sys-radius-md);
516
529
  --skra-comp-datepicker-panel-shadow: var(--skra-sys-shadow-lg);
517
- --skra-comp-datepicker-day-size: var(--skra-sys-size-interactive-md);
518
- --skra-comp-datepicker-day-radius: var(--skra-sys-radius-sm);
530
+ --skra-comp-datepicker-cell-block-size: var(--skra-sys-size-interactive-md);
531
+ --skra-comp-datepicker-cell-radius: var(--skra-sys-radius-sm);
519
532
  --skra-comp-dialog-radius: var(--skra-sys-radius-lg);
520
533
  --skra-comp-dialog-shadow: var(--skra-sys-shadow-xl);
521
534
  --skra-comp-field-checkbox-border-radius: var(--skra-sys-radius-sm);
522
535
  --skra-comp-field-switch-track-radius: var(--skra-sys-radius-sm);
536
+ --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
537
+ --skra-comp-field-temporal-indicator-icon-size: var(--skra-sys-icon-size-sm);
523
538
  --skra-comp-field-radius: var(--skra-sys-radius-sm);
524
539
  --skra-comp-kbd-radius: var(--skra-sys-radius-none);
525
540
  --skra-comp-kbd-shadow: var(--skra-sys-shadow-sm);
@@ -579,7 +594,7 @@
579
594
  --skra-comp-accordion-panel-padding-block: var(--skra-sys-spacing-3);
580
595
  --skra-comp-accordion-panel-padding-inline: var(--skra-sys-spacing-4);
581
596
  --skra-comp-alert-background: var(--skra-sys-color-neutral-soft);
582
- --skra-comp-alert-foreground: var(--skra-sys-color-neutral-ink);
597
+ --skra-comp-alert-foreground: var(--skra-sys-color-neutral-strong);
583
598
  --skra-comp-alert-border-color: var(--skra-sys-color-neutral-border);
584
599
  --skra-comp-alert-padding-block: var(--skra-sys-spacing-3);
585
600
  --skra-comp-alert-padding-inline: var(--skra-sys-spacing-4);
@@ -598,7 +613,7 @@
598
613
  --skra-comp-avatar-size-md: var(--skra-sys-size-avatar-md);
599
614
  --skra-comp-avatar-size-lg: var(--skra-sys-size-avatar-lg);
600
615
  --skra-comp-badge-background: var(--skra-sys-color-neutral-soft);
601
- --skra-comp-badge-foreground: var(--skra-sys-color-neutral-ink);
616
+ --skra-comp-badge-foreground: var(--skra-sys-color-neutral-strong);
602
617
  --skra-comp-badge-border-color: var(--skra-sys-color-neutral-border);
603
618
  --skra-comp-badge-padding-block: var(--skra-sys-spacing-1);
604
619
  --skra-comp-badge-padding-inline: var(--skra-sys-spacing-2);
@@ -626,7 +641,7 @@
626
641
  --skra-comp-button-icon-gap: var(--skra-sys-spacing-2);
627
642
  --skra-comp-button-loading-indicator-color: var(--skra-sys-color-on-surface);
628
643
  --skra-comp-chip-background: var(--skra-sys-color-neutral-soft);
629
- --skra-comp-chip-foreground: var(--skra-sys-color-neutral-ink);
644
+ --skra-comp-chip-foreground: var(--skra-sys-color-neutral-strong);
630
645
  --skra-comp-chip-border-color: var(--skra-sys-color-neutral-border);
631
646
  --skra-comp-chip-padding-block: var(--skra-sys-spacing-1);
632
647
  --skra-comp-chip-padding-inline: var(--skra-sys-spacing-2);
@@ -685,12 +700,12 @@
685
700
  --skra-comp-datepicker-nav-color: var(--skra-sys-color-on-surface-subtle);
686
701
  --skra-comp-datepicker-nav-color-hover: var(--skra-sys-color-on-surface);
687
702
  --skra-comp-datepicker-weekday-foreground: var(--skra-sys-color-on-surface-subtle);
688
- --skra-comp-datepicker-day-foreground: var(--skra-sys-color-on-surface);
689
- --skra-comp-datepicker-day-background-hover: var(--skra-sys-color-surface-hover);
690
- --skra-comp-datepicker-day-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
691
- --skra-comp-datepicker-day-background-selected: var(--skra-sys-color-primary-base);
692
- --skra-comp-datepicker-day-foreground-selected: var(--skra-sys-color-primary-contrast);
693
- --skra-comp-datepicker-day-today-indicator-color: var(--skra-sys-color-primary-ink);
703
+ --skra-comp-datepicker-cell-foreground: var(--skra-sys-color-on-surface);
704
+ --skra-comp-datepicker-cell-background-hover: var(--skra-sys-color-surface-hover);
705
+ --skra-comp-datepicker-cell-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
706
+ --skra-comp-datepicker-cell-background-selected: var(--skra-sys-color-primary-base);
707
+ --skra-comp-datepicker-cell-foreground-selected: var(--skra-sys-color-primary-contrast);
708
+ --skra-comp-datepicker-cell-today-indicator-color: var(--skra-sys-color-primary-ink);
694
709
  --skra-comp-dialog-background: var(--skra-sys-color-surface);
695
710
  --skra-comp-dialog-foreground: var(--skra-sys-color-on-surface);
696
711
  --skra-comp-dialog-border-color: var(--skra-sys-color-border);
@@ -709,6 +724,7 @@
709
724
  --skra-comp-field-checkbox-checked-background: var(--skra-sys-color-primary-base);
710
725
  --skra-comp-field-checkbox-checked-background-readonly: var(--skra-sys-color-neutral-base);
711
726
  --skra-comp-field-checkbox-check-color: var(--skra-sys-color-primary-contrast);
727
+ --skra-comp-field-checkbox-check-color-readonly: var(--skra-sys-color-neutral-contrast);
712
728
  --skra-comp-field-checkbox-gap: var(--skra-sys-spacing-2);
713
729
  --skra-comp-field-checkbox-touch-target: var(--skra-sys-spacing-6);
714
730
  --skra-comp-field-radio-size: var(--skra-sys-spacing-4);
@@ -717,15 +733,19 @@
717
733
  --skra-comp-field-radio-checked-background: var(--skra-sys-color-primary-base);
718
734
  --skra-comp-field-radio-checked-background-readonly: var(--skra-sys-color-neutral-base);
719
735
  --skra-comp-field-radio-dot-color: var(--skra-sys-color-primary-contrast);
736
+ --skra-comp-field-radio-dot-color-readonly: var(--skra-sys-color-neutral-contrast);
720
737
  --skra-comp-field-radio-dot-size: var(--skra-sys-spacing-2);
721
738
  --skra-comp-field-radio-gap: var(--skra-sys-spacing-2);
722
739
  --skra-comp-field-radio-touch-target: var(--skra-sys-spacing-6);
723
740
  --skra-comp-field-switch-border-color: var(--skra-sys-color-border);
724
741
  --skra-comp-field-switch-background: var(--skra-sys-color-border-subtle);
742
+ --skra-comp-field-switch-background-readonly: var(--skra-sys-color-neutral-base);
725
743
  --skra-comp-field-switch-checked-background: var(--skra-sys-color-primary-base);
726
744
  --skra-comp-field-switch-checked-background-readonly: var(--skra-sys-color-neutral-base);
727
745
  --skra-comp-field-switch-thumb-color: var(--skra-sys-color-surface);
746
+ --skra-comp-field-switch-thumb-color-readonly: var(--skra-sys-color-neutral-contrast);
728
747
  --skra-comp-field-switch-thumb-color-checked: var(--skra-sys-color-primary-contrast);
748
+ --skra-comp-field-switch-thumb-color-checked-readonly: var(--skra-sys-color-neutral-contrast);
729
749
  --skra-comp-field-switch-gap: var(--skra-sys-spacing-2);
730
750
  --skra-comp-field-switch-touch-target: var(--skra-sys-spacing-6);
731
751
  --skra-comp-field-group-gap: var(--skra-sys-spacing-3);
@@ -735,6 +755,8 @@
735
755
  --skra-comp-field-select-option-foreground: var(--skra-sys-color-on-surface);
736
756
  --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
737
757
  --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
758
+ --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
759
+ --skra-comp-field-temporal-indicator-color: var(--skra-sys-color-on-surface);
738
760
  --skra-comp-field-background: var(--skra-sys-color-surface);
739
761
  --skra-comp-field-foreground: var(--skra-sys-color-on-surface);
740
762
  --skra-comp-field-border-color: var(--skra-sys-color-border);
@@ -843,8 +865,8 @@
843
865
  --skra-comp-skeleton-motion-duration: var(--skra-sys-motion-duration-fast);
844
866
  --skra-comp-skeleton-motion-easing: var(--skra-sys-motion-easing-standard);
845
867
  --skra-comp-skeleton-focus-ring-color: var(--skra-sys-color-focus-ring);
846
- --skra-comp-star-rating-star-color-empty: var(--skra-sys-color-border);
847
- --skra-comp-star-rating-star-color-filled: var(--skra-sys-color-primary-base);
868
+ --skra-comp-star-rating-star-color-empty: var(--skra-sys-color-border-subtle);
869
+ --skra-comp-star-rating-star-color-filled: var(--skra-sys-color-primary-ink);
848
870
  --skra-comp-star-rating-focus-ring-color: var(--skra-sys-color-focus-ring);
849
871
  --skra-comp-star-rating-motion-duration: var(--skra-sys-motion-duration-fast);
850
872
  --skra-comp-star-rating-motion-easing: var(--skra-sys-motion-easing-standard);
@@ -886,7 +908,7 @@
886
908
  --skra-comp-tabs-panel-padding-block: var(--skra-sys-spacing-4);
887
909
  --skra-comp-tabs-panel-padding-inline: var(--skra-sys-spacing-1);
888
910
  --skra-comp-toast-background: var(--skra-sys-color-neutral-soft);
889
- --skra-comp-toast-foreground: var(--skra-sys-color-neutral-ink);
911
+ --skra-comp-toast-foreground: var(--skra-sys-color-neutral-strong);
890
912
  --skra-comp-toast-border-color: var(--skra-sys-color-neutral-border);
891
913
  --skra-comp-toast-padding-block: var(--skra-sys-spacing-3);
892
914
  --skra-comp-toast-padding-inline: var(--skra-sys-spacing-4);
@@ -1009,5 +1031,8 @@
1009
1031
  /* O-24 — build-baked form-control glyphs (token-resolved colour per scheme) — form-glyph-synth.mjs */
1010
1032
  :where(:root, :host) {
1011
1033
  --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");
1034
+ --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");
1012
1035
  --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");
1036
+ --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");
1037
+ --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");
1013
1038
  }
package/brutal/_density.comfortable.scoped.scss CHANGED
@@ -79,7 +79,7 @@
79
79
  --skra-comp-datepicker-panel-padding: var(--skra-sys-spacing-3);
80
80
  --skra-comp-datepicker-panel-offset: var(--skra-sys-spacing-1);
81
81
  --skra-comp-datepicker-panel-viewport-padding: var(--skra-sys-spacing-2);
82
- --skra-comp-datepicker-day-size: var(--skra-sys-size-interactive-md);
82
+ --skra-comp-datepicker-cell-block-size: var(--skra-sys-size-interactive-md);
83
83
  --skra-comp-dialog-padding-block: var(--skra-sys-spacing-5);
84
84
  --skra-comp-dialog-padding-inline: var(--skra-sys-spacing-5);
85
85
  --skra-comp-dialog-size-sm-max-inline-size: var(--skra-sys-size-container-sm);
@@ -100,6 +100,8 @@
100
100
  --skra-comp-field-group-gap: var(--skra-sys-spacing-3);
101
101
  --skra-comp-field-group-legend-spacing-block-end: var(--skra-sys-spacing-2);
102
102
  --skra-comp-field-select-arrow-padding-inline-end: var(--skra-sys-spacing-6);
103
+ --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
104
+ --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
103
105
  --skra-comp-grid-gap-sm: var(--skra-sys-spacing-1);
104
106
  --skra-comp-grid-gap-md: var(--skra-sys-spacing-2);
105
107
  --skra-comp-grid-gap-lg: var(--skra-sys-spacing-4);
package/brutal/_density.comfortable.scss CHANGED
@@ -79,7 +79,7 @@
79
79
  --skra-comp-datepicker-panel-padding: var(--skra-sys-spacing-3);
80
80
  --skra-comp-datepicker-panel-offset: var(--skra-sys-spacing-1);
81
81
  --skra-comp-datepicker-panel-viewport-padding: var(--skra-sys-spacing-2);
82
- --skra-comp-datepicker-day-size: var(--skra-sys-size-interactive-md);
82
+ --skra-comp-datepicker-cell-block-size: var(--skra-sys-size-interactive-md);
83
83
  --skra-comp-dialog-padding-block: var(--skra-sys-spacing-5);
84
84
  --skra-comp-dialog-padding-inline: var(--skra-sys-spacing-5);
85
85
  --skra-comp-dialog-size-sm-max-inline-size: var(--skra-sys-size-container-sm);
@@ -100,6 +100,8 @@
100
100
  --skra-comp-field-group-gap: var(--skra-sys-spacing-3);
101
101
  --skra-comp-field-group-legend-spacing-block-end: var(--skra-sys-spacing-2);
102
102
  --skra-comp-field-select-arrow-padding-inline-end: var(--skra-sys-spacing-6);
103
+ --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
104
+ --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
103
105
  --skra-comp-grid-gap-sm: var(--skra-sys-spacing-1);
104
106
  --skra-comp-grid-gap-md: var(--skra-sys-spacing-2);
105
107
  --skra-comp-grid-gap-lg: var(--skra-sys-spacing-4);
package/brutal/_density.compact.scoped.scss CHANGED
@@ -79,7 +79,7 @@
79
79
  --skra-comp-datepicker-panel-padding: var(--skra-sys-spacing-3);
80
80
  --skra-comp-datepicker-panel-offset: var(--skra-sys-spacing-1);
81
81
  --skra-comp-datepicker-panel-viewport-padding: var(--skra-sys-spacing-2);
82
- --skra-comp-datepicker-day-size: var(--skra-sys-size-interactive-md);
82
+ --skra-comp-datepicker-cell-block-size: var(--skra-sys-size-interactive-md);
83
83
  --skra-comp-dialog-padding-block: var(--skra-sys-spacing-5);
84
84
  --skra-comp-dialog-padding-inline: var(--skra-sys-spacing-5);
85
85
  --skra-comp-dialog-size-sm-max-inline-size: var(--skra-sys-size-container-sm);
@@ -100,6 +100,8 @@
100
100
  --skra-comp-field-group-gap: var(--skra-sys-spacing-3);
101
101
  --skra-comp-field-group-legend-spacing-block-end: var(--skra-sys-spacing-2);
102
102
  --skra-comp-field-select-arrow-padding-inline-end: var(--skra-sys-spacing-6);
103
+ --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
104
+ --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
103
105
  --skra-comp-grid-gap-sm: var(--skra-sys-spacing-1);
104
106
  --skra-comp-grid-gap-md: var(--skra-sys-spacing-2);
105
107
  --skra-comp-grid-gap-lg: var(--skra-sys-spacing-4);
package/brutal/_density.compact.scss CHANGED
@@ -79,7 +79,7 @@
79
79
  --skra-comp-datepicker-panel-padding: var(--skra-sys-spacing-3);
80
80
  --skra-comp-datepicker-panel-offset: var(--skra-sys-spacing-1);
81
81
  --skra-comp-datepicker-panel-viewport-padding: var(--skra-sys-spacing-2);
82
- --skra-comp-datepicker-day-size: var(--skra-sys-size-interactive-md);
82
+ --skra-comp-datepicker-cell-block-size: var(--skra-sys-size-interactive-md);
83
83
  --skra-comp-dialog-padding-block: var(--skra-sys-spacing-5);
84
84
  --skra-comp-dialog-padding-inline: var(--skra-sys-spacing-5);
85
85
  --skra-comp-dialog-size-sm-max-inline-size: var(--skra-sys-size-container-sm);
@@ -100,6 +100,8 @@
100
100
  --skra-comp-field-group-gap: var(--skra-sys-spacing-3);
101
101
  --skra-comp-field-group-legend-spacing-block-end: var(--skra-sys-spacing-2);
102
102
  --skra-comp-field-select-arrow-padding-inline-end: var(--skra-sys-spacing-6);
103
+ --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
104
+ --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
103
105
  --skra-comp-grid-gap-sm: var(--skra-sys-spacing-1);
104
106
  --skra-comp-grid-gap-md: var(--skra-sys-spacing-2);
105
107
  --skra-comp-grid-gap-lg: var(--skra-sys-spacing-4);