@skra/tokens 0.4.0 → 0.6.0

package/brutal/_theme.scoped.scss

@@ -21,14 +21,14 @@
   --skra-sys-color-primary-contrast-active: oklch(18.0% 0 0);
   --skra-sys-color-primary-border-hover: oklch(12.0% 0 0);
   --skra-sys-color-primary-border-active: oklch(18.0% 0 0);
-  --skra-sys-color-primary-soft-hover: oklch(84.0% 0.06 100);
-  --skra-sys-color-primary-soft-active: oklch(78.0% 0.06 100);
+  --skra-sys-color-primary-soft-hover: oklch(98.0% 0.06 100);
+  --skra-sys-color-primary-soft-active: oklch(98.0% 0.06 100);
   --skra-sys-color-primary-strong-hover: oklch(62.0% 0.11 98);
   --skra-sys-color-primary-strong-active: oklch(68.0% 0.11 98);
   --skra-sys-color-primary-ink-hover: oklch(62.0% 0.11 98);
   --skra-sys-color-primary-ink-active: oklch(68.0% 0.11 98);
-  --skra-sys-color-secondary-base-hover: oklch(57.0% 0.04 250);
-  --skra-sys-color-secondary-base-active: oklch(63.0% 0.04 250);
+  --skra-sys-color-secondary-base-hover: oklch(33.0% 0.04 250);
+  --skra-sys-color-secondary-base-active: oklch(27.0% 0.04 250);
   --skra-sys-color-secondary-contrast-hover: oklch(88.0% 0 0);
   --skra-sys-color-secondary-contrast-active: oklch(82.0% 0 0);
   --skra-sys-color-secondary-border-hover: oklch(12.0% 0 0);
@@ -39,8 +39,8 @@
   --skra-sys-color-secondary-strong-active: oklch(48.0% 0.04 250);
   --skra-sys-color-secondary-ink-hover: oklch(57.0% 0.04 250);
   --skra-sys-color-secondary-ink-active: oklch(63.0% 0.04 250);
-  --skra-sys-color-info-base-hover: oklch(62.0% 0.12 220);
-  --skra-sys-color-info-base-active: oklch(68.0% 0.12 220);
+  --skra-sys-color-info-base-hover: oklch(38.0% 0.12 220);
+  --skra-sys-color-info-base-active: oklch(32.0% 0.12 220);
   --skra-sys-color-info-contrast-hover: oklch(88.0% 0 0);
   --skra-sys-color-info-contrast-active: oklch(82.0% 0 0);
   --skra-sys-color-info-border-hover: oklch(12.0% 0 0);
@@ -51,8 +51,8 @@
   --skra-sys-color-info-strong-active: oklch(53.0% 0.12 220);
   --skra-sys-color-info-ink-hover: oklch(62.0% 0.12 220);
   --skra-sys-color-info-ink-active: oklch(68.0% 0.12 220);
-  --skra-sys-color-success-base-hover: oklch(60.0% 0.15 145);
-  --skra-sys-color-success-base-active: oklch(66.0% 0.15 145);
+  --skra-sys-color-success-base-hover: oklch(36.0% 0.15 145);
+  --skra-sys-color-success-base-active: oklch(30.0% 0.15 145);
   --skra-sys-color-success-contrast-hover: oklch(88.0% 0 0);
   --skra-sys-color-success-contrast-active: oklch(82.0% 0 0);
   --skra-sys-color-success-border-hover: oklch(12.0% 0 0);
@@ -63,8 +63,8 @@
   --skra-sys-color-success-strong-active: oklch(50.0% 0.13 145);
   --skra-sys-color-success-ink-hover: oklch(60.0% 0.15 145);
   --skra-sys-color-success-ink-active: oklch(66.0% 0.15 145);
-  --skra-sys-color-warning-base-hover: oklch(58.0% 0.15 80);
-  --skra-sys-color-warning-base-active: oklch(52.0% 0.15 80);
+  --skra-sys-color-warning-base-hover: oklch(82.0% 0.15 80);
+  --skra-sys-color-warning-base-active: oklch(88.0% 0.15 80);
   --skra-sys-color-warning-contrast-hover: oklch(30.0% 0.05 80);
   --skra-sys-color-warning-contrast-active: oklch(36.0% 0.05 80);
   --skra-sys-color-warning-border-hover: oklch(12.0% 0 0);
@@ -75,8 +75,8 @@
   --skra-sys-color-warning-strong-active: oklch(56.0% 0.12 80);
   --skra-sys-color-warning-ink-hover: oklch(50.0% 0.12 80);
   --skra-sys-color-warning-ink-active: oklch(56.0% 0.12 80);
