@ecopages/radiant-ui 0.1.0-beta.0 → 0.1.0-beta.2

package/dist/styles/tokens/semantic.css

@@ -1,80 +1,446 @@
-/**
- * Semantic color roles — Storybook brand presets + Tailwind bridge.
- * Load `colors/palettes.css` before this file.
- */
-@import './presets/colors/index.css';
-
-@theme {
-	--color-transparent: transparent;
-
-	--color-gray-50: var(--gray-50);
-	--color-gray-100: var(--gray-100);
-	--color-gray-200: var(--gray-200);
-	--color-gray-300: var(--gray-300);
-	--color-gray-400: var(--gray-400);
-	--color-gray-500: var(--gray-500);
-	--color-gray-600: var(--gray-600);
-	--color-gray-700: var(--gray-700);
-	--color-gray-800: var(--gray-800);
-	--color-gray-900: var(--gray-900);
-	--color-gray-950: var(--gray-950);
-
-	--color-primary: var(--primary);
-	--color-primary-light: var(--primary-light);
-	--color-primary-dark: var(--primary-dark);
-	--color-on-primary: var(--on-primary);
-	--color-primary-container: var(--primary-container);
-	--color-on-primary-container: var(--on-primary-container);
-
-	--color-secondary: var(--secondary);
-	--color-secondary-light: var(--secondary-light);
-	--color-secondary-dark: var(--secondary-dark);
-	--color-on-secondary: var(--on-secondary);
-	--color-secondary-container: var(--secondary-container);
-	--color-on-secondary-container: var(--on-secondary-container);
-
-	--color-tertiary: var(--tertiary);
-	--color-on-tertiary: var(--on-tertiary);
-	--color-tertiary-container: var(--tertiary-container);
-	--color-on-tertiary-container: var(--on-tertiary-container);
-
-	--color-error: var(--error);
-	--color-error-light: var(--error-light);
-	--color-error-dark: var(--error-dark);
-	--color-on-error: var(--on-error);
-	--color-error-container: var(--error-container);
-	--color-on-error-container: var(--on-error-container);
-
-	--color-success: var(--success);
-	--color-success-light: var(--success-light);
-	--color-success-dark: var(--success-dark);
-	--color-on-success: var(--on-success);
-	--color-success-container: var(--success-container);
-	--color-on-success-container: var(--on-success-container);
-
-	--color-neutral: var(--neutral);
-
-	--color-surface: var(--surface);
-	--color-on-surface: var(--on-surface);
-	--color-surface-container-lowest: var(--surface-container-lowest);
-	--color-on-surface-container-lowest: var(--on-surface-container-lowest);
-	--color-surface-container-low: var(--surface-container-low);
-	--color-on-surface-container-low: var(--on-surface-container-low);
-	--color-surface-container: var(--surface-container);
-	--color-on-surface-container: var(--on-surface-container);
-	--color-surface-container-high: var(--surface-container-high);
-	--color-on-surface-container-high: var(--on-surface-container-high);
-	--color-surface-container-highest: var(--surface-container-highest);
-	--color-on-surface-container-highest: var(--on-surface-container-highest);
-
-	--color-background: var(--background);
-	--color-on-background: var(--on-background);
-
-	--color-border: var(--border);
-	--color-focus-ring: var(--focus-ring);
-	--color-link: var(--link);
-	--color-overlay: var(--overlay);
-
-	--color-background-code: var(--background-code);
-	--color-on-background-code: var(--on-background-code);
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+html[data-rui-colors='glacier'], html:not([data-rui-colors]) {
+  --gray-50: var(--color-glacier-white-50);
+  --gray-100: var(--color-glacier-white-100);
+  --gray-200: var(--color-glacier-white-200);
+  --gray-300: var(--color-glacier-white-300);
+  --gray-400: var(--color-glacier-white-400);
+  --gray-500: var(--color-glacier-white-500);
+  --gray-600: var(--color-glacier-white-600);
+  --gray-700: var(--color-glacier-white-700);
+  --gray-800: var(--color-glacier-white-800);
+  --gray-900: var(--color-glacier-white-900);
+  --gray-950: var(--color-glacier-white-950);
+  --primary: var(--color-night-sky-500);
+  --on-primary: var(--color-glacier-white-50);
+  --primary-container: var(--color-night-sky-100);
+  --on-primary-container: var(--color-night-sky-900);
+  --primary-light: var(--color-night-sky-400);
+  --primary-dark: var(--color-night-sky-700);
+  --secondary: var(--color-scarlet-500);
+  --on-secondary: var(--color-glacier-white-50);
+  --secondary-container: var(--color-scarlet-100);
+  --on-secondary-container: var(--color-scarlet-900);
+  --secondary-light: var(--color-scarlet-400);
+  --secondary-dark: var(--color-scarlet-700);
+  --tertiary: var(--color-navy-blue-700);
+  --on-tertiary: var(--color-glacier-white-50);
+  --tertiary-container: var(--color-night-sky-100);
+  --on-tertiary-container: var(--color-navy-blue-700);
+  --error: var(--color-scarlet-600);
+  --on-error: var(--color-glacier-white-50);
+  --error-container: var(--color-scarlet-100);
+  --on-error-container: var(--color-scarlet-900);
+  --error-light: var(--color-scarlet-400);
+  --error-dark: var(--color-scarlet-800);
+  --success: var(--color-night-sky-600);
+  --on-success: var(--color-glacier-white-50);
+  --success-container: var(--color-night-sky-100);
+  --on-success-container: var(--color-night-sky-900);
+  --success-light: var(--color-night-sky-400);
+  --success-dark: var(--color-night-sky-800);
+  --neutral: var(--color-glacier-white-500);
+  --surface: var(--color-glacier-white-100);
+  --on-surface: var(--color-glacier-white-900);
+  --surface-container-lowest: var(--color-glacier-white-100);
+  --on-surface-container-lowest: var(--color-glacier-white-900);
+  --surface-container-low: var(--color-glacier-white-200);
+  --on-surface-container-low: var(--color-glacier-white-900);
+  --surface-container: var(--color-glacier-white-300);
+  --on-surface-container: var(--color-glacier-white-900);
+  --surface-container-high: var(--color-glacier-white-400);
+  --on-surface-container-high: var(--color-glacier-white-900);
+  --surface-container-highest: var(--color-glacier-white-500);
+  --on-surface-container-highest: var(--color-glacier-white-950);
+  --background: var(--color-glacier-white-50);
+  --on-background: var(--color-glacier-white-900);
+  --border: var(--color-glacier-white-900);
+  @supports (color: color-mix(in lab, red, red)) {
+    --border: color-mix(in oklab, var(--color-glacier-white-900) 15%, transparent);
+  }
+  --focus-ring: var(--color-night-sky-500);
+  --link: var(--color-navy-blue-700);
+  --overlay: oklch(0% 0 0 / 0.45);
+  --background-code: var(--color-glacier-white-100);
+  --on-background-code: var(--color-laser-lemon-800);
+}
+html.dark[data-rui-colors='glacier'], html.dark:not([data-rui-colors]) {
+  --primary: var(--color-night-sky-400);
+  --on-primary: var(--color-glacier-white-950);
+  --primary-container: var(--color-night-sky-800);
+  --on-primary-container: var(--color-night-sky-50);
+  --primary-light: var(--color-night-sky-300);
+  --primary-dark: var(--color-night-sky-600);
+  --secondary: var(--color-scarlet-500);
+  --on-secondary: var(--color-glacier-white-950);
+  --secondary-container: var(--color-scarlet-800);
+  --on-secondary-container: var(--color-scarlet-100);
+  --secondary-light: var(--color-scarlet-400);
+  --secondary-dark: var(--color-scarlet-700);
+  --tertiary: var(--color-navy-blue-400);
+  --on-tertiary: var(--color-glacier-white-950);
+  --tertiary-container: var(--color-night-sky-800);
+  --on-tertiary-container: var(--color-navy-blue-400);
+  --error: var(--color-scarlet-500);
+  --on-error: var(--color-glacier-white-950);
+  --error-container: var(--color-scarlet-800);
+  --on-error-container: var(--color-scarlet-100);
+  --success: var(--color-night-sky-400);
+  --on-success: var(--color-glacier-white-950);
+  --success-container: var(--color-night-sky-800);
+  --on-success-container: var(--color-night-sky-100);
+  --surface: var(--color-glacier-white-900);
+  --on-surface: var(--color-glacier-white-50);
+  --surface-container-lowest: var(--color-glacier-white-950);
+  --on-surface-container-lowest: var(--color-glacier-white-50);
+  --surface-container-low: var(--color-glacier-white-900);
+  --on-surface-container-low: var(--color-glacier-white-50);
+  --surface-container: var(--color-glacier-white-800);
+  --on-surface-container: var(--color-glacier-white-50);
+  --surface-container-high: var(--color-glacier-white-700);
+  --on-surface-container-high: var(--color-glacier-white-50);
+  --surface-container-highest: var(--color-glacier-white-600);
+  --on-surface-container-highest: var(--color-glacier-white-50);
+  --background: var(--color-glacier-white-950);
+  --on-background: var(--color-glacier-white-50);
+  --border: var(--color-glacier-white-50);
+  @supports (color: color-mix(in lab, red, red)) {
+    --border: color-mix(in oklab, var(--color-glacier-white-50) 18%, transparent);
+  }
+  --focus-ring: var(--color-night-sky-400);
+  --link: var(--color-navy-blue-400);
+  --overlay: oklch(0% 0 0 / 0.65);
+  --background-code: var(--color-glacier-white-900);
+  --on-background-code: var(--color-laser-lemon-300);
+}
+html[data-rui-colors='aurora'] {
+  --gray-50: var(--color-pale-sky-50);
+  --gray-100: var(--color-pale-sky-100);
+  --gray-200: var(--color-pale-sky-200);
+  --gray-300: var(--color-pale-sky-300);
+  --gray-400: var(--color-pale-sky-400);
+  --gray-500: var(--color-pale-sky-500);
+  --gray-600: var(--color-pale-sky-600);
+  --gray-700: var(--color-pale-sky-700);
+  --gray-800: var(--color-pale-sky-800);
+  --gray-900: var(--color-pale-sky-900);
+  --gray-950: var(--color-pale-sky-950);
+  --primary: var(--color-havelock-blue-800);
+  --on-primary: var(--color-white);
+  --primary-container: var(--color-havelock-blue-100);
+  --on-primary-container: var(--color-havelock-blue-800);
+  --primary-light: var(--color-havelock-blue-500);
+  --primary-dark: var(--color-havelock-blue-900);
+  --secondary: var(--color-hit-pink-600);
+  --on-secondary: var(--color-black);
+  --secondary-container: var(--color-hit-pink-100);
+  --on-secondary-container: var(--color-hit-pink-800);
+  --secondary-light: var(--color-hit-pink-400);
+  --secondary-dark: var(--color-hit-pink-800);
+  --tertiary: var(--color-fruit-salad-700);
+  --on-tertiary: var(--color-white);
+  --tertiary-container: var(--color-fruit-salad-100);
+  --on-tertiary-container: var(--color-fruit-salad-800);
+  --error: var(--color-cardinal-600);
+  --on-error: var(--color-white);
+  --error-container: var(--color-cardinal-100);
+  --on-error-container: var(--color-cardinal-800);
+  --error-light: var(--color-cardinal-400);
+  --error-dark: var(--color-cardinal-800);
+  --success: var(--color-fruit-salad-600);
+  --on-success: var(--color-white);
+  --success-container: var(--color-fruit-salad-100);
+  --on-success-container: var(--color-fruit-salad-800);
+  --success-light: var(--color-fruit-salad-400);
+  --success-dark: var(--color-fruit-salad-800);
+  --neutral: var(--color-pale-sky-500);
+  --surface: var(--color-pale-sky-50);
+  --on-surface: var(--color-black);
+  --surface-container-lowest: var(--color-pale-sky-100);
+  --on-surface-container-lowest: var(--color-black);
+  --surface-container-low: var(--color-pale-sky-200);
+  --on-surface-container-low: var(--color-black);
+  --surface-container: var(--color-pale-sky-300);
+  --on-surface-container: var(--color-black);
+  --surface-container-high: var(--color-pale-sky-400);
+  --on-surface-container-high: var(--color-black);
+  --surface-container-highest: var(--color-pale-sky-500);
+  --on-surface-container-highest: var(--color-black);
+  --background: var(--color-white);
+  --on-background: var(--color-black);
+  --border: var(--color-pale-sky-400);
+  --focus-ring: var(--color-havelock-blue-500);
+  --link: var(--color-havelock-blue-700);
+  --overlay: oklch(0% 0 0 / 0.4);
+  --background-code: var(--color-pale-sky-900);
+  --on-background-code: var(--color-fruit-salad-300);
+}
+html.dark[data-rui-colors='aurora'] {
+  --primary: var(--color-havelock-blue-200);
+  --on-primary: var(--color-black);
+  --primary-container: var(--color-havelock-blue-800);
+  --on-primary-container: var(--color-havelock-blue-50);
+  --primary-light: var(--color-havelock-blue-300);
+  --primary-dark: var(--color-havelock-blue-900);
+  --secondary: var(--color-hit-pink-200);
+  --on-secondary: var(--color-black);
+  --secondary-container: var(--color-hit-pink-800);
+  --on-secondary-container: var(--color-hit-pink-50);
+  --tertiary: var(--color-fruit-salad-200);
+  --on-tertiary: var(--color-black);
+  --tertiary-container: var(--color-fruit-salad-800);
+  --on-tertiary-container: var(--color-fruit-salad-50);
+  --error: var(--color-cardinal-200);
+  --on-error: var(--color-black);
+  --error-container: var(--color-cardinal-800);
+  --on-error-container: var(--color-cardinal-50);
+  --success: var(--color-fruit-salad-200);
+  --on-success: var(--color-black);
+  --success-container: var(--color-fruit-salad-800);
+  --on-success-container: var(--color-fruit-salad-50);
+  --surface: var(--color-pale-sky-975);
+  --on-surface: var(--color-white);
+  --surface-container-lowest: var(--color-pale-sky-950);
+  --on-surface-container-lowest: var(--color-white);
+  --surface-container-low: var(--color-pale-sky-900);
+  --on-surface-container-low: var(--color-white);
+  --surface-container: var(--color-pale-sky-800);
+  --on-surface-container: var(--color-white);
+  --surface-container-high: var(--color-pale-sky-700);
+  --on-surface-container-high: var(--color-white);
+  --surface-container-highest: var(--color-pale-sky-600);
+  --on-surface-container-highest: var(--color-white);
+  --background: var(--color-black);
+  --on-background: var(--color-white);
+  --border: var(--color-pale-sky-700);
+  --focus-ring: var(--color-havelock-blue-400);
+  --link: var(--color-havelock-blue-300);
+  --overlay: oklch(0% 0 0 / 0.6);
+  --background-code: var(--color-pale-sky-950);
+  --on-background-code: var(--color-fruit-salad-200);
+}
+html[data-rui-colors='basalt'] {
+  --gray-50: var(--color-basalt-50);
+  --gray-100: var(--color-basalt-100);
+  --gray-200: var(--color-basalt-200);
+  --gray-300: var(--color-basalt-300);
+  --gray-400: var(--color-basalt-400);
+  --gray-500: var(--color-basalt-500);
+  --gray-600: var(--color-basalt-600);
+  --gray-700: var(--color-basalt-700);
+  --gray-800: var(--color-basalt-800);
+  --gray-900: var(--color-basalt-900);
+  --gray-950: var(--color-basalt-950);
+  --primary: var(--color-carbon-blue-500);
+  --on-primary: var(--color-white);
+  --primary-container: var(--color-carbon-blue-100);
+  --on-primary-container: var(--color-carbon-blue-800);
+  --primary-light: var(--color-carbon-blue-400);
+  --primary-dark: var(--color-carbon-blue-700);
+  --secondary: var(--color-carbon-teal-600);
+  --on-secondary: var(--color-white);
+  --secondary-container: var(--color-basalt-200);
+  --on-secondary-container: var(--color-basalt-900);
+  --secondary-light: var(--color-carbon-teal-400);
+  --secondary-dark: var(--color-basalt-800);
+  --tertiary: var(--color-basalt-700);
+  --on-tertiary: var(--color-white);
+  --tertiary-container: var(--color-basalt-200);
+  --on-tertiary-container: var(--color-basalt-900);
+  --error: var(--color-carbon-red-600);
+  --on-error: var(--color-white);
+  --error-container: var(--color-carbon-red-100);
+  --on-error-container: var(--color-carbon-red-800);
+  --error-light: var(--color-carbon-red-500);
+  --error-dark: var(--color-carbon-red-800);
+  --success: var(--color-carbon-teal-600);
+  --on-success: var(--color-white);
+  --success-container: var(--color-basalt-200);
+  --on-success-container: var(--color-basalt-900);
+  --success-light: var(--color-carbon-teal-400);
+  --success-dark: var(--color-basalt-800);
+  --neutral: var(--color-basalt-500);
+  --surface: var(--color-basalt-100);
+  --on-surface: var(--color-basalt-900);
+  --surface-container-lowest: var(--color-basalt-100);
+  --on-surface-container-lowest: var(--color-basalt-900);
+  --surface-container-low: var(--color-basalt-200);
+  --on-surface-container-low: var(--color-basalt-900);
+  --surface-container: var(--color-basalt-300);
+  --on-surface-container: var(--color-basalt-900);
+  --surface-container-high: var(--color-basalt-400);
+  --on-surface-container-high: var(--color-basalt-950);
+  --surface-container-highest: var(--color-basalt-500);
+  --on-surface-container-highest: var(--color-basalt-950);
+  --background: var(--color-basalt-50);
+  --on-background: var(--color-basalt-900);
+  --border: var(--color-basalt-400);
+  --focus-ring: var(--color-carbon-blue-500);
+  --link: var(--color-carbon-blue-600);
+  --overlay: oklch(0% 0 0 / 0.5);
+  --background-code: var(--color-basalt-900);
+  --on-background-code: var(--color-carbon-teal-400);
+}
+html.dark[data-rui-colors='basalt'] {
+  --primary: var(--color-carbon-blue-400);
+  --on-primary: var(--color-basalt-950);
+  --primary-container: var(--color-carbon-blue-800);
+  --on-primary-container: var(--color-carbon-blue-100);
+  --primary-light: var(--color-carbon-blue-300);
+  --primary-dark: var(--color-carbon-blue-700);
+  --secondary: var(--color-carbon-teal-400);
+  --on-secondary: var(--color-basalt-950);
+  --secondary-container: var(--color-basalt-800);
+  --on-secondary-container: var(--color-basalt-100);
+  --tertiary: var(--color-basalt-300);
+  --on-tertiary: var(--color-basalt-950);
+  --tertiary-container: var(--color-basalt-800);
+  --on-tertiary-container: var(--color-basalt-100);
+  --error: var(--color-carbon-red-500);
+  --on-error: var(--color-basalt-950);
+  --error-container: var(--color-carbon-red-800);
+  --on-error-container: var(--color-carbon-red-100);
+  --success: var(--color-carbon-teal-400);
+  --on-success: var(--color-basalt-950);
+  --success-container: var(--color-basalt-800);
+  --on-success-container: var(--color-basalt-100);
+  --surface: var(--color-basalt-975);
+  --on-surface: var(--color-basalt-50);
+  --surface-container-lowest: var(--color-basalt-950);
+  --on-surface-container-lowest: var(--color-basalt-50);
+  --surface-container-low: var(--color-basalt-900);
+  --on-surface-container-low: var(--color-basalt-50);
+  --surface-container: var(--color-basalt-800);
+  --on-surface-container: var(--color-basalt-50);
+  --surface-container-high: var(--color-basalt-700);
+  --on-surface-container-high: var(--color-basalt-50);
+  --surface-container-highest: var(--color-basalt-600);
+  --on-surface-container-highest: var(--color-basalt-50);
+  --background: var(--color-basalt-950);
+  --on-background: var(--color-basalt-50);
+  --border: var(--color-basalt-700);
+  --focus-ring: var(--color-carbon-blue-400);
+  --link: var(--color-carbon-blue-400);
+  --overlay: oklch(0% 0 0 / 0.7);
+  --background-code: var(--color-basalt-975);
+  --on-background-code: var(--color-carbon-teal-400);
+}
+html[data-rui-colors='ember'] {
+  --gray-50: var(--color-glacier-white-50);
+  --gray-100: var(--color-glacier-white-100);
+  --gray-200: var(--color-glacier-white-200);
+  --gray-300: var(--color-glacier-white-300);
+  --gray-400: var(--color-glacier-white-400);
+  --gray-500: var(--color-glacier-white-500);
+  --gray-600: var(--color-glacier-white-600);
+  --gray-700: var(--color-glacier-white-700);
+  --gray-800: var(--color-glacier-white-800);
+  --gray-900: var(--color-glacier-white-900);
+  --gray-950: var(--color-glacier-white-950);
+  --primary: var(--color-scarlet-600);
+  --on-primary: var(--color-glacier-white-50);
+  --primary-container: var(--color-scarlet-100);
+  --on-primary-container: var(--color-scarlet-900);
+  --primary-light: var(--color-scarlet-400);
+  --primary-dark: var(--color-scarlet-800);
+  --secondary: var(--color-night-sky-600);
+  --on-secondary: var(--color-glacier-white-50);
+  --secondary-container: var(--color-night-sky-100);
+  --on-secondary-container: var(--color-night-sky-900);
+  --secondary-light: var(--color-night-sky-400);
+  --secondary-dark: var(--color-night-sky-800);
+  --tertiary: var(--color-laser-lemon-800);
+  --on-tertiary: var(--color-glacier-white-50);
+  --tertiary-container: var(--color-glacier-white-200);
+  --on-tertiary-container: var(--color-glacier-white-900);
+  --error: var(--color-scarlet-700);
+  --on-error: var(--color-glacier-white-50);
+  --error-container: var(--color-scarlet-100);
+  --on-error-container: var(--color-scarlet-900);
+  --error-light: var(--color-scarlet-500);
+  --error-dark: var(--color-scarlet-900);
+  --success: var(--color-night-sky-600);
+  --on-success: var(--color-glacier-white-50);
+  --success-container: var(--color-night-sky-100);
+  --on-success-container: var(--color-night-sky-900);
+  --success-light: var(--color-night-sky-400);
+  --success-dark: var(--color-night-sky-800);
+  --neutral: var(--color-glacier-white-500);
+  --surface: var(--color-glacier-white-100);
+  --on-surface: var(--color-glacier-white-900);
+  --surface-container-lowest: var(--color-glacier-white-100);
+  --on-surface-container-lowest: var(--color-glacier-white-900);
+  --surface-container-low: var(--color-glacier-white-200);
+  --on-surface-container-low: var(--color-glacier-white-900);
+  --surface-container: var(--color-glacier-white-300);
+  --on-surface-container: var(--color-glacier-white-900);
+  --surface-container-high: var(--color-glacier-white-400);
+  --on-surface-container-high: var(--color-glacier-white-900);
+  --surface-container-highest: var(--color-glacier-white-500);
+  --on-surface-container-highest: var(--color-glacier-white-950);
+  --background: var(--color-glacier-white-50);
+  --on-background: var(--color-glacier-white-900);
+  --border: var(--color-glacier-white-900);
+  @supports (color: color-mix(in lab, red, red)) {
+    --border: color-mix(in oklab, var(--color-glacier-white-900) 12%, transparent);
+  }
+  --focus-ring: var(--color-scarlet-500);
+  --link: var(--color-scarlet-700);
+  --overlay: oklch(0% 0 0 / 0.42);
+  --background-code: var(--color-glacier-white-100);
+  --on-background-code: var(--color-scarlet-800);
+}
+html.dark[data-rui-colors='ember'] {
+  --primary: var(--color-scarlet-400);
+  --on-primary: var(--color-glacier-white-950);
+  --primary-container: var(--color-scarlet-800);
+  --on-primary-container: var(--color-scarlet-100);
+  --primary-light: var(--color-scarlet-300);
+  --primary-dark: var(--color-scarlet-800);
+  --secondary: var(--color-night-sky-400);
+  --on-secondary: var(--color-glacier-white-950);
+  --secondary-container: var(--color-night-sky-800);
+  --on-secondary-container: var(--color-night-sky-100);
+  --secondary-light: var(--color-night-sky-300);
+  --secondary-dark: var(--color-night-sky-700);
+  --tertiary: var(--color-laser-lemon-300);
+  --on-tertiary: var(--color-glacier-white-950);
+  --tertiary-container: var(--color-glacier-white-800);
+  --on-tertiary-container: var(--color-laser-lemon-300);
+  --error: var(--color-scarlet-500);
+  --on-error: var(--color-glacier-white-950);
+  --error-container: var(--color-scarlet-800);
+  --on-error-container: var(--color-scarlet-100);
+  --error-light: var(--color-scarlet-400);
+  --error-dark: var(--color-scarlet-900);
+  --success: var(--color-night-sky-400);
+  --on-success: var(--color-glacier-white-950);
+  --success-container: var(--color-night-sky-800);
+  --on-success-container: var(--color-night-sky-100);
+  --success-light: var(--color-night-sky-300);
+  --success-dark: var(--color-night-sky-700);
+  --neutral: var(--color-glacier-white-500);
+  --surface: var(--color-glacier-white-900);
+  --on-surface: var(--color-glacier-white-50);
+  --surface-container-lowest: var(--color-glacier-white-950);
+  --on-surface-container-lowest: var(--color-glacier-white-50);
+  --surface-container-low: var(--color-glacier-white-900);
+  --on-surface-container-low: var(--color-glacier-white-50);
+  --surface-container: var(--color-glacier-white-800);
+  --on-surface-container: var(--color-glacier-white-50);
+  --surface-container-high: var(--color-glacier-white-700);
+  --on-surface-container-high: var(--color-glacier-white-50);
+  --surface-container-highest: var(--color-glacier-white-600);
+  --on-surface-container-highest: var(--color-glacier-white-50);
+  --background: var(--color-glacier-white-950);
+  --on-background: var(--color-glacier-white-50);
+  --border: var(--color-glacier-white-50);
+  @supports (color: color-mix(in lab, red, red)) {
+    --border: color-mix(in oklab, var(--color-glacier-white-50) 16%, transparent);
+  }
+  --focus-ring: var(--color-scarlet-400);
+  --link: var(--color-scarlet-400);
+  --overlay: oklch(0% 0 0 / 0.62);
+  --background-code: var(--color-glacier-white-900);
+  --on-background-code: var(--color-scarlet-300);
 }

package/dist/styles/tokens/spacing/compact.css

@@ -1,23 +1,18 @@
-@import './scale-bridge.css';
-
-/**
- * Compact spacing pack.
- */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 :root {
-	--space-1: 0.125rem;
-	--space-2: 0.25rem;
-	--space-3: 0.375rem;
-	--space-4: 0.5rem;
-	--space-5: 0.625rem;
-	--space-6: 0.75rem;
-	--space-8: 1rem;
-	--space-10: 1.25rem;
-	--space-12: 1.5rem;
-	--space-16: 2rem;
-
-	--space-control-x: var(--space-2);
-	--space-control-y: var(--space-1);
-	--space-inline: var(--space-1);
-	--space-stack: var(--space-3);
-	--space-inset: var(--space-3);
+  --space-1: 0.125rem;
+  --space-2: 0.25rem;
+  --space-3: 0.375rem;
+  --space-4: 0.5rem;
+  --space-5: 0.625rem;
+  --space-6: 0.75rem;
+  --space-8: 1rem;
+  --space-10: 1.25rem;
+  --space-12: 1.5rem;
+  --space-16: 2rem;
+  --space-control-x: var(--space-2);
+  --space-control-y: var(--space-1);
+  --space-inline: var(--space-1);
+  --space-stack: var(--space-3);
+  --space-inset: var(--space-3);
 }

package/dist/styles/tokens/spacing/default.css

@@ -1,23 +1,18 @@
-@import './scale-bridge.css';
-
-/**
- * Default spacing pack — comfortable density.
- */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 :root {
-	--space-1: 0.25rem;
-	--space-2: 0.5rem;
-	--space-3: 0.75rem;
-	--space-4: 1rem;
-	--space-5: 1.25rem;
-	--space-6: 1.5rem;
-	--space-8: 2rem;
-	--space-10: 2.5rem;
-	--space-12: 3rem;
-	--space-16: 4rem;
-
-	--space-control-x: var(--space-3);
-	--space-control-y: var(--space-2);
-	--space-inline: var(--space-2);
-	--space-stack: var(--space-4);
-	--space-inset: var(--space-4);
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+  --space-control-x: var(--space-3);
+  --space-control-y: var(--space-2);
+  --space-inline: var(--space-2);
+  --space-stack: var(--space-4);
+  --space-inset: var(--space-4);
 }

package/dist/styles/tokens/spacing/scale-bridge.css

@@ -1,17 +1 @@
-/**
- * Maps spacing roles to Tailwind spacing utilities (shared by all spacing packs).
- */
-@theme {
-	--spacing-1: var(--space-1);
-	--spacing-2: var(--space-2);
-	--spacing-3: var(--space-3);
-	--spacing-4: var(--space-4);
-	--spacing-5: var(--space-5);
-	--spacing-6: var(--space-6);
-	--spacing-8: var(--space-8);
-	--spacing-control-x: var(--space-control-x);
-	--spacing-control-y: var(--space-control-y);
-	--spacing-inline: var(--space-inline);
-	--spacing-stack: var(--space-stack);
-	--spacing-inset: var(--space-inset);
-}
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */