mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Ivan Vasilov
0abe792889
This PR migrates the JS config for Tailwind into a CSS config. As such, all variables have been defined as CSS variables and they're using the specialized Tailwind syntax for generating utility classes. Beside the migration, these changes were also added: - Added `tailwind.config.css` to few packages to make the Tailwind Intellisense work. - Migrated away from Radix style color classes to our defined classes, the values will remain the same. - Most of the CSS is generated by scripts, they'll be removed in next PRs. * Removed redundant `border-light` classes from several components since it was undefined. * Removed redundant `text-strong` classes from several components since it was undefined. How to test: - Open all apps, compare the UI (mainly colors) to builds from #45417 and try to find a difference. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Harmonized color variable usages and updated UI color references (affects palettes, charts, gradients, hero illustrations, and scrollbars). * Tweaked border, tab, and selection visuals across components. * **New Features** * Added a suite of theme animations and refined typography presets used by site prose and docs. * **Refactor** * Overhauled Tailwind/theme configuration and color token generation for more consistent theming. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
564 lines
26 KiB
CSS
564 lines
26 KiB
CSS
/*
|
|
* Auto-generated by scripts/generate-colors.js — do not edit by hand.
|
|
* Run `node scripts/generate-colors.js` from packages/config/ to refresh.
|
|
*
|
|
* Defines every Tailwind v4 --color-* design token. Tailwind generates
|
|
* bg-{name} / text-{name} / border-{name} / ring-{name} / border-{r,l,t,b}-{name}
|
|
* utilities for each entry. Semantic tokens wrap their HSL triplet in hsl();
|
|
* Radix/scale tokens self-reference the var declared in colors.css :root.
|
|
* Source mappings: tw-extend-color-snapshot.js (semantic tokens) plus the
|
|
* Radix and scale aliases from radix-vars.css.
|
|
*/
|
|
|
|
@theme inline {
|
|
--color-foreground: hsl(var(--foreground-default));
|
|
--color-foreground-light: hsl(var(--foreground-light));
|
|
--color-foreground-lighter: hsl(var(--foreground-lighter));
|
|
--color-foreground-muted: hsl(var(--foreground-muted));
|
|
--color-foreground-contrast: hsl(var(--foreground-contrast));
|
|
--color-background-200: hsl(var(--background-200));
|
|
--color-background: hsl(var(--background-default));
|
|
--color-background-alternative-200: hsl(var(--background-alternative-200));
|
|
--color-background-alternative: hsl(var(--background-alternative-default));
|
|
--color-background-selection: hsl(var(--background-selection));
|
|
--color-background-control: hsl(var(--background-control));
|
|
--color-background-surface-75: hsl(var(--background-surface-75));
|
|
--color-background-surface-100: hsl(var(--background-surface-100));
|
|
--color-background-surface-200: hsl(var(--background-surface-200));
|
|
--color-background-surface-300: hsl(var(--background-surface-300));
|
|
--color-background-surface-400: hsl(var(--background-surface-400));
|
|
--color-background-overlay: hsl(var(--background-overlay-default));
|
|
--color-background-overlay-hover: hsl(var(--background-overlay-hover));
|
|
--color-background-muted: hsl(var(--background-muted));
|
|
--color-background-button: hsl(var(--background-button-default));
|
|
--color-background-dialog: hsl(var(--background-dialog-default));
|
|
--color-background-dash-sidebar: hsl(var(--background-dash-sidebar));
|
|
--color-background-dash-canvas: hsl(var(--background-dash-canvas));
|
|
--color-destructive-200: hsl(var(--destructive-200));
|
|
--color-destructive-300: hsl(var(--destructive-300));
|
|
--color-destructive-400: hsl(var(--destructive-400));
|
|
--color-destructive-500: hsl(var(--destructive-500));
|
|
--color-destructive-600: hsl(var(--destructive-600));
|
|
--color-destructive: hsl(var(--destructive-default));
|
|
--color-warning-200: hsl(var(--warning-200));
|
|
--color-warning-300: hsl(var(--warning-300));
|
|
--color-warning-400: hsl(var(--warning-400));
|
|
--color-warning-500: hsl(var(--warning-500));
|
|
--color-warning-600: hsl(var(--warning-600));
|
|
--color-warning: hsl(var(--warning-default));
|
|
--color-brand-200: hsl(var(--brand-200));
|
|
--color-brand-300: hsl(var(--brand-300));
|
|
--color-brand-400: hsl(var(--brand-400));
|
|
--color-brand-500: hsl(var(--brand-500));
|
|
--color-brand-600: hsl(var(--brand-600));
|
|
--color-brand: hsl(var(--brand-default));
|
|
--color-brand-link: hsl(var(--brand-link));
|
|
--color-_secondary-200: hsl(var(--secondary-200));
|
|
--color-_secondary-400: hsl(var(--secondary-400));
|
|
--color-_secondary: hsl(var(--secondary-default));
|
|
--color-code_block-1: hsl(var(--code-block-1));
|
|
--color-code_block-2: hsl(var(--code-block-2));
|
|
--color-code_block-3: hsl(var(--code-block-3));
|
|
--color-code_block-4: hsl(var(--code-block-4));
|
|
--color-code_block-5: hsl(var(--code-block-5));
|
|
--color-amber-100: var(--color-amber-100);
|
|
--color-amberA-100: var(--color-amberA-100);
|
|
--color-amber-200: var(--color-amber-200);
|
|
--color-amberA-200: var(--color-amberA-200);
|
|
--color-amber-300: var(--color-amber-300);
|
|
--color-amberA-300: var(--color-amberA-300);
|
|
--color-amber-400: var(--color-amber-400);
|
|
--color-amberA-400: var(--color-amberA-400);
|
|
--color-amber-500: var(--color-amber-500);
|
|
--color-amberA-500: var(--color-amberA-500);
|
|
--color-amber-600: var(--color-amber-600);
|
|
--color-amberA-600: var(--color-amberA-600);
|
|
--color-amber-700: var(--color-amber-700);
|
|
--color-amberA-700: var(--color-amberA-700);
|
|
--color-amber-800: var(--color-amber-800);
|
|
--color-amberA-800: var(--color-amberA-800);
|
|
--color-amber-900: var(--color-amber-900);
|
|
--color-amberA-900: var(--color-amberA-900);
|
|
--color-amber-1000: var(--color-amber-1000);
|
|
--color-amberA-1000: var(--color-amberA-1000);
|
|
--color-amber-1100: var(--color-amber-1100);
|
|
--color-amberA-1100: var(--color-amberA-1100);
|
|
--color-amber-1200: var(--color-amber-1200);
|
|
--color-amberA-1200: var(--color-amberA-1200);
|
|
--color-blue-100: var(--color-blue-100);
|
|
--color-blueA-100: var(--color-blueA-100);
|
|
--color-blue-200: var(--color-blue-200);
|
|
--color-blueA-200: var(--color-blueA-200);
|
|
--color-blue-300: var(--color-blue-300);
|
|
--color-blueA-300: var(--color-blueA-300);
|
|
--color-blue-400: var(--color-blue-400);
|
|
--color-blueA-400: var(--color-blueA-400);
|
|
--color-blue-500: var(--color-blue-500);
|
|
--color-blueA-500: var(--color-blueA-500);
|
|
--color-blue-600: var(--color-blue-600);
|
|
--color-blueA-600: var(--color-blueA-600);
|
|
--color-blue-700: var(--color-blue-700);
|
|
--color-blueA-700: var(--color-blueA-700);
|
|
--color-blue-800: var(--color-blue-800);
|
|
--color-blueA-800: var(--color-blueA-800);
|
|
--color-blue-900: var(--color-blue-900);
|
|
--color-blueA-900: var(--color-blueA-900);
|
|
--color-blue-1000: var(--color-blue-1000);
|
|
--color-blueA-1000: var(--color-blueA-1000);
|
|
--color-blue-1100: var(--color-blue-1100);
|
|
--color-blueA-1100: var(--color-blueA-1100);
|
|
--color-blue-1200: var(--color-blue-1200);
|
|
--color-blueA-1200: var(--color-blueA-1200);
|
|
--color-crimson-100: var(--color-crimson-100);
|
|
--color-crimsonA-100: var(--color-crimsonA-100);
|
|
--color-crimson-200: var(--color-crimson-200);
|
|
--color-crimsonA-200: var(--color-crimsonA-200);
|
|
--color-crimson-300: var(--color-crimson-300);
|
|
--color-crimsonA-300: var(--color-crimsonA-300);
|
|
--color-crimson-400: var(--color-crimson-400);
|
|
--color-crimsonA-400: var(--color-crimsonA-400);
|
|
--color-crimson-500: var(--color-crimson-500);
|
|
--color-crimsonA-500: var(--color-crimsonA-500);
|
|
--color-crimson-600: var(--color-crimson-600);
|
|
--color-crimsonA-600: var(--color-crimsonA-600);
|
|
--color-crimson-700: var(--color-crimson-700);
|
|
--color-crimsonA-700: var(--color-crimsonA-700);
|
|
--color-crimson-800: var(--color-crimson-800);
|
|
--color-crimsonA-800: var(--color-crimsonA-800);
|
|
--color-crimson-900: var(--color-crimson-900);
|
|
--color-crimsonA-900: var(--color-crimsonA-900);
|
|
--color-crimson-1000: var(--color-crimson-1000);
|
|
--color-crimsonA-1000: var(--color-crimsonA-1000);
|
|
--color-crimson-1100: var(--color-crimson-1100);
|
|
--color-crimsonA-1100: var(--color-crimsonA-1100);
|
|
--color-crimson-1200: var(--color-crimson-1200);
|
|
--color-crimsonA-1200: var(--color-crimsonA-1200);
|
|
--color-gold-100: var(--color-gold-100);
|
|
--color-goldA-100: var(--color-goldA-100);
|
|
--color-gold-200: var(--color-gold-200);
|
|
--color-goldA-200: var(--color-goldA-200);
|
|
--color-gold-300: var(--color-gold-300);
|
|
--color-goldA-300: var(--color-goldA-300);
|
|
--color-gold-400: var(--color-gold-400);
|
|
--color-goldA-400: var(--color-goldA-400);
|
|
--color-gold-500: var(--color-gold-500);
|
|
--color-goldA-500: var(--color-goldA-500);
|
|
--color-gold-600: var(--color-gold-600);
|
|
--color-goldA-600: var(--color-goldA-600);
|
|
--color-gold-700: var(--color-gold-700);
|
|
--color-goldA-700: var(--color-goldA-700);
|
|
--color-gold-800: var(--color-gold-800);
|
|
--color-goldA-800: var(--color-goldA-800);
|
|
--color-gold-900: var(--color-gold-900);
|
|
--color-goldA-900: var(--color-goldA-900);
|
|
--color-gold-1000: var(--color-gold-1000);
|
|
--color-goldA-1000: var(--color-goldA-1000);
|
|
--color-gold-1100: var(--color-gold-1100);
|
|
--color-goldA-1100: var(--color-goldA-1100);
|
|
--color-gold-1200: var(--color-gold-1200);
|
|
--color-goldA-1200: var(--color-goldA-1200);
|
|
--color-gray-100: var(--color-gray-100);
|
|
--color-grayA-100: var(--color-grayA-100);
|
|
--color-gray-200: var(--color-gray-200);
|
|
--color-grayA-200: var(--color-grayA-200);
|
|
--color-gray-300: var(--color-gray-300);
|
|
--color-grayA-300: var(--color-grayA-300);
|
|
--color-gray-400: var(--color-gray-400);
|
|
--color-grayA-400: var(--color-grayA-400);
|
|
--color-gray-500: var(--color-gray-500);
|
|
--color-grayA-500: var(--color-grayA-500);
|
|
--color-gray-600: var(--color-gray-600);
|
|
--color-grayA-600: var(--color-grayA-600);
|
|
--color-gray-700: var(--color-gray-700);
|
|
--color-grayA-700: var(--color-grayA-700);
|
|
--color-gray-800: var(--color-gray-800);
|
|
--color-grayA-800: var(--color-grayA-800);
|
|
--color-gray-900: var(--color-gray-900);
|
|
--color-grayA-900: var(--color-grayA-900);
|
|
--color-gray-1000: var(--color-gray-1000);
|
|
--color-grayA-1000: var(--color-grayA-1000);
|
|
--color-gray-1100: var(--color-gray-1100);
|
|
--color-grayA-1100: var(--color-grayA-1100);
|
|
--color-gray-1200: var(--color-gray-1200);
|
|
--color-grayA-1200: var(--color-grayA-1200);
|
|
--color-green-100: var(--color-green-100);
|
|
--color-greenA-100: var(--color-greenA-100);
|
|
--color-green-200: var(--color-green-200);
|
|
--color-greenA-200: var(--color-greenA-200);
|
|
--color-green-300: var(--color-green-300);
|
|
--color-greenA-300: var(--color-greenA-300);
|
|
--color-green-400: var(--color-green-400);
|
|
--color-greenA-400: var(--color-greenA-400);
|
|
--color-green-500: var(--color-green-500);
|
|
--color-greenA-500: var(--color-greenA-500);
|
|
--color-green-600: var(--color-green-600);
|
|
--color-greenA-600: var(--color-greenA-600);
|
|
--color-green-700: var(--color-green-700);
|
|
--color-greenA-700: var(--color-greenA-700);
|
|
--color-green-800: var(--color-green-800);
|
|
--color-greenA-800: var(--color-greenA-800);
|
|
--color-green-900: var(--color-green-900);
|
|
--color-greenA-900: var(--color-greenA-900);
|
|
--color-green-1000: var(--color-green-1000);
|
|
--color-greenA-1000: var(--color-greenA-1000);
|
|
--color-green-1100: var(--color-green-1100);
|
|
--color-greenA-1100: var(--color-greenA-1100);
|
|
--color-green-1200: var(--color-green-1200);
|
|
--color-greenA-1200: var(--color-greenA-1200);
|
|
--color-indigo-100: var(--color-indigo-100);
|
|
--color-indigoA-100: var(--color-indigoA-100);
|
|
--color-indigo-200: var(--color-indigo-200);
|
|
--color-indigoA-200: var(--color-indigoA-200);
|
|
--color-indigo-300: var(--color-indigo-300);
|
|
--color-indigoA-300: var(--color-indigoA-300);
|
|
--color-indigo-400: var(--color-indigo-400);
|
|
--color-indigoA-400: var(--color-indigoA-400);
|
|
--color-indigo-500: var(--color-indigo-500);
|
|
--color-indigoA-500: var(--color-indigoA-500);
|
|
--color-indigo-600: var(--color-indigo-600);
|
|
--color-indigoA-600: var(--color-indigoA-600);
|
|
--color-indigo-700: var(--color-indigo-700);
|
|
--color-indigoA-700: var(--color-indigoA-700);
|
|
--color-indigo-800: var(--color-indigo-800);
|
|
--color-indigoA-800: var(--color-indigoA-800);
|
|
--color-indigo-900: var(--color-indigo-900);
|
|
--color-indigoA-900: var(--color-indigoA-900);
|
|
--color-indigo-1000: var(--color-indigo-1000);
|
|
--color-indigoA-1000: var(--color-indigoA-1000);
|
|
--color-indigo-1100: var(--color-indigo-1100);
|
|
--color-indigoA-1100: var(--color-indigoA-1100);
|
|
--color-indigo-1200: var(--color-indigo-1200);
|
|
--color-indigoA-1200: var(--color-indigoA-1200);
|
|
--color-orange-100: var(--color-orange-100);
|
|
--color-orangeA-100: var(--color-orangeA-100);
|
|
--color-orange-200: var(--color-orange-200);
|
|
--color-orangeA-200: var(--color-orangeA-200);
|
|
--color-orange-300: var(--color-orange-300);
|
|
--color-orangeA-300: var(--color-orangeA-300);
|
|
--color-orange-400: var(--color-orange-400);
|
|
--color-orangeA-400: var(--color-orangeA-400);
|
|
--color-orange-500: var(--color-orange-500);
|
|
--color-orangeA-500: var(--color-orangeA-500);
|
|
--color-orange-600: var(--color-orange-600);
|
|
--color-orangeA-600: var(--color-orangeA-600);
|
|
--color-orange-700: var(--color-orange-700);
|
|
--color-orangeA-700: var(--color-orangeA-700);
|
|
--color-orange-800: var(--color-orange-800);
|
|
--color-orangeA-800: var(--color-orangeA-800);
|
|
--color-orange-900: var(--color-orange-900);
|
|
--color-orangeA-900: var(--color-orangeA-900);
|
|
--color-orange-1000: var(--color-orange-1000);
|
|
--color-orangeA-1000: var(--color-orangeA-1000);
|
|
--color-orange-1100: var(--color-orange-1100);
|
|
--color-orangeA-1100: var(--color-orangeA-1100);
|
|
--color-orange-1200: var(--color-orange-1200);
|
|
--color-orangeA-1200: var(--color-orangeA-1200);
|
|
--color-pink-100: var(--color-pink-100);
|
|
--color-pinkA-100: var(--color-pinkA-100);
|
|
--color-pink-200: var(--color-pink-200);
|
|
--color-pinkA-200: var(--color-pinkA-200);
|
|
--color-pink-300: var(--color-pink-300);
|
|
--color-pinkA-300: var(--color-pinkA-300);
|
|
--color-pink-400: var(--color-pink-400);
|
|
--color-pinkA-400: var(--color-pinkA-400);
|
|
--color-pink-500: var(--color-pink-500);
|
|
--color-pinkA-500: var(--color-pinkA-500);
|
|
--color-pink-600: var(--color-pink-600);
|
|
--color-pinkA-600: var(--color-pinkA-600);
|
|
--color-pink-700: var(--color-pink-700);
|
|
--color-pinkA-700: var(--color-pinkA-700);
|
|
--color-pink-800: var(--color-pink-800);
|
|
--color-pinkA-800: var(--color-pinkA-800);
|
|
--color-pink-900: var(--color-pink-900);
|
|
--color-pinkA-900: var(--color-pinkA-900);
|
|
--color-pink-1000: var(--color-pink-1000);
|
|
--color-pinkA-1000: var(--color-pinkA-1000);
|
|
--color-pink-1100: var(--color-pink-1100);
|
|
--color-pinkA-1100: var(--color-pinkA-1100);
|
|
--color-pink-1200: var(--color-pink-1200);
|
|
--color-pinkA-1200: var(--color-pinkA-1200);
|
|
--color-purple-100: var(--color-purple-100);
|
|
--color-purpleA-100: var(--color-purpleA-100);
|
|
--color-purple-200: var(--color-purple-200);
|
|
--color-purpleA-200: var(--color-purpleA-200);
|
|
--color-purple-300: var(--color-purple-300);
|
|
--color-purpleA-300: var(--color-purpleA-300);
|
|
--color-purple-400: var(--color-purple-400);
|
|
--color-purpleA-400: var(--color-purpleA-400);
|
|
--color-purple-500: var(--color-purple-500);
|
|
--color-purpleA-500: var(--color-purpleA-500);
|
|
--color-purple-600: var(--color-purple-600);
|
|
--color-purpleA-600: var(--color-purpleA-600);
|
|
--color-purple-700: var(--color-purple-700);
|
|
--color-purpleA-700: var(--color-purpleA-700);
|
|
--color-purple-800: var(--color-purple-800);
|
|
--color-purpleA-800: var(--color-purpleA-800);
|
|
--color-purple-900: var(--color-purple-900);
|
|
--color-purpleA-900: var(--color-purpleA-900);
|
|
--color-purple-1000: var(--color-purple-1000);
|
|
--color-purpleA-1000: var(--color-purpleA-1000);
|
|
--color-purple-1100: var(--color-purple-1100);
|
|
--color-purpleA-1100: var(--color-purpleA-1100);
|
|
--color-purple-1200: var(--color-purple-1200);
|
|
--color-purpleA-1200: var(--color-purpleA-1200);
|
|
--color-red-100: var(--color-red-100);
|
|
--color-redA-100: var(--color-redA-100);
|
|
--color-red-200: var(--color-red-200);
|
|
--color-redA-200: var(--color-redA-200);
|
|
--color-red-300: var(--color-red-300);
|
|
--color-redA-300: var(--color-redA-300);
|
|
--color-red-400: var(--color-red-400);
|
|
--color-redA-400: var(--color-redA-400);
|
|
--color-red-500: var(--color-red-500);
|
|
--color-redA-500: var(--color-redA-500);
|
|
--color-red-600: var(--color-red-600);
|
|
--color-redA-600: var(--color-redA-600);
|
|
--color-red-700: var(--color-red-700);
|
|
--color-redA-700: var(--color-redA-700);
|
|
--color-red-800: var(--color-red-800);
|
|
--color-redA-800: var(--color-redA-800);
|
|
--color-red-900: var(--color-red-900);
|
|
--color-redA-900: var(--color-redA-900);
|
|
--color-red-1000: var(--color-red-1000);
|
|
--color-redA-1000: var(--color-redA-1000);
|
|
--color-red-1100: var(--color-red-1100);
|
|
--color-redA-1100: var(--color-redA-1100);
|
|
--color-red-1200: var(--color-red-1200);
|
|
--color-redA-1200: var(--color-redA-1200);
|
|
--color-slate-100: var(--color-slate-100);
|
|
--color-slateA-100: var(--color-slateA-100);
|
|
--color-slate-200: var(--color-slate-200);
|
|
--color-slateA-200: var(--color-slateA-200);
|
|
--color-slate-300: var(--color-slate-300);
|
|
--color-slateA-300: var(--color-slateA-300);
|
|
--color-slate-400: var(--color-slate-400);
|
|
--color-slateA-400: var(--color-slateA-400);
|
|
--color-slate-500: var(--color-slate-500);
|
|
--color-slateA-500: var(--color-slateA-500);
|
|
--color-slate-600: var(--color-slate-600);
|
|
--color-slateA-600: var(--color-slateA-600);
|
|
--color-slate-700: var(--color-slate-700);
|
|
--color-slateA-700: var(--color-slateA-700);
|
|
--color-slate-800: var(--color-slate-800);
|
|
--color-slateA-800: var(--color-slateA-800);
|
|
--color-slate-900: var(--color-slate-900);
|
|
--color-slateA-900: var(--color-slateA-900);
|
|
--color-slate-1000: var(--color-slate-1000);
|
|
--color-slateA-1000: var(--color-slateA-1000);
|
|
--color-slate-1100: var(--color-slate-1100);
|
|
--color-slateA-1100: var(--color-slateA-1100);
|
|
--color-slate-1200: var(--color-slate-1200);
|
|
--color-slateA-1200: var(--color-slateA-1200);
|
|
--color-tomato-100: var(--color-tomato-100);
|
|
--color-tomatoA-100: var(--color-tomatoA-100);
|
|
--color-tomato-200: var(--color-tomato-200);
|
|
--color-tomatoA-200: var(--color-tomatoA-200);
|
|
--color-tomato-300: var(--color-tomato-300);
|
|
--color-tomatoA-300: var(--color-tomatoA-300);
|
|
--color-tomato-400: var(--color-tomato-400);
|
|
--color-tomatoA-400: var(--color-tomatoA-400);
|
|
--color-tomato-500: var(--color-tomato-500);
|
|
--color-tomatoA-500: var(--color-tomatoA-500);
|
|
--color-tomato-600: var(--color-tomato-600);
|
|
--color-tomatoA-600: var(--color-tomatoA-600);
|
|
--color-tomato-700: var(--color-tomato-700);
|
|
--color-tomatoA-700: var(--color-tomatoA-700);
|
|
--color-tomato-800: var(--color-tomato-800);
|
|
--color-tomatoA-800: var(--color-tomatoA-800);
|
|
--color-tomato-900: var(--color-tomato-900);
|
|
--color-tomatoA-900: var(--color-tomatoA-900);
|
|
--color-tomato-1000: var(--color-tomato-1000);
|
|
--color-tomatoA-1000: var(--color-tomatoA-1000);
|
|
--color-tomato-1100: var(--color-tomato-1100);
|
|
--color-tomatoA-1100: var(--color-tomatoA-1100);
|
|
--color-tomato-1200: var(--color-tomato-1200);
|
|
--color-tomatoA-1200: var(--color-tomatoA-1200);
|
|
--color-violet-100: var(--color-violet-100);
|
|
--color-violetA-100: var(--color-violetA-100);
|
|
--color-violet-200: var(--color-violet-200);
|
|
--color-violetA-200: var(--color-violetA-200);
|
|
--color-violet-300: var(--color-violet-300);
|
|
--color-violetA-300: var(--color-violetA-300);
|
|
--color-violet-400: var(--color-violet-400);
|
|
--color-violetA-400: var(--color-violetA-400);
|
|
--color-violet-500: var(--color-violet-500);
|
|
--color-violetA-500: var(--color-violetA-500);
|
|
--color-violet-600: var(--color-violet-600);
|
|
--color-violetA-600: var(--color-violetA-600);
|
|
--color-violet-700: var(--color-violet-700);
|
|
--color-violetA-700: var(--color-violetA-700);
|
|
--color-violet-800: var(--color-violet-800);
|
|
--color-violetA-800: var(--color-violetA-800);
|
|
--color-violet-900: var(--color-violet-900);
|
|
--color-violetA-900: var(--color-violetA-900);
|
|
--color-violet-1000: var(--color-violet-1000);
|
|
--color-violetA-1000: var(--color-violetA-1000);
|
|
--color-violet-1100: var(--color-violet-1100);
|
|
--color-violetA-1100: var(--color-violetA-1100);
|
|
--color-violet-1200: var(--color-violet-1200);
|
|
--color-violetA-1200: var(--color-violetA-1200);
|
|
--color-yellow-100: var(--color-yellow-100);
|
|
--color-yellowA-100: var(--color-yellowA-100);
|
|
--color-yellow-200: var(--color-yellow-200);
|
|
--color-yellowA-200: var(--color-yellowA-200);
|
|
--color-yellow-300: var(--color-yellow-300);
|
|
--color-yellowA-300: var(--color-yellowA-300);
|
|
--color-yellow-400: var(--color-yellow-400);
|
|
--color-yellowA-400: var(--color-yellowA-400);
|
|
--color-yellow-500: var(--color-yellow-500);
|
|
--color-yellowA-500: var(--color-yellowA-500);
|
|
--color-yellow-600: var(--color-yellow-600);
|
|
--color-yellowA-600: var(--color-yellowA-600);
|
|
--color-yellow-700: var(--color-yellow-700);
|
|
--color-yellowA-700: var(--color-yellowA-700);
|
|
--color-yellow-800: var(--color-yellow-800);
|
|
--color-yellowA-800: var(--color-yellowA-800);
|
|
--color-yellow-900: var(--color-yellow-900);
|
|
--color-yellowA-900: var(--color-yellowA-900);
|
|
--color-yellow-1000: var(--color-yellow-1000);
|
|
--color-yellowA-1000: var(--color-yellowA-1000);
|
|
--color-yellow-1100: var(--color-yellow-1100);
|
|
--color-yellowA-1100: var(--color-yellowA-1100);
|
|
--color-yellow-1200: var(--color-yellow-1200);
|
|
--color-yellowA-1200: var(--color-yellowA-1200);
|
|
--color-blackA-100: var(--color-blackA-100);
|
|
--color-whiteA-100: var(--color-whiteA-100);
|
|
--color-blackA-200: var(--color-blackA-200);
|
|
--color-whiteA-200: var(--color-whiteA-200);
|
|
--color-blackA-300: var(--color-blackA-300);
|
|
--color-whiteA-300: var(--color-whiteA-300);
|
|
--color-blackA-400: var(--color-blackA-400);
|
|
--color-whiteA-400: var(--color-whiteA-400);
|
|
--color-blackA-500: var(--color-blackA-500);
|
|
--color-whiteA-500: var(--color-whiteA-500);
|
|
--color-blackA-600: var(--color-blackA-600);
|
|
--color-whiteA-600: var(--color-whiteA-600);
|
|
--color-blackA-700: var(--color-blackA-700);
|
|
--color-whiteA-700: var(--color-whiteA-700);
|
|
--color-blackA-800: var(--color-blackA-800);
|
|
--color-whiteA-800: var(--color-whiteA-800);
|
|
--color-blackA-900: var(--color-blackA-900);
|
|
--color-whiteA-900: var(--color-whiteA-900);
|
|
--color-blackA-1000: var(--color-blackA-1000);
|
|
--color-whiteA-1000: var(--color-whiteA-1000);
|
|
--color-blackA-1100: var(--color-blackA-1100);
|
|
--color-whiteA-1100: var(--color-whiteA-1100);
|
|
--color-blackA-1200: var(--color-blackA-1200);
|
|
--color-whiteA-1200: var(--color-whiteA-1200);
|
|
--color-scale-100: var(--color-scale-100);
|
|
--color-scaleA-100: var(--color-scaleA-100);
|
|
--color-scale-200: var(--color-scale-200);
|
|
--color-scaleA-200: var(--color-scaleA-200);
|
|
--color-scale-300: var(--color-scale-300);
|
|
--color-scaleA-300: var(--color-scaleA-300);
|
|
--color-scale-400: var(--color-scale-400);
|
|
--color-scaleA-400: var(--color-scaleA-400);
|
|
--color-scale-500: var(--color-scale-500);
|
|
--color-scaleA-500: var(--color-scaleA-500);
|
|
--color-scale-600: var(--color-scale-600);
|
|
--color-scaleA-600: var(--color-scaleA-600);
|
|
--color-scale-700: var(--color-scale-700);
|
|
--color-scaleA-700: var(--color-scaleA-700);
|
|
--color-scale-800: var(--color-scale-800);
|
|
--color-scaleA-800: var(--color-scaleA-800);
|
|
--color-scale-900: var(--color-scale-900);
|
|
--color-scaleA-900: var(--color-scaleA-900);
|
|
--color-scale-1000: var(--color-scale-1000);
|
|
--color-scaleA-1000: var(--color-scaleA-1000);
|
|
--color-scale-1100: var(--color-scale-1100);
|
|
--color-scaleA-1100: var(--color-scaleA-1100);
|
|
--color-scale-1200: var(--color-scale-1200);
|
|
--color-scaleA-1200: var(--color-scaleA-1200);
|
|
--color-brand-100: var(--color-brand-100);
|
|
--color-brand-700: var(--color-brand-700);
|
|
--color-brand-800: var(--color-brand-800);
|
|
--color-brand-900: var(--color-brand-900);
|
|
--color-brand-1000: var(--color-brand-1000);
|
|
--color-brand-1100: var(--color-brand-1100);
|
|
--color-brand-1200: var(--color-brand-1200);
|
|
--color-sidebar: hsl(var(--sidebar-background));
|
|
--color-sidebar-foreground: hsl(var(--sidebar-foreground));
|
|
--color-sidebar-primary: hsl(var(--sidebar-primary));
|
|
--color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
|
|
--color-sidebar-accent: hsl(var(--sidebar-accent));
|
|
--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
|
|
--color-sidebar-border: hsl(var(--sidebar-border));
|
|
--color-sidebar-ring: hsl(var(--sidebar-ring));
|
|
--color-hi-contrast: hsl(var(--foreground-default));
|
|
--color-lo-contrast: hsl(var(--background-alternative-default));
|
|
|
|
/*
|
|
* This will generate colors only for bg utilities.
|
|
*/
|
|
--background-color-200: hsl(var(--background-200));
|
|
--background-color-default: hsl(var(--background-default));
|
|
--background-color-muted: hsl(var(--background-muted));
|
|
--background-color-alternative-200: hsl(var(--background-alternative-200));
|
|
--background-color-alternative: hsl(var(--background-alternative-default));
|
|
--background-color-selection: hsl(var(--background-selection));
|
|
--background-color-control: hsl(var(--background-control));
|
|
--background-color-surface-75: hsl(var(--background-surface-75));
|
|
--background-color-surface-100: hsl(var(--background-surface-100));
|
|
--background-color-surface-200: hsl(var(--background-surface-200));
|
|
--background-color-surface-300: hsl(var(--background-surface-300));
|
|
--background-color-surface-400: hsl(var(--background-surface-400));
|
|
--background-color-overlay: hsl(var(--background-overlay-default));
|
|
--background-color-overlay-hover: hsl(var(--background-overlay-hover));
|
|
--background-color-button: hsl(var(--background-button-default));
|
|
--background-color-dialog: hsl(var(--background-dialog-default));
|
|
--background-color-dash-sidebar: hsl(var(--background-dash-sidebar));
|
|
--background-color-dash-canvas: hsl(var(--background-dash-canvas));
|
|
--background-color-studio: hsl(var(--background-200));
|
|
|
|
/*
|
|
* This will generate colors for all utilities, they'll have border in the name i.e. bg-border-overlay, text-border-muted
|
|
* This usage should be discouraged and deprecated.
|
|
*/
|
|
--color-border: hsl(var(--border-default));
|
|
--color-border-overlay: hsl(var(--border-overlay));
|
|
--color-border-muted: hsl(var(--border-muted));
|
|
--color-border-control: hsl(var(--border-control));
|
|
--color-border-strong: hsl(var(--border-strong));
|
|
--color-border-stronger: hsl(var(--border-stronger));
|
|
/*
|
|
* This will generate colors only for border utilities
|
|
* i.e. bg-muted and they'll only have border-color: var(--border-muted) rule
|
|
*/
|
|
--border-color-default: hsl(var(--border-default));
|
|
--border-color-overlay: hsl(var(--border-overlay));
|
|
--border-color-muted: hsl(var(--border-muted));
|
|
--border-color-control: hsl(var(--border-control));
|
|
--border-color-strong: hsl(var(--border-strong));
|
|
--border-color-stronger: hsl(var(--border-stronger));
|
|
--border-color-secondary: hsl(var(--border-secondary));
|
|
--border-color-alternative: hsl(var(--border-alternative));
|
|
--border-color-button: hsl(var(--border-button-default));
|
|
--border-color-button-hover: hsl(var(--border-button-hover));
|
|
|
|
/* This will generate colors only for text utilities */
|
|
--text-color-default: hsl(var(--foreground-default));
|
|
--text-color-light: hsl(var(--foreground-light));
|
|
--text-color-lighter: hsl(var(--foreground-lighter));
|
|
--text-color-muted: hsl(var(--foreground-muted));
|
|
--text-color-contrast: hsl(var(--foreground-contrast));
|
|
|
|
/* misc theme tokens — typography, breakpoints, sizing, transform-origin */
|
|
--font-sans: var(
|
|
--font-custom,
|
|
Circular,
|
|
custom-font,
|
|
Helvetica Neue,
|
|
Helvetica,
|
|
Arial,
|
|
sans-serif
|
|
);
|
|
--font-mono: var(--font-source-code-pro, Source Code Pro, Office Code Pro, Menlo, monospace);
|
|
--breakpoint-xs: 480px;
|
|
--width-listbox: 320px;
|
|
--radius-panel: 6px;
|
|
--spacing-content: 21px;
|
|
--spacing-card: var(--card-padding-x);
|
|
--transform-origin-dropdown: var(--radix-dropdown-menu-content-transform-origin);
|
|
--transform-origin-popover: var(--radix-popover-menu-content-transform-origin);
|
|
}
|