admin-ui-starter-kit 0.5.0 → 0.6.1

package/src/css/themes/shadcn.default.css

@@ -0,0 +1,144 @@
+/*
+ * shadcn theme — the swappable palette.
+ *
+ * This file owns only the shadcn-compatible contract: palette, radius,
+ * shadows, sidebar palette, charts, and dark/light surfaces. Product/library
+ * state, layout, density, and component knobs live in `src/css/tokens/*`.
+ */
+@theme inline {
+	--color-sidebar-ring: var(--sidebar-ring);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar: var(--sidebar);
+	--color-chart-5: var(--chart-5);
+	--color-chart-4: var(--chart-4);
+	--color-chart-3: var(--chart-3);
+	--color-chart-2: var(--chart-2);
+	--color-chart-1: var(--chart-1);
+	--color-ring: var(--ring);
+	--color-input: var(--input);
+	--color-border: var(--border);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-accent: var(--accent);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-muted: var(--muted);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-secondary: var(--secondary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-primary: var(--primary);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-popover: var(--popover);
+	--color-card-foreground: var(--card-foreground);
+	--color-card: var(--card);
+	--color-foreground: var(--foreground);
+	--color-background: var(--background);
+	--radius-sm: calc(var(--radius) * 0.6);
+	--radius-md: calc(var(--radius) * 0.8);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) * 1.4);
+	--radius-2xl: calc(var(--radius) * 1.8);
+	--radius-3xl: calc(var(--radius) * 2.2);
+	--radius-4xl: calc(var(--radius) * 2.6);
+	--shadow-2xs: var(--shadow-2xs);
+	--shadow-xs: var(--shadow-xs);
+	--shadow-sm: var(--shadow-sm);
+	--shadow: var(--shadow);
+	--shadow-md: var(--shadow-md);
+	--shadow-lg: var(--shadow-lg);
+	--shadow-xl: var(--shadow-xl);
+	--shadow-2xl: var(--shadow-2xl);
+}
+
+:root,
+.light {
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.45 0.124 167.35);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.50 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.50 0.245 27.325);
+	--destructive-foreground: oklch(0.99 0 0);
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.7533 0.1518 112.5);
+	--chart-2: oklch(0.8445 0.1696 102.34);
+	--chart-3: oklch(0.51 0.214 276.966);
+	--chart-4: oklch(0.371 0 0);
+	--chart-5: oklch(0.269 0 0);
+	--radius: 0.625rem;
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
+	--shadow-2xs: 0 1px 3px 0px oklch(0 0 0 / 0.05);
+	--shadow-xs: 0 1px 3px 0px oklch(0 0 0 / 0.05);
+	--shadow-sm: 0 1px 3px 0px oklch(0 0 0 / 0.10), 0 1px 2px -1px oklch(0 0 0 / 0.10);
+	--shadow: 0 1px 3px 0px oklch(0 0 0 / 0.10), 0 1px 2px -1px oklch(0 0 0 / 0.10);
+	--shadow-md: 0 1px 3px 0px oklch(0 0 0 / 0.10), 0 2px 4px -1px oklch(0 0 0 / 0.10);
+	--shadow-lg: 0 1px 3px 0px oklch(0 0 0 / 0.10), 0 4px 6px -1px oklch(0 0 0 / 0.10);
+	--shadow-xl: 0 1px 3px 0px oklch(0 0 0 / 0.10), 0 8px 10px -1px oklch(0 0 0 / 0.10);
+	--shadow-2xl: 0 1px 3px 0px oklch(0 0 0 / 0.25);
+}
+
+.dark {
+	--background: oklch(0.145 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.205 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--destructive-foreground: oklch(0.99 0 0);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.556 0 0);
+	--chart-1: oklch(0.87 0 0);
+	--chart-2: oklch(0.556 0 0);
+	--chart-3: oklch(0.439 0 0);
+	--chart-4: oklch(0.371 0 0);
+	--chart-5: oklch(0.269 0 0);
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.556 0 0);
+	--shadow-2xs: 0 1px 3px 0px oklch(0 0 0 / 0.05);
+	--shadow-xs: 0 1px 3px 0px oklch(0 0 0 / 0.05);
+	--shadow-sm: 0 1px 3px 0px oklch(0 0 0 / 0.10), 0 1px 2px -1px oklch(0 0 0 / 0.10);
+	--shadow: 0 1px 3px 0px oklch(0 0 0 / 0.10), 0 1px 2px -1px oklch(0 0 0 / 0.10);
+	--shadow-md: 0 1px 3px 0px oklch(0 0 0 / 0.10), 0 2px 4px -1px oklch(0 0 0 / 0.10);
+	--shadow-lg: 0 1px 3px 0px oklch(0 0 0 / 0.10), 0 4px 6px -1px oklch(0 0 0 / 0.10);
+	--shadow-xl: 0 1px 3px 0px oklch(0 0 0 / 0.10), 0 8px 10px -1px oklch(0 0 0 / 0.10);
+	--shadow-2xl: 0 1px 3px 0px oklch(0 0 0 / 0.25);
+}

