@skra/tokens 0.3.1 → 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 (17) hide show
  1. package/brutal/_comp.scss +50 -13
  2. package/brutal/_density.comfortable.scoped.scss +9 -1
  3. package/brutal/_density.comfortable.scss +9 -1
  4. package/brutal/_density.compact.scoped.scss +9 -1
  5. package/brutal/_density.compact.scss +9 -1
  6. package/brutal/_theme.dark.scoped.scss +29 -10
  7. package/brutal/_theme.dark.scss +29 -10
  8. package/brutal/_theme.scoped.scss +50 -13
  9. package/brutal/skin.config.json +40 -40
  10. package/manifests/datepicker.json +19 -10
  11. package/manifests/surface.json +141 -0
  12. package/package.json +1 -1
  13. package/skra/_comp.scss +50 -13
  14. package/skra/_density.comfortable.scss +9 -1
  15. package/skra/_density.compact.scss +9 -1
  16. package/skra/_theme.dark.scss +29 -10
  17. 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;
@@ -398,6 +401,18 @@
398
401
  --skra-comp-status-dot-padding-inline: 0;
399
402
  --skra-comp-status-dot-shadow: none;
400
403
  --skra-comp-status-dot-focus-ring-width: 0.125rem;
404
+ --skra-comp-surface-background-hover: oklch(81.0% 0.025 95);
405
+ --skra-comp-surface-background-active: oklch(75.0% 0.025 95);
406
+ --skra-comp-surface-foreground-hover: oklch(12.0% 0 0);
407
+ --skra-comp-surface-foreground-active: oklch(18.0% 0 0);
408
+ --skra-comp-surface-border-color-hover: oklch(12.0% 0 0);
409
+ --skra-comp-surface-border-color-active: oklch(18.0% 0 0);
410
+ --skra-comp-surface-focus-ring-color-hover: oklch(57.0% 0.18 295);
411
+ --skra-comp-surface-focus-ring-color-active: oklch(63.0% 0.18 295);
412
+ --skra-comp-surface-border-width: 0.1875rem;
413
+ --skra-comp-surface-border-style: solid;
414
+ --skra-comp-surface-focus-ring-width: 0.1875rem;
415
+ --skra-comp-surface-border-width-selected: 0.375rem;
401
416
  --skra-comp-tabs-foreground-hover: oklch(47.0% 0 0);
402
417
  --skra-comp-tabs-foreground-active: oklch(53.0% 0 0);
403
418
  --skra-comp-tabs-focus-ring-color-hover: oklch(57.0% 0.18 295);
@@ -502,12 +517,14 @@
502
517
  --skra-comp-datepicker-min-block-size: var(--skra-sys-size-interactive-md);
503
518
  --skra-comp-datepicker-panel-radius: var(--skra-sys-radius-md);
504
519
  --skra-comp-datepicker-panel-shadow: var(--skra-sys-shadow-lg);
505
- --skra-comp-datepicker-day-size: var(--skra-sys-size-interactive-md);
506
- --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);
507
522
  --skra-comp-dialog-radius: var(--skra-sys-radius-lg);
508
523
  --skra-comp-dialog-shadow: var(--skra-sys-shadow-xl);
509
524
  --skra-comp-field-checkbox-border-radius: var(--skra-sys-radius-sm);
510
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);
511
528
  --skra-comp-field-radius: var(--skra-sys-radius-sm);
512
529
  --skra-comp-kbd-radius: var(--skra-sys-radius-none);
513
530
  --skra-comp-kbd-shadow: var(--skra-sys-shadow-sm);
@@ -527,6 +544,8 @@
527
544
  --skra-comp-skeleton-radius: var(--skra-sys-radius-sm);
528
545
  --skra-comp-skeleton-shadow: var(--skra-sys-shadow-sm);
529
546
  --skra-comp-status-dot-radius: var(--skra-sys-radius-full);
547
+ --skra-comp-surface-radius: var(--skra-sys-radius-none);
548
+ --skra-comp-surface-shadow: var(--skra-sys-shadow-md);
530
549
  --skra-comp-tabs-radius: var(--skra-sys-radius-sm);
531
550
  --skra-comp-toast-radius: var(--skra-sys-radius-md);
532
551
  --skra-comp-toast-shadow: var(--skra-sys-shadow-lg);
@@ -671,12 +690,12 @@
671
690
  --skra-comp-datepicker-nav-color: var(--skra-sys-color-on-surface-subtle);
672
691
  --skra-comp-datepicker-nav-color-hover: var(--skra-sys-color-on-surface);
673
692
  --skra-comp-datepicker-weekday-foreground: var(--skra-sys-color-on-surface-subtle);
674
- --skra-comp-datepicker-day-foreground: var(--skra-sys-color-on-surface);
675
- --skra-comp-datepicker-day-background-hover: var(--skra-sys-color-surface-hover);
676
- --skra-comp-datepicker-day-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
677
- --skra-comp-datepicker-day-background-selected: var(--skra-sys-color-primary-base);
678
- --skra-comp-datepicker-day-foreground-selected: var(--skra-sys-color-primary-contrast);
679
- --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);
680
699
  --skra-comp-dialog-background: var(--skra-sys-color-surface);
681
700
  --skra-comp-dialog-foreground: var(--skra-sys-color-on-surface);
682
701
  --skra-comp-dialog-border-color: var(--skra-sys-color-border);
@@ -721,6 +740,8 @@
721
740
  --skra-comp-field-select-option-foreground: var(--skra-sys-color-on-surface);
722
741
  --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
723
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);
724
745
  --skra-comp-field-background: var(--skra-sys-color-surface);
725
746
  --skra-comp-field-foreground: var(--skra-sys-color-on-surface);
726
747
  --skra-comp-field-border-color: var(--skra-sys-color-border);
@@ -843,6 +864,20 @@
843
864
  --skra-comp-status-dot-size-sm: var(--skra-sys-size-status-dot-sm);
