high opacities
boundaryStroke: string
boundaryStrokeHover: string
@@ -16,20 +16,20 @@ export interface MapChartTheme {
export const MAP_CHART_THEME: { light: MapChartTheme; dark: MapChartTheme } = {
light: {
zeroFill: 'var(--background-surface-400)',
- brandFill: 'hsl(var(--brand-default))',
+ primaryFill: 'var(--primary-bright)',
opacityScale: [0.18, 0.32, 0.5, 0.68, 0.86],
- boundaryStroke: 'hsl(var(--brand-300) / 0.6)',
- boundaryStrokeHover: 'hsl(var(--brand-500))',
- markerFill: 'hsl(var(--brand-default))',
+ boundaryStroke: 'oklch(from var(--primary-bright) l c h / 60%)',
+ boundaryStrokeHover: 'var(--primary-bright-hover)',
+ markerFill: 'var(--primary-bright)',
oceanFill: 'transparent',
},
dark: {
zeroFill: 'var(--background-selection)',
- brandFill: 'hsl(var(--brand-default))',
+ primaryFill: 'var(--primary-bright)',
opacityScale: [0.18, 0.32, 0.5, 0.68, 0.86],
- boundaryStroke: 'hsl(var(--brand-300) / 0.6)',
- boundaryStrokeHover: 'hsl(var(--brand-500))',
- markerFill: 'hsl(var(--brand-default))',
+ boundaryStroke: 'oklch(from var(--primary-bright) l c h / 60%)',
+ boundaryStrokeHover: 'var(--primary-bright-hover)',
+ markerFill: 'var(--primary-bright)',
oceanFill: 'transparent',
},
}
@@ -52,7 +52,7 @@ export const getFillColor = (
theme: MapChartTheme = MAP_CHART_THEME.dark
): string => {
if (max <= 0 || !value) return theme.zeroFill
- return theme.brandFill
+ return theme.primaryFill
}
export const getFillOpacity = (
diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityActions.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityActions.tsx
index a580b03b282..1f632ef9ad4 100644
--- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityActions.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityActions.tsx
@@ -140,7 +140,7 @@ export const UtilityActions = ({
strokeWidth={2}
className={
isFavorite
- ? 'fill-brand-default stroke-none'
+ ? 'fill-primary-bright stroke-none'
: 'fill-none stroke-foreground-light'
}
/>
@@ -200,7 +200,7 @@ export const UtilityActions = ({
size="tiny"
onClick={() => saveFavorite(id, false)}
className="px-1"
- icon={
}
+ icon={
}
aria-label="Remove from favorites"
/>
) : (
diff --git a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx
index 1defb988137..ae3282f90bc 100644
--- a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx
+++ b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx
@@ -46,7 +46,7 @@ export const CustomDomainDelete = ({ projectRef, customDomain }: CustomDomainDel
Active custom domain:
-
+
{customDomain.hostname}
diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceNode.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceNode.tsx
index 2fc7960e9ac..5a20b9637dd 100644
--- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceNode.tsx
+++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceNode.tsx
@@ -311,7 +311,7 @@ export const ReplicaNode = ({ data }: NodeProps>) => {
type="horizontal"
value={stagePercent * 100}
max={100}
- barClass="bg-brand-default"
+ barClass="bg-primary-bright"
/>
diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/MapView.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/MapView.tsx
index 503c973d494..3081274ab3c 100644
--- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/MapView.tsx
+++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/MapView.tsx
@@ -178,7 +178,7 @@ const MapView = () => {
)}
@@ -188,7 +188,7 @@ const MapView = () => {
hasNoDatabases
? 'fill-background-surface-300 stroke-border-stronger'
: hasPrimary
- ? 'fill-brand-default stroke-brand-500'
+ ? 'fill-primary-bright stroke-brand-500'
: 'fill-brand-500 stroke-brand-400'
}`}
/>
diff --git a/apps/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx b/apps/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx
index 4c65a2629f0..d172a3787d4 100644
--- a/apps/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx
@@ -196,7 +196,7 @@ export const PreviewFilterPanel = ({
{newCount > 0 && (
-
+
{newCount > 1000 ? `${Math.floor(newCount / 100) / 10}K` : newCount}
diff --git a/apps/studio/components/interfaces/TableGridEditor/InsertButton.tsx b/apps/studio/components/interfaces/TableGridEditor/InsertButton.tsx
index 6a0c3565d71..73b27d1d818 100644
--- a/apps/studio/components/interfaces/TableGridEditor/InsertButton.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/InsertButton.tsx
@@ -76,7 +76,7 @@ export const InsertButton = () => {
@@ -97,7 +97,7 @@ export const InsertButton = () => {
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.utils.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.utils.tsx
index b93c3856de4..c8dbb0c617e 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.utils.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.utils.tsx
@@ -592,7 +592,7 @@ export const createTable = async ({
value={progress}
max={100}
type="horizontal"
- barClass="bg-brand-default"
+ barClass="bg-primary-bright"
labelBottom={`Adding ${importContent.rowCount.toLocaleString()} rows to ${table.name}`}
labelBottomClass=""
labelTop={`${progress.toFixed(2)}%`}
@@ -629,7 +629,7 @@ export const createTable = async ({
value={progress}
max={100}
type="horizontal"
- barClass="bg-brand-default"
+ barClass="bg-primary-bright"
labelBottom={`Adding ${importContent.rows.length.toLocaleString()} rows to ${table.name}`}
labelTop={`${progress.toFixed(2)}%`}
labelTopClass="tabular-nums"
diff --git a/apps/studio/components/layouts/AppLayout/AdvisorButton.test.tsx b/apps/studio/components/layouts/AppLayout/AdvisorButton.test.tsx
index 72438ce15b1..78241055072 100644
--- a/apps/studio/components/layouts/AppLayout/AdvisorButton.test.tsx
+++ b/apps/studio/components/layouts/AppLayout/AdvisorButton.test.tsx
@@ -84,7 +84,7 @@ describe('AdvisorButton', () => {
expect(container.querySelector('.bg-warning')).toBeInTheDocument()
expect(container.querySelector('.bg-destructive')).not.toBeInTheDocument()
- expect(container.querySelector('.bg-brand-default')).not.toBeInTheDocument()
+ expect(container.querySelector('.bg-primary-bright')).not.toBeInTheDocument()
})
it('keeps the destructive dot when a critical issue is present', () => {
@@ -151,7 +151,7 @@ describe('AdvisorButton', () => {
const { container } = render(
)
- expect(container.querySelector('.bg-brand-default')).toBeInTheDocument()
+ expect(container.querySelector('.bg-primary-bright')).toBeInTheDocument()
expect(container.querySelector('.bg-warning')).not.toBeInTheDocument()
expect(container.querySelector('.bg-destructive')).not.toBeInTheDocument()
expect(screen.getByRole('button')).toBeInTheDocument()
diff --git a/apps/studio/components/layouts/AppLayout/AdvisorButton.tsx b/apps/studio/components/layouts/AppLayout/AdvisorButton.tsx
index 286152ec0b3..f64f9511e3e 100644
--- a/apps/studio/components/layouts/AppLayout/AdvisorButton.tsx
+++ b/apps/studio/components/layouts/AppLayout/AdvisorButton.tsx
@@ -86,7 +86,7 @@ export const AdvisorButton = ({ projectRef }: { projectRef?: string }) => {
) : hasWarningIssues ? (
) : hasUnreadNotifications ? (
-
+
) : null}
)
diff --git a/apps/studio/components/layouts/Navigation/LayoutHeader/MergeRequestButton.tsx b/apps/studio/components/layouts/Navigation/LayoutHeader/MergeRequestButton.tsx
index ce40f77066a..0bc91dedd7d 100644
--- a/apps/studio/components/layouts/Navigation/LayoutHeader/MergeRequestButton.tsx
+++ b/apps/studio/components/layouts/Navigation/LayoutHeader/MergeRequestButton.tsx
@@ -73,7 +73,7 @@ export const MergeRequestButton = () => {
icon={
diff --git a/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx b/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx
index 7bfd8a5af8f..4363321c07a 100644
--- a/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx
@@ -96,7 +96,7 @@ const BuildingState = () => {
Browse the Supabase{' '}
diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx
index a17c94089a4..dfb2560c9c6 100644
--- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx
+++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx
@@ -429,7 +429,7 @@ export const SQLEditorTreeViewItem = ({
size={14}
className={cn(
isFavorite
- ? 'fill-brand-default stroke-none'
+ ? 'fill-primary-bright stroke-none'
: 'fill-none stroke-foreground-light'
)}
/>
diff --git a/apps/studio/components/ui/AIAssistantPanel/AIOnboarding.tsx b/apps/studio/components/ui/AIAssistantPanel/AIOnboarding.tsx
index 74771eb8ecb..e8896945bfe 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AIOnboarding.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AIOnboarding.tsx
@@ -60,7 +60,7 @@ export const AIOnboarding = ({
key={template.title}
type="button"
tabIndex={0}
- className="rounded-md text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand"
+ className="rounded-md text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
onClick={() => {
onValueChange(template.initialMessage)
onFocusInput?.()
diff --git a/apps/studio/components/ui/Charts/Charts.constants.ts b/apps/studio/components/ui/Charts/Charts.constants.ts
index 8abe3c3b32c..2d9c76cd7ff 100644
--- a/apps/studio/components/ui/Charts/Charts.constants.ts
+++ b/apps/studio/components/ui/Charts/Charts.constants.ts
@@ -5,8 +5,8 @@
export const CHART_COLORS = {
TICK: 'var(--background-overlay-hover)',
AXIS: 'var(--background-overlay-hover)',
- GREEN_1: 'hsl(var(--brand-default))',
- GREEN_2: 'hsl(var(--brand-500))',
+ GREEN_1: 'var(--primary-bright)',
+ GREEN_2: 'var(--primary-solid)',
RED_1: 'hsl(var(--destructive-default))',
RED_2: 'hsl(var(--destructive-500))',
REFERENCE_LINE: 'var(--foreground-muted)',
diff --git a/apps/studio/components/ui/DataTable/primitives/Slider.tsx b/apps/studio/components/ui/DataTable/primitives/Slider.tsx
index c3b0cec7aae..b117c50bdb5 100644
--- a/apps/studio/components/ui/DataTable/primitives/Slider.tsx
+++ b/apps/studio/components/ui/DataTable/primitives/Slider.tsx
@@ -17,12 +17,12 @@ export const Slider = forwardRef<
className={cn('relative flex w-full touch-none select-none items-center', className)}
{...props}
>
-