@skra/tokens 0.4.0 → 0.5.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 (16) hide show
  1. package/brutal/_comp.scss +22 -13
  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 +15 -10
  7. package/brutal/_theme.dark.scss +15 -10
  8. package/brutal/_theme.scoped.scss +22 -13
  9. package/brutal/skin.config.json +40 -40
  10. package/manifests/datepicker.json +19 -10
  11. package/package.json +1 -1
  12. package/skra/_comp.scss +22 -13
  13. package/skra/_density.comfortable.scss +3 -1
  14. package/skra/_density.compact.scss +3 -1
  15. package/skra/_theme.dark.scss +15 -10
  16. package/skra/skin.config.json +37 -37
package/brutal/_comp.scss CHANGED
@@ -164,10 +164,10 @@
164
164
  --skra-comp-datepicker-nav-color-active: oklch(53.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);
@@ -258,6 +259,8 @@
258
259
  --skra-comp-field-select-optgroup-foreground-hover: oklch(12.0% 0 0);
259
260
  --skra-comp-field-select-optgroup-foreground-active: oklch(18.0% 0 0);
260
261
  --skra-comp-field-select-arrow-icon-size: 1em;
262
+ --skra-comp-field-temporal-indicator-color-hover: oklch(12.0% 0 0);
263
+ --skra-comp-field-temporal-indicator-color-active: oklch(18.0% 0 0);
261
264
  --skra-comp-field-border-width: 0.125rem;
262
265
  --skra-comp-field-border-style: solid;
263
266
  --skra-comp-field-shadow: none;
@@ -514,12 +517,14 @@
514
517
  --skra-comp-datepicker-min-block-size: var(--skra-sys-size-interactive-md);
515
518
  --skra-comp-datepicker-panel-radius: var(--skra-sys-radius-md);
516
519
  --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);
520
+ --skra-comp-datepicker-cell-block-size: var(--skra-sys-size-interactive-md);
521
+ --skra-comp-datepicker-cell-radius: var(--skra-sys-radius-sm);
519
522
  --skra-comp-dialog-radius: var(--skra-sys-radius-lg);
520
523
  --skra-comp-dialog-shadow: var(--skra-sys-shadow-xl);
521
524
  --skra-comp-field-checkbox-border-radius: var(--skra-sys-radius-sm);
522
525
  --skra-comp-field-switch-track-radius: var(--skra-sys-radius-sm);
526
+ --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
527
+ --skra-comp-field-temporal-indicator-icon-size: var(--skra-sys-icon-size-sm);
523
528
  --skra-comp-field-radius: var(--skra-sys-radius-sm);
524
529
  --skra-comp-kbd-radius: var(--skra-sys-radius-none);
525
530
  --skra-comp-kbd-shadow: var(--skra-sys-shadow-sm);
@@ -685,12 +690,12 @@
685
690
  --skra-comp-datepicker-nav-color: var(--skra-sys-color-on-surface-subtle);
686
691
  --skra-comp-datepicker-nav-color-hover: var(--skra-sys-color-on-surface);
687
692
  --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);
693
+ --skra-comp-datepicker-cell-foreground: var(--skra-sys-color-on-surface);
694
+ --skra-comp-datepicker-cell-background-hover: var(--skra-sys-color-surface-hover);
695
+ --skra-comp-datepicker-cell-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
696
+ --skra-comp-datepicker-cell-background-selected: var(--skra-sys-color-primary-base);
697
+ --skra-comp-datepicker-cell-foreground-selected: var(--skra-sys-color-primary-contrast);
698
+ --skra-comp-datepicker-cell-today-indicator-color: var(--skra-sys-color-primary-ink);
694
699
  --skra-comp-dialog-background: var(--skra-sys-color-surface);
695
700
  --skra-comp-dialog-foreground: var(--skra-sys-color-on-surface);
696
701
  --skra-comp-dialog-border-color: var(--skra-sys-color-border);
@@ -735,6 +740,8 @@
735
740
  --skra-comp-field-select-option-foreground: var(--skra-sys-color-on-surface);
736
741
  --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
737
742
  --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
743
+ --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
744
+ --skra-comp-field-temporal-indicator-color: var(--skra-sys-color-on-surface);
738
745
  --skra-comp-field-background: var(--skra-sys-color-surface);
739
746
  --skra-comp-field-foreground: var(--skra-sys-color-on-surface);
740
747
  --skra-comp-field-border-color: var(--skra-sys-color-border);
@@ -1010,4 +1017,6 @@
1010
1017
  :where(:root, :host) {
1011
1018
  --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");
1012
1019
  --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");
1020
+ --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");
1021
+ --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
1022
  }
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);
package/brutal/_theme.dark.scoped.scss CHANGED
@@ -282,10 +282,10 @@
282
282
  --skra-comp-datepicker-nav-color-active: oklch(47.0% 0 0);
283
283
  --skra-comp-datepicker-weekday-foreground-hover: oklch(53.0% 0 0);
284
284
  --skra-comp-datepicker-weekday-foreground-active: oklch(47.0% 0 0);