844
865
  --skra-comp-status-dot-size-md: var(--skra-sys-size-status-dot-md);
845
866
  --skra-comp-status-dot-size-lg: var(--skra-sys-size-status-dot-lg);
867
+ --skra-comp-surface-background: var(--skra-sys-color-surface-raised);
868
+ --skra-comp-surface-foreground: var(--skra-sys-color-on-surface);
869
+ --skra-comp-surface-border-color: var(--skra-sys-color-border);
870
+ --skra-comp-surface-padding-block: var(--skra-sys-spacing-4);
871
+ --skra-comp-surface-padding-inline: var(--skra-sys-spacing-4);
872
+ --skra-comp-surface-motion-duration: var(--skra-sys-motion-duration-fast);
873
+ --skra-comp-surface-motion-easing: var(--skra-sys-motion-easing-standard);
874
+ --skra-comp-surface-focus-ring-color: var(--skra-sys-color-focus-ring);
875
+ --skra-comp-surface-padding-block-sm: var(--skra-sys-spacing-2);
876
+ --skra-comp-surface-padding-inline-sm: var(--skra-sys-spacing-2);
877
+ --skra-comp-surface-padding-block-lg: var(--skra-sys-spacing-6);
878
+ --skra-comp-surface-padding-inline-lg: var(--skra-sys-spacing-6);
879
+ --skra-comp-surface-background-selected: var(--skra-sys-color-primary-soft);
880
+ --skra-comp-surface-border-color-selected: var(--skra-sys-color-primary-border);
846
881
  --skra-comp-tabs-foreground: var(--skra-sys-color-on-surface-subtle);
847
882
  --skra-comp-tabs-padding-block: var(--skra-sys-spacing-2);
848
883
  --skra-comp-tabs-padding-inline: var(--skra-sys-spacing-4);
@@ -982,4 +1017,6 @@
982
1017
  :where(:root, :host) {
983
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");
984
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");
985
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);
@@ -145,6 +147,12 @@
145
147
  --skra-comp-status-dot-size-sm: var(--skra-sys-size-status-dot-sm);
146
148
  --skra-comp-status-dot-size-md: var(--skra-sys-size-status-dot-md);
147
149
  --skra-comp-status-dot-size-lg: var(--skra-sys-size-status-dot-lg);
150
+ --skra-comp-surface-padding-block: var(--skra-sys-spacing-4);
151
+ --skra-comp-surface-padding-inline: var(--skra-sys-spacing-4);
152
+ --skra-comp-surface-padding-block-sm: var(--skra-sys-spacing-2);
153
+ --skra-comp-surface-padding-inline-sm: var(--skra-sys-spacing-2);
154
+ --skra-comp-surface-padding-block-lg: var(--skra-sys-spacing-6);
155
+ --skra-comp-surface-padding-inline-lg: var(--skra-sys-spacing-6);
148
156
  --skra-comp-tabs-padding-block: var(--skra-sys-spacing-2);
149
157
  --skra-comp-tabs-padding-inline: var(--skra-sys-spacing-4);
150
158
  --skra-comp-tabs-gap: var(--skra-sys-spacing-1);
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);
@@ -145,6 +147,12 @@
145
147
  --skra-comp-status-dot-size-sm: var(--skra-sys-size-status-dot-sm);
146
148
  --skra-comp-status-dot-size-md: var(--skra-sys-size-status-dot-md);
147
149
  --skra-comp-status-dot-size-lg: var(--skra-sys-size-status-dot-lg);
150
+ --skra-comp-surface-padding-block: var(--skra-sys-spacing-4);
151
+ --skra-comp-surface-padding-inline: var(--skra-sys-spacing-4);
152
+ --skra-comp-surface-padding-block-sm: var(--skra-sys-spacing-2);
153
+ --skra-comp-surface-padding-inline-sm: var(--skra-sys-spacing-2);
154
+ --skra-comp-surface-padding-block-lg: var(--skra-sys-spacing-6);
155
+ --skra-comp-surface-padding-inline-lg: var(--skra-sys-spacing-6);
148
156
  --skra-comp-tabs-padding-block: var(--skra-sys-spacing-2);
149
157
  --skra-comp-tabs-padding-inline: var(--skra-sys-spacing-4);
150
158
  --skra-comp-tabs-gap: var(--skra-sys-spacing-1);
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);
@@ -145,6 +147,12 @@
145
147
  --skra-comp-status-dot-size-sm: var(--skra-sys-size-status-dot-sm);
146
148
  --skra-comp-status-dot-size-md: var(--skra-sys-size-status-dot-md);
147
149
  --skra-comp-status-dot-size-lg: var(--skra-sys-size-status-dot-lg);
150
+ --skra-comp-surface-padding-block: var(--skra-sys-spacing-4);
151
+ --skra-comp-surface-padding-inline: var(--skra-sys-spacing-4);
152
+ --skra-comp-surface-padding-block-sm: var(--skra-sys-spacing-2);
153
+ --skra-comp-surface-padding-inline-sm: var(--skra-sys-spacing-2);
154
+ --skra-comp-surface-padding-block-lg: var(--skra-sys-spacing-6);
155
+ --skra-comp-surface-padding-inline-lg: var(--skra-sys-spacing-6);
148
156
  --skra-comp-tabs-padding-block: var(--skra-sys-spacing-2);
149
157
  --skra-comp-tabs-padding-inline: var(--skra-sys-spacing-4);
150
158
  --skra-comp-tabs-gap: var(--skra-sys-spacing-1);
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);
@@ -145,6 +147,12 @@
145
147
  --skra-comp-status-dot-size-sm: var(--skra-sys-size-status-dot-sm);
146
148
  --skra-comp-status-dot-size-md: var(--skra-sys-size-status-dot-md);
147
149
  --skra-comp-status-dot-size-lg: var(--skra-sys-size-status-dot-lg);
