mirror of
https://github.com/supabase/supabase.git
synced 2026-09-08 19:08:44 +08:00
fb02182e86
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES/NO ## What kind of change does this PR introduce? Bug fix, feature, docs update, ... ## What is the current behavior? Please link any relevant issues here. ## What is the new behavior? Feel free to include screenshots if it includes visual changes. ## Additional context Add any other context or screenshots. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Refreshed theming across the UI to use modern color expressions and shared theme variables (including OKLCH-based gradients), improving consistency for charts, code blocks, overlays, icons, and decorative backgrounds. * **Bug Fixes** * Improved light/dark color and gradient consistency across axis/grid styling, reference lines, buttons/badges, sidebar accents, loaders, and other visual components. * **Documentation** * Updated styling/theming guidance to align with the revised semantic token system and the updated theme variable usage patterns. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 4.8 <[email protected]>
230 lines
7.1 KiB
CSS
230 lines
7.1 KiB
CSS
@import 'config/tailwind.config.css';
|
|
@import './../../../packages/ui/build/css/themes/classic-dark.css';
|
|
|
|
@source '../app/**/*.{ts,tsx}';
|
|
@source './../../../packages/ui/src/**/*.{tsx,ts,js}';
|
|
@source './../../../packages/ui-patterns/src/**/*.{tsx,ts,js}';
|
|
|
|
@theme {
|
|
/* added to get max-w-site */
|
|
--container-site: 128rem;
|
|
--radius-lg: var(--radius);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--color-chart-1: hsl(var(--chart-1));
|
|
--color-chart-2: hsl(var(--chart-2));
|
|
--color-chart-3: hsl(var(--chart-3));
|
|
--color-chart-4: hsl(var(--chart-4));
|
|
--color-chart-5: hsl(var(--chart-5));
|
|
}
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: hsl(0 0% 100%);
|
|
--foreground: hsl(224 71.4% 4.1%);
|
|
--card: hsl(0 0% 100%);
|
|
--card-foreground: hsl(224 71.4% 4.1%);
|
|
--popover: hsl(0 0% 100%);
|
|
--popover-foreground: hsl(224 71.4% 4.1%);
|
|
--primary: hsl(220.9 39.3% 11%);
|
|
--primary-foreground: hsl(210 20% 98%);
|
|
--secondary: hsl(220 14.3% 95.9%);
|
|
--secondary-foreground: hsl(220.9 39.3% 11%);
|
|
--muted: hsl(220 14.3% 95.9%);
|
|
--muted-foreground: hsl(220 8.9% 46.1%);
|
|
--accent: hsl(220 14.3% 95.9%);
|
|
--accent-foreground: hsl(220.9 39.3% 11%);
|
|
--destructive: hsl(0 84.2% 60.2%);
|
|
--destructive-foreground: hsl(0 84.2% 60.2%);
|
|
--border: hsl(220 13% 91%);
|
|
--input: hsl(220 13% 91%);
|
|
--ring: hsl(220 13% 70.8%);
|
|
--chart-1: 12 76% 61%;
|
|
--chart-2: 173 58% 39%;
|
|
--chart-3: 197 37% 24%;
|
|
--chart-4: 43 74% 66%;
|
|
--chart-5: 27 87% 67%;
|
|
--radius: 0.625rem;
|
|
--sidebar: hsl(210 20% 98.5%);
|
|
--sidebar-foreground: hsl(224 71.4% 4.1%);
|
|
--sidebar-primary: hsl(220.9 39.3% 11%);
|
|
--sidebar-primary-foreground: hsl(210 20% 98%);
|
|
--sidebar-accent: hsl(220 14.3% 95.9%);
|
|
--sidebar-accent-foreground: hsl(220.9 39.3% 11%);
|
|
--sidebar-border: hsl(220 13% 91%);
|
|
--sidebar-ring: hsl(220 13% 70.8%);
|
|
}
|
|
|
|
.dark {
|
|
--background: hsl(224 71.4% 4.1%);
|
|
--foreground: hsl(210 20% 98%);
|
|
--card: hsl(224 71.4% 4.1%);
|
|
--card-foreground: hsl(210 20% 98%);
|
|
--popover: hsl(224 71.4% 4.1%);
|
|
--popover-foreground: hsl(210 20% 98%);
|
|
--primary: hsl(210 20% 98%);
|
|
--primary-foreground: hsl(220.9 39.3% 11%);
|
|
--secondary: hsl(215 27.9% 16.9%);
|
|
--secondary-foreground: hsl(210 20% 98%);
|
|
--muted: hsl(215 27.9% 16.9%);
|
|
--muted-foreground: hsl(217.9 10.6% 64.9%);
|
|
--accent: hsl(215 27.9% 16.9%);
|
|
--accent-foreground: hsl(210 20% 98%);
|
|
--destructive: hsl(0 62.8% 30.6%);
|
|
--destructive-foreground: hsl(0 84.2% 60.2%);
|
|
--border: hsl(215 27.9% 16.9%);
|
|
--input: hsl(215 27.9% 16.9%);
|
|
--ring: hsl(217.9 10.6% 55.6%);
|
|
--chart-1: 220 70% 50%;
|
|
--chart-2: 160 60% 45%;
|
|
--chart-3: 30 80% 55%;
|
|
--chart-4: 280 65% 60%;
|
|
--chart-5: 340 75% 55%;
|
|
--sidebar: hsl(220.9 39.3% 11%);
|
|
--sidebar-foreground: hsl(210 20% 98%);
|
|
--sidebar-primary: hsl(220 70% 50%);
|
|
--sidebar-primary-foreground: hsl(210 20% 98%);
|
|
--sidebar-accent: hsl(215 27.9% 16.9%);
|
|
--sidebar-accent-foreground: hsl(210 20% 98%);
|
|
--sidebar-border: hsl(215 27.9% 16.9%);
|
|
--sidebar-ring: hsl(220 13% 43.9%);
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
html {
|
|
@apply scroll-smooth;
|
|
}
|
|
body {
|
|
@apply bg-default text-foreground;
|
|
/* font-feature-settings: "rlig" 1, "calt" 1; */
|
|
font-synthesis-weight: none;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.step {
|
|
counter-increment: step;
|
|
}
|
|
|
|
.step:before {
|
|
@apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
|
|
@apply ml-[-50px] mt-[-4px];
|
|
content: counter(step);
|
|
}
|
|
|
|
.chunk-container {
|
|
@apply shadow-none;
|
|
}
|
|
|
|
.chunk-container::after {
|
|
content: '';
|
|
@apply absolute -inset-4 shadow-xl rounded-xl border;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.container {
|
|
@apply px-4;
|
|
}
|
|
}
|
|
|
|
.preview {
|
|
--background: hsl(0 0% 100%);
|
|
--foreground: hsl(0 0% 14.5%);
|
|
--card: hsl(0 0% 100%);
|
|
--card-foreground: hsl(0 0% 14.5%);
|
|
--popover: hsl(0 0% 100%);
|
|
--popover-foreground: hsl(0 0% 14.5%);
|
|
--primary: hsl(0 0% 20.5%);
|
|
--primary-foreground: hsl(0 0% 98.5%);
|
|
--secondary: hsl(0 0% 97%);
|
|
--secondary-foreground: hsl(0 0% 20.5%);
|
|
--muted: hsl(0 0% 97%);
|
|
--muted-foreground: hsl(0 0% 55.6%);
|
|
--accent: hsl(0 0% 97%);
|
|
--accent-foreground: hsl(0 0% 20.5%);
|
|
--destructive: hsl(27.3 24.5% 57.7%);
|
|
--destructive-foreground: hsl(27.3 24.5% 57.7%);
|
|
--border: hsl(0 0% 92.2%);
|
|
--input: hsl(0 0% 92.2%);
|
|
--ring: hsl(0 0% 70.8%);
|
|
--chart-1: 41.1 22.2% 64.6%;
|
|
--chart-2: 184.7 11.8% 60%;
|
|
--chart-3: 227.4 7% 39.8%;
|
|
--chart-4: 84.4 18.9% 82.8%;
|
|
--chart-5: 70.1 18.8% 76.9%;
|
|
--radius: 0.625rem;
|
|
--sidebar: hsl(0 0% 98.5%);
|
|
--sidebar-foreground: hsl(0 0% 14.5%);
|
|
--sidebar-primary: hsl(0 0% 20.5%);
|
|
--sidebar-primary-foreground: hsl(0 0% 98.5%);
|
|
--sidebar-accent: hsl(0 0% 97%);
|
|
--sidebar-accent-foreground: hsl(0 0% 20.5%);
|
|
--sidebar-border: hsl(0 0% 92.2%);
|
|
--sidebar-ring: hsl(0 0% 70.8%);
|
|
}
|
|
|
|
[data-theme='dark'] .preview,
|
|
[data-theme='classic-dark'] .preview {
|
|
--background: hsl(0 0% 14.5%);
|
|
--foreground: hsl(0 0% 98.5%);
|
|
--card: hsl(0 0% 0%);
|
|
--card-foreground: hsl(0 0% 98.5%);
|
|
--popover: hsl(0 0% 14.5%);
|
|
--popover-foreground: hsl(0 0% 98.5%);
|
|
--primary: hsl(0 0% 98.5%);
|
|
--primary-foreground: hsl(0 0% 20.5%);
|
|
--secondary: hsl(0 0% 26.9%);
|
|
--secondary-foreground: hsl(0 0% 98.5%);
|
|
--muted: hsl(0 0% 26.9%);
|
|
--muted-foreground: hsl(0 0% 70.8%);
|
|
--accent: hsl(0 0% 26.9%);
|
|
--accent-foreground: hsl(0 0% 98.5%);
|
|
--destructive: hsl(25.7 14.1% 39.6%);
|
|
--destructive-foreground: hsl(25.3 23.7% 63.7%);
|
|
--border: hsl(0 0% 26.9%);
|
|
--input: hsl(0 0% 26.9%);
|
|
--ring: hsl(0 0% 55.6%);
|
|
--chart-1: 264.4 24.3% 48.8%;
|
|
--chart-2: 162.5 17% 69.6%;
|
|
--chart-3: 70.1 18.8% 76.9%;
|
|
--chart-4: 303.9 26.5% 62.7%;
|
|
--chart-5: 16.4 24.6% 64.5%;
|
|
--sidebar: hsl(0 0% 20.5%);
|
|
--sidebar-foreground: hsl(0 0% 98.5%);
|
|
--sidebar-primary: hsl(264.4 24.3% 48.8%);
|
|
--sidebar-primary-foreground: hsl(0 0% 98.5%);
|
|
--sidebar-accent: hsl(0 0% 26.9%);
|
|
--sidebar-accent-foreground: hsl(0 0% 98.5%);
|
|
--sidebar-border: hsl(0 0% 26.9%);
|
|
--sidebar-ring: hsl(0 0% 43.9%);
|
|
}
|
|
|
|
.preview * {
|
|
@apply border-border outline-ring/50;
|
|
}
|