package/src/css/tokens/compat.css

@@ -0,0 +1,46 @@
+/*
+ * Compatibility aliases.
+ *
+ * This layer keeps pre-split token names and legacy tone names alive while
+ * components and consumers move to the new standalone token responsibilities.
+ */
+@theme inline {
+	--color-error: var(--error);
+	--color-error-foreground: var(--error-foreground);
+	--color-main: var(--main);
+	--color-main-foreground: var(--main-foreground);
+	--color-text: var(--foreground);
+}
+
+:root,
+.light {
+	--row-py: var(--row-y);
+	--form-element-height: var(--height-control);
+	--global-border-radius: var(--rounded-radius);
+	--global-border-radius-inner: var(--rounded-radius-sm);
+	--app-shell-header-height: var(--shell-header-height);
+	--app-shell-header-control-size: var(--shell-header-control-size);
+	--app-shell-sidebar-width: var(--shell-sidebar-width);
+	--app-shell-sidebar-width-expanded: var(--shell-sidebar-width-expanded);
+	--app-shell-sidebar-width-current: var(--shell-sidebar-width-current);
+	--error: var(--destructive);
+	--error-foreground: var(--destructive-foreground);
+	--main: var(--secondary-foreground);
+	--main-foreground: var(--primary-foreground);
+}
+
+.dark {
+	--row-py: var(--row-y);
+	--form-element-height: var(--height-control);
+	--global-border-radius: var(--rounded-radius);
+	--global-border-radius-inner: var(--rounded-radius-sm);
+	--app-shell-header-height: var(--shell-header-height);
+	--app-shell-header-control-size: var(--shell-header-control-size);
+	--app-shell-sidebar-width: var(--shell-sidebar-width);
+	--app-shell-sidebar-width-expanded: var(--shell-sidebar-width-expanded);
+	--app-shell-sidebar-width-current: var(--shell-sidebar-width-current);
+	--error: var(--destructive);
+	--error-foreground: var(--destructive-foreground);
+	--main: var(--foreground);
+	--main-foreground: var(--primary-foreground);
+}

package/src/css/tokens/components.css

@@ -0,0 +1,55 @@
+/*
+ * Component-level token knobs.
+ *
+ * Use this layer for package-owned row, surface, and component adjustments
+ * that are intentionally broader than one component but not part of shadcn.
+ */
+@theme inline {
+	--spacing-row-x: var(--row-x);
+	--spacing-row-y-sm: var(--row-y-sm);
+	--spacing-row-y: var(--row-y);
+	--spacing-row-y-lg: var(--row-y-lg);
+	--spacing-surface-sm: var(--surface-x-sm);
+	--spacing-surface: var(--surface-x);
+}
+
+:root {
+	/* Rows */
+	--row-x: calc(0.75rem * var(--space-scale));
+	--row-y-sm: calc(0.375rem * var(--density-scale));
+	--row-y: calc(0.5rem * var(--density-scale));
+	--row-y-lg: calc(0.625rem * var(--density-scale));
+
+	/* Surfaces */
+	--surface-x-sm: calc(0.75rem * var(--space-scale));
+	--surface-x: calc(1rem * var(--space-scale));
+	--surface-y-sm: calc(0.75rem * var(--space-scale));
+	--surface-y: calc(1rem * var(--space-scale));
+
+	/* Narrow component knobs */
+	--popover-content-pad: 0.25rem;
+}
+
+@utility px-surface-sm {
+	padding-inline: var(--surface-x-sm);
+}
+
+@utility px-surface {
+	padding-inline: var(--surface-x);
+}
+
+@utility py-surface-sm {
+	padding-block: var(--surface-y-sm);
+}
+
+@utility py-surface {
+	padding-block: var(--surface-y);
+}
+
+@utility p-surface-sm {
+	padding: var(--surface-y-sm) var(--surface-x-sm);
+}
+
+@utility p-surface {
+	padding: var(--surface-y) var(--surface-x);
+}