-  --skra-sys-color-danger-base-hover: oklch(60.0% 0.2 25);
-  --skra-sys-color-danger-base-active: oklch(66.0% 0.2 25);
+  --skra-sys-color-danger-base-hover: oklch(36.0% 0.2 25);
+  --skra-sys-color-danger-base-active: oklch(30.0% 0.2 25);
   --skra-sys-color-danger-contrast-hover: oklch(88.0% 0 0);
   --skra-sys-color-danger-contrast-active: oklch(82.0% 0 0);
   --skra-sys-color-danger-border-hover: oklch(12.0% 0 0);
@@ -174,8 +174,8 @@
   --skra-comp-accordion-item-background-expanded: rgba(0, 0, 0, 0);
   --skra-comp-alert-background-hover: oklch(83.0% 0 0);
   --skra-comp-alert-background-active: oklch(77.0% 0 0);
-  --skra-comp-alert-foreground-hover: oklch(37.0% 0 0);
-  --skra-comp-alert-foreground-active: oklch(43.0% 0 0);
+  --skra-comp-alert-foreground-hover: oklch(12.0% 0 0);
+  --skra-comp-alert-foreground-active: oklch(18.0% 0 0);
   --skra-comp-alert-border-color-hover: oklch(12.0% 0 0);
   --skra-comp-alert-border-color-active: oklch(18.0% 0 0);
   --skra-comp-alert-focus-ring-color-hover: oklch(57.0% 0.18 295);
@@ -207,8 +207,8 @@
   --skra-comp-avatar-icon-size: 1em;
   --skra-comp-badge-background-hover: oklch(83.0% 0 0);
   --skra-comp-badge-background-active: oklch(77.0% 0 0);
-  --skra-comp-badge-foreground-hover: oklch(37.0% 0 0);
-  --skra-comp-badge-foreground-active: oklch(43.0% 0 0);
+  --skra-comp-badge-foreground-hover: oklch(12.0% 0 0);
+  --skra-comp-badge-foreground-active: oklch(18.0% 0 0);
   --skra-comp-badge-border-color-hover: oklch(12.0% 0 0);
   --skra-comp-badge-border-color-active: oklch(18.0% 0 0);
   --skra-comp-badge-focus-ring-color-hover: oklch(57.0% 0.18 295);
@@ -237,8 +237,8 @@
   --skra-comp-button-icon-size: 1em;
   --skra-comp-chip-background-hover: oklch(83.0% 0 0);
   --skra-comp-chip-background-active: oklch(77.0% 0 0);
-  --skra-comp-chip-foreground-hover: oklch(37.0% 0 0);
-  --skra-comp-chip-foreground-active: oklch(43.0% 0 0);
+  --skra-comp-chip-foreground-hover: oklch(12.0% 0 0);
+  --skra-comp-chip-foreground-active: oklch(18.0% 0 0);
   --skra-comp-chip-border-color-hover: oklch(12.0% 0 0);
   --skra-comp-chip-border-color-active: oklch(18.0% 0 0);
   --skra-comp-chip-focus-ring-color-hover: oklch(57.0% 0.18 295);
@@ -302,13 +302,13 @@
   --skra-comp-datepicker-panel-border-color-active: oklch(43.0% 0 0);
   --skra-comp-datepicker-header-foreground-hover: oklch(12.0% 0 0);
   --skra-comp-datepicker-header-foreground-active: oklch(18.0% 0 0);
-  --skra-comp-datepicker-nav-color-active: oklch(53.0% 0 0);
+  --skra-comp-datepicker-nav-color-active: oklch(17.0% 0 0);
   --skra-comp-datepicker-weekday-foreground-hover: oklch(47.0% 0 0);
   --skra-comp-datepicker-weekday-foreground-active: oklch(53.0% 0 0);
-  --skra-comp-datepicker-day-foreground-hover: oklch(12.0% 0 0);
-  --skra-comp-datepicker-day-foreground-active: oklch(18.0% 0 0);
-  --skra-comp-datepicker-day-today-indicator-color-hover: oklch(62.0% 0.11 98);
-  --skra-comp-datepicker-day-today-indicator-color-active: oklch(68.0% 0.11 98);
+  --skra-comp-datepicker-cell-foreground-hover: oklch(12.0% 0 0);
+  --skra-comp-datepicker-cell-foreground-active: oklch(18.0% 0 0);
+  --skra-comp-datepicker-cell-today-indicator-color-hover: oklch(62.0% 0.11 98);
+  --skra-comp-datepicker-cell-today-indicator-color-active: oklch(68.0% 0.11 98);
   --skra-comp-datepicker-border-width: 0.125rem;
   --skra-comp-datepicker-border-style: solid;
   --skra-comp-datepicker-shadow: none;
@@ -318,7 +318,8 @@
   --skra-comp-datepicker-header-typography-role: body-medium;
   --skra-comp-datepicker-nav-icon-size: 1.25em;
   --skra-comp-datepicker-weekday-typography-role: body-small;