285
- --skra-comp-datepicker-day-foreground-hover: oklch(80.0% 0 0);
286
- --skra-comp-datepicker-day-foreground-active: oklch(74.0% 0 0);
287
- --skra-comp-datepicker-day-today-indicator-color-hover: oklch(53.0% 0.099 98);
288
- --skra-comp-datepicker-day-today-indicator-color-active: oklch(47.0% 0.099 98);
285
+ --skra-comp-datepicker-cell-foreground-hover: oklch(80.0% 0 0);
286
+ --skra-comp-datepicker-cell-foreground-active: oklch(74.0% 0 0);
287
+ --skra-comp-datepicker-cell-today-indicator-color-hover: oklch(53.0% 0.099 98);
288
+ --skra-comp-datepicker-cell-today-indicator-color-active: oklch(47.0% 0.099 98);
289
289
  --skra-comp-dialog-background-hover: oklch(27.0% 0 0);
290
290
  --skra-comp-dialog-background-active: oklch(33.0% 0 0);
291
291
  --skra-comp-dialog-foreground-hover: oklch(80.0% 0 0);
@@ -354,6 +354,8 @@
354
354
  --skra-comp-field-select-option-background-active: oklch(33.0% 0 0);
355
355
  --skra-comp-field-select-optgroup-foreground-hover: oklch(80.0% 0 0);
356
356
  --skra-comp-field-select-optgroup-foreground-active: oklch(74.0% 0 0);
357
+ --skra-comp-field-temporal-indicator-color-hover: oklch(80.0% 0 0);
358
+ --skra-comp-field-temporal-indicator-color-active: oklch(74.0% 0 0);
357
359
  --skra-comp-kbd-background-hover: oklch(31.0% 0 0);
358
360
  --skra-comp-kbd-background-active: oklch(37.0% 0 0);
359
361
  --skra-comp-kbd-foreground-hover: oklch(80.0% 0 0);
@@ -574,12 +576,12 @@
574
576
  --skra-comp-datepicker-nav-color: var(--skra-sys-color-on-surface-subtle);
575
577
  --skra-comp-datepicker-nav-color-hover: var(--skra-sys-color-on-surface);
576
578
  --skra-comp-datepicker-weekday-foreground: var(--skra-sys-color-on-surface-subtle);
577
- --skra-comp-datepicker-day-foreground: var(--skra-sys-color-on-surface);
578
- --skra-comp-datepicker-day-background-hover: var(--skra-sys-color-surface-hover);
579
- --skra-comp-datepicker-day-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
580
- --skra-comp-datepicker-day-background-selected: var(--skra-sys-color-primary-base);
581
- --skra-comp-datepicker-day-foreground-selected: var(--skra-sys-color-primary-contrast);
582
- --skra-comp-datepicker-day-today-indicator-color: var(--skra-sys-color-primary-ink);
579
+ --skra-comp-datepicker-cell-foreground: var(--skra-sys-color-on-surface);
580
+ --skra-comp-datepicker-cell-background-hover: var(--skra-sys-color-surface-hover);
581
+ --skra-comp-datepicker-cell-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
582
+ --skra-comp-datepicker-cell-background-selected: var(--skra-sys-color-primary-base);
583
+ --skra-comp-datepicker-cell-foreground-selected: var(--skra-sys-color-primary-contrast);
584
+ --skra-comp-datepicker-cell-today-indicator-color: var(--skra-sys-color-primary-ink);
583
585
  --skra-comp-dialog-background: var(--skra-sys-color-surface);
584
586
  --skra-comp-dialog-foreground: var(--skra-sys-color-on-surface);
585
587
  --skra-comp-dialog-border-color: var(--skra-sys-color-border);
@@ -616,6 +618,7 @@
616
618
  --skra-comp-field-select-option-foreground: var(--skra-sys-color-on-surface);
617
619
  --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
618
620
  --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
621
+ --skra-comp-field-temporal-indicator-color: var(--skra-sys-color-on-surface);
619
622
  --skra-comp-kbd-background: var(--skra-sys-color-surface-raised);
620
623
  --skra-comp-kbd-foreground: var(--skra-sys-color-on-surface);
621
624
  --skra-comp-kbd-border-color: var(--skra-sys-color-border);
@@ -718,4 +721,6 @@
718
721
  [data-skra-skin="brutal"][data-skra-color-scheme="dark"] {
719
722
  --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");
720
723
  --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");
724
+ --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");
725
+ --skra-comp-field-clock-indicator-glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='oklch%2892.0%25%200%200%29' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 16 14'/%3E%3C/svg%3E");
721
726
  }
