diff --git a/.coderabbit.yaml b/.coderabbit.yaml index 0db24a2a559..3d201281eb4 100644 --- a/.coderabbit.yaml +++ b/.coderabbit.yaml @@ -125,6 +125,10 @@ reviews: "read more", or "learn more" when it does not describe the destination. Skip if aria-label or wrapping context already names where the link goes. + - Color contrast: flag non-large informative text below 4.5:1 and large informative + text (at least 24px regular or 18.5px bold) below 3:1. Skip logotypes and + decorative text. Treat expressive text at 40px or larger as advisory rather + than blocking. # Applies our internal engineering skills (.agents/skills/) as CodeRabbit review # guidelines. The skills are the single source of truth — they are consumed diff --git a/apps/design-system/content/docs/color-usage.mdx b/apps/design-system/content/docs/color-usage.mdx index b62441323eb..570604fe517 100644 --- a/apps/design-system/content/docs/color-usage.mdx +++ b/apps/design-system/content/docs/color-usage.mdx @@ -9,10 +9,18 @@ The shorthand utility classes below simplify our full color palette by providing Use accent text colors (e.g. text-destructive, text-warning) sparingly to avoid visual overload. +Use `text-brand` for readable branded text such as links, labels, and statuses. On light-theme +surfaces it meets the 4.5:1 WCAG AA requirement for normal text. Use `bg-brand-default` / +`border-brand-default` when you need the canonical bright Supabase green as a fill or border. + ## Background +Use `bg-brand-default` when the canonical Supabase green is required as a fill. The same +`brand-default` suffix applies to borders and other non-text utilities, such as +`border-brand-default`. + ### App backgrounds diff --git a/apps/design-system/content/docs/typography.mdx b/apps/design-system/content/docs/typography.mdx index d6c36ca61c3..e6030e0ac15 100644 --- a/apps/design-system/content/docs/typography.mdx +++ b/apps/design-system/content/docs/typography.mdx @@ -9,7 +9,9 @@ The shorthands below are composed of core [Tailwind utility classes](../docs/tai ## Shorthands -| Value | Usage | -| ------------------ | ---------------------------------------------------------------------------- | -| `text-code-inline` | Apply to a `code` element for inline code or similar custom inline content | -| `text-brand-link` | Supabase green text that meets contrast requirements in light and dark modes | +| Value | Usage | +| ------------------ | -------------------------------------------------------------------------- | +| `text-code-inline` | Apply to a `code` element for inline code or similar custom inline content | +| `text-brand` | Accessible Supabase green for readable branded text | + +`text-brand` is independent from `bg-brand-default`, `border-brand-default`, and other non-text brand utilities. Its light-mode value has at least 4.5:1 contrast against the light surfaces used by the apps, meeting WCAG AA for normal text. diff --git a/apps/design-system/registry/default/example/success-check-selected.tsx b/apps/design-system/registry/default/example/success-check-selected.tsx index d557db6ec6c..3a8894a1819 100644 --- a/apps/design-system/registry/default/example/success-check-selected.tsx +++ b/apps/design-system/registry/default/example/success-check-selected.tsx @@ -23,7 +23,7 @@ export default function SuccessCheckSelected() { className={cn( 'relative flex w-full items-center rounded-md border px-4 py-3 text-left text-sm transition-colors', isSelected - ? 'border-brand bg-brand-200/20 pr-10 dark:bg-brand-300' + ? 'border-brand-default bg-brand-200/20 pr-10 dark:bg-brand-300' : 'hover:border-default hover:bg-surface-200' )} > diff --git a/apps/docs/CONTRIBUTING.md b/apps/docs/CONTRIBUTING.md index 59ccd0f293f..810417bef08 100644 --- a/apps/docs/CONTRIBUTING.md +++ b/apps/docs/CONTRIBUTING.md @@ -108,7 +108,7 @@ Use the [Write the docs](../../.agents/skills/pm-the-docs/reference/write-the-do ### Edit existing pages -Use [`edit-the-docs`](../../.agents/skills/edit-the-docs/SKILL.md) for style, structure, or brevity on an existing page when you are not changing the product story. +Use [`edit-the-docs`](../../.agents/skills/edit-the-docs/SKILL.md) for style, structure, or brevity on an existing page when you are not changing the product story. ## Document types diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx index 27e6a28281c..07bd3911e3e 100644 --- a/apps/docs/app/page.tsx +++ b/apps/docs/app/page.tsx @@ -330,7 +330,7 @@ const HomePage = () => ( @@ -388,7 +388,7 @@ const HomePage = () => ( diff --git a/apps/docs/components/Feedback/Feedback.tsx b/apps/docs/components/Feedback/Feedback.tsx index 0b9c7c7eaa4..dfefab8a92e 100644 --- a/apps/docs/components/Feedback/Feedback.tsx +++ b/apps/docs/components/Feedback/Feedback.tsx @@ -179,7 +179,7 @@ function Feedback({ className }: { className?: string }) { '[transition-timing-function:cubic-bezier(.76,0,.23,1)]', !isYes && 'hover:text-brand-600 hover:border-brand-500', isYes && - 'bg-brand text-brand-200 border-brand! disabled:opacity-100 -translate-x-[calc(100%+var(--container-inline-flex-gap,0.5rem))]', + 'bg-brand-default text-brand-200 border-brand-default! disabled:opacity-100 -translate-x-[calc(100%+var(--container-inline-flex-gap,0.5rem))]', !showYes && 'opacity-0 invisible' )} onClick={() => handleVote('yes')} diff --git a/apps/docs/components/Feedback/FeedbackModal.tsx b/apps/docs/components/Feedback/FeedbackModal.tsx index c5b63904ecd..0052a08d9e7 100644 --- a/apps/docs/components/Feedback/FeedbackModal.tsx +++ b/apps/docs/components/Feedback/FeedbackModal.tsx @@ -94,7 +94,7 @@ function FeedbackModal({ visible, page, onCancel, onSubmit }: FeedbackModalProps href="https://supabase.com/dashboard/support/new" target="_blank" rel="noopener noreferrer" - className="text-brand-link hover:underline" + className="text-brand hover:underline" > support request diff --git a/apps/docs/components/Navigation/Footer.tsx b/apps/docs/components/Navigation/Footer.tsx index 6c0bc8ebd9d..41d7242a739 100644 --- a/apps/docs/components/Navigation/Footer.tsx +++ b/apps/docs/components/Navigation/Footer.tsx @@ -14,7 +14,7 @@ const Footer = ({ className }: { className?: string }) => (

{text}