-  --skra-comp-datepicker-day-typography-role: body-medium;
+  --skra-comp-datepicker-cell-typography-role: body-medium;
+  --skra-comp-datepicker-month-cell-min-inline-size: 5.5rem;
   --skra-comp-dialog-background-hover: oklch(85.0% 0.015 95);
   --skra-comp-dialog-background-active: oklch(79.0% 0.015 95);
   --skra-comp-dialog-foreground-hover: oklch(12.0% 0 0);
@@ -363,6 +364,8 @@
   --skra-comp-field-checkbox-checked-background-readonly-active: oklch(43.0% 0 0);
   --skra-comp-field-checkbox-check-color-hover: oklch(12.0% 0 0);
   --skra-comp-field-checkbox-check-color-active: oklch(18.0% 0 0);
+  --skra-comp-field-checkbox-check-color-readonly-hover: oklch(88.0% 0 0);
+  --skra-comp-field-checkbox-check-color-readonly-active: oklch(82.0% 0 0);
   --skra-comp-field-checkbox-border-width: 0.125rem;
   --skra-comp-field-radio-border-color-hover: oklch(12.0% 0 0);
   --skra-comp-field-radio-border-color-active: oklch(18.0% 0 0);
@@ -374,17 +377,25 @@
   --skra-comp-field-radio-checked-background-readonly-active: oklch(43.0% 0 0);
   --skra-comp-field-radio-dot-color-hover: oklch(12.0% 0 0);
   --skra-comp-field-radio-dot-color-active: oklch(18.0% 0 0);
+  --skra-comp-field-radio-dot-color-readonly-hover: oklch(88.0% 0 0);
+  --skra-comp-field-radio-dot-color-readonly-active: oklch(82.0% 0 0);
   --skra-comp-field-radio-border-width: 0.125rem;
   --skra-comp-field-switch-border-color-hover: oklch(12.0% 0 0);
   --skra-comp-field-switch-border-color-active: oklch(18.0% 0 0);
   --skra-comp-field-switch-background-hover: oklch(37.0% 0 0);
   --skra-comp-field-switch-background-active: oklch(43.0% 0 0);
+  --skra-comp-field-switch-background-readonly-hover: oklch(37.0% 0 0);
+  --skra-comp-field-switch-background-readonly-active: oklch(43.0% 0 0);
   --skra-comp-field-switch-checked-background-hover: oklch(73.0% 0.17 98);
   --skra-comp-field-switch-checked-background-active: oklch(67.0% 0.17 98);
   --skra-comp-field-switch-checked-background-readonly-hover: oklch(37.0% 0 0);
   --skra-comp-field-switch-checked-background-readonly-active: oklch(43.0% 0 0);
   --skra-comp-field-switch-thumb-color-hover: oklch(85.0% 0.015 95);
   --skra-comp-field-switch-thumb-color-active: oklch(79.0% 0.015 95);
+  --skra-comp-field-switch-thumb-color-readonly-hover: oklch(88.0% 0 0);
+  --skra-comp-field-switch-thumb-color-readonly-active: oklch(82.0% 0 0);
+  --skra-comp-field-switch-thumb-color-checked-readonly-hover: oklch(88.0% 0 0);
+  --skra-comp-field-switch-thumb-color-checked-readonly-active: oklch(82.0% 0 0);
   --skra-comp-field-switch-track-inline-size: 2.25rem;
   --skra-comp-field-switch-track-block-size: 1.25rem;
   --skra-comp-field-switch-border-width: 0.125rem;
@@ -399,6 +410,8 @@
   --skra-comp-field-select-optgroup-foreground-hover: oklch(12.0% 0 0);
   --skra-comp-field-select-optgroup-foreground-active: oklch(18.0% 0 0);
   --skra-comp-field-select-arrow-icon-size: 1em;
+  --skra-comp-field-temporal-indicator-color-hover: oklch(12.0% 0 0);
+  --skra-comp-field-temporal-indicator-color-active: oklch(18.0% 0 0);
   --skra-comp-field-border-width: 0.125rem;
   --skra-comp-field-border-style: solid;
   --skra-comp-field-shadow: none;
@@ -514,10 +527,10 @@
   --skra-comp-skeleton-padding-block: 0rem;
   --skra-comp-skeleton-padding-inline: 0rem;
   --skra-comp-skeleton-focus-ring-width: 0.1875rem;
