@rotki/ui-library 2.27.0 → 3.0.0-beta.1

package/dist/theme.css

@@ -0,0 +1,403 @@
+/* Generated by `pnpm run generate-theme` from src/theme/theme-css.ts. Do not edit. */
+
+/* Dark mode follows the theme the library sets on <html>, as a class or as data-theme. */
+@custom-variant dark (&:is(.dark *, [data-theme="dark"] *));
+
+@theme inline {
+  --color-rui-grey-50: rgb(var(--rui-grey-50));
+  --color-rui-grey-100: rgb(var(--rui-grey-100));
+  --color-rui-grey-200: rgb(var(--rui-grey-200));
+  --color-rui-grey-300: rgb(var(--rui-grey-300));
+  --color-rui-grey-400: rgb(var(--rui-grey-400));
+  --color-rui-grey-500: rgb(var(--rui-grey-500));
+  --color-rui-grey-600: rgb(var(--rui-grey-600));
+  --color-rui-grey-700: rgb(var(--rui-grey-700));
+  --color-rui-grey-800: rgb(var(--rui-grey-800));
+  --color-rui-grey-900: rgb(var(--rui-grey-900));
+  --color-rui-grey-a100: rgb(var(--rui-grey-a100));
+  --color-rui-grey-a200: rgb(var(--rui-grey-a200));
+  --color-rui-grey-a400: rgb(var(--rui-grey-a400));
+  --color-rui-grey-a700: rgb(var(--rui-grey-a700));
+  --color-rui-neutral-50: rgb(var(--rui-neutral-50));
+  --color-rui-neutral-100: rgb(var(--rui-neutral-100));
+  --color-rui-neutral-200: rgb(var(--rui-neutral-200));
+  --color-rui-neutral-300: rgb(var(--rui-neutral-300));
+  --color-rui-neutral-400: rgb(var(--rui-neutral-400));
+  --color-rui-neutral-500: rgb(var(--rui-neutral-500));
+  --color-rui-neutral-600: rgb(var(--rui-neutral-600));
+  --color-rui-neutral-700: rgb(var(--rui-neutral-700));
+  --color-rui-neutral-800: rgb(var(--rui-neutral-800));
+  --color-rui-neutral-900: rgb(var(--rui-neutral-900));
+  --color-rui-neutral-950: rgb(var(--rui-neutral-950));
+  --color-rui-light-primary: rgb(var(--rui-light-primary-main));
+  --color-rui-light-primary-darker: rgb(var(--rui-light-primary-darker));
+  --color-rui-light-primary-lighter: rgb(var(--rui-light-primary-lighter));
+  --color-rui-light-primary-fill: rgb(var(--rui-light-primary-fill));
+  --color-rui-light-primary-subtle: color-mix(in oklab, rgb(var(--rui-light-primary-main)) 5%, transparent);
+  --color-rui-light-primary-soft: color-mix(in oklab, rgb(var(--rui-light-primary-main)) 10%, transparent);
+  --color-rui-light-primary-border: color-mix(in oklab, rgb(var(--rui-light-primary-main)) 30%, transparent);
+  --color-rui-light-secondary: rgb(var(--rui-light-secondary-main));
+  --color-rui-light-secondary-darker: rgb(var(--rui-light-secondary-darker));
+  --color-rui-light-secondary-lighter: rgb(var(--rui-light-secondary-lighter));
+  --color-rui-light-secondary-fill: rgb(var(--rui-light-secondary-fill));
+  --color-rui-light-secondary-subtle: color-mix(in oklab, rgb(var(--rui-light-secondary-main)) 5%, transparent);
+  --color-rui-light-secondary-soft: color-mix(in oklab, rgb(var(--rui-light-secondary-main)) 10%, transparent);
+  --color-rui-light-secondary-border: color-mix(in oklab, rgb(var(--rui-light-secondary-main)) 30%, transparent);
+  --color-rui-light-error: rgb(var(--rui-light-error-main));
+  --color-rui-light-error-darker: rgb(var(--rui-light-error-darker));
+  --color-rui-light-error-lighter: rgb(var(--rui-light-error-lighter));
+  --color-rui-light-error-fill: rgb(var(--rui-light-error-fill));
+  --color-rui-light-error-subtle: color-mix(in oklab, rgb(var(--rui-light-error-main)) 5%, transparent);
+  --color-rui-light-error-soft: color-mix(in oklab, rgb(var(--rui-light-error-main)) 10%, transparent);
+  --color-rui-light-error-border: color-mix(in oklab, rgb(var(--rui-light-error-main)) 30%, transparent);
+  --color-rui-light-warning: rgb(var(--rui-light-warning-main));
+  --color-rui-light-warning-darker: rgb(var(--rui-light-warning-darker));
+  --color-rui-light-warning-lighter: rgb(var(--rui-light-warning-lighter));
+  --color-rui-light-warning-fill: rgb(var(--rui-light-warning-fill));
+  --color-rui-light-warning-subtle: color-mix(in oklab, rgb(var(--rui-light-warning-main)) 5%, transparent);
+  --color-rui-light-warning-soft: color-mix(in oklab, rgb(var(--rui-light-warning-main)) 10%, transparent);
+  --color-rui-light-warning-border: color-mix(in oklab, rgb(var(--rui-light-warning-main)) 30%, transparent);
+  --color-rui-light-info: rgb(var(--rui-light-info-main));
+  --color-rui-light-info-darker: rgb(var(--rui-light-info-darker));
+  --color-rui-light-info-lighter: rgb(var(--rui-light-info-lighter));
+  --color-rui-light-info-fill: rgb(var(--rui-light-info-fill));
+  --color-rui-light-info-subtle: color-mix(in oklab, rgb(var(--rui-light-info-main)) 5%, transparent);
+  --color-rui-light-info-soft: color-mix(in oklab, rgb(var(--rui-light-info-main)) 10%, transparent);
+  --color-rui-light-info-border: color-mix(in oklab, rgb(var(--rui-light-info-main)) 30%, transparent);
+  --color-rui-light-success: rgb(var(--rui-light-success-main));
+  --color-rui-light-success-darker: rgb(var(--rui-light-success-darker));
+  --color-rui-light-success-lighter: rgb(var(--rui-light-success-lighter));
+  --color-rui-light-success-fill: rgb(var(--rui-light-success-fill));
+  --color-rui-light-success-subtle: color-mix(in oklab, rgb(var(--rui-light-success-main)) 5%, transparent);
+  --color-rui-light-success-soft: color-mix(in oklab, rgb(var(--rui-light-success-main)) 10%, transparent);
+  --color-rui-light-success-border: color-mix(in oklab, rgb(var(--rui-light-success-main)) 30%, transparent);
+  --color-rui-light-text: var(--rui-light-text-primary);
+  --color-rui-light-text-secondary: var(--rui-light-text-secondary);
+  --color-rui-light-text-disabled: var(--rui-light-text-disabled);
+  --color-rui-dark-primary: rgb(var(--rui-dark-primary-main));
+  --color-rui-dark-primary-darker: rgb(var(--rui-dark-primary-darker));
+  --color-rui-dark-primary-lighter: rgb(var(--rui-dark-primary-lighter));
+  --color-rui-dark-primary-fill: rgb(var(--rui-dark-primary-fill));
+  --color-rui-dark-primary-subtle: color-mix(in oklab, rgb(var(--rui-dark-primary-main)) 5%, transparent);
+  --color-rui-dark-primary-soft: color-mix(in oklab, rgb(var(--rui-dark-primary-main)) 10%, transparent);
+  --color-rui-dark-primary-border: color-mix(in oklab, rgb(var(--rui-dark-primary-main)) 30%, transparent);
+  --color-rui-dark-secondary: rgb(var(--rui-dark-secondary-main));
+  --color-rui-dark-secondary-darker: rgb(var(--rui-dark-secondary-darker));
+  --color-rui-dark-secondary-lighter: rgb(var(--rui-dark-secondary-lighter));
+  --color-rui-dark-secondary-fill: rgb(var(--rui-dark-secondary-fill));
+  --color-rui-dark-secondary-subtle: color-mix(in oklab, rgb(var(--rui-dark-secondary-main)) 5%, transparent);
+  --color-rui-dark-secondary-soft: color-mix(in oklab, rgb(var(--rui-dark-secondary-main)) 10%, transparent);
+  --color-rui-dark-secondary-border: color-mix(in oklab, rgb(var(--rui-dark-secondary-main)) 30%, transparent);
+  --color-rui-dark-error: rgb(var(--rui-dark-error-main));
+  --color-rui-dark-error-darker: rgb(var(--rui-dark-error-darker));
+  --color-rui-dark-error-lighter: rgb(var(--rui-dark-error-lighter));
+  --color-rui-dark-error-fill: rgb(var(--rui-dark-error-fill));
+  --color-rui-dark-error-subtle: color-mix(in oklab, rgb(var(--rui-dark-error-main)) 5%, transparent);
+  --color-rui-dark-error-soft: color-mix(in oklab, rgb(var(--rui-dark-error-main)) 10%, transparent);
+  --color-rui-dark-error-border: color-mix(in oklab, rgb(var(--rui-dark-error-main)) 30%, transparent);
+  --color-rui-dark-warning: rgb(var(--rui-dark-warning-main));
+  --color-rui-dark-warning-darker: rgb(var(--rui-dark-warning-darker));
+  --color-rui-dark-warning-lighter: rgb(var(--rui-dark-warning-lighter));
+  --color-rui-dark-warning-fill: rgb(var(--rui-dark-warning-fill));
+  --color-rui-dark-warning-subtle: color-mix(in oklab, rgb(var(--rui-dark-warning-main)) 5%, transparent);
+  --color-rui-dark-warning-soft: color-mix(in oklab, rgb(var(--rui-dark-warning-main)) 10%, transparent);
+  --color-rui-dark-warning-border: color-mix(in oklab, rgb(var(--rui-dark-warning-main)) 30%, transparent);
+  --color-rui-dark-info: rgb(var(--rui-dark-info-main));
+  --color-rui-dark-info-darker: rgb(var(--rui-dark-info-darker));
+  --color-rui-dark-info-lighter: rgb(var(--rui-dark-info-lighter));
+  --color-rui-dark-info-fill: rgb(var(--rui-dark-info-fill));
+  --color-rui-dark-info-subtle: color-mix(in oklab, rgb(var(--rui-dark-info-main)) 5%, transparent);
+  --color-rui-dark-info-soft: color-mix(in oklab, rgb(var(--rui-dark-info-main)) 10%, transparent);
+  --color-rui-dark-info-border: color-mix(in oklab, rgb(var(--rui-dark-info-main)) 30%, transparent);
+  --color-rui-dark-success: rgb(var(--rui-dark-success-main));
+  --color-rui-dark-success-darker: rgb(var(--rui-dark-success-darker));
+  --color-rui-dark-success-lighter: rgb(var(--rui-dark-success-lighter));
+  --color-rui-dark-success-fill: rgb(var(--rui-dark-success-fill));
+  --color-rui-dark-success-subtle: color-mix(in oklab, rgb(var(--rui-dark-success-main)) 5%, transparent);
+  --color-rui-dark-success-soft: color-mix(in oklab, rgb(var(--rui-dark-success-main)) 10%, transparent);
+  --color-rui-dark-success-border: color-mix(in oklab, rgb(var(--rui-dark-success-main)) 30%, transparent);
+  --color-rui-dark-text: var(--rui-dark-text-primary);
+  --color-rui-dark-text-secondary: var(--rui-dark-text-secondary);
+  --color-rui-dark-text-disabled: var(--rui-dark-text-disabled);
+  --color-rui-primary: rgb(var(--rui-primary-main));
+  --color-rui-primary-darker: rgb(var(--rui-primary-darker));
+  --color-rui-primary-lighter: rgb(var(--rui-primary-lighter));
+  --color-rui-primary-fill: rgb(var(--rui-primary-fill));
+  --color-rui-primary-subtle: color-mix(in oklab, rgb(var(--rui-primary-main)) 5%, transparent);
+  --color-rui-primary-soft: color-mix(in oklab, rgb(var(--rui-primary-main)) 10%, transparent);
+  --color-rui-primary-border: color-mix(in oklab, rgb(var(--rui-primary-main)) 30%, transparent);
+  --color-rui-secondary: rgb(var(--rui-secondary-main));
+  --color-rui-secondary-darker: rgb(var(--rui-secondary-darker));
+  --color-rui-secondary-lighter: rgb(var(--rui-secondary-lighter));
+  --color-rui-secondary-fill: rgb(var(--rui-secondary-fill));
+  --color-rui-secondary-subtle: color-mix(in oklab, rgb(var(--rui-secondary-main)) 5%, transparent);
+  --color-rui-secondary-soft: color-mix(in oklab, rgb(var(--rui-secondary-main)) 10%, transparent);
+  --color-rui-secondary-border: color-mix(in oklab, rgb(var(--rui-secondary-main)) 30%, transparent);
+  --color-rui-error: rgb(var(--rui-error-main));
+  --color-rui-error-darker: rgb(var(--rui-error-darker));
+  --color-rui-error-lighter: rgb(var(--rui-error-lighter));
+  --color-rui-error-fill: rgb(var(--rui-error-fill));
+  --color-rui-error-subtle: color-mix(in oklab, rgb(var(--rui-error-main)) 5%, transparent);
+  --color-rui-error-soft: color-mix(in oklab, rgb(var(--rui-error-main)) 10%, transparent);
+  --color-rui-error-border: color-mix(in oklab, rgb(var(--rui-error-main)) 30%, transparent);
+  --color-rui-warning: rgb(var(--rui-warning-main));
+  --color-rui-warning-darker: rgb(var(--rui-warning-darker));
+  --color-rui-warning-lighter: rgb(var(--rui-warning-lighter));
+  --color-rui-warning-fill: rgb(var(--rui-warning-fill));
+  --color-rui-warning-subtle: color-mix(in oklab, rgb(var(--rui-warning-main)) 5%, transparent);
+  --color-rui-warning-soft: color-mix(in oklab, rgb(var(--rui-warning-main)) 10%, transparent);
+  --color-rui-warning-border: color-mix(in oklab, rgb(var(--rui-warning-main)) 30%, transparent);
+  --color-rui-info: rgb(var(--rui-info-main));
+  --color-rui-info-darker: rgb(var(--rui-info-darker));
+  --color-rui-info-lighter: rgb(var(--rui-info-lighter));
+  --color-rui-info-fill: rgb(var(--rui-info-fill));
+  --color-rui-info-subtle: color-mix(in oklab, rgb(var(--rui-info-main)) 5%, transparent);
+  --color-rui-info-soft: color-mix(in oklab, rgb(var(--rui-info-main)) 10%, transparent);
+  --color-rui-info-border: color-mix(in oklab, rgb(var(--rui-info-main)) 30%, transparent);
+  --color-rui-success: rgb(var(--rui-success-main));
+  --color-rui-success-darker: rgb(var(--rui-success-darker));
+  --color-rui-success-lighter: rgb(var(--rui-success-lighter));
+  --color-rui-success-fill: rgb(var(--rui-success-fill));
+  --color-rui-success-subtle: color-mix(in oklab, rgb(var(--rui-success-main)) 5%, transparent);
+  --color-rui-success-soft: color-mix(in oklab, rgb(var(--rui-success-main)) 10%, transparent);
+  --color-rui-success-border: color-mix(in oklab, rgb(var(--rui-success-main)) 30%, transparent);
+  --color-rui-text: var(--rui-text-primary);
+  --color-rui-text-secondary: var(--rui-text-secondary);
+  --color-rui-text-disabled: var(--rui-text-disabled);
+  --color-rui-light-background: rgb(var(--rui-light-background));
+  --color-rui-light-surface: rgb(var(--rui-light-surface));
+  --color-rui-light-menu: rgb(var(--rui-light-menu));
+  --color-rui-light-overlay: rgb(var(--rui-light-overlay));
+  --color-rui-light-surface-muted: rgb(var(--rui-light-surface-muted));
+  --color-rui-light-surface-sunken: rgb(var(--rui-light-surface-sunken));
+  --color-rui-light-chart-1: rgb(var(--rui-light-chart-1));
+  --color-rui-light-chart-2: rgb(var(--rui-light-chart-2));
+  --color-rui-light-chart-3: rgb(var(--rui-light-chart-3));
+  --color-rui-light-chart-4: rgb(var(--rui-light-chart-4));
+  --color-rui-light-chart-5: rgb(var(--rui-light-chart-5));
+  --color-rui-light-chart-6: rgb(var(--rui-light-chart-6));
+  --color-rui-light-chart-7: rgb(var(--rui-light-chart-7));
+  --color-rui-light-chart-8: rgb(var(--rui-light-chart-8));
+  --color-rui-light-chart-other: rgb(var(--rui-light-chart-other));
+  --color-rui-light-link: rgb(var(--rui-light-link));
+  --color-rui-light-divider: var(--rui-light-divider);
+  --color-rui-light-outline: var(--rui-light-outline);
+  --color-rui-light-hover: var(--rui-light-hover);
+  --color-rui-light-pressed: var(--rui-light-pressed);
+  --color-rui-dark-background: rgb(var(--rui-dark-background));
+  --color-rui-dark-surface: rgb(var(--rui-dark-surface));
+  --color-rui-dark-menu: rgb(var(--rui-dark-menu));
+  --color-rui-dark-overlay: rgb(var(--rui-dark-overlay));
+  --color-rui-dark-surface-muted: rgb(var(--rui-dark-surface-muted));
+  --color-rui-dark-surface-sunken: rgb(var(--rui-dark-surface-sunken));
+  --color-rui-dark-chart-1: rgb(var(--rui-dark-chart-1));
+  --color-rui-dark-chart-2: rgb(var(--rui-dark-chart-2));
+  --color-rui-dark-chart-3: rgb(var(--rui-dark-chart-3));
+  --color-rui-dark-chart-4: rgb(var(--rui-dark-chart-4));
+  --color-rui-dark-chart-5: rgb(var(--rui-dark-chart-5));
+  --color-rui-dark-chart-6: rgb(var(--rui-dark-chart-6));
+  --color-rui-dark-chart-7: rgb(var(--rui-dark-chart-7));
+  --color-rui-dark-chart-8: rgb(var(--rui-dark-chart-8));
+  --color-rui-dark-chart-other: rgb(var(--rui-dark-chart-other));
+  --color-rui-dark-link: rgb(var(--rui-dark-link));
+  --color-rui-dark-divider: var(--rui-dark-divider);
+  --color-rui-dark-outline: var(--rui-dark-outline);
+  --color-rui-dark-hover: var(--rui-dark-hover);
+  --color-rui-dark-pressed: var(--rui-dark-pressed);
+  --color-rui-background: rgb(var(--rui-background));
+  --color-rui-surface: rgb(var(--rui-surface));
+  --color-rui-menu: rgb(var(--rui-menu));
+  --color-rui-overlay: rgb(var(--rui-overlay));
+  --color-rui-surface-muted: rgb(var(--rui-surface-muted));
+  --color-rui-surface-sunken: rgb(var(--rui-surface-sunken));
+  --color-rui-chart-1: rgb(var(--rui-chart-1));
+  --color-rui-chart-2: rgb(var(--rui-chart-2));
+  --color-rui-chart-3: rgb(var(--rui-chart-3));
+  --color-rui-chart-4: rgb(var(--rui-chart-4));
+  --color-rui-chart-5: rgb(var(--rui-chart-5));
+  --color-rui-chart-6: rgb(var(--rui-chart-6));
+  --color-rui-chart-7: rgb(var(--rui-chart-7));
+  --color-rui-chart-8: rgb(var(--rui-chart-8));
+  --color-rui-chart-other: rgb(var(--rui-chart-other));
+  --color-rui-link: rgb(var(--rui-link));
+  --color-rui-divider: var(--rui-divider);
+  --color-rui-outline: var(--rui-outline);
+  --color-rui-hover: var(--rui-hover);
+  --color-rui-pressed: var(--rui-pressed);
+  --color-rui-primary-foreground: rgb(var(--rui-primary-foreground));
+  --color-rui-secondary-foreground: rgb(var(--rui-secondary-foreground));
+  --color-rui-error-foreground: rgb(var(--rui-error-foreground));
+  --color-rui-warning-foreground: rgb(var(--rui-warning-foreground));
+  --color-rui-info-foreground: rgb(var(--rui-info-foreground));
+  --color-rui-success-foreground: rgb(var(--rui-success-foreground));
+  --color-rui-veil: color-mix(in oklab, rgb(var(--rui-surface)) 88%, transparent);
+}
+
+@theme inline {
+  --spacing-rui-app-bar: var(--rui-app-bar-height);
+  --container-rui-dialog-sm: var(--rui-dialog-sm);
+  --container-rui-dialog-md: var(--rui-dialog-md);
+  --container-rui-dialog-lg: var(--rui-dialog-lg);
+  --container-rui-dialog-xl: var(--rui-dialog-xl);
+  --container-rui-dialog-2xl: var(--rui-dialog-2xl);
+  --container-rui-tooltip: var(--rui-tooltip-max-width);
+}
+
+@utility z-rui-raised {
+  z-index: var(--rui-z-raised);
+}
+
+@utility z-rui-floating {
+  z-index: var(--rui-z-floating);
+}
+
+@utility z-rui-app-bar {
+  z-index: var(--rui-z-app-bar);
+}
+
+@utility z-rui-drawer {
+  z-index: var(--rui-z-drawer);
+}
+
+@utility z-rui-dialog {
+  z-index: var(--rui-z-dialog);
+}
+
+@utility z-rui-menu {
+  z-index: var(--rui-z-menu);
+}
+
+@utility z-rui-tooltip {
+  z-index: var(--rui-z-tooltip);
+}
+
+@utility z-rui-toast {
+  z-index: var(--rui-z-toast);
+}
+
+@utility z-rui-blocking {
+  z-index: var(--rui-z-blocking);
+}
+
+@utility rui-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--rui-scrollbar-thumb) transparent;
+  &::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 9999px;
+    background-color: var(--rui-scrollbar-thumb);
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--rui-scrollbar-thumb-hover);
+  }
+  &::-webkit-scrollbar-thumb:active {
+    background-color: var(--rui-scrollbar-thumb-active);
+  }
+}
+
+@theme {
+  --font-sans: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --font-sans--font-feature-settings: 'cv05', 'cv08';
+  --font-mono: 'Geist Mono Variable', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --text-sm--letter-spacing: -0.006em;
+  --text-base--letter-spacing: -0.011em;
+  --text-lg--letter-spacing: -0.014em;
+  --text-xl--letter-spacing: -0.017em;
+  --text-2xl--letter-spacing: -0.019em;
+  --text-3xl--letter-spacing: -0.022em;
+  --text-4xl--letter-spacing: -0.022em;
+  --text-5xl--letter-spacing: -0.022em;
+  --text-6xl--letter-spacing: -0.022em;
+  --radius-rui-control: 0.375rem;
+  --radius-rui-panel: 0.5rem;
+  --radius-rui-card: 0.5rem;
+  --radius-rui-sm: 0.375rem;
+  --radius-rui-lg: 0.75rem;
+  --shadow-rui-menu: 0px 12px 24px -6px var(--rui-shadow-primary), 0px 4px 8px -4px var(--rui-shadow-secondary);
+  --shadow-rui-drawer: 0px 12px 24px -6px var(--rui-shadow-primary), 0px 4px 8px -4px var(--rui-shadow-secondary);
+  --shadow-rui-tooltip: 0px 1px 3px 0px var(--rui-shadow-primary), 0px 1px 2px -1px var(--rui-shadow-secondary);
+  --shadow-rui-control: 0px 1px 3px 0px var(--rui-shadow-primary), 0px 1px 2px -1px var(--rui-shadow-secondary);
+}
+
+@utility border-default {
+  border-color: var(--rui-divider);
+}
+
+@utility focus-ring {
+  outline: 2px solid rgb(var(--rui-primary-main));
+  outline-offset: 2px;
+}
+
+@utility state-layer {
+  background-image: linear-gradient(var(--rui-hover), var(--rui-hover));
+}
+
+@utility state-layer-pressed {
+  background-image: linear-gradient(var(--rui-pressed), var(--rui-pressed));
+}
+
+@utility text-body-1 {
+  @apply text-base;
+}
+
+@utility text-body-2 {
+  @apply text-sm;
+}
+
+@utility text-caption {
+  @apply text-xs;
+  line-height: 1.25rem;
+}
+
+@utility text-caption-2 {
+  @apply text-[0.625rem];
+  line-height: 1rem;
+}
+
+@utility text-h1 {
+  @apply text-6xl font-semibold;
+  line-height: 4.5rem;
+}
+
+@utility text-h2 {
+  @apply text-5xl font-semibold;
+  line-height: 3.5rem;
+}
+
+@utility text-h3 {
+  @apply text-4xl font-semibold;
+  line-height: 2.75rem;
+}
+
+@utility text-h4 {
+  @apply text-3xl font-semibold;
+  line-height: 2.375rem;
+}
+
+@utility text-h5 {
+  @apply text-2xl font-semibold;
+  line-height: 2rem;
+}
+
+@utility text-h6 {
+  @apply text-xl font-semibold;
+  line-height: 2rem;
+}
+
+@utility text-overline {
+  @apply text-xs font-medium tracking-wide;
+  line-height: 2rem;
+}
+
+@utility text-subtitle-1 {
+  @apply text-base font-medium;
+  line-height: 1.75rem;
+}
+
+@utility text-subtitle-2 {
+  @apply text-sm font-medium;
+  line-height: 1.25rem;
+}

