diff --git a/apps/docs/content/guides/auth/passwords.mdx b/apps/docs/content/guides/auth/passwords.mdx
index 4548d785ba8..d466c02e9e5 100644
--- a/apps/docs/content/guides/auth/passwords.mdx
+++ b/apps/docs/content/guides/auth/passwords.mdx
@@ -28,9 +28,10 @@ The instructions in this section assume that email confirmations are enabled.
stickyTabList={{
style: {
top: 'var(--header-height)',
- backgroundColor: 'hsl(var(--background-default) / var(--tw-bg-opacity))',
+ backgroundColor:
+ 'oklch(from var(--background-default) l c h / var(--tw-bg-opacity))',
maskImage: 'none',
- borderBottom: '1px solid hsl(var(--border-default) / 1)',
+ borderBottom: '1px solid oklch(from var(--border-default) l c h / 1)',
}
}}
size="large"
diff --git a/apps/docs/styles/globals.css b/apps/docs/styles/globals.css
index a7f2386c79a..b9cdc543d93 100644
--- a/apps/docs/styles/globals.css
+++ b/apps/docs/styles/globals.css
@@ -46,7 +46,7 @@
::before,
::backdrop,
::file-selector-button {
- border-color: hsl(var(--border-default, currentColor));
+ border-color: var(--border-default, currentColor);
}
code,
@@ -399,7 +399,7 @@ th code {
transition-timing-function: cubic-bezier(0.24, 0.25, 0.05, 1) !important;
}
[data-rmiz-modal-overlay='visible'] {
- background-color: hsl(var(--background-default)) !important;
+ background-color: var(--background-default) !important;
opacity: 0.8;
}
[data-rmiz-modal-img] {
@@ -431,16 +431,16 @@ th code {
[data-theme='light'],
.light {
--code-token-keyword: #6b35dc;
- --code-foreground: hsl(var(--foreground-light) / 1);
+ --code-foreground: oklch(from var(--foreground-light) l c h / 1);
--code-token-constant: #15593b;
--code-token-string: #f1a10d;
--code-token-comment: #7e7e7e;
- --code-token-parameter: hsl(var(--foreground-light) / 1);
+ --code-token-parameter: oklch(from var(--foreground-light) l c h / 1);
--code-token-function: #15593b;
--code-token-string-expression: #f1a10d;
- --code-token-punctuation: hsl(var(--foreground-light) / 1);
- --code-token-link: hsl(var(--foreground-light) / 1);
- --code-token-number: hsl(var(--foreground-light) / 1);
+ --code-token-punctuation: oklch(from var(--foreground-light) l c h / 1);
+ --code-token-link: oklch(from var(--foreground-light) l c h / 1);
+ --code-token-number: oklch(from var(--foreground-light) l c h / 1);
--code-token-property: #15593b;
--code-highlight-color: #1c1c1c;
}
diff --git a/apps/learn/styles/code-block-variables.css b/apps/learn/styles/code-block-variables.css
index f1054071748..f12e15fb992 100644
--- a/apps/learn/styles/code-block-variables.css
+++ b/apps/learn/styles/code-block-variables.css
@@ -18,16 +18,16 @@
[data-theme='light'],
.light {
--code-token-keyword: #6b35dc;
- --code-foreground: hsl(var(--foreground-light) / 1);
+ --code-foreground: oklch(from var(--foreground-light) l c h / 1);
--code-token-constant: #15593b;
--code-token-string: #f1a10d;
--code-token-comment: #7e7e7e;
- --code-token-parameter: hsl(var(--foreground-light) / 1);
+ --code-token-parameter: oklch(from var(--foreground-light) l c h / 1);
--code-token-function: #15593b;
--code-token-string-expression: #f1a10d;
- --code-token-punctuation: hsl(var(--foreground-light) / 1);
- --code-token-link: hsl(var(--foreground-light) / 1);
- --code-token-number: hsl(var(--foreground-light) / 1);
+ --code-token-punctuation: oklch(from var(--foreground-light) l c h / 1);
+ --code-token-link: oklch(from var(--foreground-light) l c h / 1);
+ --code-token-number: oklch(from var(--foreground-light) l c h / 1);
--code-token-property: #15593b;
--code-highlight-color: #1c1c1c;
}
diff --git a/apps/learn/styles/globals.css b/apps/learn/styles/globals.css
index 84065d57ffa..1478d871f62 100644
--- a/apps/learn/styles/globals.css
+++ b/apps/learn/styles/globals.css
@@ -11,25 +11,25 @@
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
- --color-background: hsl(var(--background));
- --color-foreground: hsl(var(--foreground));
- --color-card: hsl(var(--card));
- --color-card-foreground: hsl(var(--card-foreground));
- --color-popover: hsl(var(--popover));
- --color-popover-foreground: hsl(var(--popover-foreground));
- --color-primary: hsl(var(--primary));
- --color-primary-foreground: hsl(var(--primary-foreground));
- --color-secondary: hsl(var(--secondary));
- --color-secondary-foreground: hsl(var(--secondary-foreground));
- --color-muted: hsl(var(--muted));
- --color-muted-foreground: hsl(var(--muted-foreground));
- --color-accent: hsl(var(--accent));
- --color-accent-foreground: hsl(var(--accent-foreground));
- --color-destructive: hsl(var(--destructive));
- --color-destructive-foreground: hsl(var(--destructive-foreground));
- --color-border: hsl(var(--border));
- --color-input: hsl(var(--input));
- --color-ring: hsl(var(--ring));
+ --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));
@@ -39,74 +39,74 @@
@layer base {
:root {
- --background: 0 0% 100%;
- --foreground: 224 71.4% 4.1%;
- --card: 0 0% 100%;
- --card-foreground: 224 71.4% 4.1%;
- --popover: 0 0% 100%;
- --popover-foreground: 224 71.4% 4.1%;
- --primary: 220.9 39.3% 11%;
- --primary-foreground: 210 20% 98%;
- --secondary: 220 14.3% 95.9%;
- --secondary-foreground: 220.9 39.3% 11%;
- --muted: 220 14.3% 95.9%;
- --muted-foreground: 220 8.9% 46.1%;
- --accent: 220 14.3% 95.9%;
- --accent-foreground: 220.9 39.3% 11%;
- --destructive: 0 84.2% 60.2%;
- --destructive-foreground: 0 84.2% 60.2%;
- --border: 220 13% 91%;
- --input: 220 13% 91%;
- --ring: 220 13% 70.8%;
+ --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: 210 20% 98.5%;
- --sidebar-foreground: 224 71.4% 4.1%;
- --sidebar-primary: 220.9 39.3% 11%;
- --sidebar-primary-foreground: 210 20% 98%;
- --sidebar-accent: 220 14.3% 95.9%;
- --sidebar-accent-foreground: 220.9 39.3% 11%;
- --sidebar-border: 220 13% 91%;
- --sidebar-ring: 220 13% 70.8%;
+ --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: 224 71.4% 4.1%;
- --foreground: 210 20% 98%;
- --card: 224 71.4% 4.1%;
- --card-foreground: 210 20% 98%;
- --popover: 224 71.4% 4.1%;
- --popover-foreground: 210 20% 98%;
- --primary: 210 20% 98%;
- --primary-foreground: 220.9 39.3% 11%;
- --secondary: 215 27.9% 16.9%;
- --secondary-foreground: 210 20% 98%;
- --muted: 215 27.9% 16.9%;
- --muted-foreground: 217.9 10.6% 64.9%;
- --accent: 215 27.9% 16.9%;
- --accent-foreground: 210 20% 98%;
- --destructive: 0 62.8% 30.6%;
- --destructive-foreground: 0 84.2% 60.2%;
- --border: 215 27.9% 16.9%;
- --input: 215 27.9% 16.9%;
- --ring: 217.9 10.6% 55.6%;
+ --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: 220.9 39.3% 11%;
- --sidebar-foreground: 210 20% 98%;
- --sidebar-primary: 220 70% 50%;
- --sidebar-primary-foreground: 210 20% 98%;
- --sidebar-accent: 215 27.9% 16.9%;
- --sidebar-accent-foreground: 210 20% 98%;
- --sidebar-border: 215 27.9% 16.9%;
- --sidebar-ring: 220 13% 43.9%;
+ --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%);
}
}
@@ -153,75 +153,75 @@
}
.preview {
- --background: 0 0% 100%;
- --foreground: 0 0% 14.5%;
- --card: 0 0% 100%;
- --card-foreground: 0 0% 14.5%;
- --popover: 0 0% 100%;
- --popover-foreground: 0 0% 14.5%;
- --primary: 0 0% 20.5%;
- --primary-foreground: 0 0% 98.5%;
- --secondary: 0 0% 97%;
- --secondary-foreground: 0 0% 20.5%;
- --muted: 0 0% 97%;
- --muted-foreground: 0 0% 55.6%;
- --accent: 0 0% 97%;
- --accent-foreground: 0 0% 20.5%;
- --destructive: 27.3 24.5% 57.7%;
- --destructive-foreground: 27.3 24.5% 57.7%;
- --border: 0 0% 92.2%;
- --input: 0 0% 92.2%;
- --ring: 0 0% 70.8%;
+ --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: 0 0% 98.5%;
- --sidebar-foreground: 0 0% 14.5%;
- --sidebar-primary: 0 0% 20.5%;
- --sidebar-primary-foreground: 0 0% 98.5%;
- --sidebar-accent: 0 0% 97%;
- --sidebar-accent-foreground: 0 0% 20.5%;
- --sidebar-border: 0 0% 92.2%;
- --sidebar-ring: 0 0% 70.8%;
+ --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: 0 0% 14.5%;
- --foreground: 0 0% 98.5%;
- --card: 0 0% 0%;
- --card-foreground: 0 0% 98.5%;
- --popover: 0 0% 14.5%;
- --popover-foreground: 0 0% 98.5%;
- --primary: 0 0% 98.5%;
- --primary-foreground: 0 0% 20.5%;
- --secondary: 0 0% 26.9%;
- --secondary-foreground: 0 0% 98.5%;
- --muted: 0 0% 26.9%;
- --muted-foreground: 0 0% 70.8%;
- --accent: 0 0% 26.9%;
- --accent-foreground: 0 0% 98.5%;
- --destructive: 25.7 14.1% 39.6%;
- --destructive-foreground: 25.3 23.7% 63.7%;
- --border: 0 0% 26.9%;
- --input: 0 0% 26.9%;
- --ring: 0 0% 55.6%;
+ --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: 0 0% 20.5%;
- --sidebar-foreground: 0 0% 98.5%;
- --sidebar-primary: 264.4 24.3% 48.8%;
- --sidebar-primary-foreground: 0 0% 98.5%;
- --sidebar-accent: 0 0% 26.9%;
- --sidebar-accent-foreground: 0 0% 98.5%;
- --sidebar-border: 0 0% 26.9%;
- --sidebar-ring: 0 0% 43.9%;
+ --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 * {
diff --git a/apps/lite-studio/styles/globals.css b/apps/lite-studio/styles/globals.css
index 7450b023ad8..d468bbe9fef 100644
--- a/apps/lite-studio/styles/globals.css
+++ b/apps/lite-studio/styles/globals.css
@@ -38,6 +38,6 @@ body {
::before,
::backdrop,
::file-selector-button {
- border-color: hsl(var(--border-default, currentColor));
+ border-color: var(--border-default, currentColor);
}
}
diff --git a/apps/studio/components/grid/components/grid/ColumnHeader.tsx b/apps/studio/components/grid/components/grid/ColumnHeader.tsx
index cc75818f6f8..d5e528b7c38 100644
--- a/apps/studio/components/grid/components/grid/ColumnHeader.tsx
+++ b/apps/studio/components/grid/components/grid/ColumnHeader.tsx
@@ -38,7 +38,7 @@ export function ColumnHeader({
} as const
return (
-
+
{
{
absolute pointer-events-none
w-full h-full
inset-0 top-auto
- bg-[linear-gradient(to_bottom,transparent_0%,hsl(var(--background-default))_100%)]
+ bg-[linear-gradient(to_bottom,transparent_0%,var(--background-default)_100%)]
"
/>
@@ -368,7 +368,7 @@ const data: () => {
),
className: 'border-l-0! sm:border-l!',
image: (
- {
@@ -264,7 +264,7 @@ const useVibeCodersContent: () => {
),
className: 'border-l-0!',
image: (
-
-
-
@@ -269,7 +269,7 @@ const data: () => {
),
className: 'border-l-0! sm:border-l!',
image: (
-
+
@@ -262,7 +262,7 @@ const data = {
),
className: 'border-l-0! sm:border-l!',
image: (
-
Before
@@ -144,7 +144,7 @@ export const DiskManagementReviewAndSubmitDialog = ({
-
+ {
@@ -426,7 +426,7 @@ const data: () => {
),
className: 'border-l-0! sm:border-l!',
image: (
-
After
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionInvocationsChart.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionInvocationsChart.tsx
index 15258cb47ce..39e21839edb 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionInvocationsChart.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionInvocationsChart.tsx
@@ -86,7 +86,7 @@ export const EdgeFunctionInvocationsChart = ({
{updateAnnotation && (
{
@@ -270,7 +270,7 @@ const data = {
),
className: 'border-l-0! sm:border-l!',
image: (
-
@@ -254,7 +254,7 @@ const data: () => {
),
className: 'border-l-0! sm:border-l!',
image: (
- {
const threshold = METRIC_THRESHOLDS[attribute as keyof typeof METRIC_THRESHOLDS]
- if (!threshold) return 'hsl(var(--chart-1))'
+ if (!threshold) return 'var(--chart-1)'
if (threshold.check === 'gt') {
return value >= threshold.danger
- ? 'hsl(var(--chart-destructive))'
+ ? 'var(--chart-destructive)'
: value >= threshold.warning
- ? 'hsl(var(--chart-warning))'
- : 'hsl(var(--chart-1))'
+ ? 'var(--chart-warning)'
+ : 'var(--chart-1)'
} else {
return value <= threshold.danger
- ? 'hsl(var(--chart-destructive))'
+ ? 'var(--chart-destructive)'
: value <= threshold.warning
- ? 'hsl(var(--chart-warning))'
- : 'hsl(var(--chart-1))'
+ ? 'var(--chart-warning)'
+ : 'var(--chart-1)'
}
}
@@ -362,7 +362,7 @@ export const ChartBlock = ({
/>
}
/>
- {
absolute pointer-events-none
w-full h-full
inset-0 top-auto
- bg-[linear-gradient(to_bottom,transparent_0%,hsl(var(--background-default))_100%)]
+ bg-[linear-gradient(to_bottom,transparent_0%,var(--background-default)_100%)]
"
/>
@@ -286,7 +286,7 @@ const data: () => {
),
className: 'border-l-0! sm:border-l!',
image: (
-
+
-
@@ -335,7 +335,7 @@ const data: {
),
className: 'border-l-0! sm:border-l!',
image: (
-
@@ -319,7 +319,7 @@ const data: () => {
),
image: (
-
+
= ({ isActive, isInView, className }) => {
diff --git a/apps/www/components/UsersGrowthChart.tsx b/apps/www/components/UsersGrowthChart.tsx
index 393a9b9e460..af92bc2139c 100644
--- a/apps/www/components/UsersGrowthChart.tsx
+++ b/apps/www/components/UsersGrowthChart.tsx
@@ -1,10 +1,9 @@
+import { companyStats } from '~/data/company-stats'
import { motion } from 'framer-motion'
import { FC, useEffect, useMemo, useState } from 'react'
import { useMedia } from 'react-use'
import { AnimatedCounter, Badge, cn } from 'ui'
-import { companyStats } from '~/data/company-stats'
-
const UsersGrowthChart: FC = () => {
return (
= ({ className, showHeading = true, align = 'center' }) => {
@@ -18,7 +18,7 @@ const Logos: React.FC = ({ className, showHeading = true, align = 'center
className={cn(
'relative w-full mx-auto max-w-4xl opacity-90 dark:opacity-70',
'overflow-hidden',
- "before:content[''] before:absolute before:inset-0 before:w-full before:bg-[linear-gradient(to_right,hsl(var(--background-default))_0%,transparent_10%,transparent_90%,hsl(var(--background-default))_100%)] before:z-10",
+ "before:content[''] before:absolute before:inset-0 before:w-full before:bg-[linear-gradient(to_right,var(--background-default)_0%,transparent_10%,transparent_90%,var(--background-default)_100%)] before:z-10",
'flex flex-nowrap justify-center',
'px-5 lg:px-12',
align === 'left' ? 'justify-start ml-0' : 'justify-center',
diff --git a/apps/www/data/aws-reinvent-2025.tsx b/apps/www/data/aws-reinvent-2025.tsx
index 05628cc70a4..fc5458b2551 100644
--- a/apps/www/data/aws-reinvent-2025.tsx
+++ b/apps/www/data/aws-reinvent-2025.tsx
@@ -250,7 +250,7 @@ const data = {
absolute pointer-events-none
w-full h-full
inset-0 top-auto
- bg-[linear-gradient(to_bottom,transparent_0%,hsl(var(--background-default))_100%)]
+ bg-[linear-gradient(to_bottom,transparent_0%,var(--background-default)_100%)]
"
/>
@@ -316,7 +316,7 @@ const data = {
),
className: 'border-l-0! sm:border-l!',
image: (
-
+
diff --git a/apps/www/app/(home)/_components/OpenSourceSection.tsx b/apps/www/app/(home)/_components/OpenSourceSection.tsx
index be815f3c132..7abf14f5b99 100644
--- a/apps/www/app/(home)/_components/OpenSourceSection.tsx
+++ b/apps/www/app/(home)/_components/OpenSourceSection.tsx
@@ -63,7 +63,7 @@ const TEXT_OFFSET_X = Math.floor((COLS - TEXT_W) / 2)
const TEXT_OFFSET_Y = Math.floor((ROWS - TEXT_H) / 2)
const LEVELS_BG = [
- 'hsl(var(--background-surface-300) / 0.2)',
+ 'color-mix(in oklch, var(--foreground) 5%, var(--background))',
'hsl(var(--brand-400) / 0.08)',
'hsl(var(--brand-500) / 0.1)',
'hsl(var(--brand-600) / 0.12)',
diff --git a/apps/www/app/state-of-startups/components/StateOfStartupsAuroraHeader.tsx b/apps/www/app/state-of-startups/components/StateOfStartupsAuroraHeader.tsx
index f9912f65cd1..0d624038a3c 100644
--- a/apps/www/app/state-of-startups/components/StateOfStartupsAuroraHeader.tsx
+++ b/apps/www/app/state-of-startups/components/StateOfStartupsAuroraHeader.tsx
@@ -12,7 +12,7 @@ export function StateOfStartupsAuroraHeader() {
return (
{/* Aurora shader scene — hidden when user prefers reduced motion */}
{!prefersReducedMotion && (
@@ -35,7 +35,7 @@ export function StateOfStartupsAuroraHeader() {
className="absolute inset-0 pointer-events-none transition-opacity [transition-duration:1200ms]"
style={{
opacity: shaderLoaded ? 0 : 1,
- background: 'hsl(var(--background-alternative-default))',
+ background: 'var(--background-alternative-default)',
}}
/>
@@ -44,7 +44,7 @@ export function StateOfStartupsAuroraHeader() {
className="absolute inset-0 pointer-events-none"
style={{
background:
- 'linear-gradient(to top, hsl(var(--background-alternative-default)) 0%, hsl(var(--background-alternative-default) / 0.9) 15%, transparent 90%)',
+ 'linear-gradient(to top, var(--background-alternative-default) 0%, oklch(from var(--background-alternative-default) l c h / 0.9) 15%, transparent 90%)',
}}
/>
diff --git a/apps/www/app/state-of-startups/components/StateOfStartupsHeader.tsx b/apps/www/app/state-of-startups/components/StateOfStartupsHeader.tsx
index f6f90ef6af9..18a7a251198 100644
--- a/apps/www/app/state-of-startups/components/StateOfStartupsHeader.tsx
+++ b/apps/www/app/state-of-startups/components/StateOfStartupsHeader.tsx
@@ -12,8 +12,8 @@ const DiagonalStripes = () => (
style={{
backgroundImage: `repeating-linear-gradient(
45deg,
- hsl(var(--border-muted)) 0px,
- hsl(var(--border-muted)) 1px,
+ var(--border-muted) 0px,
+ var(--border-muted) 1px,
transparent 1px,
transparent 8px
)`,
diff --git a/apps/www/app/state-of-startups/components/SurveyChartShell.tsx b/apps/www/app/state-of-startups/components/SurveyChartShell.tsx
index 1c02bb2ab0f..e3ac8344e94 100644
--- a/apps/www/app/state-of-startups/components/SurveyChartShell.tsx
+++ b/apps/www/app/state-of-startups/components/SurveyChartShell.tsx
@@ -1,7 +1,7 @@
import type { ReactNode } from 'react'
const CHART_GRADIENT =
- 'radial-gradient(circle at center -150%, hsl(var(--brand-300)), transparent 80%), radial-gradient(ellipse at center 230%, hsl(var(--background-surface-200)), transparent 75%)'
+ 'radial-gradient(circle at center -150%, hsl(var(--brand-300)), transparent 80%), radial-gradient(ellipse at center 230%, var(--background-surface-200), transparent 75%)'
/** Shared frame for every survey chart: gradient container + Q&A/eyebrow header.
* When `isEmpty` is set (no data for the active year), renders the
diff --git a/apps/www/app/state-of-startups/register/RegisterContent.tsx b/apps/www/app/state-of-startups/register/RegisterContent.tsx
index cd07a920862..3b1898524bc 100644
--- a/apps/www/app/state-of-startups/register/RegisterContent.tsx
+++ b/apps/www/app/state-of-startups/register/RegisterContent.tsx
@@ -25,12 +25,12 @@ export function RegisterContent() {
return (
{/* Aurora shader scene — hidden when user prefers reduced motion */}
{!prefersReducedMotion && (
@@ -53,7 +53,7 @@ export function RegisterContent() {
className="absolute inset-0 pointer-events-none transition-opacity [transition-duration:1200ms]"
style={{
opacity: shaderLoaded ? 0 : 1,
- background: 'hsl(var(--background-alternative-default))',
+ background: 'var(--background-alternative-default)',
}}
/>
@@ -62,7 +62,7 @@ export function RegisterContent() {
className="absolute inset-0 pointer-events-none"
style={{
background:
- 'linear-gradient(to top, hsl(var(--background-alternative-default)) 0%, hsl(var(--background-alternative-default) / 0.9) 15%, transparent 90%)',
+ 'linear-gradient(to top, var(--background-alternative-default) 0%, oklch(from var(--background-alternative-default) l c h / 0.9) 15%, transparent 90%)',
}}
/>
diff --git a/apps/www/components/Charts/DeveloperGrowthChart.tsx b/apps/www/components/Charts/DeveloperGrowthChart.tsx
index 4438c4d00b8..8d35d5d7779 100644
--- a/apps/www/components/Charts/DeveloperGrowthChart.tsx
+++ b/apps/www/components/Charts/DeveloperGrowthChart.tsx
@@ -102,14 +102,14 @@ const DeveloperGrowthChart = () => {
value.substring(0, 4)}
ticks={data.filter((d, i) => isYearBoundary(d.month, i)).map((d) => d.month)}
/>
{
y={-12}
dy={16}
textAnchor="end"
- fill="hsl(var(--foreground-lighter))"
+ fill="var(--foreground-lighter)"
transform="rotate(-35)"
className="text-xs"
>
@@ -72,14 +72,14 @@ const Chart = () => {
@ts-ignore */}
{
style={{
fontSize: '14px',
marginBottom: '32px',
- color: 'hsl(var(--foreground-lighter))',
+ color: 'var(--foreground-lighter)',
}}
minTickGap={16}
tickMargin={8}
- axisLine={{ stroke: 'hsl(var(--border-default))' }}
- tickLine={{ stroke: 'hsl(var(--border-default))' }}
+ axisLine={{ stroke: 'var(--border-default)' }}
+ tickLine={{ stroke: 'var(--border-default)' }}
tick={
diff --git a/apps/www/components/Go/TweetsSection.tsx b/apps/www/components/Go/TweetsSection.tsx
index a7eab7fbf98..a4cef715cc5 100644
--- a/apps/www/components/Go/TweetsSection.tsx
+++ b/apps/www/components/Go/TweetsSection.tsx
@@ -68,7 +68,7 @@ function DesktopMarquee() {
))}
{isEditingTitle ? (
{
-
diff --git a/apps/ui-library/registry/default/examples/realtime-flow-demo.tsx b/apps/ui-library/registry/default/examples/realtime-flow-demo.tsx
index a788202aeec..caf5d7b8ce3 100644
--- a/apps/ui-library/registry/default/examples/realtime-flow-demo.tsx
+++ b/apps/ui-library/registry/default/examples/realtime-flow-demo.tsx
@@ -11,7 +11,9 @@ import {
type Node,
type NodeProps,
} from '@xyflow/react'
+
import '@xyflow/react/dist/style.css'
+
import { memo, useMemo, useRef } from 'react'
import { RealtimeFlowOverlay } from '../blocks/realtime-flow/components/realtime-flow-overlay'
@@ -21,9 +23,9 @@ import { Button } from '../components/ui/button'
const NODE_Y_BASE = 80
const NODE_X_BASE = 80
const FLOW_NODE_STYLE = {
- backgroundColor: 'hsl(var(--card))',
- borderColor: 'hsl(var(--border))',
- color: 'hsl(var(--card-foreground))',
+ backgroundColor: 'var(--card)',
+ borderColor: 'var(--border)',
+ color: 'var(--card-foreground)',
}
type EditableNodeData = {
diff --git a/apps/ui-library/styles/code-block-variables.css b/apps/ui-library/styles/code-block-variables.css
index f1054071748..f12e15fb992 100644
--- a/apps/ui-library/styles/code-block-variables.css
+++ b/apps/ui-library/styles/code-block-variables.css
@@ -18,16 +18,16 @@
[data-theme='light'],
.light {
--code-token-keyword: #6b35dc;
- --code-foreground: hsl(var(--foreground-light) / 1);
+ --code-foreground: oklch(from var(--foreground-light) l c h / 1);
--code-token-constant: #15593b;
--code-token-string: #f1a10d;
--code-token-comment: #7e7e7e;
- --code-token-parameter: hsl(var(--foreground-light) / 1);
+ --code-token-parameter: oklch(from var(--foreground-light) l c h / 1);
--code-token-function: #15593b;
--code-token-string-expression: #f1a10d;
- --code-token-punctuation: hsl(var(--foreground-light) / 1);
- --code-token-link: hsl(var(--foreground-light) / 1);
- --code-token-number: hsl(var(--foreground-light) / 1);
+ --code-token-punctuation: oklch(from var(--foreground-light) l c h / 1);
+ --code-token-link: oklch(from var(--foreground-light) l c h / 1);
+ --code-token-number: oklch(from var(--foreground-light) l c h / 1);
--code-token-property: #15593b;
--code-highlight-color: #1c1c1c;
}
diff --git a/apps/ui-library/styles/globals.css b/apps/ui-library/styles/globals.css
index ecb962acc24..6d89a7d3595 100644
--- a/apps/ui-library/styles/globals.css
+++ b/apps/ui-library/styles/globals.css
@@ -18,25 +18,25 @@
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
- /* --color-background: hsl(var(--background)); */
- --color-foreground: hsl(var(--foreground));
- --color-card: hsl(var(--card));
- --color-card-foreground: hsl(var(--card-foreground));
- --color-popover: hsl(var(--popover));
- --color-popover-foreground: hsl(var(--popover-foreground));
- --color-primary: hsl(var(--primary));
- --color-primary-foreground: hsl(var(--primary-foreground));
- --color-secondary: hsl(var(--secondary));
- --color-secondary-foreground: hsl(var(--secondary-foreground));
- --color-muted: hsl(var(--muted));
- --color-muted-foreground: hsl(var(--muted-foreground));
- --color-accent: hsl(var(--accent));
- --color-accent-foreground: hsl(var(--accent-foreground));
- --color-destructive: hsl(var(--destructive));
- --color-destructive-foreground: hsl(var(--destructive-foreground));
- /* --color-border: hsl(var(--border)); */
- --color-input: hsl(var(--input));
- --color-ring: hsl(var(--ring));
+ /* --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));
@@ -46,75 +46,75 @@
@layer base {
:root {
- --background: 0 0% 100%;
- --foreground: 0 0% 14.5%;
- --card: 0 0% 100%;
- --card-foreground: 0 0% 14.5%;
- --popover: 0 0% 100%;
- --popover-foreground: 0 0% 14.5%;
- --primary: 0 0% 20.5%;
- --primary-foreground: 0 0% 98.5%;
- --secondary: 0 0% 97%;
- --secondary-foreground: 0 0% 20.5%;
- --muted: 0 0% 97%;
- --muted-foreground: 0 0% 55.6%;
- --accent: 0 0% 97%;
- --accent-foreground: 0 0% 20.5%;
- --destructive: 27.3 24.5% 57.7%;
- --destructive-foreground: 27.3 24.5% 57.7%;
- --border: 0 0% 92.2%;
- --input: 0 0% 92.2%;
- --ring: 0 0% 70.8%;
+ --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: 0 0% 98.5%;
- --sidebar-foreground: 0 0% 14.5%;
- --sidebar-primary: 0 0% 20.5%;
- --sidebar-primary-foreground: 0 0% 98.5%;
- --sidebar-accent: 0 0% 97%;
- --sidebar-accent-foreground: 0 0% 20.5%;
- --sidebar-border: 0 0% 92.2%;
- --sidebar-ring: 0 0% 70.8%;
+ --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'],
[data-theme='classic-dark'] {
- --background: 0 0% 14.5%;
- --foreground: 0 0% 98.5%;
- --card: 0 0% 0%;
- --card-foreground: 0 0% 98.5%;
- --popover: 0 0% 14.5%;
- --popover-foreground: 0 0% 98.5%;
- --primary: 0 0% 98.5%;
- --primary-foreground: 0 0% 20.5%;
- --secondary: 0 0% 26.9%;
- --secondary-foreground: 0 0% 98.5%;
- --muted: 0 0% 26.9%;
- --muted-foreground: 0 0% 70.8%;
- --accent: 0 0% 26.9%;
- --accent-foreground: 0 0% 98.5%;
- --destructive: 25.7 14.1% 39.6%;
- --destructive-foreground: 25.3 23.7% 63.7%;
- --border: 0 0% 26.9%;
- --input: 0 0% 26.9%;
- --ring: 0 0% 55.6%;
+ --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: 0 0% 20.5%;
- --sidebar-foreground: 0 0% 98.5%;
- --sidebar-primary: 264.4 24.3% 48.8%;
- --sidebar-primary-foreground: 0 0% 98.5%;
- --sidebar-accent: 0 0% 26.9%;
- --sidebar-accent-foreground: 0 0% 98.5%;
- --sidebar-border: 0 0% 26.9%;
- --sidebar-ring: 0 0% 43.9%;
+ --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%);
}
}
diff --git a/apps/www/_blog/2025-12-17-building-chatgpt-apps-with-supabase.mdx b/apps/www/_blog/2025-12-17-building-chatgpt-apps-with-supabase.mdx
index 56e2f606597..b49c6cc5ab5 100644
--- a/apps/www/_blog/2025-12-17-building-chatgpt-apps-with-supabase.mdx
+++ b/apps/www/_blog/2025-12-17-building-chatgpt-apps-with-supabase.mdx
@@ -105,7 +105,7 @@ Open `index.ts` and set up your MCP server:
```tsx
//index.ts
-import { MCPServer, object, text, widget, error } from 'mcp-use/server'
+import { error, MCPServer, object, text, widget } from 'mcp-use/server'
const server = new MCPServer({
name: 'supabase-explorer',
@@ -197,7 +197,7 @@ const SupabaseStatusWidget: React.FC = () => {
+
-
+
+
{chartData?.map((_: any, index: number) => (
|
diff --git a/apps/studio/styles/globals.css b/apps/studio/styles/globals.css
index 1a6b3947c63..af1591f6849 100644
--- a/apps/studio/styles/globals.css
+++ b/apps/studio/styles/globals.css
@@ -14,36 +14,36 @@
@theme {
--text-grid: 13px;
- --color-typography-body-light: hsl(var(--foreground-light));
- --color-typography-body-dark: hsl(var(--foreground-light));
- --color-typography-body-secondary-light: hsl(var(--foreground-lighter));
- --color-typography-body-secondary-dark: hsl(var(--foreground-lighter));
- --color-typography-body-strong-light: hsl(var(--foreground-default));
- --color-typography-body-strong-dark: hsl(var(--foreground-default));
- --color-typography-body-faded-light: hsl(var(--foreground-muted));
- --color-typography-body-faded-dark: hsl(var(--foreground-muted));
+ --color-typography-body-light: var(--foreground-light);
+ --color-typography-body-dark: var(--foreground-light);
+ --color-typography-body-secondary-light: var(--foreground-lighter);
+ --color-typography-body-secondary-dark: var(--foreground-lighter);
+ --color-typography-body-strong-light: var(--foreground-default);
+ --color-typography-body-strong-dark: var(--foreground-default);
+ --color-typography-body-faded-light: var(--foreground-muted);
+ --color-typography-body-faded-dark: var(--foreground-muted);
- --color-table-body-light: hsl(var(--background-default));
- --color-table-body-dark: hsl(var(--background-default));
- --color-table-header-light: hsl(var(--background-surface-100));
- --color-table-header-dark: hsl(var(--background-surface-100));
- --color-table-footer-light: hsl(var(--background-surface-100));
- --color-table-footer-dark: hsl(var(--background-surface-100));
- --color-table-border-light: hsl(var(--border-default));
- --color-table-border-dark: hsl(var(--border-default));
+ --color-table-body-light: var(--background-default);
+ --color-table-body-dark: var(--background-default);
+ --color-table-header-light: var(--background-surface-100);
+ --color-table-header-dark: var(--background-surface-100);
+ --color-table-footer-light: var(--background-surface-100);
+ --color-table-footer-dark: var(--background-surface-100);
+ --color-table-border-light: var(--border-default);
+ --color-table-border-dark: var(--border-default);
- --color-panel-body-light: hsl(var(--background-surface-100));
- --color-panel-body-dark: hsl(var(--background-surface-100));
- --color-panel-header-light: hsl(var(--background-surface-100));
- --color-panel-header-dark: hsl(var(--background-surface-100));
- --color-panel-footer-light: hsl(var(--background-surface-100));
- --color-panel-footer-dark: hsl(var(--background-surface-100));
- --color-panel-border-light: hsl(var(--border-default));
- --color-panel-border-dark: hsl(var(--border-default));
- --color-panel-border-interior-light: hsl(var(--border-muted));
- --color-panel-border-interior-dark: hsl(var(--border-muted));
- --color-panel-border-hover-light: hsl(var(--border-muted));
- --color-panel-border-hover-dark: hsl(var(--border-muted));
+ --color-panel-body-light: var(--background-surface-100);
+ --color-panel-body-dark: var(--background-surface-100);
+ --color-panel-header-light: var(--background-surface-100);
+ --color-panel-header-dark: var(--background-surface-100);
+ --color-panel-footer-light: var(--background-surface-100);
+ --color-panel-footer-dark: var(--background-surface-100);
+ --color-panel-border-light: var(--border-default);
+ --color-panel-border-dark: var(--border-default);
+ --color-panel-border-interior-light: var(--border-muted);
+ --color-panel-border-interior-dark: var(--border-muted);
+ --color-panel-border-hover-light: var(--border-muted);
+ --color-panel-border-hover-dark: var(--border-muted);
--animate-shimmer: shimmer 2s infinite linear;
--animate-badge-shimmer: badge-shimmer 3s ease-in-out infinite;
@@ -149,11 +149,11 @@
--sidebar-background: var(--background-dash-sidebar);
--sidebar-foreground: var(--foreground-default);
--sidebar-primary: var(--foreground-default);
- --sidebar-primary-foreground: var(--warning-default);
+ --sidebar-primary-foreground: hsl(var(--warning-default));
--sidebar-accent: var(--background-selection);
--sidebar-accent-foreground: var(--foreground-default);
--sidebar-border: var(--border-default);
- --sidebar-ring: 217.2 91.2% 59.8%;
+ --sidebar-ring: var(--ring);
--header-height: 3rem;
}
@@ -170,11 +170,11 @@
--sidebar-background: var(--background-dash-sidebar);
--sidebar-foreground: var(--foreground-default);
--sidebar-primary: var(--foreground-default);
- --sidebar-primary-foreground: var(--warning-default);
+ --sidebar-primary-foreground: hsl(var(--warning-default));
--sidebar-accent: var(--background-selection);
--sidebar-accent-foreground: var(--foreground-default);
--sidebar-border: var(--border-default);
- --sidebar-ring: 217.2 91.2% 59.8%;
+ --sidebar-ring: var(--ring);
}
@layer base {
@@ -183,7 +183,7 @@
::before,
::backdrop,
::file-selector-button {
- border-color: hsl(var(--border-default, currentColor));
+ border-color: var(--border-default, currentColor);
}
}
diff --git a/apps/studio/styles/monaco.css b/apps/studio/styles/monaco.css
index fc59de11691..7cbd607fd47 100644
--- a/apps/studio/styles/monaco.css
+++ b/apps/studio/styles/monaco.css
@@ -7,8 +7,8 @@
.monaco-editor-alt.monaco-editor-alt,
.monaco-editor-alt > .monaco-editor {
- --vscode-editor-background: hsl(var(--background-surface-300)) !important;
- --vscode-editorGutter-background: hsl(var(--background-surface-300)) !important;
+ --vscode-editor-background: var(--background-surface-300) !important;
+ --vscode-editorGutter-background: var(--background-surface-300) !important;
}
.monaco-editor-alt .current-line {
@@ -17,14 +17,14 @@
[data-theme='dark'] .monaco-editor,
[data-theme='dark'] .monaco-diff-editor {
- --vscode-editor-background: hsl(var(--background-surface-100)) !important;
- --vscode-editorGutter-background: hsl(var(--background-surface-100)) !important;
+ --vscode-editor-background: var(--background-surface-100) !important;
+ --vscode-editorGutter-background: var(--background-surface-100) !important;
color-scheme: dark;
}
.monaco-editor,
.monaco-diff-editor {
- --vscode-editor-background: hsl(var(--background-dash-sidebar)) !important;
- --vscode-editorGutter-background: hsl(var(--background-dash-sidebar)) !important;
+ --vscode-editor-background: var(--background-dash-sidebar) !important;
+ --vscode-editorGutter-background: var(--background-dash-sidebar) !important;
outline: none !important;
}
diff --git a/apps/studio/styles/react-data-grid-logs.css b/apps/studio/styles/react-data-grid-logs.css
index 3f84b9bcf8c..438e2a9e89a 100644
--- a/apps/studio/styles/react-data-grid-logs.css
+++ b/apps/studio/styles/react-data-grid-logs.css
@@ -85,7 +85,7 @@
.syntax-highlight {
counter-reset: line-numbering;
font-family: Menlo, Monaco, monospace;
- color: hsl(var(--foreground-lighter));
+ color: var(--foreground-lighter);
word-break: break-word;
}
@@ -94,7 +94,7 @@
counter-increment: line-numbering;
padding-right: 0px;
display: inline-block;
- color: hsl(var(--border-stronger));
+ color: var(--border-stronger);
/* space after numbers */
width: 2rem;
text-align: left;
@@ -104,11 +104,11 @@
animation: shimmer 1.5s infinite linear;
background: linear-gradient(
to right,
- hsl(var(--background-default)) 0%,
+ var(--background-default) 0%,
hsl(var(--brand-default)) 25%,
hsl(var(--brand-300)) 35%,
- hsl(var(--background-default)) 45%,
- hsl(var(--background-surface-100)) 75%
+ var(--background-default) 45%,
+ var(--background-surface-100) 75%
);
background-size: 3000px 100%;
}
diff --git a/apps/studio/styles/ui.css b/apps/studio/styles/ui.css
index 216d774d86b..c242e8f58f6 100644
--- a/apps/studio/styles/ui.css
+++ b/apps/studio/styles/ui.css
@@ -190,8 +190,8 @@
&--inner-wrapper {
background: linear-gradient(
90deg,
- hsl(var(--background-alternative-default)) 50%,
- hsl(var(--background-surface-100)) 50%
+ var(--background-alternative-default) 50%,
+ var(--background-surface-100) 50%
);
width: 100%;
}
@@ -199,8 +199,8 @@
.dark &--inner-wrapper {
background: linear-gradient(
90deg,
- hsl(var(--background-surface-100)) 50%,
- hsl(var(--background-default)) 50%
+ var(--background-surface-100) 50%,
+ var(--background-default) 50%
);
}
@@ -364,37 +364,37 @@
.thin-scrollbars {
scrollbar-width: thin;
- scrollbar-color: hsl(var(--foreground-muted)) hsl(var(--background-alternative-default));
+ scrollbar-color: var(--foreground-muted) var(--background-alternative-default);
.dark & {
- scrollbar-color: hsl(var(--foreground-lighter)) hsl(var(--background-surface-100));
+ scrollbar-color: var(--foreground-lighter) var(--background-surface-100);
}
::-webkit-scrollbar {
- background: hsl(var(--background-default));
+ background: var(--background-default);
height: 3px;
width: 0px;
border-radius: 0;
.dark & {
- background: hsl(var(--border-control));
+ background: var(--border-control);
}
}
::-webkit-scrollbar-track {
- -webkit-box-shadow: inset 0 0 6px hsl(var(--border-control));
+ -webkit-box-shadow: inset 0 0 6px var(--border-control);
-webkit-border-radius: 5px;
border-radius: 5px;
.dark & {
- -webkit-box-shadow: inset 0 0 6px hsl(var(--border-stronger));
+ -webkit-box-shadow: inset 0 0 6px var(--border-stronger);
}
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 5px;
border-radius: 5px;
- background: hsl(var(--foreground-muted));
+ background: var(--foreground-muted);
.dark & {
-webkit-box-shadow: inset 0 0 6px var(--color-slate-1200);
diff --git a/apps/ui-library/app/example/password-based-auth/layout.tsx b/apps/ui-library/app/example/password-based-auth/layout.tsx
index 9ac281b3fb6..ea9f98a6c76 100644
--- a/apps/ui-library/app/example/password-based-auth/layout.tsx
+++ b/apps/ui-library/app/example/password-based-auth/layout.tsx
@@ -32,7 +32,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
className="flex w-full h-full items-center justify-center p-6 md:p-10 preview bg-surface-100"
style={{ minHeight: '100%' }}
>
-
+
diff --git a/apps/ui-library/app/example/social-auth/layout.tsx b/apps/ui-library/app/example/social-auth/layout.tsx
index e75df4c7c46..75628c05269 100644
--- a/apps/ui-library/app/example/social-auth/layout.tsx
+++ b/apps/ui-library/app/example/social-auth/layout.tsx
@@ -32,7 +32,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
className="flex w-full h-full items-center justify-center p-6 md:p-10 preview bg-surface-100"
style={{ minHeight: '100%' }}
>
-
+
diff --git a/apps/ui-library/components/component-preview.tsx b/apps/ui-library/components/component-preview.tsx
index e13dd56b3e8..ce22543c0e8 100644
--- a/apps/ui-library/components/component-preview.tsx
+++ b/apps/ui-library/components/component-preview.tsx
@@ -89,10 +89,10 @@ export function ComponentPreview({
)}
>
{showGrid && (
-
+
)}
{showDottedGrid && (
-
+
)}
{children}
{children}
{ComponentPreview}
Supabase Status
-+
Last {props.daysBack} days
diff --git a/apps/www/components/Products/RealtimeVisual.tsx b/apps/www/components/Products/RealtimeVisual.tsx
index 896a3ac6c10..cf6f783fb7c 100644
--- a/apps/www/components/Products/RealtimeVisual.tsx
+++ b/apps/www/components/Products/RealtimeVisual.tsx
@@ -1,7 +1,8 @@
-import React, { useRef, useState } from 'react'
-import Image from 'next/image'
import { isBrowser, useReducedMotion } from 'common'
+import Image from 'next/image'
+import React, { useRef, useState } from 'react'
import { cn } from 'ui'
+
interface Props {
className?: string
}
@@ -88,8 +89,8 @@ const RealtimeVisual: React.FC = ({ className }) => {
>
= ({ className }) => {
>
= ({ className }) => {
absolute pointer-events-none
w-full h-full max-h-[400px] lg:max-h-none
inset-0 top-auto
- bg-[linear-gradient(to_top,transparent_0%,transparent_50%,hsl(var(--background-surface-75))_85%)]
+ bg-[linear-gradient(to_top,transparent_0%,transparent_50%,var(--background-surface-75)_85%)]
"
/>
diff --git a/apps/www/components/Products/VectorAI/CustomersVisual.tsx b/apps/www/components/Products/VectorAI/CustomersVisual.tsx
index 487ce53b5ff..4e731029508 100644
--- a/apps/www/components/Products/VectorAI/CustomersVisual.tsx
+++ b/apps/www/components/Products/VectorAI/CustomersVisual.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
-import { m } from 'framer-motion'
import { DEFAULT_EASE } from '~/lib/animations'
+import { m } from 'framer-motion'
+import React from 'react'
const CustomersVisual = () => {
const RenderedVisual = () => (
@@ -8,7 +8,7 @@ const CustomersVisual = () => {
{
cy="151.574"
rx="271.124"
ry="82.5656"
- fill="hsl(var(--background-alternative-default))"
+ fill="var(--background-alternative-default)"
/>
{
{/* logo bg rays */}
@@ -231,7 +231,7 @@ const CustomersVisual = () => {
rx="303.093"
ry="68.9323"
transform="matrix(1 -0.000779452 -0.000779452 -1 562 296.168)"
- fill="hsl(var(--background-alternative-default))"
+ fill="var(--background-alternative-default)"
/>
{/* coordinates */}
@@ -443,9 +443,9 @@ const CustomersVisual = () => {
gradientUnits="userSpaceOnUse"
gradientTransform="translate(859.159 138.208) rotate(92.2122) scale(263.179 749.441)"
>
- {
gradientUnits="userSpaceOnUse"
gradientTransform="translate(859.159 136.974) rotate(-103.238) scale(44.3621 730.071)"
>
-
{
gradientUnits="userSpaceOnUse"
gradientTransform="translate(863.122 127.579) rotate(-92.6074) scale(137.882 462.616)"
>
-
{
gradientUnits="userSpaceOnUse"
gradientTransform="translate(861.752 133.22) rotate(-90) scale(115.815 675.283)"
>
-
{
gradientUnits="userSpaceOnUse"
gradientTransform="translate(862.511 138.502) rotate(105.433) scale(25.8224 489.043)"
>
-
{
gradientUnits="userSpaceOnUse"
gradientTransform="translate(862.32 54.7715) rotate(90) scale(193.44 193.44)"
>
-
{
gradientUnits="userSpaceOnUse"
>
{
>
{
y2="236.32"
gradientUnits="userSpaceOnUse"
>
-
{
gradientUnits="userSpaceOnUse"
gradientTransform="translate(864.407 138.314) rotate(90) scale(55.0818)"
>
- {
y2="163.315"
gradientUnits="userSpaceOnUse"
>
-
{
y2="163.788"
gradientUnits="userSpaceOnUse"
>
-
{
y2="105.061"
gradientUnits="userSpaceOnUse"
>
-
{
y2="105.061"
gradientUnits="userSpaceOnUse"
>
-
{
y2="105.061"
gradientUnits="userSpaceOnUse"
>
-
{
y2="105.061"
gradientUnits="userSpaceOnUse"
>
-
{
y2="105.061"
gradientUnits="userSpaceOnUse"
>
-
{
y2="105.061"
gradientUnits="userSpaceOnUse"
>
-
{
y2="105.061"
gradientUnits="userSpaceOnUse"
>
-
{
y2="105.061"
gradientUnits="userSpaceOnUse"
>
-
{
gradientUnits="userSpaceOnUse"
>
{
y2="105.061"
gradientUnits="userSpaceOnUse"
>
-
{
y2="105.061"
gradientUnits="userSpaceOnUse"
>
-
{
y2="105.061"
gradientUnits="userSpaceOnUse"
>
-
![]()
}
diff --git a/apps/www/components/Sections/TwitterSocialProof.tsx b/apps/www/components/Sections/TwitterSocialProof.tsx
index 615072fe1a0..b1acd0d9c1d 100644
--- a/apps/www/components/Sections/TwitterSocialProof.tsx
+++ b/apps/www/components/Sections/TwitterSocialProof.tsx
@@ -1,12 +1,11 @@
+import { useBreakpoint } from 'common'
import { range } from 'lib/helpers'
import Link from 'next/link'
import { useRouter } from 'next/router'
-import { cn } from 'ui'
-import { TweetCard } from 'ui-patterns/TweetCard'
-
-import { useBreakpoint } from 'common'
import React from 'react'
import { topTweets } from 'shared-data/tweets'
+import { cn } from 'ui'
+import { TweetCard } from 'ui-patterns/TweetCard'
interface Props {
className?: string
@@ -66,7 +65,7 @@ const TwitterSocialProof: React.FC = ({ className }) => {
absolute pointer-events-none
w-full h-full max-h-[400px] lg:max-h-none
inset-0 top-auto
- lg:bg-[radial-gradient(50%_100%_at_50%_0,transparent_0%,transparent_50%,hsl(var(--background-default))_100%)]
+ lg:bg-[radial-gradient(50%_100%_at_50%_0,transparent_0%,transparent_50%,var(--background-default)_100%)]
"
/>
diff --git a/apps/www/components/Sections/UseCasesSection.tsx b/apps/www/components/Sections/UseCasesSection.tsx
index afe433e30d9..1b1571e2250 100644
--- a/apps/www/components/Sections/UseCasesSection.tsx
+++ b/apps/www/components/Sections/UseCasesSection.tsx
@@ -1,12 +1,11 @@
-import { LazyMotion, domAnimation, m, useInView } from 'framer-motion'
+import SectionContainer from '~/components/Layouts/SectionContainer'
+import Panel from '~/components/Panel'
+import { getAnimation, INITIAL_BOTTOM } from '~/lib/animations'
+import { domAnimation, LazyMotion, m, useInView } from 'framer-motion'
+import { ArrowUpRight } from 'lucide-react'
import Link from 'next/link'
import { ReactNode, useRef } from 'react'
import { Button } from 'ui'
-import { INITIAL_BOTTOM, getAnimation } from '~/lib/animations'
-
-import SectionContainer from '~/components/Layouts/SectionContainer'
-import Panel from '~/components/Panel'
-import { ArrowUpRight } from 'lucide-react'
interface UseCase {
img?: string
@@ -75,7 +74,7 @@ const UseCase = ({
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
-
diff --git a/apps/www/components/SurveyResults/StateOfStartupsHeader.tsx b/apps/www/components/SurveyResults/StateOfStartupsHeader.tsx
index 305f99c9cb4..bd3d5a618a8 100644
--- a/apps/www/components/SurveyResults/StateOfStartupsHeader.tsx
+++ b/apps/www/components/SurveyResults/StateOfStartupsHeader.tsx
@@ -12,8 +12,8 @@ const DiagonalStripes = () => (
style={{
backgroundImage: `repeating-linear-gradient(
45deg,
- hsl(var(--border-muted)) 0px,
- hsl(var(--border-muted)) 1px,
+ var(--border-muted) 0px,
+ var(--border-muted) 1px,
transparent 1px,
transparent 8px
)`,
diff --git a/apps/www/components/SurveyResults/SurveyChapter.tsx b/apps/www/components/SurveyResults/SurveyChapter.tsx
index 73c1f98206a..d46fd6da415 100644
--- a/apps/www/components/SurveyResults/SurveyChapter.tsx
+++ b/apps/www/components/SurveyResults/SurveyChapter.tsx
@@ -1,5 +1,7 @@
import { SurveyPullQuote } from './SurveyPullQuote'
+
import './surveyResults.css'
+
import { DecorativeProgressBar } from './DecorativeProgressBar'
interface SurveyChapterProps {
diff --git a/apps/www/components/SurveyResults/SurveyChart.tsx b/apps/www/components/SurveyResults/SurveyChart.tsx
index b233757e481..8dc7e236468 100644
--- a/apps/www/components/SurveyResults/SurveyChart.tsx
+++ b/apps/www/components/SurveyResults/SurveyChart.tsx
@@ -314,7 +314,7 @@ export function SurveyChart({
ref={chartRef}
className="w-full bg-200 border-t border-muted"
style={{
- background: `radial-gradient(circle at center -150%, hsl(var(--brand-300)), transparent 80%), radial-gradient(ellipse at center 230%, hsl(var(--background-surface-200)), transparent 75%)`,
+ background: `radial-gradient(circle at center -150%, hsl(var(--brand-300)), transparent 80%), radial-gradient(ellipse at center 230%, var(--background-surface-200), transparent 75%)`,
}}
>
{useCase.title}
@@ -25,7 +24,7 @@ const UsersGrowthChart: FC = () => {
/>
{
y2="561.839"
gradientUnits="userSpaceOnUse"
>
-
-
+
)
}
diff --git a/apps/www/components/Wrapped/Visuals.tsx b/apps/www/components/Wrapped/Visuals.tsx
index 80a4be7b138..d256d03607f 100644
--- a/apps/www/components/Wrapped/Visuals.tsx
+++ b/apps/www/components/Wrapped/Visuals.tsx
@@ -6,8 +6,8 @@ export const Stripes = () => (
style={{
backgroundImage: `repeating-linear-gradient(
45deg,
- hsl(var(--border-muted)) 0px,
- hsl(var(--border-muted)) 1px,
+ var(--border-muted) 0px,
+ var(--border-muted) 1px,
transparent 1px,
transparent 8px
)`,
diff --git a/apps/www/components/logos.tsx b/apps/www/components/logos.tsx
index ecd5c34a1db..d19015ae33f 100644
--- a/apps/www/components/logos.tsx
+++ b/apps/www/components/logos.tsx
@@ -1,11 +1,11 @@
-import { cn } from 'ui'
import { range } from 'lib/helpers'
+import { cn } from 'ui'
interface Props {
showHeading?: boolean
className?: string
align?: 'left' | 'center'
- maskBackgroundColor?: 'hsl(var(--background-default)' | 'hsl(var(--background-alternative)'
+ maskBackgroundColor?: 'var(--background-default)' | 'var(--background-alternative)'
}
const Logos: React.FC
+
))}
-
+
diff --git a/apps/www/pages/solutions/innovation-teams.tsx b/apps/www/pages/solutions/innovation-teams.tsx
index 48d5d2269dc..0777a4904fa 100644
--- a/apps/www/pages/solutions/innovation-teams.tsx
+++ b/apps/www/pages/solutions/innovation-teams.tsx
@@ -113,7 +113,7 @@ const InnovationTeams: NextPage = () => {