150
+ --skra-comp-surface-padding-block: var(--skra-sys-spacing-4);
151
+ --skra-comp-surface-padding-inline: var(--skra-sys-spacing-4);
152
+ --skra-comp-surface-padding-block-sm: var(--skra-sys-spacing-2);
153
+ --skra-comp-surface-padding-inline-sm: var(--skra-sys-spacing-2);
154
+ --skra-comp-surface-padding-block-lg: var(--skra-sys-spacing-6);
155
+ --skra-comp-surface-padding-inline-lg: var(--skra-sys-spacing-6);
148
156
  --skra-comp-tabs-padding-block: var(--skra-sys-spacing-2);
149
157
  --skra-comp-tabs-padding-inline: var(--skra-sys-spacing-4);
150
158
  --skra-comp-tabs-gap: var(--skra-sys-spacing-1);
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);
@@ -445,6 +447,14 @@
445
447
  --skra-comp-status-dot-border-color-active: oklch(33.0% 0 0);
446
448
  --skra-comp-status-dot-focus-ring-color-hover: oklch(48.0% 0.162 295);
447
449
  --skra-comp-status-dot-focus-ring-color-active: oklch(42.0% 0.162 295);
450
+ --skra-comp-surface-background-hover: oklch(31.0% 0 0);
451
+ --skra-comp-surface-background-active: oklch(37.0% 0 0);
452
+ --skra-comp-surface-foreground-hover: oklch(80.0% 0 0);
453
+ --skra-comp-surface-foreground-active: oklch(74.0% 0 0);
454
+ --skra-comp-surface-border-color-hover: oklch(80.0% 0 0);
455
+ --skra-comp-surface-border-color-active: oklch(74.0% 0 0);
456
+ --skra-comp-surface-focus-ring-color-hover: oklch(48.0% 0.162 295);
457
+ --skra-comp-surface-focus-ring-color-active: oklch(42.0% 0.162 295);
448
458
  --skra-comp-tabs-foreground-hover: oklch(53.0% 0 0);
449
459
  --skra-comp-tabs-foreground-active: oklch(47.0% 0 0);
450
460
  --skra-comp-tabs-focus-ring-color-hover: oklch(48.0% 0.162 295);
@@ -566,12 +576,12 @@
566
576
  --skra-comp-datepicker-nav-color: var(--skra-sys-color-on-surface-subtle);
567
577
  --skra-comp-datepicker-nav-color-hover: var(--skra-sys-color-on-surface);
568
578
  --skra-comp-datepicker-weekday-foreground: var(--skra-sys-color-on-surface-subtle);
569
- --skra-comp-datepicker-day-foreground: var(--skra-sys-color-on-surface);
570
- --skra-comp-datepicker-day-background-hover: var(--skra-sys-color-surface-hover);
571
- --skra-comp-datepicker-day-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
572
- --skra-comp-datepicker-day-background-selected: var(--skra-sys-color-primary-base);
573
- --skra-comp-datepicker-day-foreground-selected: var(--skra-sys-color-primary-contrast);
574
- --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);
575
585
  --skra-comp-dialog-background: var(--skra-sys-color-surface);
576
586
  --skra-comp-dialog-foreground: var(--skra-sys-color-on-surface);
577
587
  --skra-comp-dialog-border-color: var(--skra-sys-color-border);
@@ -608,6 +618,7 @@
608
618
  --skra-comp-field-select-option-foreground: var(--skra-sys-color-on-surface);
609
619
  --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
610
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);
611
622
  --skra-comp-kbd-background: var(--skra-sys-color-surface-raised);
612
623
  --skra-comp-kbd-foreground: var(--skra-sys-color-on-surface);
613
624
  --skra-comp-kbd-border-color: var(--skra-sys-color-border);
@@ -666,6 +677,12 @@
666
677
  --skra-comp-status-dot-foreground: var(--skra-sys-color-neutral-contrast);
667
678
  --skra-comp-status-dot-border-color: var(--skra-sys-color-surface);
668
679
  --skra-comp-status-dot-focus-ring-color: var(--skra-sys-color-focus-ring);
680
+ --skra-comp-surface-background: var(--skra-sys-color-surface-raised);
681
+ --skra-comp-surface-foreground: var(--skra-sys-color-on-surface);
682
+ --skra-comp-surface-border-color: var(--skra-sys-color-border);
683
+ --skra-comp-surface-focus-ring-color: var(--skra-sys-color-focus-ring);
684
+ --skra-comp-surface-background-selected: var(--skra-sys-color-primary-soft);
685
+ --skra-comp-surface-border-color-selected: var(--skra-sys-color-primary-border);
669
686
  --skra-comp-tabs-foreground: var(--skra-sys-color-on-surface-subtle);
670
687
  --skra-comp-tabs-focus-ring-color: var(--skra-sys-color-focus-ring);
671
688
  --skra-comp-tabs-foreground-selected: var(--skra-sys-color-on-surface-strong);
@@ -704,4 +721,6 @@
704
721
  [data-skra-skin="brutal"][data-skra-color-scheme="dark"] {
705
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");
706
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");
707
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);
@@ -446,6 +448,14 @@
446
448
  --skra-comp-status-dot-border-color-active: oklch(33.0% 0 0);
447
449
  --skra-comp-status-dot-focus-ring-color-hover: oklch(48.0% 0.162 295);
448
450
  --skra-comp-status-dot-focus-ring-color-active: oklch(42.0% 0.162 295);
451
+ --skra-comp-surface-background-hover: oklch(31.0% 0 0);
452
+ --skra-comp-surface-background-active: oklch(37.0% 0 0);
453
+ --skra-comp-surface-foreground-hover: oklch(80.0% 0 0);
454
+ --skra-comp-surface-foreground-active: oklch(74.0% 0 0);
455
+ --skra-comp-surface-border-color-hover: oklch(80.0% 0 0);
456
+ --skra-comp-surface-border-color-active: oklch(74.0% 0 0);
457
+ --skra-comp-surface-focus-ring-color-hover: oklch(48.0% 0.162 295);
458
+ --skra-comp-surface-focus-ring-color-active: oklch(42.0% 0.162 295);
449
459
  --skra-comp-tabs-foreground-hover: oklch(53.0% 0 0);