package/src/css/tokens/foundation.css

@@ -0,0 +1,90 @@
+/*
+ * Foundation tokens.
+ *
+ * Fonts, type scale, global scale multipliers, and the spacing scale. These
+ * are package-owned primitives, not part of the swappable shadcn theme.
+ */
+@theme inline {
+	/* Fonts */
+	--font-heading: "Inter Variable", sans-serif;
+	--font-sans: "Inter Variable", sans-serif;
+	--font-mono: ui-monospace, "SF Mono", "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", monospace;
+
+	/* Typography */
+	--text-xxs: calc(0.625rem * var(--text-scale));
+	--text-xxs--line-height: calc(0.875rem * var(--text-scale));
+	--text-xs: calc(0.75rem * var(--text-scale));
+	--text-xs--line-height: calc(1rem * var(--text-scale));
+	--text-sm: calc(0.875rem * var(--text-scale));
+	--text-sm--line-height: calc(1.25rem * var(--text-scale));
+	--text-base: calc(1rem * var(--text-scale));
+	--text-base--line-height: calc(1.5rem * var(--text-scale));
+	--text-lg: calc(1.125rem * var(--text-scale));
+	--text-lg--line-height: calc(1.75rem * var(--text-scale));
+	--text-xl: calc(1.25rem * var(--text-scale));
+	--text-xl--line-height: calc(1.75rem * var(--text-scale));
+	--text-2xl: calc(1.5rem * var(--text-scale));
+	--text-2xl--line-height: calc(2rem * var(--text-scale));
+	--text-3xl: calc(1.875rem * var(--text-scale));
+	--text-3xl--line-height: calc(2.25rem * var(--text-scale));
+	--text-4xl: calc(2.25rem * var(--text-scale));
+	--text-4xl--line-height: calc(2.5rem * var(--text-scale));
+	--text-5xl: calc(3rem * var(--text-scale));
+	--text-5xl--line-height: 1;
+
+	/* Spacing scale */
+	--spacing-space-2xs: var(--space-2xs);
+	--spacing-space-xs: var(--space-xs);
+	--spacing-space-sm: var(--space-sm);
+	--spacing-space-md: var(--space-md);
+	--spacing-space-lg: var(--space-lg);
+	--spacing-space-xl: var(--space-xl);
+	--spacing-space-2xl: var(--space-2xl);
+}
+
+:root {
+	/* Multipliers */
+	--text-scale: 1;
+	--space-scale: 1;
+	--density-scale: 1;
+
+	/* Spacing scale */
+	--space-2xs: calc(0.125rem * var(--space-scale));
+	--space-xs: calc(0.25rem * var(--space-scale));
+	--space-sm: calc(0.375rem * var(--space-scale));
+	--space-md: calc(0.5rem * var(--space-scale));
+	--space-lg: calc(0.75rem * var(--space-scale));
+	--space-xl: calc(1rem * var(--space-scale));
+	--space-2xl: calc(1.5rem * var(--space-scale));
+}
+
+[data-density="compact"] {
+	--space-scale: 0.875;
+	--density-scale: 0.875;
+}
+
+[data-density="comfortable"] {
+	--space-scale: 1.075;
+	--density-scale: 1.075;
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+
+	html {
+		font-family: var(--font-sans);
+	}
+
+	body {
+		@apply bg-background text-foreground;
+	}
+
+	code,
+	kbd,
+	samp,
+	pre {
+		font-family: var(--font-mono);
+	}
+}

package/src/css/tokens/layout.css

