@womp/kookie-ui 0.20.0 → 0.22.0

package/tokens/base.css

@@ -57,14 +57,11 @@
     }
   }
 }
-:where(.radix-themes) {
-  --color-background: white;
+:where(.kui-theme) {
+  --color-page: white;
   --color-overlay: var(--black-a6);
-  --color-panel-solid: white;
-  --color-surface-solid: white;
-  --color-dialog-solid: white;
-  --color-page: var(--color-background);
-  --color-text: var(--gray-12);
+  --color-surface: white;
+  --color-text: var(--neutral-12);
   --neutral-1: var(--gray-1);
   --neutral-2: var(--gray-2);
   --neutral-3: var(--gray-3);
@@ -77,46 +74,60 @@
   --neutral-10: var(--gray-10);
   --neutral-11: var(--gray-11);
   --neutral-12: var(--gray-12);
+  --neutral-a1: var(--gray-a1);
+  --neutral-a2: var(--gray-a2);
+  --neutral-a3: var(--gray-a3);
+  --neutral-a4: var(--gray-a4);
+  --neutral-a5: var(--gray-a5);
+  --neutral-a6: var(--gray-a6);
+  --neutral-a7: var(--gray-a7);
+  --neutral-a8: var(--gray-a8);
+  --neutral-a9: var(--gray-a9);
+  --neutral-a10: var(--gray-a10);
+  --neutral-a11: var(--gray-a11);
+  --neutral-a12: var(--gray-a12);
+  --neutral-contrast: var(--gray-contrast);
+  --neutral-surface: var(--gray-surface);
+  --neutral-indicator: var(--gray-indicator);
+  --neutral-track: var(--gray-track);
   --solid-chroma-hover-filter: none;
   --solid-chroma-active-filter: brightness(0.9) contrast(1.03);
   --solid-chroma-open-filter: brightness(0.96) contrast(1.02);
   --solid-gray-hover-filter: contrast(0.88) saturate(1.1) brightness(1.1);
   --solid-gray-active-filter: brightness(0.92);
   --solid-gray-open-filter: brightness(0.96);
-  --shadow-1: 0 0 0 0.25px var(--gray-a6), inset 0 1px 1px 0 var(--black-a2);
-  --shadow-2: 0 0 0 0.25px var(--gray-a3), 0 1px 3px 0 var(--black-a2), 0 1px 2px -1px var(--black-a2);
-  --shadow-3: 0 0 0 0.25px var(--gray-a6), 0 4px 6px -1px var(--black-a2), 0 2px 4px -2px var(--black-a2);
-  --shadow-4: 0 0 0 0.5px var(--gray-a6), 0 10px 15px -3px var(--black-a3), 0 4px 6px -4px var(--black-a3);
-  --shadow-5: 0 0 0 0.5px var(--gray-a6), 0 20px 25px -5px var(--black-a3), 0 8px 10px -6px var(--black-a3);
-  --shadow-6: 0 0 0 0.5px var(--gray-a6), 0 25px 50px -12px var(--black-a5);
+  --shadow-1: 0 0 0 0.25px var(--neutral-a6), inset 0 1px 1px 0 var(--black-a2);
+  --shadow-2: 0 0 0 0.25px var(--neutral-a3), 0 1px 3px 0 var(--black-a2), 0 1px 2px -1px var(--black-a2);
+  --shadow-3: 0 0 0 0.25px var(--neutral-a6), 0 4px 6px -1px var(--black-a2), 0 2px 4px -2px var(--black-a2);
+  --shadow-4: 0 0 0 0.5px var(--neutral-a6), 0 10px 15px -3px var(--black-a3), 0 4px 6px -4px var(--black-a3);
+  --shadow-5: 0 0 0 0.5px var(--neutral-a6), 0 20px 25px -5px var(--black-a3), 0 8px 10px -6px var(--black-a3);
+  --shadow-6: 0 0 0 0.5px var(--neutral-a6), 0 25px 50px -12px var(--black-a5);
 }
 :is(.dark, .dark-theme),
-:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
-  --color-background: var(--gray-1);
+:is(.dark, .dark-theme) :where(.kui-theme:not(.light, .light-theme)) {
+  --color-page: var(--neutral-1, var(--gray-1));
   --color-overlay: var(--black-a8);
-  --color-panel-solid: var(--gray-2);
-  --color-surface-solid: var(--gray-2);
-  --color-dialog-solid: var(--gray-2);
+  --color-surface: var(--neutral-2, var(--gray-2));
   --solid-chroma-hover-filter: none;
   --solid-chroma-active-filter: brightness(0.88) contrast(1.03);
   --solid-chroma-open-filter: brightness(0.95) contrast(1.02);
   --solid-gray-hover-filter: contrast(0.88) saturate(1.3) brightness(1.18);
   --solid-gray-active-filter: brightness(0.9);
   --solid-gray-open-filter: brightness(0.95);
-  --shadow-1: inset 0 0 0 0.5px var(--gray-a6), inset 0 1px 1px 0 var(--black-a3);
-  --shadow-2: 0 0 0 0.5px var(--gray-a6), 0 1px 3px 0 var(--black-a3), 0 1px 2px -1px var(--black-a3);
-  --shadow-3: 0 0 0 0.5px var(--gray-a6), 0 4px 6px -1px var(--black-a3), 0 2px 4px -2px var(--black-a3);
-  --shadow-4: 0 0 0 0.5px var(--gray-a6), 0 10px 15px -3px var(--black-a3), 0 4px 6px -4px var(--black-a3);
-  --shadow-5: 0 0 0 0.5px var(--gray-a6), 0 20px 25px -5px var(--black-a3), 0 8px 10px -6px var(--black-a3);
-  --shadow-6: 0 0 0 0.5px var(--gray-a6), 0 25px 50px -12px var(--black-a5);
-}
-.radix-themes:where(.light,.light-theme),:root:where(:has([data-is-root-theme='true']:is(.radix-themes:where(.light,.light-theme)))) {
+  --shadow-1: inset 0 0 0 0.5px var(--neutral-a6), inset 0 1px 1px 0 var(--black-a3);
+  --shadow-2: 0 0 0 0.5px var(--neutral-a6), 0 1px 3px 0 var(--black-a3), 0 1px 2px -1px var(--black-a3);
+  --shadow-3: 0 0 0 0.5px var(--neutral-a6), 0 4px 6px -1px var(--black-a3), 0 2px 4px -2px var(--black-a3);
+  --shadow-4: 0 0 0 0.5px var(--neutral-a6), 0 10px 15px -3px var(--black-a3), 0 4px 6px -4px var(--black-a3);
+  --shadow-5: 0 0 0 0.5px var(--neutral-a6), 0 20px 25px -5px var(--black-a3), 0 8px 10px -6px var(--black-a3);
+  --shadow-6: 0 0 0 0.5px var(--neutral-a6), 0 25px 50px -12px var(--black-a5);
+}
+.kui-theme:where(.light,.light-theme),:root:where(:has([data-is-root-theme='true']:is(.kui-theme:where(.light,.light-theme)))) {
   color-scheme: light;
 }
-.radix-themes:where(.dark,.dark-theme),:root:where(:has([data-is-root-theme='true']:is(.radix-themes:where(.dark,.dark-theme)))) {
+.kui-theme:where(.dark,.dark-theme),:root:where(:has([data-is-root-theme='true']:is(.kui-theme:where(.dark,.dark-theme)))) {
   color-scheme: dark;
 }
-.radix-themes,
+.kui-theme,
 [data-accent-color]:where(:not([data-accent-color=''], [data-accent-color='gray'])) {
   --focus-1: var(--accent-1);
   --focus-2: var(--accent-2);
@@ -163,207 +174,14 @@
   --accent-solid-active-filter: var(--solid-chroma-active-filter);
   --accent-solid-open-filter: var(--solid-chroma-open-filter);
 }
-.radix-themes ::-moz-selection {
+.kui-theme ::-moz-selection {
   background-color: var(--focus-a5);
 }
-.radix-themes ::selection {
+.kui-theme ::selection {
   background-color: var(--focus-a5);
 }
-.radix-themes:where([data-has-background='true']) {
-  background-color: var(--color-background);
-}
-.radix-themes {
-  --color-panel: var(--color-panel-solid);
-  --color-surface: var(--color-surface-solid);
-  --color-dialog: var(--color-dialog-solid);
-  --gray-ink: var(--gray-12);
-  --gray-ink-muted: var(--gray-a11);
-  --gray-ink-faint: var(--gray-a10);
-  --cursor-button: default;
-  --cursor-checkbox: default;
-  --cursor-disabled: not-allowed;
-  --cursor-link: pointer;
-  --cursor-menu-item: pointer;
-  --cursor-radio: default;
-  --cursor-slider-thumb: default;
-  --cursor-slider-thumb-active: default;
-  --cursor-switch: default;
-  --scale: 1;
-  --space-1: calc(2px * var(--scale));
-  --space-2: calc(4px * var(--scale));
-  --space-3: calc(8px * var(--scale));
-  --space-4: calc(12px * var(--scale));
-  --space-5: calc(16px * var(--scale));
-  --space-6: calc(24px * var(--scale));
-  --space-7: calc(32px * var(--scale));
-  --space-8: calc(40px * var(--scale));
-  --space-9: calc(48px * var(--scale));
-  --space-10: calc(64px * var(--scale));
-  --space-11: calc(96px * var(--scale));
-  --space-12: calc(128px * var(--scale));
-  --layout-space-1: var(--space-1);
-  --layout-space-2: var(--space-2);
-  --layout-space-3: var(--space-3);
-  --layout-space-4: var(--space-4);
-  --layout-space-5: var(--space-5);
-  --layout-space-6: var(--space-6);
-  --layout-space-7: var(--space-7);
-  --layout-space-8: var(--space-8);
-  --layout-space-9: var(--space-9);
-  --layout-space-10: var(--space-10);
-  --layout-space-11: var(--space-11);
-  --layout-space-12: var(--space-12);
-  --surface-p-1: var(--layout-space-5);
-  --surface-p-2: var(--layout-space-6);
-  --surface-p-3: var(--layout-space-7);
-  --surface-p-4: var(--layout-space-8);
-  --panel-p-1: var(--layout-space-3);
-  --panel-p-2: var(--layout-space-4);
-  --panel-p-3: var(--layout-space-5);
-  --panel-p-4: var(--layout-space-6);
-  --control-height-1: calc(28px * var(--scale));
-  --control-height-2: calc(32px * var(--scale));
-  --control-height-3: calc(40px * var(--scale));
-  --control-height-4: calc(48px * var(--scale));
-  --control-px-1: calc(8px * var(--scale));
-  --control-px-2: calc(10px * var(--scale));
-  --control-px-3: calc(13px * var(--scale));
-  --control-px-4: calc(16px * var(--scale));
-  --control-px-pill-1: calc(12px * var(--scale));
-  --control-px-pill-2: calc(14px * var(--scale));
-  --control-px-pill-3: calc(17px * var(--scale));
-  --control-px-pill-4: calc(20px * var(--scale));
-  --control-gap-1: var(--space-2);
-  --control-gap-2: var(--space-3);
-  --control-gap-3: var(--space-3);
-  --control-gap-4: var(--space-4);
-  --icon-size-1: calc(16px * var(--scale));
-  --icon-size-2: calc(16px * var(--scale));
-  --icon-size-3: calc(20px * var(--scale));
-  --icon-size-4: calc(24px * var(--scale));
-  --row-inset-1: calc(4px * var(--scale));
-  --row-inset-2: calc(5px * var(--scale));
-  --row-inset-3: calc(5px * var(--scale));
-  --row-inset-4: calc(6px * var(--scale));
-  --slot-inset-1: calc(3px * var(--scale));
-  --slot-inset-2: calc(3px * var(--scale));
-  --slot-inset-3: calc(4px * var(--scale));
-  --slot-inset-4: calc(4px * var(--scale));
-  --mark-1: calc(16px * var(--scale));
-  --mark-2: calc(20px * var(--scale));
-  --mark-3: calc(24px * var(--scale));
-  --mark-4: calc(26px * var(--scale));
-  --mark-5: calc(28px * var(--scale));
-  --switch-w-1: calc(34px * var(--scale));
-  --switch-w-2: calc(40px * var(--scale));
-  --switch-w-3: calc(44px * var(--scale));
-  --switch-w-4: calc(48px * var(--scale));
-  --switch-inset: calc(2px * var(--scale));
-  --slider-track-1: calc(4px * var(--scale));
-  --slider-track-2: calc(5px * var(--scale));
-  --slider-track-3: calc(6px * var(--scale));
-  --slider-track-4: calc(7px * var(--scale));
-  --overlay-w-1: calc(360px * var(--scale));
-  --overlay-w-2: calc(440px * var(--scale));
-  --overlay-w-3: calc(560px * var(--scale));
-  --overlay-w-4: calc(720px * var(--scale));
-  --font-body: var(--font-sans);
-  --font-heading: var(--font-display, var(--font-body));
-  --font-code: var(--font-mono);
-  --font-strong: var(--font-body);
-  --font-em: var(--font-serif);
-  --font-quote: var(--font-serif);
-  --default-font-family: var(--font-body);
-  --heading-font-family: var(--font-heading);
-  --code-font-family: var(--font-code);
-  --strong-font-family: var(--font-strong);
-  --em-font-family: var(--font-em);
-  --quote-font-family: var(--font-quote);
-  --default-font-family-sans: var(--font-sans);
-  --default-font-family-mono: var(--font-mono);
-  --default-font-family-serif: var(--font-serif);
-  --font-size-1: calc(12px * var(--scale));
-  --font-size-2: calc(14px * var(--scale));
-  --font-size-3: calc(16px * var(--scale));
-  --font-size-4: calc(18px * var(--scale));
-  --font-size-5: calc(20px * var(--scale));
-  --font-size-6: calc(24px * var(--scale));
-  --font-size-7: calc(32px * var(--scale));
-  --font-size-8: calc(44px * var(--scale));
-  --font-size-9: calc(64px * var(--scale));
-  --font-weight-regular: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --line-height-1: calc(16px * var(--scale));
-  --line-height-2: calc(20px * var(--scale));
-  --line-height-3: calc(24px * var(--scale));
-  --line-height-4: calc(26px * var(--scale));
-  --line-height-5: calc(28px * var(--scale));
-  --line-height-6: calc(32px * var(--scale));
-  --line-height-7: calc(40px * var(--scale));
-  --line-height-8: calc(52px * var(--scale));
-  --line-height-9: calc(70px * var(--scale));
-  --letter-spacing-1: 0em;
-  --letter-spacing-2: 0em;
-  --letter-spacing-3: 0em;
-  --letter-spacing-4: -0.005em;
-  --letter-spacing-5: -0.0075em;
-  --letter-spacing-6: -0.01em;
-  --letter-spacing-7: -0.015em;
-  --letter-spacing-8: -0.02em;
-  --letter-spacing-9: -0.025em;
-  --default-font-size: var(--font-size-3);
-  --default-font-style: normal;
-  --default-font-weight: var(--font-weight-regular);
-  --default-line-height: 1.5;
-  --default-letter-spacing: 0em;
-  --default-leading-trim-start: 0.42em;
-  --default-leading-trim-end: 0.36em;
-  --heading-font-size-adjust: 1;
-  --heading-font-style: normal;
-  --heading-leading-trim-start: var(--default-leading-trim-start);
-  --heading-leading-trim-end: var(--default-leading-trim-end);
-  --heading-letter-spacing: 0em;
-  --heading-font-weight: var(--font-weight-medium);
-  --mono-scale: 0.925;
-  --code-font-style: normal;
-  --code-font-weight: inherit;
-  --code-letter-spacing: -0.007em;
-  --code-padding-top: 0.1em;
-  --code-padding-bottom: 0.1em;
-  --code-padding-left: 0.25em;
-  --code-padding-right: 0.25em;
-  --strong-font-size-adjust: 1;
-  --strong-font-style: inherit;
-  --strong-font-weight: var(--font-weight-medium);
-  --strong-letter-spacing: 0em;
-  --em-font-size-adjust: 1.18;
-  --em-font-style: italic;
-  --em-font-weight: inherit;
-  --em-letter-spacing: -0.025em;
-  --quote-font-size-adjust: 1.18;
-  --quote-font-style: italic;
-  --quote-font-weight: inherit;
-  --quote-letter-spacing: -0.025em;
-  --tab-active-letter-spacing: -0.01em;
-  --tab-active-word-spacing: 0em;
-  --tab-inactive-letter-spacing: 0em;
-  --tab-inactive-word-spacing: 0em;
-  overflow-wrap: break-word;
-  font-family: var(--default-font-family);
-  font-synthesis: none;
-  font-size: var(--default-font-size);
-  font-weight: var(--default-font-weight);
-  font-style: var(--default-font-style);
-  line-height: var(--default-line-height);
-  letter-spacing: var(--default-letter-spacing);
-  -webkit-text-size-adjust: none;
-     -moz-text-size-adjust: none;
-      -ms-text-size-adjust: none;
-          text-size-adjust: none;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: var(--gray-12);
+.kui-theme:where([data-has-background='true']) {
+  background-color: var(--color-page);
 }
 [data-accent-color='amber'] {
   --accent-1: var(--amber-1);
@@ -606,50 +424,50 @@
   --accent-track: var(--grass-track);
 }
 [data-accent-color='gray'] {
-  --accent-1: var(--gray-1);
-  --accent-2: var(--gray-2);
-  --accent-3: var(--gray-3);
-  --accent-4: var(--gray-4);
-  --accent-5: var(--gray-5);
-  --accent-6: var(--gray-6);
-  --accent-7: var(--gray-7);
-  --accent-8: var(--gray-8);
-  --accent-9: var(--gray-9);
-  --accent-10: var(--gray-10);
-  --accent-11: var(--gray-11);
-  --accent-12: var(--gray-12);
-  --accent-a1: var(--gray-a1);
-  --accent-a2: var(--gray-a2);
-  --accent-a3: var(--gray-a3);
-  --accent-a4: var(--gray-a4);
-  --accent-a5: var(--gray-a5);
-  --accent-a6: var(--gray-a6);
-  --accent-a7: var(--gray-a7);
-  --accent-a8: var(--gray-a8);
-  --accent-a9: var(--gray-a9);
-  --accent-a10: var(--gray-a10);
-  --accent-a11: var(--gray-a11);
-  --accent-a12: var(--gray-a12);
-  --accent-contrast: var(--gray-contrast);
-  --accent-surface: var(--gray-surface);
-  --accent-indicator: var(--gray-indicator);
-  --accent-track: var(--gray-track);
-  --accent-ink: var(--gray-12);
-  --accent-ink-muted: var(--gray-a11);
-  --accent-ink-faint: var(--gray-a10);
-  --accent-solid: var(--gray-12);
-  --accent-solid-a: var(--gray-a12);
-  --accent-solid-hover: var(--gray-12);
-  --accent-solid-hover-a: var(--gray-a12);
-  --accent-solid-active: var(--gray-12);
-  --accent-solid-active-a: var(--gray-a12);
-  --accent-solid-contrast: var(--gray-1);
-  --accent-solid-selection: var(--gray-a11);
-  --accent-solid-selection-contrast: var(--gray-1);
-  --accent-solid-indicator: var(--gray-12);
-  --accent-solid-thumb: var(--gray-1);
-  --accent-solid-badge: var(--gray-1);
-  --accent-solid-badge-contrast: var(--gray-12);
+  --accent-1: var(--neutral-1);
+  --accent-2: var(--neutral-2);
+  --accent-3: var(--neutral-3);
+  --accent-4: var(--neutral-4);
+  --accent-5: var(--neutral-5);
+  --accent-6: var(--neutral-6);
+  --accent-7: var(--neutral-7);
+  --accent-8: var(--neutral-8);
+  --accent-9: var(--neutral-9);
+  --accent-10: var(--neutral-10);
+  --accent-11: var(--neutral-11);
+  --accent-12: var(--neutral-12);
+  --accent-a1: var(--neutral-a1);
+  --accent-a2: var(--neutral-a2);
+  --accent-a3: var(--neutral-a3);
+  --accent-a4: var(--neutral-a4);
+  --accent-a5: var(--neutral-a5);
+  --accent-a6: var(--neutral-a6);
+  --accent-a7: var(--neutral-a7);
+  --accent-a8: var(--neutral-a8);
+  --accent-a9: var(--neutral-a9);
+  --accent-a10: var(--neutral-a10);
+  --accent-a11: var(--neutral-a11);
+  --accent-a12: var(--neutral-a12);
+  --accent-contrast: var(--neutral-contrast);
+  --accent-surface: var(--neutral-surface);
+  --accent-indicator: var(--neutral-indicator);
+  --accent-track: var(--neutral-track);
+  --accent-ink: var(--neutral-12);
+  --accent-ink-muted: var(--neutral-a11);
+  --accent-ink-faint: var(--neutral-a10);
+  --accent-solid: var(--neutral-12);
+  --accent-solid-a: var(--neutral-a12);
+  --accent-solid-hover: var(--neutral-12);
+  --accent-solid-hover-a: var(--neutral-a12);
+  --accent-solid-active: var(--neutral-12);
+  --accent-solid-active-a: var(--neutral-a12);
+  --accent-solid-contrast: var(--neutral-1);
+  --accent-solid-selection: var(--neutral-a11);
+  --accent-solid-selection-contrast: var(--neutral-1);
+  --accent-solid-indicator: var(--neutral-12);
+  --accent-solid-thumb: var(--neutral-1);
+  --accent-solid-badge: var(--neutral-1);
+  --accent-solid-badge-contrast: var(--neutral-12);
   --accent-solid-hover-filter: var(--solid-gray-hover-filter);
   --accent-solid-active-filter: var(--solid-gray-active-filter);
   --accent-solid-open-filter: var(--solid-gray-open-filter);
@@ -1164,155 +982,345 @@
   --accent-indicator: var(--yellow-indicator);
   --accent-track: var(--yellow-track);
 }
-.radix-themes:where([data-gray-color='mauve']) {
-  --gray-1: var(--mauve-1);
-  --gray-2: var(--mauve-2);
-  --gray-3: var(--mauve-3);
-  --gray-4: var(--mauve-4);
-  --gray-5: var(--mauve-5);
-  --gray-6: var(--mauve-6);
-  --gray-7: var(--mauve-7);
-  --gray-8: var(--mauve-8);
-  --gray-9: var(--mauve-9);
-  --gray-10: var(--mauve-10);
-  --gray-11: var(--mauve-11);
-  --gray-12: var(--mauve-12);
-  --gray-a1: var(--mauve-a1);
-  --gray-a2: var(--mauve-a2);
-  --gray-a3: var(--mauve-a3);
-  --gray-a4: var(--mauve-a4);
-  --gray-a5: var(--mauve-a5);
-  --gray-a6: var(--mauve-a6);
-  --gray-a7: var(--mauve-a7);
-  --gray-a8: var(--mauve-a8);
-  --gray-a9: var(--mauve-a9);
-  --gray-a10: var(--mauve-a10);
-  --gray-a11: var(--mauve-a11);
-  --gray-a12: var(--mauve-a12);
-  --gray-contrast: var(--mauve-contrast);
-  --gray-surface: var(--mauve-surface);
-  --gray-indicator: var(--mauve-indicator);
-  --gray-track: var(--mauve-track);
-}
-.radix-themes:where([data-gray-color='olive']) {
-  --gray-1: var(--olive-1);
-  --gray-2: var(--olive-2);
-  --gray-3: var(--olive-3);
-  --gray-4: var(--olive-4);
-  --gray-5: var(--olive-5);
-  --gray-6: var(--olive-6);
-  --gray-7: var(--olive-7);
-  --gray-8: var(--olive-8);
-  --gray-9: var(--olive-9);
-  --gray-10: var(--olive-10);
-  --gray-11: var(--olive-11);
-  --gray-12: var(--olive-12);
-  --gray-a1: var(--olive-a1);
-  --gray-a2: var(--olive-a2);
-  --gray-a3: var(--olive-a3);
-  --gray-a4: var(--olive-a4);
-  --gray-a5: var(--olive-a5);
-  --gray-a6: var(--olive-a6);
-  --gray-a7: var(--olive-a7);
-  --gray-a8: var(--olive-a8);
-  --gray-a9: var(--olive-a9);
-  --gray-a10: var(--olive-a10);
-  --gray-a11: var(--olive-a11);
-  --gray-a12: var(--olive-a12);
-  --gray-contrast: var(--olive-contrast);
-  --gray-surface: var(--olive-surface);
-  --gray-indicator: var(--olive-indicator);
-  --gray-track: var(--olive-track);
-}
-.radix-themes:where([data-gray-color='sage']) {
-  --gray-1: var(--sage-1);
-  --gray-2: var(--sage-2);
-  --gray-3: var(--sage-3);
-  --gray-4: var(--sage-4);
-  --gray-5: var(--sage-5);
-  --gray-6: var(--sage-6);
-  --gray-7: var(--sage-7);
-  --gray-8: var(--sage-8);
-  --gray-9: var(--sage-9);
-  --gray-10: var(--sage-10);
-  --gray-11: var(--sage-11);
-  --gray-12: var(--sage-12);
-  --gray-a1: var(--sage-a1);
-  --gray-a2: var(--sage-a2);
-  --gray-a3: var(--sage-a3);
-  --gray-a4: var(--sage-a4);
-  --gray-a5: var(--sage-a5);
-  --gray-a6: var(--sage-a6);
-  --gray-a7: var(--sage-a7);
-  --gray-a8: var(--sage-a8);
-  --gray-a9: var(--sage-a9);
-  --gray-a10: var(--sage-a10);
-  --gray-a11: var(--sage-a11);
-  --gray-a12: var(--sage-a12);
-  --gray-contrast: var(--sage-contrast);
-  --gray-surface: var(--sage-surface);
-  --gray-indicator: var(--sage-indicator);
-  --gray-track: var(--sage-track);
-}
-.radix-themes:where([data-gray-color='sand']) {
-  --gray-1: var(--sand-1);
-  --gray-2: var(--sand-2);
-  --gray-3: var(--sand-3);
-  --gray-4: var(--sand-4);
-  --gray-5: var(--sand-5);
-  --gray-6: var(--sand-6);
-  --gray-7: var(--sand-7);
-  --gray-8: var(--sand-8);
-  --gray-9: var(--sand-9);
-  --gray-10: var(--sand-10);
-  --gray-11: var(--sand-11);
-  --gray-12: var(--sand-12);
-  --gray-a1: var(--sand-a1);
-  --gray-a2: var(--sand-a2);
-  --gray-a3: var(--sand-a3);
-  --gray-a4: var(--sand-a4);
-  --gray-a5: var(--sand-a5);
-  --gray-a6: var(--sand-a6);
-  --gray-a7: var(--sand-a7);
-  --gray-a8: var(--sand-a8);
-  --gray-a9: var(--sand-a9);
-  --gray-a10: var(--sand-a10);
-  --gray-a11: var(--sand-a11);
-  --gray-a12: var(--sand-a12);
-  --gray-contrast: var(--sand-contrast);
-  --gray-surface: var(--sand-surface);
-  --gray-indicator: var(--sand-indicator);
-  --gray-track: var(--sand-track);
-}
-.radix-themes:where([data-gray-color='slate']) {
-  --gray-1: var(--slate-1);
-  --gray-2: var(--slate-2);
-  --gray-3: var(--slate-3);
-  --gray-4: var(--slate-4);
-  --gray-5: var(--slate-5);
-  --gray-6: var(--slate-6);
-  --gray-7: var(--slate-7);
-  --gray-8: var(--slate-8);
-  --gray-9: var(--slate-9);
-  --gray-10: var(--slate-10);
-  --gray-11: var(--slate-11);
-  --gray-12: var(--slate-12);
-  --gray-a1: var(--slate-a1);
-  --gray-a2: var(--slate-a2);
-  --gray-a3: var(--slate-a3);
-  --gray-a4: var(--slate-a4);
-  --gray-a5: var(--slate-a5);
-  --gray-a6: var(--slate-a6);
-  --gray-a7: var(--slate-a7);
-  --gray-a8: var(--slate-a8);
-  --gray-a9: var(--slate-a9);
-  --gray-a10: var(--slate-a10);
-  --gray-a11: var(--slate-a11);
-  --gray-a12: var(--slate-a12);
-  --gray-contrast: var(--slate-contrast);
-  --gray-surface: var(--slate-surface);
-  --gray-indicator: var(--slate-indicator);
-  --gray-track: var(--slate-track);
+.kui-theme {
+  --neutral-ink: var(--neutral-12);
+  --neutral-ink-muted: var(--neutral-a11);
+  --neutral-ink-faint: var(--neutral-a10);
+  --cursor-button: default;
+  --cursor-checkbox: default;
+  --cursor-disabled: not-allowed;
+  --cursor-link: pointer;
+  --cursor-menu-item: pointer;
+  --cursor-radio: default;
+  --cursor-slider-thumb: default;
+  --cursor-slider-thumb-active: default;
+  --cursor-switch: default;
+  --scale: 1;
+  --space-1: calc(2px * var(--scale));
+  --space-2: calc(4px * var(--scale));
+  --space-3: calc(8px * var(--scale));
+  --space-4: calc(12px * var(--scale));
+  --space-5: calc(16px * var(--scale));
+  --space-6: calc(24px * var(--scale));
+  --space-7: calc(32px * var(--scale));
+  --space-8: calc(40px * var(--scale));
+  --space-9: calc(48px * var(--scale));
+  --space-10: calc(64px * var(--scale));
+  --space-11: calc(96px * var(--scale));
+  --space-12: calc(128px * var(--scale));
+  --layout-space-1: var(--space-1);
+  --layout-space-2: var(--space-2);
+  --layout-space-3: var(--space-3);
+  --layout-space-4: var(--space-4);
+  --layout-space-5: var(--space-5);
+  --layout-space-6: var(--space-6);
+  --layout-space-7: var(--space-7);
+  --layout-space-8: var(--space-8);
+  --layout-space-9: var(--space-9);
+  --layout-space-10: var(--space-10);
+  --layout-space-11: var(--space-11);
+  --layout-space-12: var(--space-12);
+  --surface-p-1: var(--layout-space-5);
+  --surface-p-2: var(--layout-space-6);
+  --surface-p-3: var(--layout-space-7);
+  --surface-p-4: var(--layout-space-8);
+  --panel-p-1: var(--layout-space-3);
+  --panel-p-2: var(--layout-space-4);
+  --panel-p-3: var(--layout-space-5);
+  --panel-p-4: var(--layout-space-6);
+  --control-height-1: calc(28px * var(--scale));
+  --control-height-2: calc(32px * var(--scale));
+  --control-height-3: calc(40px * var(--scale));
+  --control-height-4: calc(48px * var(--scale));
+  --control-px-1: calc(8px * var(--scale));
+  --control-px-2: calc(10px * var(--scale));
+  --control-px-3: calc(13px * var(--scale));
+  --control-px-4: calc(16px * var(--scale));
+  --control-px-pill-1: calc(12px * var(--scale));
+  --control-px-pill-2: calc(14px * var(--scale));
+  --control-px-pill-3: calc(17px * var(--scale));
+  --control-px-pill-4: calc(20px * var(--scale));
+  --control-gap-1: var(--space-2);
+  --control-gap-2: var(--space-3);
+  --control-gap-3: var(--space-3);
+  --control-gap-4: var(--space-4);
+  --icon-size-1: calc(16px * var(--scale));
+  --icon-size-2: calc(16px * var(--scale));
+  --icon-size-3: calc(20px * var(--scale));
+  --icon-size-4: calc(24px * var(--scale));
+  --row-inset-1: calc(4px * var(--scale));
+  --row-inset-2: calc(5px * var(--scale));
+  --row-inset-3: calc(5px * var(--scale));
+  --row-inset-4: calc(6px * var(--scale));
+  --slot-inset-1: calc(3px * var(--scale));
+  --slot-inset-2: calc(3px * var(--scale));
+  --slot-inset-3: calc(4px * var(--scale));
+  --slot-inset-4: calc(4px * var(--scale));
+  --mark-1: calc(16px * var(--scale));
+  --mark-2: calc(20px * var(--scale));
+  --mark-3: calc(24px * var(--scale));
+  --mark-4: calc(26px * var(--scale));
+  --mark-5: calc(28px * var(--scale));
+  --switch-w-1: calc(34px * var(--scale));
+  --switch-w-2: calc(40px * var(--scale));
+  --switch-w-3: calc(44px * var(--scale));
+  --switch-w-4: calc(48px * var(--scale));
+  --switch-inset: calc(2px * var(--scale));
+  --slider-track-1: calc(4px * var(--scale));
+  --slider-track-2: calc(5px * var(--scale));
+  --slider-track-3: calc(6px * var(--scale));
+  --slider-track-4: calc(7px * var(--scale));
+  --overlay-w-1: calc(360px * var(--scale));
+  --overlay-w-2: calc(440px * var(--scale));
+  --overlay-w-3: calc(560px * var(--scale));
+  --overlay-w-4: calc(720px * var(--scale));
+  --font-body: var(--font-sans);
+  --font-heading: var(--font-display, var(--font-body));
+  --font-code: var(--font-mono);
+  --font-strong: var(--font-body);
+  --font-em: var(--font-serif);
+  --font-quote: var(--font-serif);
+  --default-font-family: var(--font-body);
+  --heading-font-family: var(--font-heading);
+  --code-font-family: var(--font-code);
+  --strong-font-family: var(--font-strong);
+  --em-font-family: var(--font-em);
+  --quote-font-family: var(--font-quote);
+  --default-font-family-sans: var(--font-sans);
+  --default-font-family-mono: var(--font-mono);
+  --default-font-family-serif: var(--font-serif);
+  --font-size-1: calc(12px * var(--scale));
+  --font-size-2: calc(14px * var(--scale));
+  --font-size-3: calc(16px * var(--scale));
+  --font-size-4: calc(18px * var(--scale));
+  --font-size-5: calc(20px * var(--scale));
+  --font-size-6: calc(24px * var(--scale));
+  --font-size-7: calc(32px * var(--scale));
+  --font-size-8: calc(44px * var(--scale));
+  --font-size-9: calc(64px * var(--scale));
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --line-height-1: calc(16px * var(--scale));
+  --line-height-2: calc(20px * var(--scale));
+  --line-height-3: calc(24px * var(--scale));
+  --line-height-4: calc(26px * var(--scale));
+  --line-height-5: calc(28px * var(--scale));
+  --line-height-6: calc(32px * var(--scale));
+  --line-height-7: calc(40px * var(--scale));
+  --line-height-8: calc(52px * var(--scale));
+  --line-height-9: calc(70px * var(--scale));
+  --letter-spacing-1: 0em;
+  --letter-spacing-2: 0em;
+  --letter-spacing-3: 0em;
+  --letter-spacing-4: -0.005em;
+  --letter-spacing-5: -0.0075em;
+  --letter-spacing-6: -0.01em;
+  --letter-spacing-7: -0.015em;
+  --letter-spacing-8: -0.02em;
+  --letter-spacing-9: -0.025em;
+  --default-font-size: var(--font-size-3);
+  --default-font-style: normal;
+  --default-font-weight: var(--font-weight-regular);
+  --default-line-height: 1.5;
+  --default-letter-spacing: 0em;
+  --default-leading-trim-start: 0.42em;
+  --default-leading-trim-end: 0.36em;
+  --heading-font-size-adjust: 1;
+  --heading-font-style: normal;
+  --heading-leading-trim-start: var(--default-leading-trim-start);
+  --heading-leading-trim-end: var(--default-leading-trim-end);
+  --heading-letter-spacing: 0em;
+  --heading-font-weight: var(--font-weight-medium);
+  --mono-scale: 0.925;
+  --code-font-style: normal;
+  --code-font-weight: inherit;
+  --code-letter-spacing: -0.007em;
+  --code-padding-top: 0.1em;
+  --code-padding-bottom: 0.1em;
+  --code-padding-left: 0.25em;
+  --code-padding-right: 0.25em;
+  --strong-font-size-adjust: 1;
+  --strong-font-style: inherit;
+  --strong-font-weight: var(--font-weight-medium);
+  --strong-letter-spacing: 0em;
+  --em-font-size-adjust: 1.18;
+  --em-font-style: italic;
+  --em-font-weight: inherit;
+  --em-letter-spacing: -0.025em;
+  --quote-font-size-adjust: 1.18;
+  --quote-font-style: italic;
+  --quote-font-weight: inherit;
+  --quote-letter-spacing: -0.025em;
+  --tab-active-letter-spacing: -0.01em;
+  --tab-active-word-spacing: 0em;
+  --tab-inactive-letter-spacing: 0em;
+  --tab-inactive-word-spacing: 0em;
+  overflow-wrap: break-word;
+  font-family: var(--default-font-family);
+  font-synthesis: none;
+  font-size: var(--default-font-size);
+  font-weight: var(--default-font-weight);
+  font-style: var(--default-font-style);
+  line-height: var(--default-line-height);
+  letter-spacing: var(--default-letter-spacing);
+  -webkit-text-size-adjust: none;
+     -moz-text-size-adjust: none;
+      -ms-text-size-adjust: none;
+          text-size-adjust: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--neutral-12);
+}
+.kui-theme:where([data-gray-color='mauve']) {
+  --neutral-1: var(--mauve-1);
+  --neutral-2: var(--mauve-2);
+  --neutral-3: var(--mauve-3);
+  --neutral-4: var(--mauve-4);
+  --neutral-5: var(--mauve-5);
+  --neutral-6: var(--mauve-6);
+  --neutral-7: var(--mauve-7);
+  --neutral-8: var(--mauve-8);
+  --neutral-9: var(--mauve-9);
+  --neutral-10: var(--mauve-10);
+  --neutral-11: var(--mauve-11);
+  --neutral-12: var(--mauve-12);
+  --neutral-a1: var(--mauve-a1);
+  --neutral-a2: var(--mauve-a2);
+  --neutral-a3: var(--mauve-a3);
+  --neutral-a4: var(--mauve-a4);
+  --neutral-a5: var(--mauve-a5);
+  --neutral-a6: var(--mauve-a6);
+  --neutral-a7: var(--mauve-a7);
+  --neutral-a8: var(--mauve-a8);
+  --neutral-a9: var(--mauve-a9);
+  --neutral-a10: var(--mauve-a10);
+  --neutral-a11: var(--mauve-a11);
+  --neutral-a12: var(--mauve-a12);
+  --neutral-contrast: var(--mauve-contrast);
+  --neutral-surface: var(--mauve-surface);
+  --neutral-indicator: var(--mauve-indicator);
+  --neutral-track: var(--mauve-track);
+}
+.kui-theme:where([data-gray-color='olive']) {
+  --neutral-1: var(--olive-1);
+  --neutral-2: var(--olive-2);
+  --neutral-3: var(--olive-3);
+  --neutral-4: var(--olive-4);
+  --neutral-5: var(--olive-5);
+  --neutral-6: var(--olive-6);
+  --neutral-7: var(--olive-7);
+  --neutral-8: var(--olive-8);
+  --neutral-9: var(--olive-9);
+  --neutral-10: var(--olive-10);
+  --neutral-11: var(--olive-11);
+  --neutral-12: var(--olive-12);
+  --neutral-a1: var(--olive-a1);
+  --neutral-a2: var(--olive-a2);
+  --neutral-a3: var(--olive-a3);
+  --neutral-a4: var(--olive-a4);
+  --neutral-a5: var(--olive-a5);
+  --neutral-a6: var(--olive-a6);
+  --neutral-a7: var(--olive-a7);
+  --neutral-a8: var(--olive-a8);
+  --neutral-a9: var(--olive-a9);
+  --neutral-a10: var(--olive-a10);
+  --neutral-a11: var(--olive-a11);
+  --neutral-a12: var(--olive-a12);
+  --neutral-contrast: var(--olive-contrast);
+  --neutral-surface: var(--olive-surface);
+  --neutral-indicator: var(--olive-indicator);
+  --neutral-track: var(--olive-track);
+}
+.kui-theme:where([data-gray-color='sage']) {
+  --neutral-1: var(--sage-1);
+  --neutral-2: var(--sage-2);
+  --neutral-3: var(--sage-3);
+  --neutral-4: var(--sage-4);
+  --neutral-5: var(--sage-5);
+  --neutral-6: var(--sage-6);
+  --neutral-7: var(--sage-7);
+  --neutral-8: var(--sage-8);
+  --neutral-9: var(--sage-9);
+  --neutral-10: var(--sage-10);
+  --neutral-11: var(--sage-11);
+  --neutral-12: var(--sage-12);
+  --neutral-a1: var(--sage-a1);
+  --neutral-a2: var(--sage-a2);
+  --neutral-a3: var(--sage-a3);
+  --neutral-a4: var(--sage-a4);
+  --neutral-a5: var(--sage-a5);
+  --neutral-a6: var(--sage-a6);
+  --neutral-a7: var(--sage-a7);
+  --neutral-a8: var(--sage-a8);
+  --neutral-a9: var(--sage-a9);
+  --neutral-a10: var(--sage-a10);
+  --neutral-a11: var(--sage-a11);
+  --neutral-a12: var(--sage-a12);
+  --neutral-contrast: var(--sage-contrast);
+  --neutral-surface: var(--sage-surface);
+  --neutral-indicator: var(--sage-indicator);
+  --neutral-track: var(--sage-track);
+}
+.kui-theme:where([data-gray-color='sand']) {
+  --neutral-1: var(--sand-1);
+  --neutral-2: var(--sand-2);
+  --neutral-3: var(--sand-3);
+  --neutral-4: var(--sand-4);
+  --neutral-5: var(--sand-5);
+  --neutral-6: var(--sand-6);
+  --neutral-7: var(--sand-7);
+  --neutral-8: var(--sand-8);
+  --neutral-9: var(--sand-9);
+  --neutral-10: var(--sand-10);
+  --neutral-11: var(--sand-11);
+  --neutral-12: var(--sand-12);
+  --neutral-a1: var(--sand-a1);
+  --neutral-a2: var(--sand-a2);
+  --neutral-a3: var(--sand-a3);
+  --neutral-a4: var(--sand-a4);
+  --neutral-a5: var(--sand-a5);
+  --neutral-a6: var(--sand-a6);
+  --neutral-a7: var(--sand-a7);
+  --neutral-a8: var(--sand-a8);
+  --neutral-a9: var(--sand-a9);
+  --neutral-a10: var(--sand-a10);
+  --neutral-a11: var(--sand-a11);
+  --neutral-a12: var(--sand-a12);
+  --neutral-contrast: var(--sand-contrast);
+  --neutral-surface: var(--sand-surface);
+  --neutral-indicator: var(--sand-indicator);
+  --neutral-track: var(--sand-track);
+}
+.kui-theme:where([data-gray-color='slate']) {
+  --neutral-1: var(--slate-1);
+  --neutral-2: var(--slate-2);
+  --neutral-3: var(--slate-3);
+  --neutral-4: var(--slate-4);
+  --neutral-5: var(--slate-5);
+  --neutral-6: var(--slate-6);
+  --neutral-7: var(--slate-7);
+  --neutral-8: var(--slate-8);
+  --neutral-9: var(--slate-9);
+  --neutral-10: var(--slate-10);
+  --neutral-11: var(--slate-11);
+  --neutral-12: var(--slate-12);
+  --neutral-a1: var(--slate-a1);
+  --neutral-a2: var(--slate-a2);
+  --neutral-a3: var(--slate-a3);
+  --neutral-a4: var(--slate-a4);
+  --neutral-a5: var(--slate-a5);
+  --neutral-a6: var(--slate-a6);
+  --neutral-a7: var(--slate-a7);
+  --neutral-a8: var(--slate-a8);
+  --neutral-a9: var(--slate-a9);
+  --neutral-a10: var(--slate-a10);
+  --neutral-a11: var(--slate-a11);
+  --neutral-a12: var(--slate-a12);
+  --neutral-contrast: var(--slate-contrast);
+  --neutral-surface: var(--slate-surface);
+  --neutral-indicator: var(--slate-indicator);
+  --neutral-track: var(--slate-track);
 }
 [data-radius] {
   --radius-0: 0px;
@@ -1376,209 +1384,209 @@
   --radius-row-3: calc((var(--line-height-3) + 2 * var(--row-inset-3)) / 2);
   --radius-row-4: calc((var(--line-height-4) + 2 * var(--row-inset-4)) / 2);
 }
-.rt-SurfaceNest:where(.rt-r-size-1) {
+.kui-SurfaceNest:where(.kui-r-size-1) {
   --kui-sf-radius: var(--radius-surface-1);
   --kui-sf-p: var(--surface-p-1);
 }
-.rt-SurfaceNest:where(.rt-r-size-1) > * {
+.kui-SurfaceNest:where(.kui-r-size-1) > * {
   --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
 }
-.rt-SurfaceNest:where(.rt-r-size-2) {
+.kui-SurfaceNest:where(.kui-r-size-2) {
   --kui-sf-radius: var(--radius-surface-2);
   --kui-sf-p: var(--surface-p-2);
 }
-.rt-SurfaceNest:where(.rt-r-size-2) > * {
+.kui-SurfaceNest:where(.kui-r-size-2) > * {
   --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
 }
-.rt-SurfaceNest:where(.rt-r-size-3) {
+.kui-SurfaceNest:where(.kui-r-size-3) {
   --kui-sf-radius: var(--radius-surface-3);
   --kui-sf-p: var(--surface-p-3);
 }
-.rt-SurfaceNest:where(.rt-r-size-3) > * {
+.kui-SurfaceNest:where(.kui-r-size-3) > * {
   --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
 }
-.rt-SurfaceNest:where(.rt-r-size-4) {
+.kui-SurfaceNest:where(.kui-r-size-4) {
   --kui-sf-radius: var(--radius-surface-4);
   --kui-sf-p: var(--surface-p-4);
 }
-.rt-SurfaceNest:where(.rt-r-size-4) > * {
+.kui-SurfaceNest:where(.kui-r-size-4) > * {
   --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
 }
 @media (min-width: 520px) {
-  .rt-SurfaceNest:where(.xs\:rt-r-size-1) {
+  .kui-SurfaceNest:where(.xs\:kui-r-size-1) {
     --kui-sf-radius: var(--radius-surface-1);
     --kui-sf-p: var(--surface-p-1);
   }
-  .rt-SurfaceNest:where(.xs\:rt-r-size-1) > * {
+  .kui-SurfaceNest:where(.xs\:kui-r-size-1) > * {
     --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
   }
-  .rt-SurfaceNest:where(.xs\:rt-r-size-2) {
+  .kui-SurfaceNest:where(.xs\:kui-r-size-2) {
     --kui-sf-radius: var(--radius-surface-2);
     --kui-sf-p: var(--surface-p-2);
   }
-  .rt-SurfaceNest:where(.xs\:rt-r-size-2) > * {
+  .kui-SurfaceNest:where(.xs\:kui-r-size-2) > * {
     --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
   }
-  .rt-SurfaceNest:where(.xs\:rt-r-size-3) {
+  .kui-SurfaceNest:where(.xs\:kui-r-size-3) {
     --kui-sf-radius: var(--radius-surface-3);
     --kui-sf-p: var(--surface-p-3);
   }
-  .rt-SurfaceNest:where(.xs\:rt-r-size-3) > * {
+  .kui-SurfaceNest:where(.xs\:kui-r-size-3) > * {
     --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
   }
-  .rt-SurfaceNest:where(.xs\:rt-r-size-4) {
+  .kui-SurfaceNest:where(.xs\:kui-r-size-4) {
     --kui-sf-radius: var(--radius-surface-4);
     --kui-sf-p: var(--surface-p-4);
   }
-  .rt-SurfaceNest:where(.xs\:rt-r-size-4) > * {
+  .kui-SurfaceNest:where(.xs\:kui-r-size-4) > * {
     --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
   }
 }
 @media (min-width: 768px) {
-  .rt-SurfaceNest:where(.sm\:rt-r-size-1) {
+  .kui-SurfaceNest:where(.sm\:kui-r-size-1) {
     --kui-sf-radius: var(--radius-surface-1);
     --kui-sf-p: var(--surface-p-1);
   }
-  .rt-SurfaceNest:where(.sm\:rt-r-size-1) > * {
+  .kui-SurfaceNest:where(.sm\:kui-r-size-1) > * {
     --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
   }
-  .rt-SurfaceNest:where(.sm\:rt-r-size-2) {
+  .kui-SurfaceNest:where(.sm\:kui-r-size-2) {
     --kui-sf-radius: var(--radius-surface-2);
     --kui-sf-p: var(--surface-p-2);
   }
-  .rt-SurfaceNest:where(.sm\:rt-r-size-2) > * {
+  .kui-SurfaceNest:where(.sm\:kui-r-size-2) > * {
     --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
   }
-  .rt-SurfaceNest:where(.sm\:rt-r-size-3) {
+  .kui-SurfaceNest:where(.sm\:kui-r-size-3) {
     --kui-sf-radius: var(--radius-surface-3);
     --kui-sf-p: var(--surface-p-3);
   }
-  .rt-SurfaceNest:where(.sm\:rt-r-size-3) > * {
+  .kui-SurfaceNest:where(.sm\:kui-r-size-3) > * {
     --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
   }
-  .rt-SurfaceNest:where(.sm\:rt-r-size-4) {
+  .kui-SurfaceNest:where(.sm\:kui-r-size-4) {
     --kui-sf-radius: var(--radius-surface-4);
     --kui-sf-p: var(--surface-p-4);
   }
-  .rt-SurfaceNest:where(.sm\:rt-r-size-4) > * {
+  .kui-SurfaceNest:where(.sm\:kui-r-size-4) > * {
     --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
   }
 }
 @media (min-width: 1024px) {
-  .rt-SurfaceNest:where(.md\:rt-r-size-1) {
+  .kui-SurfaceNest:where(.md\:kui-r-size-1) {
     --kui-sf-radius: var(--radius-surface-1);
     --kui-sf-p: var(--surface-p-1);
   }
-  .rt-SurfaceNest:where(.md\:rt-r-size-1) > * {
+  .kui-SurfaceNest:where(.md\:kui-r-size-1) > * {
     --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
   }
-  .rt-SurfaceNest:where(.md\:rt-r-size-2) {
+  .kui-SurfaceNest:where(.md\:kui-r-size-2) {
     --kui-sf-radius: var(--radius-surface-2);
     --kui-sf-p: var(--surface-p-2);
   }
-  .rt-SurfaceNest:where(.md\:rt-r-size-2) > * {
+  .kui-SurfaceNest:where(.md\:kui-r-size-2) > * {
     --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
   }
-  .rt-SurfaceNest:where(.md\:rt-r-size-3) {
+  .kui-SurfaceNest:where(.md\:kui-r-size-3) {
     --kui-sf-radius: var(--radius-surface-3);
     --kui-sf-p: var(--surface-p-3);
   }
-  .rt-SurfaceNest:where(.md\:rt-r-size-3) > * {
+  .kui-SurfaceNest:where(.md\:kui-r-size-3) > * {
     --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
   }
-  .rt-SurfaceNest:where(.md\:rt-r-size-4) {
+  .kui-SurfaceNest:where(.md\:kui-r-size-4) {
     --kui-sf-radius: var(--radius-surface-4);
     --kui-sf-p: var(--surface-p-4);
   }
-  .rt-SurfaceNest:where(.md\:rt-r-size-4) > * {
+  .kui-SurfaceNest:where(.md\:kui-r-size-4) > * {
     --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
   }
 }
 @media (min-width: 1280px) {
-  .rt-SurfaceNest:where(.lg\:rt-r-size-1) {
+  .kui-SurfaceNest:where(.lg\:kui-r-size-1) {
     --kui-sf-radius: var(--radius-surface-1);
     --kui-sf-p: var(--surface-p-1);
   }
-  .rt-SurfaceNest:where(.lg\:rt-r-size-1) > * {
+  .kui-SurfaceNest:where(.lg\:kui-r-size-1) > * {
     --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
   }
-  .rt-SurfaceNest:where(.lg\:rt-r-size-2) {
+  .kui-SurfaceNest:where(.lg\:kui-r-size-2) {
     --kui-sf-radius: var(--radius-surface-2);
     --kui-sf-p: var(--surface-p-2);
   }
-  .rt-SurfaceNest:where(.lg\:rt-r-size-2) > * {
+  .kui-SurfaceNest:where(.lg\:kui-r-size-2) > * {
     --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
   }
-  .rt-SurfaceNest:where(.lg\:rt-r-size-3) {
+  .kui-SurfaceNest:where(.lg\:kui-r-size-3) {
     --kui-sf-radius: var(--radius-surface-3);
     --kui-sf-p: var(--surface-p-3);
   }
-  .rt-SurfaceNest:where(.lg\:rt-r-size-3) > * {
+  .kui-SurfaceNest:where(.lg\:kui-r-size-3) > * {
     --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
   }
-  .rt-SurfaceNest:where(.lg\:rt-r-size-4) {
+  .kui-SurfaceNest:where(.lg\:kui-r-size-4) {
     --kui-sf-radius: var(--radius-surface-4);
     --kui-sf-p: var(--surface-p-4);
   }
-  .rt-SurfaceNest:where(.lg\:rt-r-size-4) > * {
+  .kui-SurfaceNest:where(.lg\:kui-r-size-4) > * {
     --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
   }
 }
 @media (min-width: 1640px) {
-  .rt-SurfaceNest:where(.xl\:rt-r-size-1) {
+  .kui-SurfaceNest:where(.xl\:kui-r-size-1) {
     --kui-sf-radius: var(--radius-surface-1);
     --kui-sf-p: var(--surface-p-1);
   }
-  .rt-SurfaceNest:where(.xl\:rt-r-size-1) > * {
+  .kui-SurfaceNest:where(.xl\:kui-r-size-1) > * {
     --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
   }
-  .rt-SurfaceNest:where(.xl\:rt-r-size-2) {
+  .kui-SurfaceNest:where(.xl\:kui-r-size-2) {
     --kui-sf-radius: var(--radius-surface-2);
     --kui-sf-p: var(--surface-p-2);
   }
-  .rt-SurfaceNest:where(.xl\:rt-r-size-2) > * {
+  .kui-SurfaceNest:where(.xl\:kui-r-size-2) > * {
     --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
   }
-  .rt-SurfaceNest:where(.xl\:rt-r-size-3) {
+  .kui-SurfaceNest:where(.xl\:kui-r-size-3) {
     --kui-sf-radius: var(--radius-surface-3);
     --kui-sf-p: var(--surface-p-3);
   }
-  .rt-SurfaceNest:where(.xl\:rt-r-size-3) > * {
+  .kui-SurfaceNest:where(.xl\:kui-r-size-3) > * {
     --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
   }
-  .rt-SurfaceNest:where(.xl\:rt-r-size-4) {
+  .kui-SurfaceNest:where(.xl\:kui-r-size-4) {
     --kui-sf-radius: var(--radius-surface-4);
     --kui-sf-p: var(--surface-p-4);
   }
-  .rt-SurfaceNest:where(.xl\:rt-r-size-4) > * {
+  .kui-SurfaceNest:where(.xl\:kui-r-size-4) > * {
     --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
   }
 }
-.rt-SurfaceNest {
+.kui-SurfaceNest {
   --kui-sf-r: var(--kui-sf-radius, var(--radius-surface-2));
 }
-:where(.rt-SurfaceNest) .rt-SurfaceNest {
+:where(.kui-SurfaceNest) .kui-SurfaceNest {
   --kui-sf-r: min(var(--kui-nest, var(--kui-sf-radius, var(--radius-surface-2))), var(--kui-sf-radius, var(--radius-surface-2)));
 }
 @supports (color: color-mix(in oklab, white, black)) {
-  :where(.radix-themes) {
-    --shadow-1: 0 0 0 0.25px var(--gray-a6), inset 0 1px 1px 0 var(--black-a2);
-    --shadow-2: 0 0 0 0.25px var(--gray-a3), 0 1px 3px 0 var(--black-a2), 0 1px 2px -1px var(--black-a2);
-    --shadow-3: 0 0 0 0.25px var(--gray-a6), 0 4px 6px -1px var(--black-a2), 0 2px 4px -2px var(--black-a2);
-    --shadow-4: 0 0 0 0.5px var(--gray-a6), 0 10px 15px -3px var(--black-a3), 0 4px 6px -4px var(--black-a3);
-    --shadow-5: 0 0 0 0.5px var(--gray-a6), 0 20px 25px -5px var(--black-a3), 0 8px 10px -6px var(--black-a3);
-    --shadow-6: 0 0 0 0.5px var(--gray-a6), 0 25px 50px -12px var(--black-a5);
+  :where(.kui-theme) {
+    --shadow-1: 0 0 0 0.25px var(--neutral-a6), inset 0 1px 1px 0 var(--black-a2);
+    --shadow-2: 0 0 0 0.25px var(--neutral-a3), 0 1px 3px 0 var(--black-a2), 0 1px 2px -1px var(--black-a2);
+    --shadow-3: 0 0 0 0.25px var(--neutral-a6), 0 4px 6px -1px var(--black-a2), 0 2px 4px -2px var(--black-a2);
+    --shadow-4: 0 0 0 0.5px var(--neutral-a6), 0 10px 15px -3px var(--black-a3), 0 4px 6px -4px var(--black-a3);
+    --shadow-5: 0 0 0 0.5px var(--neutral-a6), 0 20px 25px -5px var(--black-a3), 0 8px 10px -6px var(--black-a3);
+    --shadow-6: 0 0 0 0.5px var(--neutral-a6), 0 25px 50px -12px var(--black-a5);
   }
 }
 @supports (color: color-mix(in oklab, white, black)) {
   :is(.dark, .dark-theme),
-  :is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
-    --shadow-1: inset 0 0 0 0.5px var(--gray-a6), inset 0 1px 1px 0 var(--black-a3);
-    --shadow-2: 0 0 0 0.5px var(--gray-a6), 0 1px 3px 0 var(--black-a3), 0 1px 2px -1px var(--black-a3);
-    --shadow-3: 0 0 0 0.5px var(--gray-a6), 0 4px 6px -1px var(--black-a3), 0 2px 4px -2px var(--black-a3);
-    --shadow-4: 0 0 0 0.5px var(--gray-a6), 0 10px 15px -3px var(--black-a3), 0 4px 6px -4px var(--black-a3);
-    --shadow-5: 0 0 0 0.5px var(--gray-a6), 0 20px 25px -5px var(--black-a3), 0 8px 10px -6px var(--black-a3);
-    --shadow-6: 0 0 0 0.5px var(--gray-a6), 0 25px 50px -12px var(--black-a5);
+  :is(.dark, .dark-theme) :where(.kui-theme:not(.light, .light-theme)) {
+    --shadow-1: inset 0 0 0 0.5px var(--neutral-a6), inset 0 1px 1px 0 var(--black-a3);
+    --shadow-2: 0 0 0 0.5px var(--neutral-a6), 0 1px 3px 0 var(--black-a3), 0 1px 2px -1px var(--black-a3);
+    --shadow-3: 0 0 0 0.5px var(--neutral-a6), 0 4px 6px -1px var(--black-a3), 0 2px 4px -2px var(--black-a3);
+    --shadow-4: 0 0 0 0.5px var(--neutral-a6), 0 10px 15px -3px var(--black-a3), 0 4px 6px -4px var(--black-a3);
+    --shadow-5: 0 0 0 0.5px var(--neutral-a6), 0 20px 25px -5px var(--black-a3), 0 8px 10px -6px var(--black-a3);
+    --shadow-6: 0 0 0 0.5px var(--neutral-a6), 0 25px 50px -12px var(--black-a5);
   }
 }
 [data-font-family='sans'] {