@teseor/css 1.1.0 → 1.2.0

package/dist/index.css

@@ -9,26 +9,25 @@
 /* 00. Config: Layer definitions + Design tokens */
 /* Fonts (Google Fonts CDN) */
 :root {
-  --ui-hue-primary: 220;
-  --ui-hue-success: 142;
-  --ui-hue-warning: 38;
-  --ui-hue-danger: 0;
-  --ui-color-neutral-50: hsl(var(--ui-hue-primary) 10% 98%);
-  --ui-color-neutral-100: hsl(var(--ui-hue-primary) 10% 96%);
-  --ui-color-neutral-200: hsl(var(--ui-hue-primary) 10% 90%);
-  --ui-color-neutral-300: hsl(var(--ui-hue-primary) 10% 80%);
-  --ui-color-neutral-400: hsl(var(--ui-hue-primary) 10% 60%);
-  --ui-color-neutral-500: hsl(var(--ui-hue-primary) 10% 45%);
-  --ui-color-neutral-600: hsl(var(--ui-hue-primary) 10% 35%);
-  --ui-color-neutral-700: hsl(var(--ui-hue-primary) 10% 25%);
-  --ui-color-neutral-800: hsl(var(--ui-hue-primary) 10% 15%);
-  --ui-color-neutral-900: hsl(var(--ui-hue-primary) 10% 10%);
-  --ui-color-primary-light: hsl(var(--ui-hue-primary) 85% 65%);
-  --ui-color-primary: hsl(var(--ui-hue-primary) 85% 50%);
-  --ui-color-primary-dark: hsl(var(--ui-hue-primary) 85% 40%);
-  --ui-color-success: hsl(var(--ui-hue-success) 70% 45%);
-  --ui-color-warning: hsl(var(--ui-hue-warning) 90% 50%);
-  --ui-color-danger: hsl(var(--ui-hue-danger) 70% 50%);
+  --ui-color-primary: oklch(55% 0.22 250);
+  --ui-color-success: oklch(60% 0.18 145);
+  --ui-color-warning: oklch(75% 0.18 70);
+  --ui-color-danger: oklch(60% 0.22 25);
+  --ui-color-neutral: oklch(50% 0.02 250);
+  --ui-color-primary-light: color-mix(in oklch, var(--ui-color-primary) 50%, white);
+  --ui-color-primary-dark: color-mix(in oklch, var(--ui-color-primary) 75%, black);
+  --ui-color-primary-subtle: color-mix(in oklch, var(--ui-color-primary) 12%, white);
+  --ui-color-primary-hover: color-mix(in oklch, var(--ui-color-primary) 85%, black);
+  --ui-color-neutral-50: color-mix(in oklch, var(--ui-color-neutral) 3%, white);
+  --ui-color-neutral-100: color-mix(in oklch, var(--ui-color-neutral) 6%, white);
+  --ui-color-neutral-200: color-mix(in oklch, var(--ui-color-neutral) 12%, white);
+  --ui-color-neutral-300: color-mix(in oklch, var(--ui-color-neutral) 25%, white);
+  --ui-color-neutral-400: color-mix(in oklch, var(--ui-color-neutral) 50%, white);
+  --ui-color-neutral-500: var(--ui-color-neutral);
+  --ui-color-neutral-600: color-mix(in oklch, var(--ui-color-neutral) 85%, black);
+  --ui-color-neutral-700: color-mix(in oklch, var(--ui-color-neutral) 70%, black);
+  --ui-color-neutral-800: color-mix(in oklch, var(--ui-color-neutral) 50%, black);
+  --ui-color-neutral-900: color-mix(in oklch, var(--ui-color-neutral) 35%, black);
 }
 :root {
   --ui-space-px: calc(var(--ui-unit) * 0.125);
@@ -715,13 +714,13 @@
   .ui-sidebar-nav--collapsed {
     --ui-_width: var(--ui-sidebar-nav-width-collapsed, var(--ui-row-3));
   }
-  .ui-sidebar-nav--collapsed .sidebar-nav__label,
-  .ui-sidebar-nav--collapsed .sidebar-nav__badge,
-  .ui-sidebar-nav--collapsed .sidebar-nav__group-label,
-  .ui-sidebar-nav--collapsed .sidebar-nav__subgroup-label {
+  .ui-sidebar-nav--collapsed .ui-sidebar-nav__label,
+  .ui-sidebar-nav--collapsed .ui-sidebar-nav__badge,
+  .ui-sidebar-nav--collapsed .ui-sidebar-nav__group-label,
+  .ui-sidebar-nav--collapsed .ui-sidebar-nav__subgroup-label {
     display: none;
   }
-  .ui-sidebar-nav--collapsed .sidebar-nav__item {
+  .ui-sidebar-nav--collapsed .ui-sidebar-nav__item {
     justify-content: center;
     padding-inline: var(--ui-space-1);
   }
@@ -780,30 +779,30 @@
     outline: var(--ui-_border-width) solid var(--ui-_border-color);
     outline-offset: calc(var(--ui-_border-width) * -1);
   }
-  .ui-accordion > .disclosure {
+  .ui-accordion > .ui-disclosure {
     --ui-_border-width: 0;
     border: none;
     border-radius: 0;
   }
-  .ui-accordion > .disclosure + .disclosure {
+  .ui-accordion > .ui-disclosure + .ui-disclosure {
     border-block-start: 1px solid var(--ui-_border-color);
   }
-  .ui-accordion > .disclosure:first-child .disclosure__trigger {
+  .ui-accordion > .ui-disclosure:first-child .ui-disclosure__trigger {
     border-start-start-radius: var(--ui-_radius);
     border-start-end-radius: var(--ui-_radius);
   }
-  .ui-accordion > .disclosure:last-child .disclosure__trigger {
+  .ui-accordion > .ui-disclosure:last-child .ui-disclosure__trigger {
     border-end-start-radius: var(--ui-_radius);
     border-end-end-radius: var(--ui-_radius);
   }
-  .ui-accordion > .disclosure:last-child .disclosure__content {
+  .ui-accordion > .ui-disclosure:last-child .ui-disclosure__content {
     border-end-start-radius: var(--ui-_radius);
     border-end-end-radius: var(--ui-_radius);
   }
   .ui-accordion--borderless {
     border: none;
   }
-  .ui-accordion--borderless > .disclosure + .disclosure {
+  .ui-accordion--borderless > .ui-disclosure + .ui-disclosure {
     border-block-start: none;
   }
   .ui-accordion--separated {
@@ -812,44 +811,37 @@
     gap: calc(0.5rem * 1);
     border: none;
   }
-  .ui-accordion--separated > .disclosure {
+  .ui-accordion--separated > .ui-disclosure {
     border: 1px solid var(--ui-_border-color);
     border-radius: var(--ui-_radius);
   }
-  .ui-accordion--separated > .disclosure + .disclosure {
+  .ui-accordion--separated > .ui-disclosure + .ui-disclosure {
     border-block-start: 1px solid var(--ui-_border-color);
   }
 }
 @layer components.tokens {
   .ui-alert {
+    --ui-_accent: var(--ui-alert-accent, var(--ui-color-border, hsl(220, 10%, 90%)));
     --ui-_padding: var(--ui-alert-padding, var(--ui-space-2, 1rem));
     --ui-_border-width: var(--ui-alert-border-width, var(--ui-border-width-sm, 0.0625rem));
     --ui-_gap: var(--ui-alert-gap, var(--ui-space-1, 0.5rem));
     --ui-_radius: var(--ui-alert-radius, var(--ui-radius-md, 0.5rem));
-    --ui-_bg: var(--ui-alert-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
-    --ui-_border-color: var(--ui-alert-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
+    --ui-_bg: color-mix(in oklch, var(--ui-_accent) 8%, white);
+    --ui-_border-color: var(--ui-_accent);
     --ui-_color: var(--ui-alert-color, var(--ui-color-text, hsl(220, 10%, 10%)));
-    --ui-_icon-color: var(--ui-alert-icon-color, currentcolor);
+    --ui-_icon-color: var(--ui-_accent);
   }
   .ui-alert--info {
-    --ui-_bg: var(--ui-alert-info-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
-    --ui-_border-color: var(--ui-alert-info-border, var(--ui-color-primary, hsl(220, 85%, 50%)));
-    --ui-_icon-color: var(--ui-alert-info-icon, var(--ui-color-primary, hsl(220, 85%, 50%)));
+    --ui-_accent: var(--ui-color-primary, oklch(55% 0.22 250deg));
   }
   .ui-alert--success {
-    --ui-_bg: var(--ui-alert-success-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
-    --ui-_border-color: var(--ui-alert-success-border, var(--ui-color-success, hsl(142, 70%, 45%)));
-    --ui-_icon-color: var(--ui-alert-success-icon, var(--ui-color-success, hsl(142, 70%, 45%)));
+    --ui-_accent: var(--ui-color-success, oklch(60% 0.18 145deg));
   }
   .ui-alert--warning {
-    --ui-_bg: var(--ui-alert-warning-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
-    --ui-_border-color: var(--ui-alert-warning-border, var(--ui-color-warning, hsl(38, 90%, 50%)));
-    --ui-_icon-color: var(--ui-alert-warning-icon, var(--ui-color-warning, hsl(38, 90%, 50%)));
+    --ui-_accent: var(--ui-color-warning, oklch(75% 0.18 70deg));
   }
   .ui-alert--danger {
-    --ui-_bg: var(--ui-alert-danger-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
-    --ui-_border-color: var(--ui-alert-danger-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
-    --ui-_icon-color: var(--ui-alert-danger-icon, var(--ui-color-danger, hsl(0, 70%, 50%)));
+    --ui-_accent: var(--ui-color-danger, oklch(60% 0.22 25deg));
   }
 }
 @layer components.styles {
@@ -965,22 +957,23 @@
     flex-direction: row-reverse;
     justify-content: flex-end;
   }
-  .ui-avatar-group > .avatar {
+  .ui-avatar-group > .ui-avatar {
     margin-inline-start: calc(var(--ui-_size) * -0.25);
     border: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-color-bg, hsl(220, 10%, 98%));
   }
-  .ui-avatar-group > .avatar:last-child {
+  .ui-avatar-group > .ui-avatar:last-child {
     margin-inline-start: 0;
   }
 }
 @layer components.tokens {
   .ui-badge {
+    --ui-_accent: var(--ui-badge-accent, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
     --ui-_height: var(--ui-badge-height, calc(var(--ui-row, 1rem) * 1.25));
     --ui-_padding-x: var(--ui-badge-padding-x, var(--ui-space-1, 0.5rem));
     --ui-_font-size: var(--ui-badge-font-size, var(--ui-font-size-xs, 0.75rem));
     --ui-_font-weight: var(--ui-badge-font-weight, var(--ui-weight-medium, 500));
     --ui-_radius: var(--ui-badge-radius, var(--ui-radius-full, 9999px));
-    --ui-_bg: var(--ui-badge-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
+    --ui-_bg: var(--ui-_accent);
     --ui-_text: var(--ui-badge-text, var(--ui-color-text, hsl(220, 10%, 10%)));
   }
   .ui-badge--sm {
@@ -989,20 +982,20 @@
     --ui-_font-size: var(--ui-badge-font-size-sm, calc(var(--ui-font-size-xs, 0.75rem) * 0.85));
   }
   .ui-badge--primary {
-    --ui-_bg: var(--ui-badge-primary-bg, var(--ui-color-primary, hsl(220, 85%, 50%)));
-    --ui-_text: var(--ui-badge-primary-text, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
+    --ui-_accent: var(--ui-color-primary, oklch(55% 0.22 250deg));
+    --ui-_text: var(--ui-color-text-inverse, hsl(220, 10%, 98%));
   }
   .ui-badge--success {
-    --ui-_bg: var(--ui-badge-success-bg, var(--ui-color-success, hsl(142, 70%, 45%)));
-    --ui-_text: var(--ui-badge-success-text, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
+    --ui-_accent: var(--ui-color-success, oklch(60% 0.18 145deg));
+    --ui-_text: var(--ui-color-text-inverse, hsl(220, 10%, 98%));
   }
   .ui-badge--warning {
-    --ui-_bg: var(--ui-badge-warning-bg, var(--ui-color-warning, hsl(38, 90%, 50%)));
-    --ui-_text: var(--ui-badge-warning-text, var(--ui-color-text, hsl(220, 10%, 10%)));
+    --ui-_accent: var(--ui-color-warning, oklch(75% 0.18 70deg));
+    --ui-_text: var(--ui-color-text, hsl(220, 10%, 10%));
   }
   .ui-badge--danger {
-    --ui-_bg: var(--ui-badge-danger-bg, var(--ui-color-danger, hsl(0, 70%, 50%)));
-    --ui-_text: var(--ui-badge-danger-text, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
+    --ui-_accent: var(--ui-color-danger, oklch(60% 0.22 25deg));
+    --ui-_text: var(--ui-color-text-inverse, hsl(220, 10%, 98%));
   }
 }
 @layer components.styles {
@@ -1062,7 +1055,7 @@
     text-decoration: underline;
     color: var(--ui-color-primary);
   }
-  .ui-breadcrumb__item:last-child .breadcrumb__link,
+  .ui-breadcrumb__item:last-child .ui-breadcrumb__link,
   .ui-breadcrumb__current {
     color: var(--ui-_current-color);
     pointer-events: none;
@@ -1076,50 +1069,57 @@
 }
 @layer components.tokens {
   .ui-button {
+    --ui-_accent: var(--ui-button-accent, var(--ui-color-primary, oklch(55% 0.22 250deg)));
     --ui-_height: var(--ui-button-height, var(--ui-row-2, 2rem));
     --ui-_padding-x: var(--ui-button-padding-x, var(--ui-space-2, 1rem));
     --ui-_font-size: var(--ui-button-font-size, var(--ui-font-size-sm, 0.875rem));
     --ui-_font-weight: var(--ui-button-font-weight, var(--ui-weight-medium, 500));
     --ui-_radius: var(--ui-button-radius, var(--ui-radius-md, 0.5rem));
-    --ui-_bg: var(--ui-button-bg, var(--ui-color-primary, hsl(220, 85%, 50%)));
-    --ui-_bg-hover: var(--ui-button-bg-hover, var(--ui-color-primary-dark, hsl(220, 85%, 40%)));
+    --ui-_bg: var(--ui-_accent);
+    --ui-_bg-hover: color-mix(in oklch, var(--ui-_accent) 80%, black);
     --ui-_text: var(--ui-button-text, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
   }
   .ui-button--sm {
+    --ui-ctx-size: var(--ui-size-sm, 0.75rem);
     --ui-_height: var(--ui-button-height-sm, calc(var(--ui-row, 1rem) * 1.5));
     --ui-_font-size: var(--ui-button-font-size-sm, var(--ui-font-size-xs, 0.75rem));
   }
+  .ui-button--md {
+    --ui-ctx-size: var(--ui-size-md, 1rem);
+    --ui-_height: var(--ui-button-height-md, var(--ui-row-2, 2rem));
+    --ui-_font-size: var(--ui-button-font-size-md, var(--ui-font-size-sm, 0.875rem));
+  }
   .ui-button--lg {
+    --ui-ctx-size: var(--ui-size-lg, 1.25rem);
     --ui-_height: var(--ui-button-height-lg, calc(var(--ui-row, 1rem) * 2.5));
     --ui-_padding-x: var(--ui-button-padding-x-lg, var(--ui-space-3, 1.5rem));
     --ui-_font-size: var(--ui-button-font-size-lg, var(--ui-font-size-md, 1rem));
   }
   .ui-button--secondary {
-    --ui-_bg: var(--ui-button-secondary-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
-    --ui-_bg-hover: var(--ui-button-secondary-bg-hover, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
-    --ui-_text: var(--ui-button-secondary-text, var(--ui-color-text, hsl(220, 10%, 10%)));
+    --ui-_bg: var(--ui-color-bg-muted, hsl(220, 10%, 90%));
+    --ui-_bg-hover: var(--ui-color-border-strong, hsl(220, 10%, 80%));
+    --ui-_text: var(--ui-color-text, hsl(220, 10%, 10%));
   }
   .ui-button--ghost {
-    --ui-_bg: var(--ui-button-ghost-bg, transparent);
-    --ui-_bg-hover: var(--ui-button-ghost-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
-    --ui-_text: var(--ui-button-ghost-text, var(--ui-color-primary, hsl(220, 85%, 50%)));
+    --ui-_bg: transparent;
+    --ui-_bg-hover: color-mix(in oklch, var(--ui-_accent) 10%, transparent);
+    --ui-_text: var(--ui-_accent);
   }
   .ui-button--outline {
-    --ui-_bg: var(--ui-button-outline-bg, transparent);
-    --ui-_bg-hover: var(--ui-button-outline-bg-hover, var(--ui-color-primary, hsl(220, 85%, 50%)));
-    --ui-_text: var(--ui-button-outline-text, var(--ui-color-primary, hsl(220, 85%, 50%)));
-    --ui-_text-hover: var(--ui-button-outline-text-hover, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
-    --ui-_border: var(--ui-button-outline-border, var(--ui-border-width-sm, 0.0625rem) solid currentColor);
+    --ui-_bg: transparent;
+    --ui-_bg-hover: var(--ui-_accent);
+    --ui-_text: var(--ui-_accent);
+    --ui-_text-hover: var(--ui-color-text-inverse, hsl(220, 10%, 98%));
+    --ui-_border: var(--ui-border-width-sm, 0.0625rem) solid currentColor;
   }
   .ui-button--danger {
-    --ui-_bg: var(--ui-button-danger-bg, var(--ui-color-danger, hsl(0, 70%, 50%)));
-    --ui-_bg-hover: var(--ui-button-danger-bg-hover, hsl(0, 70%, 40%));
+    --ui-_accent: var(--ui-color-danger, oklch(60% 0.22 25deg));
   }
   .ui-button--link {
     --ui-_bg: transparent;
     --ui-_bg-hover: transparent;
-    --ui-_text: var(--ui-button-link-text, var(--ui-color-primary, hsl(220, 85%, 50%)));
-    --ui-_text-hover: var(--ui-button-link-text-hover, var(--ui-color-primary-dark, hsl(220, 85%, 40%)));
+    --ui-_text: var(--ui-_accent);
+    --ui-_text-hover: color-mix(in oklch, var(--ui-_accent) 70%, black);
     --ui-_height: auto;
     --ui-_padding-x: 0;
     --ui-_radius: 0;
@@ -1167,7 +1167,7 @@
     background: var(--ui-_bg-hover);
   }
   .ui-button:focus-visible, .ui-button--focus {
-    outline: var(--ui-border-width-md, 0.125rem) solid var(--ui-color-focus, hsl(220, 85%, 65%));
+    outline: var(--ui-border-width-md, 0.125rem) solid var(--ui-color-focus, oklch(75% 0.15 250deg));
     outline-offset: var(--ui-border-width-md, 0.125rem);
   }
   .ui-button:active, .ui-button--active {
@@ -1235,48 +1235,48 @@
   .ui-button-group {
     display: inline-flex;
   }
-  .ui-button-group > .button:not(:first-child, :last-child) {
+  .ui-button-group > .ui-button:not(:first-child, :last-child) {
     border-radius: 0;
   }
-  .ui-button-group > .button:first-child:not(:last-child) {
+  .ui-button-group > .ui-button:first-child:not(:last-child) {
     border-start-end-radius: 0;
     border-end-end-radius: 0;
   }
-  .ui-button-group > .button:last-child:not(:first-child) {
+  .ui-button-group > .ui-button:last-child:not(:first-child) {
     border-start-start-radius: 0;
     border-end-start-radius: 0;
   }
-  .ui-button-group > .button + .button {
+  .ui-button-group > .ui-button + .ui-button {
     margin-inline-start: calc(0.5rem / -8);
   }
-  .ui-button-group > .button:focus-visible {
+  .ui-button-group > .ui-button:focus-visible {
     z-index: 1;
   }
   .ui-button-group--vertical {
     flex-direction: column;
   }
-  .ui-button-group--vertical > .button:not(:first-child, :last-child) {
+  .ui-button-group--vertical > .ui-button:not(:first-child, :last-child) {
     border-radius: 0;
   }
-  .ui-button-group--vertical > .button:first-child:not(:last-child) {
+  .ui-button-group--vertical > .ui-button:first-child:not(:last-child) {
     border-end-start-radius: 0;
     border-end-end-radius: 0;
   }
-  .ui-button-group--vertical > .button:last-child:not(:first-child) {
+  .ui-button-group--vertical > .ui-button:last-child:not(:first-child) {
     border-start-start-radius: 0;
     border-start-end-radius: 0;
   }
-  .ui-button-group--vertical > .button + .button {
+  .ui-button-group--vertical > .ui-button + .ui-button {
     margin-block-start: calc(0.5rem / -8);
     margin-inline-start: 0;
   }
-  .ui-button-group--attached > .button {
+  .ui-button-group--attached > .ui-button {
     border-inline-end-width: 0;
   }
-  .ui-button-group--attached > .button:last-child {
+  .ui-button-group--attached > .ui-button:last-child {
     border-inline-end-width: 1px;
   }
-  .ui-button-group--attached > .button + .button {
+  .ui-button-group--attached > .ui-button + .ui-button {
     margin-inline-start: 0;
   }
 }
@@ -1319,17 +1319,17 @@
     --ui-_size: var(--ui-checkbox-size, calc(0.5rem * 2));
     --ui-_radius: var(--ui-checkbox-radius, var(--ui-radius-sm, 0.25rem));
     --ui-_bg: var(--ui-checkbox-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
-    --ui-_bg-checked: var(--ui-checkbox-bg-checked, var(--ui-color-primary, hsl(220, 85%, 50%)));
+    --ui-_bg-checked: var(--ui-checkbox-bg-checked, var(--ui-color-primary, oklch(55% 0.22 250deg)));
     --ui-_border-color: var(--ui-checkbox-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
-    --ui-_border-color-focus: var(--ui-checkbox-border-color-focus, var(--ui-color-primary, hsl(220, 85%, 50%)));
+    --ui-_border-color-focus: var(--ui-checkbox-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));
     --ui-_check-color: var(--ui-checkbox-check-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
   }
   .ui-checkbox--lg {
     --ui-_size: var(--ui-checkbox-size-lg, calc(0.5rem * 3));
   }
   .ui-checkbox--error {
-    --ui-_border-color: var(--ui-checkbox-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
-    --ui-_border-color-focus: var(--ui-checkbox-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
+    --ui-_border-color: var(--ui-checkbox-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
+    --ui-_border-color-focus: var(--ui-checkbox-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
   }
 }
 @layer components.styles {
@@ -1364,7 +1364,7 @@
   .ui-checkbox:focus-visible {
     border-color: var(--ui-_border-color-focus);
     outline: none;
-    box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, hsl(220, 85%, 65%));
+    box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg));
   }
   .ui-checkbox:checked {
     background: var(--ui-_bg-checked);
@@ -1464,27 +1464,27 @@
     line-height: var(--ui-row-1, 1rem);
     color: var(--ui-_value-color);
   }
-  .ui-data-list--horizontal .data-list__item {
+  .ui-data-list--horizontal .ui-data-list__item {
     flex-direction: row;
     align-items: baseline;
     justify-content: space-between;
     gap: calc(0.5rem * 2);
   }
-  .ui-data-list--horizontal .data-list__label {
+  .ui-data-list--horizontal .ui-data-list__label {
     flex-shrink: 0;
   }
-  .ui-data-list--horizontal .data-list__value {
+  .ui-data-list--horizontal .ui-data-list__value {
     text-align: end;
   }
-  .ui-data-list--divided .data-list__item {
-    padding-block-end: var(--ui-_gap);
-    border-block-end: 1px solid var(--ui-color-border, hsl(220, 10%, 90%));
+  .ui-data-list--divided .ui-data-list__item {
+    padding-block-end: calc(var(--ui-_gap) - var(--ui-border-width-sm, 0.0625rem));
+    border-block-end: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-color-border, hsl(220, 10%, 90%));
   }
-  .ui-data-list--divided .data-list__item:last-child {
+  .ui-data-list--divided .ui-data-list__item:last-child {
     padding-block-end: 0;
     border-block-end: none;
   }
-  .ui-data-list--striped .data-list__item:nth-child(odd) {
+  .ui-data-list--striped .ui-data-list__item:nth-child(odd) {
     padding: calc(0.5rem * 1);
     background: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));
     border-radius: var(--ui-radius-sm, 0.25rem);
@@ -1509,7 +1509,7 @@
   }
 }
 @layer components.styles {
-  .ui-dialog .modal__content {
+  .ui-dialog .ui-modal__content {
     padding: 0;
   }
   .ui-dialog__header {
@@ -1545,10 +1545,10 @@
     padding: var(--ui-_footer-padding);
     border-block-start: 1px solid var(--ui-_border-color);
   }
-  .ui-dialog--borderless .dialog__header {
+  .ui-dialog--borderless .ui-dialog__header {
     border-block-end: none;
   }
-  .ui-dialog--borderless .dialog__footer {
+  .ui-dialog--borderless .ui-dialog__footer {
     border-block-start: none;
   }
 }
@@ -1599,13 +1599,13 @@
     flex-shrink: 0;
     transition: transform var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
   }
-  .ui-disclosure[open] .disclosure__icon {
+  .ui-disclosure[open] .ui-disclosure__icon {
     transform: rotate(180deg);
   }
   .ui-disclosure__content {
     padding: 0 var(--ui-_padding-x) var(--ui-_padding-y);
   }
-  .ui-disclosure--animate .disclosure__content {
+  .ui-disclosure--animate .ui-disclosure__content {
     animation: disclosure-open var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
   }
   @keyframes disclosure-open {
@@ -1623,10 +1623,10 @@
     border: none;
     border-radius: 0;
   }
-  .ui-disclosure--flush .disclosure__trigger {
+  .ui-disclosure--flush .ui-disclosure__trigger {
     padding-inline: 0;
   }
-  .ui-disclosure--flush .disclosure__content {
+  .ui-disclosure--flush .ui-disclosure__content {
     padding-inline: 0;
   }
 }
@@ -1695,8 +1695,8 @@
   .ui-divider--dashed::after {
     background: repeating-linear-gradient(90deg, var(--ui-_color) 0, var(--ui-_color) calc(0.5rem / 2), transparent calc(0.5rem / 2), transparent 0.5rem);
   }
-  .ui-divider--vertical.divider--dashed::before,
-  .ui-divider--vertical.divider--dashed::after {
+  .ui-divider--vertical.ui-divider--dashed::before,
+  .ui-divider--vertical.ui-divider--dashed::after {
     background: repeating-linear-gradient(180deg, var(--ui-_color) 0, var(--ui-_color) calc(0.5rem / 2), transparent calc(0.5rem / 2), transparent 0.5rem);
   }
 }
@@ -1906,12 +1906,12 @@
     flex-wrap: wrap;
     align-items: flex-start;
   }
-  .ui-field--horizontal > .field__label {
+  .ui-field--horizontal > .ui-field__label {
     flex: 0 0 auto;
     min-inline-size: calc(0.5rem * 15);
     padding-block-start: calc(0.5rem * 1);
   }
-  .ui-field--horizontal > .field__control {
+  .ui-field--horizontal > .ui-field__control {
     flex: 1 1 0;
     min-inline-size: calc(0.5rem * 20);
   }
@@ -2000,23 +2000,23 @@
 }
 @layer components.tokens {
   .ui-icon {
-    --ui-_size: var(--ui-icon-size, 1em);
+    --ui-_size: var(--ui-icon-size, var(--ui-ctx-size, 1rem));
     --ui-_stroke: var(--ui-icon-stroke, 2);
   }
   .ui-icon--xs {
-    --ui-_size: var(--ui-icon-size-xs, calc(0.5rem * 2));
+    --ui-_size: var(--ui-icon-size-xs, var(--ui-size-xs, 0.5rem));
   }
   .ui-icon--sm {
-    --ui-_size: var(--ui-icon-size-sm, calc(0.5rem * 3));
+    --ui-_size: var(--ui-icon-size-sm, var(--ui-size-sm, 0.75rem));
   }
   .ui-icon--md {
-    --ui-_size: var(--ui-icon-size-md, calc(0.5rem * 4));
+    --ui-_size: var(--ui-icon-size-md, var(--ui-size-md, 1rem));
   }
   .ui-icon--lg {
-    --ui-_size: var(--ui-icon-size-lg, calc(0.5rem * 5));
+    --ui-_size: var(--ui-icon-size-lg, var(--ui-size-lg, 1.25rem));
   }
   .ui-icon--xl {
-    --ui-_size: var(--ui-icon-size-xl, calc(0.5rem * 6));
+    --ui-_size: var(--ui-icon-size-xl, var(--ui-size-xl, 1.5rem));
   }
   .ui-icon--stroke-thin {
     --ui-_stroke: var(--ui-icon-stroke-thin, 1);
@@ -2060,7 +2060,7 @@
     --ui-_radius: var(--ui-input-radius, var(--ui-radius-md, 0.5rem));
     --ui-_bg: var(--ui-input-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
     --ui-_border-color: var(--ui-input-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
-    --ui-_border-color-focus: var(--ui-input-border-color-focus, var(--ui-color-primary, hsl(220, 85%, 50%)));
+    --ui-_border-color-focus: var(--ui-input-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));
     --ui-_text: var(--ui-input-text, var(--ui-color-text, hsl(220, 10%, 10%)));
     --ui-_placeholder: var(--ui-input-placeholder, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
   }
@@ -2082,12 +2082,12 @@
     --ui-_border-color: transparent;
   }
   .ui-input--error {
-    --ui-_border-color: var(--ui-input-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
-    --ui-_border-color-focus: var(--ui-input-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
+    --ui-_border-color: var(--ui-input-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
+    --ui-_border-color-focus: var(--ui-input-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
   }
   .ui-input--success {
-    --ui-_border-color: var(--ui-input-success-border, var(--ui-color-success, hsl(142, 70%, 45%)));
-    --ui-_border-color-focus: var(--ui-input-success-border, var(--ui-color-success, hsl(142, 70%, 45%)));
+    --ui-_border-color: var(--ui-input-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));
+    --ui-_border-color-focus: var(--ui-input-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));
   }
 }
 @layer components.styles {
@@ -2114,7 +2114,7 @@
   .ui-input:focus, .ui-input--focus {
     border-color: var(--ui-_border-color-focus);
     outline: none;
-    box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, hsl(220, 85%, 65%));
+    box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg));
   }
   .ui-input:disabled, .ui-input--disabled {
     opacity: 0.5;
@@ -2131,13 +2131,13 @@
     align-items: stretch;
     position: relative;
   }
-  .ui-input-group .input {
+  .ui-input-group .ui-input {
     flex: 1;
   }
-  .ui-input-group--has-prefix .input {
+  .ui-input-group--has-prefix .ui-input {
     padding-inline-start: calc(var(--ui-_height) + var(--ui-space-half, 0.25rem));
   }
-  .ui-input-group--has-suffix .input {
+  .ui-input-group--has-suffix .ui-input {
     padding-inline-end: calc(var(--ui-_height) + var(--ui-space-half, 0.25rem));
   }
   .ui-input-group__addon {
@@ -2165,7 +2165,7 @@
   .ui-label {
     --ui-_font-size: var(--ui-label-font-size, var(--ui-font-size-sm, 0.875rem));
     --ui-_color: var(--ui-label-color, var(--ui-color-text, hsl(220, 10%, 10%)));
-    --ui-_required-color: var(--ui-label-required-color, var(--ui-color-danger, hsl(0, 70%, 50%)));
+    --ui-_required-color: var(--ui-label-required-color, var(--ui-color-danger, oklch(60% 0.22 25deg)));
   }
   .ui-label--lg {
     --ui-_font-size: var(--ui-label-font-size-lg, var(--ui-font-size-md, 1rem));
@@ -2305,10 +2305,10 @@
     outline: none;
   }
   .ui-menu__item--danger {
-    color: var(--ui-color-danger, hsl(0, 70%, 50%));
+    color: var(--ui-color-danger, oklch(60% 0.22 25deg));
   }
   .ui-menu__item--danger:hover, .ui-menu__item--danger:focus-visible {
-    color: var(--ui-color-danger, hsl(0, 70%, 50%));
+    color: var(--ui-color-danger, oklch(60% 0.22 25deg));
   }
   .ui-menu__item--disabled,
   .ui-menu__item[aria-disabled=true] {
@@ -2401,17 +2401,17 @@
     flex: 1 1 auto;
     overflow-y: auto;
   }
-  .ui-modal--entering .modal__content,
-  .ui-modal--visible .modal__content {
+  .ui-modal--entering .ui-modal__content,
+  .ui-modal--visible .ui-modal__content {
     opacity: 1;
     transform: scale(1);
   }
-  .ui-modal--exiting .modal__content,
-  .ui-modal--hidden .modal__content {
+  .ui-modal--exiting .ui-modal__content,
+  .ui-modal--hidden .ui-modal__content {
     opacity: 0;
     transform: scale(0.95);
   }
-  .ui-modal--animate .modal__content {
+  .ui-modal--animate .ui-modal__content {
     transition: opacity var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease), transform var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
   }
   .ui-modal--hidden {
@@ -2419,6 +2419,100 @@
     pointer-events: none;
   }
 }
+@layer components.tokens {
+  .ui-nav {
+    --ui-_gap: var(--ui-nav-gap, var(--ui-space-1, 0.5rem));
+    --ui-_item-height: var(--ui-nav-item-height, var(--ui-row-2, 2rem));
+    --ui-_item-padding-x: var(--ui-nav-item-padding-x, var(--ui-space-2, 1rem));
+    --ui-_item-font-size: var(--ui-nav-item-font-size, var(--ui-font-size-sm, 0.875rem));
+    --ui-_item-font-weight: var(--ui-nav-item-font-weight, var(--ui-weight-medium, 500));
+    --ui-_item-color: var(--ui-nav-item-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
+    --ui-_item-color-hover: var(--ui-nav-item-color-hover, var(--ui-color-text, hsl(220, 10%, 10%)));
+    --ui-_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-primary, oklch(55% 0.22 250deg)));
+    --ui-_item-radius: var(--ui-nav-item-radius, var(--ui-radius-sm, 0.25rem));
+    --ui-_border-color: var(--ui-nav-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
+  }
+  .ui-nav--pills {
+    --ui-_item-bg-hover: var(--ui-nav-item-bg-hover, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
+    --ui-_item-bg-active: var(--ui-nav-item-bg-active, var(--ui-color-primary, oklch(55% 0.22 250deg)));
+    --ui-_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
+  }
+}
+@layer components.styles {
+  .ui-nav__list {
+    display: flex;
+    align-items: stretch;
+    gap: var(--ui-_gap);
+    box-sizing: border-box;
+    block-size: var(--ui-_item-height);
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    box-shadow: inset 0 calc(var(--ui-border-width-sm, 0.0625rem) * -1) 0 var(--ui-_border-color);
+  }
+  .ui-nav__item {
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    block-size: var(--ui-_item-height);
+    padding-inline: var(--ui-_item-padding-x);
+    font-family: var(--ui-font-sans, Noto Sans, system-ui, -apple-system, sans-serif);
+    font-size: var(--ui-_item-font-size);
+    font-weight: var(--ui-_item-font-weight);
+    line-height: 1;
+    text-decoration: none;
+    white-space: nowrap;
+    color: var(--ui-_item-color);
+    background: transparent;
+    border: none;
+    box-shadow: inset 0 calc(var(--ui-border-width-md, 0.125rem) * -1) 0 transparent;
+    cursor: pointer;
+    transition: color var(--ui-duration-base) var(--ui-ease-default), background var(--ui-duration-base) var(--ui-ease-default), box-shadow var(--ui-duration-base) var(--ui-ease-default);
+  }
+  .ui-nav__item:hover {
+    color: var(--ui-_item-color-hover);
+  }
+  .ui-nav__item--active {
+    color: var(--ui-_item-color-active);
+    box-shadow: inset 0 calc(var(--ui-border-width-md, 0.125rem) * -1) 0 var(--ui-_item-color-active);
+  }
+  .ui-nav__item--disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+  .ui-nav--pills .ui-nav__list {
+    box-shadow: none;
+  }
+  .ui-nav--pills .ui-nav__item {
+    border-radius: var(--ui-_item-radius);
+    box-shadow: none;
+  }
+  .ui-nav--pills .ui-nav__item:hover {
+    background: var(--ui-_item-bg-hover);
+  }
+  .ui-nav--pills .ui-nav__item--active {
+    color: var(--ui-_item-color-active);
+    background: var(--ui-_item-bg-active);
+  }
+  .ui-nav--vertical .ui-nav__list {
+    flex-direction: column;
+    align-items: stretch;
+    block-size: auto;
+    box-shadow: inset calc(var(--ui-border-width-sm, 0.0625rem) * -1) 0 0 var(--ui-_border-color);
+  }
+  .ui-nav--vertical .ui-nav__item {
+    box-shadow: inset calc(var(--ui-border-width-md, 0.125rem) * -1) 0 0 transparent;
+  }
+  .ui-nav--vertical .ui-nav__item--active {
+    box-shadow: inset calc(var(--ui-border-width-md, 0.125rem) * -1) 0 0 var(--ui-_item-color-active);
+  }
+  .ui-nav--vertical.ui-nav--pills .ui-nav__list {
+    box-shadow: none;
+  }
+  .ui-nav--vertical.ui-nav--pills .ui-nav__item {
+    box-shadow: none;
+  }
+}
 @layer components.tokens {
   .ui-overlay {
     --ui-_bg: var(--ui-overlay-bg, rgb(0 0 0 / 0.5));
@@ -2645,7 +2739,7 @@
     border-radius: var(--ui-_radius);
     transition: inline-size var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
   }
-  .ui-progress--indeterminate .progress__bar {
+  .ui-progress--indeterminate .ui-progress__bar {
     inline-size: 30%;
     animation: progress-indeterminate 1.5s infinite ease-in-out;
   }
@@ -2657,11 +2751,11 @@
       transform: translateX(400%);
     }
   }
-  .ui-progress--striped .progress__bar {
+  .ui-progress--striped .ui-progress__bar {
     background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
     background-size: 0.5rem 0.5rem;
   }
-  .ui-progress--animated .progress__bar {
+  .ui-progress--animated .ui-progress__bar {
     animation: progress-stripes 1s linear infinite;
   }
   @keyframes progress-stripes {
@@ -2686,17 +2780,17 @@
   .ui-radio {
     --ui-_size: var(--ui-radio-size, calc(0.5rem * 2));
     --ui-_bg: var(--ui-radio-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
-    --ui-_bg-checked: var(--ui-radio-bg-checked, var(--ui-color-primary, hsl(220, 85%, 50%)));
+    --ui-_bg-checked: var(--ui-radio-bg-checked, var(--ui-color-primary, oklch(55% 0.22 250deg)));
     --ui-_border-color: var(--ui-radio-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
-    --ui-_border-color-focus: var(--ui-radio-border-color-focus, var(--ui-color-primary, hsl(220, 85%, 50%)));
+    --ui-_border-color-focus: var(--ui-radio-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));
     --ui-_dot-color: var(--ui-radio-dot-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
   }
   .ui-radio--lg {
     --ui-_size: var(--ui-radio-size-lg, calc(0.5rem * 3));
   }
   .ui-radio--error {
-    --ui-_border-color: var(--ui-radio-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
-    --ui-_border-color-focus: var(--ui-radio-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
+    --ui-_border-color: var(--ui-radio-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
+    --ui-_border-color-focus: var(--ui-radio-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
   }
 }
 @layer components.styles {
@@ -2732,7 +2826,7 @@
   .ui-radio:focus-visible {
     border-color: var(--ui-_border-color-focus);
     outline: none;
-    box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, hsl(220, 85%, 65%));
+    box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg));
   }
   .ui-radio:checked {
     background: var(--ui-_bg-checked);
@@ -2755,7 +2849,7 @@
     --ui-_radius: var(--ui-select-radius, var(--ui-radius-md, 0.5rem));
     --ui-_bg: var(--ui-select-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
     --ui-_border-color: var(--ui-select-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
-    --ui-_border-color-focus: var(--ui-select-border-color-focus, var(--ui-color-primary, hsl(220, 85%, 50%)));
+    --ui-_border-color-focus: var(--ui-select-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));
     --ui-_text: var(--ui-select-text, var(--ui-color-text, hsl(220, 10%, 10%)));
     --ui-_icon-color: var(--ui-select-icon-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
   }
@@ -2777,12 +2871,12 @@
     --ui-_border-color: transparent;
   }
   .ui-select--error {
-    --ui-_border-color: var(--ui-select-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
-    --ui-_border-color-focus: var(--ui-select-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
+    --ui-_border-color: var(--ui-select-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
+    --ui-_border-color-focus: var(--ui-select-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
   }
   .ui-select--success {
-    --ui-_border-color: var(--ui-select-success-border, var(--ui-color-success, hsl(142, 70%, 45%)));
-    --ui-_border-color-focus: var(--ui-select-success-border, var(--ui-color-success, hsl(142, 70%, 45%)));
+    --ui-_border-color: var(--ui-select-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));
+    --ui-_border-color-focus: var(--ui-select-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));
   }
 }
 @layer components.styles {
@@ -2812,7 +2906,7 @@
   .ui-select:focus, .ui-select--focus {
     border-color: var(--ui-_border-color-focus);
     outline: none;
-    box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, hsl(220, 85%, 65%));
+    box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg));
   }
   .ui-select:disabled, .ui-select--disabled {
     opacity: 0.5;
@@ -2964,10 +3058,10 @@
     background: var(--ui-_color);
     border-radius: 50%;
   }
-  .ui-status--pulse .status__dot {
+  .ui-status--pulse .ui-status__dot {
     position: relative;
   }
-  .ui-status--pulse .status__dot::before {
+  .ui-status--pulse .ui-status__dot::before {
     content: "";
     position: absolute;
     inset: 0;
@@ -3076,9 +3170,9 @@
     color: var(--ui-color-text, hsl(220, 10%, 10%));
   }
   .ui-tabs__tab--active {
-    color: var(--ui-color-primary, hsl(220, 85%, 50%));
+    color: var(--ui-color-primary, oklch(55% 0.22 250deg));
     background: var(--ui-_tab-bg-active);
-    box-shadow: inset 0 calc(var(--ui-border-width-md, 0.125rem) * -1) 0 var(--ui-color-primary, hsl(220, 85%, 50%));
+    box-shadow: inset 0 calc(var(--ui-border-width-md, 0.125rem) * -1) 0 var(--ui-color-primary, oklch(55% 0.22 250deg));
   }
   .ui-tabs__panel {
     display: none;
@@ -3105,19 +3199,19 @@
     --ui-_font-size: var(--ui-tag-font-size-sm, var(--ui-font-size-xs, 0.75rem));
   }
   .ui-tag--primary {
-    --ui-_bg: var(--ui-tag-primary-bg, var(--ui-color-primary, hsl(220, 85%, 50%)));
+    --ui-_bg: var(--ui-tag-primary-bg, var(--ui-color-primary, oklch(55% 0.22 250deg)));
     --ui-_color: var(--ui-tag-primary-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
   }
   .ui-tag--success {
-    --ui-_bg: var(--ui-tag-success-bg, var(--ui-color-success, hsl(142, 70%, 45%)));
+    --ui-_bg: var(--ui-tag-success-bg, var(--ui-color-success, oklch(60% 0.18 145deg)));
     --ui-_color: var(--ui-tag-success-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
   }
   .ui-tag--warning {
-    --ui-_bg: var(--ui-tag-warning-bg, var(--ui-color-warning, hsl(38, 90%, 50%)));
+    --ui-_bg: var(--ui-tag-warning-bg, var(--ui-color-warning, oklch(75% 0.18 70deg)));
     --ui-_color: var(--ui-tag-warning-color, var(--ui-color-text, hsl(220, 10%, 10%)));
   }
   .ui-tag--danger {
-    --ui-_bg: var(--ui-tag-danger-bg, var(--ui-color-danger, hsl(0, 70%, 50%)));
+    --ui-_bg: var(--ui-tag-danger-bg, var(--ui-color-danger, oklch(60% 0.22 25deg)));
     --ui-_color: var(--ui-tag-danger-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
   }
 }
@@ -3171,7 +3265,7 @@
     --ui-_radius: var(--ui-textarea-radius, var(--ui-radius-md, 0.5rem));
     --ui-_bg: var(--ui-textarea-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
     --ui-_border-color: var(--ui-textarea-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
-    --ui-_border-color-focus: var(--ui-textarea-border-color-focus, var(--ui-color-primary, hsl(220, 85%, 50%)));
+    --ui-_border-color-focus: var(--ui-textarea-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));
     --ui-_text: var(--ui-textarea-text, var(--ui-color-text, hsl(220, 10%, 10%)));
     --ui-_placeholder: var(--ui-textarea-placeholder, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
   }
@@ -3194,12 +3288,12 @@
     --ui-_border-color: transparent;
   }
   .ui-textarea--error {
-    --ui-_border-color: var(--ui-textarea-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
-    --ui-_border-color-focus: var(--ui-textarea-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
+    --ui-_border-color: var(--ui-textarea-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
+    --ui-_border-color-focus: var(--ui-textarea-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
   }
   .ui-textarea--success {
-    --ui-_border-color: var(--ui-textarea-success-border, var(--ui-color-success, hsl(142, 70%, 45%)));
-    --ui-_border-color-focus: var(--ui-textarea-success-border, var(--ui-color-success, hsl(142, 70%, 45%)));
+    --ui-_border-color: var(--ui-textarea-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));
+    --ui-_border-color-focus: var(--ui-textarea-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));
   }
 }
 @layer components.styles {
@@ -3230,7 +3324,7 @@
   }
   .ui-textarea:focus, .ui-textarea--focus {
     outline-color: var(--ui-_border-color-focus);
-    box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, hsl(220, 85%, 65%));
+    box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg));
   }
   .ui-textarea:disabled, .ui-textarea--disabled {
     opacity: 0.5;
@@ -3448,22 +3542,22 @@
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
     transition: transform var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
   }
-  .ui-toggle__input:checked ~ .toggle__track {
+  .ui-toggle__input:checked ~ .ui-toggle__track {
     background: var(--ui-_track-bg-checked);
   }
-  .ui-toggle__input:checked ~ .toggle__thumb {
+  .ui-toggle__input:checked ~ .ui-toggle__thumb {
     transform: translateX(calc(var(--ui-_track-width) - var(--ui-_thumb-size) - var(--ui-_thumb-offset) * 2));
   }
-  .ui-toggle__input:focus-visible ~ .toggle__track {
+  .ui-toggle__input:focus-visible ~ .ui-toggle__track {
     outline: 2px solid var(--ui-color-focus, var(--ui-color-primary));
     outline-offset: calc(0.5rem / 4);
   }
-  .ui-toggle__input:disabled ~ .toggle__track,
-  .ui-toggle__input:disabled ~ .toggle__thumb {
+  .ui-toggle__input:disabled ~ .ui-toggle__track,
+  .ui-toggle__input:disabled ~ .ui-toggle__thumb {
     opacity: 0.5;
     cursor: not-allowed;
   }
-  .ui-toggle:has(.toggle__input:disabled) {
+  .ui-toggle:has(.ui-toggle__input:disabled) {
     cursor: not-allowed;
   }
 }