From be9590c890190dd5fd8b8fd7be409653e17425a1 Mon Sep 17 00:00:00 2001 From: Francesco Sansalvadore Date: Thu, 16 Nov 2023 17:41:53 +0100 Subject: [PATCH] Multiple themes management (#18871) * set up multiple themes in studio * set up multiple themes in studio * set up multiple themes in docs and www * update all resolvedTheme to also include deep-dark * update all resolvedTheme checks to also include deep-dark * update tailwind.config.js tokens * update tailwind.config.js tokens * update leftover scale12 token * update if resolvedTheme _doesn't_ include 'dark' * update more styling tokens * add dynamic themes to CmdK * fix nav and footer for multi theme * add data-theme selector output to transformTokens.js * update code-hike.css to target data-theme css * update tailwindcss to ^3.3.5 * ThemeImage with light and dark src for www and docs * add brand-button styling token * update old dark theme boolean * update old dark theme boolean * make homepage product visuals themeable * update product page themed images * update badge green with brand * fix roles list appearance * fix auth widget in auth page * update more dark logic * update more dark logic * add button default bg and border * update pricing page theme styling * clean up Themeimage * remove forceDark in homepage * update dark:border-dark occurrences * update dark:border-dark occurrences * fix dark mode base colors * remove foreground-strong * fix notification badge bg * remove some dark: selectors * update dark: selectors * update code-hike deep dark bg color * fix comment typo * update border-button-hover token * fix customer story logo * remove some more dark: selectors * restore forceDark in www homepage * fix auth react icon * fix homepage product visuals * remove theme * add brand-link token * fix checkbox bg * npm install * more visible EntityListItem active bg * fix --background-alternative-default css vars --------- Co-authored-by: Jonathan Summers-Muir --- apps/docs/components/Frameworks.tsx | 2 +- .../docs/components/GuidesTableOfContents.tsx | 2 +- apps/docs/components/HomePageCover.tsx | 6 +- apps/docs/components/Navigation/Footer.tsx | 2 +- .../NavigationMenuGuideListItems.tsx | 12 +- .../NavigationMenuRefListItems.tsx | 2 +- .../Navigation/NavigationMenu/TopNavBar.tsx | 6 +- apps/docs/components/Navigation/SideBar.tsx | 2 +- apps/docs/components/index.tsx | 3 +- .../reference/ApiOperationSection.tsx | 2 +- apps/docs/layouts/DefaultLayout.tsx | 2 +- apps/docs/layouts/HomeLayout.tsx | 2 +- apps/docs/layouts/SiteLayout.tsx | 6 +- apps/docs/layouts/guides/index.tsx | 2 +- apps/docs/layouts/ref/RefSubLayout.tsx | 4 +- apps/docs/layouts/ref/RefSubLayoutNonFunc.tsx | 4 +- .../docs/layouts/tutorials/TutorialLayout.tsx | 2 +- apps/docs/pages/_app.tsx | 12 +- .../guides/ai/choosing-compute-addon.mdx | 67 +- .../pages/guides/ai/engineering-for-scale.mdx | 39 +- .../ai/examples/building-chatgpt-plugins.mdx | 15 +- apps/docs/pages/guides/ai/going-to-prod.mdx | 56 +- .../guides/ai/vector-indexes/hnsw-indexes.mdx | 15 +- .../docs/pages/guides/database/partitions.mdx | 9 +- .../guides/platform/org-based-billing.mdx | 27 +- .../guides/platform/project-transfer.mdx | 26 +- apps/docs/pages/index.mdx | 6 +- .../components/header/RLSBannerWarning.tsx | 4 +- .../Account/Preferences/ThemeSettings.tsx | 16 +- .../PolicyEditor/PolicyEditorFooter.tsx | 2 +- .../interfaces/Auth/Policies/PolicyReview.tsx | 2 +- .../PolicyTemplates/TemplatesList.tsx | 2 +- .../Auth/Policies/PolicyTemplates/index.tsx | 4 +- .../Payment/AddNewPaymentMethodModal.tsx | 2 +- .../Database/Backups/BackupItem.tsx | 2 +- .../Database/Extensions/ExtensionCard.tsx | 4 +- .../Database/Functions/CreateFunction.tsx | 2 +- .../interfaces/Database/Roles/RolesList.tsx | 2 +- .../Database/Schemas/SchemaGraph.tsx | 9 +- .../Database/Triggers/ChooseFunctionForm.tsx | 4 +- .../Wrappers/WrappersDisabledState.tsx | 7 +- .../interfaces/Docs/ResourceContent.tsx | 2 +- .../interfaces/Home/ExampleProject.tsx | 2 +- .../CostControl/CostControl.tsx | 4 +- .../CostControl/SpendCapSidePanel.tsx | 2 +- .../Subscription/EnterpriseCard.tsx | 2 +- .../Organization/TeamSettings/MembersView.tsx | 10 +- .../Organization/Usage/SectionContent.tsx | 4 +- .../Realtime/Inspector/MessageSelection.tsx | 4 +- .../SelectedRealtimeMessagePanel.tsx | 2 +- .../interfaces/Reports/GridResize.tsx | 2 +- .../components/interfaces/Reports/Reports.tsx | 2 +- .../SQLEditor/AISchemaSuggestionPopover.tsx | 2 +- .../interfaces/SQLEditor/ResultsPane.tsx | 2 +- .../interfaces/SQLEditor/SQLEditor.tsx | 6 +- .../SQLEditor/UtilityPanel/Results.tsx | 2 +- .../UtilityPanel/UtilityTabResults.tsx | 6 +- .../interfaces/Settings/API/JWTSettings.tsx | 2 +- .../interfaces/Settings/Addons/Addons.tsx | 12 +- .../Addons/ComputeInstanceSidePanel.tsx | 4 +- .../Settings/Addons/PITRSidePanel.tsx | 2 +- .../Infrastructure/InfrastructureActivity.tsx | 4 +- .../FunctionLogsSelectionRender.tsx | 2 +- .../interfaces/Settings/Logs/Logs.Divider.tsx | 2 +- .../Settings/Logs/LogsFormatters.tsx | 4 +- .../interfaces/Settings/Vault/VaultToggle.tsx | 7 +- .../DrilldownViewer/DrilldownPane.tsx | 18 +- .../RowEditor/JsonEditor/JsonEditor.tsx | 2 +- .../SpreadSheetFileUpload.tsx | 4 +- .../SidePanelEditor/TableEditor/Column.tsx | 4 +- .../TableGridEditor/TableDefinition.tsx | 2 +- .../layouts/APIAuthorizationLayout.tsx | 2 +- .../components/layouts/BillingLayout.tsx | 2 +- .../LayoutHeader/BreadcrumbsView.tsx | 2 +- .../LayoutHeader/LayoutHeader.tsx | 4 +- .../NotificationsPopover/index.tsx | 2 +- .../NavigationBar/NavigationBar.tsx | 10 +- .../layouts/ProjectLayout/ProductMenuBar.tsx | 2 +- .../SignInLayout/ForgotPasswordLayout.tsx | 2 +- .../layouts/SignInLayout/SignInLayout.tsx | 2 +- .../TableEditorLayout/EntityListItem.tsx | 2 +- .../components/layouts/WizardLayout.tsx | 4 +- .../components/to-be-cleaned/ListIcons.tsx | 2 +- .../StorageExplorer/FileExplorerColumn.tsx | 4 +- .../FileExplorerHeaderSelection.tsx | 2 +- .../StorageExplorer/FileExplorerRow.tsx | 6 +- .../StoragePoliciesBucketRow.js | 2 +- .../StoragePolicies/StoragePoliciesEditor.js | 2 +- .../StoragePolicies/StoragePoliciesReview.js | 2 +- .../to-be-cleaned/TooltipListener.tsx | 2 +- .../ui/CodeEditor/CodeEditor.utils.ts | 13 +- .../components/ui/MultiSelect/Badges.tsx | 4 +- .../components/ui/MultiSelect/index.tsx | 12 +- .../ui/ProjectSettings/DisplayApiSettings.tsx | 2 +- .../ProjectSettings/DisplayConfigSettings.tsx | 2 +- apps/studio/components/ui/TwoOptionToggle.tsx | 2 +- apps/studio/package.json | 2 +- apps/studio/pages/404.tsx | 2 +- apps/studio/pages/500.tsx | 2 +- apps/studio/pages/_app.tsx | 8 +- apps/studio/pages/new/[slug].tsx | 14 +- apps/studio/pages/new/index.tsx | 2 +- apps/studio/pages/org/_/[[...routeSlug]].tsx | 4 +- .../pages/project/[ref]/api/graphiql.tsx | 2 +- .../pages/project/[ref]/editor/[id].tsx | 2 +- .../pages/project/_/[[...routeSlug]].tsx | 4 +- apps/studio/pages/sign-in-fly-tos.tsx | 2 +- apps/studio/pages/support/new.tsx | 2 +- apps/studio/pages/vercel/integrate.tsx | 2 +- apps/studio/styles/grid.scss | 12 +- apps/studio/styles/monaco.scss | 2 +- apps/studio/styles/ui.scss | 6 +- .../_blog/2021-03-25-angels-of-supabase.mdx | 16 +- ...dge-runtime-self-hosted-deno-functions.mdx | 15 +- .../2023-04-13-supabase-auth-sso-pkce.mdx | 32 +- ...05-25-chatgpt-plugins-support-postgres.mdx | 16 +- .../_blog/2023-07-13-pgvector-performance.mdx | 117 +- ...3-fewer-dimensions-are-better-pgvector.mdx | 55 +- .../_blog/2023-08-11-supavisor-1-million.mdx | 101 +- .../2023-08-31-organization-based-billing.mdx | 39 +- ...-06-increase-performance-pgvector-hnsw.mdx | 144 +- ...03-postgres-dynamic-table-partitioning.mdx | 14 +- .../_blog/2023-10-10-pgvector-vs-pinecone.mdx | 60 +- ...abase-is-now-compatible-with-nextjs-14.mdx | 51 +- apps/www/components/Announcement/Badge.tsx | 4 +- .../AuthWidget/AuthWidgetSection.tsx | 97 +- apps/www/components/Blog/BlogHeader.tsx | 2 +- apps/www/components/Blog/BlogListItem.tsx | 7 +- apps/www/components/CTABanner/index.tsx | 7 +- .../components/Carousels/ImageCarousel.tsx | 2 +- .../Carousels/SplitCodeBlockCarousel.tsx | 2 +- apps/www/components/Footer/index.tsx | 14 +- apps/www/components/Globe.tsx | 2 +- .../LaunchWeek/6/PreLaunchTeaser.tsx | 2 +- .../www/components/LaunchWeek/7/BlogLinks.tsx | 4 +- .../7/LaunchSection/Announcement.tsx | 4 +- .../7/LaunchSection/ArticleButton.tsx | 2 +- .../7/LaunchSection/ProductButton.tsx | 2 +- .../7/LaunchSection/ProductButtonListItem.tsx | 2 +- .../7/Releases/components/index.tsx | 6 +- .../LaunchWeek/7/Releases/index.tsx | 6 +- .../LaunchWeek/7/Ticket/TicketNumber.tsx | 2 +- .../LaunchWeek/7/Ticket/TicketProfile.tsx | 2 +- .../8/Releases/components/index.tsx | 2 +- .../LaunchWeek/8/Ticket/TicketNumber.tsx | 2 +- apps/www/components/MagnifiedProducts.tsx | 2 +- apps/www/components/Nav/GitHubButton.tsx | 2 +- apps/www/components/Nav/MenuItem.tsx | 127 +- apps/www/components/Nav/MobileMenu.tsx | 4 +- apps/www/components/Nav/ProductDropdown.tsx | 2 +- apps/www/components/Nav/index.tsx | 21 +- apps/www/components/OpenSource/OSSHero.tsx | 4 +- .../Pricing/ComputePricingModal.tsx | 4 +- .../components/Pricing/PricingAddOnTable.tsx | 2 +- .../components/Pricing/PricingTableRow.tsx | 8 +- apps/www/components/ProductIcon.tsx | 10 +- apps/www/components/Products/AuthVisual.tsx | 202 ++- .../components/Products/DatabaseVisual.tsx | 18 +- .../components/Products/FunctionsVisual.tsx | 289 +++- .../components/Products/RealtimeVisual.tsx | 160 ++- .../Products/VectorAI/CustomersVisual.tsx | 16 +- .../Products/VectorAI/DeployGlobally.tsx | 4 +- .../Products/VectorAI/IntegrationsImage.tsx | 7 +- .../Products/VectorAI/OpenAIImage.tsx | 24 +- .../Products/VectorAI/PGvectorImg.tsx | 28 +- .../VectorAI/SecureAndScalableImg.tsx | 35 +- apps/www/components/Products/VectorVisual.tsx | 17 +- .../Sections/CustomerQuotesSection.tsx | 2 +- .../components/Sections/HighlightCards.tsx | 2 +- .../components/Sections/TimedTabsSection.tsx | 2 +- apps/www/data/BetaPage.js | 12 +- apps/www/layouts/comparison.tsx | 6 +- apps/www/lib/mdx/mdxComponents.tsx | 3 +- apps/www/package.json | 1 - apps/www/pages/404.tsx | 2 +- apps/www/pages/_app.tsx | 7 +- apps/www/pages/auth/Auth.tsx | 42 +- apps/www/pages/beta.tsx | 96 +- apps/www/pages/blog/[slug].tsx | 2 +- apps/www/pages/brand-assets.tsx | 4 +- apps/www/pages/careers/index.tsx | 14 +- apps/www/pages/company.tsx | 6 +- apps/www/pages/customers/[slug].tsx | 6 +- apps/www/pages/database/Database.tsx | 32 +- .../pages/edge-functions/edge-functions.tsx | 28 +- apps/www/pages/launch-week/6/index.tsx | 4 - .../launch-week/7/tickets/[username].tsx | 2 +- .../www/pages/launch-week/7/tickets/index.tsx | 2 +- .../pages/launch-week/tickets/[username].tsx | 4 +- apps/www/pages/launch-week/tickets/index.tsx | 4 +- apps/www/pages/partners/index.tsx | 6 +- apps/www/pages/pricing/index.tsx | 64 +- apps/www/pages/realtime/Realtime.tsx | 28 +- apps/www/pages/storage/Storage.tsx | 33 +- apps/www/public/customers-rss.xml | 9 +- .../public/images/index/products/auth1.svg | 42 - .../public/images/index/products/auth2.svg | 45 - .../public/images/index/products/database.svg | 65 +- .../images/index/products/functions.svg | 120 -- .../public/images/index/products/storage.svg | 39 - .../images/index/products/vector-mobile1.svg | 127 -- .../images/index/products/vector-mobile2.svg | 128 -- .../products/{vector1.svg => vector.svg} | 88 +- .../public/images/index/products/vector2.svg | 118 -- .../images/pricing/addons-compute-hero.png | Bin 67097 -> 527898 bytes .../images/pricing/addons-domains-hero.png | Bin 64113 -> 442261 bytes .../images/pricing/addons-pitr-hero.png | Bin 71037 -> 617813 bytes apps/www/public/images/pricing/spend-cap.png | Bin 133833 -> 845285 bytes apps/www/public/images/pricing/storage.png | Bin 0 -> 845285 bytes apps/www/public/rss.xml | 9 +- apps/www/styles/index.css | 10 +- package-lock.json | 67 +- packages/config/code-hike.scss | 6 +- packages/config/package.json | 8 +- packages/config/tailwind.config.js | 114 +- packages/config/ui.config.js | 4 +- packages/ui/build/css/themes/dark.css | 21 +- packages/ui/build/css/themes/light.css | 23 +- packages/ui/build/css/tw-extend/color.js | 1208 +++++++++-------- packages/ui/index.tsx | 2 + packages/ui/package.json | 2 +- .../components/Accordion/Accordion.module.css | 72 - .../Breadcrumb/Breadcrumb.module.css | 6 +- .../src/components/Button/Button.module.css | 123 +- packages/ui/src/components/Button/Button.tsx | 12 +- .../ui/src/components/Card/Card.module.css | 2 +- .../ui/src/components/CodeBlock/CodeBlock.tsx | 7 +- .../Command/GenerateSQL/GenerateSQL.tsx | 2 +- .../src/components/Command/ThemeOptions.tsx | 41 +- .../src/components/Divider/Divider.module.css | 24 +- .../src/components/GlassPanel/GlassPanel.tsx | 6 +- .../ui/src/components/IconPanel/IconPanel.tsx | 2 +- .../InputNumber/InputNumber.module.css | 2 +- .../Listbox/SelectStyled.module.css | 4 +- .../ui/src/components/Modal/Modal.stories.tsx | 4 +- .../ui/src/components/Radio/Radio.module.css | 2 +- .../src/components/Select/Select.module.css | 2 +- .../ui/src/components/TextLink/TextLink.tsx | 2 +- .../src/components/ThemeImage/ThemeImage.tsx | 33 + .../ui/src/components/ThemeImage/index.ts | 1 + .../components/ThemeProvider/ThemeToggle.tsx | 10 +- .../ui/src/components/ThemeProvider/themes.ts | 10 + .../ui/src/components/Toast/Toast.module.css | 3 +- .../ui/src/components/shadcn/ui/alert.tsx | 2 +- .../ui/src/components/shadcn/ui/badge.tsx | 4 +- packages/ui/src/lib/tailwind-demo-classes.ts | 315 ++--- packages/ui/src/lib/theme/defaultTheme.ts | 15 +- packages/ui/tailwind-theming.md | 40 +- packages/ui/transformTokens.js | 3 +- 249 files changed, 2759 insertions(+), 3155 deletions(-) delete mode 100644 apps/www/public/images/index/products/auth1.svg delete mode 100644 apps/www/public/images/index/products/auth2.svg delete mode 100644 apps/www/public/images/index/products/functions.svg delete mode 100644 apps/www/public/images/index/products/storage.svg delete mode 100644 apps/www/public/images/index/products/vector-mobile1.svg delete mode 100644 apps/www/public/images/index/products/vector-mobile2.svg rename apps/www/public/images/index/products/{vector1.svg => vector.svg} (55%) delete mode 100644 apps/www/public/images/index/products/vector2.svg create mode 100644 apps/www/public/images/pricing/storage.png delete mode 100644 packages/ui/src/components/Accordion/Accordion.module.css create mode 100644 packages/ui/src/components/ThemeImage/ThemeImage.tsx create mode 100644 packages/ui/src/components/ThemeImage/index.ts create mode 100644 packages/ui/src/components/ThemeProvider/themes.ts diff --git a/apps/docs/components/Frameworks.tsx b/apps/docs/components/Frameworks.tsx index 3faf6a2e4e2..11747b2477b 100644 --- a/apps/docs/components/Frameworks.tsx +++ b/apps/docs/components/Frameworks.tsx @@ -110,7 +110,7 @@ const Frameworks = () => { layout="horizontal" to={x.href} title={x.name} - icon={resolvedTheme === 'dark' ? x.logo.dark : x.logo.light} + icon={resolvedTheme?.includes('dark') ? x.logo.dark : x.logo.light} /> ))} diff --git a/apps/docs/components/GuidesTableOfContents.tsx b/apps/docs/components/GuidesTableOfContents.tsx index c337d27c153..eaeb45dcfc5 100644 --- a/apps/docs/components/GuidesTableOfContents.tsx +++ b/apps/docs/components/GuidesTableOfContents.tsx @@ -46,7 +46,7 @@ const GuidesTableOfContents: FC = ({ list }) => {
    • diff --git a/apps/docs/components/HomePageCover.tsx b/apps/docs/components/HomePageCover.tsx index 098e7dd4dd6..c1bc39f7144 100644 --- a/apps/docs/components/HomePageCover.tsx +++ b/apps/docs/components/HomePageCover.tsx @@ -76,7 +76,7 @@ const HomePageCover = (props) => { -

    Getting Started

    +

    Getting Started

    Discover how to set up a database to an app making queries in just a few minutes. @@ -99,12 +99,12 @@ const HomePageCover = (props) => { ) return ( -

    +
    -

    {props.meta?.title}

    +

    {props.meta?.title}

    Learn how to get up and running with Supabase through tutorials, APIs and platform resources. diff --git a/apps/docs/components/Navigation/Footer.tsx b/apps/docs/components/Navigation/Footer.tsx index 389d7d85788..fe7607f8928 100644 --- a/apps/docs/components/Navigation/Footer.tsx +++ b/apps/docs/components/Navigation/Footer.tsx @@ -30,7 +30,7 @@ const Footer = () => (

    {text}

    diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx index 0d908c7610b..a4385ad4162 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx @@ -69,7 +69,7 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any 'cursor-pointer transition text-sm', activeItem ? 'text-brand font-medium' - : 'hover:text-foreground dark:hover:text-foreground-light text-foreground-lighter', + : 'hover:text-foreground text-foreground-lighter', ].join(' ')} parent={props.subItem.parent} > @@ -78,7 +78,7 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any alt={props.subItem.name + router.basePath} src={ `${router.basePath}` + - `${props.subItem.icon}${resolvedTheme !== 'dark' ? '-light' : ''}.svg` + `${props.subItem.icon}${!resolvedTheme?.includes('dark') ? '-light' : ''}.svg` } width={15} height={15} @@ -124,8 +124,8 @@ const ContentLink = React.memo(function ContentLink(props: any) { className={[ 'cursor-pointer transition text-sm', props.url === router.asPath - ? 'text-brand' - : 'hover:text-foreground dark:hover:text-foreground-light text-foreground-lighter', + ? 'text-brand-link' + : 'hover:text-foreground text-foreground-lighter', ].join(' ')} > {props.icon && ( @@ -146,7 +146,7 @@ const Content = (props) => { href={`${menu.parent ?? '/'}`} className={[ 'flex items-center gap-1 text-xs group mb-3', - 'text-base transition-all duration-200 text-brand hover:text-brand-600 hover:cursor-pointer ', + 'text-base transition-all duration-200 text-brand-link hover:text-brand-600 hover:cursor-pointer ', ].join(' ')} >
    @@ -158,7 +158,7 @@ const Content = (props) => { -
    +
    diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx index a02309e0242..1457a35e603 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx @@ -151,7 +151,7 @@ const SideMenuTitle = ({ title }: { title: string }) => { } const Divider = () => { - return
    + return
    } interface NavigationMenuRefListItemsProps { diff --git a/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx b/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx index 191832a2977..5724018ea58 100644 --- a/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx @@ -59,13 +59,15 @@ const TopNavBar: FC = () => { Supabase Logo - DOCS + DOCS
    diff --git a/apps/docs/components/Navigation/SideBar.tsx b/apps/docs/components/Navigation/SideBar.tsx index da98d7bf6b6..e1b957d095e 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 text-sm transition', `${ item.url === asPath - ? 'bg-background text-brand' + ? 'bg-background text-brand-link' : 'text-foreground-light hover:text-foreground' }`, ].join(' ')} diff --git a/apps/docs/components/index.tsx b/apps/docs/components/index.tsx index 97cc9b5e177..bb189eecc0c 100644 --- a/apps/docs/components/index.tsx +++ b/apps/docs/components/index.tsx @@ -32,7 +32,7 @@ import CliGlobalFlagsHandler from '~/components/reference/enrichments/cli/CliGlo import Options from '~/components/Options' import Param from '~/components/Params' -import { Admonition } from 'ui' +import { Admonition, ThemeImage } from 'ui' import { IconMenuJavascript, IconMenuHome, @@ -102,6 +102,7 @@ const components = { {props.children} ), + Image: (props: any) => , RefSubLayout, RefHeaderSection: (props: any) => , CliGlobalFlagsHandler: () => , diff --git a/apps/docs/components/reference/ApiOperationSection.tsx b/apps/docs/components/reference/ApiOperationSection.tsx index 7bfd0013d54..864edd813fc 100644 --- a/apps/docs/components/reference/ApiOperationSection.tsx +++ b/apps/docs/components/reference/ApiOperationSection.tsx @@ -33,7 +33,7 @@ const ApiOperationSection = (props) => { {operation.path}
    -
    +

    {operation.description}

    {/* Path Parameters */} diff --git a/apps/docs/layouts/DefaultLayout.tsx b/apps/docs/layouts/DefaultLayout.tsx index 84e0d959285..b672c43f4a6 100644 --- a/apps/docs/layouts/DefaultLayout.tsx +++ b/apps/docs/layouts/DefaultLayout.tsx @@ -62,7 +62,7 @@ const Layout: FC = (props: Props) => { />
    -
    +

    {props.meta.title}

    {props.children}
    diff --git a/apps/docs/layouts/HomeLayout.tsx b/apps/docs/layouts/HomeLayout.tsx index 84c04a531cc..e535de579e4 100644 --- a/apps/docs/layouts/HomeLayout.tsx +++ b/apps/docs/layouts/HomeLayout.tsx @@ -64,7 +64,7 @@ const HomeLayout: FC = (props: Props) => {
    -
    +
    {props.children}
    diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx index 99602ce8fe8..3ea0911b9ee 100644 --- a/apps/docs/layouts/SiteLayout.tsx +++ b/apps/docs/layouts/SiteLayout.tsx @@ -238,12 +238,14 @@ const HeaderLogo = memo(function HeaderLogo() { Supabase Logo - DOCS + DOCS ) }) diff --git a/apps/docs/layouts/guides/index.tsx b/apps/docs/layouts/guides/index.tsx index 46eb808ccd7..fc0fc87ae40 100644 --- a/apps/docs/layouts/guides/index.tsx +++ b/apps/docs/layouts/guides/index.tsx @@ -121,7 +121,7 @@ const Layout: FC = (props) => { ref={articleRef} className={`${ props.meta?.hide_table_of_contents || !hasTableOfContents ? '' : '' - } prose dark:prose-dark max-w-none`} + } prose max-w-none`} >

    {props.meta.title}

    {props.meta.subtitle && ( diff --git a/apps/docs/layouts/ref/RefSubLayout.tsx b/apps/docs/layouts/ref/RefSubLayout.tsx index a70f12c4a3d..2259a96273a 100644 --- a/apps/docs/layouts/ref/RefSubLayout.tsx +++ b/apps/docs/layouts/ref/RefSubLayout.tsx @@ -65,7 +65,7 @@ const Section: FC> = (props) => {
    @@ -161,7 +161,7 @@ const EducationSection: FC> = ({ return (
    {!hideTitle && } {props.children} diff --git a/apps/docs/layouts/ref/RefSubLayoutNonFunc.tsx b/apps/docs/layouts/ref/RefSubLayoutNonFunc.tsx index 9a5ace6404d..3ae40579e67 100644 --- a/apps/docs/layouts/ref/RefSubLayoutNonFunc.tsx +++ b/apps/docs/layouts/ref/RefSubLayoutNonFunc.tsx @@ -39,9 +39,7 @@ const Section: FC> = (props) => { return (
    = (props: Props) => { >

    Tutorials

    -
    +

    {props.meta.title}

    diff --git a/apps/docs/pages/_app.tsx b/apps/docs/pages/_app.tsx index ebd187658ff..711ad4cf30c 100644 --- a/apps/docs/pages/_app.tsx +++ b/apps/docs/pages/_app.tsx @@ -1,9 +1,6 @@ -import '../../../packages/ui/build/css/themes/dark.css' -import '../../../packages/ui/build/css/themes/light.css' - import '@code-hike/mdx/styles' import 'config/code-hike.scss' -import '../styles/main.scss?v=1.0.0' +import '../styles/main.scss' import '../styles/new-docs.scss' import '../styles/prism-okaidia.scss' @@ -161,12 +158,7 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) { <> - + diff --git a/apps/docs/pages/guides/ai/choosing-compute-addon.mdx b/apps/docs/pages/guides/ai/choosing-compute-addon.mdx index 4909ab5594b..047017f9e98 100644 --- a/apps/docs/pages/guides/ai/choosing-compute-addon.mdx +++ b/apps/docs/pages/guides/ai/choosing-compute-addon.mdx @@ -125,15 +125,12 @@ It is possible to upload more vectors to a single table if Memory allows it (for
    - multi database - multi database
    @@ -263,15 +260,12 @@ For 1,000,000 vectors 40 probes results to accuracy of 0.98. Note that exact val
    - multi database - multi database
    @@ -303,30 +297,24 @@ You can increase the Requests per Second by increasing `m` and `ef_construction`
    - dbpedia embeddings comparing hnsw queries-per-second using different build parameters (light) - dbpedia embeddings comparing hnsw queries-per-second using different build parameters (dark)
    - multi database - multi database
    @@ -339,15 +327,12 @@ Check out more tips and the complete step-by-step guide in [Going to Production We follow techniques outlined in the [ANN Benchmarks](https://github.com/erikbern/ann-benchmarks) methodology. A Python test runner is responsible for uploading the data, creating the index, and running the queries. The pgvector engine is implemented using [vecs](https://github.com/supabase/vecs), a Python client for pgvector.
    - multi database - multi database
    diff --git a/apps/docs/pages/guides/ai/engineering-for-scale.mdx b/apps/docs/pages/guides/ai/engineering-for-scale.mdx index 0c4fff2fb26..c0e02ebe320 100644 --- a/apps/docs/pages/guides/ai/engineering-for-scale.mdx +++ b/apps/docs/pages/guides/ai/engineering-for-scale.mdx @@ -17,15 +17,12 @@ For small workloads, it's typical to store your data in a single database. If you've used [Vecs](/docs/guides/ai/vecs-python-client) to create 3 different collections, you can expose collections to your web or mobile application using [views](/docs/guides/database/tables#views):
    - single database - single database
    @@ -56,15 +53,12 @@ const { data, error } = await supabase As you move into production, we recommend splitting your collections into separate projects. This is because it allows your vector stores to scale independently of your production data. Vectors typically grow faster than operational data, and they have different resource requirements. Running them on separate databases removes the single-point-of-failure.
    - With secondaries - With secondaries
    @@ -143,15 +137,12 @@ const { data, error } = await supabase This diagram provides an example architecture that allows you to access the collections either with our client libraries or using Vecs. You can add as many secondary databases as you need (in this example we only show one):
    - multi database - multi database
    diff --git a/apps/docs/pages/guides/ai/examples/building-chatgpt-plugins.mdx b/apps/docs/pages/guides/ai/examples/building-chatgpt-plugins.mdx index 80d80a6cc65..102ab821c0f 100644 --- a/apps/docs/pages/guides/ai/examples/building-chatgpt-plugins.mdx +++ b/apps/docs/pages/guides/ai/examples/building-chatgpt-plugins.mdx @@ -33,16 +33,13 @@ This plugin requires several steps: We'll be saving the Postgres documentation in Postgres, and ChatGPT will be retrieving the documentation whenever a user asks a question: -diagram reference - -diagram reference ### Step 1: Fork the ChatGPT Retrieval Plugin repository diff --git a/apps/docs/pages/guides/ai/going-to-prod.mdx b/apps/docs/pages/guides/ai/going-to-prod.mdx index a664933b0e3..4c5dd6b304d 100644 --- a/apps/docs/pages/guides/ai/going-to-prod.mdx +++ b/apps/docs/pages/guides/ai/going-to-prod.mdx @@ -31,15 +31,12 @@ On the other hand, if you need to scale your application, you will need to [crea `pgvector` supports two types of indexes: HNSW and IVFFlat. We recommend using [HNSW](/docs/guides/ai/vector-indexes/hnsw-indexes) because of its [performance](https://supabase.com/blog/increase-performance-pgvector-hnsw#hnsw-performance-1536-dimensions) and [robustness against changing data](/docs/guides/ai/vector-indexes/hnsw-indexes#when-should-you-create-hnsw-indexes).
    - dbpedia embeddings comparing ivfflat and hnsw queries-per-second using the 4XL compute addon (light) - dbpedia embeddings comparing ivfflat and hnsw queries-per-second using the 4XL compute addon (dark)
    @@ -56,15 +53,12 @@ Search parameters: - `ef_search` is the size of the dynamic list for the nearest neighbors (used during the search). Increasing `ef_search` will result in better accuracy, but it will also increase the time required to execute a query (40 is the default value).
    - dbpedia embeddings comparing hnsw queries-per-second using different build parameters (light) - dbpedia embeddings comparing hnsw queries-per-second using different build parameters (dark)
    @@ -81,15 +75,12 @@ The values of lists and probes directly affect accuracy and queries per second ( You can find more examples of how `lists` and `probes` constants affect accuracy and QPS in [pgvector 0.4.0 performance](https://supabase.com/blog/pgvector-performance) blogpost.
    - multi database - multi database
    @@ -126,15 +117,12 @@ You can look at our [Choosing Compute Add-on](/docs/guides/ai/choosing-compute-a Or take a look at our [pgvector 0.5.0 performance](https://supabase.com/blog/increase-performance-pgvector-hnsw) and [pgvector 0.4.0 performance](https://supabase.com/blog/pgvector-performance) blog posts to see what pgvector is capable of and how the above technique can be used to achieve the best results.
    - multi database - multi database
    diff --git a/apps/docs/pages/guides/ai/vector-indexes/hnsw-indexes.mdx b/apps/docs/pages/guides/ai/vector-indexes/hnsw-indexes.mdx index 75fb6d336e8..38ffab8acfc 100644 --- a/apps/docs/pages/guides/ai/vector-indexes/hnsw-indexes.mdx +++ b/apps/docs/pages/guides/ai/vector-indexes/hnsw-indexes.mdx @@ -55,15 +55,12 @@ The hierarchical aspect of HNSW builds off of the idea of skip lists. Skip lists are multi-layer linked lists. The bottom layer is a regular linked list connecting an ordered sequence of elements. Each new layer above removes some elements from the underlying layer (based on a fixed probability), producing a sparser subsequence that “skips” over elements.
    - visual of an example skip list (light) - visual of an example skip list (dark)
    diff --git a/apps/docs/pages/guides/database/partitions.mdx b/apps/docs/pages/guides/database/partitions.mdx index 4310de8de36..421d0d6069e 100644 --- a/apps/docs/pages/guides/database/partitions.mdx +++ b/apps/docs/pages/guides/database/partitions.mdx @@ -9,11 +9,12 @@ export const meta = { Table partitioning is a technique that allows you to divide a large table into smaller, more manageable parts called “partitions”.
    - multi database - multi database
    diff --git a/apps/docs/pages/guides/platform/org-based-billing.mdx b/apps/docs/pages/guides/platform/org-based-billing.mdx index 47039ae1dc3..47c97e57b8d 100644 --- a/apps/docs/pages/guides/platform/org-based-billing.mdx +++ b/apps/docs/pages/guides/platform/org-based-billing.mdx @@ -55,15 +55,12 @@ Each plan includes a quota for unified egress, which is applied to your entire o You can see a breakdown of the different types of egress on your [organization usage page](https://supabase.com/dashboard/org/_/usage).
    - Unified Egress - Unified Egress
    @@ -258,15 +255,13 @@ While we will roll out the new billing for all users during the next few weeks, Head over to your [organization billing settings](https://supabase.com/dashboard/org/_/billing) to initiate the migration.
    - Self-Serve migration - Self-Serve migration
    diff --git a/apps/docs/pages/guides/platform/project-transfer.mdx b/apps/docs/pages/guides/platform/project-transfer.mdx index 5c22769294c..d1f5849458d 100644 --- a/apps/docs/pages/guides/platform/project-transfer.mdx +++ b/apps/docs/pages/guides/platform/project-transfer.mdx @@ -9,28 +9,22 @@ export const meta = { With the introduction of [Organization-based Billing](/docs/guides/platform/org-based-billing), we’re adding the ability to freely transfer projects between different organizations. Head to your [projects' general settings](https://supabase.com/dashboard/project/_/settings/general) to initiate a project transfer.
    - Project Transfer: General Settings - Project Transfer: General Settings
    - Project Transfer: Confirmation Modal - Project Transfer: Confirmation Modal
    diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx index 20c5a10dfe8..a6517588d42 100644 --- a/apps/docs/pages/index.mdx +++ b/apps/docs/pages/index.mdx @@ -25,7 +25,7 @@ export const meta = { ## Products
    -
    +
    {products.map((product) => { return ( @@ -42,7 +42,7 @@ export const meta = {
    -
    +
    {/* */} @@ -141,7 +141,7 @@ export const meta = {
    -
    +
    diff --git a/apps/studio/components/grid/components/header/RLSBannerWarning.tsx b/apps/studio/components/grid/components/header/RLSBannerWarning.tsx index 42d84b1b820..5f2bec64e66 100644 --- a/apps/studio/components/grid/components/header/RLSBannerWarning.tsx +++ b/apps/studio/components/grid/components/header/RLSBannerWarning.tsx @@ -46,7 +46,7 @@ export default function RLSBannerWarning() { <> {!isAcknowledged && !rlsEnabled && isPublicTable ? (
    -
    +
    Warning: You are allowing anonymous access to your table.{' '} @@ -59,7 +59,7 @@ export default function RLSBannerWarning() {
    diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatesList.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatesList.tsx index 0480c621719..f1e2d9e0d18 100644 --- a/apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatesList.tsx +++ b/apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatesList.tsx @@ -16,7 +16,7 @@ const TemplatesList = ({ selectedTemplate, setSelectedTemplate = noop, }: TemplatesListProps) => ( -
    +
    -
    +
    -
    +
    This will override any existing code you've written diff --git a/apps/studio/components/interfaces/Billing/Payment/AddNewPaymentMethodModal.tsx b/apps/studio/components/interfaces/Billing/Payment/AddNewPaymentMethodModal.tsx index 6d36f27d246..0041cbb6207 100644 --- a/apps/studio/components/interfaces/Billing/Payment/AddNewPaymentMethodModal.tsx +++ b/apps/studio/components/interfaces/Billing/Payment/AddNewPaymentMethodModal.tsx @@ -90,7 +90,7 @@ const AddNewPaymentMethodModal = ({ const options = { clientSecret: intent ? intent.client_secret : '', - appearance: { theme: resolvedTheme === 'dark' ? 'night' : 'flat', labels: 'floating' }, + appearance: { theme: resolvedTheme?.includes('dark') ? 'night' : 'flat', labels: 'floating' }, } as any const onLocalCancel = () => { diff --git a/apps/studio/components/interfaces/Database/Backups/BackupItem.tsx b/apps/studio/components/interfaces/Database/Backups/BackupItem.tsx index 6023c3f7305..caf9f87166b 100644 --- a/apps/studio/components/interfaces/Database/Backups/BackupItem.tsx +++ b/apps/studio/components/interfaces/Database/Backups/BackupItem.tsx @@ -65,7 +65,7 @@ const BackupItem = ({ index, backup, projectRef, onSelectBackup }: BackupItemPro return (

    {generateBackupName(backup)}

    diff --git a/apps/studio/components/interfaces/Database/Extensions/ExtensionCard.tsx b/apps/studio/components/interfaces/Database/Extensions/ExtensionCard.tsx index 1c87cda9733..29a86b9e75f 100644 --- a/apps/studio/components/interfaces/Database/Extensions/ExtensionCard.tsx +++ b/apps/studio/components/interfaces/Database/Extensions/ExtensionCard.tsx @@ -124,8 +124,8 @@ const ExtensionCard = ({ extension }: ExtensionCardProps) => {
    diff --git a/apps/studio/components/interfaces/Database/Functions/CreateFunction.tsx b/apps/studio/components/interfaces/Database/Functions/CreateFunction.tsx index c628eea69f1..6033b6ca948 100644 --- a/apps/studio/components/interfaces/Database/Functions/CreateFunction.tsx +++ b/apps/studio/components/interfaces/Database/Functions/CreateFunction.tsx @@ -708,7 +708,7 @@ const InputDefinition = observer(({}) => {

    )}
    -
    +
    { diff --git a/apps/studio/components/interfaces/Database/Roles/RolesList.tsx b/apps/studio/components/interfaces/Database/Roles/RolesList.tsx index d2052987a39..1903975301f 100644 --- a/apps/studio/components/interfaces/Database/Roles/RolesList.tsx +++ b/apps/studio/components/interfaces/Database/Roles/RolesList.tsx @@ -120,7 +120,7 @@ const RolesList = ({}) => { value={totalActiveConnections} barClass={ maxConnectionLimit === 0 - ? 'bg-gray-100 dark:bg-gray-600' + ? 'bg-control' : totalActiveConnections > 0.9 * maxConnectionLimit ? 'bg-red-800' : totalActiveConnections > 0.75 * maxConnectionLimit diff --git a/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx b/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx index e4168291b24..10bec6ce186 100644 --- a/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx +++ b/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx @@ -302,12 +302,13 @@ function TableNode({ data, targetPosition, sourcePosition }: NodeProps { const { resolvedTheme } = useTheme() - const backgroundPatternColor = resolvedTheme === 'dark' ? '#2e2e2e' : '#e6e8eb' - const edgeStrokeColor = resolvedTheme === 'dark' ? '#ededed' : '#111318' + const backgroundPatternColor = resolvedTheme?.includes('dark') ? '#2e2e2e' : '#e6e8eb' + const edgeStrokeColor = resolvedTheme?.includes('dark') ? '#ededed' : '#111318' const miniMapNodeColor = '#111318' - const miniMapMaskColor = - resolvedTheme === 'dark' ? 'rgb(17, 19, 24, .8)' : 'rgb(237, 237, 237, .8)' + const miniMapMaskColor = resolvedTheme?.includes('dark') + ? 'rgb(17, 19, 24, .8)' + : 'rgb(237, 237, 237, .8)' const reactFlowInstance = useReactFlow() const nodeTypes = useMemo( diff --git a/apps/studio/components/interfaces/Database/Triggers/ChooseFunctionForm.tsx b/apps/studio/components/interfaces/Database/Triggers/ChooseFunctionForm.tsx index 5765d5007db..3c69498f9cb 100644 --- a/apps/studio/components/interfaces/Database/Triggers/ChooseFunctionForm.tsx +++ b/apps/studio/components/interfaces/Database/Triggers/ChooseFunctionForm.tsx @@ -133,7 +133,7 @@ const SchemaFunctionGroup = observer(({ schema, selectFunction }: SchemaFunction
    schema
    {schema}
    -
    +
    {_functions.map((x) => ( { leaveFrom="transform opacity-100" leaveTo="transform opacity-0" > -
    +
    diff --git a/apps/studio/components/interfaces/Database/Wrappers/WrappersDisabledState.tsx b/apps/studio/components/interfaces/Database/Wrappers/WrappersDisabledState.tsx index b3e79dd603e..5f3216040d8 100644 --- a/apps/studio/components/interfaces/Database/Wrappers/WrappersDisabledState.tsx +++ b/apps/studio/components/interfaces/Database/Wrappers/WrappersDisabledState.tsx @@ -71,10 +71,9 @@ const WrappersDisabledState = () => { style={{ backgroundSize: '45%', backgroundPosition: '105% 40%', - backgroundImage: - resolvedTheme === 'dark' - ? `url("${BASE_PATH}/img/wrappers-dark.png")` - : `url("${BASE_PATH}/img/wrappers-light.png")`, + backgroundImage: resolvedTheme?.includes('dark') + ? `url("${BASE_PATH}/img/wrappers-dark.png")` + : `url("${BASE_PATH}/img/wrappers-light.png")`, }} >
    diff --git a/apps/studio/components/interfaces/Docs/ResourceContent.tsx b/apps/studio/components/interfaces/Docs/ResourceContent.tsx index ff01c1648f4..2f62e56bb22 100644 --- a/apps/studio/components/interfaces/Docs/ResourceContent.tsx +++ b/apps/studio/components/interfaces/Docs/ResourceContent.tsx @@ -44,7 +44,7 @@ const ResourceContent = ({ return ( <>

    - + {resourceId} diff --git a/apps/studio/components/interfaces/Home/ExampleProject.tsx b/apps/studio/components/interfaces/Home/ExampleProject.tsx index 012131b9736..e0387d4b632 100644 --- a/apps/studio/components/interfaces/Home/ExampleProject.tsx +++ b/apps/studio/components/interfaces/Home/ExampleProject.tsx @@ -28,7 +28,7 @@ const ExampleProject = ({ framework, title, description, url }: ExampleProjectPr className="transition-all group-hover:scale-110" src={`${BASE_PATH}/img/libraries/${framework.toLowerCase()}${ ['expo', 'nextjs'].includes(framework.toLowerCase()) - ? resolvedTheme === 'dark' + ? resolvedTheme?.includes('dark') ? '-dark' : '' : '' diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx index bcb2a284f69..3c97f90d9f7 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx @@ -167,10 +167,10 @@ const CostControl = ({}: CostControlProps) => { src={ isUsageBillingEnabled ? `${BASE_PATH}/img/spend-cap-off${ - resolvedTheme === 'dark' ? '' : '--light' + resolvedTheme?.includes('dark') ? '' : '--light' }.png?v=3` : `${BASE_PATH}/img/spend-cap-on${ - resolvedTheme === 'dark' ? '' : '--light' + resolvedTheme?.includes('dark') ? '' : '--light' }.png?v=3` } /> diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/SpendCapSidePanel.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/SpendCapSidePanel.tsx index 33335b51ec7..d5321ab17e3 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/SpendCapSidePanel.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/SpendCapSidePanel.tsx @@ -258,7 +258,7 @@ const SpendCapSidePanel = () => { )} width={160} height={96} - src={resolvedTheme === 'dark' ? option.imageUrl : option.imageUrlLight} + src={resolvedTheme?.includes('dark') ? option.imageUrl : option.imageUrlLight} />

    { {plan.features.map((feature) => (

    • ))} diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx index b6556ac4d49..771ce4d82a4 100644 --- a/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx +++ b/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx @@ -305,10 +305,7 @@ const MembersView = ({ searchString }: MembersViewProps) => { }), ...(searchString.length > 0 && filteredMembers.length === 0 ? [ - +
    @@ -320,10 +317,7 @@ const MembersView = ({ searchString }: MembersViewProps) => { , ] : []), - +

    {searchString ? `${filteredMembers.length} of ` : ''} diff --git a/apps/studio/components/interfaces/Organization/Usage/SectionContent.tsx b/apps/studio/components/interfaces/Organization/Usage/SectionContent.tsx index 553997055f6..a34967d9322 100644 --- a/apps/studio/components/interfaces/Organization/Usage/SectionContent.tsx +++ b/apps/studio/components/interfaces/Organization/Usage/SectionContent.tsx @@ -38,9 +38,7 @@ const SectionContent = ({

    {links && links.length && (
    -

    - More information -

    +

    More information

    {links.map((link) => (
    diff --git a/apps/studio/components/interfaces/Realtime/Inspector/MessageSelection.tsx b/apps/studio/components/interfaces/Realtime/Inspector/MessageSelection.tsx index a690c7448a4..ad437a22520 100644 --- a/apps/studio/components/interfaces/Realtime/Inspector/MessageSelection.tsx +++ b/apps/studio/components/interfaces/Realtime/Inspector/MessageSelection.tsx @@ -33,8 +33,8 @@ const MessageSelection = ({ log, onClose }: MessageSelectionProps) => { log ? 'mt-0 scale-95 opacity-0' : 'mt-8 scale-100 opacity-100' )} > -
    -
    +
    +
    { return ( -
    +
    ) } diff --git a/apps/studio/components/interfaces/Reports/GridResize.tsx b/apps/studio/components/interfaces/Reports/GridResize.tsx index a81806f2778..1d98e938f90 100644 --- a/apps/studio/components/interfaces/Reports/GridResize.tsx +++ b/apps/studio/components/interfaces/Reports/GridResize.tsx @@ -40,7 +40,7 @@ const GridResize = ({ startDate, endDate, interval, editableReport, setEditableR
    {
    {config.layout.length <= 0 ? ( -
    +
    {canUpdateReport ? ( diff --git a/apps/studio/components/interfaces/SQLEditor/AISchemaSuggestionPopover.tsx b/apps/studio/components/interfaces/SQLEditor/AISchemaSuggestionPopover.tsx index b688a2569f2..f0342aaecbb 100644 --- a/apps/studio/components/interfaces/SQLEditor/AISchemaSuggestionPopover.tsx +++ b/apps/studio/components/interfaces/SQLEditor/AISchemaSuggestionPopover.tsx @@ -64,7 +64,7 @@ const AISchemaSuggestionPopover = ({ animate="visible" > -
    +

    diff --git a/apps/studio/components/interfaces/SQLEditor/ResultsPane.tsx b/apps/studio/components/interfaces/SQLEditor/ResultsPane.tsx index bea8ac23280..8769dcd7bf6 100644 --- a/apps/studio/components/interfaces/SQLEditor/ResultsPane.tsx +++ b/apps/studio/components/interfaces/SQLEditor/ResultsPane.tsx @@ -7,7 +7,7 @@ interface ResultsPaneProps { const ResultsPane = ({ results }: ResultsPaneProps) => { if (results.length === 0) { return ( -

    +

    Success. No rows returned.

    ) diff --git a/apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx b/apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx index 1477e147dfc..3660bfb6af3 100644 --- a/apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx +++ b/apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx @@ -595,7 +595,7 @@ const SQLEditor = () => { disabled={isDiffOpen} ref={inputRef} className={cn( - '!p-0 bg-transparent border-transparent text-sm text-brand-600 dark:text-brand placeholder:text-brand-500 focus:!ring-0', + '!p-0 bg-transparent border-transparent text-sm text-brand-600 placeholder:text-brand-500 focus:!ring-0', 'focus-visible:ring-0 focus-visible:ring-offset-0', 'appearance-none outline-none' )} @@ -799,12 +799,12 @@ const SQLEditor = () => { setIsSchemaSuggestionDismissed(true) setIsAISettingsOpen(true) }} - className="text-brand-600 dark:text-brand hover:text-brand-600 transition" + className="text-brand-600 hover:text-brand-600 transition" >

    }> - + {isError ? (
    diff --git a/apps/studio/components/interfaces/Settings/Addons/Addons.tsx b/apps/studio/components/interfaces/Settings/Addons/Addons.tsx index f6d3a3eb83d..e71dec5fc7a 100644 --- a/apps/studio/components/interfaces/Settings/Addons/Addons.tsx +++ b/apps/studio/components/interfaces/Settings/Addons/Addons.tsx @@ -182,10 +182,10 @@ const Addons = () => { src={ computeInstance !== undefined ? `${BASE_PATH}/img/optimized-compute-on${ - resolvedTheme === 'dark' ? '' : '--light' + resolvedTheme?.includes('dark') ? '' : '--light' }.png` : `${BASE_PATH}/img/optimized-compute-off${ - resolvedTheme === 'dark' ? '' : '--light' + resolvedTheme?.includes('dark') ? '' : '--light' }.png` } /> @@ -371,10 +371,10 @@ const Addons = () => { src={ pitr !== undefined ? `${BASE_PATH}/img/pitr-on${ - resolvedTheme === 'dark' ? '' : '--light' + resolvedTheme?.includes('dark') ? '' : '--light' }.png?v=2` : `${BASE_PATH}/img/pitr-off${ - resolvedTheme === 'dark' ? '' : '--light' + resolvedTheme?.includes('dark') ? '' : '--light' }.png?v=2` } /> @@ -466,10 +466,10 @@ const Addons = () => { src={ customDomain !== undefined ? `${BASE_PATH}/img/custom-domain-on${ - resolvedTheme === 'dark' ? '' : '--light' + resolvedTheme?.includes('dark') ? '' : '--light' }.png` : `${BASE_PATH}/img/custom-domain-off${ - resolvedTheme === 'dark' ? '' : '--light' + resolvedTheme?.includes('dark') ? '' : '--light' }.png` } /> diff --git a/apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx b/apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx index e94557a7c2c..d656851c4fd 100644 --- a/apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx +++ b/apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx @@ -248,7 +248,9 @@ const ComputeInstanceSidePanel = () => { )} width={160} height={96} - src={resolvedTheme === 'dark' ? option.imageUrl : option.imageUrlLight} + src={ + resolvedTheme?.includes('dark') ? option.imageUrl : option.imageUrlLight + } />

    { )} width={160} height={96} - src={resolvedTheme === 'dark' ? option.imageUrl : option.imageUrlLight} + src={resolvedTheme?.includes('dark') ? option.imageUrl : option.imageUrlLight} />

    {

    -

    - More information -

    +

    More information

    {attribute.links.map((link) => (
    diff --git a/apps/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/FunctionLogsSelectionRender.tsx b/apps/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/FunctionLogsSelectionRender.tsx index ca1538bdede..d9e4ff82f68 100644 --- a/apps/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/FunctionLogsSelectionRender.tsx +++ b/apps/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/FunctionLogsSelectionRender.tsx @@ -17,7 +17,7 @@ const FunctionLogsSelectionRender = ({ log }: any) => { {log.event_message}
    -
    +
    { return ( -
    +
    ) } diff --git a/apps/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx b/apps/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx index 4e4841d043e..e29b38dc7e9 100644 --- a/apps/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx +++ b/apps/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx @@ -105,9 +105,7 @@ export const ResponseCodeFormatter = ({ value }: any) => { " > - +
    ) diff --git a/apps/studio/components/interfaces/Settings/Vault/VaultToggle.tsx b/apps/studio/components/interfaces/Settings/Vault/VaultToggle.tsx index 7c5efa618a9..8602a632e8c 100644 --- a/apps/studio/components/interfaces/Settings/Vault/VaultToggle.tsx +++ b/apps/studio/components/interfaces/Settings/Vault/VaultToggle.tsx @@ -64,10 +64,9 @@ const VaultToggle = () => { style={{ backgroundSize: isNotAvailable ? '50%' : '40%', backgroundPosition: '100% 24%', - backgroundImage: - resolvedTheme === 'dark' - ? `url("${BASE_PATH}/img/vault-dark.png")` - : `url("${BASE_PATH}/img/vault-light.png")`, + backgroundImage: resolvedTheme?.includes('dark') + ? `url("${BASE_PATH}/img/vault-dark.png")` + : `url("${BASE_PATH}/img/vault-light.png")`, }} >
    diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/DrilldownViewer/DrilldownPane.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/DrilldownViewer/DrilldownPane.tsx index d3b5163dba5..a76928c64f9 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/DrilldownViewer/DrilldownPane.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/DrilldownViewer/DrilldownPane.tsx @@ -13,7 +13,7 @@ interface DrilldownPaneProps { const DrilldownPane = ({ pane, jsonData, activeKey, onSelectKey = noop }: DrilldownPaneProps) => { if (!jsonData) { return ( -
    +

    Invalid JSON

    @@ -23,7 +23,7 @@ const DrilldownPane = ({ pane, jsonData, activeKey, onSelectKey = noop }: Drilld if (Object.keys(jsonData).length === 0) { return ( -
    +

    No data available

    @@ -40,18 +40,18 @@ const DrilldownPane = ({ pane, jsonData, activeKey, onSelectKey = noop }: Drilld ) return ( -
    +
    {keysWithChildren.map((key: string) => (
    onSelectKey(key, pane)} > -

    {key}

    +

    {key}

    @@ -59,12 +59,10 @@ const DrilldownPane = ({ pane, jsonData, activeKey, onSelectKey = noop }: Drilld ))} {keysWithoutChildren.map((key: string) => (
    -

    {key}:

    +

    {key}:

    {isNull(jsonData[key]) diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx index 85675e617c6..ae54aed29b6 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx @@ -100,7 +100,7 @@ const JsonEdit = ({

    {view === 'edit' ? ( -
    +
    {!uploadedFile ? (
    ) : ( -
    +

    {uploadedFile.name}

    diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx index 731a07f64d9..779d40ba2e3 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx @@ -84,7 +84,7 @@ const Column = ({ title={column.name} disabled={hasImportContent} placeholder="column_name" - className={`table-editor-columns-input bg-white dark:bg-transparent lg:gap-0 ${ + className={`table-editor-columns-input bg-surface-100 lg:gap-0 ${ hasImportContent ? 'opacity-50' : '' } rounded-md`} onChange={(event: any) => onUpdateColumn({ name: event.target.value })} @@ -166,7 +166,7 @@ const Column = ({ size="small" value={column.defaultValue ?? ''} disabled={column.format.includes('int') && column.isIdentity} - className={`rounded bg-white dark:bg-transparent lg:gap-0 ${ + className={`rounded bg-surface-100 lg:gap-0 ${ column.format.includes('int') && column.isIdentity ? 'opacity-50' : '' }`} suggestions={suggestions} diff --git a/apps/studio/components/interfaces/TableGridEditor/TableDefinition.tsx b/apps/studio/components/interfaces/TableGridEditor/TableDefinition.tsx index 57a4efd12ec..24f1b77b044 100644 --- a/apps/studio/components/interfaces/TableGridEditor/TableDefinition.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/TableDefinition.tsx @@ -112,7 +112,7 @@ const TableDefinition = ({ id }: TableDefinitionProps) => { Supabase ) => {
    {/* Header */} -
    +
    {breadcrumbs?.length ? breadcrumbs.map((breadcrumb: any) => ( - + - + - + { className={alt ? 'px-1' : ''} icon={ hasNewNotifications ? ( -
    +

    {newNotifications.length}

    diff --git a/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx b/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx index b072b90739d..110cefb84af 100644 --- a/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx +++ b/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx @@ -23,6 +23,8 @@ import { IconSearch, IconSettings, IconUser, + Theme, + themes, useCommandMenu, } from 'ui' @@ -242,9 +244,11 @@ const NavigationBar = () => { setTheme(value) }} > - System - Dark - Light + {themes.map((theme: Theme) => ( + + {theme.name} + + ))} diff --git a/apps/studio/components/layouts/ProjectLayout/ProductMenuBar.tsx b/apps/studio/components/layouts/ProjectLayout/ProductMenuBar.tsx index 7cd3eed3316..ace91838fc7 100644 --- a/apps/studio/components/layouts/ProjectLayout/ProductMenuBar.tsx +++ b/apps/studio/components/layouts/ProjectLayout/ProductMenuBar.tsx @@ -14,7 +14,7 @@ const ProductMenuBar = ({ title, children }: PropsWithChildren

    {title}

    diff --git a/apps/studio/components/layouts/SignInLayout/ForgotPasswordLayout.tsx b/apps/studio/components/layouts/SignInLayout/ForgotPasswordLayout.tsx index cdb7ff7beda..10be4f94b9e 100644 --- a/apps/studio/components/layouts/SignInLayout/ForgotPasswordLayout.tsx +++ b/apps/studio/components/layouts/SignInLayout/ForgotPasswordLayout.tsx @@ -30,7 +30,7 @@ const ForgotPasswordLayout = ({ { let stepNumber = organization ? 1 : project ? 2 : 0 return ( -
    +
    @@ -50,7 +50,7 @@ const Header = ({ organization, project }: WizardLayoutProps) => { Supabase diff --git a/apps/studio/components/to-be-cleaned/ListIcons.tsx b/apps/studio/components/to-be-cleaned/ListIcons.tsx index 28430ead532..026d7548c86 100644 --- a/apps/studio/components/to-be-cleaned/ListIcons.tsx +++ b/apps/studio/components/to-be-cleaned/ListIcons.tsx @@ -15,7 +15,7 @@ export const vercelIcon = ( ) export const databaseIcon = ( -
    +
    {/* event.stopPropagation()} @@ -273,7 +273,7 @@ const FileExplorerColumn = ({

    diff --git a/apps/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeaderSelection.tsx b/apps/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeaderSelection.tsx index b4cc96f3393..ceb23b01f9e 100644 --- a/apps/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeaderSelection.tsx +++ b/apps/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeaderSelection.tsx @@ -13,7 +13,7 @@ const FileExplorerHeaderSelection = () => { } = storageExplorerStore return ( -

    +
    -
    +
    diff --git a/apps/studio/components/to-be-cleaned/TooltipListener.tsx b/apps/studio/components/to-be-cleaned/TooltipListener.tsx index 313344b74ee..7f520660618 100644 --- a/apps/studio/components/to-be-cleaned/TooltipListener.tsx +++ b/apps/studio/components/to-be-cleaned/TooltipListener.tsx @@ -28,7 +28,7 @@ export default function TooltipListener({ const tooltipId = `tooltip-${makeRandomString(5)}` const tooltip = document.createElement('div') tooltip.id = tooltipId - tooltip.className = `tooltips ${position} absolute p-2 m-1 bg-black border border-solid dark:border-dark rounded-lg rounded text-center ${className} z-50` + tooltip.className = `tooltips ${position} absolute p-2 m-1 bg-black border border-solid border-default rounded-lg rounded text-center ${className} z-50` tooltip.innerHTML = `${title} ${renderToString( diff --git a/apps/studio/components/ui/CodeEditor/CodeEditor.utils.ts b/apps/studio/components/ui/CodeEditor/CodeEditor.utils.ts index 02096107f15..e8e14e7ab49 100644 --- a/apps/studio/components/ui/CodeEditor/CodeEditor.utils.ts +++ b/apps/studio/components/ui/CodeEditor/CodeEditor.utils.ts @@ -10,21 +10,22 @@ export const alignEditor = (editor: any) => { } export const getTheme = (theme: string) => { + const isDarkMode = theme.includes('dark') // [TODO] Probably need better theming for light mode return { - base: theme === 'dark' ? 'vs-dark' : 'vs', // can also be vs-dark or hc-black + base: isDarkMode ? 'vs-dark' : 'vs', // can also be vs-dark or hc-black inherit: true, // can also be false to completely replace the builtin rules rules: [ - { background: theme === 'dark' ? '1f1f1f' : 'f0f0f0' }, + { background: isDarkMode ? '1f1f1f' : 'f0f0f0' }, { token: '', - background: theme === 'dark' ? '1f1f1f' : 'f0f0f0', - foreground: theme === 'dark' ? 'd4d4d4' : '444444', + background: isDarkMode ? '1f1f1f' : 'f0f0f0', + foreground: isDarkMode ? 'd4d4d4' : '444444', }, { token: 'string.sql', foreground: '24b47e' }, { token: 'comment', foreground: '666666' }, - { token: 'predefined.sql', foreground: theme === 'dark' ? 'D4D4D4' : '444444' }, + { token: 'predefined.sql', foreground: isDarkMode ? 'D4D4D4' : '444444' }, ], - colors: { 'editor.background': theme === 'dark' ? '#1f1f1f' : '#f0f0f0' }, + colors: { 'editor.background': isDarkMode ? '#1f1f1f' : '#f0f0f0' }, } } diff --git a/apps/studio/components/ui/MultiSelect/Badges.tsx b/apps/studio/components/ui/MultiSelect/Badges.tsx index f4b0deee2f1..f5c425d5a67 100644 --- a/apps/studio/components/ui/MultiSelect/Badges.tsx +++ b/apps/studio/components/ui/MultiSelect/Badges.tsx @@ -3,7 +3,7 @@ import { IconX } from 'ui' export const BadgeDisabled = ({ name }: { name: string }) => (
    (
    handleChange(option)} className={[ - 'text-typography-body-light dark:text-typography-body-dark', + 'text-typography-body-light [[data-theme*=dark]_&]:text-typography-body-dark', 'group flex cursor-pointer items-center justify-between transition', 'space-x-1 rounded bg-transparent p-2 px-4 text-sm hover:bg-overlay-hover', - `${active ? ' dark:bg-green-600 dark:bg-opacity-25' : ''}`, + `${ + active + ? ' [[data-theme*=dark]_&]:bg-green-600 [[data-theme*=dark]_&]:bg-opacity-25' + : '' + }`, ].join(' ')} >
    @@ -240,7 +244,7 @@ export default function MultiSelect({ ) : options.length === 0 ? (
    @@ -260,7 +264,7 @@ export default function MultiSelect({ ) : (
    diff --git a/apps/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx b/apps/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx index fc305589537..9a9dcb701a9 100644 --- a/apps/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx +++ b/apps/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx @@ -77,7 +77,7 @@ const DisplayApiSettings = () => { key={x.api_key} className={ i >= 1 && - 'border-t border-panel-border-interior-light dark:border-panel-border-interior-dark' + 'border-t border-panel-border-interior-light [[data-theme*=dark]_&]:border-panel-border-interior-dark' } > { layout="horizontal" /> - + diff --git a/apps/studio/package.json b/apps/studio/package.json index 105d67f8f70..b9fd15acf26 100644 --- a/apps/studio/package.json +++ b/apps/studio/package.json @@ -160,7 +160,7 @@ "prettier": "^2.8.8", "storybook-dark-mode": "^3.0.1", "superjson": "^1.12.3", - "tailwindcss": "^3.1.8", + "tailwindcss": "^3.3.5", "typescript": "^5.2.2" } } diff --git a/apps/studio/pages/404.tsx b/apps/studio/pages/404.tsx index 7e355ac8469..7a06b07a193 100644 --- a/apps/studio/pages/404.tsx +++ b/apps/studio/pages/404.tsx @@ -25,7 +25,7 @@ const Error404: NextPage = ({}) => { { - + diff --git a/apps/studio/pages/new/[slug].tsx b/apps/studio/pages/new/[slug].tsx index cdc9e1e84ea..afc176cad48 100644 --- a/apps/studio/pages/new/[slug].tsx +++ b/apps/studio/pages/new/[slug].tsx @@ -261,7 +261,7 @@ const Wizard: NextPageWithLayout = () => {

    {projectCreationDisabled ? ( - + ) : ( @@ -269,7 +269,7 @@ const Wizard: NextPageWithLayout = () => { {(organizations?.length ?? 0) > 0 && ( @@ -300,7 +300,7 @@ const Wizard: NextPageWithLayout = () => { { { { )} - + 0} @@ -392,7 +392,7 @@ const Wizard: NextPageWithLayout = () => { /> - + { const options = { clientSecret: intent ? intent.client_secret : '', - appearance: { theme: resolvedTheme === 'dark' ? 'night' : 'flat', labels: 'floating' }, + appearance: { theme: resolvedTheme?.includes('dark') ? 'night' : 'flat', labels: 'floating' }, } as any const loadPaymentForm = async () => { diff --git a/apps/studio/pages/org/_/[[...routeSlug]].tsx b/apps/studio/pages/org/_/[[...routeSlug]].tsx index 88d13fdd576..eacdedd5584 100644 --- a/apps/studio/pages/org/_/[[...routeSlug]].tsx +++ b/apps/studio/pages/org/_/[[...routeSlug]].tsx @@ -11,13 +11,13 @@ import { Button, IconPlus } from 'ui' const Header = () => { return ( -
    +
    Supabase diff --git a/apps/studio/pages/project/[ref]/api/graphiql.tsx b/apps/studio/pages/project/[ref]/api/graphiql.tsx index bd72fde7eed..56ed46bc472 100644 --- a/apps/studio/pages/project/[ref]/api/graphiql.tsx +++ b/apps/studio/pages/project/[ref]/api/graphiql.tsx @@ -19,7 +19,7 @@ const GraphiQLPage: NextPageWithLayout = () => { const { ui, meta } = useStore() const { resolvedTheme } = useTheme() const { ref: projectRef } = useParams() - const currentTheme = resolvedTheme === 'dark' ? 'dark' : 'light' + const currentTheme = resolvedTheme?.includes('dark') ? 'dark' : 'light' const isExtensionsLoading = meta.extensions.isLoading const pgGraphqlExtension = meta.extensions.byId('pg_graphql') diff --git a/apps/studio/pages/project/[ref]/editor/[id].tsx b/apps/studio/pages/project/[ref]/editor/[id].tsx index 2b8704ff696..fd1d5957f7d 100644 --- a/apps/studio/pages/project/[ref]/editor/[id].tsx +++ b/apps/studio/pages/project/[ref]/editor/[id].tsx @@ -21,7 +21,7 @@ const TableEditorPage: NextPageWithLayout = () => { { return ( -
    +
    Supabase diff --git a/apps/studio/pages/sign-in-fly-tos.tsx b/apps/studio/pages/sign-in-fly-tos.tsx index f76071e8e00..509eee18942 100644 --- a/apps/studio/pages/sign-in-fly-tos.tsx +++ b/apps/studio/pages/sign-in-fly-tos.tsx @@ -67,7 +67,7 @@ const SignInFlyTos = () => {
    { className={[ 'min-w-full space-y-12 rounded border bg-panel-body-light shadow-md', `${sentCategory === undefined ? 'py-8' : 'pt-8'}`, - 'dark:border-dark dark:bg-panel-body-dark', + 'border-default', ].join(' ')} > {sentCategory !== undefined ? ( diff --git a/apps/studio/pages/vercel/integrate.tsx b/apps/studio/pages/vercel/integrate.tsx index 1381fb38d64..81a6fec6393 100644 --- a/apps/studio/pages/vercel/integrate.tsx +++ b/apps/studio/pages/vercel/integrate.tsx @@ -277,7 +277,7 @@ const IntegrationProject = observer(() => {

    {name}

    diff --git a/apps/studio/styles/grid.scss b/apps/studio/styles/grid.scss index 3da741adae9..5ff392910c6 100644 --- a/apps/studio/styles/grid.scss +++ b/apps/studio/styles/grid.scss @@ -85,7 +85,7 @@ } .rdg-header-row .rdg-cell p { - @apply text-typography-body-light dark:text-typography-body-dark; + @apply text-typography-body-light [[data-theme*=dark]_&]:text-typography-body-dark; } .rdg-header-row .rdg-cell .react-contextmenu-wrapper { @apply flex h-full items-center px-2 transition duration-100 ease-in-out; @@ -114,8 +114,8 @@ */ .rdg-row { - @apply bg-table-body-light dark:bg-table-body-dark transition-colors; - @apply hover:bg-table-header-light dark:hover:bg-table-header-dark; + @apply bg-table-body-light [[data-theme*=dark]_&]:bg-table-body-dark transition-colors; + @apply hover:bg-table-header-light [[data-theme*=dark]_&]:hover:bg-table-header-dark; } /* edit button */ @@ -174,7 +174,6 @@ } [type='checkbox']:checked { - @apply dark:bg-brand; @apply bg-brand; border-color: transparent; background-size: 100% 100%; @@ -188,8 +187,7 @@ @apply text-brand-600 border-default transition-all; @apply hover:border-brand focus:ring-brand-300 focus:outline-none; - @apply dark:bg-transparent dark:text-white; - @apply dark:hover:border-green-900; + @apply bg-transparent; margin-top: 2px; } @@ -491,7 +489,7 @@ } .sb-grid-column-header__inner svg { - @apply border-brand text-brand dark:border-brand dark:text-brand; + @apply border-brand text-brand; } /* diff --git a/apps/studio/styles/monaco.scss b/apps/studio/styles/monaco.scss index edb6be20dd6..3994d267308 100644 --- a/apps/studio/styles/monaco.scss +++ b/apps/studio/styles/monaco.scss @@ -4,7 +4,7 @@ } .gutter { - @apply bg-gray-100 dark:bg-gray-600; + @apply bg-border-control; cursor: row-resize; } diff --git a/apps/studio/styles/ui.scss b/apps/studio/styles/ui.scss index 07fb71d5fbd..48371a9c57f 100644 --- a/apps/studio/styles/ui.scss +++ b/apps/studio/styles/ui.scss @@ -194,7 +194,7 @@ &--inner-wrapper { background: linear-gradient( 90deg, - hsl(var(--background-alternative)) 50%, + hsl(var(--background-alternative-default)) 50%, hsl(var(--background-surface-100)) 50% ); width: 100%; @@ -359,7 +359,7 @@ .radix-tooltip-arrow { polygon { - @apply fill-background-alternative dark:fill-background-alternative; + @apply fill-background-alternative [[data-theme*=dark]_&]:fill-background-alternative; // fill: #eeeeee; } } @@ -376,7 +376,7 @@ .thin-scrollbars { scrollbar-width: thin; - scrollbar-color: hsl(var(--foreground-muted)) hsl(var(--background-alternative)); + scrollbar-color: hsl(var(--foreground-muted)) hsl(var(--background-alternative-default)); .dark & { scrollbar-color: hsl(var(--foreground-lighter)) hsl(var(--background-surface-100)); diff --git a/apps/www/_blog/2021-03-25-angels-of-supabase.mdx b/apps/www/_blog/2021-03-25-angels-of-supabase.mdx index 8ca82c02c53..2a63d79c01e 100644 --- a/apps/www/_blog/2021-03-25-angels-of-supabase.mdx +++ b/apps/www/_blog/2021-03-25-angels-of-supabase.mdx @@ -30,7 +30,7 @@ So here is our unconventional fundraising announcement, written with a few of th ## Mike Krieger (Instagram) Mike Krieger Supabase @@ -72,7 +72,7 @@ fun side project or exploration and ended up learning something I applied to mor ## Cassidy Williams (Netlify) Cassidy Williams Supabase @@ -116,7 +116,7 @@ Get a calendar you'll actually use and stick to your to-do lists! ## Thorsten Schaeff (Stripe) Thorsten Schaeff Supabase @@ -161,7 +161,7 @@ and I'm certain that it will pay off! ## Brian Douglas (GitHub) Brian Douglas Supabase @@ -202,7 +202,7 @@ learned, so do that. It is also easier to get hired when you already have conten ## Justin Gage (Retool) Justin Gage Supabase @@ -235,7 +235,7 @@ Eh, I can’t really give advice, I haven’t figured anything out myself yet! ## Iheanyi Ekechukwu (PlanetScale) Iheanyi Ekechukwu Supabase @@ -279,7 +279,7 @@ Never settle, never get comfortable, learn as much as you can consistently. ## Zach Waterfield (On Deck) Zach Waterfield Supabase @@ -314,7 +314,7 @@ university peers, OnDeck, Twitter, etc. Focus on building your network, and good ## Shawn Wang (Temporal) Shawn Wang Supabase diff --git a/apps/www/_blog/2023-04-11-edge-runtime-self-hosted-deno-functions.mdx b/apps/www/_blog/2023-04-11-edge-runtime-self-hosted-deno-functions.mdx index cbc327cfb8f..55e91df7a7e 100644 --- a/apps/www/_blog/2023-04-11-edge-runtime-self-hosted-deno-functions.mdx +++ b/apps/www/_blog/2023-04-11-edge-runtime-self-hosted-deno-functions.mdx @@ -101,16 +101,13 @@ You can write a main module to handle all incoming requests. This would look lik User Workers are separate JS contexts (V8 isolates) that can run a given Edge Function. They have a restricted API (for example, they don’t get access to the host machine’s environment variables). You can also control the memory and duration a User Worker can run. -diagram reference - -diagram reference Here’s a simple implementation of a Main Worker that receives a request, then creates a User Worker and passes the handling of request to the worker. diff --git a/apps/www/_blog/2023-04-13-supabase-auth-sso-pkce.mdx b/apps/www/_blog/2023-04-13-supabase-auth-sso-pkce.mdx index 8291abf45b9..cc26b2bb8f4 100644 --- a/apps/www/_blog/2023-04-13-supabase-auth-sso-pkce.mdx +++ b/apps/www/_blog/2023-04-13-supabase-auth-sso-pkce.mdx @@ -89,16 +89,14 @@ Many developers today are using Supabase to build mobile apps, and server-side r When we [launched](https://news.ycombinator.com/item?id=24072051) Supabase Auth, our target was JAMstack developers. In these cases, the protocol used between the user's application and Supabase Auth is known as the [Implicit Grant Flow](https://www.rfc-editor.org/rfc/rfc6749#section-4.2): -diagram reference - -diagram reference As developers built more complex apps, they encountered two problems with this authentication flow: @@ -124,16 +122,14 @@ The PKCE flow introduces a _code verifier_ (a randomly generated secret) and a _ 2. The client sends the _authorization code_ together with the _code verifier_ to obtain the user's session. 3. Supabase Auth checks if the _code verifier_ matches the _code challenge_ sent earlier by computing the hash. This renders a malicious attacker's attempt to intercept the authorization code useless, since they need to know the value of the _code verifier_ as well. -diagram reference - -diagram reference ### Migrating to PKCE on the client diff --git a/apps/www/_blog/2023-05-25-chatgpt-plugins-support-postgres.mdx b/apps/www/_blog/2023-05-25-chatgpt-plugins-support-postgres.mdx index d56450f80d5..b97e1446bf5 100644 --- a/apps/www/_blog/2023-05-25-chatgpt-plugins-support-postgres.mdx +++ b/apps/www/_blog/2023-05-25-chatgpt-plugins-support-postgres.mdx @@ -131,16 +131,14 @@ This will require several steps: 2. Convert the docs into chunks of embedded text and store them in Supabase 3. Run our plugin locally so that we can ask questions about the Postgres docs. -diagram reference - -diagram reference ### Step 1: Fork the ChatGPT Retrieval Plugin repository diff --git a/apps/www/_blog/2023-07-13-pgvector-performance.mdx b/apps/www/_blog/2023-07-13-pgvector-performance.mdx index 4a2df4293a0..3618daf5f62 100644 --- a/apps/www/_blog/2023-07-13-pgvector-performance.mdx +++ b/apps/www/_blog/2023-07-13-pgvector-performance.mdx @@ -43,15 +43,12 @@ The key elements are: - **Pre-warming RAM:** We executed 10,000 to 50,000 “warm-up” queries before each benchmark, matching the number of probes as the benchmark. Additionally, we executed about 1,000 queries with probes ranging from three to ten times the benchmark's probes. Both of these help with RAM utilization.
    - multi database - multi database
    @@ -82,15 +79,12 @@ We also have some useful [benchmarks in our docs](https://supabase.com/docs/guid Let's start with NirantK's results as a baseline:
    - multi database - multi database
    @@ -122,15 +116,12 @@ With the changes above and probes set to 10, pgvector was faster and more accura - QPS (queries per second) of 380
    - multi database - multi database
    @@ -142,15 +133,12 @@ If we increase the probes from 10 to 40, pgvector was not just substantially fas - QPS of 140
    - multi database - multi database
    @@ -165,15 +153,12 @@ The Qdrant benchmark uses “default” configuration and is in not indicative o
    - multi database - multi database
    @@ -186,15 +171,12 @@ Putting it all together, we find that we can predictably scale our database to m With a 64-core, 256 GB server we achieve ~1800 QPS and 0.91 accuracy. This is for pgvector 0.4.0, and we've heard that the latest version (0.4.4) already has significant improvements. We'll release those benchmarks as soon as we have them.
    - multi database - multi database
    @@ -215,15 +197,12 @@ But as our experiment shows, we can improve QPS if we increase `lists` (i.e. wit - 13% of index data = 30 lists
    - multi database - multi database
    @@ -232,15 +211,12 @@ This also has an important caveat: building the index takes longer with more lis So if you can afford an index build time of 1 hour or more, you can go with `lists=5000` (`number of vectors / 200`) or more!
    - multi database - multi database
    @@ -263,15 +239,12 @@ Embeddings created from “real” data are more likely to be clustered together Embeddings generated for similarity search using “real world data” will be more correlated, so the accuracy will be higher as well. You can see the difference in this chart using 10,000 Wikipedia embeddings, vs 10,000 randomly-generated embeddings:
    - multi database - multi database
    diff --git a/apps/www/_blog/2023-08-03-fewer-dimensions-are-better-pgvector.mdx b/apps/www/_blog/2023-08-03-fewer-dimensions-are-better-pgvector.mdx index 004d575eb94..5ed60d8d0a0 100644 --- a/apps/www/_blog/2023-08-03-fewer-dimensions-are-better-pgvector.mdx +++ b/apps/www/_blog/2023-08-03-fewer-dimensions-are-better-pgvector.mdx @@ -73,15 +73,12 @@ What specifically do we gain when we have fewer dimensions? Faster queries and l Take a look at dot product for example:
    - multi database - multi database
    @@ -98,43 +95,37 @@ We compared the performance of `text-embedding-ada-002` from OpenAI (1536 dimens We observed pgvector with `all-MiniLM-L6-v2` outperforming `text-embedding-ada-002` by 78% when holding the accuracy@10 constant at 0.99. This gap increases as you lower the accuracy. Postgres was using just 4GB of RAM with 384d vectors generated by `all-MiniLM-L6-v2` compared to 7.5GB with `text-embedding-ada-002`.
    - multi database - multi database
    - multi database - multi database
    After that, we decided to try the recently published [gte-small](https://huggingface.co/thenlper/gte-small) (also 384 dimensions), and the results were even more astonishing. With `gte-small`, we could set `probes=10` to achieve the same level of `accuracy@10 = 0.99`. Consequently, we observed more than a 200% improvement in queries per second for pgvector with embeddings generated by `gte-small` compared to `all-MiniLM-L6-v2`.
    - multi database - multi database
    diff --git a/apps/www/_blog/2023-08-11-supavisor-1-million.mdx b/apps/www/_blog/2023-08-11-supavisor-1-million.mdx index 8958c431ceb..d80707a356a 100644 --- a/apps/www/_blog/2023-08-11-supavisor-1-million.mdx +++ b/apps/www/_blog/2023-08-11-supavisor-1-million.mdx @@ -77,13 +77,10 @@ With this setup the database is the bottleneck - 20,000 QPS was the maximum this
    chart connections baseline light - chart connections baseline dark
    @@ -101,13 +98,10 @@ The system showed no signs of instability or performance degradation. QPS remain
    chart connections vertical scaling light - chart connections vertical scaling dark
    @@ -116,13 +110,10 @@ We also monitored how the load was distributed over Supavisor instance's cores:
    cpu load vertical scaling light - cpu load vertical scaling dark
    @@ -147,13 +138,10 @@ This setup successfully handled:
    chart connections 1 million light - chart connections 1 million dark
    @@ -165,13 +153,10 @@ Within the cluster:
    cpu load 1 million light - cpu load 1 million dark
    @@ -209,13 +194,10 @@ We found with Supavisor median query duration was less than 2ms. And this includ
    chart query duration for 5k qps light - chart query duration for 5k qps dark
    @@ -232,13 +214,10 @@ We continued to scale up to 20,000QPS to assess the impact on query duration and
    chart query duration for 20k qps light - chart query duration for 20k qps dark
    @@ -310,14 +289,10 @@ We observed an additional 2ms required each query to be executed on the Supaviso chart query duration for 5k qps inserts with supavisor light - chart query duration for 5k qps inserts with supavisor dark
    Fig.1 - Query Duration with Supavisor
    @@ -326,14 +301,10 @@ We observed an additional 2ms required each query to be executed on the Supaviso chart query duration for 5k qps inserts with pgbouncer light - chart query duration for 5k qps inserts with pgbouncer dark
    Fig.2 - Query Duration with PgBouncer
    diff --git a/apps/www/_blog/2023-08-31-organization-based-billing.mdx b/apps/www/_blog/2023-08-31-organization-based-billing.mdx index 42395931a68..3573227581b 100644 --- a/apps/www/_blog/2023-08-31-organization-based-billing.mdx +++ b/apps/www/_blog/2023-08-31-organization-based-billing.mdx @@ -101,15 +101,12 @@ With Project-based billing, you have different quotas for each service. For exam In an effort to provide a more fair egress quota for all users, we are unifying egress to be a single usage-based item. You get a total quota, i.e. 250GB on the Pro plan, that you can use for anything - Storage, Realtime, Auth or Database. You can still see a breakdown of the different types of egress on your organization usage page.
    - Unified Egress - Unified Egress
    @@ -124,15 +121,12 @@ With Organization-based Billing, you receive a single invoice. Launching a new p A [highly requested feature](https://github.com/orgs/supabase/discussions/6681) since we first launched Supabase has been the ability to transfer projects between organizations. This hasn't been possible due to subscriptions being tied to specific projects. We know a lot of users need to transfer projects and are happy to say that Organization-based Billing will finally make this possible without a manual project migration via pgdump or the CLI.
    - Project Transfer Overview - Project Transfer Overview
    @@ -168,15 +162,12 @@ For existing customers, we'll be rolling out Organization-based Billing over the Shortly after the launch, during the first week of September, you'll be able to initiate the migration to Organization-based Billing yourself. Everyone will be migrated to the new billing eventually, this is just a way to speed things up.
    - Self-Serve migration for organization-based billing - Self-Serve migration for organization-based billing
    diff --git a/apps/www/_blog/2023-09-06-increase-performance-pgvector-hnsw.mdx b/apps/www/_blog/2023-09-06-increase-performance-pgvector-hnsw.mdx index 85c4fa8f35f..1565a133588 100644 --- a/apps/www/_blog/2023-09-06-increase-performance-pgvector-hnsw.mdx +++ b/apps/www/_blog/2023-09-06-increase-performance-pgvector-hnsw.mdx @@ -49,15 +49,13 @@ The hierarchical aspect of HNSW builds off of the idea of skip lists. Skip lists are multi-layer linked lists. The bottom layer is a regular linked list connecting an ordered sequence of elements. Each new layer above removes some elements from the underlying layer (based on a fixed probability), producing a sparser subsequence that “skips” over elements.
    - visual of an example skip list (light) - visual of an example skip list (dark)
    @@ -94,15 +92,13 @@ In this test, we used a Supabase project with a large compute add-on (2-core CPU - `ef_construction`: 64
    - wikipedia embeddings comparing ivfflat and hnsw queries-per-second (light) - wikipedia embeddings comparing ivfflat and hnsw queries-per-second (dark)
    @@ -118,30 +114,26 @@ Here we used the Supabase project with a 2XL compute add-on (8-core CPU and 32GB - `ef_construction`: 56
    - dbpedia embeddings comparing ivfflat and hnsw queries-per-second (light) - dbpedia embeddings comparing ivfflat and hnsw queries-per-second (dark)
    When we maintain fixed HNSW build parameters, we can adjust the select query parameter `ef_search` to balance query speed and accuracy. To achieve accuracy@10 of 0.98, we increased it from the default 40 to 100. For accuracy@10 of 0.99, we further raised it to 250. Remarkably, HNSW demonstrated over six times better performance while maintaining the same level of accuracy. With higher accuracy@10 of 0.99 HNSW even outperforms [qdrant](https://nirantk.com/writing/pgvector-vs-qdrant/) on equivalent compute resources.
    - dbpedia embeddings comparing qdrant and hnsw queries-per-second (light) - dbpedia embeddings comparing qdrant and hnsw queries-per-second (dark)
    @@ -150,30 +142,26 @@ When we maintain fixed HNSW build parameters, we can adjust the select query par Performance scales predictably with the size of the database for the HNSW index, just as [it does for the IVFFlat index](https://supabase.com/blog/pgvector-performance#scaling-the-database). The difference in performance between IVFFlat and HNSW remains consistent after a compute upgrade.
    - dbpedia embeddings comparing ivfflat and hnsw queries-per-second using the 4XL compute addon (light) - dbpedia embeddings comparing ivfflat and hnsw queries-per-second using the 4XL compute addon (dark)
    Switching to a 4XL compute add-on (with a 16-core CPU and 64GB of RAM) resulted in a 69% increase in QPS for an accuracy@10 of 0.99 compared to the 2XL instance.
    - dbpedia embeddings comparing hnsw queries-per-second using the 2XL vs 4XL compute addon (light) - dbpedia embeddings comparing hnsw queries-per-second using the 2XL vs 4XL compute addon (dark)
    @@ -189,15 +177,13 @@ We conducted a small experiment to assess the impact of HNSW index parameters on This adjustment enabled us to achieve the same level of accuracy@10 of 0.99 with an `ef_search` = 100 instead of the previous 250, resulting in a 35% increase in QPS.
    - dbpedia embeddings comparing hnsw queries-per-second using different build parameters (light) - dbpedia embeddings comparing hnsw queries-per-second using different build parameters (dark)
    @@ -221,30 +207,26 @@ Below we compare the index build times between v0.4.0 and v0.5.0 for the inner p - `lists = 1000`
    - dbpedia embeddings comparing ivfflat index build time between v0.4.0 and v0.5.0 using 1000 lists (light) - dbpedia embeddings comparing ivfflat index build time between v0.4.0 and v0.5.0 using 1000 lists (dark)
    - `lists = 5000`
    - dbpedia embeddings comparing ivfflat index build time between v0.4.0 and v0.5.0 using 5000 lists (light) - dbpedia embeddings comparing ivfflat index build time between v0.4.0 and v0.5.0 using 5000 lists (dark)
    diff --git a/apps/www/_blog/2023-10-03-postgres-dynamic-table-partitioning.mdx b/apps/www/_blog/2023-10-03-postgres-dynamic-table-partitioning.mdx index 8fcf18d59c0..a757bb9c220 100644 --- a/apps/www/_blog/2023-10-03-postgres-dynamic-table-partitioning.mdx +++ b/apps/www/_blog/2023-10-03-postgres-dynamic-table-partitioning.mdx @@ -105,16 +105,12 @@ In our example below, we will be copying lots of existing chat messages out of o After we have pre-loaded a new child table with copied rows and verified that the rows are valid with a check constraint, then we can **attach** the partition to the parent table with `ATTACH PARTITION ...` command. This will make the new range of child data available for queries on the parent table. -diagram reference - -diagram reference Postgres partitioning became significantly easier in recent versions. Postgres added the new syntax for [Declarative Partitioning](https://www.postgresql.org/docs/current/ddl-partitioning.html#DDL-PARTITIONING-DECLARATIVE) that makes it easy to create new partitions by adding additional details to your `CREATE TABLE` statements: diff --git a/apps/www/_blog/2023-10-10-pgvector-vs-pinecone.mdx b/apps/www/_blog/2023-10-10-pgvector-vs-pinecone.mdx index 0216dcbee9c..5504cb86d37 100644 --- a/apps/www/_blog/2023-10-10-pgvector-vs-pinecone.mdx +++ b/apps/www/_blog/2023-10-10-pgvector-vs-pinecone.mdx @@ -63,15 +63,12 @@ As the index can fit in a single s1.x1 pod ($80/month), we created five addition To match the measured .98 accuracy@10 of Pinecone s1 pods, we set `ef_search=32` for pgvector (HNSW) queries, and observed the following results:
    - visual of an example skip list (light) - visual of an example skip list (dark)
    @@ -80,15 +77,12 @@ The pgvector HNSW index can manage 1185% more queries per second while being $70 Interestingly, we'd often heard that the pgvector IVFFlat was too slow until the HNSW support was introduced. However, even the pgvector IVFFlat index on the same compute exceeds the Pinecone s1 pod and manages 143% more queries per second:
    - visual of an example skip list (light) - visual of an example skip list (dark)
    @@ -99,15 +93,12 @@ With Pinecone p1 pods, we can fit the dbpedia dataset into the index on a single To match the .99 accuracy of Pinecone's p1.x2, we set `ef_search=40` for pgvector (HNSW) queries.
    - visual of an example skip list (light) - visual of an example skip list (dark)
    @@ -120,15 +111,12 @@ This is Pinecone's fastest pod type, but the increased QPS results in an accurac To match Pinecone's .94 accuracy, we set `ef_search=10` for pgvector ([HNSW](https://www.notion.so/Blogpost-pgvector-vs-Pinecone-cost-and-performance-5d5cc429818d45358ba2d3a8a06e1ecf?pvs=21)) queries. In this test, pgvector's accuracy was actually better by 1% with .95 accuracy@10, and it was still significantly faster despite the better accuracy.
    - visual of an example skip list (light) - visual of an example skip list (dark)
    diff --git a/apps/www/_blog/2023-11-01-supabase-is-now-compatible-with-nextjs-14.mdx b/apps/www/_blog/2023-11-01-supabase-is-now-compatible-with-nextjs-14.mdx index 8e966bcd818..19b2c3ab183 100644 --- a/apps/www/_blog/2023-11-01-supabase-is-now-compatible-with-nextjs-14.mdx +++ b/apps/www/_blog/2023-11-01-supabase-is-now-compatible-with-nextjs-14.mdx @@ -16,16 +16,13 @@ thumb: 2023-11-01-supabase-is-now-compatible-with-nextjs-14/nextjs-compatible.pn As part of [Next.js Conf 2023](https://nextjs.org/conf), the team at Vercel released [Next.js 14](https://nextjs.org/blog/next-14). The huge headline feature was... - Tweet from Lee Robinson about Next.js 14 containing no new APIs - light mode version - - Tweet from Lee Robinson about Next.js 14 containing no new APIs - dark mode version @@ -79,16 +76,13 @@ export default async function Page() { Yes, it is! So much so that [Guillermo Rauch](https://twitter.com/rauchg) shouted us out in the keynote!     - Tweet showing Guillermo Rauch mentioning Supabase as one of the companies compatible with the Next.js App Router - light mode version - - Tweet showing Guillermo Rauch mentioning Supabase as one of the companies compatible with the Next.js App Router - dark mode version @@ -186,16 +180,13 @@ Build ~~in a weekend~~ on a Friday night! Scale to millions! As you probably know, we love memes, so we are signing off with one about the least controversial commands coming out of Next.js Conf: - Tweet from Terry Sutton running the `with-supabase` command - light mode version - - Tweet from Terry Sutton running the `with-supabase` commands - dark mode version diff --git a/apps/www/components/Announcement/Badge.tsx b/apps/www/components/Announcement/Badge.tsx index ddde5e57edb..be95d1fd628 100644 --- a/apps/www/components/Announcement/Badge.tsx +++ b/apps/www/components/Announcement/Badge.tsx @@ -51,13 +51,13 @@ const AnnouncementBadge = ({ " > {badge && ( - + {badge} )} {announcement} {hasArrow && ( - + )}
    -
    +
    -
    +
    react icon
    React only. Other frameworks coming soon. @@ -145,7 +145,7 @@ function AuthWidgetSection() { className={[ 'bg-surface-100 border-brand h-10 w-10 rounded-full border-2 transition hover:scale-105', brandColor.brand === 'hsl(var(--brand-default))' - ? ' !bg-brand ring-foreground-muted border-foreground-lighter ring-2 drop-shadow-lg' + ? '!bg-brand ring-border-strong !border-foreground ring-2 ring-offset-2 ring-offset-transparent drop-shadow-lg' : '', ].join(' ')} > @@ -158,9 +158,9 @@ function AuthWidgetSection() { }) } className={[ - 'h-10 w-10 rounded-full border-2 border-orange-900 bg-orange-300 transition hover:scale-105 ', + 'h-10 w-10 rounded-full border-2 border-orange-900 bg-orange-600 transition hover:scale-105', brandColor.brand === 'var(--colors-orange9)' - ? ' ring-foreground-muted border-foreground-lighter !bg-orange-900 ring-2 drop-shadow-lg' + ? 'ring-border-strong !border-foreground !bg-orange-900 ring-2 ring-offset-2 ring-offset-transparent drop-shadow-lg' : '', ].join(' ')} > @@ -173,9 +173,9 @@ function AuthWidgetSection() { }) } className={[ - 'border-crimson-900 bg-crimson-300 h-10 w-10 rounded-full border-2 transition hover:scale-105 ', + 'border-crimson-900 bg-crimson-500 h-10 w-10 rounded-full border-2 transition hover:scale-105', brandColor.brand === 'var(--colors-crimson9)' - ? ' ring-foreground-muted border-foreground-lighter !bg-crimson-900 ring-2 drop-shadow-lg' + ? 'ring-border-strong !border-foreground !bg-crimson-900 ring-2 ring-offset-2 ring-offset-transparent drop-shadow-lg' : '', ].join(' ')} > @@ -188,9 +188,9 @@ function AuthWidgetSection() { }) } className={[ - 'h-10 w-10 rounded-full border-2 border-indigo-900 bg-indigo-300 transition hover:scale-105 ', + 'h-10 w-10 rounded-full border-2 border-indigo-900 bg-indigo-600 transition hover:scale-105', brandColor.brand === 'var(--colors-indigo9)' - ? ' ring-foreground-muted border-foreground-lighter !bg-indigo-900 ring-2 drop-shadow-lg dark:ring-white' + ? 'ring-border-strong !border-foreground !bg-indigo-900 ring-2 ring-offset-2 ring-offset-transparent drop-shadow-lg' : '', ].join(' ')} > @@ -203,26 +203,21 @@ function AuthWidgetSection() { @@ -231,24 +226,19 @@ function AuthWidgetSection() { className={[ 'bg-surface-100 border-default flex h-10 w-10 items-center justify-center rounded-full border transition hover:scale-105', radius === '10px' - ? 'ring-foreground-muted border-foreground-lighter border-2 ring-2' + ? 'ring-border-strong !border-foreground border-2 ring-2 ring-offset-2 ring-offset-transparent' : '', ].join(' ')} > -
    - + -
    -
    - react icon
    @@ -257,24 +247,19 @@ function AuthWidgetSection() { className={[ 'bg-surface-100 border-default flex h-10 w-10 items-center justify-center rounded-full border transition hover:scale-105', radius === '32px' - ? 'ring-foreground-muted border-foreground-lighter border-2 ring-2' + ? 'ring-border-strong !border-foreground border-2 ring-2 ring-offset-2 ring-offset-transparent' : '', ].join(' ')} > -
    - + -
    -
    - react icon
    @@ -287,9 +272,9 @@ function AuthWidgetSection() {
    diff --git a/apps/www/components/Nav/index.tsx b/apps/www/components/Nav/index.tsx index 355340e2fdc..ca22f0b8216 100644 --- a/apps/www/components/Nav/index.tsx +++ b/apps/www/components/Nav/index.tsx @@ -66,6 +66,9 @@ const Nav = () => { return null } + const showDarkLogo = + isLaunchWeekPage || (mounted && resolvedTheme?.includes('dark')!) || isHomePage + return ( <>
    @@ -92,11 +95,7 @@ const Nav = () => { className="block w-auto h-6 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded-sm" > Supabase Logo { {menu.primaryNav.map((menuItem) => menuItem.hasDropdown ? ( - + {menuItem.title} { @@ -173,12 +173,7 @@ const Nav = () => { showLaunchWeekNavMode={showLaunchWeekNavMode} />
    - + diff --git a/apps/www/components/OpenSource/OSSHero.tsx b/apps/www/components/OpenSource/OSSHero.tsx index 713fb8f0421..5a01c5dc79f 100644 --- a/apps/www/components/OpenSource/OSSHero.tsx +++ b/apps/www/components/OpenSource/OSSHero.tsx @@ -20,7 +20,7 @@ const OSSHero = () => ( )} >
    @@ -35,7 +35,7 @@ const HeroGrid = () => { const isSm = useBreakpoint(640) const svgGridOptions = { - color: resolvedTheme === 'dark' ? '#00d4ad' : '#015a42', + color: resolvedTheme?.includes('dark') ? '#00d4ad' : '#015a42', boxWidth: width ? width * 7 : 7500, boxHeight: width ? width * 5 : 6000, xLines: isSm ? 20 : 49, diff --git a/apps/www/components/Pricing/ComputePricingModal.tsx b/apps/www/components/Pricing/ComputePricingModal.tsx index 7bb4d5b4cff..1a5578d73ce 100644 --- a/apps/www/components/Pricing/ComputePricingModal.tsx +++ b/apps/www/components/Pricing/ComputePricingModal.tsx @@ -38,13 +38,13 @@ export default function ComputePricingModal({ showComputeModal, setShowComputeMo
    -
    +
    diff --git a/apps/www/components/Pricing/PricingAddOnTable.tsx b/apps/www/components/Pricing/PricingAddOnTable.tsx index 9575b348122..8ead3af3d88 100644 --- a/apps/www/components/Pricing/PricingAddOnTable.tsx +++ b/apps/www/components/Pricing/PricingAddOnTable.tsx @@ -35,7 +35,7 @@ const PricingAddOnTable = ({ icon, pricing }: PricingAddOnTableProps) => {