package/brutal/_theme.dark.scss CHANGED
@@ -283,10 +283,10 @@
283
283
  --skra-comp-datepicker-nav-color-active: oklch(47.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
- --skra-comp-datepicker-day-foreground-hover: oklch(80.0% 0 0);
287
- --skra-comp-datepicker-day-foreground-active: oklch(74.0% 0 0);
288
- --skra-comp-datepicker-day-today-indicator-color-hover: oklch(53.0% 0.099 98);
289
- --skra-comp-datepicker-day-today-indicator-color-active: oklch(47.0% 0.099 98);
286
+ --skra-comp-datepicker-cell-foreground-hover: oklch(80.0% 0 0);
287
+ --skra-comp-datepicker-cell-foreground-active: oklch(74.0% 0 0);
288
+ --skra-comp-datepicker-cell-today-indicator-color-hover: oklch(53.0% 0.099 98);
289
+ --skra-comp-datepicker-cell-today-indicator-color-active: oklch(47.0% 0.099 98);
290
290
  --skra-comp-dialog-background-hover: oklch(27.0% 0 0);
291
291
  --skra-comp-dialog-background-active: oklch(33.0% 0 0);
292
292
  --skra-comp-dialog-foreground-hover: oklch(80.0% 0 0);
@@ -355,6 +355,8 @@
355
355
  --skra-comp-field-select-option-background-active: oklch(33.0% 0 0);
356
356
  --skra-comp-field-select-optgroup-foreground-hover: oklch(80.0% 0 0);
357
357
  --skra-comp-field-select-optgroup-foreground-active: oklch(74.0% 0 0);
358
+ --skra-comp-field-temporal-indicator-color-hover: oklch(80.0% 0 0);
359
+ --skra-comp-field-temporal-indicator-color-active: oklch(74.0% 0 0);
358
360
  --skra-comp-kbd-background-hover: oklch(31.0% 0 0);
359
361
  --skra-comp-kbd-background-active: oklch(37.0% 0 0);
360
362
  --skra-comp-kbd-foreground-hover: oklch(80.0% 0 0);
@@ -575,12 +577,12 @@
575
577
  --skra-comp-datepicker-nav-color: var(--skra-sys-color-on-surface-subtle);
576
578
  --skra-comp-datepicker-nav-color-hover: var(--skra-sys-color-on-surface);
577
579
  --skra-comp-datepicker-weekday-foreground: var(--skra-sys-color-on-surface-subtle);
578
- --skra-comp-datepicker-day-foreground: var(--skra-sys-color-on-surface);
579
- --skra-comp-datepicker-day-background-hover: var(--skra-sys-color-surface-hover);
580
- --skra-comp-datepicker-day-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
581
- --skra-comp-datepicker-day-background-selected: var(--skra-sys-color-primary-base);
582
- --skra-comp-datepicker-day-foreground-selected: var(--skra-sys-color-primary-contrast);
583
- --skra-comp-datepicker-day-today-indicator-color: var(--skra-sys-color-primary-ink);
580
+ --skra-comp-datepicker-cell-foreground: var(--skra-sys-color-on-surface);
581
+ --skra-comp-datepicker-cell-background-hover: var(--skra-sys-color-surface-hover);
582
+ --skra-comp-datepicker-cell-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
583
+ --skra-comp-datepicker-cell-background-selected: var(--skra-sys-color-primary-base);
584
+ --skra-comp-datepicker-cell-foreground-selected: var(--skra-sys-color-primary-contrast);
585
+ --skra-comp-datepicker-cell-today-indicator-color: var(--skra-sys-color-primary-ink);
584
586
  --skra-comp-dialog-background: var(--skra-sys-color-surface);
585
587
  --skra-comp-dialog-foreground: var(--skra-sys-color-on-surface);
586
588
  --skra-comp-dialog-border-color: var(--skra-sys-color-border);
@@ -617,6 +619,7 @@
617
619
  --skra-comp-field-select-option-foreground: var(--skra-sys-color-on-surface);
618
620
  --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
619
621
  --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
622
+ --skra-comp-field-temporal-indicator-color: var(--skra-sys-color-on-surface);
620
623
  --skra-comp-kbd-background: var(--skra-sys-color-surface-raised);
621
624
  --skra-comp-kbd-foreground: var(--skra-sys-color-on-surface);
622
625
  --skra-comp-kbd-border-color: var(--skra-sys-color-border);
@@ -719,4 +722,6 @@
719
722
  [data-skra-color-scheme="dark"] {
720
723
  --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");
721
724
  --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
+ --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
+ --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");
722
727
  }
package/brutal/_theme.scoped.scss CHANGED
@@ -305,10 +305,10 @@
305
305
  --skra-comp-datepicker-nav-color-active: oklch(53.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
- --skra-comp-datepicker-day-foreground-hover: oklch(12.0% 0 0);
309
- --skra-comp-datepicker-day-foreground-active: oklch(18.0% 0 0);
310
- --skra-comp-datepicker-day-today-indicator-color-hover: oklch(62.0% 0.11 98);
311
- --skra-comp-datepicker-day-today-indicator-color-active: oklch(68.0% 0.11 98);
308
+ --skra-comp-datepicker-cell-foreground-hover: oklch(12.0% 0 0);
309
+ --skra-comp-datepicker-cell-foreground-active: oklch(18.0% 0 0);
310
+ --skra-comp-datepicker-cell-today-indicator-color-hover: oklch(62.0% 0.11 98);
311
+ --skra-comp-datepicker-cell-today-indicator-color-active: oklch(68.0% 0.11 98);
312
312
  --skra-comp-datepicker-border-width: 0.125rem;
313
313
  --skra-comp-datepicker-border-style: solid;
314
314
  --skra-comp-datepicker-shadow: none;
@@ -318,7 +318,8 @@
318
318
  --skra-comp-datepicker-header-typography-role: body-medium;
319
319
  --skra-comp-datepicker-nav-icon-size: 1.25em;
320
320
  --skra-comp-datepicker-weekday-typography-role: body-small;
321
- --skra-comp-datepicker-day-typography-role: body-medium;
321
+ --skra-comp-datepicker-cell-typography-role: body-medium;
322
+ --skra-comp-datepicker-month-cell-min-inline-size: 5.5rem;
322
323
  --skra-comp-dialog-background-hover: oklch(85.0% 0.015 95);
323
324
  --skra-comp-dialog-background-active: oklch(79.0% 0.015 95);
324
325
  --skra-comp-dialog-foreground-hover: oklch(12.0% 0 0);
@@ -399,6 +400,8 @@
399
400
  --skra-comp-field-select-optgroup-foreground-hover: oklch(12.0% 0 0);
400
401
  --skra-comp-field-select-optgroup-foreground-active: oklch(18.0% 0 0);
401
402
  --skra-comp-field-select-arrow-icon-size: 1em;
403
+ --skra-comp-field-temporal-indicator-color-hover: oklch(12.0% 0 0);
404
+ --skra-comp-field-temporal-indicator-color-active: oklch(18.0% 0 0);
402
405
  --skra-comp-field-border-width: 0.125rem;
403
406
  --skra-comp-field-border-style: solid;
404
407
  --skra-comp-field-shadow: none;
@@ -818,12 +821,14 @@
818
821
  --skra-comp-datepicker-min-block-size: var(--skra-sys-size-interactive-md);
819
822
  --skra-comp-datepicker-panel-radius: var(--skra-sys-radius-md);
820
823
  --skra-comp-datepicker-panel-shadow: var(--skra-sys-shadow-lg);
821
- --skra-comp-datepicker-day-size: var(--skra-sys-size-interactive-md);
822
- --skra-comp-datepicker-day-radius: var(--skra-sys-radius-sm);
824
+ --skra-comp-datepicker-cell-block-size: var(--skra-sys-size-interactive-md);
825
+ --skra-comp-datepicker-cell-radius: var(--skra-sys-radius-sm);
823
826
  --skra-comp-dialog-radius: var(--skra-sys-radius-lg);
824
827
  --skra-comp-dialog-shadow: var(--skra-sys-shadow-xl);
825
828
  --skra-comp-field-checkbox-border-radius: var(--skra-sys-radius-sm);
826
829
  --skra-comp-field-switch-track-radius: var(--skra-sys-radius-sm);
830
+ --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
831
+ --skra-comp-field-temporal-indicator-icon-size: var(--skra-sys-icon-size-sm);
827
832
  --skra-comp-field-radius: var(--skra-sys-radius-sm);
828
833
  --skra-comp-kbd-radius: var(--skra-sys-radius-none);
829
834
  --skra-comp-kbd-shadow: var(--skra-sys-shadow-sm);
@@ -989,12 +994,12 @@
989
994
  --skra-comp-datepicker-nav-color: var(--skra-sys-color-on-surface-subtle);
990
995
  --skra-comp-datepicker-nav-color-hover: var(--skra-sys-color-on-surface);
991
996
  --skra-comp-datepicker-weekday-foreground: var(--skra-sys-color-on-surface-subtle);
992
- --skra-comp-datepicker-day-foreground: var(--skra-sys-color-on-surface);
993
- --skra-comp-datepicker-day-background-hover: var(--skra-sys-color-surface-hover);
994
- --skra-comp-datepicker-day-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
995
- --skra-comp-datepicker-day-background-selected: var(--skra-sys-color-primary-base);
996
- --skra-comp-datepicker-day-foreground-selected: var(--skra-sys-color-primary-contrast);
997
- --skra-comp-datepicker-day-today-indicator-color: var(--skra-sys-color-primary-ink);
997
+ --skra-comp-datepicker-cell-foreground: var(--skra-sys-color-on-surface);
998
+ --skra-comp-datepicker-cell-background-hover: var(--skra-sys-color-surface-hover);
999
+ --skra-comp-datepicker-cell-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
1000
+ --skra-comp-datepicker-cell-background-selected: var(--skra-sys-color-primary-base);
1001
+ --skra-comp-datepicker-cell-foreground-selected: var(--skra-sys-color-primary-contrast);
1002
+ --skra-comp-datepicker-cell-today-indicator-color: var(--skra-sys-color-primary-ink);
998
1003
  --skra-comp-dialog-background: var(--skra-sys-color-surface);
999
1004
  --skra-comp-dialog-foreground: var(--skra-sys-color-on-surface);
1000
1005
  --skra-comp-dialog-border-color: var(--skra-sys-color-border);
@@ -1039,6 +1044,8 @@
1039
1044
  --skra-comp-field-select-option-foreground: var(--skra-sys-color-on-surface);
1040
1045
  --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
1041
1046
  --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
1047
+ --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
1048
+ --skra-comp-field-temporal-indicator-color: var(--skra-sys-color-on-surface);
1042
1049
  --skra-comp-field-background: var(--skra-sys-color-surface);
1043
1050
  --skra-comp-field-foreground: var(--skra-sys-color-on-surface);
1044
1051
  --skra-comp-field-border-color: var(--skra-sys-color-border);
@@ -1314,4 +1321,6 @@
1314
1321
  [data-skra-skin="brutal"] {
1315
1322
  --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");
1316
1323
  --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
+ --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
+ --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");
1317
1326
  }
package/brutal/skin.config.json CHANGED
@@ -1,40 +1,40 @@
1
- {
2
- "name": "brutal",
3
- "displayName": "Skra Brutal",
4
- "version": "0.1.0",
5
- "publishable": true,
6
- "defaultDensity": "compact",
7
- "defaultColorScheme": "light",
8
- "darkSchemeStrategy": "auto-oklch-with-overrides",
9
- "runtimeScoped": true,
10
- "visualProfile": {
11
- "globalProfile": "intensive",
12
- "interactionStrength": "intensive"
13
- },
14
- "fonts": [
15
- {
16
- "family": "body",
17
- "name": "Space Grotesk",
18
- "stack": "'Space Grotesk', system-ui, sans-serif",
19
- "weights": [400, 500, 600, 700],
20
- "requiresLoading": true,
21
- "source": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400..700&display=swap"
22
- },
23
- {
24
- "family": "display",
25
- "name": "Space Grotesk",
26
- "stack": "'Space Grotesk', system-ui, sans-serif",
27
- "weights": [600, 700],
28
- "requiresLoading": true,
29
- "source": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400..700&display=swap"
30
- },
31
- {
32
- "family": "code",
33
- "name": "system",
34
- "stack": "ui-monospace, 'Cascadia Code', 'Fira Code', monospace",
35
- "weights": [400],
36
- "requiresLoading": false
37
- }
38
- ],
39
- "extends": null
40
- }
1
+ {
2
+ "name": "brutal",
3
+ "displayName": "Skra Brutal",
4
+ "version": "0.1.0",
5
+ "publishable": true,
6
+ "defaultDensity": "compact",
7
+ "defaultColorScheme": "light",
8
+ "darkSchemeStrategy": "auto-oklch-with-overrides",
9
+ "runtimeScoped": true,
10
+ "visualProfile": {
11
+ "globalProfile": "intensive",
12
+ "interactionStrength": "intensive"
13
+ },
14
+ "fonts": [
15
+ {
16
+ "family": "body",
17
+ "name": "Space Grotesk",
18
+ "stack": "'Space Grotesk', system-ui, sans-serif",
19
+ "weights": [400, 500, 600, 700],
20
+ "requiresLoading": true,
21
+ "source": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400..700&display=swap"
22
+ },
23
+ {
24
+ "family": "display",
25
+ "name": "Space Grotesk",
26
+ "stack": "'Space Grotesk', system-ui, sans-serif",
27
+ "weights": [600, 700],
28
+ "requiresLoading": true,
29
+ "source": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400..700&display=swap"
30
+ },
31
+ {
32
+ "family": "code",
33
+ "name": "system",
34
+ "stack": "ui-monospace, 'Cascadia Code', 'Fira Code', monospace",
35
+ "weights": [400],
36
+ "requiresLoading": false
37
+ }
38
+ ],
39
+ "extends": null
40
+ }
package/manifests/datepicker.json CHANGED
@@ -111,8 +111,8 @@
111
111
  "overridable": ["overlay"]
112
112
  },
113
113
  {
114
- "token": "--skra-comp-datepicker-day-foreground",
115
- "label": "DatePicker day — text colour",
114
+ "token": "--skra-comp-datepicker-cell-foreground",
115
+ "label": "DatePicker cell — text colour",
116
116
  "group": "Surface",
117
117
  "type": "color",
118
118
  "states": ["default"],
@@ -120,8 +120,8 @@
120
120
  "overridable": ["overlay", "subtree", "instance"]
121
121
  },
122
122
  {
123
- "token": "--skra-comp-datepicker-day-background-hover",
124
- "label": "DatePicker day — highlight background on :hover / focus",
123
+ "token": "--skra-comp-datepicker-cell-background-hover",
124
+ "label": "DatePicker cell — highlight background on :hover / focus",
125
125
  "group": "State",
126
126
  "type": "color",
127
127
  "states": ["hover"],
@@ -129,8 +129,8 @@
129
129
  "overridable": ["overlay", "subtree"]
130
130
  },
131
131
  {
132
- "token": "--skra-comp-datepicker-day-background-selected",
133
- "label": "DatePicker day — background of the selected date",
132
+ "token": "--skra-comp-datepicker-cell-background-selected",
133
+ "label": "DatePicker cell — background of the selected day / month cell",
134
134
  "group": "State",
135
135
  "type": "color",
136
136
  "states": ["selected"],
@@ -138,8 +138,8 @@
138
138
  "overridable": ["overlay", "subtree"]
139
139
  },
140
140
  {
141
- "token": "--skra-comp-datepicker-day-foreground-selected",
142
- "label": "DatePicker day — text colour of the selected date",
141
+ "token": "--skra-comp-datepicker-cell-foreground-selected",
142
+ "label": "DatePicker cell — text colour of the selected day / month cell",
143
143
  "group": "State",
144
144
  "type": "color",
145
145
  "states": ["selected"],
@@ -147,13 +147,22 @@
147
147
  "overridable": ["overlay", "subtree"]
148
148
  },
149
149
  {
150
- "token": "--skra-comp-datepicker-day-today-indicator-color",
151
- "label": "DatePicker day — today marker colour (aria-current)",
150
+ "token": "--skra-comp-datepicker-cell-today-indicator-color",
151
+ "label": "DatePicker cell — today marker colour (aria-current)",
152
152
  "group": "State",
153
153
  "type": "color",
154
154
  "states": ["default"],
155
155
  "constraint": { "oklch": true },
156
156
  "overridable": ["overlay", "subtree"]
157
+ },
158
+ {
159
+ "token": "--skra-comp-datepicker-month-cell-min-inline-size",
160
+ "label": "DatePicker — month cell minimum width (precision=\"month\")",
161
+ "group": "Surface",
162
+ "type": "dimension",
163
+ "states": ["default"],
164
+ "constraint": { "unit": "rem", "min": 3, "max": 12 },
165
+ "overridable": ["overlay", "subtree"]
157
166
  }
158
167
  ]