package/dist/utils/helpers.d.ts

@@ -24,14 +24,6 @@ export declare function getRootAttrs(data: SetupContextAttrs, include?: SetupCon
  * @returns the remaining attributes
  */
 export declare function getNonRootAttrs(data: SetupContextAttrs, exclude?: SetupContextAttrsKeys): Omit<import("vue").Attrs, string>;
-/**
- * Rewrites an object's keys in another case.
- *
- * @param item - the object whose keys to rewrite
- * @param to - the case to write them in
- * @returns a new object holding the same values under the rewritten keys
- */
-export declare function transformCase<T extends object>(item: T, to: 'camelCase' | 'snake_case'): Record<string, T[keyof T]>;
 /**
  * Reduces a value to a token that keyword matching can compare, dropping the
  * spacing and case a reader would otherwise have to match exactly.

package/dist/utils/helpers.js

@@ -1,5 +1,4 @@
 import { objectOmit, objectPick } from "@vueuse/shared";
-import "scule";
 //#region src/utils/helpers.ts
 function formatNumber(amount, { fractionDigits = 2 }) {
 	return new Intl.NumberFormat(void 0, {

package/dist/utils/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","names":[],"sources":["../../src/utils/helpers.ts"],"sourcesContent":["import type { SetupContext } from 'vue';\nimport { objectOmit, objectPick } from '@vueuse/shared';\nimport { camelCase, snakeCase } from 'scule';\n\ninterface FormatNumberOptions {\n  fractionDigits?: number;\n}\n\ntype SetupContextAttrs = SetupContext['attrs'];\n\ntype SetupContextAttrsKeys = (keyof SetupContextAttrs)[];\n\nfunction formatNumber(\n  amount: number | string,\n  { fractionDigits = 2 }: FormatNumberOptions,\n): string {\n  return new Intl.NumberFormat(undefined, {\n    maximumFractionDigits: fractionDigits,\n    minimumFractionDigits: fractionDigits,\n  }).format(Number(amount));\n}\n\n/**\n * Formats a number without a fractional part.\n *\n * @param amount - the value to format\n * @returns the value with no decimals, grouped for the current locale\n */\nexport function formatInteger(amount: number | string): string {\n  return formatNumber(amount, { fractionDigits: 0 });\n}\n\n/**\n * The attribute keys that belong on a component's root element.\n *\n * @param data - the attributes handed to the component\n * @returns every `data-` key among them\n */\nfunction getRootKeys(data: SetupContextAttrs): SetupContextAttrsKeys {\n  return Object.keys(data).filter(key => key.startsWith('data-')) as SetupContextAttrsKeys;\n}\n\n/**\n * Picks the attributes that belong on the root element.\n *\n * @param data - the attributes handed to the component\n * @param include - keys to keep besides the `data-` ones\n * @returns the attributes to bind on the root element\n */\nexport function getRootAttrs(data: SetupContextAttrs, include: SetupContextAttrsKeys = ['class']) {\n  return objectPick(data, [...getRootKeys(data), ...include]);\n}\n\n/**\n * Drops the root element's attributes, leaving what the inner element takes.\n *\n * @param data - the attributes handed to the component\n * @param exclude - keys to drop besides the `data-` ones\n * @returns the remaining attributes\n */\nexport function getNonRootAttrs(\n  data: SetupContextAttrs,\n  exclude: SetupContextAttrsKeys = ['class'],\n) {\n  return objectOmit(data, [...getRootKeys(data), ...exclude]);\n}\n\n/**\n * Rewrites an object's keys in another case.\n *\n * @param item - the object whose keys to rewrite\n * @param to - the case to write them in\n * @returns a new object holding the same values under the rewritten keys\n */\nexport function transformCase<T extends object>(\n  item: T,\n  to: 'camelCase' | 'snake_case',\n): Record<string, T[keyof T]> {\n  if (!item)\n    return item;\n\n  return Object.keys(item).reduce(\n    (acc, curr) => {\n      if (to === 'camelCase')\n        acc[camelCase(curr)] = item[curr as keyof T];\n      else acc[snakeCase(curr)] = item[curr as keyof T];\n\n      return acc;\n    },\n    {} as Record<string, T[keyof T]>,\n  );\n}\n\n/**\n * Reduces a value to a token that keyword matching can compare, dropping the\n * spacing and case a reader would otherwise have to match exactly.\n *\n * @param string - the value to convert\n * @returns the token, e.g. `getTextToken('this is a sentence')` gives\n * `thisisasentence`\n */\nexport function getTextToken(string: unknown): string {\n  if (!string)\n    return '';\n\n  return string\n    .toString()\n    .toLowerCase()\n    .replace(/[^\\da-z]/gi, '');\n}\n\nexport function transformPropsUnit(value?: string | number): string | undefined {\n  if (value === undefined || (typeof value === 'string' && isNaN(Number(value))))\n    return value;\n  return `${value}px`;\n}\n\n/**\n * Formats a byte count into a human-readable string (e.g. \"1.2 MB\").\n */\nexport function formatFileSize(bytes: number): string {\n  if (!Number.isFinite(bytes) || bytes < 0)\n    return '0 B';\n  if (bytes < 1024)\n    return `${bytes} B`;\n  const units = ['KB', 'MB', 'GB', 'TB'];\n  let value = bytes / 1024;\n  let unitIndex = 0;\n  while (value >= 1024 && unitIndex < units.length - 1) {\n    value /= 1024;\n    unitIndex++;\n  }\n  return `${value.toFixed(value >= 10 ? 0 : 1)} ${units[unitIndex]}`;\n}\n"],"mappings":";;;AAYA,SAAS,aACP,QACA,EAAE,iBAAiB,KACX;CACR,OAAO,IAAI,KAAK,aAAa,KAAA,GAAW;EACtC,uBAAuB;EACvB,uBAAuB;CACzB,CAAC,CAAC,CAAC,OAAO,OAAO,MAAM,CAAC;AAC1B;;;;;;;AAQA,SAAgB,cAAc,QAAiC;CAC7D,OAAO,aAAa,QAAQ,EAAE,gBAAgB,EAAE,CAAC;AACnD;;;;;;;AAQA,SAAS,YAAY,MAAgD;CACnE,OAAO,OAAO,KAAK,IAAI,CAAC,CAAC,QAAO,QAAO,IAAI,WAAW,OAAO,CAAC;AAChE;;;;;;;;AASA,SAAgB,aAAa,MAAyB,UAAiC,CAAC,OAAO,GAAG;CAChG,OAAO,WAAW,MAAM,CAAC,GAAG,YAAY,IAAI,GAAG,GAAG,OAAO,CAAC;AAC5D;;;;;;;;AASA,SAAgB,gBACd,MACA,UAAiC,CAAC,OAAO,GACzC;CACA,OAAO,WAAW,MAAM,CAAC,GAAG,YAAY,IAAI,GAAG,GAAG,OAAO,CAAC;AAC5D;;;;;;;;;AAoCA,SAAgB,aAAa,QAAyB;CACpD,IAAI,CAAC,QACH,OAAO;CAET,OAAO,OACJ,SAAS,CAAC,CACV,YAAY,CAAC,CACb,QAAQ,cAAc,EAAE;AAC7B;AAEA,SAAgB,mBAAmB,OAA6C;CAC9E,IAAI,UAAU,KAAA,KAAc,OAAO,UAAU,YAAY,MAAM,OAAO,KAAK,CAAC,GAC1E,OAAO;CACT,OAAO,GAAG,MAAM;AAClB;;;;AAKA,SAAgB,eAAe,OAAuB;CACpD,IAAI,CAAC,OAAO,SAAS,KAAK,KAAK,QAAQ,GACrC,OAAO;CACT,IAAI,QAAQ,MACV,OAAO,GAAG,MAAM;CAClB,MAAM,QAAQ;EAAC;EAAM;EAAM;EAAM;CAAI;CACrC,IAAI,QAAQ,QAAQ;CACpB,IAAI,YAAY;CAChB,OAAO,SAAS,QAAQ,YAAY,MAAM,SAAS,GAAG;EACpD,SAAS;EACT;CACF;CACA,OAAO,GAAG,MAAM,QAAQ,SAAS,KAAK,IAAI,CAAC,EAAE,GAAG,MAAM;AACxD"}
+{"version":3,"file":"helpers.js","names":[],"sources":["../../src/utils/helpers.ts"],"sourcesContent":["import type { SetupContext } from 'vue';\nimport { objectOmit, objectPick } from '@vueuse/shared';\n\ninterface FormatNumberOptions {\n  fractionDigits?: number;\n}\n\ntype SetupContextAttrs = SetupContext['attrs'];\n\ntype SetupContextAttrsKeys = (keyof SetupContextAttrs)[];\n\nfunction formatNumber(\n  amount: number | string,\n  { fractionDigits = 2 }: FormatNumberOptions,\n): string {\n  return new Intl.NumberFormat(undefined, {\n    maximumFractionDigits: fractionDigits,\n    minimumFractionDigits: fractionDigits,\n  }).format(Number(amount));\n}\n\n/**\n * Formats a number without a fractional part.\n *\n * @param amount - the value to format\n * @returns the value with no decimals, grouped for the current locale\n */\nexport function formatInteger(amount: number | string): string {\n  return formatNumber(amount, { fractionDigits: 0 });\n}\n\n/**\n * The attribute keys that belong on a component's root element.\n *\n * @param data - the attributes handed to the component\n * @returns every `data-` key among them\n */\nfunction getRootKeys(data: SetupContextAttrs): SetupContextAttrsKeys {\n  return Object.keys(data).filter(key => key.startsWith('data-')) as SetupContextAttrsKeys;\n}\n\n/**\n * Picks the attributes that belong on the root element.\n *\n * @param data - the attributes handed to the component\n * @param include - keys to keep besides the `data-` ones\n * @returns the attributes to bind on the root element\n */\nexport function getRootAttrs(data: SetupContextAttrs, include: SetupContextAttrsKeys = ['class']) {\n  return objectPick(data, [...getRootKeys(data), ...include]);\n}\n\n/**\n * Drops the root element's attributes, leaving what the inner element takes.\n *\n * @param data - the attributes handed to the component\n * @param exclude - keys to drop besides the `data-` ones\n * @returns the remaining attributes\n */\nexport function getNonRootAttrs(\n  data: SetupContextAttrs,\n  exclude: SetupContextAttrsKeys = ['class'],\n) {\n  return objectOmit(data, [...getRootKeys(data), ...exclude]);\n}\n\n/**\n * Reduces a value to a token that keyword matching can compare, dropping the\n * spacing and case a reader would otherwise have to match exactly.\n *\n * @param string - the value to convert\n * @returns the token, e.g. `getTextToken('this is a sentence')` gives\n * `thisisasentence`\n */\nexport function getTextToken(string: unknown): string {\n  if (!string)\n    return '';\n\n  return string\n    .toString()\n    .toLowerCase()\n    .replace(/[^\\da-z]/gi, '');\n}\n\nexport function transformPropsUnit(value?: string | number): string | undefined {\n  if (value === undefined || (typeof value === 'string' && isNaN(Number(value))))\n    return value;\n  return `${value}px`;\n}\n\n/**\n * Formats a byte count into a human-readable string (e.g. \"1.2 MB\").\n */\nexport function formatFileSize(bytes: number): string {\n  if (!Number.isFinite(bytes) || bytes < 0)\n    return '0 B';\n  if (bytes < 1024)\n    return `${bytes} B`;\n  const units = ['KB', 'MB', 'GB', 'TB'];\n  let value = bytes / 1024;\n  let unitIndex = 0;\n  while (value >= 1024 && unitIndex < units.length - 1) {\n    value /= 1024;\n    unitIndex++;\n  }\n  return `${value.toFixed(value >= 10 ? 0 : 1)} ${units[unitIndex]}`;\n}\n"],"mappings":";;AAWA,SAAS,aACP,QACA,EAAE,iBAAiB,KACX;CACR,OAAO,IAAI,KAAK,aAAa,KAAA,GAAW;EACtC,uBAAuB;EACvB,uBAAuB;CACzB,CAAC,CAAC,CAAC,OAAO,OAAO,MAAM,CAAC;AAC1B;;;;;;;AAQA,SAAgB,cAAc,QAAiC;CAC7D,OAAO,aAAa,QAAQ,EAAE,gBAAgB,EAAE,CAAC;AACnD;;;;;;;AAQA,SAAS,YAAY,MAAgD;CACnE,OAAO,OAAO,KAAK,IAAI,CAAC,CAAC,QAAO,QAAO,IAAI,WAAW,OAAO,CAAC;AAChE;;;;;;;;AASA,SAAgB,aAAa,MAAyB,UAAiC,CAAC,OAAO,GAAG;CAChG,OAAO,WAAW,MAAM,CAAC,GAAG,YAAY,IAAI,GAAG,GAAG,OAAO,CAAC;AAC5D;;;;;;;;AASA,SAAgB,gBACd,MACA,UAAiC,CAAC,OAAO,GACzC;CACA,OAAO,WAAW,MAAM,CAAC,GAAG,YAAY,IAAI,GAAG,GAAG,OAAO,CAAC;AAC5D;;;;;;;;;AAUA,SAAgB,aAAa,QAAyB;CACpD,IAAI,CAAC,QACH,OAAO;CAET,OAAO,OACJ,SAAS,CAAC,CACV,YAAY,CAAC,CACb,QAAQ,cAAc,EAAE;AAC7B;AAEA,SAAgB,mBAAmB,OAA6C;CAC9E,IAAI,UAAU,KAAA,KAAc,OAAO,UAAU,YAAY,MAAM,OAAO,KAAK,CAAC,GAC1E,OAAO;CACT,OAAO,GAAG,MAAM;AAClB;;;;AAKA,SAAgB,eAAe,OAAuB;CACpD,IAAI,CAAC,OAAO,SAAS,KAAK,KAAK,QAAQ,GACrC,OAAO;CACT,IAAI,QAAQ,MACV,OAAO,GAAG,MAAM;CAClB,MAAM,QAAQ;EAAC;EAAM;EAAM;EAAM;CAAI;CACrC,IAAI,QAAQ,QAAQ;CACpB,IAAI,YAAY;CAChB,OAAO,SAAS,QAAQ,YAAY,MAAM,SAAS,GAAG;EACpD,SAAS;EACT;CACF;CACA,OAAO,GAAG,MAAM,QAAQ,SAAS,KAAK,IAAI,CAAC,EAAE,GAAG,MAAM;AACxD"}

package/dist/utils/tv.js

@@ -1,37 +1,29 @@
+import { dialogSizes, radiusRoles, shadowRoles, zLayers } from "../consts/tokens.js";
 import { normalizeClass } from "vue";
 import { createTV } from "tailwind-variants";
 //#region src/utils/tv.ts
 var isAny = () => true;
-/** An outline width: a scale number, an arbitrary `[2px]`, or an arbitrary variable `(--w)`. */
-function isWidth(value) {
-	return /^\d+$/.test(value) || /^\[.+\]$/.test(value) || /^\(.+\)$/.test(value);
-}
 /** The library's tailwind-variants instance, with its own tw-merge groups. */
-var tv = /* #__PURE__ */ createTV({ twMergeConfig: {
-	extend: { classGroups: {
-		"bg-tint": [{ "bg-tint": [isAny] }],
-		"bg-shade": [{ "bg-shade": [isAny] }],
-		"text-tint": [{ "text-tint": [isAny] }],
-		"text-shade": [{ "text-shade": [isAny] }],
+var tv = /* #__PURE__ */ createTV({ twMergeConfig: { extend: {
+	theme: {
+		radius: [...radiusRoles.map((role) => `rui-${role}`)],
+		shadow: [...shadowRoles.map((role) => `rui-${role}`), ...Array.from({ length: 24 }, (_, i) => `${i + 1}`)],
+		container: [...dialogSizes.map((size) => `rui-dialog-${size}`), "rui-tooltip"],
+		spacing: ["rui-app-bar"]
+	},
+	classGroups: {
 		"text-color": [{ "text-rui": [isAny] }],
-		"bg-opacity": [{ "bg-opacity": [isAny] }],
-		"text-opacity": [{ "text-opacity": [isAny] }],
-		"border-opacity": [{ "border-opacity": [isAny] }],
-		"ring-opacity": [{ "ring-opacity": [isAny] }],
-		"ring-offset-opacity": [{ "ring-offset-opacity": [isAny] }],
-		"divide-opacity": [{ "divide-opacity": [isAny] }],
-		"placeholder-opacity": [{ "placeholder-opacity": [isAny] }],
-		"outline-style": ["outline"],
+		"z": [{ z: zLayers.map((layer) => `rui-${layer}`) }],
 		"font-size": [
 			{ "text-body": [isAny] },
 			"text-caption",
+			"text-caption-2",
 			"text-overline",
 			{ "text-h": [isAny] },
 			{ "text-subtitle": [isAny] }
 		]
-	} },
-	override: { classGroups: { "outline-w": [{ outline: [isWidth] }] } }
-} });
+	}
+} } });
 /**
 * Normalizes any Vue `:class` binding value (string, object, array, nullish
 * or `false`) to a plain string compatible with tailwind-variants' `class`

package/dist/utils/tv.js.map

@@ -1 +1 @@
-{"version":3,"file":"tv.js","names":[],"sources":["../../src/utils/tv.ts"],"sourcesContent":["/**\n * Tailwind Variants wrapper.\n *\n * Re-exports `tv` from `tailwind-variants` with project-level configuration.\n * `createTV()` teaches the conflict resolver about the theme's own class\n * groups, so `text-rui-primary` reads as a colour rather than a font size.\n *\n * The resolver ships inside tailwind-variants as of 3.3, which is why there is\n * no `tailwind-merge` dependency: the peer is optional and nothing imports it.\n *\n * @see https://www.tailwind-variants.org/docs/introduction\n */\n\nimport type { VueClassValue } from '@/types/class-value';\nimport { createTV } from 'tailwind-variants';\nimport { type ClassValue, normalizeClass } from 'vue';\n\nconst isAny: (v: string) => boolean = () => true;\n\n/** An outline width: a scale number, an arbitrary `[2px]`, or an arbitrary variable `(--w)`. */\nfunction isWidth(value: string): boolean {\n  return /^\\d+$/.test(value) || /^\\[.+\\]$/.test(value) || /^\\(.+\\)$/.test(value);\n}\n\n/** The library's tailwind-variants instance, with its own tw-merge groups. */\nexport const tv = /* #__PURE__ */ createTV({\n  twMergeConfig: {\n    // `extend` appends to the built-in groups, which is what the flat form these sat in folded into\n    extend: {\n      classGroups: {\n        'bg-tint': [{ 'bg-tint': [isAny] }],\n        'bg-shade': [{ 'bg-shade': [isAny] }],\n        'text-tint': [{ 'text-tint': [isAny] }],\n        'text-shade': [{ 'text-shade': [isAny] }],\n        // `text-rui-*` is a text colour, so the merger stops classifying it as a font size like the typography utilities below\n        'text-color': [{ 'text-rui': [isAny] }],\n        /*\n         * Tailwind 3's `*-opacity-*` utilities, which the merger has no group for: it ships the\n         * Tailwind 4 groups, where they no longer exist. `bg-opacity-40` then parses as a\n         * background *colour*, lands in the same group as `bg-rui-primary`, and wins as the later\n         * class, leaving the element with an opacity and no colour. Giving them groups of their\n         * own keeps both. They can go when the project moves to Tailwind 4 and slash opacity.\n         */\n        'bg-opacity': [{ 'bg-opacity': [isAny] }],\n        'text-opacity': [{ 'text-opacity': [isAny] }],\n        'border-opacity': [{ 'border-opacity': [isAny] }],\n        'ring-opacity': [{ 'ring-opacity': [isAny] }],\n        'ring-offset-opacity': [{ 'ring-offset-opacity': [isAny] }],\n        'divide-opacity': [{ 'divide-opacity': [isAny] }],\n        'placeholder-opacity': [{ 'placeholder-opacity': [isAny] }],\n        /*\n         * A bare `outline` is `outline-style: solid` in Tailwind 3 and a *width* in Tailwind 4,\n         * so the merger reads it as a width and `outline outline-1` loses the style, leaving an\n         * outlined button with a colour, a width and nothing drawn. It belongs with the other\n         * style keywords here, and comes back out of the width group in `override` below.\n         */\n        'outline-style': ['outline'],\n        'font-size': [\n          { 'text-body': [isAny] },\n          'text-caption',\n          'text-overline',\n          { 'text-h': [isAny] },\n          { 'text-subtitle': [isAny] },\n        ],\n      },\n    },\n    override: {\n      classGroups: {\n        /*\n         * Without the empty string the built-in group carries, a bare `outline` stops counting as\n         * a width and stays a style keyword, the way Tailwind 3 means it. Widths still replace one\n         * another.\n         */\n        'outline-w': [{ outline: [isWidth] }],\n      },\n    },\n  },\n});\n\n/**\n * Normalizes any Vue `:class` binding value (string, object, array, nullish\n * or `false`) to a plain string compatible with tailwind-variants' `class`\n * parameter. Accepts Vue's runtime `ClassValue` so call sites can pass\n * `$attrs.class` directly without casting.\n */\nexport function cn(value: ClassValue | VueClassValue | undefined): string | undefined {\n  if (value == null || value === false)\n    return undefined;\n  if (typeof value === 'string')\n    return value || undefined;\n  const result = normalizeClass(value);\n  return result || undefined;\n}\n"],"mappings":";;;AAiBA,IAAM,cAAsC;;AAG5C,SAAS,QAAQ,OAAwB;CACvC,OAAO,QAAQ,KAAK,KAAK,KAAK,WAAW,KAAK,KAAK,KAAK,WAAW,KAAK,KAAK;AAC/E;;AAGA,IAAa,KAAqB,yBAAS,EACzC,eAAe;CAEb,QAAQ,EACN,aAAa;EACX,WAAW,CAAC,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC;EAClC,YAAY,CAAC,EAAE,YAAY,CAAC,KAAK,EAAE,CAAC;EACpC,aAAa,CAAC,EAAE,aAAa,CAAC,KAAK,EAAE,CAAC;EACtC,cAAc,CAAC,EAAE,cAAc,CAAC,KAAK,EAAE,CAAC;EAExC,cAAc,CAAC,EAAE,YAAY,CAAC,KAAK,EAAE,CAAC;EAQtC,cAAc,CAAC,EAAE,cAAc,CAAC,KAAK,EAAE,CAAC;EACxC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,KAAK,EAAE,CAAC;EAC5C,kBAAkB,CAAC,EAAE,kBAAkB,CAAC,KAAK,EAAE,CAAC;EAChD,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,KAAK,EAAE,CAAC;EAC5C,uBAAuB,CAAC,EAAE,uBAAuB,CAAC,KAAK,EAAE,CAAC;EAC1D,kBAAkB,CAAC,EAAE,kBAAkB,CAAC,KAAK,EAAE,CAAC;EAChD,uBAAuB,CAAC,EAAE,uBAAuB,CAAC,KAAK,EAAE,CAAC;EAO1D,iBAAiB,CAAC,SAAS;EAC3B,aAAa;GACX,EAAE,aAAa,CAAC,KAAK,EAAE;GACvB;GACA;GACA,EAAE,UAAU,CAAC,KAAK,EAAE;GACpB,EAAE,iBAAiB,CAAC,KAAK,EAAE;EAC7B;CACF,EACF;CACA,UAAU,EACR,aAAa,EAMX,aAAa,CAAC,EAAE,SAAS,CAAC,OAAO,EAAE,CAAC,EACtC,EACF;AACF,EACF,CAAC;;;;;;;AAQD,SAAgB,GAAG,OAAmE;CACpF,IAAI,SAAS,QAAQ,UAAU,OAC7B,OAAO,KAAA;CACT,IAAI,OAAO,UAAU,UACnB,OAAO,SAAS,KAAA;CAElB,OADe,eAAe,KACvB,KAAU,KAAA;AACnB"}
+{"version":3,"file":"tv.js","names":[],"sources":["../../src/utils/tv.ts"],"sourcesContent":["/**\n * Tailwind Variants wrapper.\n *\n * Re-exports `tv` from `tailwind-variants` with project-level configuration.\n * `createTV()` teaches the conflict resolver about the theme's own class\n * groups, so `text-rui-primary` reads as a colour rather than a font size.\n *\n * The resolver ships inside tailwind-variants as of 3.3, which is why there is\n * no `tailwind-merge` dependency: the peer is optional and nothing imports it.\n *\n * @see https://www.tailwind-variants.org/docs/introduction\n */\n\nimport type { VueClassValue } from '@/types/class-value';\nimport { createTV } from 'tailwind-variants';\nimport { type ClassValue, normalizeClass } from 'vue';\nimport { dialogSizes, radiusRoles, shadowRoles, zLayers } from '@/consts/tokens';\n\nconst isAny: (v: string) => boolean = () => true;\n\n/** The library's tailwind-variants instance, with its own tw-merge groups. */\nexport const tv = /* #__PURE__ */ createTV({\n  twMergeConfig: {\n    // `extend` appends to the built-in groups, which is what the flat form these sat in folded into\n    extend: {\n      // the role tokens, so `rounded-rui-control` replaces `rounded-full` and `shadow-rui-menu` replaces `shadow-2`\n      theme: {\n        radius: [...radiusRoles.map(role => `rui-${role}`)],\n        shadow: [...shadowRoles.map(role => `rui-${role}`), ...Array.from({ length: 24 }, (_, i) => `${i + 1}`)],\n        // `max-w-rui-tooltip` replaces a consumer's `max-w-40` on a tooltip, and the reverse\n        container: [...dialogSizes.map(size => `rui-dialog-${size}`), 'rui-tooltip'],\n        // `top-rui-app-bar` replaces a consumer's `top-16` on a drawer, and the reverse\n        spacing: ['rui-app-bar'],\n      },\n      classGroups: {\n        // `text-rui-*` is a text colour, so the merger stops classifying it as a font size like the typography utilities below\n        'text-color': [{ 'text-rui': [isAny] }],\n        'z': [{ z: zLayers.map(layer => `rui-${layer}`) }],\n        'font-size': [\n          { 'text-body': [isAny] },\n          'text-caption',\n          'text-caption-2',\n          'text-overline',\n          { 'text-h': [isAny] },\n          { 'text-subtitle': [isAny] },\n        ],\n      },\n    },\n  },\n});\n\n/**\n * Normalizes any Vue `:class` binding value (string, object, array, nullish\n * or `false`) to a plain string compatible with tailwind-variants' `class`\n * parameter. Accepts Vue's runtime `ClassValue` so call sites can pass\n * `$attrs.class` directly without casting.\n */\nexport function cn(value: ClassValue | VueClassValue | undefined): string | undefined {\n  if (value == null || value === false)\n    return undefined;\n  if (typeof value === 'string')\n    return value || undefined;\n  const result = normalizeClass(value);\n  return result || undefined;\n}\n"],"mappings":";;;;AAkBA,IAAM,cAAsC;;AAG5C,IAAa,KAAqB,yBAAS,EACzC,eAAe,EAEb,QAAQ;CAEN,OAAO;EACL,QAAQ,CAAC,GAAG,YAAY,KAAI,SAAQ,OAAO,MAAM,CAAC;EAClD,QAAQ,CAAC,GAAG,YAAY,KAAI,SAAQ,OAAO,MAAM,GAAG,GAAG,MAAM,KAAK,EAAE,QAAQ,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,CAAC;EAEvG,WAAW,CAAC,GAAG,YAAY,KAAI,SAAQ,cAAc,MAAM,GAAG,aAAa;EAE3E,SAAS,CAAC,aAAa;CACzB;CACA,aAAa;EAEX,cAAc,CAAC,EAAE,YAAY,CAAC,KAAK,EAAE,CAAC;EACtC,KAAK,CAAC,EAAE,GAAG,QAAQ,KAAI,UAAS,OAAO,OAAO,EAAE,CAAC;EACjD,aAAa;GACX,EAAE,aAAa,CAAC,KAAK,EAAE;GACvB;GACA;GACA;GACA,EAAE,UAAU,CAAC,KAAK,EAAE;GACpB,EAAE,iBAAiB,CAAC,KAAK,EAAE;EAC7B;CACF;AACF,EACF,EACF,CAAC;;;;;;;AAQD,SAAgB,GAAG,OAAmE;CACpF,IAAI,SAAS,QAAQ,UAAU,OAC7B,OAAO,KAAA;CACT,IAAI,OAAO,UAAU,UACnB,OAAO,SAAS,KAAA;CAElB,OADe,eAAe,KACvB,KAAU,KAAA;AACnB"}