mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 20:05:06 +03:00
Ivan Vasilov
9fbe5152d9
# Changes ## Removed unused themes - Deleted `concept-two.css` (unused) and `dark-combined.css` which was identical to `dark.css` - Removed the alias `deep-dark` to `dark` theme since it was unused ## Removed Figma token transform scripts - Deleted the entire `internals/transform/` directory (~700 lines of JS) — these scripts transformed Figma tokens into Tailwind variables but are no longer needed - Deleted `internals/tokens/cleanse-css-for-tailwind.js` and `extract-design-tokens.js` - Removed related dependencies from `package.json` ## Removed other unused files - Deleted `shadcn.css` (unused) - Deleted `tailwind-theming.md` (outdated doc), https://supabase.com/design-system/docs/color-usage is a better resource ## Refactoring - Extracted the `motion-safe-transition` Tailwind plugin into its own file (`packages/config/tailwind-plugins/motion-safe-transition.js`) - Renamed the tailwind class generation script for clarity - Added stub `tailwind.config.js` files in packages that were missing them, so VSCode IntelliSense works in those workspaces - Updated `packages/ui/README.md` to reflect current usage patterns (imports, styling conventions) instead of outdated Figma tokens workflow # Testing - Check all apps whether they have the correct themes with the correct colors [Linear task](https://linear.app/supabase/issue/FE-3059/clean-up-unused-ui-build-artifacts-themes-and-figma-token-scripts)
65 lines
2.4 KiB
CSS
65 lines
2.4 KiB
CSS
[data-theme='dark'],
|
|
.dark {
|
|
--helpers-os-appearance: Dark;
|
|
--code-block-5: 13.8deg 89.7% 69.6%;
|
|
--code-block-4: 276.1deg 67.7% 74.5%;
|
|
--code-block-3: 83.8deg 61.7% 63.1%;
|
|
--code-block-2: 33.2deg 90.3% 75.7%;
|
|
--code-block-1: 170.8deg 43.1% 61.4%;
|
|
--secondary-default: 247.8deg 100% 70%;
|
|
--secondary-400: 248.3deg 54.5% 25.9%;
|
|
--secondary-200: 248deg 53.6% 11%;
|
|
--brand-link: 155deg 100% 38.6%;
|
|
--brand-default: 153.1deg 60.2% 52.7%;
|
|
--brand-600: 154.9deg 59.5% 70%;
|
|
--brand-500: 154.9deg 100% 19.2%;
|
|
--brand-400: 155.5deg 100% 9.6%;
|
|
--brand-300: 155.1deg 100% 8%;
|
|
--brand-200: 162deg 100% 2%;
|
|
--warning-default: 38.9deg 100% 42.9%; /* warning-600 */
|
|
--warning-600: 38.9deg 100% 42.9%;
|
|
--warning-500: 34.8deg 90.9% 21.6%;
|
|
--warning-400: 33.2deg 100% 14.5%;
|
|
--warning-300: 32.3deg 100% 10.2%;
|
|
--warning-200: 36.6deg 100% 8%;
|
|
--destructive-default: 10.2deg 77.9% 53.9%;
|
|
--destructive-600: 9.7deg 85.2% 62.9%;
|
|
--destructive-500: 7.9deg 71.6% 29%;
|
|
--destructive-400: 6.7deg 60% 20.6%;
|
|
--destructive-300: 7.5deg 51.3% 15.3%;
|
|
--destructive-200: 10.9deg 23.4% 9.2%;
|
|
--border-stronger: 0deg 0% 27.1%;
|
|
--border-strong: 0deg 0% 21.2%;
|
|
--border-alternative: 0deg 0% 26.7%;
|
|
--border-control: 0deg 0% 22.4%;
|
|
--border-overlay: 0deg 0% 20%;
|
|
--border-secondary: 0deg 0% 14.1%;
|
|
--border-muted: 0deg 0% 14.1%;
|
|
--border-default: 0deg 0% 18%;
|
|
--background-dash-canvas: 0deg 0% 7.1%;
|
|
--background-dash-sidebar: 0deg 0% 9%;
|
|
--background-dialog-default: 0deg 0% 7.1%;
|
|
--background-muted: 0deg 0% 14.1%;
|
|
--background-overlay-hover: 0deg 0% 18%;
|
|
--background-overlay-default: 0deg 0% 14.1%;
|
|
--background-surface-400: 0deg 0% 16.1%;
|
|
--background-surface-300: 0deg 0% 16.1%;
|
|
--background-surface-200: 0deg 0% 12.9%;
|
|
--background-surface-100: 0deg 0% 12.2%;
|
|
--background-surface-75: 0deg 0% 9%;
|
|
--background-control: 0deg 0% 14.1%;
|
|
--background-selection: 0deg 0% 19.2%;
|
|
--background-alternative-default: 0deg 0% 5.9%;
|
|
--background-default: 0deg 0% 7.1%;
|
|
--background-200: 0deg 0% 9%;
|
|
--foreground-contrast: 0deg 0% 8.6%;
|
|
--foreground-muted: 0deg 0% 30.2%;
|
|
--foreground-lighter: 0deg 0% 53.7%;
|
|
--foreground-light: 0deg 0% 70.6%;
|
|
--foreground-default: 0deg 0% 98%;
|
|
--border-button-hover: var(--colors-gray-dark-800);
|
|
--border-button-default: var(--colors-gray-dark-700);
|
|
--background-button-default: var(--colors-gray-dark-500);
|
|
--background-alternative-200: var(--colors-gray-dark-200);
|
|
}
|