450
460
  --skra-comp-tabs-foreground-active: oklch(47.0% 0 0);
451
461
  --skra-comp-tabs-focus-ring-color-hover: oklch(48.0% 0.162 295);
@@ -567,12 +577,12 @@
567
577
  --skra-comp-datepicker-nav-color: var(--skra-sys-color-on-surface-subtle);
568
578
  --skra-comp-datepicker-nav-color-hover: var(--skra-sys-color-on-surface);
569
579
  --skra-comp-datepicker-weekday-foreground: var(--skra-sys-color-on-surface-subtle);
570
- --skra-comp-datepicker-day-foreground: var(--skra-sys-color-on-surface);
571
- --skra-comp-datepicker-day-background-hover: var(--skra-sys-color-surface-hover);
572
- --skra-comp-datepicker-day-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
573
- --skra-comp-datepicker-day-background-selected: var(--skra-sys-color-primary-base);
574
- --skra-comp-datepicker-day-foreground-selected: var(--skra-sys-color-primary-contrast);
575
- --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);
576
586
  --skra-comp-dialog-background: var(--skra-sys-color-surface);
577
587
  --skra-comp-dialog-foreground: var(--skra-sys-color-on-surface);
578
588
  --skra-comp-dialog-border-color: var(--skra-sys-color-border);
@@ -609,6 +619,7 @@
609
619
  --skra-comp-field-select-option-foreground: var(--skra-sys-color-on-surface);
610
620
  --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
611
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);
612
623
  --skra-comp-kbd-background: var(--skra-sys-color-surface-raised);
613
624
  --skra-comp-kbd-foreground: var(--skra-sys-color-on-surface);
614
625
  --skra-comp-kbd-border-color: var(--skra-sys-color-border);
@@ -667,6 +678,12 @@
667
678
  --skra-comp-status-dot-foreground: var(--skra-sys-color-neutral-contrast);
668
679
  --skra-comp-status-dot-border-color: var(--skra-sys-color-surface);
669
680
  --skra-comp-status-dot-focus-ring-color: var(--skra-sys-color-focus-ring);
681
+ --skra-comp-surface-background: var(--skra-sys-color-surface-raised);
682
+ --skra-comp-surface-foreground: var(--skra-sys-color-on-surface);
683
+ --skra-comp-surface-border-color: var(--skra-sys-color-border);
684
+ --skra-comp-surface-focus-ring-color: var(--skra-sys-color-focus-ring);
685
+ --skra-comp-surface-background-selected: var(--skra-sys-color-primary-soft);
686
+ --skra-comp-surface-border-color-selected: var(--skra-sys-color-primary-border);
670
687
  --skra-comp-tabs-foreground: var(--skra-sys-color-on-surface-subtle);
671
688
  --skra-comp-tabs-focus-ring-color: var(--skra-sys-color-focus-ring);
672
689
  --skra-comp-tabs-foreground-selected: var(--skra-sys-color-on-surface-strong);
@@ -705,4 +722,6 @@
705
722
  [data-skra-color-scheme="dark"] {
706
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");
707
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");
708
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;
@@ -539,6 +542,18 @@
539
542
  --skra-comp-status-dot-padding-inline: 0;
540
543
  --skra-comp-status-dot-shadow: none;
541
544
  --skra-comp-status-dot-focus-ring-width: 0.125rem;
545
+ --skra-comp-surface-background-hover: oklch(81.0% 0.025 95);
546
+ --skra-comp-surface-background-active: oklch(75.0% 0.025 95);
547
+ --skra-comp-surface-foreground-hover: oklch(12.0% 0 0);
548
+ --skra-comp-surface-foreground-active: oklch(18.0% 0 0);
549
+ --skra-comp-surface-border-color-hover: oklch(12.0% 0 0);
550
+ --skra-comp-surface-border-color-active: oklch(18.0% 0 0);
551
+ --skra-comp-surface-focus-ring-color-hover: oklch(57.0% 0.18 295);
552
+ --skra-comp-surface-focus-ring-color-active: oklch(63.0% 0.18 295);
553
+ --skra-comp-surface-border-width: 0.1875rem;
554
+ --skra-comp-surface-border-style: solid;
555
+ --skra-comp-surface-focus-ring-width: 0.1875rem;
556
+ --skra-comp-surface-border-width-selected: 0.375rem;
542
557
  --skra-comp-tabs-foreground-hover: oklch(47.0% 0 0);
543
558
  --skra-comp-tabs-foreground-active: oklch(53.0% 0 0);
544
559
  --skra-comp-tabs-focus-ring-color-hover: oklch(57.0% 0.18 295);
@@ -806,12 +821,14 @@
806
821
  --skra-comp-datepicker-min-block-size: var(--skra-sys-size-interactive-md);
807
822
  --skra-comp-datepicker-panel-radius: var(--skra-sys-radius-md);
808
823
  --skra-comp-datepicker-panel-shadow: var(--skra-sys-shadow-lg);
809
- --skra-comp-datepicker-day-size: var(--skra-sys-size-interactive-md);
810
- --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);
811
826
  --skra-comp-dialog-radius: var(--skra-sys-radius-lg);
812
827
  --skra-comp-dialog-shadow: var(--skra-sys-shadow-xl);
813
828
  --skra-comp-field-checkbox-border-radius: var(--skra-sys-radius-sm);
814
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);
815
832
  --skra-comp-field-radius: var(--skra-sys-radius-sm);
816
833
  --skra-comp-kbd-radius: var(--skra-sys-radius-none);
