dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-10 20:05:06 +03:00
Code Issues Packages Projects Releases Wiki Activity
Files
restructure-migration-docs
supabase/packages/config/css/colors.css
T
Ivan Vasilov 0abe792889 chore: Migrate the main Tailwind JS config to CSS (#45686) 
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 -->
2026-05-13 13:14:58 +02:00

433 lines
19 KiB
CSS
Raw Permalink Blame History

/*
* Auto-generated by scripts/generate-colors.js — do not edit by hand.
* Run `node scripts/generate-colors.js` from packages/config/ to refresh.
*
* Declares the Radix/scale --color-* CSS variables in :root, each forwarding
* to its underlying --colors-{hue}{n} source (defined in radix-vars.css)
* which switches between light/dark themes. theme.css references these
* variables from its @theme inline block.
*/
:root {
--color-amber-100: var(--colors-amber1);
--color-amberA-100: var(--colors-amberA1);
--color-amber-200: var(--colors-amber2);
--color-amberA-200: var(--colors-amberA2);
--color-amber-300: var(--colors-amber3);
--color-amberA-300: var(--colors-amberA3);
--color-amber-400: var(--colors-amber4);
--color-amberA-400: var(--colors-amberA4);
--color-amber-500: var(--colors-amber5);
--color-amberA-500: var(--colors-amberA5);
--color-amber-600: var(--colors-amber6);
--color-amberA-600: var(--colors-amberA6);
--color-amber-700: var(--colors-amber7);
--color-amberA-700: var(--colors-amberA7);
--color-amber-800: var(--colors-amber8);
--color-amberA-800: var(--colors-amberA8);
--color-amber-900: var(--colors-amber9);
--color-amberA-900: var(--colors-amberA9);
--color-amber-1000: var(--colors-amber10);
--color-amberA-1000: var(--colors-amberA10);
--color-amber-1100: var(--colors-amber11);
--color-amberA-1100: var(--colors-amberA11);
--color-amber-1200: var(--colors-amber12);
--color-amberA-1200: var(--colors-amberA12);
--color-blue-100: var(--colors-blue1);
--color-blueA-100: var(--colors-blueA1);
--color-blue-200: var(--colors-blue2);
--color-blueA-200: var(--colors-blueA2);
--color-blue-300: var(--colors-blue3);
--color-blueA-300: var(--colors-blueA3);
--color-blue-400: var(--colors-blue4);
--color-blueA-400: var(--colors-blueA4);
--color-blue-500: var(--colors-blue5);
--color-blueA-500: var(--colors-blueA5);
--color-blue-600: var(--colors-blue6);
--color-blueA-600: var(--colors-blueA6);
--color-blue-700: var(--colors-blue7);
--color-blueA-700: var(--colors-blueA7);
--color-blue-800: var(--colors-blue8);
--color-blueA-800: var(--colors-blueA8);
--color-blue-900: var(--colors-blue9);
--color-blueA-900: var(--colors-blueA9);
--color-blue-1000: var(--colors-blue10);
--color-blueA-1000: var(--colors-blueA10);
--color-blue-1100: var(--colors-blue11);
--color-blueA-1100: var(--colors-blueA11);
--color-blue-1200: var(--colors-blue12);
--color-blueA-1200: var(--colors-blueA12);
--color-crimson-100: var(--colors-crimson1);
--color-crimsonA-100: var(--colors-crimsonA1);
--color-crimson-200: var(--colors-crimson2);
--color-crimsonA-200: var(--colors-crimsonA2);
--color-crimson-300: var(--colors-crimson3);
--color-crimsonA-300: var(--colors-crimsonA3);
--color-crimson-400: var(--colors-crimson4);
--color-crimsonA-400: var(--colors-crimsonA4);
--color-crimson-500: var(--colors-crimson5);
--color-crimsonA-500: var(--colors-crimsonA5);
--color-crimson-600: var(--colors-crimson6);
--color-crimsonA-600: var(--colors-crimsonA6);
--color-crimson-700: var(--colors-crimson7);
--color-crimsonA-700: var(--colors-crimsonA7);
--color-crimson-800: var(--colors-crimson8);
--color-crimsonA-800: var(--colors-crimsonA8);
--color-crimson-900: var(--colors-crimson9);
--color-crimsonA-900: var(--colors-crimsonA9);
--color-crimson-1000: var(--colors-crimson10);
--color-crimsonA-1000: var(--colors-crimsonA10);
--color-crimson-1100: var(--colors-crimson11);
--color-crimsonA-1100: var(--colors-crimsonA11);
--color-crimson-1200: var(--colors-crimson12);
--color-crimsonA-1200: var(--colors-crimsonA12);
--color-gold-100: var(--colors-gold1);
--color-goldA-100: var(--colors-goldA1);
--color-gold-200: var(--colors-gold2);
--color-goldA-200: var(--colors-goldA2);
--color-gold-300: var(--colors-gold3);
--color-goldA-300: var(--colors-goldA3);
--color-gold-400: var(--colors-gold4);
--color-goldA-400: var(--colors-goldA4);
--color-gold-500: var(--colors-gold5);
--color-goldA-500: var(--colors-goldA5);
--color-gold-600: var(--colors-gold6);
--color-goldA-600: var(--colors-goldA6);
--color-gold-700: var(--colors-gold7);
--color-goldA-700: var(--colors-goldA7);
--color-gold-800: var(--colors-gold8);
--color-goldA-800: var(--colors-goldA8);
--color-gold-900: var(--colors-gold9);
--color-goldA-900: var(--colors-goldA9);
--color-gold-1000: var(--colors-gold10);
--color-goldA-1000: var(--colors-goldA10);
--color-gold-1100: var(--colors-gold11);
--color-goldA-1100: var(--colors-goldA11);
--color-gold-1200: var(--colors-gold12);
--color-goldA-1200: var(--colors-goldA12);
--color-gray-100: var(--colors-gray1);
--color-grayA-100: var(--colors-grayA1);
--color-gray-200: var(--colors-gray2);
--color-grayA-200: var(--colors-grayA2);
--color-gray-300: var(--colors-gray3);
--color-grayA-300: var(--colors-grayA3);
--color-gray-400: var(--colors-gray4);
--color-grayA-400: var(--colors-grayA4);
--color-gray-500: var(--colors-gray5);
--color-grayA-500: var(--colors-grayA5);
--color-gray-600: var(--colors-gray6);
--color-grayA-600: var(--colors-grayA6);
--color-gray-700: var(--colors-gray7);
--color-grayA-700: var(--colors-grayA7);
--color-gray-800: var(--colors-gray8);
--color-grayA-800: var(--colors-grayA8);
--color-gray-900: var(--colors-gray9);
--color-grayA-900: var(--colors-grayA9);
--color-gray-1000: var(--colors-gray10);
--color-grayA-1000: var(--colors-grayA10);
--color-gray-1100: var(--colors-gray11);
--color-grayA-1100: var(--colors-grayA11);
--color-gray-1200: var(--colors-gray12);
--color-grayA-1200: var(--colors-grayA12);
--color-green-100: var(--colors-green1);
--color-greenA-100: var(--colors-greenA1);
--color-green-200: var(--colors-green2);
--color-greenA-200: var(--colors-greenA2);
--color-green-300: var(--colors-green3);
--color-greenA-300: var(--colors-greenA3);
--color-green-400: var(--colors-green4);
--color-greenA-400: var(--colors-greenA4);
--color-green-500: var(--colors-green5);
--color-greenA-500: var(--colors-greenA5);
--color-green-600: var(--colors-green6);
--color-greenA-600: var(--colors-greenA6);
--color-green-700: var(--colors-green7);
--color-greenA-700: var(--colors-greenA7);
--color-green-800: var(--colors-green8);
--color-greenA-800: var(--colors-greenA8);
--color-green-900: var(--colors-green9);
--color-greenA-900: var(--colors-greenA9);
--color-green-1000: var(--colors-green10);
--color-greenA-1000: var(--colors-greenA10);
--color-green-1100: var(--colors-green11);
--color-greenA-1100: var(--colors-greenA11);
--color-green-1200: var(--colors-green12);
--color-greenA-1200: var(--colors-greenA12);
--color-indigo-100: var(--colors-indigo1);
--color-indigoA-100: var(--colors-indigoA1);
--color-indigo-200: var(--colors-indigo2);
--color-indigoA-200: var(--colors-indigoA2);
--color-indigo-300: var(--colors-indigo3);
--color-indigoA-300: var(--colors-indigoA3);
--color-indigo-400: var(--colors-indigo4);
--color-indigoA-400: var(--colors-indigoA4);
--color-indigo-500: var(--colors-indigo5);
--color-indigoA-500: var(--colors-indigoA5);
--color-indigo-600: var(--colors-indigo6);
--color-indigoA-600: var(--colors-indigoA6);
--color-indigo-700: var(--colors-indigo7);
--color-indigoA-700: var(--colors-indigoA7);
--color-indigo-800: var(--colors-indigo8);
--color-indigoA-800: var(--colors-indigoA8);
--color-indigo-900: var(--colors-indigo9);
--color-indigoA-900: var(--colors-indigoA9);
--color-indigo-1000: var(--colors-indigo10);
--color-indigoA-1000: var(--colors-indigoA10);
--color-indigo-1100: var(--colors-indigo11);
--color-indigoA-1100: var(--colors-indigoA11);
--color-indigo-1200: var(--colors-indigo12);
--color-indigoA-1200: var(--colors-indigoA12);
--color-orange-100: var(--colors-orange1);
--color-orangeA-100: var(--colors-orangeA1);
--color-orange-200: var(--colors-orange2);
--color-orangeA-200: var(--colors-orangeA2);
--color-orange-300: var(--colors-orange3);
--color-orangeA-300: var(--colors-orangeA3);
--color-orange-400: var(--colors-orange4);
--color-orangeA-400: var(--colors-orangeA4);
--color-orange-500: var(--colors-orange5);
--color-orangeA-500: var(--colors-orangeA5);
--color-orange-600: var(--colors-orange6);
--color-orangeA-600: var(--colors-orangeA6);
--color-orange-700: var(--colors-orange7);
--color-orangeA-700: var(--colors-orangeA7);
--color-orange-800: var(--colors-orange8);
--color-orangeA-800: var(--colors-orangeA8);
--color-orange-900: var(--colors-orange9);
--color-orangeA-900: var(--colors-orangeA9);
--color-orange-1000: var(--colors-orange10);
--color-orangeA-1000: var(--colors-orangeA10);
--color-orange-1100: var(--colors-orange11);
--color-orangeA-1100: var(--colors-orangeA11);
--color-orange-1200: var(--colors-orange12);
--color-orangeA-1200: var(--colors-orangeA12);
--color-pink-100: var(--colors-pink1);
--color-pinkA-100: var(--colors-pinkA1);
--color-pink-200: var(--colors-pink2);
--color-pinkA-200: var(--colors-pinkA2);
--color-pink-300: var(--colors-pink3);
--color-pinkA-300: var(--colors-pinkA3);
--color-pink-400: var(--colors-pink4);
--color-pinkA-400: var(--colors-pinkA4);
--color-pink-500: var(--colors-pink5);
--color-pinkA-500: var(--colors-pinkA5);
--color-pink-600: var(--colors-pink6);
--color-pinkA-600: var(--colors-pinkA6);
--color-pink-700: var(--colors-pink7);
--color-pinkA-700: var(--colors-pinkA7);
--color-pink-800: var(--colors-pink8);
--color-pinkA-800: var(--colors-pinkA8);
--color-pink-900: var(--colors-pink9);
--color-pinkA-900: var(--colors-pinkA9);
--color-pink-1000: var(--colors-pink10);
--color-pinkA-1000: var(--colors-pinkA10);
--color-pink-1100: var(--colors-pink11);
--color-pinkA-1100: var(--colors-pinkA11);
--color-pink-1200: var(--colors-pink12);
--color-pinkA-1200: var(--colors-pinkA12);
--color-purple-100: var(--colors-purple1);
--color-purpleA-100: var(--colors-purpleA1);
--color-purple-200: var(--colors-purple2);
--color-purpleA-200: var(--colors-purpleA2);
--color-purple-300: var(--colors-purple3);
--color-purpleA-300: var(--colors-purpleA3);
--color-purple-400: var(--colors-purple4);
--color-purpleA-400: var(--colors-purpleA4);
--color-purple-500: var(--colors-purple5);
--color-purpleA-500: var(--colors-purpleA5);
--color-purple-600: var(--colors-purple6);
--color-purpleA-600: var(--colors-purpleA6);
--color-purple-700: var(--colors-purple7);
--color-purpleA-700: var(--colors-purpleA7);
--color-purple-800: var(--colors-purple8);
--color-purpleA-800: var(--colors-purpleA8);
--color-purple-900: var(--colors-purple9);
--color-purpleA-900: var(--colors-purpleA9);
--color-purple-1000: var(--colors-purple10);
--color-purpleA-1000: var(--colors-purpleA10);
--color-purple-1100: var(--colors-purple11);
--color-purpleA-1100: var(--colors-purpleA11);
--color-purple-1200: var(--colors-purple12);
--color-purpleA-1200: var(--colors-purpleA12);
--color-red-100: var(--colors-red1);
--color-redA-100: var(--colors-redA1);
--color-red-200: var(--colors-red2);
--color-redA-200: var(--colors-redA2);
--color-red-300: var(--colors-red3);
--color-redA-300: var(--colors-redA3);
--color-red-400: var(--colors-red4);
--color-redA-400: var(--colors-redA4);
--color-red-500: var(--colors-red5);
--color-redA-500: var(--colors-redA5);
--color-red-600: var(--colors-red6);
--color-redA-600: var(--colors-redA6);
--color-red-700: var(--colors-red7);
--color-redA-700: var(--colors-redA7);
--color-red-800: var(--colors-red8);
--color-redA-800: var(--colors-redA8);
--color-red-900: var(--colors-red9);
--color-redA-900: var(--colors-redA9);
--color-red-1000: var(--colors-red10);
--color-redA-1000: var(--colors-redA10);
--color-red-1100: var(--colors-red11);
--color-redA-1100: var(--colors-redA11);
--color-red-1200: var(--colors-red12);
--color-redA-1200: var(--colors-redA12);
--color-slate-100: var(--colors-slate1);
--color-slateA-100: var(--colors-slateA1);
--color-slate-200: var(--colors-slate2);
--color-slateA-200: var(--colors-slateA2);
--color-slate-300: var(--colors-slate3);
--color-slateA-300: var(--colors-slateA3);
--color-slate-400: var(--colors-slate4);
--color-slateA-400: var(--colors-slateA4);
--color-slate-500: var(--colors-slate5);
--color-slateA-500: var(--colors-slateA5);
--color-slate-600: var(--colors-slate6);
--color-slateA-600: var(--colors-slateA6);
--color-slate-700: var(--colors-slate7);
--color-slateA-700: var(--colors-slateA7);
--color-slate-800: var(--colors-slate8);
--color-slateA-800: var(--colors-slateA8);
--color-slate-900: var(--colors-slate9);
--color-slateA-900: var(--colors-slateA9);
--color-slate-1000: var(--colors-slate10);
--color-slateA-1000: var(--colors-slateA10);
--color-slate-1100: var(--colors-slate11);
--color-slateA-1100: var(--colors-slateA11);
--color-slate-1200: var(--colors-slate12);
--color-slateA-1200: var(--colors-slateA12);
--color-tomato-100: var(--colors-tomato1);
--color-tomatoA-100: var(--colors-tomatoA1);
--color-tomato-200: var(--colors-tomato2);
--color-tomatoA-200: var(--colors-tomatoA2);
--color-tomato-300: var(--colors-tomato3);
--color-tomatoA-300: var(--colors-tomatoA3);
--color-tomato-400: var(--colors-tomato4);
--color-tomatoA-400: var(--colors-tomatoA4);
--color-tomato-500: var(--colors-tomato5);
--color-tomatoA-500: var(--colors-tomatoA5);
--color-tomato-600: var(--colors-tomato6);
--color-tomatoA-600: var(--colors-tomatoA6);
--color-tomato-700: var(--colors-tomato7);
--color-tomatoA-700: var(--colors-tomatoA7);
--color-tomato-800: var(--colors-tomato8);
--color-tomatoA-800: var(--colors-tomatoA8);
--color-tomato-900: var(--colors-tomato9);
--color-tomatoA-900: var(--colors-tomatoA9);
--color-tomato-1000: var(--colors-tomato10);
--color-tomatoA-1000: var(--colors-tomatoA10);
--color-tomato-1100: var(--colors-tomato11);
--color-tomatoA-1100: var(--colors-tomatoA11);
--color-tomato-1200: var(--colors-tomato12);
--color-tomatoA-1200: var(--colors-tomatoA12);
--color-violet-100: var(--colors-violet1);
--color-violetA-100: var(--colors-violetA1);
--color-violet-200: var(--colors-violet2);
--color-violetA-200: var(--colors-violetA2);
--color-violet-300: var(--colors-violet3);
--color-violetA-300: var(--colors-violetA3);
--color-violet-400: var(--colors-violet4);
--color-violetA-400: var(--colors-violetA4);
--color-violet-500: var(--colors-violet5);
--color-violetA-500: var(--colors-violetA5);
--color-violet-600: var(--colors-violet6);
--color-violetA-600: var(--colors-violetA6);
--color-violet-700: var(--colors-violet7);
--color-violetA-700: var(--colors-violetA7);
--color-violet-800: var(--colors-violet8);
--color-violetA-800: var(--colors-violetA8);
--color-violet-900: var(--colors-violet9);
--color-violetA-900: var(--colors-violetA9);
--color-violet-1000: var(--colors-violet10);
--color-violetA-1000: var(--colors-violetA10);
--color-violet-1100: var(--colors-violet11);
--color-violetA-1100: var(--colors-violetA11);
--color-violet-1200: var(--colors-violet12);
--color-violetA-1200: var(--colors-violetA12);
--color-yellow-100: var(--colors-yellow1);
--color-yellowA-100: var(--colors-yellowA1);
--color-yellow-200: var(--colors-yellow2);
--color-yellowA-200: var(--colors-yellowA2);
--color-yellow-300: var(--colors-yellow3);
--color-yellowA-300: var(--colors-yellowA3);
--color-yellow-400: var(--colors-yellow4);
--color-yellowA-400: var(--colors-yellowA4);
--color-yellow-500: var(--colors-yellow5);
--color-yellowA-500: var(--colors-yellowA5);
--color-yellow-600: var(--colors-yellow6);
--color-yellowA-600: var(--colors-yellowA6);
--color-yellow-700: var(--colors-yellow7);
--color-yellowA-700: var(--colors-yellowA7);
--color-yellow-800: var(--colors-yellow8);
--color-yellowA-800: var(--colors-yellowA8);
--color-yellow-900: var(--colors-yellow9);
--color-yellowA-900: var(--colors-yellowA9);
--color-yellow-1000: var(--colors-yellow10);
--color-yellowA-1000: var(--colors-yellowA10);
--color-yellow-1100: var(--colors-yellow11);
--color-yellowA-1100: var(--colors-yellowA11);
--color-yellow-1200: var(--colors-yellow12);
--color-yellowA-1200: var(--colors-yellowA12);
--color-blackA-100: var(--colors-blackA1);
--color-whiteA-100: var(--colors-whiteA1);
--color-blackA-200: var(--colors-blackA2);
--color-whiteA-200: var(--colors-whiteA2);
--color-blackA-300: var(--colors-blackA3);
--color-whiteA-300: var(--colors-whiteA3);
--color-blackA-400: var(--colors-blackA4);
--color-whiteA-400: var(--colors-whiteA4);
--color-blackA-500: var(--colors-blackA5);
--color-whiteA-500: var(--colors-whiteA5);
--color-blackA-600: var(--colors-blackA6);
--color-whiteA-600: var(--colors-whiteA6);
--color-blackA-700: var(--colors-blackA7);
--color-whiteA-700: var(--colors-whiteA7);
--color-blackA-800: var(--colors-blackA8);
--color-whiteA-800: var(--colors-whiteA8);
--color-blackA-900: var(--colors-blackA9);
--color-whiteA-900: var(--colors-whiteA9);
--color-blackA-1000: var(--colors-blackA10);
--color-whiteA-1000: var(--colors-whiteA10);
--color-blackA-1100: var(--colors-blackA11);
--color-whiteA-1100: var(--colors-whiteA11);
--color-blackA-1200: var(--colors-blackA12);
--color-whiteA-1200: var(--colors-whiteA12);
--color-scale-100: var(--colors-scale1);
--color-scaleA-100: var(--colors-scaleA1);
--color-scale-200: var(--colors-scale2);
--color-scaleA-200: var(--colors-scaleA2);
--color-scale-300: var(--colors-scale3);
--color-scaleA-300: var(--colors-scaleA3);
--color-scale-400: var(--colors-scale4);
--color-scaleA-400: var(--colors-scaleA4);
--color-scale-500: var(--colors-scale5);
--color-scaleA-500: var(--colors-scaleA5);
--color-scale-600: var(--colors-scale6);
--color-scaleA-600: var(--colors-scaleA6);
--color-scale-700: var(--colors-scale7);
--color-scaleA-700: var(--colors-scaleA7);
--color-scale-800: var(--colors-scale8);
--color-scaleA-800: var(--colors-scaleA8);
--color-scale-900: var(--colors-scale9);
--color-scaleA-900: var(--colors-scaleA9);
--color-scale-1000: var(--colors-scale10);
--color-scaleA-1000: var(--colors-scaleA10);
--color-scale-1100: var(--colors-scale11);
--color-scaleA-1100: var(--colors-scaleA11);
--color-scale-1200: var(--colors-scale12);
--color-scaleA-1200: var(--colors-scaleA12);
--color-brand-100: var(--colors-brand1);
--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-700: var(--colors-brand7);
--color-brand-800: var(--colors-brand8);
--color-brand-900: var(--colors-brand9);
--color-brand-1000: var(--colors-brand10);
--color-brand-1100: var(--colors-brand11);
--color-brand-1200: var(--colors-brand12);
}
Reference in new issue View Git Blame Copy Permalink