159
168
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skra/tokens",
3
- "version": "0.4.0",
3
+ "version": "0.5.0",
4
4
  "license": "Apache-2.0",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/skra/_comp.scss CHANGED
@@ -168,10 +168,10 @@
168
168
  --skra-comp-datepicker-nav-color-active: oklch(45.5% 0 0);
169
169
  --skra-comp-datepicker-weekday-foreground-hover: oklch(42.0% 0 0);
170
170
  --skra-comp-datepicker-weekday-foreground-active: oklch(45.5% 0 0);
171
- --skra-comp-datepicker-day-foreground-hover: oklch(7.0% 0 0);
172
- --skra-comp-datepicker-day-foreground-active: oklch(10.5% 0 0);
173
- --skra-comp-datepicker-day-today-indicator-color-hover: oklch(45.0% 0.15 250);
174
- --skra-comp-datepicker-day-today-indicator-color-active: oklch(41.5% 0.15 250);
171
+ --skra-comp-datepicker-cell-foreground-hover: oklch(7.0% 0 0);
172
+ --skra-comp-datepicker-cell-foreground-active: oklch(10.5% 0 0);
173
+ --skra-comp-datepicker-cell-today-indicator-color-hover: oklch(45.0% 0.15 250);
174
+ --skra-comp-datepicker-cell-today-indicator-color-active: oklch(41.5% 0.15 250);
175
175
  --skra-comp-datepicker-border-width: 0.0625rem;