817
834
  --skra-comp-kbd-shadow: var(--skra-sys-shadow-sm);
@@ -831,6 +848,8 @@
831
848
  --skra-comp-skeleton-radius: var(--skra-sys-radius-sm);
832
849
  --skra-comp-skeleton-shadow: var(--skra-sys-shadow-sm);
833
850
  --skra-comp-status-dot-radius: var(--skra-sys-radius-full);
851
+ --skra-comp-surface-radius: var(--skra-sys-radius-none);
852
+ --skra-comp-surface-shadow: var(--skra-sys-shadow-md);
834
853
  --skra-comp-tabs-radius: var(--skra-sys-radius-sm);
835
854
  --skra-comp-toast-radius: var(--skra-sys-radius-md);
836
855
  --skra-comp-toast-shadow: var(--skra-sys-shadow-lg);
@@ -975,12 +994,12 @@
975
994
  --skra-comp-datepicker-nav-color: var(--skra-sys-color-on-surface-subtle);
976
995
  --skra-comp-datepicker-nav-color-hover: var(--skra-sys-color-on-surface);
977
996
  --skra-comp-datepicker-weekday-foreground: var(--skra-sys-color-on-surface-subtle);
978
- --skra-comp-datepicker-day-foreground: var(--skra-sys-color-on-surface);
979
- --skra-comp-datepicker-day-background-hover: var(--skra-sys-color-surface-hover);
980
- --skra-comp-datepicker-day-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
981
- --skra-comp-datepicker-day-background-selected: var(--skra-sys-color-primary-base);
982
- --skra-comp-datepicker-day-foreground-selected: var(--skra-sys-color-primary-contrast);
983
- --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);
984
1003
  --skra-comp-dialog-background: var(--skra-sys-color-surface);
985
1004
  --skra-comp-dialog-foreground: var(--skra-sys-color-on-surface);
986
1005
  --skra-comp-dialog-border-color: var(--skra-sys-color-border);
@@ -1025,6 +1044,8 @@
1025
1044
  --skra-comp-field-select-option-foreground: var(--skra-sys-color-on-surface);
1026
1045
  --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
1027
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);
1028
1049
  --skra-comp-field-background: var(--skra-sys-color-surface);
1029
1050
  --skra-comp-field-foreground: var(--skra-sys-color-on-surface);
1030
1051
  --skra-comp-field-border-color: var(--skra-sys-color-border);
@@ -1147,6 +1168,20 @@
1147
1168
  --skra-comp-status-dot-size-sm: var(--skra-sys-size-status-dot-sm);
1148
1169
  --skra-comp-status-dot-size-md: var(--skra-sys-size-status-dot-md);
1149
1170
  --skra-comp-status-dot-size-lg: var(--skra-sys-size-status-dot-lg);
1171
+ --skra-comp-surface-background: var(--skra-sys-color-surface-raised);
1172
+ --skra-comp-surface-foreground: var(--skra-sys-color-on-surface);
1173
+ --skra-comp-surface-border-color: var(--skra-sys-color-border);
1174
+ --skra-comp-surface-padding-block: var(--skra-sys-spacing-4);
1175
+ --skra-comp-surface-padding-inline: var(--skra-sys-spacing-4);
1176
+ --skra-comp-surface-motion-duration: var(--skra-sys-motion-duration-fast);
1177
+ --skra-comp-surface-motion-easing: var(--skra-sys-motion-easing-standard);
1178
+ --skra-comp-surface-focus-ring-color: var(--skra-sys-color-focus-ring);
1179
+ --skra-comp-surface-padding-block-sm: var(--skra-sys-spacing-2);
1180
+ --skra-comp-surface-padding-inline-sm: var(--skra-sys-spacing-2);
1181
+ --skra-comp-surface-padding-block-lg: var(--skra-sys-spacing-6);
1182
+ --skra-comp-surface-padding-inline-lg: var(--skra-sys-spacing-6);
1183
+ --skra-comp-surface-background-selected: var(--skra-sys-color-primary-soft);
1184
+ --skra-comp-surface-border-color-selected: var(--skra-sys-color-primary-border);
1150
1185
  --skra-comp-tabs-foreground: var(--skra-sys-color-on-surface-subtle);
1151
1186
  --skra-comp-tabs-padding-block: var(--skra-sys-spacing-2);
1152
1187
  --skra-comp-tabs-padding-inline: var(--skra-sys-spacing-4);