@@ -0,0 +1,44 @@
+/*
+ * Layout tokens.
+ *
+ * Shell and application-frame dimensions belong here, not in the swappable
+ * shadcn theme.
+ */
+@theme inline {
+	--spacing-shell-header: var(--shell-header-height);
+	--spacing-shell-header-control: var(--shell-header-control-size);
+	--spacing-shell-sidebar: var(--shell-sidebar-width);
+}
+
+:root {
+	--shell-header-height: 4.5rem;
+	--shell-header-control-size: var(--height-action);
+	--shell-sidebar-width: 16rem;
+	--shell-sidebar-width-expanded: var(--shell-sidebar-width);
+	--shell-sidebar-width-icon: calc(3.75rem * var(--density-scale));
+	--shell-sidebar-offcanvas-width: min(20rem, calc(100vw - 2rem));
+	--shell-sidebar-width-current: var(--shell-sidebar-width-expanded);
+}
+
+@utility shell-sidebar-vars {
+	--shell-sidebar-width-expanded: var(--shell-sidebar-width);
+	--shell-sidebar-width-icon: calc(3.75rem * var(--density-scale));
+	--shell-sidebar-offcanvas-width: min(20rem, calc(100vw - 2rem));
+	--shell-sidebar-width-current: var(--shell-sidebar-width-expanded);
+}
+
+@utility shell-sidebar-icon-current {
+	--shell-sidebar-width-current: var(--shell-sidebar-width-icon);
+}
+
+@utility shell-sidebar-offcanvas-current {
+	--shell-sidebar-width-current: var(--shell-sidebar-offcanvas-width);
+}
+
+@utility shell-grid-left {
+	grid-template-columns: minmax(0, var(--shell-sidebar-width-current)) minmax(0, 1fr);
+}
+
+@utility shell-grid-right {
+	grid-template-columns: minmax(0, 1fr) minmax(0, var(--shell-sidebar-width-current));
+}

package/src/css/tokens/primitives.css