-  --skra-comp-star-rating-star-color-empty-hover: oklch(12.0% 0 0);
-  --skra-comp-star-rating-star-color-empty-active: oklch(18.0% 0 0);
-  --skra-comp-star-rating-star-color-filled-hover: oklch(73.0% 0.17 98);
-  --skra-comp-star-rating-star-color-filled-active: oklch(67.0% 0.17 98);
+  --skra-comp-star-rating-star-color-empty-hover: oklch(37.0% 0 0);
+  --skra-comp-star-rating-star-color-empty-active: oklch(43.0% 0 0);
+  --skra-comp-star-rating-star-color-filled-hover: oklch(62.0% 0.11 98);
+  --skra-comp-star-rating-star-color-filled-active: oklch(68.0% 0.11 98);
   --skra-comp-star-rating-focus-ring-color-hover: oklch(57.0% 0.18 295);
   --skra-comp-star-rating-focus-ring-color-active: oklch(63.0% 0.18 295);
   --skra-comp-star-rating-gap: 0.25rem;
@@ -570,8 +583,8 @@
   --skra-comp-tabs-tablist-border-width: 0.1875rem;
   --skra-comp-toast-background-hover: oklch(83.0% 0 0);
   --skra-comp-toast-background-active: oklch(77.0% 0 0);
-  --skra-comp-toast-foreground-hover: oklch(37.0% 0 0);
-  --skra-comp-toast-foreground-active: oklch(43.0% 0 0);
+  --skra-comp-toast-foreground-hover: oklch(12.0% 0 0);
+  --skra-comp-toast-foreground-active: oklch(18.0% 0 0);
   --skra-comp-toast-border-color-hover: oklch(12.0% 0 0);
   --skra-comp-toast-border-color-active: oklch(18.0% 0 0);
   --skra-comp-toast-focus-ring-color-hover: oklch(57.0% 0.18 295);
@@ -818,12 +831,14 @@
   --skra-comp-datepicker-min-block-size: var(--skra-sys-size-interactive-md);
   --skra-comp-datepicker-panel-radius: var(--skra-sys-radius-md);
   --skra-comp-datepicker-panel-shadow: var(--skra-sys-shadow-lg);
-  --skra-comp-datepicker-day-size: var(--skra-sys-size-interactive-md);
-  --skra-comp-datepicker-day-radius: var(--skra-sys-radius-sm);
+  --skra-comp-datepicker-cell-block-size: var(--skra-sys-size-interactive-md);
+  --skra-comp-datepicker-cell-radius: var(--skra-sys-radius-sm);
   --skra-comp-dialog-radius: var(--skra-sys-radius-lg);
   --skra-comp-dialog-shadow: var(--skra-sys-shadow-xl);
   --skra-comp-field-checkbox-border-radius: var(--skra-sys-radius-sm);
   --skra-comp-field-switch-track-radius: var(--skra-sys-radius-sm);
+  --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
+  --skra-comp-field-temporal-indicator-icon-size: var(--skra-sys-icon-size-sm);
   --skra-comp-field-radius: var(--skra-sys-radius-sm);
   --skra-comp-kbd-radius: var(--skra-sys-radius-none);
   --skra-comp-kbd-shadow: var(--skra-sys-shadow-sm);
@@ -883,7 +898,7 @@
   --skra-comp-accordion-panel-padding-block: var(--skra-sys-spacing-3);
   --skra-comp-accordion-panel-padding-inline: var(--skra-sys-spacing-4);
   --skra-comp-alert-background: var(--skra-sys-color-neutral-soft);
-  --skra-comp-alert-foreground: var(--skra-sys-color-neutral-ink);
+  --skra-comp-alert-foreground: var(--skra-sys-color-neutral-strong);
   --skra-comp-alert-border-color: var(--skra-sys-color-neutral-border);
   --skra-comp-alert-padding-block: var(--skra-sys-spacing-3);
   --skra-comp-alert-padding-inline: var(--skra-sys-spacing-4);
@@ -902,7 +917,7 @@
   --skra-comp-avatar-size-md: var(--skra-sys-size-avatar-md);
   --skra-comp-avatar-size-lg: var(--skra-sys-size-avatar-lg);
   --skra-comp-badge-background: var(--skra-sys-color-neutral-soft);
-  --skra-comp-badge-foreground: var(--skra-sys-color-neutral-ink);
+  --skra-comp-badge-foreground: var(--skra-sys-color-neutral-strong);
   --skra-comp-badge-border-color: var(--skra-sys-color-neutral-border);
   --skra-comp-badge-padding-block: var(--skra-sys-spacing-1);
   --skra-comp-badge-padding-inline: var(--skra-sys-spacing-2);
@@ -930,7 +945,7 @@
   --skra-comp-button-icon-gap: var(--skra-sys-spacing-2);
   --skra-comp-button-loading-indicator-color: var(--skra-sys-color-on-surface);
   --skra-comp-chip-background: var(--skra-sys-color-neutral-soft);