@@ -1286,4 +1321,6 @@
1286
1321
  [data-skra-skin="brutal"] {
1287
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");
1288
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");
1289
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/manifests/surface.json ADDED
@@ -0,0 +1,141 @@
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "surface",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-surface-background",
8
+ "label": "Surface — container fill colour",
9
+ "group": "Surface",
10
+ "type": "color",
11
+ "states": ["default"],
12
+ "constraint": { "oklch": true },
13
+ "overridable": ["overlay", "subtree", "instance"]
14
+ },
15
+ {
16
+ "token": "--skra-comp-surface-foreground",
17
+ "label": "Surface — inherited text colour inside the container",
18
+ "group": "Surface",
19
+ "type": "color",
20
+ "states": ["default"],
21
+ "constraint": { "oklch": true },
22
+ "overridable": ["overlay", "subtree", "instance"]
23
+ },
24
+ {
25
+ "token": "--skra-comp-surface-border-color",
26
+ "label": "Surface — container edge colour",
27
+ "group": "Surface",
28
+ "type": "color",
29
+ "states": ["default"],
30
+ "constraint": { "oklch": true },
31
+ "overridable": ["overlay", "subtree"]
32
+ },
33
+ {
34
+ "token": "--skra-comp-surface-border-width",
35
+ "label": "Surface — container edge width",
36
+ "group": "Surface",
37
+ "type": "dimension",
38
+ "states": ["default"],
39
+ "constraint": { "unit": "rem", "min": 0, "max": 0.5 },
40
+ "overridable": ["overlay", "subtree"]
41
+ },
42
+ {
43
+ "token": "--skra-comp-surface-radius",
44
+ "label": "Surface — container corner radius",
45
+ "group": "Surface",
46
+ "type": "dimension",
47
+ "states": ["default"],
48
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
49
+ "overridable": ["overlay", "subtree"]
50
+ },
51
+ {
52
+ "token": "--skra-comp-surface-shadow",
53
+ "label": "Surface — elevation shadow (the skin's single neutral level)",
54
+ "group": "Surface",
55
+ "type": "shadow",
56
+ "states": ["default"],
57
+ "overridable": ["overlay", "subtree"]
58
+ },
59
+ {
60
+ "token": "--skra-comp-surface-padding-block",
61
+ "label": "Surface — block padding, medium preset (the default)",
62
+ "group": "Spacing",
63
+ "type": "dimension",
64
+ "states": ["default"],
65
+ "constraint": { "unit": "rem", "min": 0, "max": 4 },
66
+ "overridable": ["overlay", "subtree", "instance"]
67
+ },
68
+ {
69
+ "token": "--skra-comp-surface-padding-inline",
70
+ "label": "Surface — inline padding, medium preset (the default)",
71
+ "group": "Spacing",
72
+ "type": "dimension",
73
+ "states": ["default"],
74
+ "constraint": { "unit": "rem", "min": 0, "max": 4 },
75
+ "overridable": ["overlay", "subtree", "instance"]
76
+ },
77
+ {
78
+ "token": "--skra-comp-surface-padding-block-sm",
79
+ "label": "Surface — block padding, small preset",
80
+ "group": "Spacing",
81
+ "type": "dimension",
82
+ "states": ["default"],
83
+ "constraint": { "unit": "rem", "min": 0, "max": 4 },
84
+ "overridable": ["overlay", "subtree", "instance"]
85
+ },
86
+ {
87
+ "token": "--skra-comp-surface-padding-inline-sm",
88
+ "label": "Surface — inline padding, small preset",
89
+ "group": "Spacing",
90
+ "type": "dimension",
91
+ "states": ["default"],
92
+ "constraint": { "unit": "rem", "min": 0, "max": 4 },
93
+ "overridable": ["overlay", "subtree", "instance"]
94
+ },
95
+ {
96
+ "token": "--skra-comp-surface-padding-block-lg",
97
+ "label": "Surface — block padding, large preset",
98
+ "group": "Spacing",
99
+ "type": "dimension",
100
+ "states": ["default"],
101
+ "constraint": { "unit": "rem", "min": 0, "max": 4 },
102
+ "overridable": ["overlay", "subtree", "instance"]
103
+ },
104
+ {
105
+ "token": "--skra-comp-surface-padding-inline-lg",
106
+ "label": "Surface — inline padding, large preset",
107
+ "group": "Spacing",
108
+ "type": "dimension",
109
+ "states": ["default"],
110
+ "constraint": { "unit": "rem", "min": 0, "max": 4 },
111
+ "overridable": ["overlay", "subtree", "instance"]
112
+ },
113
+ {
114
+ "token": "--skra-comp-surface-background-selected",
115
+ "label": "Surface — fill when the consumer's markup reads as selected/current",
116
+ "group": "Surface",
117
+ "type": "color",
118
+ "states": ["selected"],
119
+ "constraint": { "oklch": true },
120
+ "overridable": ["overlay", "subtree"]
121
+ },
122
+ {
123
+ "token": "--skra-comp-surface-border-color-selected",
124
+ "label": "Surface — edge colour when selected/current",
125
+ "group": "Surface",
126
+ "type": "color",
127
+ "states": ["selected"],
128
+ "constraint": { "oklch": true },
129
+ "overridable": ["overlay", "subtree"]
130
+ },
131
+ {
132
+ "token": "--skra-comp-surface-border-width-selected",
133
+ "label": "Surface — edge width when selected/current (WCAG 1.4.1 non-colour channel — must differ from the resting width)",
134
+ "group": "Surface",
135
+ "type": "dimension",
136
+ "states": ["selected"],
137
+ "constraint": { "unit": "rem", "min": 0, "max": 0.5 },
138
+ "overridable": ["overlay", "subtree"]
139
+ }
140
+ ]
141
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skra/tokens",
3
- "version": "0.3.1",
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;
@@ -404,6 +407,18 @@
404
407
  --skra-comp-status-dot-padding-inline: 0;
405
408
  --skra-comp-status-dot-shadow: none;
406
409
  --skra-comp-status-dot-focus-ring-width: 0.125rem;
410
+ --skra-comp-surface-background-hover: oklch(88.0% 0 0);
411
+ --skra-comp-surface-background-active: oklch(84.5% 0 0);
412
+ --skra-comp-surface-foreground-hover: oklch(7.0% 0 0);
413
+ --skra-comp-surface-foreground-active: oklch(10.5% 0 0);
414
+ --skra-comp-surface-border-color-hover: oklch(47.0% 0 0);
415
+ --skra-comp-surface-border-color-active: oklch(50.5% 0 0);
416
+ --skra-comp-surface-focus-ring-color-hover: oklch(53.0% 0.15 250);
417
+ --skra-comp-surface-focus-ring-color-active: oklch(49.5% 0.15 250);
418
+ --skra-comp-surface-border-width: 0.0625rem;
419
+ --skra-comp-surface-border-style: solid;
420
+ --skra-comp-surface-focus-ring-width: 0.125rem;
421
+ --skra-comp-surface-border-width-selected: 0.125rem;
407
422
  --skra-comp-tabs-foreground-hover: oklch(42.0% 0 0);
408
423
  --skra-comp-tabs-foreground-active: oklch(45.5% 0 0);
409
424
  --skra-comp-tabs-focus-ring-color-hover: oklch(53.0% 0.15 250);