176
176
  --skra-comp-datepicker-border-style: solid;
177
177
  --skra-comp-datepicker-shadow: none;
@@ -181,7 +181,8 @@
181
181
  --skra-comp-datepicker-header-typography-role: body-medium;
182
182
  --skra-comp-datepicker-nav-icon-size: 1.25em;
183
183
  --skra-comp-datepicker-weekday-typography-role: body-small;
184
- --skra-comp-datepicker-day-typography-role: body-medium;
184
+ --skra-comp-datepicker-cell-typography-role: body-medium;
185
+ --skra-comp-datepicker-month-cell-min-inline-size: 5.5rem;
185
186
  --skra-comp-dialog-background-hover: oklch(93.0% 0 0);
186
187
  --skra-comp-dialog-background-active: oklch(89.5% 0 0);
187
188
  --skra-comp-dialog-foreground-hover: oklch(7.0% 0 0);
@@ -261,6 +262,8 @@
261
262
  --skra-comp-field-select-optgroup-foreground-hover: oklch(7.0% 0 0);
262
263
  --skra-comp-field-select-optgroup-foreground-active: oklch(10.5% 0 0);
263
264
  --skra-comp-field-select-arrow-icon-size: 1em;
265
+ --skra-comp-field-temporal-indicator-color-hover: oklch(7.0% 0 0);
266
+ --skra-comp-field-temporal-indicator-color-active: oklch(10.5% 0 0);
264
267
  --skra-comp-field-border-width: 0.0625rem;