-  --skra-comp-chip-foreground: var(--skra-sys-color-neutral-ink);
+  --skra-comp-chip-foreground: var(--skra-sys-color-neutral-strong);
   --skra-comp-chip-border-color: var(--skra-sys-color-neutral-border);
   --skra-comp-chip-padding-block: var(--skra-sys-spacing-1);
   --skra-comp-chip-padding-inline: var(--skra-sys-spacing-2);
@@ -989,12 +1004,12 @@
   --skra-comp-datepicker-nav-color: var(--skra-sys-color-on-surface-subtle);
   --skra-comp-datepicker-nav-color-hover: var(--skra-sys-color-on-surface);
   --skra-comp-datepicker-weekday-foreground: var(--skra-sys-color-on-surface-subtle);
-  --skra-comp-datepicker-day-foreground: var(--skra-sys-color-on-surface);
-  --skra-comp-datepicker-day-background-hover: var(--skra-sys-color-surface-hover);
-  --skra-comp-datepicker-day-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
-  --skra-comp-datepicker-day-background-selected: var(--skra-sys-color-primary-base);
-  --skra-comp-datepicker-day-foreground-selected: var(--skra-sys-color-primary-contrast);
-  --skra-comp-datepicker-day-today-indicator-color: var(--skra-sys-color-primary-ink);
+  --skra-comp-datepicker-cell-foreground: var(--skra-sys-color-on-surface);
+  --skra-comp-datepicker-cell-background-hover: var(--skra-sys-color-surface-hover);
+  --skra-comp-datepicker-cell-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
+  --skra-comp-datepicker-cell-background-selected: var(--skra-sys-color-primary-base);
+  --skra-comp-datepicker-cell-foreground-selected: var(--skra-sys-color-primary-contrast);
+  --skra-comp-datepicker-cell-today-indicator-color: var(--skra-sys-color-primary-ink);
   --skra-comp-dialog-background: var(--skra-sys-color-surface);
   --skra-comp-dialog-foreground: var(--skra-sys-color-on-surface);
   --skra-comp-dialog-border-color: var(--skra-sys-color-border);
@@ -1013,6 +1028,7 @@
   --skra-comp-field-checkbox-checked-background: var(--skra-sys-color-primary-base);
   --skra-comp-field-checkbox-checked-background-readonly: var(--skra-sys-color-neutral-base);
   --skra-comp-field-checkbox-check-color: var(--skra-sys-color-primary-contrast);
+  --skra-comp-field-checkbox-check-color-readonly: var(--skra-sys-color-neutral-contrast);
   --skra-comp-field-checkbox-gap: var(--skra-sys-spacing-2);
   --skra-comp-field-checkbox-touch-target: var(--skra-sys-spacing-6);
   --skra-comp-field-radio-size: var(--skra-sys-spacing-4);
@@ -1021,15 +1037,19 @@
   --skra-comp-field-radio-checked-background: var(--skra-sys-color-primary-base);
   --skra-comp-field-radio-checked-background-readonly: var(--skra-sys-color-neutral-base);
   --skra-comp-field-radio-dot-color: var(--skra-sys-color-primary-contrast);
+  --skra-comp-field-radio-dot-color-readonly: var(--skra-sys-color-neutral-contrast);
   --skra-comp-field-radio-dot-size: var(--skra-sys-spacing-2);
   --skra-comp-field-radio-gap: var(--skra-sys-spacing-2);
   --skra-comp-field-radio-touch-target: var(--skra-sys-spacing-6);
   --skra-comp-field-switch-border-color: var(--skra-sys-color-border);
   --skra-comp-field-switch-background: var(--skra-sys-color-border-subtle);
+  --skra-comp-field-switch-background-readonly: var(--skra-sys-color-neutral-base);
   --skra-comp-field-switch-checked-background: var(--skra-sys-color-primary-base);
   --skra-comp-field-switch-checked-background-readonly: var(--skra-sys-color-neutral-base);
   --skra-comp-field-switch-thumb-color: var(--skra-sys-color-surface);
+  --skra-comp-field-switch-thumb-color-readonly: var(--skra-sys-color-neutral-contrast);
   --skra-comp-field-switch-thumb-color-checked: var(--skra-sys-color-primary-contrast);
+  --skra-comp-field-switch-thumb-color-checked-readonly: var(--skra-sys-color-neutral-contrast);
   --skra-comp-field-switch-gap: var(--skra-sys-spacing-2);
   --skra-comp-field-switch-touch-target: var(--skra-sys-spacing-6);
   --skra-comp-field-group-gap: var(--skra-sys-spacing-3);
@@ -1039,6 +1059,8 @@
   --skra-comp-field-select-option-foreground: var(--skra-sys-color-on-surface);
   --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
   --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