@@ -494,14 +509,17 @@
494
509
  --skra-comp-combobox-panel-shadow: var(--skra-sys-shadow-lg);
495
510
  --skra-comp-datepicker-min-block-size: var(--skra-sys-size-interactive-md);
496
511
  --skra-comp-datepicker-panel-shadow: var(--skra-sys-shadow-lg);
497
- --skra-comp-datepicker-day-size: var(--skra-sys-size-interactive-md);
512
+ --skra-comp-datepicker-cell-block-size: var(--skra-sys-size-interactive-md);
498
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);
499
516
  --skra-comp-menu-shadow: var(--skra-sys-shadow-lg);
500
517
  --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
501
518
  --skra-comp-popover-shadow: var(--skra-sys-shadow-lg);
502
519
  --skra-comp-select-min-block-size: var(--skra-sys-size-interactive-md);
503
520
  --skra-comp-select-panel-shadow: var(--skra-sys-shadow-lg);
504
521
  --skra-comp-select-option-min-block-size: var(--skra-sys-size-interactive-md);
522
+ --skra-comp-surface-shadow: var(--skra-sys-shadow-sm);
505
523
  --skra-comp-toast-shadow: var(--skra-sys-shadow-lg);
506
524
  --skra-comp-toast-dismiss-size: var(--skra-sys-size-interactive-sm);
507
525
  --skra-comp-tooltip-shadow: var(--skra-sys-shadow-md);
@@ -651,13 +669,13 @@
651
669
  --skra-comp-datepicker-nav-color: var(--skra-sys-color-on-surface-subtle);
652
670
  --skra-comp-datepicker-nav-color-hover: var(--skra-sys-color-on-surface);
653
671
  --skra-comp-datepicker-weekday-foreground: var(--skra-sys-color-on-surface-subtle);
654
- --skra-comp-datepicker-day-foreground: var(--skra-sys-color-on-surface);
655
- --skra-comp-datepicker-day-background-hover: var(--skra-sys-color-surface-hover);
656
- --skra-comp-datepicker-day-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
657
- --skra-comp-datepicker-day-background-selected: var(--skra-sys-color-primary-base);
658
- --skra-comp-datepicker-day-foreground-selected: var(--skra-sys-color-primary-contrast);
659
- --skra-comp-datepicker-day-today-indicator-color: var(--skra-sys-color-primary-ink);
660
- --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);
661
679
  --skra-comp-dialog-background: var(--skra-sys-color-surface);
662
680
  --skra-comp-dialog-foreground: var(--skra-sys-color-on-surface);
663
681
  --skra-comp-dialog-radius: var(--skra-sys-radius-lg);
@@ -704,6 +722,8 @@
704
722
  --skra-comp-field-select-option-foreground: var(--skra-sys-color-on-surface);
705
723
  --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
706
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);
707
727
  --skra-comp-field-background: var(--skra-sys-color-surface);
708
728
  --skra-comp-field-foreground: var(--skra-sys-color-on-surface);
709
729
  --skra-comp-field-border-color: var(--skra-sys-color-border);
@@ -836,6 +856,21 @@
836
856
  --skra-comp-status-dot-size-sm: var(--skra-sys-size-status-dot-sm);
837
857
  --skra-comp-status-dot-size-md: var(--skra-sys-size-status-dot-md);
838
858
  --skra-comp-status-dot-size-lg: var(--skra-sys-size-status-dot-lg);
859
+ --skra-comp-surface-background: var(--skra-sys-color-surface-raised);
860
+ --skra-comp-surface-foreground: var(--skra-sys-color-on-surface);
861
+ --skra-comp-surface-border-color: var(--skra-sys-color-border-subtle);
862
+ --skra-comp-surface-radius: var(--skra-sys-radius-md);
863
+ --skra-comp-surface-padding-block: var(--skra-sys-spacing-4);
864
+ --skra-comp-surface-padding-inline: var(--skra-sys-spacing-4);
865
+ --skra-comp-surface-motion-duration: var(--skra-sys-motion-duration-fast);
866
+ --skra-comp-surface-motion-easing: var(--skra-sys-motion-easing-standard);
867
+ --skra-comp-surface-focus-ring-color: var(--skra-sys-color-focus-ring);
868
+ --skra-comp-surface-padding-block-sm: var(--skra-sys-spacing-2);
869
+ --skra-comp-surface-padding-inline-sm: var(--skra-sys-spacing-2);
870
+ --skra-comp-surface-padding-block-lg: var(--skra-sys-spacing-6);
871
+ --skra-comp-surface-padding-inline-lg: var(--skra-sys-spacing-6);
872
+ --skra-comp-surface-background-selected: var(--skra-sys-color-primary-soft);
873
+ --skra-comp-surface-border-color-selected: var(--skra-sys-color-primary-border);
839
874
  --skra-comp-tabs-foreground: var(--skra-sys-color-on-surface-subtle);
840
875
  --skra-comp-tabs-radius: var(--skra-sys-radius-sm);
841
876
  --skra-comp-tabs-padding-block: var(--skra-sys-spacing-2);
@@ -978,4 +1013,6 @@
978
1013
  :where(:root, :host) {
979
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");
980
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");
981
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);
@@ -145,6 +147,12 @@
145
147
  --skra-comp-status-dot-size-sm: var(--skra-sys-size-status-dot-sm);
146
148
  --skra-comp-status-dot-size-md: var(--skra-sys-size-status-dot-md);
147
149
  --skra-comp-status-dot-size-lg: var(--skra-sys-size-status-dot-lg);
150
+ --skra-comp-surface-padding-block: var(--skra-sys-spacing-4);
151
+ --skra-comp-surface-padding-inline: var(--skra-sys-spacing-4);
152
+ --skra-comp-surface-padding-block-sm: var(--skra-sys-spacing-2);
153
+ --skra-comp-surface-padding-inline-sm: var(--skra-sys-spacing-2);
154
+ --skra-comp-surface-padding-block-lg: var(--skra-sys-spacing-6);
155
+ --skra-comp-surface-padding-inline-lg: var(--skra-sys-spacing-6);
148
156
  --skra-comp-tabs-padding-block: var(--skra-sys-spacing-2);