265
268
  --skra-comp-field-border-style: solid;
266
269
  --skra-comp-field-shadow: none;
@@ -506,8 +509,10 @@
506
509
  --skra-comp-combobox-panel-shadow: var(--skra-sys-shadow-lg);
507
510
  --skra-comp-datepicker-min-block-size: var(--skra-sys-size-interactive-md);
508
511
  --skra-comp-datepicker-panel-shadow: var(--skra-sys-shadow-lg);
509
- --skra-comp-datepicker-day-size: var(--skra-sys-size-interactive-md);
512
+ --skra-comp-datepicker-cell-block-size: var(--skra-sys-size-interactive-md);
510
513
  --skra-comp-dialog-shadow: var(--skra-sys-shadow-xl);
514
+ --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
515
+ --skra-comp-field-temporal-indicator-icon-size: var(--skra-sys-icon-size-sm);
511
516
  --skra-comp-menu-shadow: var(--skra-sys-shadow-lg);
512
517
  --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
513
518
  --skra-comp-popover-shadow: var(--skra-sys-shadow-lg);
@@ -664,13 +669,13 @@
664
669
  --skra-comp-datepicker-nav-color: var(--skra-sys-color-on-surface-subtle);
665
670
  --skra-comp-datepicker-nav-color-hover: var(--skra-sys-color-on-surface);