+  --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
+  --skra-comp-field-temporal-indicator-color: var(--skra-sys-color-on-surface);
   --skra-comp-field-background: var(--skra-sys-color-surface);
   --skra-comp-field-foreground: var(--skra-sys-color-on-surface);
   --skra-comp-field-border-color: var(--skra-sys-color-border);
@@ -1147,8 +1169,8 @@
   --skra-comp-skeleton-motion-duration: var(--skra-sys-motion-duration-fast);
   --skra-comp-skeleton-motion-easing: var(--skra-sys-motion-easing-standard);
   --skra-comp-skeleton-focus-ring-color: var(--skra-sys-color-focus-ring);
-  --skra-comp-star-rating-star-color-empty: var(--skra-sys-color-border);
-  --skra-comp-star-rating-star-color-filled: var(--skra-sys-color-primary-base);
+  --skra-comp-star-rating-star-color-empty: var(--skra-sys-color-border-subtle);
+  --skra-comp-star-rating-star-color-filled: var(--skra-sys-color-primary-ink);
   --skra-comp-star-rating-focus-ring-color: var(--skra-sys-color-focus-ring);
   --skra-comp-star-rating-motion-duration: var(--skra-sys-motion-duration-fast);
   --skra-comp-star-rating-motion-easing: var(--skra-sys-motion-easing-standard);
@@ -1190,7 +1212,7 @@
   --skra-comp-tabs-panel-padding-block: var(--skra-sys-spacing-4);
   --skra-comp-tabs-panel-padding-inline: var(--skra-sys-spacing-1);
   --skra-comp-toast-background: var(--skra-sys-color-neutral-soft);
-  --skra-comp-toast-foreground: var(--skra-sys-color-neutral-ink);
+  --skra-comp-toast-foreground: var(--skra-sys-color-neutral-strong);
   --skra-comp-toast-border-color: var(--skra-sys-color-neutral-border);
   --skra-comp-toast-padding-block: var(--skra-sys-spacing-3);
   --skra-comp-toast-padding-inline: var(--skra-sys-spacing-4);
@@ -1313,5 +1335,8 @@
 /* O-24 — build-baked form-control glyphs (token-resolved colour per scheme) — form-glyph-synth.mjs */
 [data-skra-skin="brutal"] {
   --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");
+  --skra-comp-field-checkbox-check-glyph-readonly: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='oklch%28100%25%200%200%29' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 19 7'/%3E%3C/svg%3E");
   --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");
+  --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");
+  --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");
 }

package/brutal/_theme.scss

@@ -21,14 +21,14 @@
   --skra-sys-color-primary-contrast-active: oklch(18.0% 0 0);
   --skra-sys-color-primary-border-hover: oklch(12.0% 0 0);
   --skra-sys-color-primary-border-active: oklch(18.0% 0 0);
-  --skra-sys-color-primary-soft-hover: oklch(84.0% 0.06 100);
-  --skra-sys-color-primary-soft-active: oklch(78.0% 0.06 100);
+  --skra-sys-color-primary-soft-hover: oklch(98.0% 0.06 100);
+  --skra-sys-color-primary-soft-active: oklch(98.0% 0.06 100);
   --skra-sys-color-primary-strong-hover: oklch(62.0% 0.11 98);
   --skra-sys-color-primary-strong-active: oklch(68.0% 0.11 98);
   --skra-sys-color-primary-ink-hover: oklch(62.0% 0.11 98);
   --skra-sys-color-primary-ink-active: oklch(68.0% 0.11 98);
-  --skra-sys-color-secondary-base-hover: oklch(57.0% 0.04 250);
-  --skra-sys-color-secondary-base-active: oklch(63.0% 0.04 250);
+  --skra-sys-color-secondary-base-hover: oklch(33.0% 0.04 250);
+  --skra-sys-color-secondary-base-active: oklch(27.0% 0.04 250);
   --skra-sys-color-secondary-contrast-hover: oklch(88.0% 0 0);
   --skra-sys-color-secondary-contrast-active: oklch(82.0% 0 0);
   --skra-sys-color-secondary-border-hover: oklch(12.0% 0 0);
@@ -39,8 +39,8 @@
   --skra-sys-color-secondary-strong-active: oklch(48.0% 0.04 250);
   --skra-sys-color-secondary-ink-hover: oklch(57.0% 0.04 250);
   --skra-sys-color-secondary-ink-active: oklch(63.0% 0.04 250);
-  --skra-sys-color-info-base-hover: oklch(62.0% 0.12 220);
-  --skra-sys-color-info-base-active: oklch(68.0% 0.12 220);
+  --skra-sys-color-info-base-hover: oklch(38.0% 0.12 220);
+  --skra-sys-color-info-base-active: oklch(32.0% 0.12 220);
   --skra-sys-color-info-contrast-hover: oklch(88.0% 0 0);
   --skra-sys-color-info-contrast-active: oklch(82.0% 0 0);
   --skra-sys-color-info-border-hover: oklch(12.0% 0 0);