@@ -0,0 +1,263 @@
+/*
+ * Package primitives.
+ *
+ * Radius, action/control heights, control spacing, and media sizes are
+ * package-owned aliases. They can be scoped independently of the shadcn theme.
+ */
+@theme inline {
+	--radius-radius-sm: var(--rounded-radius-sm);
+	--radius-radius: var(--rounded-radius);
+	--radius-radius-lg: var(--rounded-radius-lg);
+
+	--spacing-action-xs: var(--height-action-xs);
+	--spacing-action-sm: var(--height-action-sm);
+	--spacing-action: var(--height-action);
+	--spacing-action-lg: var(--height-action-lg);
+	--spacing-control-gap-small: var(--control-gap-small);
+	--spacing-control-gap: var(--control-gap);
+	--spacing-control-px: var(--control-x);
+	--spacing-control-y-offset: var(--control-y-offset);
+	--spacing-control-icon-sm: calc(var(--control-x-sm) + var(--icon-sm) + var(--space-sm));
+	--spacing-control-icon: calc(var(--control-x) + var(--icon) + var(--space-md));
+	--spacing-control-addon-sm: calc(var(--control-x-sm) + 1.25rem);
+	--spacing-control-addon: calc(var(--control-x) + 1.5rem);
+	--spacing-control-count-sm: calc(var(--control-x-sm) + 2.25rem);
+	--spacing-control-count: calc(var(--control-x) + 2.5rem);
+	--spacing-control-actions-sm: calc(var(--control-x-sm) + 2rem);
+	--spacing-control-actions: calc(var(--control-x) + 2.25rem);
+	--spacing-control-clear: calc(1.375rem * var(--density-scale));
+	--spacing-control-clear-icon: var(--icon-sm);
+	--spacing-control-file: 1.75rem;
+	--spacing-textarea-sm: calc(4rem * var(--density-scale));
+	--spacing-textarea: calc(5rem * var(--density-scale));
+
+	--spacing-icon-sm: var(--icon-sm);
+	--spacing-icon: var(--icon);
+	--spacing-icon-lg: var(--icon-lg);
+	--spacing-avatar-sm: var(--avatar-sm);
+	--spacing-avatar: var(--avatar);
+	--spacing-avatar-lg: var(--avatar-lg);
+	--spacing-upload-avatar-small: var(--upload-avatar-small);
+	--spacing-upload-avatar: var(--upload-avatar);
+	--spacing-upload-avatar-large: var(--upload-avatar-large);
+}
+
+:root {
+	--rounded-radius-sm: calc(var(--radius) * 0.6);
+	--rounded-radius: var(--radius);
+	--rounded-radius-lg: calc(var(--radius) * 1.4);
+
+	--height-action-xs: calc(1.75rem * var(--density-scale));
+	--height-action-sm: calc(2rem * var(--density-scale));
+	--height-action: calc(2.25rem * var(--density-scale));
+	--height-action-lg: calc(2.5rem * var(--density-scale));
+	--height-control-sm: calc(2rem * var(--density-scale));
+	--height-control: calc(2.25rem * var(--density-scale));
+	--height-control-lg: calc(2.5rem * var(--density-scale));
+
+	/* Existing control aliases stay stable while new primitives roll out. */
+	--control-height-sm: var(--height-control-sm);
+	--control-height: var(--height-control);
+	--control-height-lg: var(--height-control-lg);
+	--control-x-sm: calc(0.625rem * var(--space-scale));
+	--control-x: calc(0.75rem * var(--space-scale));
+	--control-gap-small: var(--space-sm);
+	--control-gap: var(--space-md);
+	--control-y-offset: var(--space-xs);
+
+	/* Media */
+	--icon-sm: calc(0.75rem * var(--space-scale));
+	--icon: calc(1rem * var(--space-scale));
+	--icon-lg: calc(1.25rem * var(--space-scale));
+	--avatar-sm: calc(1.5rem * var(--space-scale));
+	--avatar: calc(2rem * var(--space-scale));
+	--avatar-lg: calc(2.5rem * var(--space-scale));
+	--upload-avatar-small: calc(4rem * var(--space-scale));
+	--upload-avatar: calc(5rem * var(--space-scale));
+	--upload-avatar-large: calc(6rem * var(--space-scale));
+}
+
+@utility h-control-sm {
+	height: var(--height-control-sm);
+}
+
+@utility h-control {
+	height: var(--height-control);
+}
+
+@utility h-control-lg {
+	height: var(--height-control-lg);
+}
+
+@utility h-action-xs {
+	height: var(--height-action-xs);
+}
+
+@utility h-action-sm {
+	height: var(--height-action-sm);
+}
+
+@utility h-action {
+	height: var(--height-action);
+}
+
+@utility h-action-lg {
+	height: var(--height-action-lg);
+}
+
+@utility min-h-control-sm {
+	min-height: var(--height-control-sm);
+}
+
+@utility min-h-control {
+	min-height: var(--height-control);
+}
+
+@utility min-h-control-lg {
+	min-height: var(--height-control-lg);
+}
+
+@utility w-control-small {
+	width: var(--height-control-sm);
+}
+
+@utility w-control-sm {
+	width: var(--height-control-sm);
+}
+
+@utility w-control {
+	width: var(--height-control);
+}
+
+@utility w-control-lg {
+	width: var(--height-control-lg);
+}
+
+@utility size-control-sm {
+	width: var(--height-control-sm);
+	height: var(--height-control-sm);
+}
+
+@utility size-control {
+	width: var(--height-control);
+	height: var(--height-control);
+}
+
+@utility size-control-lg {
+	width: var(--height-control-lg);
+	height: var(--height-control-lg);
+}
+
+@utility size-action-xs {
+	width: var(--height-action-xs);
+	height: var(--height-action-xs);
+}
+
+@utility size-action-sm {
+	width: var(--height-action-sm);
+	height: var(--height-action-sm);
+}
+
+@utility size-action {
+	width: var(--height-action);
+	height: var(--height-action);
+}
+
+@utility size-action-lg {
+	width: var(--height-action-lg);
+	height: var(--height-action-lg);
+}
+
+@utility px-control-sm {
+	padding-inline: var(--control-x-sm);
+}
+
+@utility px-control {
+	padding-inline: var(--control-x);
+}
+
+@utility ps-control-sm {
+	padding-inline-start: var(--control-x-sm);
+}
+
+@utility ps-control {
+	padding-inline-start: var(--control-x);
+}
+
+@utility pe-control-sm {
+	padding-inline-end: var(--control-x-sm);
+}
+
+@utility pe-control {
+	padding-inline-end: var(--control-x);
+}
+
+@utility ps-control-icon-sm {
+	padding-inline-start: calc(var(--control-x-sm) + var(--icon-sm) + var(--space-sm));
+}
+
+@utility ps-control-icon {
+	padding-inline-start: calc(var(--control-x) + var(--icon) + var(--space-md));
+}
+
+@utility pe-control-icon-sm {
+	padding-inline-end: calc(var(--control-x-sm) + var(--icon-sm) + var(--space-sm));
+}
+
+@utility pe-control-icon {
+	padding-inline-end: calc(var(--control-x) + var(--icon) + var(--space-md));
+}
+
+@utility ps-control-addon-sm {
+	padding-inline-start: calc(var(--control-x-sm) + 1.25rem);
+}
+
+@utility ps-control-addon {
+	padding-inline-start: calc(var(--control-x) + 1.5rem);
+}
+
+@utility pe-control-addon-sm {
+	padding-inline-end: calc(var(--control-x-sm) + 1.25rem);
+}
+
+@utility pe-control-addon {
+	padding-inline-end: calc(var(--control-x) + 1.5rem);
+}
+
+@utility pe-control-count-sm {
+	padding-inline-end: calc(var(--control-x-sm) + 2.25rem);
+}
+
+@utility pe-control-count {
+	padding-inline-end: calc(var(--control-x) + 2.5rem);
+}
+
+@utility pe-control-actions-sm {
+	padding-inline-end: calc(var(--control-x-sm) + 2rem);
+}
+
+@utility pe-control-actions {
+	padding-inline-end: calc(var(--control-x) + 2.25rem);
+}
+
+@utility size-control-clear {
+	width: calc(1.375rem * var(--density-scale));
+	height: calc(1.375rem * var(--density-scale));
+}
+
+@utility size-control-clear-icon {
+	width: var(--icon-sm);
+	height: var(--icon-sm);
+}
+
+@utility h-control-file {
+	height: 1.75rem;
+}
+
+@utility min-h-textarea-sm {
+	min-height: calc(4rem * var(--density-scale));
+}
+
+@utility min-h-textarea {
+	min-height: calc(5rem * var(--density-scale));
+}