666
671
  --skra-comp-datepicker-weekday-foreground: var(--skra-sys-color-on-surface-subtle);
667
- --skra-comp-datepicker-day-foreground: var(--skra-sys-color-on-surface);
668
- --skra-comp-datepicker-day-background-hover: var(--skra-sys-color-surface-hover);
669
- --skra-comp-datepicker-day-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
670
- --skra-comp-datepicker-day-background-selected: var(--skra-sys-color-primary-base);
671
- --skra-comp-datepicker-day-foreground-selected: var(--skra-sys-color-primary-contrast);
672
- --skra-comp-datepicker-day-today-indicator-color: var(--skra-sys-color-primary-ink);
673
- --skra-comp-datepicker-day-radius: var(--skra-sys-radius-sm);
672
+ --skra-comp-datepicker-cell-foreground: var(--skra-sys-color-on-surface);
673
+ --skra-comp-datepicker-cell-background-hover: var(--skra-sys-color-surface-hover);
674
+ --skra-comp-datepicker-cell-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
675
+ --skra-comp-datepicker-cell-background-selected: var(--skra-sys-color-primary-base);
676
+ --skra-comp-datepicker-cell-foreground-selected: var(--skra-sys-color-primary-contrast);
677
+ --skra-comp-datepicker-cell-today-indicator-color: var(--skra-sys-color-primary-ink);
678
+ --skra-comp-datepicker-cell-radius: var(--skra-sys-radius-sm);
674
679
  --skra-comp-dialog-background: var(--skra-sys-color-surface);
675
680
  --skra-comp-dialog-foreground: var(--skra-sys-color-on-surface);
676
681
  --skra-comp-dialog-radius: var(--skra-sys-radius-lg);
@@ -717,6 +722,8 @@
717
722
  --skra-comp-field-select-option-foreground: var(--skra-sys-color-on-surface);
718
723
  --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
719
724
  --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
725
+ --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
726
+ --skra-comp-field-temporal-indicator-color: var(--skra-sys-color-on-surface);
720
727
  --skra-comp-field-background: var(--skra-sys-color-surface);
721
728
  --skra-comp-field-foreground: var(--skra-sys-color-on-surface);
722
729
  --skra-comp-field-border-color: var(--skra-sys-color-border);
@@ -1006,4 +1013,6 @@
1006
1013
  :where(:root, :host) {
1007
1014
  --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%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");
1008
1015
  --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");
1016
+ --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");
1017
+ --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");
1009
1018
  }