@@ -51,8 +51,8 @@
   --skra-sys-color-info-strong-active: oklch(53.0% 0.12 220);
   --skra-sys-color-info-ink-hover: oklch(62.0% 0.12 220);
   --skra-sys-color-info-ink-active: oklch(68.0% 0.12 220);
-  --skra-sys-color-success-base-hover: oklch(60.0% 0.15 145);
-  --skra-sys-color-success-base-active: oklch(66.0% 0.15 145);
+  --skra-sys-color-success-base-hover: oklch(36.0% 0.15 145);
+  --skra-sys-color-success-base-active: oklch(30.0% 0.15 145);
   --skra-sys-color-success-contrast-hover: oklch(88.0% 0 0);
   --skra-sys-color-success-contrast-active: oklch(82.0% 0 0);
   --skra-sys-color-success-border-hover: oklch(12.0% 0 0);
@@ -63,8 +63,8 @@
   --skra-sys-color-success-strong-active: oklch(50.0% 0.13 145);
   --skra-sys-color-success-ink-hover: oklch(60.0% 0.15 145);
   --skra-sys-color-success-ink-active: oklch(66.0% 0.15 145);
-  --skra-sys-color-warning-base-hover: oklch(58.0% 0.15 80);
-  --skra-sys-color-warning-base-active: oklch(52.0% 0.15 80);
+  --skra-sys-color-warning-base-hover: oklch(82.0% 0.15 80);
+  --skra-sys-color-warning-base-active: oklch(88.0% 0.15 80);
   --skra-sys-color-warning-contrast-hover: oklch(30.0% 0.05 80);
   --skra-sys-color-warning-contrast-active: oklch(36.0% 0.05 80);
   --skra-sys-color-warning-border-hover: oklch(12.0% 0 0);
@@ -75,8 +75,8 @@
   --skra-sys-color-warning-strong-active: oklch(56.0% 0.12 80);
   --skra-sys-color-warning-ink-hover: oklch(50.0% 0.12 80);
   --skra-sys-color-warning-ink-active: oklch(56.0% 0.12 80);
-  --skra-sys-color-danger-base-hover: oklch(60.0% 0.2 25);
-  --skra-sys-color-danger-base-active: oklch(66.0% 0.2 25);
+  --skra-sys-color-danger-base-hover: oklch(36.0% 0.2 25);
+  --skra-sys-color-danger-base-active: oklch(30.0% 0.2 25);
   --skra-sys-color-danger-contrast-hover: oklch(88.0% 0 0);
   --skra-sys-color-danger-contrast-active: oklch(82.0% 0 0);
   --skra-sys-color-danger-border-hover: oklch(12.0% 0 0);
@@ -156,6 +156,7 @@
   --skra-ref-color-neutral-800: oklch(25% 0 0);
   --skra-ref-color-neutral-1000: oklch(0% 0 0);
   --skra-ref-color-primary-50: oklch(95% 0.04 250);
+  --skra-ref-color-primary-300: oklch(74% 0.13 250);
   --skra-ref-color-primary-400: oklch(65% 0.15 250);
   --skra-ref-color-primary-500: oklch(60% 0.15 250);
   --skra-ref-color-primary-600: oklch(52% 0.15 250);
@@ -186,6 +187,7 @@
   --skra-ref-color-danger-500: oklch(55% 0.2 25);
   --skra-ref-color-danger-600: oklch(48% 0.2 25);
   --skra-ref-color-danger-700: oklch(32% 0.16 25);
+  --skra-ref-color-violet-300: oklch(72% 0.16 295);
   --skra-ref-color-violet-500: oklch(45% 0.18 295);
   --skra-ref-color-cobalt-50: oklch(95% 0.03 262);
   --skra-ref-color-cobalt-500: oklch(56% 0.19 262);
@@ -246,6 +248,7 @@
   --skra-ref-color-sky-50: oklch(96% 0.025 235);
   --skra-ref-color-sky-300: oklch(84% 0.075 235);
   --skra-ref-color-sky-500: oklch(70% 0.1 235);
+  --skra-ref-color-sky-600: oklch(63% 0.1 235);
   --skra-ref-color-sky-700: oklch(45% 0.11 235);
   --skra-ref-color-sky-900: oklch(30% 0.08 235);
   --skra-ref-color-lilac-50: oklch(96% 0.022 300);

package/brutal/skin.config.json