package/src/css/tokens/states.css

@@ -0,0 +1,58 @@
+/*
+ * Package-owned state tokens.
+ *
+ * These extend the shadcn palette with semantic meanings used by the package.
+ * Product tokens may reference shadcn tokens; the shadcn theme does not
+ * reference these tokens back.
+ */
+@theme inline {
+	--color-success: var(--success);
+	--color-success-foreground: var(--success-foreground);
+	--color-info: var(--info);
+	--color-info-foreground: var(--info-foreground);
+	--color-warning: var(--warning);
+	--color-warning-foreground: var(--warning-foreground);
+	--color-inverse-foreground: var(--inverse-foreground);
+	--color-inverse-muted: var(--inverse-muted);
+	--color-inverse-subtle: var(--inverse-subtle);
+	--color-inverse-disabled: var(--inverse-disabled);
+	--color-inverse-surface: var(--inverse-surface);
+	--color-inverse-surface-strong: var(--inverse-surface-strong);
+	--color-inverse-border: var(--inverse-border);
+	--color-inverse-decoration: var(--inverse-decoration);
+}
+
+:root,
+.light {
+	--success: oklch(0.43 0.124 167.35);
+	--success-foreground: var(--primary-foreground);
+	--info: oklch(0.45 0.214 276.966);
+	--info-foreground: oklch(0.99 0 0);
+	--warning: oklch(0.72 0.16 90);
+	--warning-foreground: oklch(0.2 0.05 80);
+	--inverse-foreground: oklch(0.985 0 0);
+	--inverse-muted: oklch(0.985 0 0 / 0.74);
+	--inverse-subtle: oklch(0.985 0 0 / 0.58);
+	--inverse-disabled: oklch(0.985 0 0 / 0.42);
+	--inverse-surface: oklch(0.985 0 0 / 0.12);
+	--inverse-surface-strong: oklch(0.985 0 0 / 0.22);
+	--inverse-border: oklch(0.985 0 0 / 0.18);
+	--inverse-decoration: oklch(0.985 0 0 / 0.06);
+}
+
+.dark {
+	--success: var(--primary);
+	--success-foreground: var(--primary-foreground);
+	--info: var(--chart-3);
+	--info-foreground: oklch(0.985 0 0);
+	--warning: oklch(0.82 0.16 90);
+	--warning-foreground: oklch(0.18 0.05 80);
+	--inverse-foreground: oklch(0.985 0 0);
+	--inverse-muted: oklch(0.985 0 0 / 0.74);
+	--inverse-subtle: oklch(0.985 0 0 / 0.58);
+	--inverse-disabled: oklch(0.985 0 0 / 0.42);
+	--inverse-surface: oklch(0.985 0 0 / 0.12);
+	--inverse-surface-strong: oklch(0.985 0 0 / 0.22);
+	--inverse-border: oklch(0.985 0 0 / 0.18);
+	--inverse-decoration: oklch(0.985 0 0 / 0.06);
+}