diff --git a/apps/docs/components/Navigation/NavigationMenu/GlobalMobileMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/GlobalMobileMenu.tsx index 06acb65ce57..41c145cbc3c 100644 --- a/apps/docs/components/Navigation/NavigationMenu/GlobalMobileMenu.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/GlobalMobileMenu.tsx @@ -137,7 +137,7 @@ const GlobalMobileMenu = ({ open, setOpen }: Props) => { height={24} alt="Supabase Logo" /> - DOCS + DOCS
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx index c84ee4c287b..8570dcd0fd2 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx @@ -22,7 +22,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {
  • {icon && } {title} @@ -99,7 +99,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => { href={`${menu.parent ?? '/'}`} className={[ 'flex items-center gap-1 text-xs group mb-3', - 'text-base transition-all duration-200 text-brand-link hover:text-brand-600 hover:cursor-pointer ', + 'text-base transition-all duration-200 text-brand hover:text-brand-600 hover:cursor-pointer ', ].join(' ')} >
    diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx index c859d3a31ee..69afb363f8e 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx @@ -43,7 +43,7 @@ const HeaderLink = React.memo(function HeaderLink(props: { className={[ ' ', !props.title && 'capitalize', - props.url === pathname ? 'text-brand-link' : 'hover:text-brand-link text-foreground', + props.url === pathname ? 'text-brand' : 'hover:text-brand text-foreground', ].join(' ')} > {props.title ?? props.id} @@ -111,7 +111,7 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any 'cursor-pointer transition text-sm', 'focus-inset rounded-md', activeItem - ? 'text-brand-link font-medium' + ? 'text-brand font-medium' : 'hover:text-foreground text-foreground-lighter', ].join(' ')} > @@ -146,8 +146,8 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any 'relative block py-1.25 pl-1 -ml-1 cursor-pointer transition text-sm', 'focus-inset rounded-md', child.url === pathname - ? 'text-brand-link' - : 'hover:text-brand-link text-foreground-lighter', + ? 'text-brand' + : 'hover:text-brand text-foreground-lighter', ].join(' ')} > {child.url === pathname && ( @@ -173,9 +173,7 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any 'flex items-center gap-2', 'cursor-pointer transition text-sm', 'focus-inset rounded-md', - activeItem - ? 'text-brand-link font-medium' - : 'hover:text-foreground text-foreground-lighter', + activeItem ? 'text-brand font-medium' : 'hover:text-foreground text-foreground-lighter', ].join(' ')} parent={props.subItem.parent} > @@ -206,9 +204,7 @@ const ContentLink = React.memo(function ContentLink(props: any) { className={[ 'cursor-pointer transition text-sm', 'focus-inset rounded-md', - props.url === pathname - ? 'text-brand-link' - : 'hover:text-foreground text-foreground-lighter', + props.url === pathname ? 'text-brand' : 'hover:text-foreground text-foreground-lighter', ].join(' ')} > {props.icon && ( @@ -230,7 +226,7 @@ const Content = (props) => { return (
    -
    +
    diff --git a/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx b/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx index db6ca275c1b..5e8971084f0 100644 --- a/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx @@ -132,7 +132,7 @@ const HeaderLogo = memo(() => { height={navigationLogo?.height ?? 18} alt="Supabase wordmark" /> - DOCS + DOCS ) }) diff --git a/apps/docs/components/Navigation/SideBar.tsx b/apps/docs/components/Navigation/SideBar.tsx index a88cd1bb5a9..c9a98c91cf3 100644 --- a/apps/docs/components/Navigation/SideBar.tsx +++ b/apps/docs/components/Navigation/SideBar.tsx @@ -80,7 +80,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => { 'py-1.5 px-5 rounded-sm text-sm transition', `${ item.url === pathname - ? 'bg-background text-brand-link' + ? 'bg-background text-brand' : 'text-foreground-light hover:text-foreground' }`, ].join(' ')} @@ -105,7 +105,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => { size={14} strokeWidth={2} /> - + {group.label} @@ -119,7 +119,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => { 'py-1.5 px-5 rounded-sm text-sm transition', `${ section.url === pathname - ? 'bg-background text-brand-link' + ? 'bg-background text-brand' : 'text-foreground-light hover:text-foreground' }`, ].join(' ')} @@ -144,7 +144,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => { size={14} strokeWidth={2} /> - + {section.name} @@ -157,7 +157,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => { 'py-1.5 ml-4 px-5 rounded-sm text-sm transition', `${ item.url === pathname - ? 'bg-background text-brand-link' + ? 'bg-background text-brand' : 'text-foreground-light hover:text-foreground' }`, ].join(' ')} diff --git a/apps/docs/features/docs/Reference.header.tsx b/apps/docs/features/docs/Reference.header.tsx index 82946f133de..518d112377f 100644 --- a/apps/docs/features/docs/Reference.header.tsx +++ b/apps/docs/features/docs/Reference.header.tsx @@ -40,7 +40,7 @@ function ClientLibHeader({ menuData, className }: ClientLibHeaderProps) { href={menuData.pkg.repo} target="_blank" rel="noreferrer noopener" - className="hover:text-brand-link focus-visible:text-brand-link transition-colors" + className="hover:text-brand focus-visible:text-brand transition-colors" > View on GitHub diff --git a/apps/docs/features/ui/AgentPluginsPanel.tsx b/apps/docs/features/ui/AgentPluginsPanel.tsx index bf509160047..b837378ae39 100644 --- a/apps/docs/features/ui/AgentPluginsPanel.tsx +++ b/apps/docs/features/ui/AgentPluginsPanel.tsx @@ -18,7 +18,7 @@ function PluginInstructions({ client }: { client: PluginClient }) { href="https://claude.com/plugins/supabase" target="_blank" rel="noopener noreferrer" - className="text-brand-link hover:underline" + className="text-brand hover:underline" > official Anthropic marketplace @@ -53,7 +53,7 @@ function PluginInstructions({ client }: { client: PluginClient }) { href="https://developers.openai.com/codex/plugins#plugin-directory-in-the-codex-app" target="_blank" rel="noopener noreferrer" - className="text-brand-link hover:underline" + className="text-brand hover:underline" > Codex desktop app plugin directory @@ -83,7 +83,7 @@ function PluginInstructions({ client }: { client: PluginClient }) { href="https://cursor.com/marketplace/supabase" target="_blank" rel="noopener noreferrer" - className="text-brand-link hover:underline" + className="text-brand hover:underline" > Supabase {' '} @@ -118,7 +118,7 @@ function PluginInstructions({ client }: { client: PluginClient }) { href="https://geminicli.com/extensions/?name=supabase-communitysupabase-plugin" target="_blank" rel="noopener noreferrer" - className="text-brand-link hover:underline" + className="text-brand hover:underline" > Gemini CLI extensions directory @@ -222,7 +222,7 @@ function PluginInstructions({ client }: { client: PluginClient }) { href="https://github.com/vercel-labs/open-plugin-spec" target="_blank" rel="noopener noreferrer" - className="text-brand-link hover:underline" + className="text-brand hover:underline" > Open Plugin {' '} @@ -243,7 +243,7 @@ function PluginInstructions({ client }: { client: PluginClient }) { href="https://github.com/supabase-community/supabase-plugin" target="_blank" rel="noopener noreferrer" - className="text-brand-link hover:underline" + className="text-brand hover:underline" > GitHub repository @@ -290,7 +290,7 @@ export function AgentPluginsPanel() { href={selectedClient.docsUrl} target="_blank" rel="noopener noreferrer" - className="text-brand-link hover:underline inline-flex items-center" + className="text-brand hover:underline inline-flex items-center" > {selectedClient.docsLinkText ?? `View ${selectedClient.label} extensions docs`} @@ -302,7 +302,7 @@ export function AgentPluginsPanel() { href={selectedClient.repoUrl} target="_blank" rel="noopener noreferrer" - className="text-brand-link hover:underline inline-flex items-center" + className="text-brand hover:underline inline-flex items-center" > Give feedback diff --git a/apps/kb/src/components/Logo.tsx b/apps/kb/src/components/Logo.tsx index 4e9a308302b..c0b9ab188ac 100644 --- a/apps/kb/src/components/Logo.tsx +++ b/apps/kb/src/components/Logo.tsx @@ -23,7 +23,7 @@ function Logo() { height={18} alt="Supabase logo" /> - KB + KB ) } diff --git a/apps/studio/components/grid/components/grid/Grid.tsx b/apps/studio/components/grid/components/grid/Grid.tsx index a5118a712b7..cd65a0a148f 100644 --- a/apps/studio/components/grid/components/grid/Grid.tsx +++ b/apps/studio/components/grid/components/grid/Grid.tsx @@ -309,7 +309,9 @@ export const Grid = memo(

    This table is empty

    diff --git a/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx b/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx index d4dfb13d85b..1cbf7f7de63 100644 --- a/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx +++ b/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx @@ -190,7 +190,7 @@ export const ProviderForm = ({ config, provider, isActive }: ProviderFormProps) meta={ isActive ? (
    - + Enabled diff --git a/apps/studio/components/interfaces/Auth/Hooks/HookCard.tsx b/apps/studio/components/interfaces/Auth/Hooks/HookCard.tsx index 0eea9bc7835..6a48a261665 100644 --- a/apps/studio/components/interfaces/Auth/Hooks/HookCard.tsx +++ b/apps/studio/components/interfaces/Auth/Hooks/HookCard.tsx @@ -117,7 +117,7 @@ export const HookCard = ({ hook, onSelectEdit, onSelectDelete }: HookCardProps)
    {hook.enabled ? ( -
    +
    Enabled diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/IntegrationCard.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/IntegrationCard.tsx index 8434ae41fc8..4028af7a906 100644 --- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/IntegrationCard.tsx +++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/IntegrationCard.tsx @@ -209,7 +209,7 @@ export const IntegrationCard = ({
    {true ? ( -
    +
    Enabled diff --git a/apps/studio/components/interfaces/Auth/Users/UserOverview.tsx b/apps/studio/components/interfaces/Auth/Users/UserOverview.tsx index 59a1ebf0f8e..66cf9eb198c 100644 --- a/apps/studio/components/interfaces/Auth/Users/UserOverview.tsx +++ b/apps/studio/components/interfaces/Auth/Users/UserOverview.tsx @@ -274,7 +274,7 @@ export const UserOverview = ({ user, onDeleteSuccess }: UserOverviewProps) => {
    {isActive ? (
    - + Enabled diff --git a/apps/studio/components/interfaces/Compute/Compute.constants.ts b/apps/studio/components/interfaces/Compute/Compute.constants.ts index e0424f7eb84..d62a3f7d45f 100644 --- a/apps/studio/components/interfaces/Compute/Compute.constants.ts +++ b/apps/studio/components/interfaces/Compute/Compute.constants.ts @@ -128,7 +128,11 @@ const BUILD_STATE_META: Record {selected && ( diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/Fields.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/Fields.tsx index ccbfa0c9691..a1d76098de4 100644 --- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/Fields.tsx +++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/Fields.tsx @@ -183,7 +183,7 @@ export const BigQueryFields = ({ {isDraggingFile ? ( diff --git a/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/Nodes.tsx b/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/Nodes.tsx index eaa6dc6a442..49658d96824 100644 --- a/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/Nodes.tsx +++ b/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/Nodes.tsx @@ -85,7 +85,7 @@ export const ReplicationNode = ({ id }: { id: string }) => {
    diff --git a/apps/studio/components/interfaces/Database/Replication/RowMenu.tsx b/apps/studio/components/interfaces/Database/Replication/RowMenu.tsx index e899c12da4d..7f5de5d01f7 100644 --- a/apps/studio/components/interfaces/Database/Replication/RowMenu.tsx +++ b/apps/studio/components/interfaces/Database/Replication/RowMenu.tsx @@ -166,7 +166,7 @@ export const RowMenu = ({ /> {hasUpdate && ( )} diff --git a/apps/studio/components/interfaces/Database/Roles/RoleRow.tsx b/apps/studio/components/interfaces/Database/Roles/RoleRow.tsx index 9271591d769..cb3984b0101 100644 --- a/apps/studio/components/interfaces/Database/Roles/RoleRow.tsx +++ b/apps/studio/components/interfaces/Database/Roles/RoleRow.tsx @@ -140,8 +140,8 @@ export const RoleRow = ({ role, disabled = false, onSelectDelete }: RoleRowProps {role.activeConnections > 0 && (
    - - + +
    )} diff --git a/apps/studio/components/interfaces/Database/Schemas/DefaultEdge.tsx b/apps/studio/components/interfaces/Database/Schemas/DefaultEdge.tsx index 28378ebba23..2925695d662 100644 --- a/apps/studio/components/interfaces/Database/Schemas/DefaultEdge.tsx +++ b/apps/studio/components/interfaces/Database/Schemas/DefaultEdge.tsx @@ -52,7 +52,9 @@ const DefaultEdgeComponent = ({ @@ -141,7 +143,7 @@ const EdgeRelationInfo = ({ {data.name} @@ -89,7 +89,7 @@ const TableNodeComponent = ({
    diff --git a/apps/studio/components/interfaces/Database/Tables/ConstraintToken.tsx b/apps/studio/components/interfaces/Database/Tables/ConstraintToken.tsx index 22bf69d3cf0..5c35c13e46b 100644 --- a/apps/studio/components/interfaces/Database/Tables/ConstraintToken.tsx +++ b/apps/studio/components/interfaces/Database/Tables/ConstraintToken.tsx @@ -16,7 +16,7 @@ const constraintTokenClassName = cn( export const ConstraintToken = ({ icon, label, variant = 'default' }: ConstraintTokenProps) => { const tokenToneClassName = variant === 'primary' - ? 'bg-brand/10 text-brand-600 border-brand-500' + ? 'bg-brand-default/10 text-brand-600 border-brand-500' : variant === 'default' ? 'bg-surface-75 text-foreground-light border-strong' : 'bg-surface-75/50 text-foreground-light border-strong' diff --git a/apps/studio/components/interfaces/Database/Tables/TableList.tsx b/apps/studio/components/interfaces/Database/Tables/TableList.tsx index 0f59a3c4e31..5961fd563ee 100644 --- a/apps/studio/components/interfaces/Database/Tables/TableList.tsx +++ b/apps/studio/components/interfaces/Database/Tables/TableList.tsx @@ -498,7 +498,7 @@ export const TableList = ({ (table) => table.id === x.id ) ? (
    - +

    Enabled

    ) : ( diff --git a/apps/studio/components/interfaces/DiskManagement/DiskManagementReviewAndSubmitDialog/DiskManagementReviewAndSubmitDialog.tsx b/apps/studio/components/interfaces/DiskManagement/DiskManagementReviewAndSubmitDialog/DiskManagementReviewAndSubmitDialog.tsx index 9504d551dae..1034f3e7100 100644 --- a/apps/studio/components/interfaces/DiskManagement/DiskManagementReviewAndSubmitDialog/DiskManagementReviewAndSubmitDialog.tsx +++ b/apps/studio/components/interfaces/DiskManagement/DiskManagementReviewAndSubmitDialog/DiskManagementReviewAndSubmitDialog.tsx @@ -139,8 +139,8 @@ export const DiskManagementReviewAndSubmitDialog = ({
    - - + +
    diff --git a/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx b/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx index 8f9bc873187..64abade0edb 100644 --- a/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx +++ b/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx @@ -101,7 +101,7 @@ export const DiskSpaceBar = ({ form }: DiskSpaceBarProps) => {
    diff --git a/apps/studio/components/interfaces/ExplainVisualizer/ExplainVisualizer.Header.tsx b/apps/studio/components/interfaces/ExplainVisualizer/ExplainVisualizer.Header.tsx index f757842e264..7c74cc10aaf 100644 --- a/apps/studio/components/interfaces/ExplainVisualizer/ExplainVisualizer.Header.tsx +++ b/apps/studio/components/interfaces/ExplainVisualizer/ExplainVisualizer.Header.tsx @@ -98,7 +98,7 @@ export function ExplainHeader({ mode, onToggleMode, summary, id, rows }: Explain Seq Scan (slow)
    - + Index Scan (fast)
    diff --git a/apps/studio/components/interfaces/ExplainVisualizer/ExplainVisualizer.utils.ts b/apps/studio/components/interfaces/ExplainVisualizer/ExplainVisualizer.utils.ts index 6d7a505a652..2489e735a51 100644 --- a/apps/studio/components/interfaces/ExplainVisualizer/ExplainVisualizer.utils.ts +++ b/apps/studio/components/interfaces/ExplainVisualizer/ExplainVisualizer.utils.ts @@ -154,7 +154,7 @@ export function getScanBarColor(operation: string): string { op.includes('index only scan') || op.includes('bitmap index scan') ) { - return 'bg-brand/20' + return 'bg-brand-default/20' } // Sequential scans are yellow diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionRecentInvocations.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionRecentInvocations.tsx index 6c36f230420..fa1d4e56862 100644 --- a/apps/studio/components/interfaces/Functions/EdgeFunctionRecentInvocations.tsx +++ b/apps/studio/components/interfaces/Functions/EdgeFunctionRecentInvocations.tsx @@ -90,7 +90,7 @@ export const EdgeFunctionRecentInvocations = ({
    - + {group.badge} ) diff --git a/apps/studio/components/interfaces/Integrations/Landing/IntegrationCard.tsx b/apps/studio/components/interfaces/Integrations/Landing/IntegrationCard.tsx index 26f807d0765..a4aa966eee7 100644 --- a/apps/studio/components/interfaces/Integrations/Landing/IntegrationCard.tsx +++ b/apps/studio/components/interfaces/Integrations/Landing/IntegrationCard.tsx @@ -92,8 +92,8 @@ export const IntegrationCard = ({
    {isInstalled && (
    - - Installed + + Installed
    )}
    diff --git a/apps/studio/components/interfaces/Observability/DatabaseConnections/ActivityRow.tsx b/apps/studio/components/interfaces/Observability/DatabaseConnections/ActivityRow.tsx index 829290f74a2..14c0a8eb1ea 100644 --- a/apps/studio/components/interfaces/Observability/DatabaseConnections/ActivityRow.tsx +++ b/apps/studio/components/interfaces/Observability/DatabaseConnections/ActivityRow.tsx @@ -210,7 +210,7 @@ export const ActivityRow = ({ > {selectedPid === activity.pid && ( -
    +
    )} {/* Absolute (not inline in the flex row) so top-0/bottom-0 ignore the cell's padding and touch the adjacent row */} diff --git a/apps/studio/components/interfaces/Observability/ServiceHealthTable.tsx b/apps/studio/components/interfaces/Observability/ServiceHealthTable.tsx index 3b6063e7376..564a99d49c7 100644 --- a/apps/studio/components/interfaces/Observability/ServiceHealthTable.tsx +++ b/apps/studio/components/interfaces/Observability/ServiceHealthTable.tsx @@ -47,7 +47,7 @@ const colorClassMap: Record = { muted: 'bg-gray-500', destructive: 'bg-destructive', warning: 'bg-warning', - brand: 'bg-brand', + brand: 'bg-brand-default', } const LEVEL_CHART_CONFIG: ChartConfig = { diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCard.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCard.tsx index 09efd36d419..08e2674fb37 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCard.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCard.tsx @@ -169,12 +169,12 @@ function ControlCard({ 'px-4 py-4 flex flex-col items-start justify-between', 'border rounded-md col-span-12 md:col-span-4 bg-surface-200', shouldHighlight && - 'ring-4 ring-brand animate-[pulse_1.5s_ease-in-out_1] motion-reduce:animate-none shadow-md shadow-brand/40' + 'ring-4 ring-brand-default animate-[pulse_1.5s_ease-in-out_1] motion-reduce:animate-none shadow-md shadow-brand-default/40' )} >
    -

    {plan.name}

    +

    {plan.name}

    {isCurrentPlan ? (
    Current plan @@ -264,7 +264,7 @@ function ParityCard({ 'flex flex-col items-start justify-between', 'border rounded-md col-span-12 md:col-span-4 bg-surface-200', shouldHighlight && - 'ring-4 ring-brand animate-[pulse_1.5s_ease-in-out_1] motion-reduce:animate-none shadow-md shadow-brand/40' + 'ring-4 ring-brand-default animate-[pulse_1.5s_ease-in-out_1] motion-reduce:animate-none shadow-md shadow-brand-default/40' )} >
    diff --git a/apps/studio/components/interfaces/ProjectHome/CustomReportSection.tsx b/apps/studio/components/interfaces/ProjectHome/CustomReportSection.tsx index 97c81ceebf2..72572ebed2c 100644 --- a/apps/studio/components/interfaces/ProjectHome/CustomReportSection.tsx +++ b/apps/studio/components/interfaces/ProjectHome/CustomReportSection.tsx @@ -396,7 +396,7 @@ export function CustomReportSection() {
    {isDraggingOver && ( -
    +
    )} {layout.length === 0 ? (
    { (isProjectNew && service.status !== 'ACTIVE_HEALTHY') ? 'bg-foreground-lighter animate-pulse' : service.status === 'ACTIVE_HEALTHY' - ? 'bg-brand' + ? 'bg-brand-default' : 'bg-selection' )} /> diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityActions.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityActions.tsx index 75162f30a1f..8a65752c317 100644 --- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityActions.tsx +++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityActions.tsx @@ -139,7 +139,9 @@ export const UtilityActions = ({ size={14} strokeWidth={2} className={ - isFavorite ? 'fill-brand stroke-none' : 'fill-none stroke-foreground-light' + isFavorite + ? 'fill-brand-default stroke-none' + : 'fill-none stroke-foreground-light' } /> {isFavorite ? 'Remove from' : 'Add to'} favorites @@ -198,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 91a6bb48504..1defb988137 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 c0c634b2a7a..2fc7960e9ac 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" + barClass="bg-brand-default" />
    diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/MapView.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/MapView.tsx index 93c70b1c03c..503c973d494 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 stroke-brand-500' + ? 'fill-brand-default stroke-brand-500' : 'fill-brand-500 stroke-brand-400' }`} /> diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.DatePickers.tsx b/apps/studio/components/interfaces/Settings/Logs/Logs.DatePickers.tsx index 90183fca92e..91b805418b1 100644 --- a/apps/studio/components/interfaces/Settings/Logs/Logs.DatePickers.tsx +++ b/apps/studio/components/interfaces/Settings/Logs/Logs.DatePickers.tsx @@ -418,7 +418,7 @@ export const LogsDatePicker = ({ size="tiny" onClick={handleCopy} className={cn({ - 'text-brand-link': copied || pasted, + 'text-brand': copied || pasted, })} > {copied ? 'Copied!' : pasted ? 'Pasted!' : 'Copy range'} diff --git a/apps/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx b/apps/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx index e2bf90d47b9..4c65a2629f0 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/Storage/StoragePolicies/StoragePoliciesEditor.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesEditor.tsx index cd48b4159f5..ad809eccb87 100644 --- a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesEditor.tsx +++ b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesEditor.tsx @@ -122,7 +122,7 @@ const PolicyAllowedOperations = ({ allowedOperations = [], onToggleOperation = ( className={cn( 'text-xs font-mono leading-[1.1] px-2 py-1 rounded-full border font-normal whitespace-nowrap transition-colors duration-200', allowedClientLibraryMethods.includes(method) - ? 'bg-brand/10 text-brand-600 border-brand-500' + ? 'bg-brand-default/10 text-brand-600 border-brand-500' : 'bg-surface-75 text-foreground-lighter border-muted' )} > diff --git a/apps/studio/components/interfaces/Support/LinkSupportTicketPage.tsx b/apps/studio/components/interfaces/Support/LinkSupportTicketPage.tsx index 8e8e7b76119..65d3e36a92f 100644 --- a/apps/studio/components/interfaces/Support/LinkSupportTicketPage.tsx +++ b/apps/studio/components/interfaces/Support/LinkSupportTicketPage.tsx @@ -59,7 +59,7 @@ function LinkSupportTicketSuccess() {
    -
    +
    diff --git a/apps/studio/components/interfaces/Support/SupportFormPage.tsx b/apps/studio/components/interfaces/Support/SupportFormPage.tsx index a9979fa2c8e..85176cc86ca 100644 --- a/apps/studio/components/interfaces/Support/SupportFormPage.tsx +++ b/apps/studio/components/interfaces/Support/SupportFormPage.tsx @@ -157,7 +157,10 @@ function SupportFormHeader() { ) : (
    ) } diff --git a/apps/studio/components/interfaces/Support/SupportSidebarForm.tsx b/apps/studio/components/interfaces/Support/SupportSidebarForm.tsx index 48814a0b585..f73d2ce1576 100644 --- a/apps/studio/components/interfaces/Support/SupportSidebarForm.tsx +++ b/apps/studio/components/interfaces/Support/SupportSidebarForm.tsx @@ -137,7 +137,12 @@ export function SupportFormStatusButton() { isLoading ? ( ) : ( -
    +
    ) } > diff --git a/apps/studio/components/interfaces/TableGridEditor/InsertButton.tsx b/apps/studio/components/interfaces/TableGridEditor/InsertButton.tsx index 17e069e6683..5a5b13b8c7d 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/OperationQueueSidePanel/AddRowOperationItem.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/OperationQueueSidePanel/AddRowOperationItem.tsx index 300ccae2177..df196420abb 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/OperationQueueSidePanel/AddRowOperationItem.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/OperationQueueSidePanel/AddRowOperationItem.tsx @@ -76,7 +76,7 @@ export const AddRowOperationItem = ({ /> - + {previewColumns.length === 0 && ( No data provided, default values will be used @@ -84,7 +84,7 @@ export const AddRowOperationItem = ({ )} {previewColumns.map(([key, value]) => (
    - + + + {key}: {formatOperationItemValue(value)} @@ -93,7 +93,7 @@ export const AddRowOperationItem = ({ ))} {remainingCount > 0 && (
    - + + + +{remainingCount} more column(s)
    )} diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/OperationQueueSidePanel/OperationItem.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/OperationQueueSidePanel/OperationItem.tsx index 1e50aee0f58..010f8718a89 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/OperationQueueSidePanel/OperationItem.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/OperationQueueSidePanel/OperationItem.tsx @@ -82,8 +82,8 @@ export const OperationItem = ({ operationId, tableId, content }: OperationItemPr
    - + - + + + {formattedNewValue}
    diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.utils.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.utils.tsx index 39b053096de..b93c3856de4 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" + barClass="bg-brand-default" 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" + barClass="bg-brand-default" 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 c921a182b70..72438ce15b1 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')).not.toBeInTheDocument() + expect(container.querySelector('.bg-brand-default')).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')).toBeInTheDocument() + expect(container.querySelector('.bg-brand-default')).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 5006cd40349..286152ec0b3 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 01158b8595b..ce40f77066a 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={
    {hasReviewRequested && ( - + )}
    diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx index 978b326dd0f..a17c94089a4 100644 --- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx +++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx @@ -428,7 +428,9 @@ export const SQLEditorTreeViewItem = ({ {isFavorite ? 'Remove from' : 'Add to'} favorites diff --git a/apps/studio/components/ui/BannerStack/Banners/BannerFreeMicroUpgrade.tsx b/apps/studio/components/ui/BannerStack/Banners/BannerFreeMicroUpgrade.tsx index b1b0aa1e4c8..fd4d2eb00fc 100644 --- a/apps/studio/components/ui/BannerStack/Banners/BannerFreeMicroUpgrade.tsx +++ b/apps/studio/components/ui/BannerStack/Banners/BannerFreeMicroUpgrade.tsx @@ -35,9 +35,9 @@ export const BannerFreeMicroUpgrade = () => { } - className="text-brand-600 border-brand-500 bg-brand/10 gap-1" + className="text-brand-600 border-brand-500 bg-brand-default/10 gap-1" /> - +
    diff --git a/apps/studio/components/ui/BannerStack/Banners/BannerTableEditorQueueOperations.tsx b/apps/studio/components/ui/BannerStack/Banners/BannerTableEditorQueueOperations.tsx index 1aa4468144e..ae8a1a8445b 100644 --- a/apps/studio/components/ui/BannerStack/Banners/BannerTableEditorQueueOperations.tsx +++ b/apps/studio/components/ui/BannerStack/Banners/BannerTableEditorQueueOperations.tsx @@ -49,8 +49,8 @@ export const BannerTableEditorQueueOperations = () => {
    - + - Blue + + + Blue
    diff --git a/apps/studio/components/ui/ComputeBadgeWrapper.tsx b/apps/studio/components/ui/ComputeBadgeWrapper.tsx index 016a62ea1d3..81e58fe2e0f 100644 --- a/apps/studio/components/ui/ComputeBadgeWrapper.tsx +++ b/apps/studio/components/ui/ComputeBadgeWrapper.tsx @@ -115,12 +115,12 @@ export const ComputeBadgeWrapper = ({ infraComputeSize={computeSize} icon={showUpgradeGlow && } className={cn( - showUpgradeGlow && 'text-brand-600 border-brand-500 bg-brand/10 gap-1', + showUpgradeGlow && 'text-brand-600 border-brand-500 bg-brand-default/10 gap-1', badgeClassName )} /> {showUpgradeGlow && ( - + )}
    diff --git a/apps/studio/components/ui/DotPing.tsx b/apps/studio/components/ui/DotPing.tsx index 7bdca2e7024..711103c9fdc 100644 --- a/apps/studio/components/ui/DotPing.tsx +++ b/apps/studio/components/ui/DotPing.tsx @@ -12,7 +12,7 @@ export const DotPing = ({ animate = true, variant = 'primary' }: DotPingProps) = className={cn( 'absolute inset-0 rounded-full', animate && 'animate-ping', - variant === 'primary' && 'bg-brand/20', + variant === 'primary' && 'bg-brand-default/20', variant === 'default' && 'bg-selection/20', variant === 'warning' && 'bg-warning/20' )} @@ -24,7 +24,7 @@ export const DotPing = ({ animate = true, variant = 'primary' }: DotPingProps) = { - + Live diff --git a/apps/studio/styles/grid.css b/apps/studio/styles/grid.css index b3582635435..87b98cdcdb7 100644 --- a/apps/studio/styles/grid.css +++ b/apps/studio/styles/grid.css @@ -60,7 +60,7 @@ .rdg-cell { border-left-color: hsl(var(--brand-default)); - color: hsl(var(--brand-link)); + color: var(--primary); } /* First cell gets a stronger left border to indicate new row */ @@ -329,7 +329,7 @@ } .sb-grid-column-header__inner svg { - @apply border-brand text-brand; + @apply border-brand-default text-brand; } /* diff --git a/apps/studio/styles/react-data-grid-logs.css b/apps/studio/styles/react-data-grid-logs.css index 438e2a9e89a..577a243a5fb 100644 --- a/apps/studio/styles/react-data-grid-logs.css +++ b/apps/studio/styles/react-data-grid-logs.css @@ -29,7 +29,7 @@ .rdg-row { &.rdg-row--focused { - @apply border-r border-brand; + @apply border-r border-brand-default; border-right-width: 4px; } @@ -71,7 +71,7 @@ .rdg-row { &.rdg-row--focused { - @apply border-r border-brand; + @apply border-r border-brand-default; border-right-width: 4px; } diff --git a/apps/studio/styles/ui.css b/apps/studio/styles/ui.css index c242e8f58f6..7f043980a39 100644 --- a/apps/studio/styles/ui.css +++ b/apps/studio/styles/ui.css @@ -303,7 +303,7 @@ ::-moz-selection { /* Code for Firefox */ - @apply bg-brand; + @apply bg-brand-default; color: #333 !important; } diff --git a/apps/www/_go/events/stripe-sessions-2026/meeting-scheduler.tsx b/apps/www/_go/events/stripe-sessions-2026/meeting-scheduler.tsx index 14175c847d4..193c4d01772 100644 --- a/apps/www/_go/events/stripe-sessions-2026/meeting-scheduler.tsx +++ b/apps/www/_go/events/stripe-sessions-2026/meeting-scheduler.tsx @@ -38,7 +38,7 @@ const page: GoPageInput = {
    Start building with Supabase diff --git a/apps/www/_go/pre-release/supabase-pipelines-new-destinations.tsx b/apps/www/_go/pre-release/supabase-pipelines-new-destinations.tsx index deb6bfa6078..c5e4d0d2f97 100644 --- a/apps/www/_go/pre-release/supabase-pipelines-new-destinations.tsx +++ b/apps/www/_go/pre-release/supabase-pipelines-new-destinations.tsx @@ -138,7 +138,7 @@ const page: GoPageInput = { className="group flex h-full flex-col gap-3 rounded-lg border border-muted bg-surface-100 p-5 text-left transition-colors hover:border-brand-600 hover:bg-surface-200" > Blog - + Introducing Supabase Pipelines @@ -151,7 +151,7 @@ const page: GoPageInput = { className="group flex h-full flex-col gap-3 rounded-lg border border-muted bg-surface-100 p-5 text-left transition-colors hover:border-brand-600 hover:bg-surface-200" > Docs - + Set up Pipelines @@ -164,7 +164,7 @@ const page: GoPageInput = { className="group flex h-full flex-col gap-3 rounded-lg border border-muted bg-surface-100 p-5 text-left transition-colors hover:border-brand-600 hover:bg-surface-200" > Guide - + Realtime or Pipelines? diff --git a/apps/www/app/(products)/_shared/QuoteSection.tsx b/apps/www/app/(products)/_shared/QuoteSection.tsx index 9db9e4db4ca..866014246fc 100644 --- a/apps/www/app/(products)/_shared/QuoteSection.tsx +++ b/apps/www/app/(products)/_shared/QuoteSection.tsx @@ -24,7 +24,7 @@ export function QuoteSection({ quote, highlight, author }: QuoteSectionProps) { {highlight && ( <> {' '} - {highlight} + {highlight} )}

    diff --git a/apps/www/app/(products)/auth/_components/FeaturesSection.tsx b/apps/www/app/(products)/auth/_components/FeaturesSection.tsx index 409c40963f8..7b576168625 100644 --- a/apps/www/app/(products)/auth/_components/FeaturesSection.tsx +++ b/apps/www/app/(products)/auth/_components/FeaturesSection.tsx @@ -193,7 +193,7 @@ function IntegratedSkeleton() {
    -
    +
    CW
    @@ -244,7 +244,7 @@ function IntegratedSkeleton() { {/* Verify email card */}
    -
    +
    Authenticator app TOTP via auth app
    -
    +
    On
    diff --git a/apps/www/app/(products)/database/_components/FeaturesSection.tsx b/apps/www/app/(products)/database/_components/FeaturesSection.tsx index 2edd765bfdd..96b6d36b861 100644 --- a/apps/www/app/(products)/database/_components/FeaturesSection.tsx +++ b/apps/www/app/(products)/database/_components/FeaturesSection.tsx @@ -478,7 +478,9 @@ function RealtimeSkeleton() { key={msg.id} className={cn( 'transition-colors duration-500', - tableFlashId === msg.id ? 'bg-brand/15 dark:bg-brand/5' : 'bg-surface-75' + tableFlashId === msg.id + ? 'bg-brand-default/15 dark:bg-brand-default/5' + : 'bg-surface-75' )} > @@ -546,9 +548,9 @@ function RealtimeSkeleton() { className={cn( 'max-w-[75%] px-3 py-1.5 rounded-xl text-xs leading-snug transition-colors duration-500', isAlice - ? 'bg-brand/15 text-foreground rounded-br-sm' + ? 'bg-brand-default/15 text-foreground rounded-br-sm' : 'bg-surface-300 text-foreground rounded-bl-sm', - chatFlashId === msg.id && 'ring-1 ring-brand/30' + chatFlashId === msg.id && 'ring-1 ring-brand-default/30' )} > {msg.text} diff --git a/apps/www/app/(products)/database/_components/Illustrations/SpreadsheetIllustration.tsx b/apps/www/app/(products)/database/_components/Illustrations/SpreadsheetIllustration.tsx index f37f71250a0..3d139ce391f 100644 --- a/apps/www/app/(products)/database/_components/Illustrations/SpreadsheetIllustration.tsx +++ b/apps/www/app/(products)/database/_components/Illustrations/SpreadsheetIllustration.tsx @@ -140,7 +140,7 @@ export function SpreadsheetIllustration() { @@ -245,9 +247,9 @@ function DatabaseChangesSkeleton() { className={cn( 'max-w-[75%] px-3 py-1.5 rounded-xl text-xs leading-snug transition-colors duration-500', isAlice - ? 'bg-brand/15 text-foreground rounded-br-sm' + ? 'bg-brand-default/15 text-foreground rounded-br-sm' : 'bg-surface-300 text-foreground rounded-bl-sm', - chatFlashId === msg.id && 'ring-1 ring-brand/30' + chatFlashId === msg.id && 'ring-1 ring-brand-default/30' )} > {msg.text} @@ -626,7 +628,7 @@ function BroadcastSkeleton() { key={i} className={cn( 'absolute bottom-6 z-10 flex h-10 w-10 -translate-x-1/2 items-center justify-center rounded-xl border bg-surface-100 shadow-xs dark:shadow-sm transition-all duration-300', - isFlashing ? 'border-brand text-brand' : 'border-border text-foreground-muted' + isFlashing ? 'border-brand-default text-brand' : 'border-border text-foreground-muted' )} style={{ left: `${xPercent}%` }} > diff --git a/apps/www/app/(products)/storage/_components/FeaturesSection.tsx b/apps/www/app/(products)/storage/_components/FeaturesSection.tsx index 57d933117e5..55379f28805 100644 --- a/apps/www/app/(products)/storage/_components/FeaturesSection.tsx +++ b/apps/www/app/(products)/storage/_components/FeaturesSection.tsx @@ -38,7 +38,7 @@ function InteroperableSkeleton() { {[0, 1].map((i) => (
    (
    (
    -
    +
    Category {category.name} @@ -379,7 +379,7 @@ function PartnerDetails({ } target="_blank" rel="noreferrer" - className="text-brand-link hover:underline transition-colors" + className="text-brand hover:underline transition-colors" > {(() => { try { @@ -402,7 +402,7 @@ function PartnerDetails({ href={activeListing.docsUrl} target="_blank" rel="noreferrer" - className="text-brand-link hover:underline transition-colors" + className="text-brand hover:underline transition-colors" > Learn diff --git a/apps/www/app/state-of-startups/StateOfStartups2026Content.tsx b/apps/www/app/state-of-startups/StateOfStartups2026Content.tsx index 6c88ce226c6..a167e279cf8 100644 --- a/apps/www/app/state-of-startups/StateOfStartups2026Content.tsx +++ b/apps/www/app/state-of-startups/StateOfStartups2026Content.tsx @@ -97,9 +97,8 @@ function FloatingTableOfContents({ href={`#chapter-${chapterIndex + 1}`} onClick={() => setIsTocOpen(false)} className={cn( - 'block px-6 py-2 text-xs transition-colors font-mono uppercase tracking-wider text-center text-foreground-light hover:text-brand-link hover:bg-brand-300/25', - chapterIndex + 1 === activeChapter && - 'bg-brand-300/40 text-brand-link dark:text-brand' + 'block px-6 py-2 text-xs transition-colors font-mono uppercase tracking-wider text-center text-foreground-light hover:text-brand hover:bg-brand-300/25', + chapterIndex + 1 === activeChapter && 'bg-brand-300/40 text-brand' )} > {chapter.shortTitle} @@ -227,7 +226,7 @@ export default function StateOfStartups2026Content() {
  • {chapterIndex + 1} diff --git a/apps/www/app/state-of-startups/components/CohortToggle.tsx b/apps/www/app/state-of-startups/components/CohortToggle.tsx index 302e4150a1f..5e619a543d3 100644 --- a/apps/www/app/state-of-startups/components/CohortToggle.tsx +++ b/apps/www/app/state-of-startups/components/CohortToggle.tsx @@ -29,7 +29,7 @@ export function CohortToggle({ eyebrow, options, value, onValueChange }: CohortT onClick={() => onValueChange(option.label)} className={`px-3 py-1 text-xs font-mono uppercase tracking-wider border rounded-full transition-colors ${ isActive - ? 'border-brand-500/40 bg-brand-300/40 text-brand-link dark:text-brand' + ? 'border-brand-500/40 bg-brand-300/40 text-brand' : 'border-overlay text-foreground-light hover:text-foreground hover:bg-surface-100' }`} > diff --git a/apps/www/app/state-of-startups/components/DecorativeProgressBar.tsx b/apps/www/app/state-of-startups/components/DecorativeProgressBar.tsx index c032444d73e..b2a77a140c2 100644 --- a/apps/www/app/state-of-startups/components/DecorativeProgressBar.tsx +++ b/apps/www/app/state-of-startups/components/DecorativeProgressBar.tsx @@ -11,7 +11,7 @@ interface ProgressBarProps { export function ProgressBar({ className = 'h-4', backgroundClassName = 'bg-foreground-muted/80', - foregroundClassName = 'bg-brand', + foregroundClassName = 'bg-brand-default', animationDelay, reverse = false, }: ProgressBarProps) { @@ -62,7 +62,7 @@ const PROGRESS_BARS = [ { height: 'h-8', bgColor: 'bg-foreground-muted/50', - fgColor: 'bg-brand', + fgColor: 'bg-brand-default', animationDelay: '0.3s', }, { diff --git a/apps/www/app/state-of-startups/components/ParticipantsCarousel.tsx b/apps/www/app/state-of-startups/components/ParticipantsCarousel.tsx index a5f7ff15a83..ecfa5ce21a6 100644 --- a/apps/www/app/state-of-startups/components/ParticipantsCarousel.tsx +++ b/apps/www/app/state-of-startups/components/ParticipantsCarousel.tsx @@ -68,7 +68,7 @@ export function ParticipantsCarousel({ participants }: { participants: Participa href={participant.url} target="_blank" rel="noopener noreferrer" - className="text-xs md:text-sm font-mono tracking-widest uppercase text-foreground-lighter hover:text-brand-link transition-colors whitespace-nowrap" + className="text-xs md:text-sm font-mono tracking-widest uppercase text-foreground-lighter hover:text-brand transition-colors whitespace-nowrap" > {participant.company} diff --git a/apps/www/app/state-of-startups/components/SectionCallout.tsx b/apps/www/app/state-of-startups/components/SectionCallout.tsx index 641700a83b9..7efee4330ae 100644 --- a/apps/www/app/state-of-startups/components/SectionCallout.tsx +++ b/apps/www/app/state-of-startups/components/SectionCallout.tsx @@ -13,15 +13,13 @@ export function SectionCallout({ eyebrow, body, href, cta, external }: SectionCa return (
    - - {eyebrow} - + {eyebrow}

    {body}

    {cta} diff --git a/apps/www/app/state-of-startups/components/SurveyChannelMixChart.tsx b/apps/www/app/state-of-startups/components/SurveyChannelMixChart.tsx index 0b7b9fc65b8..ce32832fa40 100644 --- a/apps/www/app/state-of-startups/components/SurveyChannelMixChart.tsx +++ b/apps/www/app/state-of-startups/components/SurveyChannelMixChart.tsx @@ -74,7 +74,7 @@ export function SurveyChannelMixChart({ }} />
    diff --git a/apps/www/app/state-of-startups/components/SurveyChapter.tsx b/apps/www/app/state-of-startups/components/SurveyChapter.tsx index 6d087ef9dbe..99e88af612e 100644 --- a/apps/www/app/state-of-startups/components/SurveyChapter.tsx +++ b/apps/www/app/state-of-startups/components/SurveyChapter.tsx @@ -56,9 +56,7 @@ export function SurveyChapter({ {/* Text content */}
    -

    +

    {shortTitle}

    diff --git a/apps/www/app/state-of-startups/components/SurveyChapterSection.tsx b/apps/www/app/state-of-startups/components/SurveyChapterSection.tsx index 766829481f5..bf69229f118 100644 --- a/apps/www/app/state-of-startups/components/SurveyChapterSection.tsx +++ b/apps/www/app/state-of-startups/components/SurveyChapterSection.tsx @@ -49,7 +49,7 @@ export function SurveyChapterSection({ section }: { section: SurveySection }) { return { [cohortToggle.key]: option.filter } }, [cohortToggle, cohortLabel]) - const eyebrowColor = 'text-brand-link dark:text-brand' + const eyebrowColor = 'text-brand' // A section can be compared across years only if it has any 2025 data. New-in- // 2026 questions (share of codebase, auth, agents, MCP, the AI-codebase diff --git a/apps/www/app/state-of-startups/components/SurveyChart.tsx b/apps/www/app/state-of-startups/components/SurveyChart.tsx index 0ee76f6b201..1a61e4e57ec 100644 --- a/apps/www/app/state-of-startups/components/SurveyChart.tsx +++ b/apps/www/app/state-of-startups/components/SurveyChart.tsx @@ -25,8 +25,8 @@ interface SurveyChartProps { maxBars?: number } -const accentBarFg = 'bg-brand' -const accentBarText = 'text-brand-link dark:text-brand' +const accentBarFg = 'bg-brand-default' +const accentBarText = 'text-brand' export function SurveyChart({ title, diff --git a/apps/www/app/state-of-startups/components/SurveyChartShell.tsx b/apps/www/app/state-of-startups/components/SurveyChartShell.tsx index e3ac8344e94..a38caf39a58 100644 --- a/apps/www/app/state-of-startups/components/SurveyChartShell.tsx +++ b/apps/www/app/state-of-startups/components/SurveyChartShell.tsx @@ -63,7 +63,7 @@ export function ChartLegend({
    diff --git a/apps/www/app/state-of-startups/components/SurveyPullQuoteCarousel.tsx b/apps/www/app/state-of-startups/components/SurveyPullQuoteCarousel.tsx index 287c2ba4c8e..468de274c09 100644 --- a/apps/www/app/state-of-startups/components/SurveyPullQuoteCarousel.tsx +++ b/apps/www/app/state-of-startups/components/SurveyPullQuoteCarousel.tsx @@ -120,7 +120,7 @@ export function SurveyPullQuoteCarousel({ quotes }: { quotes: CarouselPullQuote[ }} >
    (
    {q.theme && ( - + {q.theme} )} diff --git a/apps/www/app/state-of-startups/components/SurveyRankedAnswersPair.tsx b/apps/www/app/state-of-startups/components/SurveyRankedAnswersPair.tsx index b8d04e67cd6..e0288526d56 100644 --- a/apps/www/app/state-of-startups/components/SurveyRankedAnswersPair.tsx +++ b/apps/www/app/state-of-startups/components/SurveyRankedAnswersPair.tsx @@ -9,7 +9,7 @@ export function SurveyRankedAnswersPair({ }) { const accent = useAccent() - const accentBlocks = ['bg-brand', 'bg-brand-500', 'bg-brand-300'] + const accentBlocks = ['bg-brand-default', 'bg-brand-500', 'bg-brand-300'] const accentRankText = 'text-brand' diff --git a/apps/www/app/state-of-startups/components/SurveyStatCard.tsx b/apps/www/app/state-of-startups/components/SurveyStatCard.tsx index 41a30578a64..d7ce992614f 100644 --- a/apps/www/app/state-of-startups/components/SurveyStatCard.tsx +++ b/apps/www/app/state-of-startups/components/SurveyStatCard.tsx @@ -27,7 +27,7 @@ export function SurveyStatCard({ label, query, value, cohortFilter }: SurveyStat const cardRef = useRef(null) const { year } = useYear() - const accentBg = 'bg-brand' + const accentBg = 'bg-brand-default' const accentText = 'text-brand' // A static `value` wins; otherwise resolve from the embedded dataset for the diff --git a/apps/www/app/state-of-startups/components/SurveySummarizedAnswer.tsx b/apps/www/app/state-of-startups/components/SurveySummarizedAnswer.tsx index 6187fe3bb8b..2262aa28a82 100644 --- a/apps/www/app/state-of-startups/components/SurveySummarizedAnswer.tsx +++ b/apps/www/app/state-of-startups/components/SurveySummarizedAnswer.tsx @@ -14,7 +14,7 @@ export function SurveySummarizedAnswer({ label, answers }: { label: string; answ const [isBlinking, setIsBlinking] = useState(false) const accent = useAccent() - const accentBg = 'bg-brand' + const accentBg = 'bg-brand-default' useEffect(() => { if (answers.length <= 1) return diff --git a/apps/www/app/state-of-startups/components/SurveyWordCloud.tsx b/apps/www/app/state-of-startups/components/SurveyWordCloud.tsx index 6b36f148760..f639c04e2c3 100644 --- a/apps/www/app/state-of-startups/components/SurveyWordCloud.tsx +++ b/apps/www/app/state-of-startups/components/SurveyWordCloud.tsx @@ -18,7 +18,7 @@ export function SurveyWordCloud({ const [scramblingTexts, setScramblingTexts] = useState([]) const accent = useAccent() - const accentBg = 'bg-brand' + const accentBg = 'bg-brand-default' // Calculate the range within the current context const counts = answers.map((answer) => answer.count) diff --git a/apps/www/app/state-of-startups/register/RegisterContent.tsx b/apps/www/app/state-of-startups/register/RegisterContent.tsx index e10d6a90760..edf8c3d7479 100644 --- a/apps/www/app/state-of-startups/register/RegisterContent.tsx +++ b/apps/www/app/state-of-startups/register/RegisterContent.tsx @@ -198,7 +198,7 @@ function PreviousResultsCta() {
    of
    -
    +
    Startups
    diff --git a/apps/www/components/Contribute/Hero.tsx b/apps/www/components/Contribute/Hero.tsx index d8405b52a8b..850fe4f6805 100644 --- a/apps/www/components/Contribute/Hero.tsx +++ b/apps/www/components/Contribute/Hero.tsx @@ -4,7 +4,7 @@ import { Button } from 'ui' export function Hero() { return (
    -

    +

    Supabase Contribute

    diff --git a/apps/www/components/Contribute/markdownComponents.tsx b/apps/www/components/Contribute/markdownComponents.tsx index 59dfa69cfa2..fcf1402299c 100644 --- a/apps/www/components/Contribute/markdownComponents.tsx +++ b/apps/www/components/Contribute/markdownComponents.tsx @@ -19,7 +19,7 @@ export const markdownComponents: Components = { a: ({ node, ...props }) => ( diff --git a/apps/www/components/EnterpriseFormQuotes.tsx b/apps/www/components/EnterpriseFormQuotes.tsx index a6d20804047..3d1e1e548cc 100644 --- a/apps/www/components/EnterpriseFormQuotes.tsx +++ b/apps/www/components/EnterpriseFormQuotes.tsx @@ -104,7 +104,7 @@ const EnterpriseFormQuotes = ({
    99.7 ? 'opacity-0' : 'opacity-100' )} style={{ x: `${progress! - 100}%` }} diff --git a/apps/www/components/Events/new/EventList.tsx b/apps/www/components/Events/new/EventList.tsx index caa20d147f7..3116163fbcc 100644 --- a/apps/www/components/Events/new/EventList.tsx +++ b/apps/www/components/Events/new/EventList.tsx @@ -63,7 +63,7 @@ export function EventList() {
    diff --git a/apps/www/components/Footer/index.tsx b/apps/www/components/Footer/index.tsx index 6fc423a4475..f7fc62333dd 100644 --- a/apps/www/components/Footer/index.tsx +++ b/apps/www/components/Footer/index.tsx @@ -89,7 +89,7 @@ const Footer = (props: Props) => {
    We protect your data. - + More on Security
    @@ -168,7 +168,7 @@ const Footer = (props: Props) => {
    {newsletterStatus === 'success' ? (
    -

    Thanks for subscribing!

    +

    Thanks for subscribing!

    You'll hear from us when we publish our next newsletter issue.

    diff --git a/apps/www/components/LaunchWeek/11/LW11Meetups.tsx b/apps/www/components/LaunchWeek/11/LW11Meetups.tsx index f3a0e04410e..05abfc9d384 100644 --- a/apps/www/components/LaunchWeek/11/LW11Meetups.tsx +++ b/apps/www/components/LaunchWeek/11/LW11Meetups.tsx @@ -118,7 +118,7 @@ const LW11Meetups = ({ meetups }: { meetups?: Meetup[] }) => { )} > {liveNow && ( -
    +
    )} {meetup.title} {i !== meets.length - 1 && ', '} @@ -138,7 +138,7 @@ const LW11Meetups = ({ meetups }: { meetups?: Meetup[] }) => { )} > {liveNow && ( -
    +
    )} {meetup.title} {i !== meets.length - 1 && ', '} diff --git a/apps/www/components/LaunchWeek/11/Releases/LW11StickyNav.tsx b/apps/www/components/LaunchWeek/11/Releases/LW11StickyNav.tsx index 0957d7c0c0d..766c502b681 100644 --- a/apps/www/components/LaunchWeek/11/Releases/LW11StickyNav.tsx +++ b/apps/www/components/LaunchWeek/11/Releases/LW11StickyNav.tsx @@ -86,7 +86,7 @@ const LWXStickyNav: FC = () => { {day.isToday && ( )} diff --git a/apps/www/components/LaunchWeek/12/LWMeetups.tsx b/apps/www/components/LaunchWeek/12/LWMeetups.tsx index e39039aa145..a7e8ad7a4ce 100644 --- a/apps/www/components/LaunchWeek/12/LWMeetups.tsx +++ b/apps/www/components/LaunchWeek/12/LWMeetups.tsx @@ -111,7 +111,7 @@ const LWMeetups = ({ meetups, className }: { meetups?: Meetup[]; className?: str )} > {liveNow && ( -
    +
    )} {meetup.title} diff --git a/apps/www/components/LaunchWeek/12/Releases/LWStickyNav.tsx b/apps/www/components/LaunchWeek/12/Releases/LWStickyNav.tsx index d70fbb261fc..9d0aeae4256 100644 --- a/apps/www/components/LaunchWeek/12/Releases/LWStickyNav.tsx +++ b/apps/www/components/LaunchWeek/12/Releases/LWStickyNav.tsx @@ -69,7 +69,7 @@ const LWXStickyNav: FC = () => { {day.isToday && ( )} diff --git a/apps/www/components/LaunchWeek/13/Releases/LWStickyNav.tsx b/apps/www/components/LaunchWeek/13/Releases/LWStickyNav.tsx index 4e11106646e..ed69bb05c9d 100644 --- a/apps/www/components/LaunchWeek/13/Releases/LWStickyNav.tsx +++ b/apps/www/components/LaunchWeek/13/Releases/LWStickyNav.tsx @@ -90,7 +90,7 @@ const LWXStickyNav: FC = () => { {day.isToday && ( )} @@ -115,7 +115,7 @@ const LWXStickyNav: FC = () => { {day.isToday && ( )} diff --git a/apps/www/components/LaunchWeek/14/Releases/LWStickyNav.tsx b/apps/www/components/LaunchWeek/14/Releases/LWStickyNav.tsx index 63293c6130a..16144cb5c52 100644 --- a/apps/www/components/LaunchWeek/14/Releases/LWStickyNav.tsx +++ b/apps/www/components/LaunchWeek/14/Releases/LWStickyNav.tsx @@ -90,7 +90,7 @@ const LWXStickyNav: FC = () => { {day.isToday && ( )} @@ -115,7 +115,7 @@ const LWXStickyNav: FC = () => { {day.isToday && ( )} diff --git a/apps/www/components/LaunchWeek/15/LW15Meetups.tsx b/apps/www/components/LaunchWeek/15/LW15Meetups.tsx index 45f2944dd50..c14b489d869 100644 --- a/apps/www/components/LaunchWeek/15/LW15Meetups.tsx +++ b/apps/www/components/LaunchWeek/15/LW15Meetups.tsx @@ -152,7 +152,7 @@ const LW15Meetups = ({ className, meetups = [] }: PropsWithChildren) => { )} > {liveNow && ( -
    +
    )} {getMeetupCity(meetup)} diff --git a/apps/www/components/LaunchWeek/7/LaunchSection/index.tsx b/apps/www/components/LaunchWeek/7/LaunchSection/index.tsx index 96dd8cf9b1f..bd46ab48c59 100644 --- a/apps/www/components/LaunchWeek/7/LaunchSection/index.tsx +++ b/apps/www/components/LaunchWeek/7/LaunchSection/index.tsx @@ -25,7 +25,7 @@ export const LaunchSection = (props: WeekDayProps) => {
    {/* END timeline dot */} @@ -63,7 +63,7 @@ export const LaunchSection = (props: WeekDayProps) => { nextDayNotShipped ? 'launch-week-timeline-border--approaching' : props.shipped - ? 'border-brand' + ? 'border-brand-default' : 'border-purple-700', className, ].join(' ')} @@ -151,7 +151,7 @@ export const LaunchSection = (props: WeekDayProps) => { md:pl-8 lg:pl-8 `, - props.shipped ? 'border-brand' : 'border-purple-700', + props.shipped ? 'border-brand-default' : 'border-purple-700', props.shippingHasStarted && 'lg:col-span-6', !lastIndex && 'pb-8 lg:pb-16', ].join(' ')} diff --git a/apps/www/components/LaunchWeek/X/LWXMeetups.tsx b/apps/www/components/LaunchWeek/X/LWXMeetups.tsx index 5e3b71f36b8..7099bdaf9c2 100644 --- a/apps/www/components/LaunchWeek/X/LWXMeetups.tsx +++ b/apps/www/components/LaunchWeek/X/LWXMeetups.tsx @@ -114,7 +114,7 @@ const LWXMeetups = ({ meetups }: { meetups?: Meetup[] }) => { )} > {liveNow && ( -
    +
    )} {meetup.title} {i !== meets.length - 1 && ', '} diff --git a/apps/www/components/LaunchWeek/X/Releases/LWXStickyNav.tsx b/apps/www/components/LaunchWeek/X/Releases/LWXStickyNav.tsx index f3470aa2d8f..d8e5fb6d742 100644 --- a/apps/www/components/LaunchWeek/X/Releases/LWXStickyNav.tsx +++ b/apps/www/components/LaunchWeek/X/Releases/LWXStickyNav.tsx @@ -81,7 +81,7 @@ const LWXStickyNav: FC = () => { {day.isToday && ( )} diff --git a/apps/www/components/Nav/MenuItem.tsx b/apps/www/components/Nav/MenuItem.tsx index 7dbfaf6ef0f..ff1bbca8942 100644 --- a/apps/www/components/Nav/MenuItem.tsx +++ b/apps/www/components/Nav/MenuItem.tsx @@ -63,7 +63,7 @@ const MenuItem = React.forwardRef<

    {title} diff --git a/apps/www/components/Nav/index.tsx b/apps/www/components/Nav/index.tsx index 42cdb740aa2..ac46655b3a5 100644 --- a/apps/www/components/Nav/index.tsx +++ b/apps/www/components/Nav/index.tsx @@ -152,7 +152,7 @@ const Nav = ({ hideNavbar, stickyNavbar = true }: Props) => { {menuItem.title} @@ -180,7 +180,7 @@ const Nav = ({ hideNavbar, stickyNavbar = true }: Props) => { diff --git a/apps/www/components/Panel/Panel.tsx b/apps/www/components/Panel/Panel.tsx index 31012aae46e..96274a15c6c 100644 --- a/apps/www/components/Panel/Panel.tsx +++ b/apps/www/components/Panel/Panel.tsx @@ -85,7 +85,7 @@ const Panel = ({ 'group/panel relative rounded-lg md:rounded-xl p-px bg-surface-75 bg-linear-to-b from-border to-border/50 dark:to-surface-100 transition-all hover:shadow-md', !trackCursor && hasActiveOnHover ? activeColor === 'brand' - ? 'hover:bg-none hover:bg-brand!' + ? 'hover:bg-none hover:bg-brand-default!' : 'hover:bg-none hover:bg-border-stronger!' : '', outerClassName diff --git a/apps/www/components/Pricing/PricingFAQs.tsx b/apps/www/components/Pricing/PricingFAQs.tsx index c05fb9bdbf9..c2e3d1fa878 100644 --- a/apps/www/components/Pricing/PricingFAQs.tsx +++ b/apps/www/components/Pricing/PricingFAQs.tsx @@ -35,7 +35,7 @@ const PricingFAQs = () => { Open a support ticket {' '} diff --git a/apps/www/components/ProductIcon.tsx b/apps/www/components/ProductIcon.tsx index 21878ed6de3..c8d3fd15626 100644 --- a/apps/www/components/ProductIcon.tsx +++ b/apps/www/components/ProductIcon.tsx @@ -11,17 +11,17 @@ function ProductIcon({ icon, color }: ProductIcon) { case 'green': return { container: 'bg-brand-600 text-brand-100', - svg: 'stroke-brand', + svg: 'stroke-brand-default', } case 'alt': return { container: 'bg-brand-200 text-brand', - svg: 'stroke-brand', + svg: 'stroke-brand-default', } case 'gray': return { container: 'bg- text-brand', - svg: 'stroke-brand', + svg: 'stroke-brand-default', } case 'black': default: @@ -38,7 +38,7 @@ function ProductIcon({ icon, color }: ProductIcon) { 'inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md', !color || color === 'black' ? 'bg-foreground text-background-alternative' : '', color && color === 'gray' ? 'bg-border-strong text-foreground-light' : '', - color && color === 'green' ? 'bg-brand text-brand-100' : '', + color && color === 'green' ? 'bg-brand-default text-brand-100' : '', color && color === 'alt' ? 'bg-alternative text-brand' : '', // color && color === 'alt' ? 'bg-surface-300 text-brand' : '', ].join(' ')} @@ -49,7 +49,7 @@ function ProductIcon({ icon, color }: ProductIcon) { !color || color === 'black' ? 'stroke-background' : '', color && color === 'gray' ? 'stroke-foreground-light' : '', color && color === 'green' ? 'stroke-brand-200' : '', - color && color === 'alt' ? 'stroke-brand' : '', + color && color === 'alt' ? 'stroke-brand-default' : '', ].join(' ')} xmlns="http://www.w3.org/2000/svg" fill="none" diff --git a/apps/www/components/Products/RealtimeVisual.tsx b/apps/www/components/Products/RealtimeVisual.tsx index 64b3d622d98..a0e17a903fa 100644 --- a/apps/www/components/Products/RealtimeVisual.tsx +++ b/apps/www/components/Products/RealtimeVisual.tsx @@ -164,10 +164,10 @@ const RealtimeVisual: React.FC = ({ className }) => { // transition: 'transform 0.1s ease-out', // Smooth transition }} > -

    -
    -
    -
    +
    +
    +
    +
    {/* Gradient to hide animation under text to maintain readability */} diff --git a/apps/www/components/Regions/RegionsMap.tsx b/apps/www/components/Regions/RegionsMap.tsx index d5315544cd3..6186cbd25f9 100644 --- a/apps/www/components/Regions/RegionsMap.tsx +++ b/apps/www/components/Regions/RegionsMap.tsx @@ -109,7 +109,7 @@ export const RegionsMap = ({ onMouseLeave={() => onRegionHover(undefined)} onClick={() => onRegionSelect(region.code)} > - {isSelected && } + {isSelected && } diff --git a/apps/www/components/ScrollProgress.tsx b/apps/www/components/ScrollProgress.tsx index f83809715a8..f5a8ebe39ee 100644 --- a/apps/www/components/ScrollProgress.tsx +++ b/apps/www/components/ScrollProgress.tsx @@ -35,7 +35,7 @@ const ScrollProgress = () => { return (
    { {customer.author}, {customer.role}

    {customer.url && ( -
    +
    Read Customer Story
    diff --git a/apps/www/components/Sections/TimedTabsSection.tsx b/apps/www/components/Sections/TimedTabsSection.tsx index 3c8d17eac58..ef700dec426 100644 --- a/apps/www/components/Sections/TimedTabsSection.tsx +++ b/apps/www/components/Sections/TimedTabsSection.tsx @@ -33,7 +33,7 @@ const Tab = ({ isActive, label, paragraph, onClick, progress, intervalDuration } {isActive && ( 99.7 ? 'opacity-0' : 'opacity-100', ].join(' ')} style={{ x: `${progress! - 100}%` }} diff --git a/apps/www/components/SubprocessorUpdatesForm.tsx b/apps/www/components/SubprocessorUpdatesForm.tsx index b89dff34769..c2369c4a2ad 100644 --- a/apps/www/components/SubprocessorUpdatesForm.tsx +++ b/apps/www/components/SubprocessorUpdatesForm.tsx @@ -66,7 +66,7 @@ const SubprocessorUpdatesForm = () => { with our{' '} diff --git a/apps/www/components/SurveyResults/DecorativeProgressBar.tsx b/apps/www/components/SurveyResults/DecorativeProgressBar.tsx index c228c689c18..f7022f8f5b1 100644 --- a/apps/www/components/SurveyResults/DecorativeProgressBar.tsx +++ b/apps/www/components/SurveyResults/DecorativeProgressBar.tsx @@ -9,7 +9,7 @@ interface ProgressBarProps { export function ProgressBar({ className = 'h-4', backgroundClassName = 'bg-foreground-muted/80', - foregroundClassName = 'bg-brand', + foregroundClassName = 'bg-brand-default', animationDelay, reverse = false, }: ProgressBarProps) { @@ -59,7 +59,7 @@ export function DecorativeProgressBar({ { height: 'h-4', bgColor: 'bg-foreground-muted/80', - fgColor: 'bg-brand', + fgColor: 'bg-brand-default', animationDelay: '0s', }, { diff --git a/apps/www/components/SurveyResults/StateOfStartupsHeader.tsx b/apps/www/components/SurveyResults/StateOfStartupsHeader.tsx index bd3d5a618a8..1a9edcf973c 100644 --- a/apps/www/components/SurveyResults/StateOfStartupsHeader.tsx +++ b/apps/www/components/SurveyResults/StateOfStartupsHeader.tsx @@ -113,12 +113,12 @@ export function StateOfStartupsHeader({ showProgressBars = true }: StateOfStartu />
    -

    +

    {shortTitle}

    diff --git a/apps/www/components/SurveyResults/SurveyChapterSection.tsx b/apps/www/components/SurveyResults/SurveyChapterSection.tsx index 975ae9551fb..3f877a46ee0 100644 --- a/apps/www/components/SurveyResults/SurveyChapterSection.tsx +++ b/apps/www/components/SurveyResults/SurveyChapterSection.tsx @@ -67,7 +67,7 @@ export function SurveyChapterSection({
    -

    +

    {title}

    diff --git a/apps/www/components/SurveyResults/SurveyChart.tsx b/apps/www/components/SurveyResults/SurveyChart.tsx index ed831b50a1f..9400997daa5 100644 --- a/apps/www/components/SurveyResults/SurveyChart.tsx +++ b/apps/www/components/SurveyResults/SurveyChart.tsx @@ -377,7 +377,7 @@ export function SurveyChart({ className={`mb-2 flex flex-row justify-between text-sm font-mono uppercase tracking-widest tabular-nums transition-colors duration-300 ${ shouldAnimateBars ? item.value === maxValue - ? 'text-brand-link dark:text-brand' + ? 'text-brand' : 'text-foreground' : 'text-foreground-muted' }`} @@ -418,7 +418,7 @@ export function SurveyChart({ > {/* Foreground pattern for the filled portion */}

    (
    {/* Foreground pattern for the filled portion */}
    {/* Foreground pattern for the filled portion */}
    {/* Foreground pattern for the filled portion */}
    -

    +

    {bubble.stat.value}

    {bubble.stat.label}

    diff --git a/apps/www/components/Wrapped/Pages/ProductAnnouncements.tsx b/apps/www/components/Wrapped/Pages/ProductAnnouncements.tsx index bf1112e762a..d559fcfcf25 100644 --- a/apps/www/components/Wrapped/Pages/ProductAnnouncements.tsx +++ b/apps/www/components/Wrapped/Pages/ProductAnnouncements.tsx @@ -344,7 +344,7 @@ function MonthSection({ month }: { month: Month }) {
    {month.name} {month.isLaunchWeek && ( - + Launch Week )} diff --git a/apps/www/data/partners/index.tsx b/apps/www/data/partners/index.tsx index ff01b28cfe5..4eb558f294e 100644 --- a/apps/www/data/partners/index.tsx +++ b/apps/www/data/partners/index.tsx @@ -15,7 +15,7 @@ export default { image: (
    { {stat.name}

    {stat.value}/s

    diff --git a/apps/www/pages/careers.tsx b/apps/www/pages/careers.tsx index 5ba598e4b93..89ccd7085b9 100644 --- a/apps/www/pages/careers.tsx +++ b/apps/www/pages/careers.tsx @@ -155,9 +155,9 @@ const CareerPage = ({ return (
    -
    +

    {company.number}

    @@ -194,7 +194,7 @@ const CareerPage = ({ to stay connected to our team, and our community.

    -
    +

    We deeply believe in the efficacy of collaborative open source

    diff --git a/apps/www/pages/contact-us.tsx b/apps/www/pages/contact-us.tsx index 4d2e207ba53..1bd9b6456c1 100644 --- a/apps/www/pages/contact-us.tsx +++ b/apps/www/pages/contact-us.tsx @@ -22,7 +22,7 @@ const ContactSection = ({

    {email} @@ -87,7 +87,7 @@ const ContactUs = ({}: Props) => { description={ <> To report suspected violations of our{' '} - + Acceptable Use Policy , including spam, phishing, malware, or unlawful activity involving Supabase @@ -116,7 +116,7 @@ const ContactUs = ({}: Props) => {
    legal@supabase.com diff --git a/apps/www/pages/features/[slug].tsx b/apps/www/pages/features/[slug].tsx index 8261e77f4af..8950f551759 100644 --- a/apps/www/pages/features/[slug].tsx +++ b/apps/www/pages/features/[slug].tsx @@ -132,7 +132,7 @@ const FeaturePage: React.FC = ({ feature, prevFeature, nextFea
    { className="group flex flex-col items-center text-center gap-4 px-8 py-6" key={i} > -
    +
    {item.icon ? item.icon : }
    diff --git a/apps/www/pages/regions.tsx b/apps/www/pages/regions.tsx index c47dfdc9f59..23ef0346d59 100644 --- a/apps/www/pages/regions.tsx +++ b/apps/www/pages/regions.tsx @@ -128,7 +128,7 @@ const RegionsPage = () => {

    Need the database in your own cloud?{' '} - + Ask about early access to BYOC . diff --git a/apps/www/pages/state-of-startups-2025.tsx b/apps/www/pages/state-of-startups-2025.tsx index cf8521371df..f0b7b7ca99d 100644 --- a/apps/www/pages/state-of-startups-2025.tsx +++ b/apps/www/pages/state-of-startups-2025.tsx @@ -151,9 +151,8 @@ function StateOfStartupsPage() { href={`#chapter-${chapterIndex + 1}`} onClick={() => setIsTocOpen(false)} className={cn( - 'block px-6 py-2 text-xs transition-colors font-mono uppercase tracking-wider text-center text-foreground-light hover:text-brand-link hover:bg-brand-300/25', - chapterIndex + 1 === activeChapter && - 'bg-brand-300/40 text-brand-link dark:text-brand' + 'block px-6 py-2 text-xs transition-colors font-mono uppercase tracking-wider text-center text-foreground-light hover:text-brand hover:bg-brand-300/25', + chapterIndex + 1 === activeChapter && 'bg-brand-300/40 text-brand' )} > {chapter.shortTitle} @@ -205,7 +204,7 @@ function StateOfStartupsPage() {

  • {chapterIndex + 1} @@ -278,7 +277,7 @@ const ParticipantsList = () => { href={participant.url} target="_blank" rel="noopener noreferrer" - className="text-xs md:text-sm font-mono text-center tracking-widest uppercase text-foreground-lighter hover:text-brand-link transition-colors" + className="text-xs md:text-sm font-mono text-center tracking-widest uppercase text-foreground-lighter hover:text-brand transition-colors" > {participant.company} diff --git a/apps/www/styles/globals.css b/apps/www/styles/globals.css index b2893a73bf4..0eb58785337 100644 --- a/apps/www/styles/globals.css +++ b/apps/www/styles/globals.css @@ -260,7 +260,7 @@ h6:not(.overwrite) { } .heading-gradient-brand { - @apply text-[#3ECF8E00] bg-clip-text bg-linear-to-b from-brand to-brand/80; + @apply text-[#3ECF8E00] bg-clip-text bg-linear-to-b from-brand-default to-brand-default/80; } .toc-animate { diff --git a/packages/config/css/theme.css b/packages/config/css/theme.css index e83273b4b1b..553f69c935c 100644 --- a/packages/config/css/theme.css +++ b/packages/config/css/theme.css @@ -74,8 +74,9 @@ --color-brand-400: hsl(var(--brand-400)); --color-brand-500: hsl(var(--brand-500)); --color-brand-600: hsl(var(--brand-600)); - --color-brand: hsl(var(--brand-default)); - --color-brand-link: hsl(var(--brand-link)); + /* text-brand uses accessible --primary; fills use brand-default. */ + --color-brand: var(--primary); + --color-brand-default: hsl(var(--brand-default)); --color-_secondary-200: hsl(var(--secondary-200)); --color-_secondary-400: hsl(var(--secondary-400)); --color-_secondary: hsl(var(--secondary-default)); @@ -332,7 +333,7 @@ --color-border-destructive: var(--border-destructive); --color-border-warning: var(--border-warning); --color-border-info: var(--border-info); - --color-border-brand: var(--border-brand); + --color-border-brand-default: var(--border-brand-default); /* * This will generate colors only for border utilities * i.e. bg-muted and they'll only have border-color: var(--border-muted) rule diff --git a/packages/dev-tools/DevToolbar.tsx b/packages/dev-tools/DevToolbar.tsx index eccace58905..287ad47549e 100644 --- a/packages/dev-tools/DevToolbar.tsx +++ b/packages/dev-tools/DevToolbar.tsx @@ -85,7 +85,7 @@ function EventRow({ event }: { event: DevTelemetryEvent }) { {disclaimer && ( -
    +

    {children}

    , diff --git a/packages/marketing/src/go/sections/HeroSection.tsx b/packages/marketing/src/go/sections/HeroSection.tsx index 9a641dd063e..791c991e675 100644 --- a/packages/marketing/src/go/sections/HeroSection.tsx +++ b/packages/marketing/src/go/sections/HeroSection.tsx @@ -33,7 +33,7 @@ export default function HeroSection({ >
    {section.subtitle && ( -

    +

    {section.subtitle}

    )} diff --git a/packages/marketing/src/go/sections/TextBodySection.tsx b/packages/marketing/src/go/sections/TextBodySection.tsx index 6b0fceb75e6..3fe1e58e69a 100644 --- a/packages/marketing/src/go/sections/TextBodySection.tsx +++ b/packages/marketing/src/go/sections/TextBodySection.tsx @@ -37,7 +37,7 @@ const components: Components = { export default function TextBodySection({ section }: { section: GoTextBodySection }) { return ( -
    +
    {section.content}
    ) diff --git a/packages/ui-patterns/src/Admonition/Admonition.tsx b/packages/ui-patterns/src/Admonition/Admonition.tsx index 7d341971247..a7f3f6ba2ab 100644 --- a/packages/ui-patterns/src/Admonition/Admonition.tsx +++ b/packages/ui-patterns/src/Admonition/Admonition.tsx @@ -51,7 +51,7 @@ export const Admonition = forwardRef< 'overflow-hidden text-sm leading-normal', layout === 'responsive' && '@container', type === 'success' && [ - 'bg-brand-400/15 dark:bg-brand/10', + 'bg-brand-400/15 dark:bg-brand-default/10', 'border-brand-400 dark:border-brand-500', ], className diff --git a/packages/ui-patterns/src/Admonition/AdmonitionIcons.tsx b/packages/ui-patterns/src/Admonition/AdmonitionIcons.tsx index 9fb01f60895..e2dee6783e9 100644 --- a/packages/ui-patterns/src/Admonition/AdmonitionIcons.tsx +++ b/packages/ui-patterns/src/Admonition/AdmonitionIcons.tsx @@ -14,7 +14,7 @@ type IconVisual = 'default' | 'warning' | 'destructive' | 'success' const ICON_BADGE_CLASS: Record = { default: 'text-background bg-foreground-muted', - success: 'text-white dark:text-brand-link bg-brand dark:bg-brand-500/50', + success: 'text-white dark:text-brand bg-brand-default dark:bg-brand-500/50', warning: 'text-warning-200 bg-warning-600', destructive: 'text-destructive-200 bg-destructive-600', } diff --git a/packages/ui-patterns/src/Chart/index.tsx b/packages/ui-patterns/src/Chart/index.tsx index 6ede284c26c..e6237fc8b29 100644 --- a/packages/ui-patterns/src/Chart/index.tsx +++ b/packages/ui-patterns/src/Chart/index.tsx @@ -269,7 +269,7 @@ const ChartMetric = React.forwardRef( { color: '#bf79db', }, 'hljs-string': { - color: `hsl(var(--brand-link))`, + color: 'var(--primary)', }, 'hljs-bullet': { color: '#3ECF8E', diff --git a/packages/ui-patterns/src/ComputeBadge/index.tsx b/packages/ui-patterns/src/ComputeBadge/index.tsx index 71cdda04a7a..fde989f06e8 100644 --- a/packages/ui-patterns/src/ComputeBadge/index.tsx +++ b/packages/ui-patterns/src/ComputeBadge/index.tsx @@ -29,12 +29,12 @@ export function ComputeBadge({ infraComputeSize, className, icon, ...props }: Co ? 'bg-surface-75 group-data-[state=open]:bg-surface-75/20 text-foreground-light border border-strong' : smallCompute ? 'bg-surface-75/50 group-data-[state=open]:bg-surface-75/75 text-foreground-light border border-strong' - : 'bg-brand/10 group-data-[state=open]:bg-brand/20 text-brand-600 border border-brand-500', + : 'bg-brand-default/10 group-data-[state=open]:bg-brand-default/20 text-brand-600 border border-brand-500', // Hover card interaction styles 'group-data-[state=open]:ring-2', smallCompute ? 'group-data-[state=open]:ring-foreground-muted/20' - : 'group-data-[state=open]:ring-brand/20', + : 'group-data-[state=open]:ring-brand-default/20', className )} {...props} diff --git a/packages/ui-patterns/src/GlassPanel/index.tsx b/packages/ui-patterns/src/GlassPanel/index.tsx index 75251a6bdcd..d4c62473863 100644 --- a/packages/ui-patterns/src/GlassPanel/index.tsx +++ b/packages/ui-patterns/src/GlassPanel/index.tsx @@ -148,7 +148,7 @@ export const GlassPanel = ({
    {children && {children}} - {showLink && Learn more} + {showLink && Learn more}
    ) diff --git a/packages/ui-patterns/src/McpUrlBuilder/components/InstructionBlocks.tsx b/packages/ui-patterns/src/McpUrlBuilder/components/InstructionBlocks.tsx index 8709f2e6adf..31ab7eff76f 100644 --- a/packages/ui-patterns/src/McpUrlBuilder/components/InstructionBlocks.tsx +++ b/packages/ui-patterns/src/McpUrlBuilder/components/InstructionBlocks.tsx @@ -61,7 +61,7 @@ function reactRenderers(onCopy: (type?: McpOnCopyCallback) => void): Renderers { href={node.url} target="_blank" rel="noopener noreferrer" - className="text-brand-link hover:underline" + className="text-brand hover:underline" > {children}     diff --git a/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationDisplay.tsx b/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationDisplay.tsx index 0a8feb04d6f..ef3fa0d8e3b 100644 --- a/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationDisplay.tsx +++ b/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationDisplay.tsx @@ -106,7 +106,7 @@ export function McpConfigurationDisplay({ href={selectedClient.docsUrl} target="_blank" rel="noopener noreferrer" - className="text-brand-link hover:underline inline-flex items-center" + className="text-brand hover:underline inline-flex items-center" > View setup guide @@ -117,7 +117,7 @@ export function McpConfigurationDisplay({ href={selectedClient.externalDocsUrl} target="_blank" rel="noopener noreferrer" - className="text-brand-link hover:underline inline-flex items-center" + className="text-brand hover:underline inline-flex items-center" > View {selectedClient.label} docs diff --git a/packages/ui-patterns/src/Toc/toc.tsx b/packages/ui-patterns/src/Toc/toc.tsx index 442b2d3963d..2aa299244c9 100644 --- a/packages/ui-patterns/src/Toc/toc.tsx +++ b/packages/ui-patterns/src/Toc/toc.tsx @@ -131,7 +131,7 @@ function TOCItem({ item }: { item: TOCItemType }) { = 4 && 'ps-8' diff --git a/packages/ui/build/css/source/semantic.css b/packages/ui/build/css/source/semantic.css index 4e9f65d9f09..fd148cce386 100644 --- a/packages/ui/build/css/source/semantic.css +++ b/packages/ui/build/css/source/semantic.css @@ -14,10 +14,10 @@ * theme can run, say, a cool-gray surface against the green brand: * --surface-hue tints backgrounds, text and borders (the neutral ramp) * --primary-hue is the brand hue that --primary is built from - * Both default to --hue (Supabase green ≈159° in OKLCH), so a theme that only + * Both default to --hue (Supabase green ≈157.5° in OKLCH), so a theme that only * sets --hue keeps surfaces and brand locked together as before; override * either one to let them diverge. */ - --hue: 159; + --hue: 157.5; --surface-hue: var(--hue); --primary-hue: var(--hue); /* Root defaults mirror the dark theme (the app's default appearance). */ @@ -104,7 +104,7 @@ * (matching the "no additional charge" badge); like the others it pulls a touch * with the brand --primary-hue but clamps so it always reads violet. */ - --brand-hue-reference: 159; + --brand-hue-reference: 157.5; --status-hue-pull: 0.15; --warning-hue: clamp( 65, @@ -158,12 +158,8 @@ --popover: oklch(from var(--background) calc(l + var(--elevation-step) * var(--elevation-2)) c h); --popover-foreground: var(--foreground); - /* Primary is the brand-derived accent: a fixed, vivid Supabase green on - --primary-hue, mode-invariant and decoupled from the --chroma knob so it - holds its identity even as neutrals desaturate. NOTE: the `brand` utility - (--color-brand in theme.css) is deliberately NOT this — it maps to the - per-theme --brand-default scale (master behavior) while we resolve how - `brand` is used across the interface. */ + /* Primary is the accessible functional green (text, controls). Bright + expressive fills use brand-default. Light theme overrides --primary for AA text. */ --primary: oklch(0.76 0.15 var(--primary-hue)); --primary-foreground: oklch( min(var(--surface), var(--foreground-lightness)) calc(var(--chroma) * 0.45) var(--primary-hue) @@ -247,7 +243,7 @@ --border-destructive: oklch(from var(--destructive) l c h / 30%); --border-warning: oklch(from var(--warning) l c h / 30%); --border-info: oklch(from var(--info) l c h / 30%); - --border-brand: oklch(from var(--primary) l c h / 30%); + --border-brand-default: oklch(from var(--primary) l c h / 30%); --border: oklch( from var(--foreground) l calc(c * 0.54) h / calc(2% + 20% * var(--contrast-border)) diff --git a/packages/ui/build/css/themes/dark.css b/packages/ui/build/css/themes/dark.css index d8dd2bd5ee0..e09068e135a 100644 --- a/packages/ui/build/css/themes/dark.css +++ b/packages/ui/build/css/themes/dark.css @@ -1,7 +1,7 @@ [data-theme='dark'], .dark { --helpers-os-appearance: Dark; - --hue: 159; + --hue: 157.5; --chroma: 0.005; --surface: 0.19; --elevation-step: 0.025; @@ -22,7 +22,6 @@ --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%; diff --git a/packages/ui/build/css/themes/light.css b/packages/ui/build/css/themes/light.css index 8f8a7e42e71..69c1e35af88 100644 --- a/packages/ui/build/css/themes/light.css +++ b/packages/ui/build/css/themes/light.css @@ -1,7 +1,7 @@ [data-theme='light'], .light { --helpers-os-appearance: Light; - --hue: 159; + --hue: 157.5; --surface-hue: 34; --chroma: 0; /* @@ -16,6 +16,9 @@ --foreground-lightness: 0.1; --muted-foreground-level: 0.65; --tertiary-foreground-level: 0.5; + /* Accessible primary for text/controls (~4.5:1+ on light surfaces). */ + --primary: oklch(0.525 0.12 var(--primary-hue)); + --primary-foreground: oklch(0.99 0.00275 var(--primary-hue)); /* * Expressive fills run darker than the dark-theme anchors so they hold contrast * against the near-white surface (a light amber on white disappears). Lightness @@ -38,7 +41,6 @@ --secondary-default: 247.8deg 100% 70%; --secondary-400: 248.3deg 54.5% 25.9%; --secondary-200: 248deg 53.6% 11%; - --brand-link: 153.4deg 86.5% 27.8%; --brand-default: 152.9deg 60% 52.9%; --brand-600: 156.5deg 86.5% 26.1%; --brand-500: 155.3deg 78.4% 40%; diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx index 55ce1a8c209..90d76a47d68 100644 --- a/packages/ui/src/components/Button/Button.tsx +++ b/packages/ui/src/components/Button/Button.tsx @@ -30,10 +30,10 @@ const buttonVariants = cva( variant: { primary: ` bg-brand-400 dark:bg-brand-500 - hover:bg-brand/80 dark:hover:bg-brand/50 + hover:bg-brand-default/80 dark:hover:bg-brand-default/50 text-foreground - border-brand-500/75 dark:border-brand/30 - hover:border-brand-600 dark:hover:border-brand + border-brand-500/75 dark:border-brand-default/30 + hover:border-brand-600 dark:hover:border-brand-default data-[state=open]:bg-brand-400/80 dark:data-[state=open]:bg-brand-500/80 `, default: ` diff --git a/packages/ui/src/components/Menu/Menu.tsx b/packages/ui/src/components/Menu/Menu.tsx index 9c4b8ff4936..5279c353220 100644 --- a/packages/ui/src/components/Menu/Menu.tsx +++ b/packages/ui/src/components/Menu/Menu.tsx @@ -74,7 +74,8 @@ export const menuItemVariants = cva( { type: 'border', active: true, - className: 'text-foreground-muted border-l border-brand group-hover:border-brand', + className: + 'text-foreground-muted border-l border-brand-default group-hover:border-brand-default', }, { type: 'border', diff --git a/packages/ui/src/components/SuccessCheck.tsx b/packages/ui/src/components/SuccessCheck.tsx index 0658836f6a7..d5a0ac28592 100644 --- a/packages/ui/src/components/SuccessCheck.tsx +++ b/packages/ui/src/components/SuccessCheck.tsx @@ -5,7 +5,7 @@ import { cn } from '../lib/utils' export const SuccessCheck = ({ className }: { className?: string }) => ( diff --git a/packages/ui/src/components/shadcn/ui/badge.tsx b/packages/ui/src/components/shadcn/ui/badge.tsx index e20c873c222..e4cccd61a23 100644 --- a/packages/ui/src/components/shadcn/ui/badge.tsx +++ b/packages/ui/src/components/shadcn/ui/badge.tsx @@ -10,7 +10,7 @@ const badgeVariants = cva( variant: { default: 'bg-surface-75 text-foreground-light border border-strong', warning: 'bg-warning/10 text-warning-600 border border-warning-500', - success: 'bg-brand/10 text-brand-600 border border-brand-500', + success: 'bg-brand-default/10 text-brand-600 border border-brand-500', destructive: 'bg-destructive/10 text-destructive border border-border-destructive', // Secondary is invisible secondary: diff --git a/packages/ui/src/components/shadcn/ui/switch.tsx b/packages/ui/src/components/shadcn/ui/switch.tsx index c453fe9bf45..ad3572774af 100644 --- a/packages/ui/src/components/shadcn/ui/switch.tsx +++ b/packages/ui/src/components/shadcn/ui/switch.tsx @@ -7,7 +7,7 @@ import * as React from 'react' import { cn } from '../../../lib/utils/cn' const switchRootVariants = cva( - 'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border transition-colors focus-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-brand data-[state=checked]:hover:bg-brand-600/90 data-[state=unchecked]:bg-control data-[state=unchecked]:hover:bg-border', + 'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border transition-colors focus-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-brand-default data-[state=checked]:hover:bg-brand-600/90 data-[state=unchecked]:bg-control data-[state=unchecked]:hover:bg-border', { variants: { size: { diff --git a/packages/ui/src/lib/tailwind-demo-classes.ts b/packages/ui/src/lib/tailwind-demo-classes.ts index 44d478dbd1c..278492255d9 100644 --- a/packages/ui/src/lib/tailwind-demo-classes.ts +++ b/packages/ui/src/lib/tailwind-demo-classes.ts @@ -59,8 +59,7 @@ export default { 'bg-brand-400', 'bg-brand-500', 'bg-brand-600', - 'bg-brand', - 'bg-brand-link', + 'bg-brand-default', 'bg-_secondary-200', 'bg-_secondary-400', 'bg-_secondary',