@@ -1,40 +1,40 @@
-{
-  "name": "brutal",
-  "displayName": "Skra Brutal",
-  "version": "0.1.0",
-  "publishable": true,
-  "defaultDensity": "compact",
-  "defaultColorScheme": "light",
-  "darkSchemeStrategy": "auto-oklch-with-overrides",
-  "runtimeScoped": true,
-  "visualProfile": {
-    "globalProfile": "intensive",
-    "interactionStrength": "intensive"
-  },
-  "fonts": [
-    {
-      "family": "body",
-      "name": "Space Grotesk",
-      "stack": "'Space Grotesk', system-ui, sans-serif",
-      "weights": [400, 500, 600, 700],
-      "requiresLoading": true,
-      "source": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400..700&display=swap"
-    },
-    {
-      "family": "display",
-      "name": "Space Grotesk",
-      "stack": "'Space Grotesk', system-ui, sans-serif",
-      "weights": [600, 700],
-      "requiresLoading": true,
-      "source": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400..700&display=swap"
-    },
-    {
-      "family": "code",
-      "name": "system",
-      "stack": "ui-monospace, 'Cascadia Code', 'Fira Code', monospace",
-      "weights": [400],
-      "requiresLoading": false
-    }
-  ],
-  "extends": null
-}
+{
+  "name": "brutal",
+  "displayName": "Skra Brutal",
+  "version": "0.1.0",
+  "publishable": true,
+  "defaultDensity": "compact",
+  "defaultColorScheme": "light",
+  "darkSchemeStrategy": "auto-oklch-with-overrides",
+  "runtimeScoped": true,
+  "visualProfile": {
+    "globalProfile": "intensive",
+    "interactionStrength": "intensive"
+  },
+  "fonts": [
+    {
+      "family": "body",
+      "name": "Space Grotesk",
+      "stack": "'Space Grotesk', system-ui, sans-serif",
+      "weights": [400, 500, 600, 700],
+      "requiresLoading": true,
+      "source": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400..700&display=swap"
+    },
+    {
+      "family": "display",
+      "name": "Space Grotesk",
+      "stack": "'Space Grotesk', system-ui, sans-serif",
+      "weights": [600, 700],
+      "requiresLoading": true,
+      "source": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400..700&display=swap"
+    },
+    {
+      "family": "code",
+      "name": "system",
+      "stack": "ui-monospace, 'Cascadia Code', 'Fira Code', monospace",
+      "weights": [400],
+      "requiresLoading": false
+    }
+  ],
+  "extends": null
+}

package/manifests/datepicker.json

@@ -111,8 +111,8 @@
       "overridable": ["overlay"]
     },
     {
-      "token": "--skra-comp-datepicker-day-foreground",
-      "label": "DatePicker day — text colour",
+      "token": "--skra-comp-datepicker-cell-foreground",
+      "label": "DatePicker cell — text colour",
       "group": "Surface",
       "type": "color",
       "states": ["default"],
@@ -120,8 +120,8 @@
       "overridable": ["overlay", "subtree", "instance"]
     },
     {
-      "token": "--skra-comp-datepicker-day-background-hover",
-      "label": "DatePicker day — highlight background on :hover / focus",
+      "token": "--skra-comp-datepicker-cell-background-hover",
+      "label": "DatePicker cell — highlight background on :hover / focus",
       "group": "State",
       "type": "color",
       "states": ["hover"],
@@ -129,8 +129,8 @@
       "overridable": ["overlay", "subtree"]
     },
     {
-      "token": "--skra-comp-datepicker-day-background-selected",
-      "label": "DatePicker day — background of the selected date",
+      "token": "--skra-comp-datepicker-cell-background-selected",
+      "label": "DatePicker cell — background of the selected day / month cell",
       "group": "State",
       "type": "color",
       "states": ["selected"],
@@ -138,8 +138,8 @@
       "overridable": ["overlay", "subtree"]
     },
     {
-      "token": "--skra-comp-datepicker-day-foreground-selected",
-      "label": "DatePicker day — text colour of the selected date",
+      "token": "--skra-comp-datepicker-cell-foreground-selected",
+      "label": "DatePicker cell — text colour of the selected day / month cell",
       "group": "State",
       "type": "color",
       "states": ["selected"],
@@ -147,13 +147,22 @@
       "overridable": ["overlay", "subtree"]
     },
     {
-      "token": "--skra-comp-datepicker-day-today-indicator-color",
-      "label": "DatePicker day — today marker colour (aria-current)",
+      "token": "--skra-comp-datepicker-cell-today-indicator-color",
+      "label": "DatePicker cell — today marker colour (aria-current)",
       "group": "State",
       "type": "color",
       "states": ["default"],
       "constraint": { "oklch": true },
       "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-datepicker-month-cell-min-inline-size",
+      "label": "DatePicker — month cell minimum width (precision=\"month\")",
+      "group": "Surface",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 3, "max": 12 },
+      "overridable": ["overlay", "subtree"]
     }
   ]
 }