package/skra/_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/skra/_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);
package/skra/_theme.dark.scss CHANGED
@@ -281,10 +281,10 @@
281
281
  --skra-comp-datepicker-nav-color-active: oklch(54.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
- --skra-comp-datepicker-day-foreground-hover: oklch(85.0% 0 0);
285
- --skra-comp-datepicker-day-foreground-active: oklch(81.5% 0 0);
286
- --skra-comp-datepicker-day-today-indicator-color-hover: oklch(60.0% 0.135 250);
287
- --skra-comp-datepicker-day-today-indicator-color-active: oklch(56.5% 0.135 250);
284
+ --skra-comp-datepicker-cell-foreground-hover: oklch(85.0% 0 0);
285
+ --skra-comp-datepicker-cell-foreground-active: oklch(81.5% 0 0);
286
+ --skra-comp-datepicker-cell-today-indicator-color-hover: oklch(60.0% 0.135 250);
287
+ --skra-comp-datepicker-cell-today-indicator-color-active: oklch(56.5% 0.135 250);
288
288
  --skra-comp-dialog-background-hover: oklch(22.0% 0 0);
289
289
  --skra-comp-dialog-background-active: oklch(25.5% 0 0);
290
290
  --skra-comp-dialog-foreground-hover: oklch(85.0% 0 0);
@@ -351,6 +351,8 @@
351
351
  --skra-comp-field-select-option-background-active: oklch(25.5% 0 0);
352
352
  --skra-comp-field-select-optgroup-foreground-hover: oklch(85.0% 0 0);
353
353
  --skra-comp-field-select-optgroup-foreground-active: oklch(81.5% 0 0);
354
+ --skra-comp-field-temporal-indicator-color-hover: oklch(85.0% 0 0);
355
+ --skra-comp-field-temporal-indicator-color-active: oklch(81.5% 0 0);
354
356
  --skra-comp-kbd-background-hover: oklch(26.0% 0 0);
355
357
  --skra-comp-kbd-background-active: oklch(29.5% 0 0);
356
358
  --skra-comp-kbd-foreground-hover: oklch(85.0% 0 0);
@@ -569,12 +571,12 @@
569
571
  --skra-comp-datepicker-nav-color: var(--skra-sys-color-on-surface-subtle);
570
572
  --skra-comp-datepicker-nav-color-hover: var(--skra-sys-color-on-surface);
571
573
  --skra-comp-datepicker-weekday-foreground: var(--skra-sys-color-on-surface-subtle);
572
- --skra-comp-datepicker-day-foreground: var(--skra-sys-color-on-surface);
573
- --skra-comp-datepicker-day-background-hover: var(--skra-sys-color-surface-hover);
574
- --skra-comp-datepicker-day-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
575
- --skra-comp-datepicker-day-background-selected: var(--skra-sys-color-primary-base);
576
- --skra-comp-datepicker-day-foreground-selected: var(--skra-sys-color-primary-contrast);
577
- --skra-comp-datepicker-day-today-indicator-color: var(--skra-sys-color-primary-ink);
574
+ --skra-comp-datepicker-cell-foreground: var(--skra-sys-color-on-surface);
575
+ --skra-comp-datepicker-cell-background-hover: var(--skra-sys-color-surface-hover);
576
+ --skra-comp-datepicker-cell-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
577
+ --skra-comp-datepicker-cell-background-selected: var(--skra-sys-color-primary-base);
578
+ --skra-comp-datepicker-cell-foreground-selected: var(--skra-sys-color-primary-contrast);
579
+ --skra-comp-datepicker-cell-today-indicator-color: var(--skra-sys-color-primary-ink);
578
580
  --skra-comp-dialog-background: var(--skra-sys-color-surface);
579
581
  --skra-comp-dialog-foreground: var(--skra-sys-color-on-surface);
580
582
  --skra-comp-dialog-focus-ring-color: var(--skra-sys-color-focus-ring);
@@ -610,6 +612,7 @@
610
612
  --skra-comp-field-select-option-foreground: var(--skra-sys-color-on-surface);
611
613
  --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
612
614
  --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
615
+ --skra-comp-field-temporal-indicator-color: var(--skra-sys-color-on-surface);
613
616
  --skra-comp-kbd-background: var(--skra-sys-color-surface-raised);
614
617
  --skra-comp-kbd-foreground: var(--skra-sys-color-on-surface);
615
618
  --skra-comp-kbd-border-color: var(--skra-sys-color-border-subtle);
@@ -712,4 +715,6 @@
712
715
  [data-skra-color-scheme="dark"] {
713
716
  --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");
714
717
  --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
+ --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
+ --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");
715
720
  }
package/skra/skin.config.json CHANGED
@@ -1,37 +1,37 @@
1
- {
2
- "name": "skra",
3
- "displayName": "Skra Default",
4
- "version": "1.0.0",
5
- "publishable": true,
6
- "defaultDensity": "normal",
7
- "defaultColorScheme": "light",
8
- "darkSchemeStrategy": "auto-oklch-with-overrides",
9
- "visualProfile": {
10
- "globalProfile": "normal",
11
- "interactionStrength": "normal"
12
- },
13
- "fonts": [
14
- {
15
- "family": "body",
16
- "name": "system",
17
- "stack": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
18
- "weights": [400, 500, 600, 700],
19
- "requiresLoading": false
20
- },
21
- {
22
- "family": "display",
23
- "name": "system",
24
- "stack": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
25
- "weights": [600, 700],
26
- "requiresLoading": false
27
- },
28
- {
29
- "family": "code",
30
- "name": "system",
31
- "stack": "ui-monospace, 'Cascadia Code', 'Fira Code', monospace",
32
- "weights": [400],
33
- "requiresLoading": false
34
- }
35
- ],
36
- "extends": null
37
- }
1
+ {
2
+ "name": "skra",
3
+ "displayName": "Skra Default",
4
+ "version": "1.0.0",
5
+ "publishable": true,
6
+ "defaultDensity": "normal",
7
+ "defaultColorScheme": "light",
8
+ "darkSchemeStrategy": "auto-oklch-with-overrides",
9
+ "visualProfile": {
10
+ "globalProfile": "normal",
11
+ "interactionStrength": "normal"
12
+ },
13
+ "fonts": [
14
+ {
15
+ "family": "body",
16
+ "name": "system",
17
+ "stack": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
18
+ "weights": [400, 500, 600, 700],
19
+ "requiresLoading": false
20
+ },
21
+ {
22
+ "family": "display",
23
+ "name": "system",
24
+ "stack": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
25
+ "weights": [600, 700],
26
+ "requiresLoading": false
27
+ },
28
+ {
29
+ "family": "code",
30
+ "name": "system",
31
+ "stack": "ui-monospace, 'Cascadia Code', 'Fira Code', monospace",
32
+ "weights": [400],
33
+ "requiresLoading": false
34
+ }
35
+ ],
36
+ "extends": null
37
+ }