149
157
  --skra-comp-tabs-padding-inline: var(--skra-sys-spacing-4);
150
158
  --skra-comp-tabs-gap: var(--skra-sys-spacing-1);
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);
@@ -145,6 +147,12 @@
145
147
  --skra-comp-status-dot-size-sm: var(--skra-sys-size-status-dot-sm);
146
148
  --skra-comp-status-dot-size-md: var(--skra-sys-size-status-dot-md);
147
149
  --skra-comp-status-dot-size-lg: var(--skra-sys-size-status-dot-lg);
150
+ --skra-comp-surface-padding-block: var(--skra-sys-spacing-4);
151
+ --skra-comp-surface-padding-inline: var(--skra-sys-spacing-4);
152
+ --skra-comp-surface-padding-block-sm: var(--skra-sys-spacing-2);
153
+ --skra-comp-surface-padding-inline-sm: var(--skra-sys-spacing-2);
154
+ --skra-comp-surface-padding-block-lg: var(--skra-sys-spacing-6);
155
+ --skra-comp-surface-padding-inline-lg: var(--skra-sys-spacing-6);
148
156
  --skra-comp-tabs-padding-block: var(--skra-sys-spacing-2);
149
157
  --skra-comp-tabs-padding-inline: var(--skra-sys-spacing-4);
150
158
  --skra-comp-tabs-gap: var(--skra-sys-spacing-1);
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);
@@ -442,6 +444,14 @@
442
444
  --skra-comp-status-dot-border-color-active: oklch(25.5% 0 0);
443
445
  --skra-comp-status-dot-focus-ring-color-hover: oklch(68.0% 0.135 250);
444
446
  --skra-comp-status-dot-focus-ring-color-active: oklch(64.5% 0.135 250);
447
+ --skra-comp-surface-background-hover: oklch(26.0% 0 0);
448
+ --skra-comp-surface-background-active: oklch(29.5% 0 0);
449
+ --skra-comp-surface-foreground-hover: oklch(85.0% 0 0);
450
+ --skra-comp-surface-foreground-active: oklch(81.5% 0 0);
451
+ --skra-comp-surface-border-color-hover: oklch(53.0% 0 0);
452
+ --skra-comp-surface-border-color-active: oklch(49.5% 0 0);
453
+ --skra-comp-surface-focus-ring-color-hover: oklch(68.0% 0.135 250);
454
+ --skra-comp-surface-focus-ring-color-active: oklch(64.5% 0.135 250);
445
455
  --skra-comp-tabs-foreground-hover: oklch(58.0% 0 0);
446
456
  --skra-comp-tabs-foreground-active: oklch(54.5% 0 0);
447
457
  --skra-comp-tabs-focus-ring-color-hover: oklch(68.0% 0.135 250);
@@ -561,12 +571,12 @@
561
571
  --skra-comp-datepicker-nav-color: var(--skra-sys-color-on-surface-subtle);
562
572
  --skra-comp-datepicker-nav-color-hover: var(--skra-sys-color-on-surface);
563
573
  --skra-comp-datepicker-weekday-foreground: var(--skra-sys-color-on-surface-subtle);
564
- --skra-comp-datepicker-day-foreground: var(--skra-sys-color-on-surface);
565
- --skra-comp-datepicker-day-background-hover: var(--skra-sys-color-surface-hover);
566
- --skra-comp-datepicker-day-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
567
- --skra-comp-datepicker-day-background-selected: var(--skra-sys-color-primary-base);
568
- --skra-comp-datepicker-day-foreground-selected: var(--skra-sys-color-primary-contrast);
569
- --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);
570
580
  --skra-comp-dialog-background: var(--skra-sys-color-surface);
571
581
  --skra-comp-dialog-foreground: var(--skra-sys-color-on-surface);
572
582
  --skra-comp-dialog-focus-ring-color: var(--skra-sys-color-focus-ring);
@@ -602,6 +612,7 @@
602
612
  --skra-comp-field-select-option-foreground: var(--skra-sys-color-on-surface);
603
613
  --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
604
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);
605
616
  --skra-comp-kbd-background: var(--skra-sys-color-surface-raised);
606
617
  --skra-comp-kbd-foreground: var(--skra-sys-color-on-surface);
607
618
  --skra-comp-kbd-border-color: var(--skra-sys-color-border-subtle);
@@ -660,6 +671,12 @@
660
671
  --skra-comp-status-dot-foreground: var(--skra-sys-color-neutral-contrast);
661
672
  --skra-comp-status-dot-border-color: var(--skra-sys-color-surface);
662
673
  --skra-comp-status-dot-focus-ring-color: var(--skra-sys-color-focus-ring);
674
+ --skra-comp-surface-background: var(--skra-sys-color-surface-raised);
675
+ --skra-comp-surface-foreground: var(--skra-sys-color-on-surface);
676
+ --skra-comp-surface-border-color: var(--skra-sys-color-border-subtle);
677
+ --skra-comp-surface-focus-ring-color: var(--skra-sys-color-focus-ring);
678
+ --skra-comp-surface-background-selected: var(--skra-sys-color-primary-soft);
679
+ --skra-comp-surface-border-color-selected: var(--skra-sys-color-primary-border);
663
680
  --skra-comp-tabs-foreground: var(--skra-sys-color-on-surface-subtle);
664
681
  --skra-comp-tabs-focus-ring-color: var(--skra-sys-color-focus-ring);
665
682
  --skra-comp-tabs-foreground-selected: var(--skra-sys-color-on-surface-strong);
@@ -698,4 +715,6 @@
698
715
  [data-skra-color-scheme="dark"] {
699
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");
700
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");
701
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
+ }