From 42fda2cef28a0f77cf526574d6294d484e1d660e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Wed, 19 Jul 2023 12:56:06 +0200
Subject: [PATCH 01/73] chore: remove Supabase auth emails from pricing page

---
 packages/shared-data/pricing.ts | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/packages/shared-data/pricing.ts b/packages/shared-data/pricing.ts
index e339ea72275..5e0d5c1b83a 100644
--- a/packages/shared-data/pricing.ts
+++ b/packages/shared-data/pricing.ts
@@ -204,17 +204,6 @@ export const pricing: Pricing = {
         },
         usage_based: false,
       },
-      {
-        title: 'Supabase Auth emails',
-        tooltips: { main: 'Rate limits do not apply to Custom SMTP' },
-        plans: {
-          free: '30 / hour',
-          pro: '100 / hour',
-          team: '100 / hour',
-          enterprise: 'Contact Us',
-        },
-        usage_based: false,
-      },
       {
         title: 'Single Sign-On (SAML 2.0)',
         plans: {

From 739f3d4a49921c811c154f55736d0955fa119362 Mon Sep 17 00:00:00 2001
From: Bo Lu <lv.patrick@gmail.com>
Date: Tue, 25 Jul 2023 17:34:54 +1000
Subject: [PATCH 02/73] feat(docs): pull docs from external wrappers repo

---
 .../guides/database/extensions/wrappers.mdx   |  13 +-
 .../database/extensions/wrappers/[slug].tsx   | 178 ++++++++++++++++++
 2 files changed, 185 insertions(+), 6 deletions(-)
 create mode 100644 apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx

diff --git a/apps/docs/pages/guides/database/extensions/wrappers.mdx b/apps/docs/pages/guides/database/extensions/wrappers.mdx
index 5d99f88ea08..e19b099c1e3 100644
--- a/apps/docs/pages/guides/database/extensions/wrappers.mdx
+++ b/apps/docs/pages/guides/database/extensions/wrappers.mdx
@@ -60,12 +60,13 @@ A web interface for connecting to external data is coming to Supabase Studio in
 
 ## Integrations
 
-- [Firebase](https://supabase.github.io/wrappers/firebase/)
-- [Stripe](https://supabase.github.io/wrappers/stripe/)
-- [BigQuery](https://supabase.github.io/wrappers/bigquery/)
-- [AWS S3](https://supabase.github.io/wrappers/s3/)
-- Airtable - Coming Soon
-- Clickhouse - Coming Soon
+- [Airtable](/docs/guides/database/extensions/wrappers/airtable)
+- [AWS S3](/docs/guides/database/extensions/wrappers/s3)
+- [BigQuery](/docs/guides/database/extensions/wrappers/bigquery)
+- [ClickHouse](/docs/guides/database/extensions/wrappers/clickhouse)
+- [Firebase](/docs/guides/database/extensions/wrappers/firebase)
+- [Logflare](/docs/guides/database/extensions/wrappers/logflare)
+- [Stripe](/docs/guides/database/extensions/wrappers/stripe)
 
 ## Resources
 
diff --git a/apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx b/apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx
new file mode 100644
index 00000000000..25249cecba4
--- /dev/null
+++ b/apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx
@@ -0,0 +1,178 @@
+import { CodeHikeConfig, remarkCodeHike } from '@code-hike/mdx'
+import { GetStaticPaths, GetStaticProps } from 'next'
+import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
+import { serialize } from 'next-mdx-remote/serialize'
+import { relative } from 'path'
+import rehypeSlug from 'rehype-slug'
+import remarkGfm from 'remark-gfm'
+import codeHikeTheme from 'config/code-hike.theme.json' assert { type: 'json' }
+import components from '~/components'
+import Layout from '~/layouts/DefaultGuideLayout'
+import { UrlTransformFunction, linkTransform } from '~/lib/mdx/plugins/rehypeLinkTransform'
+import remarkMkDocsAdmonition from '~/lib/mdx/plugins/remarkAdmonition'
+import { removeTitle } from '~/lib/mdx/plugins/remarkRemoveTitle'
+
+// We fetch these docs at build time from an external repo
+const org = 'supabase'
+const repo = 'wrappers'
+const branch = 'main'
+const docsDir = 'docs'
+const externalSite = 'https://supabase.github.io/wrappers'
+
+// Each external docs page is mapped to a local page
+const pageMap = [
+  {
+    slug: 'airtable',
+    meta: {
+      title: 'Airtable',
+    },
+    remoteFile: 'airtable.md',
+  },
+  {
+    slug: 's3',
+    meta: {
+      title: 'AWS S3',
+    },
+    remoteFile: 's3.md',
+  },
+  {
+    slug: 'bigquery',
+    meta: {
+      title: 'BigQuery',
+    },
+    remoteFile: 'bigquery.md',
+  },
+  {
+    slug: 'clickhouse',
+    meta: {
+      title: 'ClickHouse',
+    },
+    remoteFile: 'clickhouse.md',
+  },
+  {
+    slug: 'firebase',
+    meta: {
+      title: 'Firebase',
+    },
+    remoteFile: 'firebase.md',
+  },
+  {
+    slug: 'logflare',
+    meta: {
+      title: 'Logflare',
+    },
+    remoteFile: 'logflare.md',
+  },
+  {
+    slug: 'stripe',
+    meta: {
+      title: 'Stripe',
+    },
+    remoteFile: 'stripe.md',
+  },
+]
+
+interface WrappersDocsProps {
+  source: MDXRemoteSerializeResult
+  meta: {
+    title: string
+    description?: string
+  }
+}
+
+export default function WrappersDocs({ source, meta }: WrappersDocsProps) {
+  return (
+    <Layout meta={meta}>
+      <MDXRemote {...source} components={components} />
+    </Layout>
+  )
+}
+
+/**
+ * Fetch markdown from external repo and transform links
+ */
+export const getStaticProps: GetStaticProps<WrappersDocsProps> = async ({ params }) => {
+  const page = pageMap.find(({ slug }) => slug === params.slug)
+
+  if (!page) {
+    throw new Error(`No page mapping found for slug '${params.slug}'`)
+  }
+
+  const { remoteFile, meta } = page
+
+  const response = await fetch(
+    `https://raw.githubusercontent.com/${org}/${repo}/${branch}/${docsDir}/${remoteFile}`
+  )
+
+  const source = await response.text()
+
+  const urlTransform: UrlTransformFunction = (url) => {
+    try {
+      const externalSiteUrl = new URL(externalSite)
+
+      const placeholderHostname = 'placeholder'
+      const { hostname, pathname, hash } = new URL(url, `http://${placeholderHostname}`)
+
+      // Don't modify a url with a FQDN or a url that's only a hash
+      if (hostname !== placeholderHostname || pathname === '/') {
+        return url
+      }
+
+      const relativePage = (
+        pathname.endsWith('.md')
+          ? pathname.replace(/\.md$/, '')
+          : relative(externalSiteUrl.pathname, pathname)
+      ).replace(/^\//, '')
+
+      const page = pageMap.find(({ remoteFile }) => `${relativePage}.md` === remoteFile)
+
+      // If we have a mapping for this page, use the mapped path
+      if (page) {
+        return page.slug + hash
+      }
+
+      // If we don't have this page in our docs, link to original docs
+      return `${externalSite}/${relativePage}${hash}`
+    } catch (err) {
+      console.error('Error transforming markdown URL', err)
+      return url
+    }
+  }
+
+  const codeHikeOptions: CodeHikeConfig = {
+    theme: codeHikeTheme,
+    lineNumbers: true,
+    showCopyButton: true,
+    skipLanguages: [],
+    autoImport: false,
+  }
+
+  const mdxSource = await serialize(source, {
+    scope: {
+      chCodeConfig: codeHikeOptions,
+    },
+    mdxOptions: {
+      remarkPlugins: [
+        remarkGfm,
+        remarkMkDocsAdmonition,
+        [removeTitle, meta.title],
+        [remarkCodeHike, codeHikeOptions],
+      ],
+      rehypePlugins: [[linkTransform, urlTransform], rehypeSlug],
+    },
+  })
+
+  return { props: { source: mdxSource, meta } }
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  return {
+    paths: pageMap.map(({ slug }) => ({
+      params: {
+        slug,
+      },
+    })),
+    fallback: false,
+  }
+}
+

From 5be9633d21eac411c70954e836564965547d2201 Mon Sep 17 00:00:00 2001
From: Bo Lu <lv.patrick@gmail.com>
Date: Tue, 25 Jul 2023 19:41:26 +1000
Subject: [PATCH 03/73] fix: prettier code

---
 apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx b/apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx
index 25249cecba4..9438e14ffce 100644
--- a/apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx
+++ b/apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx
@@ -175,4 +175,3 @@ export const getStaticPaths: GetStaticPaths = async () => {
     fallback: false,
   }
 }
-

From f651c359241cba7b86dcd1b6126d4ef3e8373724 Mon Sep 17 00:00:00 2001
From: Bo Lu <lv.patrick@gmail.com>
Date: Thu, 27 Jul 2023 10:57:31 +1000
Subject: [PATCH 04/73] feat(docs): add emoji support

---
 apps/docs/package.json                        |  1 +
 .../database/extensions/wrappers/[slug].tsx   |  2 ++
 package-lock.json                             | 31 +++++++++++++++++++
 3 files changed, 34 insertions(+)

diff --git a/apps/docs/package.json b/apps/docs/package.json
index 5d79d59dddd..e3710ea9ba6 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -97,6 +97,7 @@
     "remark-admonitions": "^1.2.1",
     "remark-gfm": "^3.0.1",
     "remark-slug": "^7.0.1",
+    "remark-emoji": "^3.1.2",
     "shiki": "^0.11.1",
     "sse.js": "^0.6.1",
     "ui": "*",
diff --git a/apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx b/apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx
index 9438e14ffce..81beffacd4b 100644
--- a/apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx
+++ b/apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx
@@ -5,6 +5,7 @@ import { serialize } from 'next-mdx-remote/serialize'
 import { relative } from 'path'
 import rehypeSlug from 'rehype-slug'
 import remarkGfm from 'remark-gfm'
+import emoji from 'remark-emoji'
 import codeHikeTheme from 'config/code-hike.theme.json' assert { type: 'json' }
 import components from '~/components'
 import Layout from '~/layouts/DefaultGuideLayout'
@@ -155,6 +156,7 @@ export const getStaticProps: GetStaticProps<WrappersDocsProps> = async ({ params
       remarkPlugins: [
         remarkGfm,
         remarkMkDocsAdmonition,
+        emoji,
         [removeTitle, meta.title],
         [remarkCodeHike, codeHikeOptions],
       ],
diff --git a/package-lock.json b/package-lock.json
index 084b2d064df..b2312485765 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -87,6 +87,7 @@
         "rehype-slug": "^5.1.0",
         "remark": "^14.0.2",
         "remark-admonitions": "^1.2.1",
+        "remark-emoji": "^3.1.2",
         "remark-gfm": "^3.0.1",
         "remark-slug": "^7.0.1",
         "shiki": "^0.11.1",
@@ -19846,6 +19847,15 @@
         "node": ">= 4"
       }
     },
+    "node_modules/emoticon": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/emoticon/-/emoticon-4.0.1.tgz",
+      "integrity": "sha512-dqx7eA9YaqyvYtUhJwT4rC1HIp82j5ybS1/vQ42ur+jBe17dJMwZE4+gvL1XadSFfxaPFFGt3Xsw+Y8akThDlw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/encodeurl": {
       "version": "1.0.2",
       "dev": true,
@@ -29421,6 +29431,14 @@
         "node": ">=10.5.0"
       }
     },
+    "node_modules/node-emoji": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz",
+      "integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==",
+      "dependencies": {
+        "lodash": "^4.17.21"
+      }
+    },
     "node_modules/node-fetch": {
       "version": "2.6.11",
       "license": "MIT",
@@ -34211,6 +34229,19 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-emoji": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/remark-emoji/-/remark-emoji-3.1.2.tgz",
+      "integrity": "sha512-QwhAzNk27Ol64uV4z/3n55MKrNz9bhr8wg+mO5aGqIYDS+jUarS1d8Y0ZIeEBVhfGkXj6gGYM+727sOgAPvV/A==",
+      "dependencies": {
+        "emoticon": "^4.0.1",
+        "mdast-util-find-and-replace": "^2.2.2",
+        "node-emoji": "^1.11.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
     "node_modules/remark-external-links": {
       "version": "8.0.0",
       "dev": true,

From b77c020033b1b8e26e8cfc66ac9ccda5207ad3d0 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Sun, 30 Jul 2023 16:58:24 +0800
Subject: [PATCH 05/73] remove `brand` from original color setup

---
 packages/config/ui.config.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/config/ui.config.js b/packages/config/ui.config.js
index be34a9cf667..b9f24c04676 100644
--- a/packages/config/ui.config.js
+++ b/packages/config/ui.config.js
@@ -26,7 +26,7 @@ const excludedRadixColors = [
 
 // generates fixed scales
 // based on the root/light mode version
-const fixedOptions = ['scale', 'scaleA', 'brand']
+const fixedOptions = ['scale', 'scaleA']
 
 function radixColorKeys() {
   let keys = Object.keys(radixUiColors)
@@ -51,7 +51,7 @@ function radixColorKeys() {
 }
 
 function generateColorClasses() {
-  const brandColors = ['brand', 'scale', 'scaleA']
+  const brandColors = ['scale', 'scaleA']
   const colors = [...radixColorKeys(), ...brandColors]
 
   let mappedColors = {}

From ab46d23d588c08f6a1a72c91da4afd5197905c2e Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Sun, 30 Jul 2023 16:58:54 +0800
Subject: [PATCH 06/73] chore: update `brand-900` to `brand`

---
 .../CustomHTMLElements.utils.ts               |   6 +-
 .../docs/components/GuidesTableOfContents.tsx |   2 +-
 apps/docs/components/HomePageCover.tsx        |   2 +-
 apps/docs/components/LinkCard.tsx             |   2 +-
 apps/docs/components/Navigation/Footer.tsx    |   6 +-
 .../NavigationMenu/NavigationMenuCliList.tsx  |   4 +-
 .../NavigationMenuGuideListItems.tsx          |  14 +-
 .../NavigationMenuRefListItems.tsx            |   2 +-
 .../NavigationMenu/TopNavBarRef.tsx           |   2 +-
 apps/docs/components/Navigation/SideBar.tsx   |  10 +-
 apps/docs/components/Pagination.tsx           |   2 +-
 apps/docs/components/TableOfContents.tsx      |   2 +-
 .../reference/CLICommandSection.tsx           |   2 +-
 .../reference/RefFunctionSection.tsx          |   2 +-
 apps/docs/layouts/SiteLayout.tsx              |   2 +-
 apps/docs/layouts/guides/index.tsx            |   2 +-
 .../docs/layouts/tutorials/TutorialLayout.tsx |   4 +-
 apps/docs/pages/index.mdx                     |  10 +-
 apps/docs/pages/reference/cli/config.tsx      |   2 +-
 .../AuthWidget/AuthWidgetSection.tsx          |   4 +-
 apps/www/components/CodeBlock/CodeBlock.tsx   |   2 +-
 apps/www/components/Hero/Hero.tsx             |   2 +-
 .../LaunchWeek/6/HackathonSection.tsx         |   2 +-
 .../7/LaunchSection/ArticleButtonListItem.tsx |   2 +-
 .../7/LaunchSection/ProductButtonListItem.tsx |   2 +-
 .../LaunchWeek/7/LaunchSection/index.tsx      |   6 +-
 .../8/Ticket/TicketCustomizationForm.tsx      |  12 +-
 apps/www/components/MagnifiedProducts.tsx     |   2 +-
 apps/www/components/Nav/Company.tsx           |   2 +-
 apps/www/components/Nav/index.tsx             |  14 +-
 .../components/Partners/PartnerLinkBox.tsx    |   2 +-
 .../Pricing/ComputePricingModal.tsx           |   2 +-
 apps/www/components/ProductIcon.tsx           |   2 +-
 apps/www/components/Quote.tsx                 |   2 +-
 apps/www/components/SOC2RequestForm.tsx       |   2 +-
 apps/www/components/ScrollProgress.tsx        |   2 +-
 .../components/Sections/CommunitySlider.tsx   |   2 +-
 .../Sections/CustomerQuotesSection.tsx        |   2 +-
 .../Sections/ProductHeaderCentered.tsx        |   2 +-
 .../components/Sections/TimedTabsSection.tsx  |   2 +-
 apps/www/data/products/vector/pageData.tsx    |   4 +-
 apps/www/layouts/comparison.tsx               |   2 +-
 apps/www/pages/beta.tsx                       |  63 +++++----
 apps/www/pages/blog/[slug].tsx                |   2 +-
 apps/www/pages/careers/index.tsx              |  12 +-
 apps/www/pages/customers/[slug].tsx           |   4 +-
 .../pages/edge-functions/edge-functions.tsx   |   2 +-
 apps/www/pages/launch-week/6/index.tsx        |  22 ++--
 apps/www/pages/legal/dpa.tsx                  |   2 +-
 apps/www/pages/partners/experts/[slug].tsx    |   6 +-
 .../pages/partners/integrations/[slug].tsx    |   6 +-
 .../www/pages/partners/integrations/index.tsx |   4 +-
 apps/www/pages/pricing/index.tsx              |  16 +--
 apps/www/pages/support.tsx                    |  16 +--
 apps/www/styles/index.css                     |   4 +-
 .../src/components/Button/Button.module.css   |   4 +-
 .../src/components/Command/Command.icons.tsx  |   4 +-
 .../ui/src/components/Command/CommandMenu.tsx |   2 +-
 .../Command/GenerateSQL/SQLOutputActions.tsx  |   4 +-
 .../ui/src/components/Form/Form.stories.tsx   | 122 ++++--------------
 .../src/components/Form/examples/AuthForm.tsx |  12 +-
 .../src/components/GlassPanel/GlassPanel.tsx  |   2 +-
 .../ui/src/components/IconPanel/IconPanel.tsx |  10 +-
 .../ui/src/lib/theme/customThemeExample.ts    |   2 +-
 packages/ui/src/lib/theme/defaultTheme.ts     |  20 +--
 studio/.storybook/preview.css                 |   4 +-
 .../grid/components/header/Header.tsx         |   6 +-
 .../grid/components/header/RefreshButton.tsx  |   2 +-
 .../Auth/AuthProvidersForm/ProviderForm.tsx   |   4 +-
 .../Auth/Policies/PolicySelection.tsx         |   2 +-
 .../interfaces/BillingV2/SpendCapModal.tsx    |   2 +-
 .../Subscription/Tier/EnterpriseCard.tsx      |   6 +-
 .../Subscription/Tier/SubscriptionTier.tsx    |   2 +-
 .../Subscription/Tier/TierUpdateSidePanel.tsx |   6 +-
 .../BillingV2/Usage/Usage.constants.tsx       |   2 +-
 .../Database/Backups/BackupsError.tsx         |   2 +-
 .../Database/Backups/PITR/PITRNotice.tsx      |   2 +-
 .../interfaces/Database/Roles/RoleRow.tsx     |   4 +-
 .../Database/Schemas/SchemaGraph.tsx          |   6 +-
 .../interfaces/Functions/CommandRender.tsx    |   2 +-
 .../EdgeFunctionDetails.tsx                   |   4 +-
 .../Functions/EdgeFunctionsListItem.tsx       |   2 +-
 .../Home/NewProjectPanel/APIKeys.tsx          |   2 +-
 .../Home/NewProjectPanel/NewProjectPanel.tsx  |   2 +-
 .../Organization/AuditLogs/AuditLogs.tsx      |   2 +-
 .../Subscription/EnterpriseCard.tsx           |   6 +-
 .../Subscription/PlanUpdateSidePanel.tsx      |   6 +-
 .../Subscription/Subscription.tsx             |   4 +-
 .../GeneralSettings/GeneralSettings.tsx       |   2 +-
 .../OAuthApps/AuthorizedAppRow.tsx            |   4 +-
 .../Organization/OAuthApps/OAuthAppRow.tsx    |   6 +-
 .../Settings/Addons/CustomDomainSidePanel.tsx |   2 +-
 .../CustomDomainConfig/CustomDomainDelete.tsx |   2 +-
 .../CustomDomainConfig/CustomDomainVerify.tsx |   4 +-
 .../ProjectUpgradeAlert.tsx                   |   4 +-
 .../TransferProjectButton.tsx                 |   4 +-
 .../Settings/Vault/Secrets/SecretRow.tsx      |   4 +-
 .../interfaces/Storage/CreateBucketModal.tsx  |   2 +-
 .../interfaces/Storage/EditBucketModal.tsx    |   2 +-
 .../components/interfaces/Support/Success.tsx |   4 +-
 .../ColumnEditor/ColumnEditor.tsx             |   2 +-
 .../ColumnEditor/ColumnForeignKey.tsx         |   6 +-
 .../ForeignKeySelector/ForeignKeySelector.tsx |   2 +-
 .../ForeignRowSelector/SelectorGrid.tsx       |   2 +-
 .../SpreadSheetFileUpload.tsx                 |   2 +-
 studio/components/layouts/FunctionsLayout.tsx |   2 +-
 .../layouts/ProjectLayout/BuildingState.tsx   |   2 +-
 .../FeedbackDropdown/FeedbackWidget.tsx       |   4 +-
 .../ProjectLayout/ProjectPausedState.tsx      |   2 +-
 .../layouts/ProjectLayout/RestoringState.tsx  |   2 +-
 .../UpgradingState/UpgradingState.tsx         |   2 +-
 .../ui/DisabledWarningDueToIncident.tsx       |   2 +-
 .../components/ui/Logs/LogsExplorerHeader.tsx |   6 +-
 studio/components/ui/PasswordStrengthBar.tsx  |   2 +-
 studio/hooks/misc/useStore.tsx                |   2 +-
 studio/pages/join/index.tsx                   |   2 +-
 studio/pages/new/[slug].tsx                   |   2 +-
 .../[ref]/database/backups/scheduled.tsx      |   2 +-
 .../project/[ref]/logs/explorer/templates.tsx |   2 +-
 .../pages/project/[ref]/reports/database.tsx  |   8 +-
 .../[ref]/reports/query-performance.tsx       |   2 +-
 .../pages/project/[ref]/settings/addons.tsx   |   2 +-
 .../[ref]/settings/billing/invoices.tsx       |   2 +-
 .../[ref]/settings/billing/subscription.tsx   |   2 +-
 .../project/[ref]/settings/infrastructure.tsx |   2 +-
 studio/pages/support/new.tsx                  |   2 +-
 studio/pages/vercel/integrate.tsx             |   2 +-
 studio/styles/code.scss                       |   6 +-
 studio/styles/date-picker.scss                |   6 +-
 studio/styles/grid.scss                       |  10 +-
 studio/styles/react-data-grid-logs.scss       |   4 +-
 studio/styles/ui.scss                         |   6 +-
 132 files changed, 305 insertions(+), 412 deletions(-)

diff --git a/apps/docs/components/CustomHTMLElements/CustomHTMLElements.utils.ts b/apps/docs/components/CustomHTMLElements/CustomHTMLElements.utils.ts
index 844724a5466..337f48b2bbf 100644
--- a/apps/docs/components/CustomHTMLElements/CustomHTMLElements.utils.ts
+++ b/apps/docs/components/CustomHTMLElements/CustomHTMLElements.utils.ts
@@ -89,13 +89,13 @@ export const highlightSelectedNavItem = (id: string) => {
   const navMenuItems = document.querySelectorAll<HTMLAnchorElement>('.function-link-item a')
 
   // find any currently active items and remove them
-  const currentActiveItems = document.querySelectorAll('.function-link-list .text-brand-900')
-  currentActiveItems.forEach((item) => item.classList.remove('text-brand-900'))
+  const currentActiveItems = document.querySelectorAll('.function-link-list .text-brand')
+  currentActiveItems.forEach((item) => item.classList.remove('text-brand'))
 
   // Add active class to the current item
   navMenuItems.forEach((item) => {
     if (item.href.split('/').at(-1) === id) {
-      item.classList.add('text-brand-900')
+      item.classList.add('text-brand')
     }
   })
 }
diff --git a/apps/docs/components/GuidesTableOfContents.tsx b/apps/docs/components/GuidesTableOfContents.tsx
index 9d25121f661..553f3165452 100644
--- a/apps/docs/components/GuidesTableOfContents.tsx
+++ b/apps/docs/components/GuidesTableOfContents.tsx
@@ -46,7 +46,7 @@ const GuidesTableOfContents: FC<Props> = ({ list }) => {
         <li key={`${item.level}-${i}`} className={item.level === 3 ? 'ml-4' : ''}>
           <a
             href={`#${formatSlug(item.link)}`}
-            className="text-scale-1000 hover:text-brand-900 transition-colors"
+            className="text-scale-1000 hover:text-brand transition-colors"
             dangerouslySetInnerHTML={{ __html: formatTOCHeader(removeAnchor(item.text)) }}
           />
         </li>
diff --git a/apps/docs/components/HomePageCover.tsx b/apps/docs/components/HomePageCover.tsx
index e760c411dc3..c45156c09cd 100644
--- a/apps/docs/components/HomePageCover.tsx
+++ b/apps/docs/components/HomePageCover.tsx
@@ -69,7 +69,7 @@ const HomePageCover = (props) => {
         <div className="md:max-w-xs xl:max-w-none">
           <div className="flex items-center gap-3 mb-3">
             <IconBackground>
-              <IconPlay className="text-brand-1100 dark:text-brand-900 w-4" />
+              <IconPlay className="text-brand-1100 dark:text-brand w-4" />
             </IconBackground>
             <h3 className="text-2xl m-0">Getting Started</h3>
           </div>
diff --git a/apps/docs/components/LinkCard.tsx b/apps/docs/components/LinkCard.tsx
index e74ac68384a..6e22200bbda 100644
--- a/apps/docs/components/LinkCard.tsx
+++ b/apps/docs/components/LinkCard.tsx
@@ -14,7 +14,7 @@ export default function LinkCard({
 }) {
   return (
     <Link href={link || '#'}>
-      <a className="border-scale-200 hover:border-brand-900 dark:bg-scale-400 m-4 w-full cursor-pointer rounded-md border p-4 shadow-sm hover:shadow-2xl lg:w-2/5">
+      <a className="border-scale-200 hover:border-brand dark:bg-scale-400 m-4 w-full cursor-pointer rounded-md border p-4 shadow-sm hover:shadow-2xl lg:w-2/5">
         {description ? (
           <>
             <h4 className="m-0 mb-4 p-0 text-base font-semibold">{title}</h4>
diff --git a/apps/docs/components/Navigation/Footer.tsx b/apps/docs/components/Navigation/Footer.tsx
index 32f1b4f73db..6550b0f24ce 100644
--- a/apps/docs/components/Navigation/Footer.tsx
+++ b/apps/docs/components/Navigation/Footer.tsx
@@ -29,11 +29,7 @@ const Footer = () => (
             {Icon && <Icon width={16} height={16} />}
             <p>{text}</p>
             <Link href={url} passHref>
-              <a
-                className="text-brand-900 hover:underline"
-                target="_blank"
-                rel="noreferrer noopener"
-              >
+              <a className="text-brand hover:underline" target="_blank" rel="noreferrer noopener">
                 {ctaLabel}
               </a>
             </Link>
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx
index deb8caf1f17..5821f1de362 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx
@@ -23,7 +23,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {
     return (
       <li key={id} className="function-link-item text-scale-1000 leading-3">
         <Link href={`#${id}`} passHref>
-          <a className="cursor-pointer transition text-scale-1000 text-sm hover:text-brand-900 flex gap-3">
+          <a className="cursor-pointer transition text-scale-1000 text-sm hover:text-brand flex gap-3">
             {icon && <img className="w-3" src={`${router.basePath}${icon}`} />}
             {title}
           </a>
@@ -100,7 +100,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {
           <a
             className={[
               'flex items-center gap-1 text-xs group mb-3',
-              'text-base transition-all duration-200 text-brand-900 hover:text-brand-1200 hover:cursor-pointer ',
+              'text-base transition-all duration-200 text-brand hover:text-brand-1200 hover:cursor-pointer ',
             ].join(' ')}
           >
             <div className="relative w-2">
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
index f264a4112b7..995bc5f6c1c 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
@@ -19,7 +19,7 @@ const HeaderLink = React.memo(function HeaderLink(props: {
       className={[
         ' ',
         !props.title && 'capitalize',
-        props.url === router.pathname ? 'text-brand-900' : 'hover:text-brand-900 text-scale-1200',
+        props.url === router.pathname ? 'text-brand' : 'hover:text-brand text-scale-1200',
       ].join(' ')}
     >
       {props.title ?? props.id}
@@ -68,7 +68,7 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any
               'flex items-center gap-2',
               'cursor-pointer transition text-sm',
               activeItem
-                ? 'text-brand-900 font-medium'
+                ? 'text-brand font-medium'
                 : 'hover:text-scale-1200 dark:hover:text-scale-1100 text-scale-1000',
             ].join(' ')}
             parent={props.subItem.parent}
@@ -97,8 +97,8 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any
                       className={[
                         'cursor-pointer transition text-sm',
                         subSubItem.url === router.pathname
-                          ? 'text-brand-900'
-                          : 'hover:text-brand-900 text-scale-1000',
+                          ? 'text-brand'
+                          : 'hover:text-brand text-scale-1000',
                       ].join(' ')}
                     >
                       {subSubItem.name}
@@ -124,7 +124,7 @@ const ContentLink = React.memo(function ContentLink(props: any) {
           className={[
             'cursor-pointer transition text-sm',
             props.url === router.pathname
-              ? 'text-brand-900'
+              ? 'text-brand'
               : 'hover:text-scale-1200 dark:hover:text-scale-1100 text-scale-1000',
           ].join(' ')}
         >
@@ -152,7 +152,7 @@ const Content = (props) => {
         <a
           className={[
             'flex items-center gap-1 text-xs group mb-3',
-            'text-base transition-all duration-200 text-brand-900 hover:text-brand-1200 hover:cursor-pointer ',
+            'text-base transition-all duration-200 text-brand hover:text-brand-1200 hover:cursor-pointer ',
           ].join(' ')}
         >
           <div className="relative w-2">
@@ -166,7 +166,7 @@ const Content = (props) => {
 
       <Link href={menu.url ?? ''} passHref>
         <a>
-          <div className="flex items-center gap-3 my-3 text-brand-900">
+          <div className="flex items-center gap-3 my-3 text-brand">
             <HomeMenuIconPicker icon={menu.icon} />
             <HeaderLink title={menu.title} url={menu.url} id={id} />
           </div>
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
index a280bf07da6..07e9d7f3363 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
@@ -64,7 +64,7 @@ const FunctionLink = React.memo(function FunctionLink({
         className={cn(
           'cursor-pointer transition text-sm hover:text-scale-1200 gap-3 relative',
           isParent ? 'flex justify-between' : 'leading-3',
-          active ? 'text-brand-900' : 'text-scale-1000'
+          active ? 'text-brand' : 'text-scale-1000'
         )}
       >
         {icon && <Image width={16} height={16} alt={icon} src={`${router.basePath}${icon}`} />}
diff --git a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
index bd080d8e7c9..f8358d3d75d 100644
--- a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
@@ -68,7 +68,7 @@ const TopNavBarRef: FC = () => {
                 height={24}
                 alt="Supabase Logo"
               />
-              <span className="font-mono text-sm font-medium text-brand-900">DOCS</span>
+              <span className="font-mono text-sm font-medium text-brand">DOCS</span>
             </a>
           </Link>
           {/* {router.asPath.includes('/reference/') && <RefSwitcher />} */}
diff --git a/apps/docs/components/Navigation/SideBar.tsx b/apps/docs/components/Navigation/SideBar.tsx
index d679b7c7414..e76fa4954bf 100644
--- a/apps/docs/components/Navigation/SideBar.tsx
+++ b/apps/docs/components/Navigation/SideBar.tsx
@@ -83,7 +83,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
                     'py-1.5 px-5 rounded text-sm transition',
                     `${
                       item.url === asPath
-                        ? 'bg-scale-200 text-brand-900'
+                        ? 'bg-scale-200 text-brand'
                         : 'text-scale-1100 hover:text-scale-1200'
                     }`,
                   ].join(' ')}
@@ -109,7 +109,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
                   size={14}
                   strokeWidth={2}
                 />
-                <span className="text-scale-1200 text-sm group-hover:text-brand-900 transition">
+                <span className="text-scale-1200 text-sm group-hover:text-brand transition">
                   {group.label}
                 </span>
               </Accordion.Trigger>
@@ -124,7 +124,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
                               'py-1.5 px-5 rounded text-sm transition',
                               `${
                                 section.url === asPath
-                                  ? 'bg-scale-200 text-brand-900'
+                                  ? 'bg-scale-200 text-brand'
                                   : 'text-scale-1100 hover:text-scale-1200'
                               }`,
                             ].join(' ')}
@@ -150,7 +150,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
                               size={14}
                               strokeWidth={2}
                             />
-                            <span className="text-scale-1200 text-sm group-hover:text-brand-900 transition">
+                            <span className="text-scale-1200 text-sm group-hover:text-brand transition">
                               {section.name}
                             </span>
                           </Accordion.Trigger>
@@ -164,7 +164,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
                                       'py-1.5 ml-4 px-5 rounded text-sm transition',
                                       `${
                                         item.url === asPath
-                                          ? 'bg-scale-200 text-brand-900'
+                                          ? 'bg-scale-200 text-brand'
                                           : 'text-scale-1100 hover:text-scale-1200'
                                       }`,
                                     ].join(' ')}
diff --git a/apps/docs/components/Pagination.tsx b/apps/docs/components/Pagination.tsx
index 97221d63963..ed6b6e510e5 100644
--- a/apps/docs/components/Pagination.tsx
+++ b/apps/docs/components/Pagination.tsx
@@ -27,7 +27,7 @@ const Pagination = ({ currentPage, totalCount }: { currentPage: number; totalCou
             <Link href={`/discussions?page=${page}`}>
               <a
                 className={`border-scale-600 inline-flex h-8 w-8 items-center justify-center rounded border ${
-                  currentPage === page ? 'bg-brand-900' : 'bg-scale-300'
+                  currentPage === page ? 'bg-brand' : 'bg-scale-300'
                 }`}
               >
                 {page}
diff --git a/apps/docs/components/TableOfContents.tsx b/apps/docs/components/TableOfContents.tsx
index 8be2a831646..297ade47499 100644
--- a/apps/docs/components/TableOfContents.tsx
+++ b/apps/docs/components/TableOfContents.tsx
@@ -69,7 +69,7 @@ const TableOfContents: FC<Props> = ({ toc, video }) => {
               <li key={i} id={item.lvl} style={{ marginLeft: `${(item.lvl - 2) * 1}rem` }}>
                 <a
                   href={`#${formatSlug(item.slug)}`}
-                  className="text-scale-1000 hover:text-brand-900 transition-colors"
+                  className="text-scale-1000 hover:text-brand transition-colors"
                   dangerouslySetInnerHTML={{ __html: formatTOCHeader(removeAnchor(item.content)) }}
                 />
               </li>
diff --git a/apps/docs/components/reference/CLICommandSection.tsx b/apps/docs/components/reference/CLICommandSection.tsx
index 400b3fa7287..792297211de 100644
--- a/apps/docs/components/reference/CLICommandSection.tsx
+++ b/apps/docs/components/reference/CLICommandSection.tsx
@@ -96,7 +96,7 @@ const CliCommandSection = (props) => {
                       </div>
                       <a
                         href={`#${subcommand}`}
-                        className="transition text-scale-1100 hover:text-brand-900"
+                        className="transition text-scale-1100 hover:text-brand"
                       >
                         $ {subcommand.replace(/-/g, ' ')}
                       </a>
diff --git a/apps/docs/components/reference/RefFunctionSection.tsx b/apps/docs/components/reference/RefFunctionSection.tsx
index 2be99d3e0d7..88c06beda04 100644
--- a/apps/docs/components/reference/RefFunctionSection.tsx
+++ b/apps/docs/components/reference/RefFunctionSection.tsx
@@ -174,7 +174,7 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
                                       <div className="bg-scale-300 border rounded prose max-w-none">
                                         <div className="bg-scale-200 px-5 py-2">
                                           <div className="flex gap-2 items-center">
-                                            <div className="text-brand-900">
+                                            <div className="text-brand">
                                               <IconDatabase size={16} />
                                             </div>
                                             <h5 className="text-xs text-scale-1200">
diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx
index 59bead2a64d..94cd0ae0631 100644
--- a/apps/docs/layouts/SiteLayout.tsx
+++ b/apps/docs/layouts/SiteLayout.tsx
@@ -228,7 +228,7 @@ const HeaderLogo = memo(function HeaderLogo() {
           height={24}
           alt="Supabase Logo"
         />
-        <span className="font-mono text-sm font-medium text-brand-900">DOCS</span>
+        <span className="font-mono text-sm font-medium text-brand">DOCS</span>
       </a>
     </Link>
   )
diff --git a/apps/docs/layouts/guides/index.tsx b/apps/docs/layouts/guides/index.tsx
index 1363448853c..130e76e2510 100644
--- a/apps/docs/layouts/guides/index.tsx
+++ b/apps/docs/layouts/guides/index.tsx
@@ -115,7 +115,7 @@ const Layout: FC<Props> = (props) => {
             ].join(' ')}
           >
             {props.meta.breadcrumb && (
-              <p className="text-brand-900 tracking-wider mb-3">{props.meta.breadcrumb}</p>
+              <p className="text-brand tracking-wider mb-3">{props.meta.breadcrumb}</p>
             )}
             <article
               ref={articleRef}
diff --git a/apps/docs/layouts/tutorials/TutorialLayout.tsx b/apps/docs/layouts/tutorials/TutorialLayout.tsx
index 47557e96b1b..3c9877e6761 100644
--- a/apps/docs/layouts/tutorials/TutorialLayout.tsx
+++ b/apps/docs/layouts/tutorials/TutorialLayout.tsx
@@ -61,10 +61,10 @@ const Layout: FC<Props> = (props: Props) => {
         ].join(' ')}
       >
         <div>
-          <p className="text-brand-900 tracking-wider">Tutorials</p>
+          <p className="text-brand tracking-wider">Tutorials</p>
           <article className={['prose dark:prose-dark ', 'max-w-none'].join(' ')}>
             <h1>{props.meta.title}</h1>
-            <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-800 to-brand-900 my-16"></div>
+            <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-800 to-brand my-16"></div>
 
             <MDXProvider components={components} children={props.children} />
           </article>
diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx
index 8024c9629a4..f76ceb55913 100644
--- a/apps/docs/pages/index.mdx
+++ b/apps/docs/pages/index.mdx
@@ -25,7 +25,7 @@ export const meta = {
       ## Products
     </div>
 
-    <div className="grid grid-cols-12 gap-6 not-prose [&_svg]:text-brand-1100 [&_svg]dark:text-brand-900">
+    <div className="grid grid-cols-12 gap-6 not-prose [&_svg]:text-brand-1100 [&_svg]dark:text-brand">
       {products.map((product) => {
         return (
           <Link href={product.href} key={product.title} passHref>
@@ -44,7 +44,7 @@ export const meta = {
       <div className="col-span-4 flex flex-col gap-1 [&_h2]:m-0 [&_h3]:m-0">
 
         <div className="md:max-w-xs 2xl:max-w-none">
-          <div className="flex items-center gap-3 mb-3 text-brand-1100 dark:text-brand-900">
+          <div className="flex items-center gap-3 mb-3 text-brand-1100 dark:text-brand">
             {/* <IconBackground>
               <HomeMenuIconPicker icon="reference-cli" width={18} height={18} />
             </IconBackground> */}
@@ -89,7 +89,7 @@ export const meta = {
         <TextLink
           label="Explore more resources"
           url="/guides/resources"
-          className="no-underline text-brand-900 text-sm"
+          className="no-underline text-brand text-sm"
         />
       </div>
 
@@ -148,7 +148,7 @@ export const meta = {
     <div className="col-span-4 flex flex-col gap-1 [&_h2]:m-0 [&_h3]:m-0">
 
       <div className="md:max-w-xs 2xl:max-w-none">
-        <div className="flex items-center gap-3 mb-3 text-brand-1100 dark:text-brand-900">
+        <div className="flex items-center gap-3 mb-3 text-brand-1100 dark:text-brand">
           <IconBackground>
             <HomeMenuIconPicker icon="self-hosting" width={18} height={18} />
           </IconBackground>
@@ -160,7 +160,7 @@ export const meta = {
         <TextLink
           label="More on Self-Hosting"
           url="/guides/self-hosting"
-          className="no-underline text-brand-900 text-sm"
+          className="no-underline text-brand text-sm"
         />
       </div>
 
diff --git a/apps/docs/pages/reference/cli/config.tsx b/apps/docs/pages/reference/cli/config.tsx
index 096aa30b6aa..1d7e448b234 100644
--- a/apps/docs/pages/reference/cli/config.tsx
+++ b/apps/docs/pages/reference/cli/config.tsx
@@ -29,7 +29,7 @@ export default function Config() {
         <div className="relative col-span-12 md:col-span-9 transition-all ease-out duration-100">
           <div className="w-full prose">
             <h1 className="">CLI configuration</h1>
-            <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-800 to-brand-900 my-8"></div>
+            <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-800 to-brand my-8"></div>
             <ReactMarkdown>{specFile.info.description}</ReactMarkdown>
             <div>
               {TAGS.map((tag) =>
diff --git a/apps/www/components/AuthWidget/AuthWidgetSection.tsx b/apps/www/components/AuthWidget/AuthWidgetSection.tsx
index f9ee1bbf25a..fe3099cf041 100644
--- a/apps/www/components/AuthWidget/AuthWidgetSection.tsx
+++ b/apps/www/components/AuthWidget/AuthWidgetSection.tsx
@@ -146,9 +146,9 @@ function AuthWidgetSection() {
                       })
                     }
                     className={[
-                      'bg-brand-300 border-brand-900 h-10 w-10 rounded-full border-2 transition hover:scale-105',
+                      'bg-brand-300 border-brand h-10 w-10 rounded-full border-2 transition hover:scale-105',
                       brandColor.brand === 'var(--colors-brand9)'
-                        ? ' !bg-brand-900 ring-scale-400 border-scale-800 ring-2 drop-shadow-lg dark:ring-white'
+                        ? ' !bg-brand ring-scale-400 border-scale-800 ring-2 drop-shadow-lg dark:ring-white'
                         : '',
                     ].join(' ')}
                   ></button>
diff --git a/apps/www/components/CodeBlock/CodeBlock.tsx b/apps/www/components/CodeBlock/CodeBlock.tsx
index 99f0cb02169..1269b1f11ff 100644
--- a/apps/www/components/CodeBlock/CodeBlock.tsx
+++ b/apps/www/components/CodeBlock/CodeBlock.tsx
@@ -119,7 +119,7 @@ function CodeBlock(props: CodeBlockProps) {
                 type="text"
                 icon={
                   copied ? (
-                    <span className="text-brand-900">
+                    <span className="text-brand">
                       <IconCheck strokeWidth={3} />
                     </span>
                   ) : (
diff --git a/apps/www/components/Hero/Hero.tsx b/apps/www/components/Hero/Hero.tsx
index 6aba7c1539c..9ce53bff3a8 100644
--- a/apps/www/components/Hero/Hero.tsx
+++ b/apps/www/components/Hero/Hero.tsx
@@ -41,7 +41,7 @@ const Hero = () => {
                   {showAnnouncement && (
                     <Link href="/launch-week">
                       <a className="group w-auto rounded-full p-1 mb-6 mt-8 md:mb-10 bg-gradient-to-b from-[#1b1f2124] to-[#02040550] hover:from-[#ffffff15] hover:to-[#ffffff05] transition-all backdrop-blur-lg border flex items-center justify-between gap-2 md:gap-4 text-scale-1100 hover:text-scale-1200 text-sm">
-                        <div className="text-scale-200 rounded-full bg-brand-900 px-3 py-1 flex items-center justify-center">
+                        <div className="text-scale-200 rounded-full bg-brand px-3 py-1 flex items-center justify-center">
                           Get your ticket
                         </div>
                         <span>Launch Week 8 - August 7-11</span>
diff --git a/apps/www/components/LaunchWeek/6/HackathonSection.tsx b/apps/www/components/LaunchWeek/6/HackathonSection.tsx
index ad73a8a52a5..c2be728bb50 100644
--- a/apps/www/components/LaunchWeek/6/HackathonSection.tsx
+++ b/apps/www/components/LaunchWeek/6/HackathonSection.tsx
@@ -44,7 +44,7 @@ export default function LaunchHero() {
             <h3 className="text-scale-1200 text-lg">Submission</h3>
             <p className="text-scale-1100 text-sm">
               Submit your project through{' '}
-              <a className="text-brand-900" href="https://madewithsupabase.com">
+              <a className="text-brand" href="https://madewithsupabase.com">
                 madewithsupabase.com
               </a>
               .
diff --git a/apps/www/components/LaunchWeek/7/LaunchSection/ArticleButtonListItem.tsx b/apps/www/components/LaunchWeek/7/LaunchSection/ArticleButtonListItem.tsx
index e374bd023fc..8aee78e4070 100644
--- a/apps/www/components/LaunchWeek/7/LaunchSection/ArticleButtonListItem.tsx
+++ b/apps/www/components/LaunchWeek/7/LaunchSection/ArticleButtonListItem.tsx
@@ -9,7 +9,7 @@ const ArticleButtonListItem = (props: Article) => {
         <div className="flex flex-row">
           <div>
             <div className="flex flex-col">
-              <span className="text-scale-1200 group-hover:text-brand-900 text-left text-base transition">
+              <span className="text-scale-1200 group-hover:text-brand text-left text-base transition">
                 {props.title}
               </span>
               <p className="text-scale-1100 text-left text-sm transition">{props.description}</p>
diff --git a/apps/www/components/LaunchWeek/7/LaunchSection/ProductButtonListItem.tsx b/apps/www/components/LaunchWeek/7/LaunchSection/ProductButtonListItem.tsx
index 07ed656ae0c..f14095db860 100644
--- a/apps/www/components/LaunchWeek/7/LaunchSection/ProductButtonListItem.tsx
+++ b/apps/www/components/LaunchWeek/7/LaunchSection/ProductButtonListItem.tsx
@@ -18,7 +18,7 @@ export const ProductButtonListItem = (props: Article) => {
             <SparklesIcon strokeWidth={1} />
           </div>
           <div className="flex flex-col items-start gap-0">
-            <span className="group-hover:text-brand-900 text-sm">{props.title}</span>
+            <span className="group-hover:text-brand text-sm">{props.title}</span>
             <p className="text-scale-1100 text-left text-sm">{props.description}</p>
           </div>
         </button>
diff --git a/apps/www/components/LaunchWeek/7/LaunchSection/index.tsx b/apps/www/components/LaunchWeek/7/LaunchSection/index.tsx
index 3faf36f20d0..db093a84ca8 100644
--- a/apps/www/components/LaunchWeek/7/LaunchSection/index.tsx
+++ b/apps/www/components/LaunchWeek/7/LaunchSection/index.tsx
@@ -25,7 +25,7 @@ export const LaunchSection = (props: WeekDayProps) => {
       <div
         className={[
           'absolute mt-[4px] -ml-[21px] h-3 w-3 rounded-full border md:-ml-[37px] lg:-ml-[37.5px]',
-          props.shipped ? 'border-brand-900 bg-brand-400' : 'border-purple-900 bg-purple-300',
+          props.shipped ? 'border-brand bg-brand-400' : 'border-purple-900 bg-purple-300',
         ].join(' ')}
       ></div>
       {/* END timeline dot */}
@@ -63,7 +63,7 @@ export const LaunchSection = (props: WeekDayProps) => {
               nextDayNotShipped
                 ? 'launch-week-timeline-border--approaching'
                 : props.shipped
-                ? 'border-brand-900'
+                ? 'border-brand'
                 : 'border-purple-700',
               className,
             ].join(' ')}
@@ -152,7 +152,7 @@ export const LaunchSection = (props: WeekDayProps) => {
               md:pl-8
               lg:pl-8
         `,
-          props.shipped ? 'border-brand-900' : 'border-purple-700',
+          props.shipped ? 'border-brand' : 'border-purple-700',
           props.shippingHasStarted && 'lg:col-span-6',
           !lastIndex && 'pb-8 lg:pb-16',
         ].join(' ')}
diff --git a/apps/www/components/LaunchWeek/8/Ticket/TicketCustomizationForm.tsx b/apps/www/components/LaunchWeek/8/Ticket/TicketCustomizationForm.tsx
index dd9aa9e243c..6d6f848b536 100644
--- a/apps/www/components/LaunchWeek/8/Ticket/TicketCustomizationForm.tsx
+++ b/apps/www/components/LaunchWeek/8/Ticket/TicketCustomizationForm.tsx
@@ -54,9 +54,7 @@ const TicketCustomizationForm = ({ supabase, user }: Props) => {
             Connected account
           </span>
         )}
-        {IS_SAVED && (
-          <span className="opacity-0 animate-fade-in text-xs text-brand-900">Saved</span>
-        )}
+        {IS_SAVED && <span className="opacity-0 animate-fade-in text-xs text-brand">Saved</span>}
         {HAS_ERROR && (
           <span className="opacity-0 animate-fade-in text-xs text-tomato-900">
             Something went wrong
@@ -72,7 +70,7 @@ const TicketCustomizationForm = ({ supabase, user }: Props) => {
         disabled
         placeholder="name"
         value={user.name}
-        icon={<IconCheck strokeWidth={2} className="w-3 text-brand-900" />}
+        icon={<IconCheck strokeWidth={2} className="w-3 text-brand" />}
       />
       <Input
         className="[&_input]:border-scale-200"
@@ -91,7 +89,7 @@ const TicketCustomizationForm = ({ supabase, user }: Props) => {
             className={[
               'w-3',
               IS_SAVING && 'text-scale-300',
-              !!formData.role ? 'text-brand-900' : 'text-scale-300',
+              !!formData.role ? 'text-brand' : 'text-scale-300',
             ].join(' ')}
           />
         }
@@ -113,7 +111,7 @@ const TicketCustomizationForm = ({ supabase, user }: Props) => {
             className={[
               'w-3',
               IS_SAVING && 'text-scale-300',
-              !!formData.company ? 'text-brand-900' : 'text-scale-300',
+              !!formData.company ? 'text-brand' : 'text-scale-300',
             ].join(' ')}
           />
         }
@@ -135,7 +133,7 @@ const TicketCustomizationForm = ({ supabase, user }: Props) => {
             className={[
               'w-3 flex spin',
               IS_SAVING && 'text-scale-300',
-              !!formData.location ? 'text-brand-900' : 'text-scale-300',
+              !!formData.location ? 'text-brand' : 'text-scale-300',
             ].join(' ')}
           />
         }
diff --git a/apps/www/components/MagnifiedProducts.tsx b/apps/www/components/MagnifiedProducts.tsx
index 17880f85e71..ac9bea22e66 100644
--- a/apps/www/components/MagnifiedProducts.tsx
+++ b/apps/www/components/MagnifiedProducts.tsx
@@ -93,7 +93,7 @@ function Product({
               lazyBoundary="100px"
             />
           </motion.div>
-          <div className="text-brand-1100 dark:text-brand-900 flex justify-center relative opacity-70 md:absolute md:bottom-0 md:opacity-0 group-hover:opacity-100 transition-opacity md:translate-y-8 md:-left-20 md:md:-right-20 font-mono uppercase text-center text-xs mt-2">
+          <div className="text-brand-1100 dark:text-brand flex justify-center relative opacity-70 md:absolute md:bottom-0 md:opacity-0 group-hover:opacity-100 transition-opacity md:translate-y-8 md:-left-20 md:md:-right-20 font-mono uppercase text-center text-xs mt-2">
             <span>{product.name}</span>
           </div>
         </a>
diff --git a/apps/www/components/Nav/Company.tsx b/apps/www/components/Nav/Company.tsx
index 7b263e0bc9b..d7c21238697 100644
--- a/apps/www/components/Nav/Company.tsx
+++ b/apps/www/components/Nav/Company.tsx
@@ -82,7 +82,7 @@ const Company = () => {
         <div className="mt-6 text-sm font-medium">
           <a
             href="/blog"
-            className="dark:text-brand-900 dark:hover:text-brand-700 text-gray-600 transition duration-150 ease-in-out hover:text-gray-500"
+            className="dark:text-brand dark:hover:text-brand-700 text-gray-600 transition duration-150 ease-in-out hover:text-gray-500"
           >
             View all posts <span aria-hidden="true">&rarr;</span>
           </a>
diff --git a/apps/www/components/Nav/index.tsx b/apps/www/components/Nav/index.tsx
index 2439d76df00..e8ad79db017 100644
--- a/apps/www/components/Nav/index.tsx
+++ b/apps/www/components/Nav/index.tsx
@@ -85,7 +85,7 @@ const Nav = () => {
             <p className="mt-1 text-sm text-scale-1100 dark:text-dark-100">{description}</p>
           </div>
           {url && (
-            <p className="mt-2 text-sm font-medium text-brand-900 lg:mt-4">
+            <p className="mt-2 text-sm font-medium text-brand lg:mt-4">
               <TextLink label={label ? 'Get notified' : 'Learn more'} url={url} />
             </p>
           )}
@@ -120,7 +120,7 @@ const Nav = () => {
     >
       <button
         className={[
-          'text-scale-900 focus:ring-brand-900 dark:bg-scale-200 dark:hover:bg-scale-300 inline-flex items-center justify-center rounded-md bg-gray-50 p-2 hover:bg-white focus:outline-none focus:ring-2 focus:ring-inset',
+          'text-scale-900 focus:ring-brand dark:bg-scale-200 dark:hover:bg-scale-300 inline-flex items-center justify-center rounded-md bg-gray-50 p-2 hover:bg-white focus:outline-none focus:ring-2 focus:ring-inset',
           showLaunchWeekNavMode && '!bg-transparent border border-[#be9eea]',
         ].join(' ')}
         aria-expanded="false"
@@ -166,7 +166,7 @@ const Nav = () => {
     <div
       className={[
         `
-        text-scale-1200 hover:text-brand-900
+        text-scale-1200 hover:text-brand
         inline-flex cursor-pointer items-center
         border-b-2
         border-transparent
@@ -258,7 +258,7 @@ const Nav = () => {
                   <Link href="/pricing">
                     <a
                       className={[
-                        `text-scale-1200 hover:text-brand-900 hover:border-brand-900 dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
+                        `text-scale-1200 hover:text-brand hover:border-brand dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
                         border-b-2 border-transparent p-5 px-1
                         text-sm font-medium`,
                         showLaunchWeekNavMode && '!text-white',
@@ -270,7 +270,7 @@ const Nav = () => {
                   <Link href="/docs">
                     <a
                       className={[
-                        `text-scale-1200 hover:text-brand-900 hover:border-brand-900 dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
+                        `text-scale-1200 hover:text-brand hover:border-brand dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
                         border-b-2 border-transparent p-5 px-1
                         text-sm font-medium`,
                         showLaunchWeekNavMode && '!text-white',
@@ -282,7 +282,7 @@ const Nav = () => {
                   <Link href="/blog">
                     <a
                       className={[
-                        `text-scale-1200 hover:text-brand-900 hover:border-brand-900 dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
+                        `text-scale-1200 hover:text-brand hover:border-brand dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
                         border-b-2 border-transparent p-5 px-1
                         text-sm font-medium`,
                         showLaunchWeekNavMode && '!text-white',
@@ -376,7 +376,7 @@ const Nav = () => {
                   <button
                     onClick={() => setOpen(false)}
                     type="button"
-                    className="inline-flex items-center justify-center p-2 bg-white rounded-md text-scale-900 focus:ring-brand-900 dark:bg-scale-300 dark:hover:bg-scale-400 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset"
+                    className="inline-flex items-center justify-center p-2 bg-white rounded-md text-scale-900 focus:ring-brand dark:bg-scale-300 dark:hover:bg-scale-400 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset"
                   >
                     <span className="sr-only">Close menu</span>
                     <svg
diff --git a/apps/www/components/Partners/PartnerLinkBox.tsx b/apps/www/components/Partners/PartnerLinkBox.tsx
index 31c3809b457..3471797b6bb 100644
--- a/apps/www/components/Partners/PartnerLinkBox.tsx
+++ b/apps/www/components/Partners/PartnerLinkBox.tsx
@@ -19,7 +19,7 @@ const PartnerLinkBox = ({
       'bg-amber-400 dark:bg-scale-100 group-hover:bg-amber-500 dark:group-hover:bg-amber-300 text-amber-900',
     blue: 'bg-blue-400 dark:bg-scale-100 group-hover:bg-blue-500 dark:group-hover:bg-blue-300 text-blue-900',
     brand:
-      'bg-brand-400 dark:bg-scale-100 group-hover:bg-brand-500 dark:group-hover:bg-brand-300 text-brand-900',
+      'bg-brand-400 dark:bg-scale-100 group-hover:bg-brand-500 dark:group-hover:bg-brand-300 text-brand',
   }
 
   const content = (
diff --git a/apps/www/components/Pricing/ComputePricingModal.tsx b/apps/www/components/Pricing/ComputePricingModal.tsx
index eb76e04349b..7e4149fcd13 100644
--- a/apps/www/components/Pricing/ComputePricingModal.tsx
+++ b/apps/www/components/Pricing/ComputePricingModal.tsx
@@ -119,7 +119,7 @@ export default function ComputePricingModal({ showComputeModal, setShowComputeMo
                     </th>
                     <td
                       className={`px-4 py-3 ${
-                        column.key === 'plan' ? 'text-brand-900 pt-16 lg:pt-3' : ''
+                        column.key === 'plan' ? 'text-brand pt-16 lg:pt-3' : ''
                       }`}
                     >
                       {column.key === 'dedicated' ? (
diff --git a/apps/www/components/ProductIcon.tsx b/apps/www/components/ProductIcon.tsx
index 2d38ab75564..59288f247dc 100644
--- a/apps/www/components/ProductIcon.tsx
+++ b/apps/www/components/ProductIcon.tsx
@@ -15,7 +15,7 @@ function ProductIcon({ icon, color }: ProductIcon) {
       <svg
         className={[
           'h-5 w-5 stroke-white dark:stroke-black',
-          color && color === 'green' ? 'dark:stroke-brand-900' : '',
+          color && color === 'green' ? 'dark:stroke-brand' : '',
         ].join(' ')}
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
diff --git a/apps/www/components/Quote.tsx b/apps/www/components/Quote.tsx
index 2c1b1bcc48d..8eb6c7507bc 100644
--- a/apps/www/components/Quote.tsx
+++ b/apps/www/components/Quote.tsx
@@ -21,7 +21,7 @@ export default function Quote(props: Props) {
             <Avatar caption={caption} img={img} />
           </div>
         )}
-        <div className="absolute rounded-full w-1 h-full inset-0 right-auto bg-brand-900" />
+        <div className="absolute rounded-full w-1 h-full inset-0 right-auto bg-brand" />
       </div>
     </figure>
   )
diff --git a/apps/www/components/SOC2RequestForm.tsx b/apps/www/components/SOC2RequestForm.tsx
index fb45809b19f..841e7e0e5b9 100644
--- a/apps/www/components/SOC2RequestForm.tsx
+++ b/apps/www/components/SOC2RequestForm.tsx
@@ -68,7 +68,7 @@ const SOC2RequestForm = () => {
   return (
     <div>
       {formSubmitted ? (
-        <h3 className="h3 text-brand-900 mt-12 text-center">
+        <h3 className="h3 text-brand mt-12 text-center">
           Thank you for your submission! A member from the Supabase team will reach out to you
           shortly!
         </h3>
diff --git a/apps/www/components/ScrollProgress.tsx b/apps/www/components/ScrollProgress.tsx
index ddbea562561..cd366d1c21f 100644
--- a/apps/www/components/ScrollProgress.tsx
+++ b/apps/www/components/ScrollProgress.tsx
@@ -30,7 +30,7 @@ const ScrollProgress = () => {
   return (
     <div className="h-[2px] w-full flex justify-start relative">
       <div
-        className="h-full top-0 bottom-0 right-0 absolute w-screen bg-brand-900 will-change-transform transition-opacity"
+        className="h-full top-0 bottom-0 right-0 absolute w-screen bg-brand will-change-transform transition-opacity"
         style={{
           display: isActive ? 'absolute' : 'relative',
           transform: `translate3d(${isActive ? progressPercentage - 100 + '%' : '0'},0,0)`,
diff --git a/apps/www/components/Sections/CommunitySlider.tsx b/apps/www/components/Sections/CommunitySlider.tsx
index f0e8ac52d93..af1bbde695b 100644
--- a/apps/www/components/Sections/CommunitySlider.tsx
+++ b/apps/www/components/Sections/CommunitySlider.tsx
@@ -130,7 +130,7 @@ const CommunitySlider = () => {
       <p className="text-scale-900 my-3 text-base">{card.abstract}</p>
 
       {card.url && (
-        <div className="text-brand-900 block cursor-pointer text-sm">Read Customer Story</div>
+        <div className="text-brand block cursor-pointer text-sm">Read Customer Story</div>
       )}
     </div>
   )
diff --git a/apps/www/components/Sections/CustomerQuotesSection.tsx b/apps/www/components/Sections/CustomerQuotesSection.tsx
index bfcd363fc8a..4715d7f390a 100644
--- a/apps/www/components/Sections/CustomerQuotesSection.tsx
+++ b/apps/www/components/Sections/CustomerQuotesSection.tsx
@@ -74,7 +74,7 @@ const CustomerQuotesSection = (props: Props) => {
             {customer.author}, {customer.role}
           </p>
           {customer.url && (
-            <div className="text-brand-900 border-t mt-4 pt-4 cursor-pointer text-sm flex items-center justify-between">
+            <div className="text-brand border-t mt-4 pt-4 cursor-pointer text-sm flex items-center justify-between">
               <span>Read Customer Story</span>
               <IconArrowUpRight />
             </div>
diff --git a/apps/www/components/Sections/ProductHeaderCentered.tsx b/apps/www/components/Sections/ProductHeaderCentered.tsx
index 4aedc75221b..194d000f1b5 100644
--- a/apps/www/components/Sections/ProductHeaderCentered.tsx
+++ b/apps/www/components/Sections/ProductHeaderCentered.tsx
@@ -47,7 +47,7 @@ const ProductHeaderCentered = (props: Types) => (
               {props.icon && <ProductIcon icon={props.icon} />}
               {props.title && (
                 <span
-                  className="text-brand-900 font-mono uppercase tracking-widest text-sm"
+                  className="text-brand font-mono uppercase tracking-widest text-sm"
                   key={`product-name-${props.title}`}
                 >
                   {props.title}
diff --git a/apps/www/components/Sections/TimedTabsSection.tsx b/apps/www/components/Sections/TimedTabsSection.tsx
index 532a70fb177..1de3cc0ddd7 100644
--- a/apps/www/components/Sections/TimedTabsSection.tsx
+++ b/apps/www/components/Sections/TimedTabsSection.tsx
@@ -29,7 +29,7 @@ const Tab = ({ isActive, label, paragraph, onClick, progress, intervalDuration }
       {isActive && (
         <motion.div
           className={[
-            'absolute inset-0 w-full right-full bg-brand-900 h-full transition-opacity',
+            'absolute inset-0 w-full right-full bg-brand h-full transition-opacity',
             progress! > 99.7 ? 'opacity-0' : 'opacity-100',
           ].join(' ')}
           style={{ x: `${progress! - 100}%` }}
diff --git a/apps/www/data/products/vector/pageData.tsx b/apps/www/data/products/vector/pageData.tsx
index 2da32838233..2ae6b53155f 100644
--- a/apps/www/data/products/vector/pageData.tsx
+++ b/apps/www/data/products/vector/pageData.tsx
@@ -162,7 +162,7 @@ export default {
       <>
         <span className="heading-gradient">Simple yet</span>
         <br />
-        <span className="text-brand-900">powerful APIs</span>
+        <span className="text-brand">powerful APIs</span>
       </>
     ),
     paragraph: 'Easy-to-use client libraries for managing and querying vector stores in Postgres.',
@@ -242,7 +242,7 @@ docs.query(
       <>
         <span className="heading-gradient">Powerful Features</span>
         <br />
-        <span className="text-brand-900">Scale to millions</span>
+        <span className="text-brand">Scale to millions</span>
       </>
     ),
     paragraph:
diff --git a/apps/www/layouts/comparison.tsx b/apps/www/layouts/comparison.tsx
index 020d31e2559..c832c800eda 100644
--- a/apps/www/layouts/comparison.tsx
+++ b/apps/www/layouts/comparison.tsx
@@ -90,7 +90,7 @@ const LayoutComparison = ({ components, props }: Props) => {
           {/* Title and description */}
           <div className="mb-16 max-w-5xl space-y-8">
             <div className="space-y-4">
-              <p className="text-brand-900 text-center">Alternative</p>
+              <p className="text-brand text-center">Alternative</p>
               <h1 className="h1 text-center">{props.blog.title}</h1>
               <div className="text-scale-900 flex justify-center space-x-3 text-sm">
                 <p>{props.blog.date}</p>
diff --git a/apps/www/pages/beta.tsx b/apps/www/pages/beta.tsx
index 8ac450a2b35..bec142fdab7 100644
--- a/apps/www/pages/beta.tsx
+++ b/apps/www/pages/beta.tsx
@@ -118,7 +118,7 @@ const Hero = (props: Props) => {
         <div className="col-span-12 text-scale-900 dark:text-white md:col-span-9 lg:col-span-8 xl:col-span-6">
           <p className="mb-10 text-4xl">Supabase is an open source Firebase alternative.</p>
           <p className="text-2xl">
-            Today, we're moving to <span className="text-brand-900">Beta</span>
+            Today, we're moving to <span className="text-brand">Beta</span>
           </p>
           <time itemProp="datePublished" dateTime="2020-12-03" className="text-sm opacity-80">
             Published December 3rd, 2020
@@ -139,7 +139,7 @@ const Introduction = () => {
             <a
               href="https://news.ycombinator.com/item?id=23319901"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               Alpha
             </a>{' '}
@@ -154,7 +154,7 @@ const Introduction = () => {
           <a
             href="/blog/2020/12/02/case-study-xendit"
             target="_blank"
-            className="text-brand-900 hover:text-brand-900"
+            className="text-brand hover:text-brand"
           >
             Xendit
           </a>
@@ -162,7 +162,7 @@ const Introduction = () => {
           <a
             href="/blog/2020/12/02/case-study-monitoro"
             target="_blank"
-            className="text-brand-900 hover:text-brand-900"
+            className="text-brand hover:text-brand"
           >
             Monitoro
           </a>
@@ -170,7 +170,7 @@ const Introduction = () => {
           <a
             href="/blog/2020/12/02/case-study-tayfa"
             target="_blank"
-            className="text-brand-900 hover:text-brand-900"
+            className="text-brand hover:text-brand"
           >
             TAYFA
           </a>{' '}
@@ -223,8 +223,7 @@ const TableOfContents = (props: any) => {
       <div className="container grid grid-cols-12 gap-4 px-8 py-20 mx-auto lg:px-28">
         <div className="col-span-12 mb-10 text-base">
           <p className="text-2xl text-black dark:text-white">
-            Supabase <span className="text-brand-900 dark:text-brand-900">Beta</span> is starting
-            now.
+            Supabase <span className="text-brand dark:text-brand">Beta</span> is starting now.
           </p>
         </div>
         <div className="grid grid-cols-12 col-span-12 gap-y-10">
@@ -314,7 +313,7 @@ const Performance = () => {
                       <Bar
                         color={
                           stat.name === 'Supabase'
-                            ? 'bg-brand-900 dark:bg-brand-800'
+                            ? 'bg-brand dark:bg-brand-800'
                             : 'bg-brand-300 dark:bg-brand-400'
                         }
                         finalPercentage={Math.ceil((stat.value / maxValue) * 100)}
@@ -353,7 +352,7 @@ const Performance = () => {
               <a
                 href="https://elixir-lang.org/"
                 target="_blank"
-                className="text-brand-900 hover:text-brand-900"
+                className="text-brand hover:text-brand"
               >
                 Elixir
               </a>{' '}
@@ -361,7 +360,7 @@ const Performance = () => {
               <a
                 href="https://github.com/supabase/realtime"
                 target="_blank"
-                className="text-brand-900 hover:text-brand-900"
+                className="text-brand hover:text-brand"
               >
                 Realtime engine
               </a>
@@ -369,7 +368,7 @@ const Performance = () => {
               <a
                 href="https://postgrest.org/en/v7.0.0/"
                 target="_blank"
-                className="text-brand-900 hover:text-brand-900"
+                className="text-brand hover:text-brand"
               >
                 PostgREST
               </a>{' '}
@@ -381,7 +380,7 @@ const Performance = () => {
               <a
                 href="https://github.com/supabase/benchmarks/"
                 target="_blank"
-                className="text-brand-900 hover:text-brand-900"
+                className="text-brand hover:text-brand"
               >
                 benchmarks
               </a>{' '}
@@ -451,11 +450,7 @@ const Security = () => {
               </li>
               <li className="mb-5">
                 Adopted the{' '}
-                <a
-                  href="https://snyk.io/"
-                  target="_blank"
-                  className="text-brand-900 hover:text-brand-900"
-                >
+                <a href="https://snyk.io/" target="_blank" className="text-brand hover:text-brand">
                   Snyk
                 </a>{' '}
                 dependency monitor as part of our SSDLC on several key component of our system, to
@@ -467,7 +462,7 @@ const Security = () => {
                 <a
                   href="https://github.com/PostgREST/postgrest/pull/1600#issuecomment-735257952"
                   target="_blank"
-                  className="text-brand-900 hover:text-brand-900"
+                  className="text-brand hover:text-brand"
                 >
                   now uses
                 </a>{' '}
@@ -513,7 +508,7 @@ const Reliability = () => {
               <a
                 href="https://status.supabase.com"
                 target="_blank"
-                className="text-brand-900 hover:text-brand-900"
+                className="text-brand hover:text-brand"
               >
                 https://status.supabase.com
               </a>{' '}
@@ -557,7 +552,7 @@ const NewFeaturesAndIntegrations = () => {
                   <a
                     href="/docs/reference/javascript/auth-signup"
                     target="_blank"
-                    className="text-brand-900 hover:text-brand-900"
+                    className="text-brand hover:text-brand"
                   >
                     JavaScript
                   </a>{' '}
@@ -565,7 +560,7 @@ const NewFeaturesAndIntegrations = () => {
                   <a
                     href="/docs/gotrue/server/about#endpoints"
                     target="_blank"
-                    className="text-brand-900 hover:text-brand-900"
+                    className="text-brand hover:text-brand"
                   >
                     HTTP
                   </a>
@@ -587,7 +582,7 @@ const NewFeaturesAndIntegrations = () => {
                   <a
                     href="/docs/guides/client-libraries#realtime-changes"
                     target="_blank"
-                    className="text-brand-900 hover:text-brand-900"
+                    className="text-brand hover:text-brand"
                   >
                     subscribe to changes in your database
                   </a>{' '}
@@ -606,7 +601,7 @@ const NewFeaturesAndIntegrations = () => {
                   <a
                     href="/docs/reference/javascript/select#query-foreign-tables"
                     target="_blank"
-                    className="text-brand-900 hover:text-brand-900"
+                    className="text-brand hover:text-brand"
                   >
                     querying from multiple tables
                   </a>{' '}
@@ -614,7 +609,7 @@ const NewFeaturesAndIntegrations = () => {
                   <a
                     href="/docs/reference/javascript/rpc"
                     target="_blank"
-                    className="text-brand-900 hover:text-brand-900"
+                    className="text-brand hover:text-brand"
                   >
                     invoke complex functions
                   </a>
@@ -703,7 +698,7 @@ const BetaPricing = () => (
               <a
                 href="mailto:rory@supabase.io"
                 target="_blank"
-                className="text-brand-900 hover:text-brand-900"
+                className="text-brand hover:text-brand"
               >
                 rory@supabase.io
               </a>
@@ -716,7 +711,7 @@ const BetaPricing = () => (
           </ul>
           <p>
             The Supabase Base plan is now called the Supabase Pro plan as per the{' '}
-            <a href="https://supabase.com/pricing" className="text-brand-900 hover:text-brand-900">
+            <a href="https://supabase.com/pricing" className="text-brand hover:text-brand">
               pricing page
             </a>
             .
@@ -747,7 +742,7 @@ const OpenSource = () => (
             <a
               href="https://github.com/sponsors/supabase/"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               sponsorship
             </a>{' '}
@@ -759,7 +754,7 @@ const OpenSource = () => (
             <a
               href="/blog/2020/12/02/supabase-striveschool"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               partnering with Strive School
             </a>{' '}
@@ -772,7 +767,7 @@ const OpenSource = () => (
             <a
               href="mailto:rory@supabase.io"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               rory@supabase.io
             </a>{' '}
@@ -783,7 +778,7 @@ const OpenSource = () => (
             <a
               href="https://github.com/supabase"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               our GitHub.
             </a>{' '}
@@ -819,7 +814,7 @@ const FundingPartners = () => (
             <a
               href="https://twitter.com/supabase"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               Twitter
             </a>{' '}
@@ -856,7 +851,7 @@ const ScalingOurTeam = () => (
             <a
               href="mailto:work@supabase.io"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               work@supabase.io
             </a>
@@ -917,7 +912,7 @@ const WhatsNext = () => (
             <a
               href="mailto:support@supabase.io"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               support@supabase.io
             </a>{' '}
@@ -925,7 +920,7 @@ const WhatsNext = () => (
             <a
               href="https://github.com/supabase/supabase/discussions"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               discussion
             </a>{' '}
diff --git a/apps/www/pages/blog/[slug].tsx b/apps/www/pages/blog/[slug].tsx
index 1b1fcbd5b8b..356c3d5c107 100644
--- a/apps/www/pages/blog/[slug].tsx
+++ b/apps/www/pages/blog/[slug].tsx
@@ -202,7 +202,7 @@ function BlogPostPage(props: any) {
               {/* Title and description */}
               <div className="mb-16 max-w-5xl space-y-8">
                 <div className="space-y-4">
-                  <p className="text-brand-900">Blog post</p>
+                  <p className="text-brand">Blog post</p>
                   <h1 className="h1">{props.blog.title}</h1>
                   <div className="text-scale-900 flex space-x-3 text-sm">
                     <p>{props.blog.date}</p>
diff --git a/apps/www/pages/careers/index.tsx b/apps/www/pages/careers/index.tsx
index a303e9f2e9a..d6acf681121 100644
--- a/apps/www/pages/careers/index.tsx
+++ b/apps/www/pages/careers/index.tsx
@@ -101,7 +101,7 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
       <DefaultLayout>
         <div className="text-scale-1200">
           <div className="container relative mx-auto px-6 py-10 lg:pt-12 lg:px-16 xl:px-20 text-center space-y-4">
-            <h1 className="text-sm text-brand-900 md:text-base">
+            <h1 className="text-sm text-brand md:text-base">
               <span className="sr-only">Supabase </span>Careers
             </h1>
             <h2 className="text-3xl md:text-4xl xl:text-5xl lg:max-w-2xl xl:max-w-3xl lg:mx-auto tracking-[-1.5px]">
@@ -121,9 +121,9 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
                 return (
                   <div
                     key={i}
-                    className="border-t-[1px] mt-6 mx-2 md:mx-2 md:mt-0 md:border-0 border-brand-900 w-[134px] md:max-w-none"
+                    className="border-t-[1px] mt-6 mx-2 md:mx-2 md:mt-0 md:border-0 border-brand w-[134px] md:max-w-none"
                   >
-                    <div className="hidden md:block border-t-[1px] lg:border-t-2 border-brand-900 w-[60px] lg:w-[100px]"></div>
+                    <div className="hidden md:block border-t-[1px] lg:border-t-2 border-brand w-[60px] lg:w-[100px]"></div>
                     <h2 className="text-3xl lg:text-4xl pt-3 tracking-[-1.5px]">
                       {company.number}
                     </h2>
@@ -153,7 +153,7 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
                       Discord to stay connected to our team, and our community.
                     </p>
                     <div className="max-w-[300px] sm:max-w-md lg:max-w-md mt-20">
-                      <div className="border-t-2 border-brand-900 w-4/12"></div>
+                      <div className="border-t-2 border-brand w-4/12"></div>
                       <h2 className="text-2xl sm:text-3xl lg:text-4xl pt-2 tracking-[-1.5px]">
                         We deeply believe in the efficacy of collaborative open source
                       </h2>
@@ -445,7 +445,7 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
                     className="flex lg:block items-start space-x-6 lg:space-x-0 lg:w-full"
                   >
                     <div className="lg:flex items-center">
-                      <h3 className="bg-brand-600 border-[1px] border-brand-800 text-brand-900 text-md text-center w-[44px] px-2 py-1.5 rounded-md">
+                      <h3 className="bg-brand-600 border-[1px] border-brand-800 text-brand text-md text-center w-[44px] px-2 py-1.5 rounded-md">
                         {i + 1}
                       </h3>
                       <div className="h-[100px] w-[1px] sm:h-[100px] mx-auto lg:h-[1px] lg:w-full bg-brand-800 lg:pr-6"></div>
@@ -461,7 +461,7 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
                   </div>
                 )
               })}
-              <h3 className="bg-brand-600 border-[1px] border-brand-800 text-brand-900 text-xl w-[44px] min-h-[40px] px-2 py-1 rounded-md grid justify-items-center items-center">
+              <h3 className="bg-brand-600 border-[1px] border-brand-800 text-brand text-xl w-[44px] min-h-[40px] px-2 py-1 rounded-md grid justify-items-center items-center">
                 <IconCheck />
               </h3>
             </div>
diff --git a/apps/www/pages/customers/[slug].tsx b/apps/www/pages/customers/[slug].tsx
index 7be097ca5b9..ea186151c78 100644
--- a/apps/www/pages/customers/[slug].tsx
+++ b/apps/www/pages/customers/[slug].tsx
@@ -122,9 +122,7 @@ function CaseStudyPage(props: any) {
                 <article className="flex flex-col gap-8">
                   <div className="flex flex-col gap-8 max-w-xxl">
                     <Link passHref href="/customers">
-                      <a className="text-brand-900 hover:text-brand-1000 mb-2 mt-0">
-                        Customer Stories
-                      </a>
+                      <a className="text-brand hover:text-brand-1000 mb-2 mt-0">Customer Stories</a>
                     </Link>
                     <h1 className="text-scale-1200 text-4xl font-semibold xl:text-5xl">
                       {props.blog.title}
diff --git a/apps/www/pages/edge-functions/edge-functions.tsx b/apps/www/pages/edge-functions/edge-functions.tsx
index 20900033d31..981685a0268 100644
--- a/apps/www/pages/edge-functions/edge-functions.tsx
+++ b/apps/www/pages/edge-functions/edge-functions.tsx
@@ -145,7 +145,7 @@ function Database() {
                     className="bg-scale-100 dark:bg-scale-300 group flex flex-col gap-4 rounded border px-8 py-6"
                     key={i}
                   >
-                    <div className="bg-scale-300 dark:bg-scale-500 text-scale-1200 group-hover:text-brand-900 flex h-12 w-12 items-center justify-center rounded-md border transition-all group-hover:scale-105">
+                    <div className="bg-scale-300 dark:bg-scale-500 text-scale-1200 group-hover:text-brand flex h-12 w-12 items-center justify-center rounded-md border transition-all group-hover:scale-105">
                       {item.icon ? item.icon : <IconCode strokeWidth={2} />}
                     </div>
 
diff --git a/apps/www/pages/launch-week/6/index.tsx b/apps/www/pages/launch-week/6/index.tsx
index 7f8f8426cc1..dbef8ec6eeb 100644
--- a/apps/www/pages/launch-week/6/index.tsx
+++ b/apps/www/pages/launch-week/6/index.tsx
@@ -1018,7 +1018,7 @@ export default function launchweek() {
                 href="https://supabase.com/blog/launch-week-6-hackathon"
                 target="_blank"
                 rel="nooper noreferrer"
-                className="text-brand-900"
+                className="text-brand"
               >
                 blog post
               </a>
@@ -1052,7 +1052,7 @@ export default function launchweek() {
                   <a
                     href="https://discord.supabase.com/"
                     rel="noopener noreferrer"
-                    className="text-brand-900 flex items-center"
+                    className="text-brand flex items-center"
                     target="_blank"
                   >
                     Join our Discord <IconExternalLink size="small" className="inline-block ml-2" />
@@ -1064,7 +1064,7 @@ export default function launchweek() {
                 <p className="text-slate-900 w-[90%] lg:w-[80%]">
                   Submit your project through{' '}
                   <a
-                    className="text-brand-900"
+                    className="text-brand"
                     href="https://www.madewithsupabase.com/launch-week-6"
                     target="_blank"
                   >
@@ -1091,7 +1091,7 @@ export default function launchweek() {
                 <div className="border border-[#2E2E2E] rounded-xl pl-5 pr-9 py-4 mb-4 bg-[#121212] w-fit relative max-w-[250px]">
                   <img
                     src="/images/launchweek/link.svg"
-                    className="absolute top-[16px] right-[10px] text-brand-900"
+                    className="absolute top-[16px] right-[10px] text-brand"
                   ></img>
                   <h3 className="text-white">Supabase Cache Helpers</h3>
                   <p className="text-slate-1000 text-xs">Previous Best Overall Project Winner</p>
@@ -1105,7 +1105,7 @@ export default function launchweek() {
                 <div className="border border-[#2E2E2E] rounded-xl pl-5 pr-9 py-4 mb-4 bg-[#121212] w-fit relative max-w-[250px]">
                   <img
                     src="/images/launchweek/link.svg"
-                    className="absolute top-[16px] right-[10px] text-brand-900"
+                    className="absolute top-[16px] right-[10px] text-brand"
                   ></img>
                   <h3 className="text-white">Super UI</h3>
                   <p className="text-slate-1000 text-xs">Previous Best Overall Project Runner Up</p>
@@ -1120,7 +1120,7 @@ export default function launchweek() {
                 <div className="border border-[#2E2E2E] rounded-xl pl-5 pr-9 py-4 mb-4 bg-[#121212] w-fit relative max-w-[250px]">
                   <img
                     src="/images/launchweek/link.svg"
-                    className="absolute top-[16px] right-[10px] text-brand-900"
+                    className="absolute top-[16px] right-[10px] text-brand"
                   ></img>
                   <h3 className="text-white">Quid Faciam Hodie?</h3>
                   <p className="text-slate-1000 text-xs">Winner Best Flutter Project</p>
@@ -1130,7 +1130,7 @@ export default function launchweek() {
                 <div className="border border-[#2E2E2E] rounded-xl pl-5 pr-9 py-4 mb-4 bg-[#121212] w-fit relative max-w-[250px]">
                   <img
                     src="/images/launchweek/link.svg"
-                    className="absolute top-[16px] right-[10px] text-brand-900"
+                    className="absolute top-[16px] right-[10px] text-brand"
                   ></img>
                   <h3 className="text-white">That Hot Dog Game</h3>
                   <p className="text-slate-1000 text-xs">Previous Winner: Most Fun/Interesting</p>
@@ -1145,7 +1145,7 @@ export default function launchweek() {
                 <div className="border border-[#2E2E2E] rounded-xl pl-5 pr-9 py-4 bg-[#121212] w-fit relative max-w-[250px]">
                   <img
                     src="/images/launchweek/link.svg"
-                    className="absolute top-[16px] right-[10px] text-brand-900"
+                    className="absolute top-[16px] right-[10px] text-brand"
                   ></img>
                   <h3 className="text-white">RepoWatch</h3>
                   <p className="text-slate-1000 text-xs">Previous Winner Best Realtime Project</p>
@@ -1180,7 +1180,7 @@ export default function launchweek() {
                     <div className="absolute -inset-0.5 bg-brand-1100 rounded-full opacity-75 group-hover:opacity-100 group-hover:blur-sm transition duration-500"></div>
                     <a href={creator.link} target="_blank" rel="noopener">
                       <img
-                        className="relative rounded-full w-12 h-12 border border-[#2E2E2E] border-brand-900 hover:shadow-md"
+                        className="relative rounded-full w-12 h-12 border border-[#2E2E2E] border-brand hover:shadow-md"
                         src={creator.profile_picture}
                       />
                     </a>
@@ -1204,7 +1204,7 @@ export default function launchweek() {
               We worked with more than 30 content creators from around the world to drop a mountain
               of content simultaneously!
               <a rel="noopener" target="_blank" href="/blog/the-supabase-content-storm">
-                <div className="text-brand-900 flex items-center mt-2">
+                <div className="text-brand flex items-center mt-2">
                   See all the content
                   <IconExternalLink size="small" className="inline-block ml-1" />
                 </div>
@@ -1220,7 +1220,7 @@ export default function launchweek() {
                 {activeCreator !== null && (
                   <p className="text-slate-900 ">{creators[activeCreator].description}</p>
                 )}
-                <p className="text-brand-900 mt-1">
+                <p className="text-brand mt-1">
                   <a rel="noopener" target="_blank" href={creators[activeCreator].link}>
                     <span>
                       {creators[activeCreator].link_title}
diff --git a/apps/www/pages/legal/dpa.tsx b/apps/www/pages/legal/dpa.tsx
index 7814c69a208..3e8bd8429fd 100644
--- a/apps/www/pages/legal/dpa.tsx
+++ b/apps/www/pages/legal/dpa.tsx
@@ -52,7 +52,7 @@ const DPA = () => {
                 <p>You can download our latest DPA document by submitting your email here.</p>
 
                 {formSubmitted ? (
-                  <p className="text-brand-900">
+                  <p className="text-brand">
                     Thank you for your submission! A new tab should have opened with the DPA
                     document
                   </p>
diff --git a/apps/www/pages/partners/experts/[slug].tsx b/apps/www/pages/partners/experts/[slug].tsx
index ffb5f8fe409..8603d2a86ac 100644
--- a/apps/www/pages/partners/experts/[slug].tsx
+++ b/apps/www/pages/partners/experts/[slug].tsx
@@ -160,7 +160,7 @@ function Partner({
                   <div className="flex items-center justify-between py-2">
                     <span className="text-scale-900">Category</span>
                     <Link href={`/partners/experts#${partner.category.toLowerCase()}`}>
-                      <a className="text-brand-900 hover:text-brand-800 transition-colors">
+                      <a className="text-brand hover:text-brand-800 transition-colors">
                         {partner.category}
                       </a>
                     </Link>
@@ -172,7 +172,7 @@ function Partner({
                       href={partner.website}
                       target="_blank"
                       rel="noreferrer"
-                      className="text-brand-900 hover:text-brand-800 transition-colors"
+                      className="text-brand hover:text-brand-800 transition-colors"
                     >
                       {new URL(partner.website).host}
                     </a>
@@ -185,7 +185,7 @@ function Partner({
                         href={partner.docs}
                         target="_blank"
                         rel="noreferrer"
-                        className="text-brand-900 hover:text-brand-800 transition-colors"
+                        className="text-brand hover:text-brand-800 transition-colors"
                       >
                         <span className="flex items-center space-x-1">
                           <span>Learn</span>
diff --git a/apps/www/pages/partners/integrations/[slug].tsx b/apps/www/pages/partners/integrations/[slug].tsx
index 95a87f58eba..cf1bb175550 100644
--- a/apps/www/pages/partners/integrations/[slug].tsx
+++ b/apps/www/pages/partners/integrations/[slug].tsx
@@ -201,7 +201,7 @@ function Partner({
                     <div className="flex items-center justify-between py-2">
                       <span className="text-scale-900">Category</span>
                       <Link href={`/partners/integrations#${partner.category.toLowerCase()}`}>
-                        <a className="text-brand-900 hover:text-brand-800 transition-colors">
+                        <a className="text-brand hover:text-brand-800 transition-colors">
                           {partner.category}
                         </a>
                       </Link>
@@ -213,7 +213,7 @@ function Partner({
                         href={partner.website}
                         target="_blank"
                         rel="noreferrer"
-                        className="text-brand-900 hover:text-brand-800 transition-colors"
+                        className="text-brand hover:text-brand-800 transition-colors"
                       >
                         {new URL(partner.website).host}
                       </a>
@@ -226,7 +226,7 @@ function Partner({
                           href={partner.docs}
                           target="_blank"
                           rel="noreferrer"
-                          className="text-brand-900 hover:text-brand-800 transition-colors"
+                          className="text-brand hover:text-brand-800 transition-colors"
                         >
                           <span className="flex items-center space-x-1">
                             <span>Learn</span>
diff --git a/apps/www/pages/partners/integrations/index.tsx b/apps/www/pages/partners/integrations/index.tsx
index 2e878b0a792..7665cace8fa 100644
--- a/apps/www/pages/partners/integrations/index.tsx
+++ b/apps/www/pages/partners/integrations/index.tsx
@@ -200,10 +200,10 @@ function IntegrationPartnersPage(props: Props) {
                     <a className="text-scale-1200">INTEGRATIONS</a>
                   </Link>
                   <Link href={`/partners/experts`}>
-                    <a className="transition-colors text-brand-900 hover:text-brand-800">EXPERTS</a>
+                    <a className="transition-colors text-brand hover:text-brand-800">EXPERTS</a>
                   </Link>
                   <Link href={`/partners/integrations#become-a-partner`}>
-                    <a className="flex items-center space-x-1 transition-colors text-brand-900 hover:text-brand-800">
+                    <a className="flex items-center space-x-1 transition-colors text-brand hover:text-brand-800">
                       BECOME A PARTNER <IconArrowRight />
                     </a>
                   </Link>
diff --git a/apps/www/pages/pricing/index.tsx b/apps/www/pages/pricing/index.tsx
index 3940e1b06e6..618833e74a8 100644
--- a/apps/www/pages/pricing/index.tsx
+++ b/apps/www/pages/pricing/index.tsx
@@ -150,7 +150,7 @@ export default function IndexPage() {
         <div className="relative z-10 py-16 lg:py-28">
           <div className="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
             <div className="mx-auto max-w-3xl space-y-2 lg:max-w-none">
-              <h1 className="text-brand-900 text-base">Pricing</h1>
+              <h1 className="text-brand text-base">Pricing</h1>
               <h2 className="h1">Predictable pricing, no surprises</h2>
               <p className="p text-lg">
                 Start building for free, collaborate with a team, then scale to millions of users
@@ -174,7 +174,7 @@ export default function IndexPage() {
                   key={`row-${plan.name}`}
                   className={[
                     plan.name === 'Pro'
-                      ? 'bg-brand-1100 dark:bg-brand-900 border px-0.5 -mt-8 rounded-[6px]'
+                      ? 'bg-brand-1100 dark:bg-brand border px-0.5 -mt-8 rounded-[6px]'
                       : '',
                   ].join(' ')}
                 >
@@ -273,7 +273,7 @@ export default function IndexPage() {
                         {plan.features.map((feature) => (
                           <li key={feature} className="flex items-center py-2 first:mt-0">
                             <IconCheck
-                              className="text-brand-900 h-4 w-4"
+                              className="text-brand h-4 w-4"
                               aria-hidden="true"
                               strokeWidth={3}
                             />
@@ -331,11 +331,7 @@ export default function IndexPage() {
               >
                 {planEnterprise.features.map((feature) => (
                   <li key={feature} className="flex items-center py-2 first:mt-0">
-                    <IconCheck
-                      className="text-brand-900 h-4 w-4 "
-                      aria-hidden="true"
-                      strokeWidth={3}
-                    />
+                    <IconCheck className="text-brand h-4 w-4 " aria-hidden="true" strokeWidth={3} />
                     <span className="dark:text-scale-1200 mb-0 ml-3 ">{feature}</span>
                   </li>
                 ))}
@@ -953,7 +949,7 @@ export default function IndexPage() {
                 <a
                   target="_blank"
                   href="https://supabase.com/dashboard/support/new"
-                  className="transition text-brand-900 hover:text-brand-1000"
+                  className="transition text-brand hover:text-brand-1000"
                 >
                   open a support ticket
                 </a>{' '}
@@ -964,7 +960,7 @@ export default function IndexPage() {
                 <a
                   target="_blank"
                   href="https://supabase.com/dashboard/support/new"
-                  className="transition text-brand-900 hover:text-brand-1000"
+                  className="transition text-brand hover:text-brand-1000"
                 >
                   you can contact the team here
                 </a>
diff --git a/apps/www/pages/support.tsx b/apps/www/pages/support.tsx
index 0ee2f30c399..5dd7c36e5e1 100644
--- a/apps/www/pages/support.tsx
+++ b/apps/www/pages/support.tsx
@@ -38,9 +38,7 @@ const Index = ({}: Props) => {
         <Container>
           <SectionContainer className="">
             <div className="space-y-2 text-center">
-              <h1 className="text-brand-900 font-mono text-base uppercase tracking-widest">
-                Support
-              </h1>
+              <h1 className="text-brand font-mono text-base uppercase tracking-widest">Support</h1>
               <h1 className="h1">Get Support</h1>
               <p className="text-scale-1100 lg:text-lg">
                 The Supabase Support Team is ready to help.
@@ -64,8 +62,8 @@ const Index = ({}: Props) => {
                         our GitHub issues. This can be feature requests too!
                       </p>
                       <p className="text-scale-1100 mt-2 text-sm">
-                        <span className="text-brand-900 font-bold">Use this for:</span> Bugs and
-                        other issues
+                        <span className="text-brand font-bold">Use this for:</span> Bugs and other
+                        issues
                       </p>
                     </p>
                   </div>
@@ -112,8 +110,8 @@ const Index = ({}: Props) => {
                         join us on Discord. Browse and ask questions.
                       </p>
                       <p className="text-scale-1100 mt-2 text-sm">
-                        <span className="text-brand-900 text-sm font-bold">Use this for:</span>{' '}
-                        General questions
+                        <span className="text-brand text-sm font-bold">Use this for:</span> General
+                        questions
                       </p>
                     </p>
                   </div>
@@ -183,8 +181,8 @@ const Index = ({}: Props) => {
                         or have an issue, please contact us here.
                       </p>
                       <p className="text-scale-1100 mt-2 text-sm">
-                        <span className="text-brand-900 text-sm font-bold">Use this for:</span>{' '}
-                        Issues or questions specific to you
+                        <span className="text-brand text-sm font-bold">Use this for:</span> Issues
+                        or questions specific to you
                       </p>
                     </p>
                   </div>
diff --git a/apps/www/styles/index.css b/apps/www/styles/index.css
index e0843c3b687..2e10d81a737 100644
--- a/apps/www/styles/index.css
+++ b/apps/www/styles/index.css
@@ -95,11 +95,11 @@ h6:not(.overwrite) {
 }
 
 .heading-gradient-brand {
-  @apply text-[#3ECF8E00] bg-clip-text bg-gradient-to-b from-brand-1000 to-brand-900 dark:to-brand-800;
+  @apply text-[#3ECF8E00] bg-clip-text bg-gradient-to-b from-brand-1000 to-brand dark:to-brand-800;
 }
 
 .toc-animate {
-  @apply !translate-x-1 !text-brand-900;
+  @apply !translate-x-1 !text-brand;
 }
 
 .prose-toc a {
diff --git a/packages/ui/src/components/Button/Button.module.css b/packages/ui/src/components/Button/Button.module.css
index 8c4d9b48a9a..d9cac9315ac 100644
--- a/packages/ui/src/components/Button/Button.module.css
+++ b/packages/ui/src/components/Button/Button.module.css
@@ -51,7 +51,7 @@
 */
 /* .sbui-btn-primary {
   @apply text-white bg-brand-800 hover:bg-brand-600;
-  @apply dark:hover:bg-brand-900;
+  @apply dark:hover:bg-brand;
 } */
 .dark .sbui-btn-primary {
   text-shadow: 0px 0px 4px rgba(38 111 78 / 50%);
@@ -87,7 +87,7 @@
   @apply dark:text-white dark:border-dark-400 dark:hover:text-white dark:hover:border-white;
 } */
 /* .sbui-btn-link {
-  @apply bg-transparent text-brand-800 border-none hover:bg-brand-900 hover:bg-opacity-25;
+  @apply bg-transparent text-brand-800 border-none hover:bg-brand hover:bg-opacity-25;
   box-shadow: none;
 } */
 /* .sbui-btn-text {
diff --git a/packages/ui/src/components/Command/Command.icons.tsx b/packages/ui/src/components/Command/Command.icons.tsx
index 9d0914765b0..bc3fdcee576 100644
--- a/packages/ui/src/components/Command/Command.icons.tsx
+++ b/packages/ui/src/components/Command/Command.icons.tsx
@@ -4,7 +4,7 @@ interface AiIconProps {
   className?: string
 }
 
-export const AiIcon = ({ className = 'text-brand-900' }: AiIconProps) => (
+export const AiIcon = ({ className = 'text-brand' }: AiIconProps) => (
   <svg
     className={`w-6 h-6 ${className}`}
     width="16"
@@ -30,7 +30,7 @@ export const AiIcon = ({ className = 'text-brand-900' }: AiIconProps) => (
 export const AiIconChat = () => (
   <div
     className="w-7 h-7
-    bg-gradient-to-r from-brand-900 to-brand-800
+    bg-gradient-to-r from-brand to-brand-800
 
     ring-brand-600
     ring-1
diff --git a/packages/ui/src/components/Command/CommandMenu.tsx b/packages/ui/src/components/Command/CommandMenu.tsx
index c76fb086872..04d856720f7 100644
--- a/packages/ui/src/components/Command/CommandMenu.tsx
+++ b/packages/ui/src/components/Command/CommandMenu.tsx
@@ -122,7 +122,7 @@ const CommandMenu = ({ projectRef }: CommandMenuProps) => {
                   forceMount
                 >
                   <AiIcon />
-                  <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-900 to-brand-1100">
+                  <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand to-brand-1100">
                     Ask Supabase AI
                     {search ? (
                       <>
diff --git a/packages/ui/src/components/Command/GenerateSQL/SQLOutputActions.tsx b/packages/ui/src/components/Command/GenerateSQL/SQLOutputActions.tsx
index fe59affa469..270c78f66de 100644
--- a/packages/ui/src/components/Command/GenerateSQL/SQLOutputActions.tsx
+++ b/packages/ui/src/components/Command/GenerateSQL/SQLOutputActions.tsx
@@ -81,7 +81,7 @@ const SQLOutputActions = ({ answer, messages }: SQLOutputActionsProps) => {
           type="default"
           icon={
             showCopied ? (
-              <IconCheck size="tiny" className="text-brand-900" strokeWidth={2} />
+              <IconCheck size="tiny" className="text-brand" strokeWidth={2} />
             ) : (
               <IconClipboard size="tiny" />
             )
@@ -98,7 +98,7 @@ const SQLOutputActions = ({ answer, messages }: SQLOutputActionsProps) => {
           disabled={isSaving}
           icon={
             isSaved ? (
-              <IconCheck size="tiny" className="text-brand-900" strokeWidth={2} />
+              <IconCheck size="tiny" className="text-brand" strokeWidth={2} />
             ) : (
               <IconSave size="tiny" />
             )
diff --git a/packages/ui/src/components/Form/Form.stories.tsx b/packages/ui/src/components/Form/Form.stories.tsx
index 277ae09180e..45f022d2f7c 100644
--- a/packages/ui/src/components/Form/Form.stories.tsx
+++ b/packages/ui/src/components/Form/Form.stories.tsx
@@ -1,14 +1,5 @@
 import { Form } from '.'
-import {
-  Input,
-  Button,
-  InputNumber,
-  Toggle,
-  Checkbox,
-  Radio,
-  Select,
-  Listbox,
-} from '../../index'
+import { Input, Button, InputNumber, Toggle, Checkbox, Radio, Select, Listbox } from '../../index'
 
 import * as Yup from 'yup'
 import { User } from '../Icon/IconImportHandler'
@@ -103,14 +94,8 @@ export const InputLevelValidation = () => {
 export const InputLevelValidationYip = () => {
   // validation schema
   const SignupSchema = Yup.object().shape({
-    firstname: Yup.string()
-      .min(2, 'Too Short!')
-      .max(50, 'Too Long!')
-      .required('Required'),
-    lastname: Yup.string()
-      .min(2, 'Too Short!')
-      .max(50, 'Too Long!')
-      .required('Required'),
+    firstname: Yup.string().min(2, 'Too Short!').max(50, 'Too Long!').required('Required'),
+    lastname: Yup.string().min(2, 'Too Short!').max(50, 'Too Long!').required('Required'),
     email: Yup.string().email('Invalid email').required('Required'),
   })
 
@@ -131,24 +116,9 @@ export const InputLevelValidationYip = () => {
     >
       {({ isSubmitting }: any) => (
         <div className="space-y-4">
-          <Input
-            id="firstname"
-            name="firstname"
-            label="firstname"
-            placeholder="firstname"
-          />
-          <Input
-            id="lastname"
-            name="lastname"
-            label="lastname"
-            placeholder="lastname"
-          />
-          <Input
-            id="email"
-            name="email"
-            label="Email"
-            placeholder="This is your email"
-          />
+          <Input id="firstname" name="firstname" label="firstname" placeholder="firstname" />
+          <Input id="lastname" name="lastname" label="lastname" placeholder="lastname" />
+          <Input id="email" name="email" label="Email" placeholder="This is your email" />
           <Button loading={isSubmitting} type="primary" htmlType="submit">
             Submit
           </Button>
@@ -239,9 +209,7 @@ export const LargerExample = () => {
 
           if (!values.email) {
             errors.email = 'Required'
-          } else if (
-            !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
-          ) {
+          } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
             errors.email = 'Invalid email address'
           }
 
@@ -286,21 +254,9 @@ export const LargerExample = () => {
           <>
             <div className="space-y-8">
               <p>{isSubmitting ? 'submitting' : 'not submitting'}</p>
-              <Input
-                id="email"
-                label="Email"
-                placeholder="something@gmail.com"
-              />
-              <Input
-                id="last_name"
-                label="last name"
-                placeholder="something in here"
-              />
-              <Select
-                id="profession"
-                label="Profession"
-                placeholder="something in here"
-              >
+              <Input id="email" label="Email" placeholder="something@gmail.com" />
+              <Input id="last_name" label="last name" placeholder="something in here" />
+              <Select id="profession" label="Profession" placeholder="something in here">
                 <Select.Option key="empty-enum" value="">
                   ---
                 </Select.Option>
@@ -349,11 +305,7 @@ export const LargerExample = () => {
                 type="list"
               >
                 <Radio value="pizza" label="Pizza" description="hello world" />
-                <Radio
-                  value="burger"
-                  label="Burger"
-                  description="hello world"
-                />
+                <Radio value="burger" label="Burger" description="hello world" />
                 <Radio value="fries" label="Fries" description="hello world" />
               </Radio.Group>
 
@@ -370,20 +322,12 @@ export const LargerExample = () => {
                       value={person.value}
                       label={person.label}
                       addOnBefore={({ active, selected }: any) => (
-                        <img
-                          src={person.avatar}
-                          alt=""
-                          className="h-6 w-6 rounded-full"
-                        />
+                        <img src={person.avatar} alt="" className="h-6 w-6 rounded-full" />
                       )}
                       children={({ active, selected }: any) => {
                         // console.log('selected', selected)
                         // console.log('active', active)
-                        return (
-                          <span className={'font-normal block truncate'}>
-                            {person.label}
-                          </span>
-                        )
+                        return <span className={'font-normal block truncate'}>{person.label}</span>
                       }}
                     />
                   )
@@ -456,12 +400,10 @@ export const CardForm = () => {
           <Panel
             header={
               <>
-                <h3 className="text-scale-1200 text-xl font-semibold">
-                  Custom Options
-                </h3>
+                <h3 className="text-scale-1200 text-xl font-semibold">Custom Options</h3>
                 <p className="text-scale-900">
-                  These settings apply to payment pages you create using Stripe
-                  Checkout and Payment Links.
+                  These settings apply to payment pages you create using Stripe Checkout and Payment
+                  Links.
                 </p>
               </>
             }
@@ -469,18 +411,10 @@ export const CardForm = () => {
               <>
                 <div className="border-t border-scale-400"></div>
                 <div className="py-3 px-6 flex gap-2 justify-end">
-                  <Button
-                    loading={isSubmitting}
-                    type="secondary"
-                    htmlType="submit"
-                  >
+                  <Button loading={isSubmitting} type="secondary" htmlType="submit">
                     Cancel
                   </Button>
-                  <Button
-                    loading={isSubmitting}
-                    type="primary"
-                    htmlType="submit"
-                  >
+                  <Button loading={isSubmitting} type="primary" htmlType="submit">
                     Save
                   </Button>
                 </div>
@@ -490,11 +424,7 @@ export const CardForm = () => {
             {/* <p>{isSubmitting ? 'submitting' : 'not submitting'}</p> */}
             {/* <div className="border-t border-scale-400"></div> */}
             <Section
-              header={
-                <label className="text-sm text-scale-1200 col-span-4">
-                  Faster checkout
-                </label>
-              }
+              header={<label className="text-sm text-scale-1200 col-span-4">Faster checkout</label>}
             >
               <Toggle
                 className="col-span-8"
@@ -506,11 +436,7 @@ export const CardForm = () => {
             </Section>
             <div className="border-t border-scale-400"></div>
             <Section
-              header={
-                <label className="text-sm text-scale-1200 col-span-4">
-                  Faster checkout
-                </label>
-              }
+              header={<label className="text-sm text-scale-1200 col-span-4">Faster checkout</label>}
             >
               <Radio.Group
                 className="col-span-8"
@@ -537,11 +463,7 @@ export const CardForm = () => {
             </Section>
             <div className="border-t border-scale-400"></div>
             <Section
-              header={
-                <label className="text-sm text-scale-1200 col-span-4">
-                  Faster checkout
-                </label>
-              }
+              header={<label className="text-sm text-scale-1200 col-span-4">Faster checkout</label>}
             >
               <div className="col-span-8 space-y-4">
                 <Input name="app_id" label="Application ID in Stripe" />
@@ -551,7 +473,7 @@ export const CardForm = () => {
                   descriptionText={
                     <span>
                       This can be found in{' '}
-                      <span className="text-brand-900 underline cursor-pointer transition hover:text-brand-800">
+                      <span className="text-brand underline cursor-pointer transition hover:text-brand-800">
                         the developer settings
                       </span>
                     </span>
diff --git a/packages/ui/src/components/Form/examples/AuthForm.tsx b/packages/ui/src/components/Form/examples/AuthForm.tsx
index 5053216d6bb..b64e5d18614 100644
--- a/packages/ui/src/components/Form/examples/AuthForm.tsx
+++ b/packages/ui/src/components/Form/examples/AuthForm.tsx
@@ -40,7 +40,7 @@ const DocsButton = () => {
                 transition
               "
     >
-      <div className="bg-brand-900 h-10 w-10 rounded p-1 transition duration-500 group-hover:-rotate-3 group-hover:scale-110">
+      <div className="bg-brand h-10 w-10 rounded p-1 transition duration-500 group-hover:-rotate-3 group-hover:scale-110">
         {/* <img
             className="text-white w-12 h-12"
             src="/icons/docs-illustration.svg"
@@ -51,7 +51,7 @@ const DocsButton = () => {
         <p className="text-scale-900 text-xs">
           Learn how to use Supabase Auth with Auth Policies to pick and choose what users see what.
         </p>
-        <p className="text-brand-900 mt-2 flex items-center gap-1 text-xs">
+        <p className="text-brand mt-2 flex items-center gap-1 text-xs">
           See Documenation
           <span className="transition group-hover:translate-x-1">
             <IconArrowRight strokeWidth={2} width={12} />
@@ -338,8 +338,8 @@ const AuthForm = () => {
             </div>
             <div className="flex items-center gap-3">
               {active ? (
-                <div className="bg-brand-200 border-brand-700 text-brand-900 flex items-center gap-1 rounded-full border py-1 px-1 text-xs">
-                  <span className="bg-brand-900 text-brand-200 rounded-full p-0.5 text-xs">
+                <div className="bg-brand-200 border-brand-700 text-brand flex items-center gap-1 rounded-full border py-1 px-1 text-xs">
+                  <span className="bg-brand text-brand-200 rounded-full p-0.5 text-xs">
                     <IconCheck strokeWidth={2} size={12} />
                   </span>
                   <span className="px-1">Enabled</span>
@@ -1114,7 +1114,7 @@ export function WholeForm() {
                 transition
               "
             >
-              <div className="bg-brand-900 h-10 w-10 rounded p-1 transition duration-500 group-hover:-rotate-3 group-hover:scale-110">
+              <div className="bg-brand h-10 w-10 rounded p-1 transition duration-500 group-hover:-rotate-3 group-hover:scale-110">
                 {/* <img
             className="text-white w-12 h-12"
             src="/icons/docs-illustration.svg"
@@ -1126,7 +1126,7 @@ export function WholeForm() {
                   Learn how to use Supabase Auth with Auth Policies to pick and choose what users
                   see what.
                 </p>
-                <p className="text-brand-900 mt-2 flex items-center gap-1 text-xs">
+                <p className="text-brand mt-2 flex items-center gap-1 text-xs">
                   See Documenation
                   <span className="transition group-hover:translate-x-1">
                     <IconArrowRight strokeWidth={2} width={12} />
diff --git a/packages/ui/src/components/GlassPanel/GlassPanel.tsx b/packages/ui/src/components/GlassPanel/GlassPanel.tsx
index 4f84bb995da..1d9425b936d 100644
--- a/packages/ui/src/components/GlassPanel/GlassPanel.tsx
+++ b/packages/ui/src/components/GlassPanel/GlassPanel.tsx
@@ -114,7 +114,7 @@ const GlassPanel = ({
         </div>
 
         {children && <span className="text-sm text-scale-1100 flex-grow">{children}</span>}
-        {showLink && <span className="text-brand-900 justify-end text-sm">Learn more</span>}
+        {showLink && <span className="text-brand justify-end text-sm">Learn more</span>}
       </div>
     </div>
   )
diff --git a/packages/ui/src/components/IconPanel/IconPanel.tsx b/packages/ui/src/components/IconPanel/IconPanel.tsx
index 00fc05a700f..90eb83e55e4 100644
--- a/packages/ui/src/components/IconPanel/IconPanel.tsx
+++ b/packages/ui/src/components/IconPanel/IconPanel.tsx
@@ -70,7 +70,13 @@ const IconPanel = ({
                 <img
                   className={iconSize === 'lg' ? 'w-8' : 'w-5'}
                   src={`${icon}${hasLightIcon && !isDarkMode ? '-light' : ''}.svg`}
-                  alt={title !== undefined ? `${title} Icon` : tooltip !== undefined ? `${tooltip} Icon` : 'Icon'}
+                  alt={
+                    title !== undefined
+                      ? `${title} Icon`
+                      : tooltip !== undefined
+                      ? `${tooltip} Icon`
+                      : 'Icon'
+                  }
                 />
               </IconContainer>
             ) : (
@@ -92,7 +98,7 @@ const IconPanel = ({
                 )}
               </div>
               {children && <span className="text-sm text-scale-1100 not-prose">{children}</span>}
-              {showLink && <span className="text-brand-900 justify-end text-sm">Learn more</span>}
+              {showLink && <span className="text-brand justify-end text-sm">Learn more</span>}
             </div>
           </div>
         </div>
diff --git a/packages/ui/src/lib/theme/customThemeExample.ts b/packages/ui/src/lib/theme/customThemeExample.ts
index 284a945e2d8..91eb4ad1bcd 100644
--- a/packages/ui/src/lib/theme/customThemeExample.ts
+++ b/packages/ui/src/lib/theme/customThemeExample.ts
@@ -35,7 +35,7 @@ const default__padding_and_text = {
 export default {
   button: {
     type: {
-      primary: `${defaults.brandBackground} text-white hover:bg-brand-600 dark:hover:bg-brand-900`,
+      primary: `${defaults.brandBackground} text-white hover:bg-brand-600 dark:hover:bg-brand`,
     },
   },
 }
diff --git a/packages/ui/src/lib/theme/defaultTheme.ts b/packages/ui/src/lib/theme/defaultTheme.ts
index dc20809681e..25782badb7e 100644
--- a/packages/ui/src/lib/theme/defaultTheme.ts
+++ b/packages/ui/src/lib/theme/defaultTheme.ts
@@ -270,7 +270,7 @@ export default {
       },
       success: {
         base: `bg-brand-300 dark:bg-brand-100 border-brand-700`,
-        icon: `text-brand-900`,
+        icon: `text-brand`,
         header: `text-brand-1200`,
         description: `text-brand-1100`,
       },
@@ -568,7 +568,7 @@ export default {
       bg-transparent
       ${defaults.focus}
       focus:ring-scale-400
-      text-brand-900
+      text-brand
       border-scale-700
       shadow-sm
       rounded
@@ -629,7 +629,7 @@ export default {
       focus:ring-brand-400
       border-scale-700
 
-      text-brand-900
+      text-brand
       shadow-sm
       cursor-pointer
       peer
@@ -934,8 +934,8 @@ export default {
       hover:bg-scale-700
     `,
     active: `
-      !bg-brand-900
-      !hover:bg-brand-900
+      !bg-brand
+      !hover:bg-brand
     `,
     handle_container: {
       tiny: 'h-4 w-7',
@@ -1268,8 +1268,8 @@ export default {
             z-10
 
             border-l
-            border-brand-900
-            group-hover:border-brand-900
+            border-brand
+            group-hover:border-brand
           `,
           rounded: `rounded-md`,
         },
@@ -1455,8 +1455,8 @@ export default {
     option_active: `text-scale-1200 bg-scale-600`,
     option_disabled: `cursor-not-allowed opacity-50`,
     option_inner: `flex items-center space-x-3`,
-    option_check: `absolute inset-y-0 right-0 flex items-center pr-3 text-brand-900`,
-    option_check_active: `text-brand-900`,
+    option_check: `absolute inset-y-0 right-0 flex items-center pr-3 text-brand`,
+    option_check_active: `text-brand`,
     option_check_icon: `h-5 w-5`,
   },
 
@@ -1500,7 +1500,7 @@ export default {
     },
     spinner: `
       absolute
-      text-brand-900 animate-spin
+      text-brand animate-spin
       inset-0
       m-auto
     `,
diff --git a/studio/.storybook/preview.css b/studio/.storybook/preview.css
index c12137dbd9d..2ba4312331c 100644
--- a/studio/.storybook/preview.css
+++ b/studio/.storybook/preview.css
@@ -105,9 +105,9 @@
 }
 
 .react-datepicker__day--range-start {
-  @apply bg-brand-900 text-white hover:text-scale-700 hover:bg-white;
+  @apply bg-brand text-white hover:text-scale-700 hover:bg-white;
 }
 
 .react-datepicker__day--range-end {
-  @apply bg-brand-900 text-white hover:text-scale-700 hover:bg-white;
+  @apply bg-brand text-white hover:text-scale-700 hover:bg-white;
 }
diff --git a/studio/components/grid/components/header/Header.tsx b/studio/components/grid/components/header/Header.tsx
index 1a27e3a5fff..80f32781146 100644
--- a/studio/components/grid/components/header/Header.tsx
+++ b/studio/components/grid/components/header/Header.tsx
@@ -142,7 +142,7 @@ const DefaultHeader = ({
                               <div
                                 className={[
                                   'border border-scale-1100 w-[15px] h-[4px] translate-x-0.5',
-                                  'transition duration-200 group-data-[highlighted]:border-brand-900 group-data-[highlighted]:translate-x-0',
+                                  'transition duration-200 group-data-[highlighted]:border-brand group-data-[highlighted]:translate-x-0',
                                 ].join(' ')}
                               />
                             </div>
@@ -168,7 +168,7 @@ const DefaultHeader = ({
                               <div
                                 className={[
                                   'border border-scale-1100 w-[4px] h-[15px] -translate-y-0.5',
-                                  'transition duration-200 group-data-[highlighted]:border-brand-900 group-data-[highlighted]:translate-y-0',
+                                  'transition duration-200 group-data-[highlighted]:border-brand group-data-[highlighted]:translate-y-0',
                                 ].join(' ')}
                               />
                             </div>
@@ -193,7 +193,7 @@ const DefaultHeader = ({
                               <IconArrowUp
                                 className={clsx(
                                   'transition duration-200 absolute bottom-0 right-0 translate-y-1 opacity-0 bg-brand-700 rounded-full',
-                                  'group-data-[highlighted]:translate-y-0 group-data-[highlighted]:text-brand-900 group-data-[highlighted]:opacity-100'
+                                  'group-data-[highlighted]:translate-y-0 group-data-[highlighted]:text-brand group-data-[highlighted]:opacity-100'
                                 )}
                                 strokeWidth={3}
                                 size={12}
diff --git a/studio/components/grid/components/header/RefreshButton.tsx b/studio/components/grid/components/header/RefreshButton.tsx
index 27bd851fcac..ae4f21faa4b 100644
--- a/studio/components/grid/components/header/RefreshButton.tsx
+++ b/studio/components/grid/components/header/RefreshButton.tsx
@@ -51,7 +51,7 @@ const RefreshButton = ({ table, isRefetching }: RefreshButtonProps) => {
         !status ? (
           <IconRefreshCw className="text-scale-1000" strokeWidth={1.5} />
         ) : status === 'saved' ? (
-          <IconCheck className="text-brand-900" strokeWidth={3} />
+          <IconCheck className="text-brand" strokeWidth={3} />
         ) : (
           <></>
         )
diff --git a/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx b/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
index 0851c3e397f..2107aac22b7 100644
--- a/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
+++ b/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
@@ -104,8 +104,8 @@ const ProviderForm = ({ provider }: ProviderFormProps) => {
           </div>
           <div className="flex items-center gap-3">
             {isActive ? (
-              <div className="flex items-center gap-1 rounded-full border border-brand-700 bg-brand-200 py-1 px-1 text-xs text-brand-900">
-                <span className="rounded-full bg-brand-900 p-0.5 text-xs text-brand-200">
+              <div className="flex items-center gap-1 rounded-full border border-brand-700 bg-brand-200 py-1 px-1 text-xs text-brand">
+                <span className="rounded-full bg-brand p-0.5 text-xs text-brand-200">
                   <IconCheck strokeWidth={2} size={12} />
                 </span>
                 <span className="px-1">Enabled</span>
diff --git a/studio/components/interfaces/Auth/Policies/PolicySelection.tsx b/studio/components/interfaces/Auth/Policies/PolicySelection.tsx
index af4727eeb8f..adb9d3aa77e 100644
--- a/studio/components/interfaces/Auth/Policies/PolicySelection.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicySelection.tsx
@@ -62,7 +62,7 @@ const PolicySelection: FC<Props> = ({
           <a
             target="_blank"
             rel="noreferrer"
-            className="text-brand-900 transition-colors hover:text-brand-1200"
+            className="text-brand transition-colors hover:text-brand-1200"
             href="https://supabase.com/docs/guides/auth#policies"
           >
             here
diff --git a/studio/components/interfaces/BillingV2/SpendCapModal.tsx b/studio/components/interfaces/BillingV2/SpendCapModal.tsx
index 81e06529ddd..e3bb6b7f7ee 100644
--- a/studio/components/interfaces/BillingV2/SpendCapModal.tsx
+++ b/studio/components/interfaces/BillingV2/SpendCapModal.tsx
@@ -165,7 +165,7 @@ const SpendCapModal: FC<Props> = ({ visible, onHide }) => {
             <p>
               See{' '}
               <Link href="https://supabase.com/pricing" passHref>
-                <a className="text-brand-900" target="_blank" rel="noreferrer">
+                <a className="text-brand" target="_blank" rel="noreferrer">
                   <span>pricing page</span>
                 </a>
               </Link>{' '}
diff --git a/studio/components/interfaces/BillingV2/Subscription/Tier/EnterpriseCard.tsx b/studio/components/interfaces/BillingV2/Subscription/Tier/EnterpriseCard.tsx
index af9608f0dd0..cbf139f924b 100644
--- a/studio/components/interfaces/BillingV2/Subscription/Tier/EnterpriseCard.tsx
+++ b/studio/components/interfaces/BillingV2/Subscription/Tier/EnterpriseCard.tsx
@@ -18,13 +18,13 @@ const EnterpriseCard = ({ plan, isCurrentPlan }: EnterpriseCardProps) => {
     >
       <div className="flex flex-col justify-center px-4">
         <div className="flex items-center space-x-2">
-          <p className={clsx('text-brand-900 text-sm uppercase')}>{plan.name}</p>
+          <p className={clsx('text-brand text-sm uppercase')}>{plan.name}</p>
           {isCurrentPlan ? (
             <div className="text-xs bg-scale-500 text-scale-1000 rounded px-2 py-0.5">
               Current plan
             </div>
           ) : plan.nameBadge ? (
-            <div className="text-xs bg-brand-400 text-brand-900 rounded px-2 py-0.5">
+            <div className="text-xs bg-brand-400 text-brand rounded px-2 py-0.5">
               {plan.nameBadge}
             </div>
           ) : null}
@@ -43,7 +43,7 @@ const EnterpriseCard = ({ plan, isCurrentPlan }: EnterpriseCardProps) => {
         <ul role="list" className="text-xs text-scale-1000 md:grid md:grid-cols-2 md:gap-x-10">
           {plan.features.map((feature) => (
             <li key={feature} className="flex items-center py-2 first:mt-0">
-              <IconCheck className="text-brand-900 h-4 w-4" aria-hidden="true" strokeWidth={3} />
+              <IconCheck className="text-brand h-4 w-4" aria-hidden="true" strokeWidth={3} />
               <span className="dark:text-scale-1200 mb-0 ml-3 ">{feature}</span>
             </li>
           ))}
diff --git a/studio/components/interfaces/BillingV2/Subscription/Tier/SubscriptionTier.tsx b/studio/components/interfaces/BillingV2/Subscription/Tier/SubscriptionTier.tsx
index 443c4b9b08a..0bfde8d1793 100644
--- a/studio/components/interfaces/BillingV2/Subscription/Tier/SubscriptionTier.tsx
+++ b/studio/components/interfaces/BillingV2/Subscription/Tier/SubscriptionTier.tsx
@@ -75,7 +75,7 @@ const SubscriptionTier = ({}: SubscriptionTierProps) => {
           <div className="col-span-12 lg:col-span-7 space-y-6">
             <div>
               <p className="text-sm">This project is currently on the plan:</p>
-              <p className="text-2xl text-brand-900 uppercase">{tierName}</p>
+              <p className="text-2xl text-brand uppercase">{tierName}</p>
             </div>
             <div>
               <ProjectUpdateDisabledTooltip projectUpdateDisabled={projectUpdateDisabled}>
diff --git a/studio/components/interfaces/BillingV2/Subscription/Tier/TierUpdateSidePanel.tsx b/studio/components/interfaces/BillingV2/Subscription/Tier/TierUpdateSidePanel.tsx
index 2472ed8332c..2fdd7e919c9 100644
--- a/studio/components/interfaces/BillingV2/Subscription/Tier/TierUpdateSidePanel.tsx
+++ b/studio/components/interfaces/BillingV2/Subscription/Tier/TierUpdateSidePanel.tsx
@@ -155,13 +155,13 @@ const TierUpdateSidePanel = () => {
                 >
                   <div className="w-full">
                     <div className="flex items-center space-x-2">
-                      <p className={clsx('text-brand-900 text-sm uppercase')}>{plan.name}</p>
+                      <p className={clsx('text-brand text-sm uppercase')}>{plan.name}</p>
                       {isCurrentPlan ? (
                         <div className="text-xs bg-scale-500 text-scale-1000 rounded px-2 py-0.5">
                           Current plan
                         </div>
                       ) : plan.nameBadge ? (
-                        <div className="text-xs bg-brand-400 text-brand-900 rounded px-2 py-0.5">
+                        <div className="text-xs bg-brand-400 text-brand rounded px-2 py-0.5">
                           {plan.nameBadge}
                         </div>
                       ) : (
@@ -258,7 +258,7 @@ const TierUpdateSidePanel = () => {
                         <li key={feature} className="flex py-2">
                           <div className="w-[12px]">
                             <IconCheck
-                              className="h-3 w-3 text-brand-900 translate-y-[2.5px]"
+                              className="h-3 w-3 text-brand translate-y-[2.5px]"
                               aria-hidden="true"
                               strokeWidth={3}
                             />
diff --git a/studio/components/interfaces/BillingV2/Usage/Usage.constants.tsx b/studio/components/interfaces/BillingV2/Usage/Usage.constants.tsx
index abb971d2db1..e4373adc574 100644
--- a/studio/components/interfaces/BillingV2/Usage/Usage.constants.tsx
+++ b/studio/components/interfaces/BillingV2/Usage/Usage.constants.tsx
@@ -195,7 +195,7 @@ export const USAGE_CATEGORIES: CategoryMeta[] = [
                 The disk is expanded to be 50% larger. Auto-scaling can only take place once every 6
                 hours. You can also{' '}
                 <Link passHref href={`/project/${ref}/settings/database#diskManagement`}>
-                  <a className="text-brand-900 transition hover:text-brand-1000">preprovision</a>
+                  <a className="text-brand transition hover:text-brand-1000">preprovision</a>
                 </Link>{' '}
                 disk for loading larger amounts of data.
               </p>
diff --git a/studio/components/interfaces/Database/Backups/BackupsError.tsx b/studio/components/interfaces/Database/Backups/BackupsError.tsx
index 1587d28fa87..8325dc6f8a0 100644
--- a/studio/components/interfaces/Database/Backups/BackupsError.tsx
+++ b/studio/components/interfaces/Database/Backups/BackupsError.tsx
@@ -9,7 +9,7 @@ const BackupsError = () => {
         <p className="text-sm">
           Failed to retrieve backups for this project. Please contact{' '}
           <Link href="/support/new">
-            <a className="text-brand-900">support</a>
+            <a className="text-brand">support</a>
           </Link>
           .
         </p>
diff --git a/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx b/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx
index 9a1e23206e7..cdb28c620c3 100644
--- a/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx
+++ b/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx
@@ -67,7 +67,7 @@ const PITRNotice = ({}) => {
           <p className="text-sm text-scale-1100">
             Database changes are logged every <span className="text-scale-1200">2 minutes</span>,
             with a total recovery period of up to{' '}
-            <span className="text-brand-900">{retentionPeriod} days</span>.
+            <span className="text-brand">{retentionPeriod} days</span>.
           </p>
         </div>
       </div>
diff --git a/studio/components/interfaces/Database/Roles/RoleRow.tsx b/studio/components/interfaces/Database/Roles/RoleRow.tsx
index cd2de5f63be..f069754cb84 100644
--- a/studio/components/interfaces/Database/Roles/RoleRow.tsx
+++ b/studio/components/interfaces/Database/Roles/RoleRow.tsx
@@ -114,8 +114,8 @@ const RoleRow: FC<Props> = ({ role, disabled = false, onSelectDelete }) => {
                   {role.active_connections > 0 && (
                     <div className="relative h-2 w-2">
                       <span className="flex h-2 w-2">
-                        <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand-900 opacity-75"></span>
-                        <span className="relative inline-flex h-2 w-2 rounded-full bg-brand-900 opacity-75"></span>
+                        <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand opacity-75"></span>
+                        <span className="relative inline-flex h-2 w-2 rounded-full bg-brand opacity-75"></span>
                       </span>
                     </div>
                   )}
diff --git a/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx b/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx
index 4a9dfc3ac67..cd5467b1fde 100644
--- a/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx
+++ b/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx
@@ -205,7 +205,7 @@ function TableNode({ data, targetPosition, sourcePosition }: NodeProps<TableNode
     <>
       {data.isForeign ? (
         <div className="rounded-lg overflow-hidden">
-          <header className="text-[0.5rem] leading-5 font-bold px-2 text-center bg-brand-900 text-gray-300">
+          <header className="text-[0.5rem] leading-5 font-bold px-2 text-center bg-brand text-gray-300">
             {data.name}
             {targetPosition && (
               <Handle
@@ -219,7 +219,7 @@ function TableNode({ data, targetPosition, sourcePosition }: NodeProps<TableNode
         </div>
       ) : (
         <div className="rounded-lg overflow-hidden" style={{ width: NODE_WIDTH / 2 }}>
-          <header className="text-[0.5rem] leading-5 font-bold px-2 text-center bg-brand-900 text-gray-300">
+          <header className="text-[0.5rem] leading-5 font-bold px-2 text-center bg-brand text-gray-300">
             {data.name}
           </header>
 
@@ -230,7 +230,7 @@ function TableNode({ data, targetPosition, sourcePosition }: NodeProps<TableNode
             >
               <span
                 className={clsx(
-                  column.isPrimary && 'border-l-2 border-l-brand-900 pl-[6px] pr-2',
+                  column.isPrimary && 'border-l-2 border-l-brand pl-[6px] pr-2',
                   'pl-2 text-ellipsis overflow-hidden whitespace-nowrap'
                 )}
               >
diff --git a/studio/components/interfaces/Functions/CommandRender.tsx b/studio/components/interfaces/Functions/CommandRender.tsx
index 6a3b83b2a86..c56be3351b5 100644
--- a/studio/components/interfaces/Functions/CommandRender.tsx
+++ b/studio/components/interfaces/Functions/CommandRender.tsx
@@ -38,7 +38,7 @@ const Command = ({ item }: any) => {
               }}
             >
               {isCopied ? (
-                <div className="text-brand-900">
+                <div className="text-brand">
                   <IconCheck size={14} strokeWidth={3} />
                 </div>
               ) : (
diff --git a/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx b/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx
index a601e794816..3d984779e4e 100644
--- a/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx
+++ b/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx
@@ -181,9 +181,7 @@ const EdgeFunctionDetails = () => {
                         <div className="flex items-center space-x-2">
                           <p className="text-sm">
                             Import maps are{' '}
-                            <span
-                              className={clsx(hasImportMap ? 'text-brand-900' : 'text-amber-900')}
-                            >
+                            <span className={clsx(hasImportMap ? 'text-brand' : 'text-amber-900')}>
                               {hasImportMap ? 'used' : 'not used'}
                             </span>{' '}
                             for this function
diff --git a/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx b/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx
index 4237781074c..e968c6e115e 100644
--- a/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx
+++ b/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx
@@ -55,7 +55,7 @@ const EdgeFunctionsListItem: FC<Props> = ({ function: item }) => {
             }}
           >
             {isCopied ? (
-              <div className="text-brand-900">
+              <div className="text-brand">
                 <IconCheck size={14} strokeWidth={3} />
               </div>
             ) : (
diff --git a/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx b/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx
index 815ac8cec05..b493941459f 100644
--- a/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx
+++ b/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx
@@ -139,7 +139,7 @@ const APIKeys = () => {
                   for your tables and configured policies. You may also use the service key which
                   can be found{' '}
                   <Link href={`/project/${projectRef}/settings/api`}>
-                    <a className="transition text-brand-800 hover:text-brand-900">here</a>
+                    <a className="transition text-brand-800 hover:text-brand">here</a>
                   </Link>{' '}
                   to bypass RLS.
                 </p>
diff --git a/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx b/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx
index 090b720fb29..d8a76c8ef54 100644
--- a/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx
+++ b/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx
@@ -242,7 +242,7 @@ const NewProjectPanel: FC<Props> = ({}) => {
             <p className="text-base text-scale-1100 lg:max-w-sm">
               Interact with your database through the{' '}
               <Link href="https://supabase.com/docs/reference">
-                <a className="text-brand-900">Supabase client libraries</a>
+                <a className="text-brand">Supabase client libraries</a>
               </Link>{' '}
               with your API keys.
             </p>
diff --git a/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx b/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx
index c463ce98397..7a864aef626 100644
--- a/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx
+++ b/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx
@@ -132,7 +132,7 @@ const AuditLogs = () => {
                   return (
                     <Alert title="" variant="info" className="mx-3 pl-2 pr-2 pt-1 pb-2">
                       Your organization has a log retention period of{' '}
-                      <span className="text-brand-900">
+                      <span className="text-brand">
                         {retentionPeriod} day
                         {retentionPeriod > 1 ? 's' : ''}
                       </span>
diff --git a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/EnterpriseCard.tsx b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/EnterpriseCard.tsx
index af9608f0dd0..cbf139f924b 100644
--- a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/EnterpriseCard.tsx
+++ b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/EnterpriseCard.tsx
@@ -18,13 +18,13 @@ const EnterpriseCard = ({ plan, isCurrentPlan }: EnterpriseCardProps) => {
     >
       <div className="flex flex-col justify-center px-4">
         <div className="flex items-center space-x-2">
-          <p className={clsx('text-brand-900 text-sm uppercase')}>{plan.name}</p>
+          <p className={clsx('text-brand text-sm uppercase')}>{plan.name}</p>
           {isCurrentPlan ? (
             <div className="text-xs bg-scale-500 text-scale-1000 rounded px-2 py-0.5">
               Current plan
             </div>
           ) : plan.nameBadge ? (
-            <div className="text-xs bg-brand-400 text-brand-900 rounded px-2 py-0.5">
+            <div className="text-xs bg-brand-400 text-brand rounded px-2 py-0.5">
               {plan.nameBadge}
             </div>
           ) : null}
@@ -43,7 +43,7 @@ const EnterpriseCard = ({ plan, isCurrentPlan }: EnterpriseCardProps) => {
         <ul role="list" className="text-xs text-scale-1000 md:grid md:grid-cols-2 md:gap-x-10">
           {plan.features.map((feature) => (
             <li key={feature} className="flex items-center py-2 first:mt-0">
-              <IconCheck className="text-brand-900 h-4 w-4" aria-hidden="true" strokeWidth={3} />
+              <IconCheck className="text-brand h-4 w-4" aria-hidden="true" strokeWidth={3} />
               <span className="dark:text-scale-1200 mb-0 ml-3 ">{feature}</span>
             </li>
           ))}
diff --git a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/PlanUpdateSidePanel.tsx b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/PlanUpdateSidePanel.tsx
index fd50323a60e..dabc1f474f3 100644
--- a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/PlanUpdateSidePanel.tsx
+++ b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/PlanUpdateSidePanel.tsx
@@ -157,13 +157,13 @@ const PlanUpdateSidePanel = () => {
                 >
                   <div className="w-full">
                     <div className="flex items-center space-x-2">
-                      <p className={clsx('text-brand-900 text-sm uppercase')}>{plan.name}</p>
+                      <p className={clsx('text-brand text-sm uppercase')}>{plan.name}</p>
                       {isCurrentPlan ? (
                         <div className="text-xs bg-scale-500 text-scale-1000 rounded px-2 py-0.5">
                           Current plan
                         </div>
                       ) : plan.nameBadge ? (
-                        <div className="text-xs bg-brand-400 text-brand-900 rounded px-2 py-0.5">
+                        <div className="text-xs bg-brand-400 text-brand rounded px-2 py-0.5">
                           {plan.nameBadge}
                         </div>
                       ) : (
@@ -250,7 +250,7 @@ const PlanUpdateSidePanel = () => {
                         <li key={feature} className="flex py-2">
                           <div className="w-[12px]">
                             <IconCheck
-                              className="h-3 w-3 text-brand-900 translate-y-[2.5px]"
+                              className="h-3 w-3 text-brand translate-y-[2.5px]"
                               aria-hidden="true"
                               strokeWidth={3}
                             />
diff --git a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/Subscription.tsx b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/Subscription.tsx
index c5b258bcca0..c5c07a0f72f 100644
--- a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/Subscription.tsx
+++ b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/Subscription.tsx
@@ -75,9 +75,7 @@ const Subscription = () => {
             <div className="space-y-6">
               <div>
                 <p className="text-sm">This organization is currently on the plan:</p>
-                <p className="text-2xl text-brand-900 uppercase">
-                  {currentPlan?.name ?? 'Unknown'}
-                </p>
+                <p className="text-2xl text-brand uppercase">{currentPlan?.name ?? 'Unknown'}</p>
               </div>
 
               <div>
diff --git a/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx b/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx
index 00489485bea..adba0bbc199 100644
--- a/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx
+++ b/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx
@@ -172,7 +172,7 @@ const GeneralSettings = () => {
                                 <a
                                   target="_blank"
                                   rel="noreferrer"
-                                  className="text-brand-900 border-b border-brand-900"
+                                  className="text-brand border-b border-brand"
                                 >
                                   privacy policy
                                 </a>
diff --git a/studio/components/interfaces/Organization/OAuthApps/AuthorizedAppRow.tsx b/studio/components/interfaces/Organization/OAuthApps/AuthorizedAppRow.tsx
index d8b4360ef66..6f45bc8ca34 100644
--- a/studio/components/interfaces/Organization/OAuthApps/AuthorizedAppRow.tsx
+++ b/studio/components/interfaces/Organization/OAuthApps/AuthorizedAppRow.tsx
@@ -28,9 +28,7 @@ const AuthorizedAppRow = ({ app, onSelectRevoke }: AuthorizedAppRowProps) => {
         <span className="font-mono truncate">{app.id}</span>
         <Button
           type="default"
-          icon={
-            isCopied ? <IconCheck className="text-brand-900" strokeWidth={3} /> : <IconClipboard />
-          }
+          icon={isCopied ? <IconCheck className="text-brand" strokeWidth={3} /> : <IconClipboard />}
           className="ml-2 px-1"
           onClick={() => {
             copyToClipboard(app.id)
diff --git a/studio/components/interfaces/Organization/OAuthApps/OAuthAppRow.tsx b/studio/components/interfaces/Organization/OAuthApps/OAuthAppRow.tsx
index 6157cf4748d..44d4a7851f1 100644
--- a/studio/components/interfaces/Organization/OAuthApps/OAuthAppRow.tsx
+++ b/studio/components/interfaces/Organization/OAuthApps/OAuthAppRow.tsx
@@ -45,11 +45,7 @@ const OAuthAppRow = ({ app, onSelectEdit, onSelectDelete }: OAuthAppRowProps) =>
           <Button
             type="default"
             icon={
-              isCopied ? (
-                <IconCheck className="text-brand-900" strokeWidth={3} />
-              ) : (
-                <IconClipboard />
-              )
+              isCopied ? <IconCheck className="text-brand" strokeWidth={3} /> : <IconClipboard />
             }
             className="ml-2 px-1"
             onClick={() => {
diff --git a/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx b/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx
index ed3a3240a09..9104db59821 100644
--- a/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx
+++ b/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx
@@ -145,7 +145,7 @@ const CustomDomainSidePanel = () => {
             Custom domains allow you to present a branded experience to your users. You may set up
             your custom domain in the{' '}
             <Link href={`/project/${projectRef}/settings/general`}>
-              <a className="text-brand-900">General Settings</a>
+              <a className="text-brand">General Settings</a>
             </Link>{' '}
             page after enabling the add-on.
           </p>
diff --git a/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx b/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx
index f1512f48028..ebeb95f35c8 100644
--- a/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx
+++ b/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx
@@ -36,7 +36,7 @@ const CustomDomainDelete = ({ projectRef, customDomain }: CustomDomainDeleteProp
           <p className="text-xs text-scale-1100">Active custom domain:</p>
           <div className="flex items-center space-x-2">
             <code className="text-lg mx-0 flex items-center space-x-2">
-              <div className="h-2 w-2 rounded-full bg-brand-900" />
+              <div className="h-2 w-2 rounded-full bg-brand" />
               <span>{customDomain.hostname}</span>
             </code>
           </div>
diff --git a/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx b/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx
index ebf5ff5e3ec..3cce8d4f062 100644
--- a/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx
+++ b/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx
@@ -84,7 +84,7 @@ const CustomDomainVerify = ({ projectRef, customDomain, settings }: CustomDomain
                     <p>
                       You may also visit{' '}
                       <Link href={`https://whatsmydns.net/#TXT/${customDomain.hostname}`}>
-                        <a className="text-brand-900">here</a>
+                        <a className="text-brand">here</a>
                       </Link>{' '}
                       to check if your DNS has been propagated successfully before clicking verify.
                     </p>
@@ -93,7 +93,7 @@ const CustomDomainVerify = ({ projectRef, customDomain, settings }: CustomDomain
                   <p>
                     You may also visit{' '}
                     <Link href={`https://whatsmydns.net/#TXT/${customDomain.hostname}`}>
-                      <a className="text-brand-900">here</a>
+                      <a className="text-brand">here</a>
                     </Link>{' '}
                     to check if your DNS has been propagated successfully before clicking verify.
                   </p>
diff --git a/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx b/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx
index b4ba127f6c1..c0d00b54c24 100644
--- a/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx
+++ b/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx
@@ -67,7 +67,7 @@ const ProjectUpgradeAlert = () => {
   return (
     <>
       <Alert
-        icon={<IconPackage className="text-brand-900" strokeWidth={1.5} />}
+        icon={<IconPackage className="text-brand" strokeWidth={1.5} />}
         variant="success"
         title="Your project can be upgraded to the latest version of Postgres"
       >
@@ -114,7 +114,7 @@ const ProjectUpgradeAlert = () => {
                                       <p className="flex items-center space-x-1">
                                         <span>This update has breaking changes. Read more </span>
                                         <Link href={change.url}>
-                                          <a className="text-brand-900 opacity-90 flex items-center space-x-1">
+                                          <a className="text-brand opacity-90 flex items-center space-x-1">
                                             <span>here</span>
                                             <IconExternalLink size="tiny" strokeWidth={2} />
                                           </a>
diff --git a/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx b/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx
index 896cb36b6bf..d599cb2cc96 100644
--- a/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx
+++ b/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx
@@ -262,7 +262,7 @@ const TransferProjectButton = () => {
                         <span>
                           {' '}
                           Your current organization will be granted{' '}
-                          <span className="text-brand-900">
+                          <span className="text-brand">
                             ${transferPreviewData.credits_on_source_organization}
                           </span>{' '}
                           in credits as proration.
@@ -277,7 +277,7 @@ const TransferProjectButton = () => {
                         <span>
                           {' '}
                           The target organization will be billed{' '}
-                          <span className="text-brand-900">
+                          <span className="text-brand">
                             ${transferPreviewData.costs_on_target_organization}
                           </span>{' '}
                           immediately to prorate for the remainder of the billing period.
diff --git a/studio/components/interfaces/Settings/Vault/Secrets/SecretRow.tsx b/studio/components/interfaces/Settings/Vault/Secrets/SecretRow.tsx
index c0a9419c7e8..530286775ea 100644
--- a/studio/components/interfaces/Settings/Vault/Secrets/SecretRow.tsx
+++ b/studio/components/interfaces/Settings/Vault/Secrets/SecretRow.tsx
@@ -66,11 +66,11 @@ const SecretRow: FC<Props> = ({ secret, onSelectEdit, onSelectRemove }) => {
           <IconKey
             size={14}
             strokeWidth={2}
-            className="text-scale-1000 transition group-hover:text-brand-900"
+            className="text-scale-1000 transition group-hover:text-brand"
           />
           <Link href={`/project/${ref}/settings/vault/keys?id=${secret.key_id}`}>
             <a
-              className="text-scale-1100 font-mono text-xs cursor-pointer transition group-hover:text-brand-900"
+              className="text-scale-1100 font-mono text-xs cursor-pointer transition group-hover:text-brand"
               title={secret.key_id}
             >
               {secret.key_id}
diff --git a/studio/components/interfaces/Storage/CreateBucketModal.tsx b/studio/components/interfaces/Storage/CreateBucketModal.tsx
index 3d098675683..abb5cb45596 100644
--- a/studio/components/interfaces/Storage/CreateBucketModal.tsx
+++ b/studio/components/interfaces/Storage/CreateBucketModal.tsx
@@ -209,7 +209,7 @@ const CreateBucketModal = ({ visible, onClose }: CreateBucketModalProps) => {
                               <p className="text-scale-1000 text-sm">
                                 Note: The{' '}
                                 <Link href={`/project/${ref}/settings/storage`}>
-                                  <a className="text-brand-900 opacity-80 hover:opacity-100 transition">
+                                  <a className="text-brand opacity-80 hover:opacity-100 transition">
                                     global upload limit
                                   </a>
                                 </Link>{' '}
diff --git a/studio/components/interfaces/Storage/EditBucketModal.tsx b/studio/components/interfaces/Storage/EditBucketModal.tsx
index 650c68f2828..59b691e7435 100644
--- a/studio/components/interfaces/Storage/EditBucketModal.tsx
+++ b/studio/components/interfaces/Storage/EditBucketModal.tsx
@@ -221,7 +221,7 @@ const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalProps) =>
                               <p className="text-scale-1000 text-sm">
                                 Note: The{' '}
                                 <Link href={`/project/${ref}/settings/storage`}>
-                                  <a className="text-brand-900 opacity-80 hover:opacity-100 transition">
+                                  <a className="text-brand opacity-80 hover:opacity-100 transition">
                                     global upload limit
                                   </a>
                                 </Link>{' '}
diff --git a/studio/components/interfaces/Support/Success.tsx b/studio/components/interfaces/Support/Success.tsx
index 1fcd9d937e3..7fad08f1770 100644
--- a/studio/components/interfaces/Support/Success.tsx
+++ b/studio/components/interfaces/Support/Success.tsx
@@ -18,8 +18,8 @@ const Success: FC<Props> = ({ sentCategory = '' }) => {
   return (
     <div className="mt-10 w-[620px] flex flex-col items-center space-y-4">
       <div className="relative">
-        <IconMail strokeWidth={1.5} size={60} className="text-brand-900" />
-        <div className="h-6 w-6 rounded-full bg-brand-900 absolute bottom-1 -right-1.5 flex items-center justify-center">
+        <IconMail strokeWidth={1.5} size={60} className="text-brand" />
+        <div className="h-6 w-6 rounded-full bg-brand absolute bottom-1 -right-1.5 flex items-center justify-center">
           <IconCheck strokeWidth={4} size={18} />
         </div>
       </div>
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
index fb4c5d6f350..8f2b97f1b26 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
@@ -367,7 +367,7 @@ const ColumnEditor = ({
                       <p>
                         You will need to{' '}
                         <Link href={`/project/${ref}/database/extensions?filter=pgsodium`}>
-                          <a className="text-brand-800 hover:text-brand-900 transition">install</a>
+                          <a className="text-brand-800 hover:text-brand transition">install</a>
                         </Link>{' '}
                         the extension <code className="text-xs">pgsodium</code> first before being
                         able to encrypt your column.
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx
index df57a2cf8f2..9c9dc4f4d08 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx
@@ -134,8 +134,7 @@ const ColumnForeignKeyAdded: FC<{
         <div className="flex flex-col space-y-4 text-scale-1100">
           <div className="space-y-2">
             <span>
-              The following foreign key relation will be{' '}
-              <span className="text-brand-900">added</span>:
+              The following foreign key relation will be <span className="text-brand">added</span>:
             </span>
             <div className="flex items-center space-x-2 text-scale-1200">
               <span
@@ -234,8 +233,7 @@ const ColumnForeignKeyUpdated: FC<{
         <div className="flex flex-col space-y-4">
           <div className="space-y-2">
             <p>
-              The foreign key relation will be <span className="text-brand-900">updated</span> as
-              such:
+              The foreign key relation will be <span className="text-brand">updated</span> as such:
             </p>
             <div className="flex items-start space-x-2">
               <code className="text-xs font-mono">{columnName}</code>
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx
index d40c56df3ee..3a6fb96cc55 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx
@@ -330,7 +330,7 @@ const ForeignKeySelector: FC<Props> = ({ column, visible = false, closePanel, sa
                         href="https://supabase.com/docs/guides/database/postgres/cascade-deletes"
                         target="_blank"
                         rel="noreferrer"
-                        className="text-brand-900 opacity-75"
+                        className="text-brand opacity-75"
                       >
                         Learn more about cascade deletes
                       </a>
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/SelectorGrid.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/SelectorGrid.tsx
index a77e38a9039..a878ab46238 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/SelectorGrid.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/SelectorGrid.tsx
@@ -20,7 +20,7 @@ const columnRender = (name: string, isPrimaryKey = false) => {
       {isPrimaryKey && (
         <Tooltip.Root delayDuration={0}>
           <Tooltip.Trigger>
-            <div className="text-brand-900">
+            <div className="text-brand">
               <IconKey size="tiny" strokeWidth={2} />
             </div>
           </Tooltip.Trigger>
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx
index 286d80c2665..73506ebc68e 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx
@@ -57,7 +57,7 @@ const SpreadSheetFileUpload: FC<Props> = ({
           onClick={() => (uploadButtonRef.current as any)?.click()}
         >
           <p className="text-sm">
-            Drag and drop, or <span className="text-brand-900">browse</span> your files
+            Drag and drop, or <span className="text-brand">browse</span> your files
           </p>
         </div>
       ) : (
diff --git a/studio/components/layouts/FunctionsLayout.tsx b/studio/components/layouts/FunctionsLayout.tsx
index caa3776b772..d1ed493472a 100644
--- a/studio/components/layouts/FunctionsLayout.tsx
+++ b/studio/components/layouts/FunctionsLayout.tsx
@@ -75,7 +75,7 @@ const FunctionsLayout: FC<Props> = ({ title, children }) => {
                 <div
                   className={[
                     'h-6 w-6 rounded border border-brand-600 bg-brand-300',
-                    'flex items-center justify-center text-brand-900',
+                    'flex items-center justify-center text-brand',
                   ].join(' ')}
                 >
                   <IconCode size={14} strokeWidth={3} />
diff --git a/studio/components/layouts/ProjectLayout/BuildingState.tsx b/studio/components/layouts/ProjectLayout/BuildingState.tsx
index a41e89137a2..b4010ba078d 100644
--- a/studio/components/layouts/ProjectLayout/BuildingState.tsx
+++ b/studio/components/layouts/ProjectLayout/BuildingState.tsx
@@ -82,7 +82,7 @@ const BuildingState = ({ project }: BuildingStateProps) => {
                       Browse the Supabase{' '}
                       <Link href="https://supabase.com/docs">
                         <a
-                          className="mb-0 text-brand-900 transition-colors hover:text-brand-1200"
+                          className="mb-0 text-brand transition-colors hover:text-brand-1200"
                           target="_blank"
                           rel="noreferrer"
                         >
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
index 39851aa93b4..b5ef7aee1e5 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
@@ -222,14 +222,14 @@ const FeedbackWidget: FC<Props> = ({
           Have a technical issue? Contact{' '}
           <Link href="/support/new">
             <a>
-              <span className="cursor-pointer text-brand-900 transition-colors hover:text-brand-1200">
+              <span className="cursor-pointer text-brand transition-colors hover:text-brand-1200">
                 Supabase support
               </span>
             </a>
           </Link>{' '}
           or{' '}
           <a href="https://supabase.com/docs" target="_blank" rel="noreferrer">
-            <span className="cursor-pointer text-brand-900 transition-colors hover:text-brand-1200">
+            <span className="cursor-pointer text-brand transition-colors hover:text-brand-1200">
               browse our docs
             </span>
           </a>
diff --git a/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx b/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx
index 77527ba7c50..81e4a6e7a39 100644
--- a/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx
+++ b/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx
@@ -90,7 +90,7 @@ const ProjectPausedState = ({ product }: ProjectPausedStateProps) => {
                   {product !== undefined ? (
                     <>
                       Restore this project to access the{' '}
-                      <span className="text-brand-900">{product}</span> page
+                      <span className="text-brand">{product}</span> page
                     </>
                   ) : (
                     'Restore this project and get back to building the next big thing!'
diff --git a/studio/components/layouts/ProjectLayout/RestoringState.tsx b/studio/components/layouts/ProjectLayout/RestoringState.tsx
index 12cd01d836a..19c19c4a590 100644
--- a/studio/components/layouts/ProjectLayout/RestoringState.tsx
+++ b/studio/components/layouts/ProjectLayout/RestoringState.tsx
@@ -59,7 +59,7 @@ const RestoringState: FC<Props> = ({}) => {
           <div className="space-y-6 pt-6">
             <div className="flex px-8 space-x-8">
               <div className="mt-1">
-                <IconCheckCircle className="text-brand-900" size={18} strokeWidth={2} />
+                <IconCheckCircle className="text-brand" size={18} strokeWidth={2} />
               </div>
               <div className="space-y-1">
                 <p>Restoration complete!</p>
diff --git a/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx b/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx
index 2f6b15649e5..6d57ad97aec 100644
--- a/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx
+++ b/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx
@@ -74,7 +74,7 @@ const UpgradingState = () => {
             {isCompleted ? (
               <div className="grid gap-4">
                 <div className="relative mx-auto max-w-[300px]">
-                  <IconCheckCircle className="text-brand-900" size={40} strokeWidth={1.5} />
+                  <IconCheckCircle className="text-brand" size={40} strokeWidth={1.5} />
                 </div>
                 <div className="space-y-2">
                   <p className="text-center">Upgrade completed!</p>
diff --git a/studio/components/ui/DisabledWarningDueToIncident.tsx b/studio/components/ui/DisabledWarningDueToIncident.tsx
index eb23010dce8..ffca14cef6e 100644
--- a/studio/components/ui/DisabledWarningDueToIncident.tsx
+++ b/studio/components/ui/DisabledWarningDueToIncident.tsx
@@ -17,7 +17,7 @@ const DisabledWarningDueToIncident: FC<Props> = ({ title }) => {
         <div className="space-y-3">
           <p className="text-sm leading-normal">
             Our engineers are currently working on a fix. You can follow updates on{' '}
-            <a className="text-brand-900" href="https://status.supabase.com/">
+            <a className="text-brand" href="https://status.supabase.com/">
               https://status.supabase.com/
             </a>
           </p>
diff --git a/studio/components/ui/Logs/LogsExplorerHeader.tsx b/studio/components/ui/Logs/LogsExplorerHeader.tsx
index a57a5c76f0f..2425c0e48cb 100644
--- a/studio/components/ui/Logs/LogsExplorerHeader.tsx
+++ b/studio/components/ui/Logs/LogsExplorerHeader.tsx
@@ -29,7 +29,7 @@ const LogsExplorerHeader = ({ subtitle }: LogsExplorerHeaderProps) => {
       <div className="flex items-center gap-3">
         <div
           className="flex h-6 w-6 items-center justify-center rounded border
-            border-brand-600 bg-brand-300 text-brand-900
+            border-brand-600 bg-brand-300 text-brand
           "
         >
           <IconList size={14} strokeWidth={3} />
@@ -81,7 +81,7 @@ const LogsExplorerHeader = ({ subtitle }: LogsExplorerHeaderProps) => {
                 respective source. Do note that to access nested keys, you would need to perform the
                 necessary{' '}
                 <Link href="https://supabase.com/docs/guides/platform/logs#unnesting-arrays">
-                  <a target="_blank" rel="noreferrer" className="text-brand-900">
+                  <a target="_blank" rel="noreferrer" className="text-brand">
                     unnesting joins
                     <IconExternalLink
                       size="tiny"
@@ -159,7 +159,7 @@ const Field = ({
         {isCopied ? (
           <Tooltip.Root delayDuration={0}>
             <Tooltip.Trigger>
-              <IconCheck size={14} strokeWidth={3} className="text-brand-900" />
+              <IconCheck size={14} strokeWidth={3} className="text-brand" />
             </Tooltip.Trigger>
             <Tooltip.Portal>
               <Tooltip.Content side="bottom">
diff --git a/studio/components/ui/PasswordStrengthBar.tsx b/studio/components/ui/PasswordStrengthBar.tsx
index d69993f4ab9..9976e1395ae 100644
--- a/studio/components/ui/PasswordStrengthBar.tsx
+++ b/studio/components/ui/PasswordStrengthBar.tsx
@@ -39,7 +39,7 @@ const PasswordStrengthBar = ({
           ? passwordStrengthMessage
           : 'This is the password to your postgres database, so it must be strong and hard to guess.'}{' '}
         <span
-          className="text-brand-800 underline hover:text-brand-900 transition cursor-pointer"
+          className="text-brand-800 underline hover:text-brand transition cursor-pointer"
           onClick={generateStrongPassword}
         >
           Generate a password
diff --git a/studio/hooks/misc/useStore.tsx b/studio/hooks/misc/useStore.tsx
index 025301498b5..411821dd8f9 100644
--- a/studio/hooks/misc/useStore.tsx
+++ b/studio/hooks/misc/useStore.tsx
@@ -55,7 +55,7 @@ export const StoreProvider: FC<StoreProvider> = ({ children, rootStore }) => {
                     value={progress}
                     max={100}
                     type="horizontal"
-                    barClass="bg-brand-900"
+                    barClass="bg-brand"
                     labelBottom={message}
                     labelTop={`${progress.toFixed(2)}%`}
                   />
diff --git a/studio/pages/join/index.tsx b/studio/pages/join/index.tsx
index 56130ed0c13..dc9b553a419 100644
--- a/studio/pages/join/index.tsx
+++ b/studio/pages/join/index.tsx
@@ -137,7 +137,7 @@ const JoinOrganizationPage = () => {
         <p className="text-scale-900">
           To accept this invitation, you will need to{' '}
           <a
-            className="cursor-pointer text-brand-900"
+            className="cursor-pointer text-brand"
             onClick={async () => {
               await signOut()
               router.reload()
diff --git a/studio/pages/new/[slug].tsx b/studio/pages/new/[slug].tsx
index a73d3a53d2a..57f14d45c7b 100644
--- a/studio/pages/new/[slug].tsx
+++ b/studio/pages/new/[slug].tsx
@@ -483,7 +483,7 @@ const Wizard: NextPageWithLayout = () => {
                     <div className="space-y-3">
                       <p className="text-sm leading-normal">
                         This organization uses organization level billing and is on the{' '}
-                        <span className="text-brand-900">{orgSubscription?.plan?.name} plan</span>.
+                        <span className="text-brand">{orgSubscription?.plan?.name} plan</span>.
                       </p>
 
                       {orgSubscription?.plan?.id !== 'free' && (
diff --git a/studio/pages/project/[ref]/database/backups/scheduled.tsx b/studio/pages/project/[ref]/database/backups/scheduled.tsx
index a4f83a5ca93..0bcba0f4ab9 100644
--- a/studio/pages/project/[ref]/database/backups/scheduled.tsx
+++ b/studio/pages/project/[ref]/database/backups/scheduled.tsx
@@ -64,7 +64,7 @@ const DatabaseScheduledBackups: NextPageWithLayout = () => {
                   needed, as PITR supports a superset of functionality, in terms of the granular
                   recovery that can be performed.{' '}
                   <a
-                    className="text-brand-900 transition-colors hover:text-brand-1200"
+                    className="text-brand transition-colors hover:text-brand-1200"
                     href="https://supabase.com/docs/guides/platform/backups"
                   >
                     Learn more
diff --git a/studio/pages/project/[ref]/logs/explorer/templates.tsx b/studio/pages/project/[ref]/logs/explorer/templates.tsx
index db2173b63f4..c199577067b 100644
--- a/studio/pages/project/[ref]/logs/explorer/templates.tsx
+++ b/studio/pages/project/[ref]/logs/explorer/templates.tsx
@@ -41,7 +41,7 @@ const Template = ({ projectRef, template }: { projectRef?: string; template: Log
           bg-scale-1200
           text-scale-100
           transition-colors
-          group-hover:bg-brand-900
+          group-hover:bg-brand
           group-hover:text-brand-1200
         "
         >
diff --git a/studio/pages/project/[ref]/reports/database.tsx b/studio/pages/project/[ref]/reports/database.tsx
index 045faf731bf..03e276c2b09 100644
--- a/studio/pages/project/[ref]/reports/database.tsx
+++ b/studio/pages/project/[ref]/reports/database.tsx
@@ -90,11 +90,7 @@ const DatabaseUsage = observer(() => {
                   value={databaseSize}
                   max={databaseSizeLimit > 0 ? databaseSizeLimit : Infinity}
                   barClass={`${
-                    sizeIsExceeded
-                      ? 'bg-red-900'
-                      : sizeIsApproaching
-                      ? 'bg-yellow-900'
-                      : 'bg-brand-900'
+                    sizeIsExceeded ? 'bg-red-900' : sizeIsApproaching ? 'bg-yellow-900' : 'bg-brand'
                   }`}
                   labelBottom={formatBytes(databaseSize)}
                   labelTop={databaseSizeLimit > 0 ? formatBytes(databaseSizeLimit) : ''}
@@ -134,7 +130,7 @@ const DatabaseUsage = observer(() => {
                       ? 'bg-red-900'
                       : egressIsApproaching
                       ? 'bg-yellow-900'
-                      : 'bg-brand-900'
+                      : 'bg-brand'
                   }`}
                   labelBottom={formatBytes(usage?.db_egress?.usage ?? 0)}
                   labelTop={databaseEgressLimit > 0 ? formatBytes(databaseEgressLimit) : ''}
diff --git a/studio/pages/project/[ref]/reports/query-performance.tsx b/studio/pages/project/[ref]/reports/query-performance.tsx
index e23ede36487..a8c3b156bd2 100644
--- a/studio/pages/project/[ref]/reports/query-performance.tsx
+++ b/studio/pages/project/[ref]/reports/query-performance.tsx
@@ -45,7 +45,7 @@ const QueryPerformanceReport: NextPageWithLayout = () => {
   }
 
   const checkAlert = (
-    <div className="w-5 h-5 text-brand-1400 text-brand-900 flex items-center justify-center">
+    <div className="w-5 h-5 text-brand-1400 text-brand flex items-center justify-center">
       <IconCheckCircle strokeWidth={2} size={16} />
     </div>
   )
diff --git a/studio/pages/project/[ref]/settings/addons.tsx b/studio/pages/project/[ref]/settings/addons.tsx
index db292501c79..d8cd7e0fac3 100644
--- a/studio/pages/project/[ref]/settings/addons.tsx
+++ b/studio/pages/project/[ref]/settings/addons.tsx
@@ -21,7 +21,7 @@ const ProjectAddons: NextPageWithLayout = () => {
         >
           You might be looking for the{' '}
           <Link href={`/project/${ref}/settings/billing/subscription`}>
-            <a className="text-brand-900">project's subscription</a>
+            <a className="text-brand">project's subscription</a>
           </Link>{' '}
           page instead.
         </Alert>
diff --git a/studio/pages/project/[ref]/settings/billing/invoices.tsx b/studio/pages/project/[ref]/settings/billing/invoices.tsx
index 7b50f1e3c0f..fbb9b8ee7ea 100644
--- a/studio/pages/project/[ref]/settings/billing/invoices.tsx
+++ b/studio/pages/project/[ref]/settings/billing/invoices.tsx
@@ -21,7 +21,7 @@ const ProjectBilling: NextPageWithLayout = () => {
         >
           You might be looking for the{' '}
           <Link href={`/org/${organization?.slug}/invoices`}>
-            <a className="text-brand-900">organization's invoices</a>
+            <a className="text-brand">organization's invoices</a>
           </Link>{' '}
           page instead.
         </Alert>
diff --git a/studio/pages/project/[ref]/settings/billing/subscription.tsx b/studio/pages/project/[ref]/settings/billing/subscription.tsx
index d787c003404..dd61dbffd76 100644
--- a/studio/pages/project/[ref]/settings/billing/subscription.tsx
+++ b/studio/pages/project/[ref]/settings/billing/subscription.tsx
@@ -20,7 +20,7 @@ const ProjectBilling: NextPageWithLayout = () => {
         >
           Subscription management can be found on the{' '}
           <Link href={`/org/${organization?.slug}/billing`}>
-            <a className="text-brand-900">organization's billing</a>
+            <a className="text-brand">organization's billing</a>
           </Link>{' '}
           page instead.
         </Alert>
diff --git a/studio/pages/project/[ref]/settings/infrastructure.tsx b/studio/pages/project/[ref]/settings/infrastructure.tsx
index 629177a1dcc..ea2bdbcf75e 100644
--- a/studio/pages/project/[ref]/settings/infrastructure.tsx
+++ b/studio/pages/project/[ref]/settings/infrastructure.tsx
@@ -23,7 +23,7 @@ const ProjectInfrastructure: NextPageWithLayout = () => {
         >
           You might be looking for the{' '}
           <Link href={`/project/${ref}/settings/billing/usage`}>
-            <a className="text-brand-900">project's usage</a>
+            <a className="text-brand">project's usage</a>
           </Link>{' '}
           page instead.
         </Alert>
diff --git a/studio/pages/support/new.tsx b/studio/pages/support/new.tsx
index 8d042dbddad..159151dc291 100644
--- a/studio/pages/support/new.tsx
+++ b/studio/pages/support/new.tsx
@@ -50,7 +50,7 @@ const SupportPage = () => {
                           isLoading ? (
                             <IconLoader className="animate-spin" />
                           ) : isHealthy ? (
-                            <div className="h-2 w-2 bg-brand-900 rounded-full" />
+                            <div className="h-2 w-2 bg-brand rounded-full" />
                           ) : (
                             <div className="h-2 w-2 bg-yellow-900 rounded-full" />
                           )
diff --git a/studio/pages/vercel/integrate.tsx b/studio/pages/vercel/integrate.tsx
index 93150b6eec1..db220547025 100644
--- a/studio/pages/vercel/integrate.tsx
+++ b/studio/pages/vercel/integrate.tsx
@@ -218,7 +218,7 @@ const ProjectLinksEmptyState = () => (
       then close this window and retry adding integration.
     </p>
     <Link href="https://supabase.com/dashboard">
-      <a className="text-brand-900">
+      <a className="text-brand">
         Start a new Supabase project<span aria-hidden="true"> &rarr;</span>
       </a>
     </Link>
diff --git a/studio/styles/code.scss b/studio/styles/code.scss
index e98880bd3bc..d679eb8e7c6 100644
--- a/studio/styles/code.scss
+++ b/studio/styles/code.scss
@@ -46,7 +46,7 @@
 
   .token.string {
     font-style: normal !important;
-    @apply text-brand-900 #{!important};
+    @apply text-brand #{!important};
   }
 
   .token.constant {
@@ -60,12 +60,12 @@
   }
 
   .token.number {
-    @apply text-brand-900 #{!important};
+    @apply text-brand #{!important};
   }
 
   .token.boolean,
   .token.doc-comment.class-name {
-    @apply text-brand-900;
+    @apply text-brand;
   }
 
   .codeBlock {
diff --git a/studio/styles/date-picker.scss b/studio/styles/date-picker.scss
index d43d5286e2a..cdd92a1d887 100644
--- a/studio/styles/date-picker.scss
+++ b/studio/styles/date-picker.scss
@@ -94,13 +94,13 @@
 }
 
 .react-datepicker__day--range-start {
-  @apply bg-brand-900 text-white hover:text-scale-700 hover:bg-white;
+  @apply bg-brand text-white hover:text-scale-700 hover:bg-white;
 }
 
 .react-datepicker__day--range-end {
-  @apply bg-brand-900 text-white hover:text-scale-700 hover:bg-white;
+  @apply bg-brand text-white hover:text-scale-700 hover:bg-white;
 }
 
 .react-datepicker__day--highlighted {
   @apply bg-brand-600 text-scale-1100;
-}
\ No newline at end of file
+}
diff --git a/studio/styles/grid.scss b/studio/styles/grid.scss
index 9ac86a2ddc3..e77c482c391 100644
--- a/studio/styles/grid.scss
+++ b/studio/styles/grid.scss
@@ -174,8 +174,8 @@
   }
 
   [type='checkbox']:checked {
-    @apply dark:bg-brand-900;
-    @apply bg-brand-900;
+    @apply dark:bg-brand;
+    @apply bg-brand;
     border-color: transparent;
     background-size: 100% 100%;
     background-position: center;
@@ -186,7 +186,7 @@
     @apply cursor-pointer rounded border border-solid;
 
     @apply text-brand-600 border-scale-400 transition-all;
-    @apply hover:border-brand-900 focus:ring-brand-500 focus:outline-none;
+    @apply hover:border-brand focus:ring-brand-500 focus:outline-none;
 
     @apply dark:border-scale-500 dark:bg-transparent dark:text-white;
     @apply dark:hover:border-green-900;
@@ -388,7 +388,7 @@
 .sb-grid-select-editor {
   button {
     @apply border-none rounded-none shadow-none;
-    box-shadow: none !important
+    box-shadow: none !important;
   }
 }
 
@@ -491,7 +491,7 @@
 }
 
 .sb-grid-column-header__inner svg {
-  @apply border-brand-900 text-brand-900 dark:border-brand-900 dark:text-brand-900;
+  @apply border-brand text-brand dark:border-brand dark:text-brand;
 }
 
 /*
diff --git a/studio/styles/react-data-grid-logs.scss b/studio/styles/react-data-grid-logs.scss
index ede173ea6af..c995bb72232 100644
--- a/studio/styles/react-data-grid-logs.scss
+++ b/studio/styles/react-data-grid-logs.scss
@@ -15,7 +15,7 @@
 
   .rdg-row {
     &.rdg-row--focused {
-      @apply border-r border-brand-900;
+      @apply border-r border-brand;
       border-right-width: 4px;
     }
 
@@ -43,7 +43,7 @@
 
   .rdg-row {
     &.rdg-row--focused {
-      @apply border-r border-brand-900;
+      @apply border-r border-brand;
       border-right-width: 4px;
     }
 
diff --git a/studio/styles/ui.scss b/studio/styles/ui.scss
index 2a122876c3d..69504ba91c9 100644
--- a/studio/styles/ui.scss
+++ b/studio/styles/ui.scss
@@ -289,7 +289,7 @@
     }
 
     .is-highlighted {
-      @apply text-brand-900;
+      @apply text-brand;
     }
   }
   .codeblock-container + .codeblock-container {
@@ -299,7 +299,7 @@
 
 ::-moz-selection {
   /* Code for Firefox */
-  @apply bg-brand-900;
+  @apply bg-brand;
   color: #333 !important;
 }
 
@@ -408,7 +408,7 @@
 
 .form-field-markdown {
   a {
-    @apply text-brand-900 transition opacity-75 hover:opacity-100 underline;
+    @apply text-brand transition opacity-75 hover:opacity-100 underline;
   }
 }
 

From e92931390c1c3c6e0bfa32e02e46cc3ae6c99583 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Sun, 30 Jul 2023 17:00:56 +0800
Subject: [PATCH 07/73] chore: update old `brand-800` to new `brand-500`

---
 apps/docs/layouts/tutorials/TutorialLayout.tsx              | 2 +-
 apps/docs/pages/reference/cli/config.tsx                    | 2 +-
 apps/www/components/Button.tsx                              | 2 +-
 apps/www/components/Nav/index.tsx                           | 2 +-
 apps/www/components/ProductIcon.tsx                         | 2 +-
 apps/www/pages/beta.tsx                                     | 2 +-
 apps/www/pages/careers/index.tsx                            | 6 +++---
 apps/www/pages/open-source/index.tsx                        | 4 ++--
 apps/www/pages/partners/experts/[slug].tsx                  | 6 +++---
 apps/www/pages/partners/integrations/[slug].tsx             | 6 +++---
 apps/www/pages/partners/integrations/index.tsx              | 4 ++--
 apps/www/pages/realtime/Realtime.tsx                        | 2 +-
 apps/www/styles/index.css                                   | 2 +-
 packages/ui/src/components/Admonition/index.tsx             | 2 +-
 packages/ui/src/components/Badge/Badge.module.css           | 2 +-
 packages/ui/src/components/Button/Button.module.css         | 4 ++--
 packages/ui/src/components/Button/Button.tsx                | 6 +++---
 packages/ui/src/components/Command/Command.icons.tsx        | 2 +-
 packages/ui/src/components/Form/Form.stories.tsx            | 2 +-
 packages/ui/src/components/Icon/Icon.module.css             | 2 +-
 packages/ui/src/components/Loading/Loading.module.css       | 2 +-
 studio/.storybook/preview.css                               | 4 ++--
 .../interfaces/Database/Wrappers/WrapperTableEditor.tsx     | 2 +-
 .../components/interfaces/Home/NewProjectPanel/APIKeys.tsx  | 2 +-
 .../interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx   | 2 +-
 .../SidePanelEditor/ColumnEditor/ColumnEditor.tsx           | 2 +-
 .../layouts/ProjectLayout/UpgradingState/UpgradingState.tsx | 2 +-
 studio/components/ui/PasswordStrengthBar.tsx                | 2 +-
 studio/styles/date-picker.scss                              | 4 ++--
 29 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/apps/docs/layouts/tutorials/TutorialLayout.tsx b/apps/docs/layouts/tutorials/TutorialLayout.tsx
index 3c9877e6761..be494c2aa33 100644
--- a/apps/docs/layouts/tutorials/TutorialLayout.tsx
+++ b/apps/docs/layouts/tutorials/TutorialLayout.tsx
@@ -64,7 +64,7 @@ const Layout: FC<Props> = (props: Props) => {
           <p className="text-brand tracking-wider">Tutorials</p>
           <article className={['prose dark:prose-dark ', 'max-w-none'].join(' ')}>
             <h1>{props.meta.title}</h1>
-            <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-800 to-brand my-16"></div>
+            <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-500 to-brand my-16"></div>
 
             <MDXProvider components={components} children={props.children} />
           </article>
diff --git a/apps/docs/pages/reference/cli/config.tsx b/apps/docs/pages/reference/cli/config.tsx
index 1d7e448b234..29a4ab5f4a3 100644
--- a/apps/docs/pages/reference/cli/config.tsx
+++ b/apps/docs/pages/reference/cli/config.tsx
@@ -29,7 +29,7 @@ export default function Config() {
         <div className="relative col-span-12 md:col-span-9 transition-all ease-out duration-100">
           <div className="w-full prose">
             <h1 className="">CLI configuration</h1>
-            <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-800 to-brand my-8"></div>
+            <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-500 to-brand my-8"></div>
             <ReactMarkdown>{specFile.info.description}</ReactMarkdown>
             <div>
               {TAGS.map((tag) =>
diff --git a/apps/www/components/Button.tsx b/apps/www/components/Button.tsx
index babd6994b7f..1b5938ed997 100644
--- a/apps/www/components/Button.tsx
+++ b/apps/www/components/Button.tsx
@@ -13,7 +13,7 @@ const Button = (props: Props) => {
 
   const colorClass =
     type === 'primary'
-      ? 'px-3 py-2 shadow-sm border border-transparent text-white bg-brand-700 hover:bg-brand-800 focus:ring-2 focus:ring-offset-2 focus:ring-brand-500'
+      ? 'px-3 py-2 shadow-sm border border-transparent text-white bg-brand-700 hover:bg-brand-500 focus:ring-2 focus:ring-offset-2 focus:ring-brand-500'
       : 'text-brand-700 bg-none'
 
   const textClass = type === 'primary' ? 'font-medium left-3 group-hover:left-0' : 'font-normal'
diff --git a/apps/www/components/Nav/index.tsx b/apps/www/components/Nav/index.tsx
index e8ad79db017..2facb71cf43 100644
--- a/apps/www/components/Nav/index.tsx
+++ b/apps/www/components/Nav/index.tsx
@@ -299,7 +299,7 @@ const Nav = () => {
                     className="hidden group lg:flex"
                     type="text"
                     icon={
-                      <div className="flex items-center justify-center w-4 h-4 text-brand-800">
+                      <div className="flex items-center justify-center w-4 h-4 text-brand-500">
                         <div
                           className={[
                             `text-scale-900 flex h-3 w-3 items-center justify-center
diff --git a/apps/www/components/ProductIcon.tsx b/apps/www/components/ProductIcon.tsx
index 59288f247dc..f5c39baae9c 100644
--- a/apps/www/components/ProductIcon.tsx
+++ b/apps/www/components/ProductIcon.tsx
@@ -9,7 +9,7 @@ function ProductIcon({ icon, color }: ProductIcon) {
       className={[
         'inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md',
         !color || color === 'black' ? 'bg-scale-1200 text-scale-100' : '',
-        color && color === 'green' ? 'bg-brand-800 dark:bg-brand-600 text-brand-100' : '',
+        color && color === 'green' ? 'bg-brand-500 dark:bg-brand-600 text-brand-100' : '',
       ].join(' ')}
     >
       <svg
diff --git a/apps/www/pages/beta.tsx b/apps/www/pages/beta.tsx
index bec142fdab7..f737449fe70 100644
--- a/apps/www/pages/beta.tsx
+++ b/apps/www/pages/beta.tsx
@@ -313,7 +313,7 @@ const Performance = () => {
                       <Bar
                         color={
                           stat.name === 'Supabase'
-                            ? 'bg-brand dark:bg-brand-800'
+                            ? 'bg-brand dark:bg-brand-500'
                             : 'bg-brand-300 dark:bg-brand-400'
                         }
                         finalPercentage={Math.ceil((stat.value / maxValue) * 100)}
diff --git a/apps/www/pages/careers/index.tsx b/apps/www/pages/careers/index.tsx
index d6acf681121..d734e3eb9c6 100644
--- a/apps/www/pages/careers/index.tsx
+++ b/apps/www/pages/careers/index.tsx
@@ -445,10 +445,10 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
                     className="flex lg:block items-start space-x-6 lg:space-x-0 lg:w-full"
                   >
                     <div className="lg:flex items-center">
-                      <h3 className="bg-brand-600 border-[1px] border-brand-800 text-brand text-md text-center w-[44px] px-2 py-1.5 rounded-md">
+                      <h3 className="bg-brand-600 border-[1px] border-brand-500 text-brand text-md text-center w-[44px] px-2 py-1.5 rounded-md">
                         {i + 1}
                       </h3>
-                      <div className="h-[100px] w-[1px] sm:h-[100px] mx-auto lg:h-[1px] lg:w-full bg-brand-800 lg:pr-6"></div>
+                      <div className="h-[100px] w-[1px] sm:h-[100px] mx-auto lg:h-[1px] lg:w-full bg-brand-500 lg:pr-6"></div>
                     </div>
                     <div className="lg:mt-6">
                       <h2 className="sm:text-lg max-w-[75%] xl:max-w-none xl:w-11/12 lg:max-w-none">
@@ -461,7 +461,7 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
                   </div>
                 )
               })}
-              <h3 className="bg-brand-600 border-[1px] border-brand-800 text-brand text-xl w-[44px] min-h-[40px] px-2 py-1 rounded-md grid justify-items-center items-center">
+              <h3 className="bg-brand-600 border-[1px] border-brand-500 text-brand text-xl w-[44px] min-h-[40px] px-2 py-1 rounded-md grid justify-items-center items-center">
                 <IconCheck />
               </h3>
             </div>
diff --git a/apps/www/pages/open-source/index.tsx b/apps/www/pages/open-source/index.tsx
index 1aac63bdcbe..5fff6c0a379 100644
--- a/apps/www/pages/open-source/index.tsx
+++ b/apps/www/pages/open-source/index.tsx
@@ -82,8 +82,8 @@ const OpenSource = () => {
                   {maintainerPills.map((x) => (
                     <li
                       key={x}
-                      className={`mx-4 rounded-t-lg inline-block p-2 cursor-pointer hover:text-brand-800 ${
-                        activePill == x ? 'bg-gray-200 dark:bg-gray-400 text-brand-800' : ''
+                      className={`mx-4 rounded-t-lg inline-block p-2 cursor-pointer hover:text-brand-500 ${
+                        activePill == x ? 'bg-gray-200 dark:bg-gray-400 text-brand-500' : ''
                       }`}
                       onClick={() => setActivePill(x)}
                     >
diff --git a/apps/www/pages/partners/experts/[slug].tsx b/apps/www/pages/partners/experts/[slug].tsx
index 8603d2a86ac..10f9e46698f 100644
--- a/apps/www/pages/partners/experts/[slug].tsx
+++ b/apps/www/pages/partners/experts/[slug].tsx
@@ -160,7 +160,7 @@ function Partner({
                   <div className="flex items-center justify-between py-2">
                     <span className="text-scale-900">Category</span>
                     <Link href={`/partners/experts#${partner.category.toLowerCase()}`}>
-                      <a className="text-brand hover:text-brand-800 transition-colors">
+                      <a className="text-brand hover:text-brand-500 transition-colors">
                         {partner.category}
                       </a>
                     </Link>
@@ -172,7 +172,7 @@ function Partner({
                       href={partner.website}
                       target="_blank"
                       rel="noreferrer"
-                      className="text-brand hover:text-brand-800 transition-colors"
+                      className="text-brand hover:text-brand-500 transition-colors"
                     >
                       {new URL(partner.website).host}
                     </a>
@@ -185,7 +185,7 @@ function Partner({
                         href={partner.docs}
                         target="_blank"
                         rel="noreferrer"
-                        className="text-brand hover:text-brand-800 transition-colors"
+                        className="text-brand hover:text-brand-500 transition-colors"
                       >
                         <span className="flex items-center space-x-1">
                           <span>Learn</span>
diff --git a/apps/www/pages/partners/integrations/[slug].tsx b/apps/www/pages/partners/integrations/[slug].tsx
index cf1bb175550..850011be8bf 100644
--- a/apps/www/pages/partners/integrations/[slug].tsx
+++ b/apps/www/pages/partners/integrations/[slug].tsx
@@ -201,7 +201,7 @@ function Partner({
                     <div className="flex items-center justify-between py-2">
                       <span className="text-scale-900">Category</span>
                       <Link href={`/partners/integrations#${partner.category.toLowerCase()}`}>
-                        <a className="text-brand hover:text-brand-800 transition-colors">
+                        <a className="text-brand hover:text-brand-500 transition-colors">
                           {partner.category}
                         </a>
                       </Link>
@@ -213,7 +213,7 @@ function Partner({
                         href={partner.website}
                         target="_blank"
                         rel="noreferrer"
-                        className="text-brand hover:text-brand-800 transition-colors"
+                        className="text-brand hover:text-brand-500 transition-colors"
                       >
                         {new URL(partner.website).host}
                       </a>
@@ -226,7 +226,7 @@ function Partner({
                           href={partner.docs}
                           target="_blank"
                           rel="noreferrer"
-                          className="text-brand hover:text-brand-800 transition-colors"
+                          className="text-brand hover:text-brand-500 transition-colors"
                         >
                           <span className="flex items-center space-x-1">
                             <span>Learn</span>
diff --git a/apps/www/pages/partners/integrations/index.tsx b/apps/www/pages/partners/integrations/index.tsx
index 7665cace8fa..5c75d264915 100644
--- a/apps/www/pages/partners/integrations/index.tsx
+++ b/apps/www/pages/partners/integrations/index.tsx
@@ -200,10 +200,10 @@ function IntegrationPartnersPage(props: Props) {
                     <a className="text-scale-1200">INTEGRATIONS</a>
                   </Link>
                   <Link href={`/partners/experts`}>
-                    <a className="transition-colors text-brand hover:text-brand-800">EXPERTS</a>
+                    <a className="transition-colors text-brand hover:text-brand-500">EXPERTS</a>
                   </Link>
                   <Link href={`/partners/integrations#become-a-partner`}>
-                    <a className="flex items-center space-x-1 transition-colors text-brand hover:text-brand-800">
+                    <a className="flex items-center space-x-1 transition-colors text-brand hover:text-brand-500">
                       BECOME A PARTNER <IconArrowRight />
                     </a>
                   </Link>
diff --git a/apps/www/pages/realtime/Realtime.tsx b/apps/www/pages/realtime/Realtime.tsx
index 24d82a4f836..a6493b21025 100644
--- a/apps/www/pages/realtime/Realtime.tsx
+++ b/apps/www/pages/realtime/Realtime.tsx
@@ -66,7 +66,7 @@ function RealtimePage() {
             <div className="bg-scale-300 border-scale-500 relative flex h-[372px] w-[560px] items-center justify-center overflow-hidden rounded border drop-shadow-md">
               <div
                 className={[
-                  'border-brand-800 relative h-12 w-48 bg-[#34B27B]',
+                  'border-brand-500 relative h-12 w-48 bg-[#34B27B]',
                   `flex items-center justify-center ${RealtimeStyles['shape']}`,
                 ].join(' ')}
               >
diff --git a/apps/www/styles/index.css b/apps/www/styles/index.css
index 2e10d81a737..8802058a5cb 100644
--- a/apps/www/styles/index.css
+++ b/apps/www/styles/index.css
@@ -95,7 +95,7 @@ h6:not(.overwrite) {
 }
 
 .heading-gradient-brand {
-  @apply text-[#3ECF8E00] bg-clip-text bg-gradient-to-b from-brand-1000 to-brand dark:to-brand-800;
+  @apply text-[#3ECF8E00] bg-clip-text bg-gradient-to-b from-brand-1000 to-brand dark:to-brand-500;
 }
 
 .toc-animate {
diff --git a/packages/ui/src/components/Admonition/index.tsx b/packages/ui/src/components/Admonition/index.tsx
index d4b2bec0686..435b24bb717 100644
--- a/packages/ui/src/components/Admonition/index.tsx
+++ b/packages/ui/src/components/Admonition/index.tsx
@@ -21,7 +21,7 @@ export const Admonition = ({
             : type === 'info'
             ? 'bg-scale-500 border-scale-800'
             : type === 'tip'
-            ? 'bg-brand-300 border-brand-800'
+            ? 'bg-brand-300 border-brand-500'
             : type === 'caution'
             ? 'bg-yellow-400 border-yellow-800'
             : type === 'danger'
diff --git a/packages/ui/src/components/Badge/Badge.module.css b/packages/ui/src/components/Badge/Badge.module.css
index 38c8ed21ddf..1e4b89c8ca6 100644
--- a/packages/ui/src/components/Badge/Badge.module.css
+++ b/packages/ui/src/components/Badge/Badge.module.css
@@ -1,5 +1,5 @@
 /* .sbui-badge {
-  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-500 bg-opacity-10 text-brand-800;
+  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-500 bg-opacity-10 text-brand-500;
 }
 
 .sbui-badge--large {
diff --git a/packages/ui/src/components/Button/Button.module.css b/packages/ui/src/components/Button/Button.module.css
index d9cac9315ac..0ec5b8c86e2 100644
--- a/packages/ui/src/components/Button/Button.module.css
+++ b/packages/ui/src/components/Button/Button.module.css
@@ -50,7 +50,7 @@
   Button varients
 */
 /* .sbui-btn-primary {
-  @apply text-white bg-brand-800 hover:bg-brand-600;
+  @apply text-white bg-brand-500 hover:bg-brand-600;
   @apply dark:hover:bg-brand;
 } */
 .dark .sbui-btn-primary {
@@ -87,7 +87,7 @@
   @apply dark:text-white dark:border-dark-400 dark:hover:text-white dark:hover:border-white;
 } */
 /* .sbui-btn-link {
-  @apply bg-transparent text-brand-800 border-none hover:bg-brand hover:bg-opacity-25;
+  @apply bg-transparent text-brand-500 border-none hover:bg-brand hover:bg-opacity-25;
   box-shadow: none;
 } */
 /* .sbui-btn-text {
diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
index ae80a6835ae..482b5a57cef 100644
--- a/packages/ui/src/components/Button/Button.tsx
+++ b/packages/ui/src/components/Button/Button.tsx
@@ -53,9 +53,9 @@ const buttonVariants = cva(
         alternative: `
             text-brand-1100
             bg-brand-200 hover:bg-brand-400
-            border-brand-600 hover:border-brand-800
-            dark:border-brand-700 hover:dark:border-brand-800
-            focus-visible:border-brand-800
+            border-brand-600 hover:border-brand-500
+            dark:border-brand-700 hover:dark:border-brand-500
+            focus-visible:border-brand-500
             focus-visible:outline-brand-600
             shadow-sm`,
         outline: `
diff --git a/packages/ui/src/components/Command/Command.icons.tsx b/packages/ui/src/components/Command/Command.icons.tsx
index bc3fdcee576..77f98d6c308 100644
--- a/packages/ui/src/components/Command/Command.icons.tsx
+++ b/packages/ui/src/components/Command/Command.icons.tsx
@@ -30,7 +30,7 @@ export const AiIcon = ({ className = 'text-brand' }: AiIconProps) => (
 export const AiIconChat = () => (
   <div
     className="w-7 h-7
-    bg-gradient-to-r from-brand to-brand-800
+    bg-gradient-to-r from-brand to-brand-500
 
     ring-brand-600
     ring-1
diff --git a/packages/ui/src/components/Form/Form.stories.tsx b/packages/ui/src/components/Form/Form.stories.tsx
index 45f022d2f7c..ebfaa35304b 100644
--- a/packages/ui/src/components/Form/Form.stories.tsx
+++ b/packages/ui/src/components/Form/Form.stories.tsx
@@ -473,7 +473,7 @@ export const CardForm = () => {
                   descriptionText={
                     <span>
                       This can be found in{' '}
-                      <span className="text-brand underline cursor-pointer transition hover:text-brand-800">
+                      <span className="text-brand underline cursor-pointer transition hover:text-brand-500">
                         the developer settings
                       </span>
                     </span>
diff --git a/packages/ui/src/components/Icon/Icon.module.css b/packages/ui/src/components/Icon/Icon.module.css
index a9a9de6e63e..e700a8d935b 100644
--- a/packages/ui/src/components/Icon/Icon.module.css
+++ b/packages/ui/src/components/Icon/Icon.module.css
@@ -3,7 +3,7 @@
 }
 
 .sbui-icon-container--brand {
-  @apply bg-brand-800 bg-opacity-10 text-brand-800;
+  @apply bg-brand-500 bg-opacity-10 text-brand-500;
 }
 
 .sbui-icon-container--gray {
diff --git a/packages/ui/src/components/Loading/Loading.module.css b/packages/ui/src/components/Loading/Loading.module.css
index fe814195451..11bc689ac07 100644
--- a/packages/ui/src/components/Loading/Loading.module.css
+++ b/packages/ui/src/components/Loading/Loading.module.css
@@ -10,7 +10,7 @@
 }
 
 .sbui-loading-spinner {
-  @apply text-brand-800 animate-spin;
+  @apply text-brand-500 animate-spin;
   margin: auto;
   position: absolute;
   top: 0;
diff --git a/studio/.storybook/preview.css b/studio/.storybook/preview.css
index 2ba4312331c..2cbd73c923f 100644
--- a/studio/.storybook/preview.css
+++ b/studio/.storybook/preview.css
@@ -85,7 +85,7 @@
 }
 
 .react-datepicker__day--in-range {
-  @apply bg-brand-800 text-scale-fixed-100 border-brand-800;
+  @apply bg-brand-500 text-scale-fixed-100 border-brand-500;
 }
 
 .react-datepicker__day--in-selecting-range {
@@ -101,7 +101,7 @@
 }
 
 .react-datepicker__day--selected {
-  @apply bg-brand-800 text-white;
+  @apply bg-brand-500 text-white;
 }
 
 .react-datepicker__day--range-start {
diff --git a/studio/components/interfaces/Database/Wrappers/WrapperTableEditor.tsx b/studio/components/interfaces/Database/Wrappers/WrapperTableEditor.tsx
index 42d4f0c4a1a..e28c5988ca3 100644
--- a/studio/components/interfaces/Database/Wrappers/WrapperTableEditor.tsx
+++ b/studio/components/interfaces/Database/Wrappers/WrapperTableEditor.tsx
@@ -254,7 +254,7 @@ const TableForm = ({
                         key={column.name}
                         className={[
                           'px-2 py-1 rounded cursor-pointer transition',
-                          `${isSelected ? 'bg-brand-800' : 'bg-scale-500 hover:bg-scale-700'}`,
+                          `${isSelected ? 'bg-brand-500' : 'bg-scale-500 hover:bg-scale-700'}`,
                         ].join(' ')}
                         onClick={() => {
                           if (isSelected) {
diff --git a/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx b/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx
index b493941459f..be5f333d787 100644
--- a/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx
+++ b/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx
@@ -139,7 +139,7 @@ const APIKeys = () => {
                   for your tables and configured policies. You may also use the service key which
                   can be found{' '}
                   <Link href={`/project/${projectRef}/settings/api`}>
-                    <a className="transition text-brand-800 hover:text-brand">here</a>
+                    <a className="transition text-brand-500 hover:text-brand">here</a>
                   </Link>{' '}
                   to bypass RLS.
                 </p>
diff --git a/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx b/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx
index a39a293c3c7..debabfd77a5 100644
--- a/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx
+++ b/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx
@@ -47,7 +47,7 @@ const SavingIndicator = ({ id }: SavingIndicatorProps) => {
       {showSavedText ? (
         <Tooltip.Root delayDuration={0}>
           <Tooltip.Trigger>
-            <IconCheck className="text-brand-800" size={14} strokeWidth={3} />
+            <IconCheck className="text-brand-500" size={14} strokeWidth={3} />
           </Tooltip.Trigger>
           <Tooltip.Content side="bottom">
             <Tooltip.Arrow className="radix-tooltip-arrow" />
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
index 8f2b97f1b26..2dad6f0c0f5 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
@@ -367,7 +367,7 @@ const ColumnEditor = ({
                       <p>
                         You will need to{' '}
                         <Link href={`/project/${ref}/database/extensions?filter=pgsodium`}>
-                          <a className="text-brand-800 hover:text-brand transition">install</a>
+                          <a className="text-brand-500 hover:text-brand transition">install</a>
                         </Link>{' '}
                         the extension <code className="text-xs">pgsodium</code> first before being
                         able to encrypt your column.
diff --git a/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx b/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx
index 6d57ad97aec..b2eeb8357dc 100644
--- a/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx
+++ b/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx
@@ -176,7 +176,7 @@ const UpgradingState = () => {
                                 />
                               </div>
                             ) : isCompleted ? (
-                              <div className="flex items-center justify-center w-5 h-5 border rounded-full bg-brand-800 border-brand-700">
+                              <div className="flex items-center justify-center w-5 h-5 border rounded-full bg-brand-500 border-brand-700">
                                 <IconCheck size={12} className="text-white" strokeWidth={2} />
                               </div>
                             ) : (
diff --git a/studio/components/ui/PasswordStrengthBar.tsx b/studio/components/ui/PasswordStrengthBar.tsx
index 9976e1395ae..286affc53a2 100644
--- a/studio/components/ui/PasswordStrengthBar.tsx
+++ b/studio/components/ui/PasswordStrengthBar.tsx
@@ -39,7 +39,7 @@ const PasswordStrengthBar = ({
           ? passwordStrengthMessage
           : 'This is the password to your postgres database, so it must be strong and hard to guess.'}{' '}
         <span
-          className="text-brand-800 underline hover:text-brand transition cursor-pointer"
+          className="text-brand-500 underline hover:text-brand transition cursor-pointer"
           onClick={generateStrongPassword}
         >
           Generate a password
diff --git a/studio/styles/date-picker.scss b/studio/styles/date-picker.scss
index cdd92a1d887..da6bf18de28 100644
--- a/studio/styles/date-picker.scss
+++ b/studio/styles/date-picker.scss
@@ -73,7 +73,7 @@
 }
 
 .react-datepicker__day--in-range {
-  @apply bg-brand-800 text-scale-fixed-100 border-brand-800;
+  @apply bg-brand-500 text-scale-fixed-100 border-brand-500;
 }
 
 .react-datepicker__day--in-selecting-range {
@@ -90,7 +90,7 @@
 
 .react-datepicker__day--selected,
 .react-datepicker__day--selected.react-datepicker__day--highlighted {
-  @apply bg-brand-800 text-white;
+  @apply bg-brand-500 text-white;
 }
 
 .react-datepicker__day--range-start {

From dec542a85a7f69fed9240a45989f79ed709eb8f1 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Sun, 30 Jul 2023 17:01:49 +0800
Subject: [PATCH 08/73] chore: update old `brand-500` to new `brand-300`

---
 apps/docs/layouts/ref/RefSubLayout.tsx               |  2 +-
 apps/docs/layouts/tutorials/TutorialLayout.tsx       |  2 +-
 apps/docs/pages/reference/cli/config.tsx             |  2 +-
 apps/www/components/Button.tsx                       |  2 +-
 apps/www/components/Nav/index.tsx                    |  2 +-
 apps/www/components/Partners/PartnerLinkBox.tsx      |  2 +-
 apps/www/components/ProductIcon.tsx                  |  2 +-
 apps/www/pages/beta.tsx                              |  2 +-
 apps/www/pages/careers/index.tsx                     |  6 +++---
 apps/www/pages/open-source/index.tsx                 |  4 ++--
 apps/www/pages/partners/experts/[slug].tsx           |  6 +++---
 apps/www/pages/partners/integrations/[slug].tsx      |  6 +++---
 apps/www/pages/partners/integrations/index.tsx       |  4 ++--
 apps/www/pages/pricing/index.tsx                     | 12 ++++++------
 apps/www/pages/realtime/Realtime.tsx                 |  2 +-
 apps/www/styles/index.css                            |  4 ++--
 packages/ui/src/components/Admonition/index.tsx      |  2 +-
 packages/ui/src/components/Badge/Badge.module.css    |  2 +-
 packages/ui/src/components/Button/Button.module.css  |  4 ++--
 packages/ui/src/components/Button/Button.tsx         |  6 +++---
 .../ui/src/components/Checkbox/Checkbox.module.css   |  4 ++--
 packages/ui/src/components/Command/Command.icons.tsx |  2 +-
 packages/ui/src/components/Form/Form.stories.tsx     |  2 +-
 packages/ui/src/components/Icon/Icon.module.css      |  2 +-
 .../src/components/Listbox/SelectStyled.module.css   |  2 +-
 .../ui/src/components/Loading/Loading.module.css     |  2 +-
 packages/ui/src/components/Menu/Menu.module.css      |  2 +-
 packages/ui/src/components/Modal/Modal.module.css    |  2 +-
 packages/ui/src/components/Radio/Radio.module.css    |  2 +-
 .../src/components/Typography/Typography.module.css  |  2 +-
 studio/.storybook/preview.css                        |  4 ++--
 .../Database/Wrappers/WrapperTableEditor.tsx         |  2 +-
 .../interfaces/Home/NewProjectPanel/APIKeys.tsx      |  2 +-
 .../SQLEditor/UtilityPanel/SavingIndicator.tsx       |  2 +-
 .../SidePanelEditor/ColumnEditor/ColumnEditor.tsx    |  2 +-
 .../ProjectLayout/UpgradingState/UpgradingState.tsx  |  2 +-
 studio/components/ui/PasswordStrengthBar.tsx         |  2 +-
 studio/styles/date-picker.scss                       |  4 ++--
 studio/styles/grid.scss                              |  4 ++--
 39 files changed, 60 insertions(+), 60 deletions(-)

diff --git a/apps/docs/layouts/ref/RefSubLayout.tsx b/apps/docs/layouts/ref/RefSubLayout.tsx
index dc700bc4858..29324c13fbe 100644
--- a/apps/docs/layouts/ref/RefSubLayout.tsx
+++ b/apps/docs/layouts/ref/RefSubLayout.tsx
@@ -107,7 +107,7 @@ const StickyHeader: FC<StickyHeader> = ({ icon, ...props }) => {
   return (
     <div className={['flex items-center gap-3 not-prose', icon && 'mb-8'].join(' ')}>
       {icon && (
-        <div className="w-8 h-8 bg-brand-500 rounded flex items-center justify-center">
+        <div className="w-8 h-8 bg-brand-300 rounded flex items-center justify-center">
           <Image width={16} height={16} alt={icon} src={`${icon}.svg`} />
         </div>
       )}
diff --git a/apps/docs/layouts/tutorials/TutorialLayout.tsx b/apps/docs/layouts/tutorials/TutorialLayout.tsx
index be494c2aa33..65ded8cf428 100644
--- a/apps/docs/layouts/tutorials/TutorialLayout.tsx
+++ b/apps/docs/layouts/tutorials/TutorialLayout.tsx
@@ -64,7 +64,7 @@ const Layout: FC<Props> = (props: Props) => {
           <p className="text-brand tracking-wider">Tutorials</p>
           <article className={['prose dark:prose-dark ', 'max-w-none'].join(' ')}>
             <h1>{props.meta.title}</h1>
-            <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-500 to-brand my-16"></div>
+            <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-300 to-brand my-16"></div>
 
             <MDXProvider components={components} children={props.children} />
           </article>
diff --git a/apps/docs/pages/reference/cli/config.tsx b/apps/docs/pages/reference/cli/config.tsx
index 29a4ab5f4a3..dc114b5274c 100644
--- a/apps/docs/pages/reference/cli/config.tsx
+++ b/apps/docs/pages/reference/cli/config.tsx
@@ -29,7 +29,7 @@ export default function Config() {
         <div className="relative col-span-12 md:col-span-9 transition-all ease-out duration-100">
           <div className="w-full prose">
             <h1 className="">CLI configuration</h1>
-            <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-500 to-brand my-8"></div>
+            <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-300 to-brand my-8"></div>
             <ReactMarkdown>{specFile.info.description}</ReactMarkdown>
             <div>
               {TAGS.map((tag) =>
diff --git a/apps/www/components/Button.tsx b/apps/www/components/Button.tsx
index 1b5938ed997..40730032717 100644
--- a/apps/www/components/Button.tsx
+++ b/apps/www/components/Button.tsx
@@ -13,7 +13,7 @@ const Button = (props: Props) => {
 
   const colorClass =
     type === 'primary'
-      ? 'px-3 py-2 shadow-sm border border-transparent text-white bg-brand-700 hover:bg-brand-500 focus:ring-2 focus:ring-offset-2 focus:ring-brand-500'
+      ? 'px-3 py-2 shadow-sm border border-transparent text-white bg-brand-700 hover:bg-brand-300 focus:ring-2 focus:ring-offset-2 focus:ring-brand-300'
       : 'text-brand-700 bg-none'
 
   const textClass = type === 'primary' ? 'font-medium left-3 group-hover:left-0' : 'font-normal'
diff --git a/apps/www/components/Nav/index.tsx b/apps/www/components/Nav/index.tsx
index 2facb71cf43..cbd28eaea7a 100644
--- a/apps/www/components/Nav/index.tsx
+++ b/apps/www/components/Nav/index.tsx
@@ -299,7 +299,7 @@ const Nav = () => {
                     className="hidden group lg:flex"
                     type="text"
                     icon={
-                      <div className="flex items-center justify-center w-4 h-4 text-brand-500">
+                      <div className="flex items-center justify-center w-4 h-4 text-brand-300">
                         <div
                           className={[
                             `text-scale-900 flex h-3 w-3 items-center justify-center
diff --git a/apps/www/components/Partners/PartnerLinkBox.tsx b/apps/www/components/Partners/PartnerLinkBox.tsx
index 3471797b6bb..5f48015ac9e 100644
--- a/apps/www/components/Partners/PartnerLinkBox.tsx
+++ b/apps/www/components/Partners/PartnerLinkBox.tsx
@@ -19,7 +19,7 @@ const PartnerLinkBox = ({
       'bg-amber-400 dark:bg-scale-100 group-hover:bg-amber-500 dark:group-hover:bg-amber-300 text-amber-900',
     blue: 'bg-blue-400 dark:bg-scale-100 group-hover:bg-blue-500 dark:group-hover:bg-blue-300 text-blue-900',
     brand:
-      'bg-brand-400 dark:bg-scale-100 group-hover:bg-brand-500 dark:group-hover:bg-brand-300 text-brand',
+      'bg-brand-400 dark:bg-scale-100 group-hover:bg-brand-300 dark:group-hover:bg-brand-300 text-brand',
   }
 
   const content = (
diff --git a/apps/www/components/ProductIcon.tsx b/apps/www/components/ProductIcon.tsx
index f5c39baae9c..7d1c5090451 100644
--- a/apps/www/components/ProductIcon.tsx
+++ b/apps/www/components/ProductIcon.tsx
@@ -9,7 +9,7 @@ function ProductIcon({ icon, color }: ProductIcon) {
       className={[
         'inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md',
         !color || color === 'black' ? 'bg-scale-1200 text-scale-100' : '',
-        color && color === 'green' ? 'bg-brand-500 dark:bg-brand-600 text-brand-100' : '',
+        color && color === 'green' ? 'bg-brand-300 dark:bg-brand-600 text-brand-100' : '',
       ].join(' ')}
     >
       <svg
diff --git a/apps/www/pages/beta.tsx b/apps/www/pages/beta.tsx
index f737449fe70..f72f5e5a8fd 100644
--- a/apps/www/pages/beta.tsx
+++ b/apps/www/pages/beta.tsx
@@ -313,7 +313,7 @@ const Performance = () => {
                       <Bar
                         color={
                           stat.name === 'Supabase'
-                            ? 'bg-brand dark:bg-brand-500'
+                            ? 'bg-brand dark:bg-brand-300'
                             : 'bg-brand-300 dark:bg-brand-400'
                         }
                         finalPercentage={Math.ceil((stat.value / maxValue) * 100)}
diff --git a/apps/www/pages/careers/index.tsx b/apps/www/pages/careers/index.tsx
index d734e3eb9c6..f03c234b0a1 100644
--- a/apps/www/pages/careers/index.tsx
+++ b/apps/www/pages/careers/index.tsx
@@ -445,10 +445,10 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
                     className="flex lg:block items-start space-x-6 lg:space-x-0 lg:w-full"
                   >
                     <div className="lg:flex items-center">
-                      <h3 className="bg-brand-600 border-[1px] border-brand-500 text-brand text-md text-center w-[44px] px-2 py-1.5 rounded-md">
+                      <h3 className="bg-brand-600 border-[1px] border-brand-300 text-brand text-md text-center w-[44px] px-2 py-1.5 rounded-md">
                         {i + 1}
                       </h3>
-                      <div className="h-[100px] w-[1px] sm:h-[100px] mx-auto lg:h-[1px] lg:w-full bg-brand-500 lg:pr-6"></div>
+                      <div className="h-[100px] w-[1px] sm:h-[100px] mx-auto lg:h-[1px] lg:w-full bg-brand-300 lg:pr-6"></div>
                     </div>
                     <div className="lg:mt-6">
                       <h2 className="sm:text-lg max-w-[75%] xl:max-w-none xl:w-11/12 lg:max-w-none">
@@ -461,7 +461,7 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
                   </div>
                 )
               })}
-              <h3 className="bg-brand-600 border-[1px] border-brand-500 text-brand text-xl w-[44px] min-h-[40px] px-2 py-1 rounded-md grid justify-items-center items-center">
+              <h3 className="bg-brand-600 border-[1px] border-brand-300 text-brand text-xl w-[44px] min-h-[40px] px-2 py-1 rounded-md grid justify-items-center items-center">
                 <IconCheck />
               </h3>
             </div>
diff --git a/apps/www/pages/open-source/index.tsx b/apps/www/pages/open-source/index.tsx
index 5fff6c0a379..49d24b55151 100644
--- a/apps/www/pages/open-source/index.tsx
+++ b/apps/www/pages/open-source/index.tsx
@@ -82,8 +82,8 @@ const OpenSource = () => {
                   {maintainerPills.map((x) => (
                     <li
                       key={x}
-                      className={`mx-4 rounded-t-lg inline-block p-2 cursor-pointer hover:text-brand-500 ${
-                        activePill == x ? 'bg-gray-200 dark:bg-gray-400 text-brand-500' : ''
+                      className={`mx-4 rounded-t-lg inline-block p-2 cursor-pointer hover:text-brand-300 ${
+                        activePill == x ? 'bg-gray-200 dark:bg-gray-400 text-brand-300' : ''
                       }`}
                       onClick={() => setActivePill(x)}
                     >
diff --git a/apps/www/pages/partners/experts/[slug].tsx b/apps/www/pages/partners/experts/[slug].tsx
index 10f9e46698f..af94fef4e3c 100644
--- a/apps/www/pages/partners/experts/[slug].tsx
+++ b/apps/www/pages/partners/experts/[slug].tsx
@@ -160,7 +160,7 @@ function Partner({
                   <div className="flex items-center justify-between py-2">
                     <span className="text-scale-900">Category</span>
                     <Link href={`/partners/experts#${partner.category.toLowerCase()}`}>
-                      <a className="text-brand hover:text-brand-500 transition-colors">
+                      <a className="text-brand hover:text-brand-300 transition-colors">
                         {partner.category}
                       </a>
                     </Link>
@@ -172,7 +172,7 @@ function Partner({
                       href={partner.website}
                       target="_blank"
                       rel="noreferrer"
-                      className="text-brand hover:text-brand-500 transition-colors"
+                      className="text-brand hover:text-brand-300 transition-colors"
                     >
                       {new URL(partner.website).host}
                     </a>
@@ -185,7 +185,7 @@ function Partner({
                         href={partner.docs}
                         target="_blank"
                         rel="noreferrer"
-                        className="text-brand hover:text-brand-500 transition-colors"
+                        className="text-brand hover:text-brand-300 transition-colors"
                       >
                         <span className="flex items-center space-x-1">
                           <span>Learn</span>
diff --git a/apps/www/pages/partners/integrations/[slug].tsx b/apps/www/pages/partners/integrations/[slug].tsx
index 850011be8bf..76772b66469 100644
--- a/apps/www/pages/partners/integrations/[slug].tsx
+++ b/apps/www/pages/partners/integrations/[slug].tsx
@@ -201,7 +201,7 @@ function Partner({
                     <div className="flex items-center justify-between py-2">
                       <span className="text-scale-900">Category</span>
                       <Link href={`/partners/integrations#${partner.category.toLowerCase()}`}>
-                        <a className="text-brand hover:text-brand-500 transition-colors">
+                        <a className="text-brand hover:text-brand-300 transition-colors">
                           {partner.category}
                         </a>
                       </Link>
@@ -213,7 +213,7 @@ function Partner({
                         href={partner.website}
                         target="_blank"
                         rel="noreferrer"
-                        className="text-brand hover:text-brand-500 transition-colors"
+                        className="text-brand hover:text-brand-300 transition-colors"
                       >
                         {new URL(partner.website).host}
                       </a>
@@ -226,7 +226,7 @@ function Partner({
                           href={partner.docs}
                           target="_blank"
                           rel="noreferrer"
-                          className="text-brand hover:text-brand-500 transition-colors"
+                          className="text-brand hover:text-brand-300 transition-colors"
                         >
                           <span className="flex items-center space-x-1">
                             <span>Learn</span>
diff --git a/apps/www/pages/partners/integrations/index.tsx b/apps/www/pages/partners/integrations/index.tsx
index 5c75d264915..e5ef37e11b1 100644
--- a/apps/www/pages/partners/integrations/index.tsx
+++ b/apps/www/pages/partners/integrations/index.tsx
@@ -200,10 +200,10 @@ function IntegrationPartnersPage(props: Props) {
                     <a className="text-scale-1200">INTEGRATIONS</a>
                   </Link>
                   <Link href={`/partners/experts`}>
-                    <a className="transition-colors text-brand hover:text-brand-500">EXPERTS</a>
+                    <a className="transition-colors text-brand hover:text-brand-300">EXPERTS</a>
                   </Link>
                   <Link href={`/partners/integrations#become-a-partner`}>
-                    <a className="flex items-center space-x-1 transition-colors text-brand hover:text-brand-500">
+                    <a className="flex items-center space-x-1 transition-colors text-brand hover:text-brand-300">
                       BECOME A PARTNER <IconArrowRight />
                     </a>
                   </Link>
diff --git a/apps/www/pages/pricing/index.tsx b/apps/www/pages/pricing/index.tsx
index 618833e74a8..285d7e44f51 100644
--- a/apps/www/pages/pricing/index.tsx
+++ b/apps/www/pages/pricing/index.tsx
@@ -104,7 +104,7 @@ export default function IndexPage() {
   }) => {
     return (
       <div className="mt-8 px-4 mobile-header">
-        <h2 className="gradient-text-brand-500 dark:gradient-text-brand-100 text-3xl font-medium uppercase font-mono">
+        <h2 className="gradient-text-brand-300 dark:gradient-text-brand-100 text-3xl font-medium uppercase font-mono">
           {plan}
         </h2>
         <div className="flex items-baseline gap-2">
@@ -198,13 +198,13 @@ export default function IndexPage() {
                       <div className="mb-2 flex items-center gap-2">
                         <div className="flex items-center gap-2">
                           <h3
-                            className="gradient-text-brand-500 dark:gradient-text-brand-100 text-2xl font-normal
+                            className="gradient-text-brand-300 dark:gradient-text-brand-100 text-2xl font-normal
                            uppercase flex items-center gap-4 font-mono"
                           >
                             {plan.name}
                           </h3>
                           {plan.nameBadge && (
-                            <span className="bg-brand-500 text-brand-1100 rounded-md bg-opacity-30 py-0.5 px-2 text-[13px] leading-4">
+                            <span className="bg-brand-300 text-brand-1100 rounded-md bg-opacity-30 py-0.5 px-2 text-[13px] leading-4">
                               {plan.nameBadge}
                             </span>
                           )}
@@ -308,7 +308,7 @@ export default function IndexPage() {
             <div className="flex flex-col justify-center lg:px-8">
               <div>
                 <h3
-                  className="gradient-text-brand-500 dark:gradient-text-brand-100 text-2xl font-normal
+                  className="gradient-text-brand-300 dark:gradient-text-brand-100 text-2xl font-normal
                            uppercase flex items-center gap-4 font-mono"
                 >
                   {planEnterprise.name}
@@ -436,7 +436,7 @@ export default function IndexPage() {
           className="grid lg:grid-cols-2 gap-8 items-center mt-12 lg:mt-8 max-w-6xl mx-auto"
         >
           <div>
-            <span className="bg-brand-500 text-brand-1100 rounded-md bg-opacity-30 inline-block  dark:bg-scale-400 dark:text-scale-1100 py-0.5 px-2 text-[13px] leading-4 mt-2">
+            <span className="bg-brand-300 text-brand-1100 rounded-md bg-opacity-30 inline-block  dark:bg-scale-400 dark:text-scale-1100 py-0.5 px-2 text-[13px] leading-4 mt-2">
               Available for Pro plan
             </span>
             <h2 className="text-scale-1200 text-4xl mt-4">Cost control with spend caps</h2>
@@ -731,7 +731,7 @@ export default function IndexPage() {
                         scope="col"
                         key={plan.name}
                       >
-                        <h3 className="gradient-text-brand-500 dark:gradient-text-brand-100 text-2xl font-mono font-normal uppercase flex items-center gap-4">
+                        <h3 className="gradient-text-brand-300 dark:gradient-text-brand-100 text-2xl font-mono font-normal uppercase flex items-center gap-4">
                           {plan.name}
                         </h3>
                         <div
diff --git a/apps/www/pages/realtime/Realtime.tsx b/apps/www/pages/realtime/Realtime.tsx
index a6493b21025..062ed63e37e 100644
--- a/apps/www/pages/realtime/Realtime.tsx
+++ b/apps/www/pages/realtime/Realtime.tsx
@@ -66,7 +66,7 @@ function RealtimePage() {
             <div className="bg-scale-300 border-scale-500 relative flex h-[372px] w-[560px] items-center justify-center overflow-hidden rounded border drop-shadow-md">
               <div
                 className={[
-                  'border-brand-500 relative h-12 w-48 bg-[#34B27B]',
+                  'border-brand-300 relative h-12 w-48 bg-[#34B27B]',
                   `flex items-center justify-center ${RealtimeStyles['shape']}`,
                 ].join(' ')}
               >
diff --git a/apps/www/styles/index.css b/apps/www/styles/index.css
index 8802058a5cb..a029af04164 100644
--- a/apps/www/styles/index.css
+++ b/apps/www/styles/index.css
@@ -95,7 +95,7 @@ h6:not(.overwrite) {
 }
 
 .heading-gradient-brand {
-  @apply text-[#3ECF8E00] bg-clip-text bg-gradient-to-b from-brand-1000 to-brand dark:to-brand-500;
+  @apply text-[#3ECF8E00] bg-clip-text bg-gradient-to-b from-brand-1000 to-brand dark:to-brand-300;
 }
 
 .toc-animate {
@@ -683,7 +683,7 @@ launch week
   .gradient-text-brand-100 {
     background-image: linear-gradient(45deg, var(--colors-brand8) 0%, var(--colors-brand9) 100%);
   }
-  .gradient-text-brand-500 {
+  .gradient-text-brand-300 {
     background-image: linear-gradient(45deg, var(--colors-brand8) 0%, var(--colors-brand9) 100%);
   }
 
diff --git a/packages/ui/src/components/Admonition/index.tsx b/packages/ui/src/components/Admonition/index.tsx
index 435b24bb717..1a076acf41c 100644
--- a/packages/ui/src/components/Admonition/index.tsx
+++ b/packages/ui/src/components/Admonition/index.tsx
@@ -21,7 +21,7 @@ export const Admonition = ({
             : type === 'info'
             ? 'bg-scale-500 border-scale-800'
             : type === 'tip'
-            ? 'bg-brand-300 border-brand-500'
+            ? 'bg-brand-300 border-brand-300'
             : type === 'caution'
             ? 'bg-yellow-400 border-yellow-800'
             : type === 'danger'
diff --git a/packages/ui/src/components/Badge/Badge.module.css b/packages/ui/src/components/Badge/Badge.module.css
index 1e4b89c8ca6..79fbcf8ac93 100644
--- a/packages/ui/src/components/Badge/Badge.module.css
+++ b/packages/ui/src/components/Badge/Badge.module.css
@@ -1,5 +1,5 @@
 /* .sbui-badge {
-  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-500 bg-opacity-10 text-brand-500;
+  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-500 bg-opacity-10 text-brand-300;
 }
 
 .sbui-badge--large {
diff --git a/packages/ui/src/components/Button/Button.module.css b/packages/ui/src/components/Button/Button.module.css
index 0ec5b8c86e2..b3f7703ec93 100644
--- a/packages/ui/src/components/Button/Button.module.css
+++ b/packages/ui/src/components/Button/Button.module.css
@@ -50,7 +50,7 @@
   Button varients
 */
 /* .sbui-btn-primary {
-  @apply text-white bg-brand-500 hover:bg-brand-600;
+  @apply text-white bg-brand-300 hover:bg-brand-600;
   @apply dark:hover:bg-brand;
 } */
 .dark .sbui-btn-primary {
@@ -87,7 +87,7 @@
   @apply dark:text-white dark:border-dark-400 dark:hover:text-white dark:hover:border-white;
 } */
 /* .sbui-btn-link {
-  @apply bg-transparent text-brand-500 border-none hover:bg-brand hover:bg-opacity-25;
+  @apply bg-transparent text-brand-300 border-none hover:bg-brand hover:bg-opacity-25;
   box-shadow: none;
 } */
 /* .sbui-btn-text {
diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
index 482b5a57cef..3997786a9ea 100644
--- a/packages/ui/src/components/Button/Button.tsx
+++ b/packages/ui/src/components/Button/Button.tsx
@@ -53,9 +53,9 @@ const buttonVariants = cva(
         alternative: `
             text-brand-1100
             bg-brand-200 hover:bg-brand-400
-            border-brand-600 hover:border-brand-500
-            dark:border-brand-700 hover:dark:border-brand-500
-            focus-visible:border-brand-500
+            border-brand-600 hover:border-brand-300
+            dark:border-brand-700 hover:dark:border-brand-300
+            focus-visible:border-brand-300
             focus-visible:outline-brand-600
             shadow-sm`,
         outline: `
diff --git a/packages/ui/src/components/Checkbox/Checkbox.module.css b/packages/ui/src/components/Checkbox/Checkbox.module.css
index 0055c0a1519..1139bc4136f 100644
--- a/packages/ui/src/components/Checkbox/Checkbox.module.css
+++ b/packages/ui/src/components/Checkbox/Checkbox.module.css
@@ -39,10 +39,10 @@
   @apply border border-solid rounded;
 
   @apply text-brand-700 border-gray-300 transition-all;
-  @apply hover:border-brand-500 focus:ring-brand-500 focus:outline-none;
+  @apply hover:border-brand-300 focus:ring-brand-300 focus:outline-none;
 
   @apply dark:bg-transparent dark:border-dark-400 dark:text-white;
-  @apply dark:hover:border-brand-500;
+  @apply dark:hover:border-brand-300;
 
   margin-top: 2px;
 } */
diff --git a/packages/ui/src/components/Command/Command.icons.tsx b/packages/ui/src/components/Command/Command.icons.tsx
index 77f98d6c308..2d259785f22 100644
--- a/packages/ui/src/components/Command/Command.icons.tsx
+++ b/packages/ui/src/components/Command/Command.icons.tsx
@@ -30,7 +30,7 @@ export const AiIcon = ({ className = 'text-brand' }: AiIconProps) => (
 export const AiIconChat = () => (
   <div
     className="w-7 h-7
-    bg-gradient-to-r from-brand to-brand-500
+    bg-gradient-to-r from-brand to-brand-300
 
     ring-brand-600
     ring-1
diff --git a/packages/ui/src/components/Form/Form.stories.tsx b/packages/ui/src/components/Form/Form.stories.tsx
index ebfaa35304b..f46c9ac0c29 100644
--- a/packages/ui/src/components/Form/Form.stories.tsx
+++ b/packages/ui/src/components/Form/Form.stories.tsx
@@ -473,7 +473,7 @@ export const CardForm = () => {
                   descriptionText={
                     <span>
                       This can be found in{' '}
-                      <span className="text-brand underline cursor-pointer transition hover:text-brand-500">
+                      <span className="text-brand underline cursor-pointer transition hover:text-brand-300">
                         the developer settings
                       </span>
                     </span>
diff --git a/packages/ui/src/components/Icon/Icon.module.css b/packages/ui/src/components/Icon/Icon.module.css
index e700a8d935b..14798373b2d 100644
--- a/packages/ui/src/components/Icon/Icon.module.css
+++ b/packages/ui/src/components/Icon/Icon.module.css
@@ -3,7 +3,7 @@
 }
 
 .sbui-icon-container--brand {
-  @apply bg-brand-500 bg-opacity-10 text-brand-500;
+  @apply bg-brand-300 bg-opacity-10 text-brand-300;
 }
 
 .sbui-icon-container--gray {
diff --git a/packages/ui/src/components/Listbox/SelectStyled.module.css b/packages/ui/src/components/Listbox/SelectStyled.module.css
index e2cc7c937ff..14b34d1c018 100644
--- a/packages/ui/src/components/Listbox/SelectStyled.module.css
+++ b/packages/ui/src/components/Listbox/SelectStyled.module.css
@@ -7,7 +7,7 @@
   @apply text-gray-700 border border-solid border-gray-300;
   @apply cursor-default focus:outline-none focus:ring-1 focus:ring-brand-600 focus:border-brand-600;
   @apply dark:bg-transparent dark:text-white dark:border-gray-500;
-  @apply dark:focus:border-brand-500;
+  @apply dark:focus:border-brand-300;
   -webkit-appearance: none;
   -moz-appearance: none;
   text-indent: 1px;
diff --git a/packages/ui/src/components/Loading/Loading.module.css b/packages/ui/src/components/Loading/Loading.module.css
index 11bc689ac07..4f2c5d1503e 100644
--- a/packages/ui/src/components/Loading/Loading.module.css
+++ b/packages/ui/src/components/Loading/Loading.module.css
@@ -10,7 +10,7 @@
 }
 
 .sbui-loading-spinner {
-  @apply text-brand-500 animate-spin;
+  @apply text-brand-300 animate-spin;
   margin: auto;
   position: absolute;
   top: 0;
diff --git a/packages/ui/src/components/Menu/Menu.module.css b/packages/ui/src/components/Menu/Menu.module.css
index 189981a4242..a78c227d664 100644
--- a/packages/ui/src/components/Menu/Menu.module.css
+++ b/packages/ui/src/components/Menu/Menu.module.css
@@ -26,7 +26,7 @@
 }
 
 .sbui-menu__item--active--bar {
-  @apply border-l-4 border-brand-500;
+  @apply border-l-4 border-brand-300;
   border-left-style: solid;
 }
 
diff --git a/packages/ui/src/components/Modal/Modal.module.css b/packages/ui/src/components/Modal/Modal.module.css
index 447c46d3585..f7808e0531a 100644
--- a/packages/ui/src/components/Modal/Modal.module.css
+++ b/packages/ui/src/components/Modal/Modal.module.css
@@ -114,7 +114,7 @@
 }
 
 .sbui-modal-icon-container--success {
-  @apply text-brand-500 bg-brand-500 bg-opacity-20;
+  @apply text-brand-300 bg-brand-300 bg-opacity-20;
 }
 
 .sbui-modal-close-container {
diff --git a/packages/ui/src/components/Radio/Radio.module.css b/packages/ui/src/components/Radio/Radio.module.css
index cf7cee7cc14..1f235aa5b0b 100644
--- a/packages/ui/src/components/Radio/Radio.module.css
+++ b/packages/ui/src/components/Radio/Radio.module.css
@@ -43,7 +43,7 @@
   @apply h-4 w-4 ml-0 mr-3.5 rounded-2xl border border-solid transition-all;
 
   @apply text-brand-600 cursor-pointer border-gray-500;
-  @apply focus:ring-brand-500 hover:border-brand-700 focus:outline-none;
+  @apply focus:ring-brand-300 hover:border-brand-700 focus:outline-none;
 
   @apply dark:bg-transparent dark:hover:border-brand-700;
 } */
diff --git a/packages/ui/src/components/Typography/Typography.module.css b/packages/ui/src/components/Typography/Typography.module.css
index 95a20672200..33f2cabca71 100644
--- a/packages/ui/src/components/Typography/Typography.module.css
+++ b/packages/ui/src/components/Typography/Typography.module.css
@@ -91,6 +91,6 @@
 }
 
 .dark .sbui-typography::selection {
-  /* @apply bg-brand-500; */
+  /* @apply bg-brand-300; */
   backgroundcolor: '#6f7bb635';
 }
diff --git a/studio/.storybook/preview.css b/studio/.storybook/preview.css
index 2cbd73c923f..7232a33ea5d 100644
--- a/studio/.storybook/preview.css
+++ b/studio/.storybook/preview.css
@@ -85,7 +85,7 @@
 }
 
 .react-datepicker__day--in-range {
-  @apply bg-brand-500 text-scale-fixed-100 border-brand-500;
+  @apply bg-brand-300 text-scale-fixed-100 border-brand-300;
 }
 
 .react-datepicker__day--in-selecting-range {
@@ -101,7 +101,7 @@
 }
 
 .react-datepicker__day--selected {
-  @apply bg-brand-500 text-white;
+  @apply bg-brand-300 text-white;
 }
 
 .react-datepicker__day--range-start {
diff --git a/studio/components/interfaces/Database/Wrappers/WrapperTableEditor.tsx b/studio/components/interfaces/Database/Wrappers/WrapperTableEditor.tsx
index e28c5988ca3..c25c1bc3397 100644
--- a/studio/components/interfaces/Database/Wrappers/WrapperTableEditor.tsx
+++ b/studio/components/interfaces/Database/Wrappers/WrapperTableEditor.tsx
@@ -254,7 +254,7 @@ const TableForm = ({
                         key={column.name}
                         className={[
                           'px-2 py-1 rounded cursor-pointer transition',
-                          `${isSelected ? 'bg-brand-500' : 'bg-scale-500 hover:bg-scale-700'}`,
+                          `${isSelected ? 'bg-brand-300' : 'bg-scale-500 hover:bg-scale-700'}`,
                         ].join(' ')}
                         onClick={() => {
                           if (isSelected) {
diff --git a/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx b/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx
index be5f333d787..1783a8f28e8 100644
--- a/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx
+++ b/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx
@@ -139,7 +139,7 @@ const APIKeys = () => {
                   for your tables and configured policies. You may also use the service key which
                   can be found{' '}
                   <Link href={`/project/${projectRef}/settings/api`}>
-                    <a className="transition text-brand-500 hover:text-brand">here</a>
+                    <a className="transition text-brand-300 hover:text-brand">here</a>
                   </Link>{' '}
                   to bypass RLS.
                 </p>
diff --git a/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx b/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx
index debabfd77a5..05bc9c02c20 100644
--- a/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx
+++ b/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx
@@ -47,7 +47,7 @@ const SavingIndicator = ({ id }: SavingIndicatorProps) => {
       {showSavedText ? (
         <Tooltip.Root delayDuration={0}>
           <Tooltip.Trigger>
-            <IconCheck className="text-brand-500" size={14} strokeWidth={3} />
+            <IconCheck className="text-brand-300" size={14} strokeWidth={3} />
           </Tooltip.Trigger>
           <Tooltip.Content side="bottom">
             <Tooltip.Arrow className="radix-tooltip-arrow" />
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
index 2dad6f0c0f5..c98ba5e41fa 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
@@ -367,7 +367,7 @@ const ColumnEditor = ({
                       <p>
                         You will need to{' '}
                         <Link href={`/project/${ref}/database/extensions?filter=pgsodium`}>
-                          <a className="text-brand-500 hover:text-brand transition">install</a>
+                          <a className="text-brand-300 hover:text-brand transition">install</a>
                         </Link>{' '}
                         the extension <code className="text-xs">pgsodium</code> first before being
                         able to encrypt your column.
diff --git a/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx b/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx
index b2eeb8357dc..723a9108f3f 100644
--- a/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx
+++ b/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx
@@ -176,7 +176,7 @@ const UpgradingState = () => {
                                 />
                               </div>
                             ) : isCompleted ? (
-                              <div className="flex items-center justify-center w-5 h-5 border rounded-full bg-brand-500 border-brand-700">
+                              <div className="flex items-center justify-center w-5 h-5 border rounded-full bg-brand-300 border-brand-700">
                                 <IconCheck size={12} className="text-white" strokeWidth={2} />
                               </div>
                             ) : (
diff --git a/studio/components/ui/PasswordStrengthBar.tsx b/studio/components/ui/PasswordStrengthBar.tsx
index 286affc53a2..8a82411b562 100644
--- a/studio/components/ui/PasswordStrengthBar.tsx
+++ b/studio/components/ui/PasswordStrengthBar.tsx
@@ -39,7 +39,7 @@ const PasswordStrengthBar = ({
           ? passwordStrengthMessage
           : 'This is the password to your postgres database, so it must be strong and hard to guess.'}{' '}
         <span
-          className="text-brand-500 underline hover:text-brand transition cursor-pointer"
+          className="text-brand-300 underline hover:text-brand transition cursor-pointer"
           onClick={generateStrongPassword}
         >
           Generate a password
diff --git a/studio/styles/date-picker.scss b/studio/styles/date-picker.scss
index da6bf18de28..0764165de06 100644
--- a/studio/styles/date-picker.scss
+++ b/studio/styles/date-picker.scss
@@ -73,7 +73,7 @@
 }
 
 .react-datepicker__day--in-range {
-  @apply bg-brand-500 text-scale-fixed-100 border-brand-500;
+  @apply bg-brand-300 text-scale-fixed-100 border-brand-300;
 }
 
 .react-datepicker__day--in-selecting-range {
@@ -90,7 +90,7 @@
 
 .react-datepicker__day--selected,
 .react-datepicker__day--selected.react-datepicker__day--highlighted {
-  @apply bg-brand-500 text-white;
+  @apply bg-brand-300 text-white;
 }
 
 .react-datepicker__day--range-start {
diff --git a/studio/styles/grid.scss b/studio/styles/grid.scss
index e77c482c391..831262f414a 100644
--- a/studio/styles/grid.scss
+++ b/studio/styles/grid.scss
@@ -186,7 +186,7 @@
     @apply cursor-pointer rounded border border-solid;
 
     @apply text-brand-600 border-scale-400 transition-all;
-    @apply hover:border-brand focus:ring-brand-500 focus:outline-none;
+    @apply hover:border-brand focus:ring-brand-300 focus:outline-none;
 
     @apply dark:border-scale-500 dark:bg-transparent dark:text-white;
     @apply dark:hover:border-green-900;
@@ -523,7 +523,7 @@
 }
 
 .sb-grid-select-cell__header__input {
-  /* @apply focus:ring-brand-500; */
+  /* @apply focus:ring-brand-300; */
   @apply border-scale-300;
 }
 

From 40b16b0a8931b679572dca8710a653924dc7625c Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Sun, 30 Jul 2023 17:02:40 +0800
Subject: [PATCH 09/73] chore: update old `brand-1000` to new `brand-600`

---
 .../NavigationMenu/NavigationMenuRefListItems.tsx         | 2 +-
 apps/www/pages/customers/[slug].tsx                       | 2 +-
 apps/www/pages/pricing/index.tsx                          | 6 +++---
 apps/www/styles/index.css                                 | 2 +-
 .../interfaces/BillingV2/Usage/Usage.constants.tsx        | 2 +-
 .../components/layouts/ProjectLayout/ConnectingState.tsx  | 8 ++++----
 studio/styles/ui.scss                                     | 2 +-
 7 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
index 07e9d7f3363..651cf2786a3 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
@@ -72,7 +72,7 @@ const FunctionLink = React.memo(function FunctionLink({
         {active && !isSubItem && (
           <div
             aria-hidden="true"
-            className="absolute -left-[13px] top-0 bottom-0 w-[1px] bg-brand-1000"
+            className="absolute -left-[13px] top-0 bottom-0 w-[1px] bg-brand-600"
           ></div>
         )}
         {isParent && (
diff --git a/apps/www/pages/customers/[slug].tsx b/apps/www/pages/customers/[slug].tsx
index ea186151c78..19880b2ca34 100644
--- a/apps/www/pages/customers/[slug].tsx
+++ b/apps/www/pages/customers/[slug].tsx
@@ -122,7 +122,7 @@ function CaseStudyPage(props: any) {
                 <article className="flex flex-col gap-8">
                   <div className="flex flex-col gap-8 max-w-xxl">
                     <Link passHref href="/customers">
-                      <a className="text-brand hover:text-brand-1000 mb-2 mt-0">Customer Stories</a>
+                      <a className="text-brand hover:text-brand-600 mb-2 mt-0">Customer Stories</a>
                     </Link>
                     <h1 className="text-scale-1200 text-4xl font-semibold xl:text-5xl">
                       {props.blog.title}
diff --git a/apps/www/pages/pricing/index.tsx b/apps/www/pages/pricing/index.tsx
index 285d7e44f51..0fd7134c9cb 100644
--- a/apps/www/pages/pricing/index.tsx
+++ b/apps/www/pages/pricing/index.tsx
@@ -403,7 +403,7 @@ export default function IndexPage() {
                     </Link>
                     {addon.name === 'Optimized Compute' ? (
                       <button
-                        className="text-brand-1000 text-[13px] leading-4 hover:underline "
+                        className="text-brand-600 text-[13px] leading-4 hover:underline "
                         onClick={() => setShowComputeModal(true)}
                       >
                         {addon.rightCtaText}
@@ -949,7 +949,7 @@ export default function IndexPage() {
                 <a
                   target="_blank"
                   href="https://supabase.com/dashboard/support/new"
-                  className="transition text-brand hover:text-brand-1000"
+                  className="transition text-brand hover:text-brand-600"
                 >
                   open a support ticket
                 </a>{' '}
@@ -960,7 +960,7 @@ export default function IndexPage() {
                 <a
                   target="_blank"
                   href="https://supabase.com/dashboard/support/new"
-                  className="transition text-brand hover:text-brand-1000"
+                  className="transition text-brand hover:text-brand-600"
                 >
                   you can contact the team here
                 </a>
diff --git a/apps/www/styles/index.css b/apps/www/styles/index.css
index a029af04164..be88c51f50f 100644
--- a/apps/www/styles/index.css
+++ b/apps/www/styles/index.css
@@ -95,7 +95,7 @@ h6:not(.overwrite) {
 }
 
 .heading-gradient-brand {
-  @apply text-[#3ECF8E00] bg-clip-text bg-gradient-to-b from-brand-1000 to-brand dark:to-brand-300;
+  @apply text-[#3ECF8E00] bg-clip-text bg-gradient-to-b from-brand-600 to-brand dark:to-brand-300;
 }
 
 .toc-animate {
diff --git a/studio/components/interfaces/BillingV2/Usage/Usage.constants.tsx b/studio/components/interfaces/BillingV2/Usage/Usage.constants.tsx
index e4373adc574..0aab04f6ba7 100644
--- a/studio/components/interfaces/BillingV2/Usage/Usage.constants.tsx
+++ b/studio/components/interfaces/BillingV2/Usage/Usage.constants.tsx
@@ -195,7 +195,7 @@ export const USAGE_CATEGORIES: CategoryMeta[] = [
                 The disk is expanded to be 50% larger. Auto-scaling can only take place once every 6
                 hours. You can also{' '}
                 <Link passHref href={`/project/${ref}/settings/database#diskManagement`}>
-                  <a className="text-brand transition hover:text-brand-1000">preprovision</a>
+                  <a className="text-brand transition hover:text-brand-600">preprovision</a>
                 </Link>{' '}
                 disk for loading larger amounts of data.
               </p>
diff --git a/studio/components/layouts/ProjectLayout/ConnectingState.tsx b/studio/components/layouts/ProjectLayout/ConnectingState.tsx
index ba2ae591e0b..f9da7b84d57 100644
--- a/studio/components/layouts/ProjectLayout/ConnectingState.tsx
+++ b/studio/components/layouts/ProjectLayout/ConnectingState.tsx
@@ -106,13 +106,13 @@ const ConnectingState = ({ project }: ConnectingStateProps) => {
               <p className="text-sm text-scale-1200">
                 Your project might be facing resource constraints and hence is having trouble
                 connecting. You can verify this by checking your{' '}
-                <span className="text-brand-1000">
+                <span className="text-brand-600">
                   <Link href={`/project/${project.ref}/settings/database`}>
                     <a>database's health</a>
                   </Link>
                 </span>{' '}
                 or your remaining daily disk IO budget via a{' '}
-                <span className="text-brand-1000">
+                <span className="text-brand-600">
                   <Link href={`/project/${project.ref}/reports`}>
                     <a>customizable project report</a>
                   </Link>
@@ -121,7 +121,7 @@ const ConnectingState = ({ project }: ConnectingStateProps) => {
               </p>
               <p className="text-sm text-scale-1200">
                 If your project is facing resource constraints, you can{' '}
-                <span className="text-brand-1000">
+                <span className="text-brand-600">
                   <Link href={`/project/${project.ref}/reports`}>
                     <a>upgrade</a>
                   </Link>
@@ -131,7 +131,7 @@ const ConnectingState = ({ project }: ConnectingStateProps) => {
               <p className="text-sm text-scale-1200">
                 However, if your project still fails to connect thereafter, you can open a support
                 ticket{' '}
-                <span className="text-brand-1000">
+                <span className="text-brand-600">
                   <Link href={`/support/new?ref=${project.ref}`}>here</Link>
                 </span>
                 .
diff --git a/studio/styles/ui.scss b/studio/styles/ui.scss
index 69504ba91c9..afe63893d05 100644
--- a/studio/styles/ui.scss
+++ b/studio/styles/ui.scss
@@ -263,7 +263,7 @@
     }
 
     a:hover {
-      @apply text-brand-1000;
+      @apply text-brand-600;
     }
 
     p:last-child {

From 2b3d49af3b3619b12196ee16f1eef380ed1d77f7 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Sun, 30 Jul 2023 17:03:30 +0800
Subject: [PATCH 10/73] chore: update old `brand-700` to new `brand-400`

---
 apps/docs/components/reference/OldVersionAlert.tsx          | 2 +-
 apps/www/components/Button.tsx                              | 4 ++--
 apps/www/components/Nav/Company.tsx                         | 2 +-
 packages/ui/src/components/Breadcrumb/Breadcrumb.module.css | 4 ++--
 packages/ui/src/components/Button/Button.tsx                | 2 +-
 packages/ui/src/components/Checkbox/Checkbox.module.css     | 6 +++---
 packages/ui/src/components/Form/examples/AuthForm.tsx       | 2 +-
 packages/ui/src/components/Modal/Modal.stories.tsx          | 2 +-
 packages/ui/src/components/Radio/Radio.module.css           | 4 ++--
 packages/ui/src/components/Tabs/Tabs.module.css             | 2 +-
 packages/ui/src/components/Typography/Link.module.css       | 2 +-
 packages/ui/src/components/shadcn/ui/badge.tsx              | 4 ++--
 packages/ui/src/lib/theme/defaultTheme.ts                   | 4 ++--
 studio/.storybook/preview.css                               | 2 +-
 studio/components/grid/components/header/Header.tsx         | 2 +-
 .../interfaces/Auth/AuthProvidersForm/ProviderForm.tsx      | 2 +-
 .../layouts/ProjectLayout/UpgradingState/UpgradingState.tsx | 2 +-
 .../Storage/StorageExplorer/FileExplorerHeaderSelection.tsx | 2 +-
 studio/styles/date-picker.scss                              | 2 +-
 19 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/apps/docs/components/reference/OldVersionAlert.tsx b/apps/docs/components/reference/OldVersionAlert.tsx
index a9c04d535d8..4a5a601966a 100644
--- a/apps/docs/components/reference/OldVersionAlert.tsx
+++ b/apps/docs/components/reference/OldVersionAlert.tsx
@@ -27,7 +27,7 @@ const OldVersionAlert = ({ sections }: OldVersionAlertProps) => {
         You&apos;re viewing an older version of this library.
         <br />
         <Link href={latestVersionUrl}>
-          <a className="underline decoration-brand-700 underline-offset-4 decoration-1">
+          <a className="underline decoration-brand-400 underline-offset-4 decoration-1">
             Switch to the latest
           </a>
         </Link>
diff --git a/apps/www/components/Button.tsx b/apps/www/components/Button.tsx
index 40730032717..549409500a4 100644
--- a/apps/www/components/Button.tsx
+++ b/apps/www/components/Button.tsx
@@ -13,8 +13,8 @@ const Button = (props: Props) => {
 
   const colorClass =
     type === 'primary'
-      ? 'px-3 py-2 shadow-sm border border-transparent text-white bg-brand-700 hover:bg-brand-300 focus:ring-2 focus:ring-offset-2 focus:ring-brand-300'
-      : 'text-brand-700 bg-none'
+      ? 'px-3 py-2 shadow-sm border border-transparent text-white bg-brand-400 hover:bg-brand-300 focus:ring-2 focus:ring-offset-2 focus:ring-brand-300'
+      : 'text-brand-400 bg-none'
 
   const textClass = type === 'primary' ? 'font-medium left-3 group-hover:left-0' : 'font-normal'
 
diff --git a/apps/www/components/Nav/Company.tsx b/apps/www/components/Nav/Company.tsx
index d7c21238697..3332c475b76 100644
--- a/apps/www/components/Nav/Company.tsx
+++ b/apps/www/components/Nav/Company.tsx
@@ -82,7 +82,7 @@ const Company = () => {
         <div className="mt-6 text-sm font-medium">
           <a
             href="/blog"
-            className="dark:text-brand dark:hover:text-brand-700 text-gray-600 transition duration-150 ease-in-out hover:text-gray-500"
+            className="dark:text-brand dark:hover:text-brand-400 text-gray-600 transition duration-150 ease-in-out hover:text-gray-500"
           >
             View all posts <span aria-hidden="true">&rarr;</span>
           </a>
diff --git a/packages/ui/src/components/Breadcrumb/Breadcrumb.module.css b/packages/ui/src/components/Breadcrumb/Breadcrumb.module.css
index 60a6ec4e374..6296701e328 100644
--- a/packages/ui/src/components/Breadcrumb/Breadcrumb.module.css
+++ b/packages/ui/src/components/Breadcrumb/Breadcrumb.module.css
@@ -10,11 +10,11 @@
 .sbui-breadcrumb--item {
   @apply text-gray-500 hover:text-gray-600;
   @apply cursor-pointer;
-  @apply dark:text-dark-200 dark:hover:text-brand-700;
+  @apply dark:text-dark-200 dark:hover:text-brand-400;
 }
 
 .sbui-breadcrumb--item__active {
-  @apply text-brand-700 dark:text-brand-700;
+  @apply text-brand-400 dark:text-brand-400;
 }
 
 .sbui-breadcrumb--separator {
diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
index 3997786a9ea..a0afcf80f5e 100644
--- a/packages/ui/src/components/Button/Button.tsx
+++ b/packages/ui/src/components/Button/Button.tsx
@@ -54,7 +54,7 @@ const buttonVariants = cva(
             text-brand-1100
             bg-brand-200 hover:bg-brand-400
             border-brand-600 hover:border-brand-300
-            dark:border-brand-700 hover:dark:border-brand-300
+            dark:border-brand-400 hover:dark:border-brand-300
             focus-visible:border-brand-300
             focus-visible:outline-brand-600
             shadow-sm`,
diff --git a/packages/ui/src/components/Checkbox/Checkbox.module.css b/packages/ui/src/components/Checkbox/Checkbox.module.css
index 1139bc4136f..a955fe0b51d 100644
--- a/packages/ui/src/components/Checkbox/Checkbox.module.css
+++ b/packages/ui/src/components/Checkbox/Checkbox.module.css
@@ -27,8 +27,8 @@
 }
 
 .sbui-checkbox[type='checkbox']:checked {
-  @apply dark:bg-brand-700;
-  @apply bg-brand-700;
+  @apply dark:bg-brand-400;
+  @apply bg-brand-400;
   border-color: transparent;
   background-size: 100% 100%;
   background-position: center;
@@ -38,7 +38,7 @@
 /* .sbui-checkbox {
   @apply border border-solid rounded;
 
-  @apply text-brand-700 border-gray-300 transition-all;
+  @apply text-brand-400 border-gray-300 transition-all;
   @apply hover:border-brand-300 focus:ring-brand-300 focus:outline-none;
 
   @apply dark:bg-transparent dark:border-dark-400 dark:text-white;
diff --git a/packages/ui/src/components/Form/examples/AuthForm.tsx b/packages/ui/src/components/Form/examples/AuthForm.tsx
index b64e5d18614..1b4987e2387 100644
--- a/packages/ui/src/components/Form/examples/AuthForm.tsx
+++ b/packages/ui/src/components/Form/examples/AuthForm.tsx
@@ -338,7 +338,7 @@ const AuthForm = () => {
             </div>
             <div className="flex items-center gap-3">
               {active ? (
-                <div className="bg-brand-200 border-brand-700 text-brand flex items-center gap-1 rounded-full border py-1 px-1 text-xs">
+                <div className="bg-brand-200 border-brand-400 text-brand flex items-center gap-1 rounded-full border py-1 px-1 text-xs">
                   <span className="bg-brand text-brand-200 rounded-full p-0.5 text-xs">
                     <IconCheck strokeWidth={2} size={12} />
                   </span>
diff --git a/packages/ui/src/components/Modal/Modal.stories.tsx b/packages/ui/src/components/Modal/Modal.stories.tsx
index 863c71ddef9..218bc53277f 100644
--- a/packages/ui/src/components/Modal/Modal.stories.tsx
+++ b/packages/ui/src/components/Modal/Modal.stories.tsx
@@ -147,7 +147,7 @@ export const Default = (args: any) => (
     {...args}
     header={
       <div className="flex items-center gap-2 text-scale-1200">
-        <div className="text-brand-700">
+        <div className="text-brand-400">
           <IconLink2 />
         </div>
         <div className="flex items-baseline gap-2">
diff --git a/packages/ui/src/components/Radio/Radio.module.css b/packages/ui/src/components/Radio/Radio.module.css
index 1f235aa5b0b..79a393d9617 100644
--- a/packages/ui/src/components/Radio/Radio.module.css
+++ b/packages/ui/src/components/Radio/Radio.module.css
@@ -43,9 +43,9 @@
   @apply h-4 w-4 ml-0 mr-3.5 rounded-2xl border border-solid transition-all;
 
   @apply text-brand-600 cursor-pointer border-gray-500;
-  @apply focus:ring-brand-300 hover:border-brand-700 focus:outline-none;
+  @apply focus:ring-brand-300 hover:border-brand-400 focus:outline-none;
 
-  @apply dark:bg-transparent dark:hover:border-brand-700;
+  @apply dark:bg-transparent dark:hover:border-brand-400;
 } */
 
 /* .sbui-radio:checked {
diff --git a/packages/ui/src/components/Tabs/Tabs.module.css b/packages/ui/src/components/Tabs/Tabs.module.css
index 9769765d554..f5cc40ac1ff 100644
--- a/packages/ui/src/components/Tabs/Tabs.module.css
+++ b/packages/ui/src/components/Tabs/Tabs.module.css
@@ -12,7 +12,7 @@
 }
 
 .sbui-tab-button-underline--active {
-  @apply border-brand-700;
+  @apply border-brand-400;
   @apply rounded-none;
   @apply text-gray-600;
   @apply dark:text-white;
diff --git a/packages/ui/src/components/Typography/Link.module.css b/packages/ui/src/components/Typography/Link.module.css
index afc0911abfc..448eb19b3f4 100644
--- a/packages/ui/src/components/Typography/Link.module.css
+++ b/packages/ui/src/components/Typography/Link.module.css
@@ -1,3 +1,3 @@
 a.sbui-typography-link {
-  @apply text-sm text-brand-700 dark:text-brand-700 cursor-pointer;
+  @apply text-sm text-brand-400 dark:text-brand-400 cursor-pointer;
 }
diff --git a/packages/ui/src/components/shadcn/ui/badge.tsx b/packages/ui/src/components/shadcn/ui/badge.tsx
index 6846cabce76..cccbca72050 100644
--- a/packages/ui/src/components/shadcn/ui/badge.tsx
+++ b/packages/ui/src/components/shadcn/ui/badge.tsx
@@ -9,7 +9,7 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default: 'bg-surface-200 text-light border border-scale-700',
-        brand: 'bg-brand-200 text-brand-primary border border-brand-700',
+        brand: 'bg-brand-200 text-brand-primary border border-brand-400',
         secondary:
           'bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground',
         destructive: 'bg-destructive-400 text-destructive border border-destructive-300',
@@ -56,7 +56,7 @@ const badgeVariants = cva(
 //         },
 //         dot: '-ml-0.5 mr-1.5 h-2 w-2 rounded-full',
 //         color: {
-//           brand: 'bg-brand-200 text-brand-1100 border border-brand-700',
+//           brand: 'bg-brand-200 text-brand-1100 border border-brand-400',
 //           scale: 'bg-scale-200 text-scale-1100 border border-scale-700',
 //           tomato: `bg-tomato-200 text-tomato-1100 border border-tomato-700`,
 //           red: `bg-red-200 text-red-1100 border border-red-700`,
diff --git a/packages/ui/src/lib/theme/defaultTheme.ts b/packages/ui/src/lib/theme/defaultTheme.ts
index 25782badb7e..2779aa37be4 100644
--- a/packages/ui/src/lib/theme/defaultTheme.ts
+++ b/packages/ui/src/lib/theme/defaultTheme.ts
@@ -216,7 +216,7 @@ export default {
     },
     dot: '-ml-0.5 mr-1.5 h-2 w-2 rounded-full',
     color: {
-      brand: 'bg-brand-200 text-brand-1100 border border-brand-700',
+      brand: 'bg-brand-200 text-brand-1100 border border-brand-400',
       scale: 'bg-scale-200 text-scale-1100 border border-scale-700',
       tomato: `bg-tomato-200 text-tomato-1100 border border-tomato-700`,
       red: `bg-red-200 text-red-1100 border border-red-700`,
@@ -269,7 +269,7 @@ export default {
         description: `text-scale-1100`,
       },
       success: {
-        base: `bg-brand-300 dark:bg-brand-100 border-brand-700`,
+        base: `bg-brand-300 dark:bg-brand-100 border-brand-400`,
         icon: `text-brand`,
         header: `text-brand-1200`,
         description: `text-brand-1100`,
diff --git a/studio/.storybook/preview.css b/studio/.storybook/preview.css
index 7232a33ea5d..7838b9a4816 100644
--- a/studio/.storybook/preview.css
+++ b/studio/.storybook/preview.css
@@ -89,7 +89,7 @@
 }
 
 .react-datepicker__day--in-selecting-range {
-  @apply bg-brand-700 text-scale-fixed-100 border-brand-700;
+  @apply bg-brand-400 text-scale-fixed-100 border-brand-400;
 }
 
 .react-datepicker__day--selecting-range-start {
diff --git a/studio/components/grid/components/header/Header.tsx b/studio/components/grid/components/header/Header.tsx
index 80f32781146..029dd615bda 100644
--- a/studio/components/grid/components/header/Header.tsx
+++ b/studio/components/grid/components/header/Header.tsx
@@ -192,7 +192,7 @@ const DefaultHeader = ({
                               <IconFileText className="-translate-x-[2px]" />
                               <IconArrowUp
                                 className={clsx(
-                                  'transition duration-200 absolute bottom-0 right-0 translate-y-1 opacity-0 bg-brand-700 rounded-full',
+                                  'transition duration-200 absolute bottom-0 right-0 translate-y-1 opacity-0 bg-brand-400 rounded-full',
                                   'group-data-[highlighted]:translate-y-0 group-data-[highlighted]:text-brand group-data-[highlighted]:opacity-100'
                                 )}
                                 strokeWidth={3}
diff --git a/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx b/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
index 2107aac22b7..72177f07f78 100644
--- a/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
+++ b/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
@@ -104,7 +104,7 @@ const ProviderForm = ({ provider }: ProviderFormProps) => {
           </div>
           <div className="flex items-center gap-3">
             {isActive ? (
-              <div className="flex items-center gap-1 rounded-full border border-brand-700 bg-brand-200 py-1 px-1 text-xs text-brand">
+              <div className="flex items-center gap-1 rounded-full border border-brand-400 bg-brand-200 py-1 px-1 text-xs text-brand">
                 <span className="rounded-full bg-brand p-0.5 text-xs text-brand-200">
                   <IconCheck strokeWidth={2} size={12} />
                 </span>
diff --git a/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx b/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx
index 723a9108f3f..dc7e4cd26cc 100644
--- a/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx
+++ b/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx
@@ -176,7 +176,7 @@ const UpgradingState = () => {
                                 />
                               </div>
                             ) : isCompleted ? (
-                              <div className="flex items-center justify-center w-5 h-5 border rounded-full bg-brand-300 border-brand-700">
+                              <div className="flex items-center justify-center w-5 h-5 border rounded-full bg-brand-300 border-brand-400">
                                 <IconCheck size={12} className="text-white" strokeWidth={2} />
                               </div>
                             ) : (
diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeaderSelection.tsx b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeaderSelection.tsx
index 2f7227836d3..fa14c67cd88 100644
--- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeaderSelection.tsx
+++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeaderSelection.tsx
@@ -13,7 +13,7 @@ const FileExplorerHeaderSelection = () => {
   } = storageExplorerStore
 
   return (
-    <div className="z-10 flex h-[40px] items-center rounded-t-md bg-brand-700 px-2 py-1 shadow dark:bg-brand-600">
+    <div className="z-10 flex h-[40px] items-center rounded-t-md bg-brand-400 px-2 py-1 shadow dark:bg-brand-600">
       <Button
         icon={<IconX size={16} strokeWidth={2} />}
         type="text"
diff --git a/studio/styles/date-picker.scss b/studio/styles/date-picker.scss
index 0764165de06..491e5a5e1f8 100644
--- a/studio/styles/date-picker.scss
+++ b/studio/styles/date-picker.scss
@@ -77,7 +77,7 @@
 }
 
 .react-datepicker__day--in-selecting-range {
-  @apply bg-brand-700 text-scale-fixed-100 border-brand-700;
+  @apply bg-brand-400 text-scale-fixed-100 border-brand-400;
 }
 
 .react-datepicker__day--selecting-range-start {

From a823512bb56f159037938fc64ebe04362f40aa1b Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Sun, 30 Jul 2023 17:05:36 +0800
Subject: [PATCH 11/73] chore: update colors from figma variables

---
 packages/ui/build/css/source/global.css      |  2 +-
 packages/ui/build/css/themes/dark.css        | 10 ++++++----
 packages/ui/build/css/themes/light.css       | 12 +++++++-----
 packages/ui/build/css/tw-extend/color.js     | 14 +++++++++++---
 packages/ui/src/lib/tailwind-demo-classes.ts |  2 ++
 5 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/packages/ui/build/css/source/global.css b/packages/ui/build/css/source/global.css
index 7116e19977a..8e37bddc961 100644
--- a/packages/ui/build/css/source/global.css
+++ b/packages/ui/build/css/source/global.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 17 Jul 2023 15:59:23 GMT
+ * Generated on Sun, 30 Jul 2023 09:03:47 GMT
  */
 
 :root {
diff --git a/packages/ui/build/css/themes/dark.css b/packages/ui/build/css/themes/dark.css
index 3748b607d97..8fd815c27c8 100644
--- a/packages/ui/build/css/themes/dark.css
+++ b/packages/ui/build/css/themes/dark.css
@@ -1,13 +1,15 @@
 /**
  * Do not edit directly
- * Generated on Mon, 17 Jul 2023 15:59:23 GMT
+ * Generated on Sun, 30 Jul 2023 09:03:47 GMT
  */
 
 .dark {
   --brand-default: 152.9deg 60% 52.9%;
-  --brand-400: 153.6deg 41% 12%;
-  --brand-300: 152.7deg 48.5% 26.7%;
-  --brand-200: 148.5deg 43.5% 82%;
+  --brand-600: 153deg 59.5% 70%;
+  --brand-500: 153.5deg 61.8% 21.6%;
+  --brand-400: 153.3deg 65.2% 13.5%;
+  --brand-300: 153.8deg 69.6% 9%;
+  --brand-200: 152.5deg 75% 6.3%;
   --warning-default: 38.9deg 100% 57.1%;
   --warning-600: 38.9deg 89.8% 49.8%;
   --warning-500: 34.8deg 90.9% 21.6%;
diff --git a/packages/ui/build/css/themes/light.css b/packages/ui/build/css/themes/light.css
index 41927d7bc60..71845ba29cd 100644
--- a/packages/ui/build/css/themes/light.css
+++ b/packages/ui/build/css/themes/light.css
@@ -1,13 +1,15 @@
 /**
  * Do not edit directly
- * Generated on Mon, 17 Jul 2023 15:59:23 GMT
+ * Generated on Sun, 30 Jul 2023 09:03:47 GMT
  */
 
 .light {
-  --brand-primary: 152.9deg 60% 52.9%;
-  --brand-400: 153.7deg 68.7% 83.7%;
-  --brand-300: 153deg 46% 65.9%;
-  --brand-200: 148.5deg 43.5% 82%;
+  --brand-default: 152.9deg 60% 52.9%;
+  --brand-600: 153.2deg 49.7% 33.5%;
+  --brand-500: 148.7deg 42.7% 69.2%;
+  --brand-400: 149.1deg 59.3% 88.4%;
+  --brand-300: 148.6deg 77.8% 94.7%;
+  --brand-200: 156deg 71.4% 98.6%;
   --warning-default: 38.9deg 100% 57.1%;
   --warning-600: 30.2deg 100% 33.9%;
   --warning-500: 36.3deg 85.7% 67.1%;
diff --git a/packages/ui/build/css/tw-extend/color.js b/packages/ui/build/css/tw-extend/color.js
index e9a280e3825..937addc4752 100644
--- a/packages/ui/build/css/tw-extend/color.js
+++ b/packages/ui/build/css/tw-extend/color.js
@@ -529,15 +529,23 @@ module.exports = {
 },
 "brand-200": {
   cssVariable: "var(--brand-200)",
-  value: "hsl(148.5, 43.5%, 82%)"
+  value: "hsl(152.5, 75%, 6.3%)"
 },
 "brand-300": {
   cssVariable: "var(--brand-300)",
-  value: "hsl(152.70000000000005, 48.5%, 26.7%)"
+  value: "hsl(153.79999999999995, 69.6%, 9%)"
 },
 "brand-400": {
   cssVariable: "var(--brand-400)",
-  value: "hsl(153.60000000000002, 41%, 12%)"
+  value: "hsl(153.29999999999995, 65.2%, 13.5%)"
+},
+"brand-500": {
+  cssVariable: "var(--brand-500)",
+  value: "hsl(153.5, 61.8%, 21.6%)"
+},
+"brand-600": {
+  cssVariable: "var(--brand-600)",
+  value: "hsl(153, 59.5%, 70%)"
 },
 "brand-DEFAULT": {
   cssVariable: "var(--brand-default)",
diff --git a/packages/ui/src/lib/tailwind-demo-classes.ts b/packages/ui/src/lib/tailwind-demo-classes.ts
index 8fd22a61deb..e9d0afb240a 100644
--- a/packages/ui/src/lib/tailwind-demo-classes.ts
+++ b/packages/ui/src/lib/tailwind-demo-classes.ts
@@ -41,6 +41,8 @@ export default {
     "bg-brand-200",
     "bg-brand-300",
     "bg-brand-400",
+    "bg-brand-500",
+    "bg-brand-600",
     "bg-brand"
   ],
   "palletes": [

From 42614032c967c41affac316bfaf7c629afe9a80e Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Sun, 30 Jul 2023 17:14:40 +0800
Subject: [PATCH 12/73] Update Button.tsx

---
 packages/ui/src/components/Button/Button.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
index a0afcf80f5e..fbb217b0a97 100644
--- a/packages/ui/src/components/Button/Button.tsx
+++ b/packages/ui/src/components/Button/Button.tsx
@@ -9,7 +9,7 @@ import { cn } from '@ui/lib/utils'
 export type ButtonVariantProps = VariantProps<typeof buttonVariants>
 const buttonVariants = cva(
   `relative 
-  flex iems-center justify-center
+  flex items-center justify-center
   cursor-pointer 
   inline-flex 
   items-center 
@@ -30,9 +30,9 @@ const buttonVariants = cva(
     variants: {
       type: {
         primary: `
-            bg-brand-fixed-1100 hover:bg-brand-fixed-1000
+            bg-brand-600 dark:bg-brand/70 hover:bg-brand-600/80 dark:hover:bg-brand
             text-white
-            border-brand-fixed-1000 hover:border-brand-fixed-900 dark:border-brand-fixed-1000 dark:hover:border-brand-fixed-1000
+            border-brand dark:border-brand
             focus-visible:outline-brand-600
             shadow-sm`,
         secondary: `

From 8b8e491627435ba9408526cd5f7a119b129abe98 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Sun, 30 Jul 2023 17:15:54 +0800
Subject: [PATCH 13/73] chore: update old `brand-1100` and `brand-1200` to new
 `brand-600`

---
 apps/docs/components/HomePageCover.tsx               |  2 +-
 .../NavigationMenu/NavigationMenuCliList.tsx         |  2 +-
 .../NavigationMenu/NavigationMenuGuideListItems.tsx  |  2 +-
 .../NavigationMenu/NavigationMenuRefListItems.tsx    |  4 ++--
 apps/docs/pages/index.mdx                            |  6 +++---
 .../LaunchWeek/7/LaunchSection/ProductButton.tsx     |  2 +-
 .../7/LaunchSection/ProductButtonListItem.tsx        |  2 +-
 apps/www/components/MagnifiedProducts.tsx            |  2 +-
 apps/www/pages/launch-week/6/index.tsx               |  2 +-
 apps/www/pages/pricing/index.tsx                     | 10 +++++-----
 packages/ui/src/components/Button/Button.tsx         |  4 ++--
 packages/ui/src/components/Command/CommandMenu.tsx   |  2 +-
 packages/ui/src/components/shadcn/ui/badge.tsx       |  2 +-
 packages/ui/src/lib/theme/defaultTheme.ts            |  6 +++---
 .../interfaces/Auth/Policies/PolicySelection.tsx     |  2 +-
 .../Subscription/Tier/TierUpdateSidePanel.tsx        |  2 +-
 .../Database/Migrations/MigrationsEmptyState.tsx     |  6 +++---
 .../EdgeFunctionDetails.utils.tsx                    | 12 ++++++------
 .../interfaces/Functions/TerminalInstructions.tsx    |  6 +++---
 .../Subscription/PlanUpdateSidePanel.tsx             |  2 +-
 .../interfaces/Settings/Logs/LogsFormatters.tsx      |  2 +-
 .../layouts/ProjectLayout/BuildingState.tsx          |  2 +-
 .../LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx |  4 ++--
 .../project/[ref]/database/backups/scheduled.tsx     |  2 +-
 .../pages/project/[ref]/logs/explorer/templates.tsx  |  2 +-
 25 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/apps/docs/components/HomePageCover.tsx b/apps/docs/components/HomePageCover.tsx
index c45156c09cd..8af655f282c 100644
--- a/apps/docs/components/HomePageCover.tsx
+++ b/apps/docs/components/HomePageCover.tsx
@@ -69,7 +69,7 @@ const HomePageCover = (props) => {
         <div className="md:max-w-xs xl:max-w-none">
           <div className="flex items-center gap-3 mb-3">
             <IconBackground>
-              <IconPlay className="text-brand-1100 dark:text-brand w-4" />
+              <IconPlay className="text-brand-600 dark:text-brand w-4" />
             </IconBackground>
             <h3 className="text-2xl m-0">Getting Started</h3>
           </div>
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx
index 5821f1de362..8c88d731560 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx
@@ -100,7 +100,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {
           <a
             className={[
               'flex items-center gap-1 text-xs group mb-3',
-              'text-base transition-all duration-200 text-brand hover:text-brand-1200 hover:cursor-pointer ',
+              'text-base transition-all duration-200 text-brand hover:text-brand-600 hover:cursor-pointer ',
             ].join(' ')}
           >
             <div className="relative w-2">
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
index 995bc5f6c1c..0d390a0e6af 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
@@ -152,7 +152,7 @@ const Content = (props) => {
         <a
           className={[
             'flex items-center gap-1 text-xs group mb-3',
-            'text-base transition-all duration-200 text-brand hover:text-brand-1200 hover:cursor-pointer ',
+            'text-base transition-all duration-200 text-brand hover:text-brand-600 hover:cursor-pointer ',
           ].join(' ')}
         >
           <div className="relative w-2">
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
index 651cf2786a3..8c2007c78b3 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
@@ -16,7 +16,7 @@ import { deepFilterSections } from './NavigationMenu.utils'
 
 const HeaderLink = React.memo(function HeaderLink(props: any) {
   return (
-    <span className={['text-base text-brand-1200 ', !props.title && 'capitalize'].join(' ')}>
+    <span className={['text-base text-brand-600 ', !props.title && 'capitalize'].join(' ')}>
       {props.title ?? props.id}
     </span>
   )
@@ -180,7 +180,7 @@ const NavigationMenuRefListItems = ({
         <a
           className={[
             'flex items-center gap-1 text-xs group mb-3',
-            'text-base transition-all duration-200 text-scale-1100 hover:text-brand-1200 hover:cursor-pointer ',
+            'text-base transition-all duration-200 text-scale-1100 hover:text-brand-600 hover:cursor-pointer ',
           ].join(' ')}
         >
           <div className="relative w-2">
diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx
index f76ceb55913..68b70f43e4b 100644
--- a/apps/docs/pages/index.mdx
+++ b/apps/docs/pages/index.mdx
@@ -25,7 +25,7 @@ export const meta = {
       ## Products
     </div>
 
-    <div className="grid grid-cols-12 gap-6 not-prose [&_svg]:text-brand-1100 [&_svg]dark:text-brand">
+    <div className="grid grid-cols-12 gap-6 not-prose [&_svg]:text-brand-600 [&_svg]dark:text-brand">
       {products.map((product) => {
         return (
           <Link href={product.href} key={product.title} passHref>
@@ -44,7 +44,7 @@ export const meta = {
       <div className="col-span-4 flex flex-col gap-1 [&_h2]:m-0 [&_h3]:m-0">
 
         <div className="md:max-w-xs 2xl:max-w-none">
-          <div className="flex items-center gap-3 mb-3 text-brand-1100 dark:text-brand">
+          <div className="flex items-center gap-3 mb-3 text-brand-600 dark:text-brand">
             {/* <IconBackground>
               <HomeMenuIconPicker icon="reference-cli" width={18} height={18} />
             </IconBackground> */}
@@ -148,7 +148,7 @@ export const meta = {
     <div className="col-span-4 flex flex-col gap-1 [&_h2]:m-0 [&_h3]:m-0">
 
       <div className="md:max-w-xs 2xl:max-w-none">
-        <div className="flex items-center gap-3 mb-3 text-brand-1100 dark:text-brand">
+        <div className="flex items-center gap-3 mb-3 text-brand-600 dark:text-brand">
           <IconBackground>
             <HomeMenuIconPicker icon="self-hosting" width={18} height={18} />
           </IconBackground>
diff --git a/apps/www/components/LaunchWeek/7/LaunchSection/ProductButton.tsx b/apps/www/components/LaunchWeek/7/LaunchSection/ProductButton.tsx
index 550d0e28815..14fa872e674 100644
--- a/apps/www/components/LaunchWeek/7/LaunchSection/ProductButton.tsx
+++ b/apps/www/components/LaunchWeek/7/LaunchSection/ProductButton.tsx
@@ -6,7 +6,7 @@ const ProductButton = (props: Article) => {
     <div className="mr-2 mb-2 inline-block">
       <button
         className=" 
-                text-brand-1200
+                text-brand-600
                 hover:bg-scale-300 border-scale-500 flex items-start gap-3 rounded-md border bg-transparent p-3 
                 px-6 transition
                 dark:drop-shadow-sm"
diff --git a/apps/www/components/LaunchWeek/7/LaunchSection/ProductButtonListItem.tsx b/apps/www/components/LaunchWeek/7/LaunchSection/ProductButtonListItem.tsx
index f14095db860..1aaafcdd21b 100644
--- a/apps/www/components/LaunchWeek/7/LaunchSection/ProductButtonListItem.tsx
+++ b/apps/www/components/LaunchWeek/7/LaunchSection/ProductButtonListItem.tsx
@@ -8,7 +8,7 @@ export const ProductButtonListItem = (props: Article) => {
       <div className="inline-block">
         <button
           className=" 
-          text-brand-1200 
+          text-brand-600 
           group
           flex items-start gap-3 bg-transparent
           transition
diff --git a/apps/www/components/MagnifiedProducts.tsx b/apps/www/components/MagnifiedProducts.tsx
index ac9bea22e66..fc288b4b771 100644
--- a/apps/www/components/MagnifiedProducts.tsx
+++ b/apps/www/components/MagnifiedProducts.tsx
@@ -93,7 +93,7 @@ function Product({
               lazyBoundary="100px"
             />
           </motion.div>
-          <div className="text-brand-1100 dark:text-brand flex justify-center relative opacity-70 md:absolute md:bottom-0 md:opacity-0 group-hover:opacity-100 transition-opacity md:translate-y-8 md:-left-20 md:md:-right-20 font-mono uppercase text-center text-xs mt-2">
+          <div className="text-brand-600 dark:text-brand flex justify-center relative opacity-70 md:absolute md:bottom-0 md:opacity-0 group-hover:opacity-100 transition-opacity md:translate-y-8 md:-left-20 md:md:-right-20 font-mono uppercase text-center text-xs mt-2">
             <span>{product.name}</span>
           </div>
         </a>
diff --git a/apps/www/pages/launch-week/6/index.tsx b/apps/www/pages/launch-week/6/index.tsx
index dbef8ec6eeb..4912c976a6b 100644
--- a/apps/www/pages/launch-week/6/index.tsx
+++ b/apps/www/pages/launch-week/6/index.tsx
@@ -1177,7 +1177,7 @@ export default function launchweek() {
                   }}
                 >
                   <div className="relative group">
-                    <div className="absolute -inset-0.5 bg-brand-1100 rounded-full opacity-75 group-hover:opacity-100 group-hover:blur-sm transition duration-500"></div>
+                    <div className="absolute -inset-0.5 bg-brand-600 rounded-full opacity-75 group-hover:opacity-100 group-hover:blur-sm transition duration-500"></div>
                     <a href={creator.link} target="_blank" rel="noopener">
                       <img
                         className="relative rounded-full w-12 h-12 border border-[#2E2E2E] border-brand hover:shadow-md"
diff --git a/apps/www/pages/pricing/index.tsx b/apps/www/pages/pricing/index.tsx
index 0fd7134c9cb..1cc52e0a397 100644
--- a/apps/www/pages/pricing/index.tsx
+++ b/apps/www/pages/pricing/index.tsx
@@ -174,7 +174,7 @@ export default function IndexPage() {
                   key={`row-${plan.name}`}
                   className={[
                     plan.name === 'Pro'
-                      ? 'bg-brand-1100 dark:bg-brand border px-0.5 -mt-8 rounded-[6px]'
+                      ? 'bg-brand-600 dark:bg-brand border px-0.5 -mt-8 rounded-[6px]'
                       : '',
                   ].join(' ')}
                 >
@@ -204,7 +204,7 @@ export default function IndexPage() {
                             {plan.name}
                           </h3>
                           {plan.nameBadge && (
-                            <span className="bg-brand-300 text-brand-1100 rounded-md bg-opacity-30 py-0.5 px-2 text-[13px] leading-4">
+                            <span className="bg-brand-300 text-brand-600 rounded-md bg-opacity-30 py-0.5 px-2 text-[13px] leading-4">
                               {plan.nameBadge}
                             </span>
                           )}
@@ -249,7 +249,7 @@ export default function IndexPage() {
 
                               {plan.warning && (
                                 <p className="-mt-2">
-                                  <span className="bg-scale-200 text-brand-1100 border shadow-sm rounded-md bg-opacity-30 py-0.5 px-2 text-[13px] leading-4">
+                                  <span className="bg-scale-200 text-brand-600 border shadow-sm rounded-md bg-opacity-30 py-0.5 px-2 text-[13px] leading-4">
                                     {plan.warning}
                                   </span>
                                 </p>
@@ -436,7 +436,7 @@ export default function IndexPage() {
           className="grid lg:grid-cols-2 gap-8 items-center mt-12 lg:mt-8 max-w-6xl mx-auto"
         >
           <div>
-            <span className="bg-brand-300 text-brand-1100 rounded-md bg-opacity-30 inline-block  dark:bg-scale-400 dark:text-scale-1100 py-0.5 px-2 text-[13px] leading-4 mt-2">
+            <span className="bg-brand-300 text-brand-600 rounded-md bg-opacity-30 inline-block  dark:bg-scale-400 dark:text-scale-1100 py-0.5 px-2 text-[13px] leading-4 mt-2">
               Available for Pro plan
             </span>
             <h2 className="text-scale-1200 text-4xl mt-4">Cost control with spend caps</h2>
@@ -792,7 +792,7 @@ export default function IndexPage() {
 
                             {plan.warning && (
                               <p className="-mt-2">
-                                <span className="bg-scale-100 text-brand-1100 border shadow-sm rounded-md bg-opacity-30 py-0.5 px-2 text-[13px] leading-4">
+                                <span className="bg-scale-100 text-brand-600 border shadow-sm rounded-md bg-opacity-30 py-0.5 px-2 text-[13px] leading-4">
                                   {plan.warning}
                                 </span>
                               </p>
diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
index fbb217b0a97..202bad9b7bf 100644
--- a/packages/ui/src/components/Button/Button.tsx
+++ b/packages/ui/src/components/Button/Button.tsx
@@ -51,7 +51,7 @@ const buttonVariants = cva(
             focus-visible:outline-brand-600
             shadow-sm`,
         alternative: `
-            text-brand-1100
+            text-brand-600
             bg-brand-200 hover:bg-brand-400
             border-brand-600 hover:border-brand-300
             dark:border-brand-400 hover:dark:border-brand-300
@@ -73,7 +73,7 @@ const buttonVariants = cva(
             focus-visible:outline-scale-700
             shadow-sm`,
         link: `
-            text-brand-1100
+            text-brand-600
             border
             border-transparent
             hover:bg-brand-400
diff --git a/packages/ui/src/components/Command/CommandMenu.tsx b/packages/ui/src/components/Command/CommandMenu.tsx
index 04d856720f7..918fdaf001d 100644
--- a/packages/ui/src/components/Command/CommandMenu.tsx
+++ b/packages/ui/src/components/Command/CommandMenu.tsx
@@ -122,7 +122,7 @@ const CommandMenu = ({ projectRef }: CommandMenuProps) => {
                   forceMount
                 >
                   <AiIcon />
-                  <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand to-brand-1100">
+                  <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand to-brand-600">
                     Ask Supabase AI
                     {search ? (
                       <>
diff --git a/packages/ui/src/components/shadcn/ui/badge.tsx b/packages/ui/src/components/shadcn/ui/badge.tsx
index cccbca72050..2b4eaf92bf3 100644
--- a/packages/ui/src/components/shadcn/ui/badge.tsx
+++ b/packages/ui/src/components/shadcn/ui/badge.tsx
@@ -56,7 +56,7 @@ const badgeVariants = cva(
 //         },
 //         dot: '-ml-0.5 mr-1.5 h-2 w-2 rounded-full',
 //         color: {
-//           brand: 'bg-brand-200 text-brand-1100 border border-brand-400',
+//           brand: 'bg-brand-200 text-brand-600 border border-brand-400',
 //           scale: 'bg-scale-200 text-scale-1100 border border-scale-700',
 //           tomato: `bg-tomato-200 text-tomato-1100 border border-tomato-700`,
 //           red: `bg-red-200 text-red-1100 border border-red-700`,
diff --git a/packages/ui/src/lib/theme/defaultTheme.ts b/packages/ui/src/lib/theme/defaultTheme.ts
index 2779aa37be4..11626d99435 100644
--- a/packages/ui/src/lib/theme/defaultTheme.ts
+++ b/packages/ui/src/lib/theme/defaultTheme.ts
@@ -216,7 +216,7 @@ export default {
     },
     dot: '-ml-0.5 mr-1.5 h-2 w-2 rounded-full',
     color: {
-      brand: 'bg-brand-200 text-brand-1100 border border-brand-400',
+      brand: 'bg-brand-200 text-brand-600 border border-brand-400',
       scale: 'bg-scale-200 text-scale-1100 border border-scale-700',
       tomato: `bg-tomato-200 text-tomato-1100 border border-tomato-700`,
       red: `bg-red-200 text-red-1100 border border-red-700`,
@@ -271,8 +271,8 @@ export default {
       success: {
         base: `bg-brand-300 dark:bg-brand-100 border-brand-400`,
         icon: `text-brand`,
-        header: `text-brand-1200`,
-        description: `text-brand-1100`,
+        header: `text-brand-600`,
+        description: `text-brand-600`,
       },
       neutral: {
         base: `bg-scale-300 dark:bg-scale-300 border-scale-500`,
diff --git a/studio/components/interfaces/Auth/Policies/PolicySelection.tsx b/studio/components/interfaces/Auth/Policies/PolicySelection.tsx
index adb9d3aa77e..5598c600550 100644
--- a/studio/components/interfaces/Auth/Policies/PolicySelection.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicySelection.tsx
@@ -62,7 +62,7 @@ const PolicySelection: FC<Props> = ({
           <a
             target="_blank"
             rel="noreferrer"
-            className="text-brand transition-colors hover:text-brand-1200"
+            className="text-brand transition-colors hover:text-brand-600"
             href="https://supabase.com/docs/guides/auth#policies"
           >
             here
diff --git a/studio/components/interfaces/BillingV2/Subscription/Tier/TierUpdateSidePanel.tsx b/studio/components/interfaces/BillingV2/Subscription/Tier/TierUpdateSidePanel.tsx
index 2fdd7e919c9..b2c2c5c914a 100644
--- a/studio/components/interfaces/BillingV2/Subscription/Tier/TierUpdateSidePanel.tsx
+++ b/studio/components/interfaces/BillingV2/Subscription/Tier/TierUpdateSidePanel.tsx
@@ -180,7 +180,7 @@ const TierUpdateSidePanel = () => {
                       <p className="text-scale-1000 text-sm">{tierMeta?.costUnit}</p>
                     </div>
                     <div className={clsx('flex mt-1 mb-4', !tierMeta?.warning && 'opacity-0')}>
-                      <div className="bg-scale-200 text-brand-1100 border shadow-sm rounded-md bg-opacity-30 py-0.5 px-2 text-xs">
+                      <div className="bg-scale-200 text-brand-600 border shadow-sm rounded-md bg-opacity-30 py-0.5 px-2 text-xs">
                         {tierMeta?.warning}
                       </div>
                     </div>
diff --git a/studio/components/interfaces/Database/Migrations/MigrationsEmptyState.tsx b/studio/components/interfaces/Database/Migrations/MigrationsEmptyState.tsx
index b4f2153339c..ab1d31a5941 100644
--- a/studio/components/interfaces/Database/Migrations/MigrationsEmptyState.tsx
+++ b/studio/components/interfaces/Database/Migrations/MigrationsEmptyState.tsx
@@ -16,7 +16,7 @@ const MigrationsEmptyState = () => {
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> link --project-ref {ref}
+            <span className="text-brand-600">supabase</span> link --project-ref {ref}
           </>
         )
       },
@@ -27,7 +27,7 @@ const MigrationsEmptyState = () => {
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> migration new new-migration
+            <span className="text-brand-600">supabase</span> migration new new-migration
           </>
         )
       },
@@ -38,7 +38,7 @@ const MigrationsEmptyState = () => {
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> db push
+            <span className="text-brand-600">supabase</span> db push
           </>
         )
       },
diff --git a/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.utils.tsx b/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.utils.tsx
index bc2ae902432..e8ec2079990 100644
--- a/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.utils.tsx
+++ b/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.utils.tsx
@@ -10,7 +10,7 @@ export const generateCLICommands = (
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> functions deploy{' '}
+            <span className="text-brand-600">supabase</span> functions deploy{' '}
             {selectedFunction?.slug}
           </>
         )
@@ -23,7 +23,7 @@ export const generateCLICommands = (
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> functions delete{' '}
+            <span className="text-brand-600">supabase</span> functions delete{' '}
             {selectedFunction?.slug}
           </>
         )
@@ -39,7 +39,7 @@ export const generateCLICommands = (
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> secrets list
+            <span className="text-brand-600">supabase</span> secrets list
           </>
         )
       },
@@ -51,7 +51,7 @@ export const generateCLICommands = (
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> secrets set NAME1=VALUE1 NAME2=VALUE2
+            <span className="text-brand-600">supabase</span> secrets set NAME1=VALUE1 NAME2=VALUE2
           </>
         )
       },
@@ -63,7 +63,7 @@ export const generateCLICommands = (
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> secrets unset NAME1 NAME2
+            <span className="text-brand-600">supabase</span> secrets unset NAME1 NAME2
           </>
         )
       },
@@ -80,7 +80,7 @@ export const generateCLICommands = (
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">curl</span> -L -X POST '{functionUrl}' -H
+            <span className="text-brand-600">curl</span> -L -X POST '{functionUrl}' -H
             'Authorization: Bearer [YOUR ANON KEY]' {`--data '{"name":"Functions"}'`}
           </>
         )
diff --git a/studio/components/interfaces/Functions/TerminalInstructions.tsx b/studio/components/interfaces/Functions/TerminalInstructions.tsx
index 3862be68f51..71cd7cb22e1 100644
--- a/studio/components/interfaces/Functions/TerminalInstructions.tsx
+++ b/studio/components/interfaces/Functions/TerminalInstructions.tsx
@@ -39,7 +39,7 @@ const TerminalInstructions: FC<Props> = ({ closable = false, removeBorder = fals
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> functions new hello-world
+            <span className="text-brand-600">supabase</span> functions new hello-world
           </>
         )
       },
@@ -51,7 +51,7 @@ const TerminalInstructions: FC<Props> = ({ closable = false, removeBorder = fals
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> functions deploy hello-world
+            <span className="text-brand-600">supabase</span> functions deploy hello-world
             --project-ref {projectRef}
           </>
         )
@@ -66,7 +66,7 @@ const TerminalInstructions: FC<Props> = ({ closable = false, removeBorder = fals
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">curl</span> -L -X POST 'https://{functionsEndpoint}
+            <span className="text-brand-600">curl</span> -L -X POST 'https://{functionsEndpoint}
             /hello-world' -H 'Authorization: Bearer [YOUR ANON KEY]'{' '}
             {`--data '{"name":"Functions"}'`}
           </>
diff --git a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/PlanUpdateSidePanel.tsx b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/PlanUpdateSidePanel.tsx
index dabc1f474f3..d91951a27a5 100644
--- a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/PlanUpdateSidePanel.tsx
+++ b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/PlanUpdateSidePanel.tsx
@@ -182,7 +182,7 @@ const PlanUpdateSidePanel = () => {
                       <p className="text-scale-1000 text-sm">{tierMeta?.costUnitOrg}</p>
                     </div>
                     <div className={clsx('flex mt-1 mb-4', !tierMeta?.warning && 'opacity-0')}>
-                      <div className="bg-scale-200 text-brand-1100 border shadow-sm rounded-md bg-opacity-30 py-0.5 px-2 text-xs">
+                      <div className="bg-scale-200 text-brand-600 border shadow-sm rounded-md bg-opacity-30 py-0.5 px-2 text-xs">
                         {tierMeta?.warning}
                       </div>
                     </div>
diff --git a/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx b/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx
index 6ea93cd06f8..9a31cbe0b2d 100644
--- a/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx
@@ -276,7 +276,7 @@ export function jsonSyntaxHighlight(input: Object) {
         if (/:$/.test(match)) {
           cls = 'key text-scale-1200'
         } else {
-          cls = 'string text-brand-1100'
+          cls = 'string text-brand-600'
         }
       } else if (/true|false/.test(match)) {
         cls = 'boolean text-blue-900'
diff --git a/studio/components/layouts/ProjectLayout/BuildingState.tsx b/studio/components/layouts/ProjectLayout/BuildingState.tsx
index b4010ba078d..53188486c5d 100644
--- a/studio/components/layouts/ProjectLayout/BuildingState.tsx
+++ b/studio/components/layouts/ProjectLayout/BuildingState.tsx
@@ -82,7 +82,7 @@ const BuildingState = ({ project }: BuildingStateProps) => {
                       Browse the Supabase{' '}
                       <Link href="https://supabase.com/docs">
                         <a
-                          className="mb-0 text-brand transition-colors hover:text-brand-1200"
+                          className="mb-0 text-brand transition-colors hover:text-brand-600"
                           target="_blank"
                           rel="noreferrer"
                         >
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
index b5ef7aee1e5..cb18ee373cc 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
@@ -222,14 +222,14 @@ const FeedbackWidget: FC<Props> = ({
           Have a technical issue? Contact{' '}
           <Link href="/support/new">
             <a>
-              <span className="cursor-pointer text-brand transition-colors hover:text-brand-1200">
+              <span className="cursor-pointer text-brand transition-colors hover:text-brand-600">
                 Supabase support
               </span>
             </a>
           </Link>{' '}
           or{' '}
           <a href="https://supabase.com/docs" target="_blank" rel="noreferrer">
-            <span className="cursor-pointer text-brand transition-colors hover:text-brand-1200">
+            <span className="cursor-pointer text-brand transition-colors hover:text-brand-600">
               browse our docs
             </span>
           </a>
diff --git a/studio/pages/project/[ref]/database/backups/scheduled.tsx b/studio/pages/project/[ref]/database/backups/scheduled.tsx
index 0bcba0f4ab9..2a6fe5fbd3b 100644
--- a/studio/pages/project/[ref]/database/backups/scheduled.tsx
+++ b/studio/pages/project/[ref]/database/backups/scheduled.tsx
@@ -64,7 +64,7 @@ const DatabaseScheduledBackups: NextPageWithLayout = () => {
                   needed, as PITR supports a superset of functionality, in terms of the granular
                   recovery that can be performed.{' '}
                   <a
-                    className="text-brand transition-colors hover:text-brand-1200"
+                    className="text-brand transition-colors hover:text-brand-600"
                     href="https://supabase.com/docs/guides/platform/backups"
                   >
                     Learn more
diff --git a/studio/pages/project/[ref]/logs/explorer/templates.tsx b/studio/pages/project/[ref]/logs/explorer/templates.tsx
index c199577067b..7eb8d932f42 100644
--- a/studio/pages/project/[ref]/logs/explorer/templates.tsx
+++ b/studio/pages/project/[ref]/logs/explorer/templates.tsx
@@ -42,7 +42,7 @@ const Template = ({ projectRef, template }: { projectRef?: string; template: Log
           text-scale-100
           transition-colors
           group-hover:bg-brand
-          group-hover:text-brand-1200
+          group-hover:text-brand-600
         "
         >
           <div className="scale-100 group-hover:scale-110">

From 568e76dcdf2314911c47c1f6e76a56e491a3a864 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Sun, 30 Jul 2023 17:50:33 +0800
Subject: [PATCH 14/73] update var(--*) values

---
 apps/docs/styles/main.scss                    |  2 +-
 .../AuthWidget/AuthWidgetSection.tsx          | 14 ++++++-------
 apps/www/components/Charts/PGCharts.tsx       |  2 +-
 .../InteractiveShimmerCard/index.tsx          |  4 ++--
 .../LaunchWeek/7/Ticket/form.module.css       |  6 +++---
 .../LaunchWeek/8/Ticket/form.module.css       |  8 +++----
 apps/www/styles/index.css                     | 21 ++++++++++++-------
 packages/config/code-hike.scss                | 12 +++++------
 packages/config/default-colors.js             |  4 ++--
 packages/config/tailwind.config.js            |  4 ++--
 .../src/components/GlassPanel/GlassPanel.tsx  |  4 +++-
 .../ui/src/components/Icon/IconBackground.tsx |  2 +-
 packages/ui/src/lib/theme/defaultTheme.ts     |  4 ++--
 .../components/ui/Charts/Charts.constants.ts  |  8 +++----
 studio/styles/react-data-grid-logs.scss       |  4 ++--
 15 files changed, 54 insertions(+), 45 deletions(-)

diff --git a/apps/docs/styles/main.scss b/apps/docs/styles/main.scss
index ec6e38a814e..ece45d88688 100644
--- a/apps/docs/styles/main.scss
+++ b/apps/docs/styles/main.scss
@@ -169,7 +169,7 @@ pre[class*='language-'] {
 
 // ToC styles
 .toc__menu-item--active {
-  color: var(--colors-brand9) !important;
+  color: hsl(var(--brand-default)) !important;
 }
 
 .video-container {
diff --git a/apps/www/components/AuthWidget/AuthWidgetSection.tsx b/apps/www/components/AuthWidget/AuthWidgetSection.tsx
index fe3099cf041..6d840b80c68 100644
--- a/apps/www/components/AuthWidget/AuthWidgetSection.tsx
+++ b/apps/www/components/AuthWidget/AuthWidgetSection.tsx
@@ -19,9 +19,9 @@ function AuthWidgetSection() {
   const { basePath } = useRouter()
   const [radius, setRadius] = useState('4px')
   const [brandColor, setBrandColor] = useState({
-    brand: 'var(--colors-brand9)',
-    brandAccent: 'var(--colors-brand11)',
-    brandAccent2: 'var(--colors-brand3)',
+    brand: 'hsl(var(--brand-default))',
+    brandAccent: 'hsl(var(--brand-500))',
+    brandAccent2: 'hsl(var(--brand-200))',
   })
   const [layout, setLayout] = useState('horizontal')
 
@@ -140,14 +140,14 @@ function AuthWidgetSection() {
                   <button
                     onClick={() =>
                       setBrandColor({
-                        brand: 'var(--colors-brand9)',
-                        brandAccent: 'var(--colors-brand11)',
-                        brandAccent2: 'var(--colors-brand3)',
+                        brand: 'hsl(var(--brand-default))',
+                        brandAccent: 'hsl(var(--brand-500))',
+                        brandAccent2: 'hsl(var(--brand-200))',
                       })
                     }
                     className={[
                       'bg-brand-300 border-brand h-10 w-10 rounded-full border-2 transition hover:scale-105',
-                      brandColor.brand === 'var(--colors-brand9)'
+                      brandColor.brand === 'hsl(var(--brand-default))'
                         ? ' !bg-brand ring-scale-400 border-scale-800 ring-2 drop-shadow-lg dark:ring-white'
                         : '',
                     ].join(' ')}
diff --git a/apps/www/components/Charts/PGCharts.tsx b/apps/www/components/Charts/PGCharts.tsx
index f73e0454b2f..982c1097fc9 100644
--- a/apps/www/components/Charts/PGCharts.tsx
+++ b/apps/www/components/Charts/PGCharts.tsx
@@ -7,7 +7,7 @@ import * as data from '~/data/blog/PostgresFTSComparison'
 import remarkGfm from 'remark-gfm'
 
 const barColors = {
-  pg: 'var(--colors-brand11)',
+  pg: 'hsl(var(--brand-600))',
   meilisearch: 'var(--colors-blue11)',
   typesense: 'var(--colors-violet11)',
   'sqlite-disk': 'var(--colors-orange11)',
diff --git a/apps/www/components/InteractiveShimmerCard/index.tsx b/apps/www/components/InteractiveShimmerCard/index.tsx
index 3e11c07bd46..d6017544f96 100644
--- a/apps/www/components/InteractiveShimmerCard/index.tsx
+++ b/apps/www/components/InteractiveShimmerCard/index.tsx
@@ -34,9 +34,9 @@ const InteractiveShimmerCard = ({
     const isActive = x > -3 && x < width + 3 && y > -3 && y < height + 3
     const activeGlow =
       hasActiveOnHover && isActive
-        ? `radial-gradient(65rem circle at ${x}px ${y}px, var(--colors-brand9), transparent), `
+        ? `radial-gradient(65rem circle at ${x}px ${y}px, hsl(var(--brand-default)), transparent), `
         : ''
-    outerElement.style.background = isActive ? `var(--colors-brand9)` : `var(--colors-scale3)`
+    outerElement.style.background = isActive ? `hsl(var(--brand-default))` : `var(--colors-scale3)`
     outerElement.style.backgroundImage = `
       ${activeGlow}radial-gradient(30rem circle at ${x}px ${y}px, ${
       shimmerFromColor ?? 'var(--colors-scale8)'
diff --git a/apps/www/components/LaunchWeek/7/Ticket/form.module.css b/apps/www/components/LaunchWeek/7/Ticket/form.module.css
index 5b6a078561b..1bdf317bbc9 100644
--- a/apps/www/components/LaunchWeek/7/Ticket/form.module.css
+++ b/apps/www/components/LaunchWeek/7/Ticket/form.module.css
@@ -130,8 +130,8 @@
   height: 56px;
   margin-top: var(--space-4x);
   border-radius: var(--space-2x);
-  border: 1px solid var(--brand);
-  background: var(--brand);
+  border: 1px solid hsl(var(--brand-default));
+  background: hsl(var(--brand-default));
   cursor: pointer;
   font-family: inherit;
   font-size: var(--text-md);
@@ -170,7 +170,7 @@
 .submit.default:hover,
 .submit.default:focus {
   background: black;
-  color: var(--brand);
+  color: hsl(var(--brand-default));
 }
 
 .submit.default.generate-with-github:hover path,
diff --git a/apps/www/components/LaunchWeek/8/Ticket/form.module.css b/apps/www/components/LaunchWeek/8/Ticket/form.module.css
index 5b6a078561b..d982d30f265 100644
--- a/apps/www/components/LaunchWeek/8/Ticket/form.module.css
+++ b/apps/www/components/LaunchWeek/8/Ticket/form.module.css
@@ -130,8 +130,8 @@
   height: 56px;
   margin-top: var(--space-4x);
   border-radius: var(--space-2x);
-  border: 1px solid var(--brand);
-  background: var(--brand);
+  border: 1px solid hsl(var(--brand-default));
+  background: hsl(var(--brand-default));
   cursor: pointer;
   font-family: inherit;
   font-size: var(--text-md);
@@ -170,12 +170,12 @@
 .submit.default:hover,
 .submit.default:focus {
   background: black;
-  color: var(--brand);
+  color: hsl(var(--brand-default));
 }
 
 .submit.default.generate-with-github:hover path,
 .submit.default.generate-with-github:focus path {
-  fill: var(--brand);
+  fill: hsl(var(--brand-default));
 }
 
 .submit.error:hover,
diff --git a/apps/www/styles/index.css b/apps/www/styles/index.css
index be88c51f50f..a2cbaec35c7 100644
--- a/apps/www/styles/index.css
+++ b/apps/www/styles/index.css
@@ -328,7 +328,7 @@ launch week
 */
 
 .launch-week-timeline-border--approaching {
-  border-image: linear-gradient(to bottom, var(--colors-brand9), var(--colors-purple7)) 1 100%;
+  border-image: linear-gradient(to bottom, hsl(var(--brand-default)), var(--colors-purple7)) 1 100%;
 }
 
 .launch-week-gradientBg {
@@ -472,9 +472,9 @@ launch week
   filter: blur(calc(var(--auth-ui-card-height) / 6));
   background-image: linear-gradient(
     var(--rotate),
-    var(--colors-brand),
+    hsl(var(--brand-default)),
     #3c67e3 43%,
-    var(--colors-brand)
+    hsl(var(--brand-default))
   );
   opacity: 1;
   transition: opacity 0.5s;
@@ -674,19 +674,26 @@ launch week
 }
 
 [class*='gradient-text-']::selection {
-  background-color: var(--colors-brand9);
+  background-color: hsl(var(--brand-default));
   background-clip: unset;
   -webkit-text-fill-color: white;
 }
 
 @layer utilities {
   .gradient-text-brand-100 {
-    background-image: linear-gradient(45deg, var(--colors-brand8) 0%, var(--colors-brand9) 100%);
+    background-image: linear-gradient(
+      45deg,
+      hsl(var(--brand-500)) 0%,
+      hsl(var(--brand-default)) 100%
+    );
   }
   .gradient-text-brand-300 {
-    background-image: linear-gradient(45deg, var(--colors-brand8) 0%, var(--colors-brand9) 100%);
+    background-image: linear-gradient(
+      45deg,
+      hsl(var(--brand-500)) 0%,
+      hsl(var(--brand-default)) 100%
+    );
   }
-
   .gradient-text-scale-100 {
     background-image: -webkit-linear-gradient(45deg, #fff 0%, var(--colors-green12) 100%);
   }
diff --git a/packages/config/code-hike.scss b/packages/config/code-hike.scss
index abae362e750..e022649d777 100644
--- a/packages/config/code-hike.scss
+++ b/packages/config/code-hike.scss
@@ -5,9 +5,9 @@
   --ch-3: #ffcda1;
   --ch-4: #f8f8f2;
   --ch-5: #bda4ff;
-  --ch-6: var(--colors-brand10);
+  --ch-6: hsl(var(--brand-600));
   --ch-7: #569cd6;
-  --ch-8: var(--colors-brand9);
+  --ch-8: hsl(var(--brand-default));
   --ch-9: #ffa198;
   --ch-10: #f0f6fc;
   --ch-11: #490202;
@@ -15,7 +15,7 @@
   --ch-13: #5a1e02;
   --ch-14: #161b22;
   --ch-15: #8b949e;
-  --ch-16: var(--colors-scale1);
+  --ch-16: hsl(var(--foreground-lighter));
   --ch-17: #264f78;
   --ch-18: #3794ff;
   --ch-19: #ffffff0b;
@@ -34,9 +34,9 @@
   --ch-3: #953800;
   --ch-4: #24292f;
   --ch-5: #8250df;
-  --ch-6: var(--colors-brand10);
+  --ch-6: hsl(var(--brand-600));
   --ch-7: #cf222e;
-  --ch-8: var(--colors-brand9);
+  --ch-8: hsl(var(--brand-default));
   --ch-9: #82071e;
   --ch-10: #f6f8fa;
   --ch-11: #ffebe9;
@@ -44,7 +44,7 @@
   --ch-13: #ffd8b5;
   --ch-14: #eaeef2;
   --ch-15: #57606a;
-  --ch-16: var(--colors-scale1);
+  --ch-16: hsl(var(--foreground-lighter));
   --ch-17: #add6ff;
   --ch-18: #1a85ff;
   --ch-19: #fdff0033;
diff --git a/packages/config/default-colors.js b/packages/config/default-colors.js
index 0fecc7196f1..3373e649d3b 100644
--- a/packages/config/default-colors.js
+++ b/packages/config/default-colors.js
@@ -28,8 +28,8 @@ module.exports = {
     brand12: 'hsla(153, 60%, 95%, 1)',
   },
   contrast: {
-    'brand-hiContrast': 'var(--colors-brand-9)',
-    'brand-loContrast': 'var(--colors-brand-4)',
+    'brand-hiContrast': 'hsl(var(--brand-default))',
+    'brand-loContrast': 'hsl(var(--brand-300))',
   },
   scale: {
     scale1: 'var(--colors-slate1)',
diff --git a/packages/config/tailwind.config.js b/packages/config/tailwind.config.js
index a089a489db7..68a6d2a82b8 100644
--- a/packages/config/tailwind.config.js
+++ b/packages/config/tailwind.config.js
@@ -216,12 +216,12 @@ const uiConfig = ui({
               fontWeight: '400',
               color: 'var(--colors-scale12)',
               textDecorationLine: 'underline',
-              textDecorationColor: 'var(--colors-brand7)',
+              textDecorationColor: 'hsl(var(--brand-400))',
               textDecorationThickness: '1px',
               textUnderlineOffset: '4px',
             },
             'a:hover': {
-              textDecorationColor: 'var(--colors-brand9)',
+              textDecorationColor: 'hsl(var(--brand-default))',
             },
             figcaption: {
               color: 'var(--colors-scale9)',
diff --git a/packages/ui/src/components/GlassPanel/GlassPanel.tsx b/packages/ui/src/components/GlassPanel/GlassPanel.tsx
index 1d9425b936d..043d9daf007 100644
--- a/packages/ui/src/components/GlassPanel/GlassPanel.tsx
+++ b/packages/ui/src/components/GlassPanel/GlassPanel.tsx
@@ -37,7 +37,9 @@ const GlassPanel = ({
     <div
       className={[
         'shrink-0',
-        showIconBg ? 'bg-green-600 w-8 h-8 flex items-center justify-center rounded' : '',
+        showIconBg
+          ? 'bg-brand-300 border border-brand-400 w-8 h-8 flex items-center justify-center rounded'
+          : '',
       ].join(' ')}
     >
       {props.children}
diff --git a/packages/ui/src/components/Icon/IconBackground.tsx b/packages/ui/src/components/Icon/IconBackground.tsx
index 4b73319ba46..703fcb59848 100644
--- a/packages/ui/src/components/Icon/IconBackground.tsx
+++ b/packages/ui/src/components/Icon/IconBackground.tsx
@@ -1,5 +1,5 @@
 export const IconBackground: React.FC = (props) => (
-  <div className="shrink-0 bg-green-600 w-8 h-8 flex items-center justify-center rounded">
+  <div className="shrink-0 bg-brand-300 border border-brand-400 w-8 h-8 flex items-center justify-center rounded">
     {props.children}
   </div>
 )
diff --git a/packages/ui/src/lib/theme/defaultTheme.ts b/packages/ui/src/lib/theme/defaultTheme.ts
index 11626d99435..832713fae83 100644
--- a/packages/ui/src/lib/theme/defaultTheme.ts
+++ b/packages/ui/src/lib/theme/defaultTheme.ts
@@ -210,13 +210,13 @@ export default {
    */
 
   badge: {
-    base: 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-opacity-10',
+    base: 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-normal bg-opacity-10',
     size: {
       large: 'px-3 py-0.5 rounded-full text-sm',
     },
     dot: '-ml-0.5 mr-1.5 h-2 w-2 rounded-full',
     color: {
-      brand: 'bg-brand-200 text-brand-600 border border-brand-400',
+      brand: 'bg-brand-500 text-brand-600 border border-brand-400',
       scale: 'bg-scale-200 text-scale-1100 border border-scale-700',
       tomato: `bg-tomato-200 text-tomato-1100 border border-tomato-700`,
       red: `bg-red-200 text-red-1100 border border-red-700`,
diff --git a/studio/components/ui/Charts/Charts.constants.ts b/studio/components/ui/Charts/Charts.constants.ts
index 7aa3a6de752..d760c7bf7e6 100644
--- a/studio/components/ui/Charts/Charts.constants.ts
+++ b/studio/components/ui/Charts/Charts.constants.ts
@@ -5,8 +5,8 @@
 export const CHART_COLORS = {
   TICK: 'var(--colors-scale6)',
   AXIS: 'var(--colors-scale6)',
-  GREEN_1: 'var(--colors-brand9)', // #3ECF8E
-  GREEN_2: 'var(--colors-brand6)',
+  GREEN_1: 'hsl(var(--brand-default))', // #3ECF8E
+  GREEN_2: 'hsl(var(--brand-500))',
 }
 
 // refer to packages/ui/radix-colors.js for full list of colors
@@ -25,8 +25,8 @@ export const STACK_COLORS = [
 }))
 
 export const USAGE_COLORS = {
-  200: 'var(--colors-brand9)',
-  201: 'var(--colors-brand8)',
+  200: 'hsl(var(--brand-default))',
+  201: 'hsl(var(--brand-500))',
   400: 'var(--colors-amber9)',
   401: 'var(--colors-amber8)',
   404: 'var(--colors-amber7)',
diff --git a/studio/styles/react-data-grid-logs.scss b/studio/styles/react-data-grid-logs.scss
index c995bb72232..723030f95b7 100644
--- a/studio/styles/react-data-grid-logs.scss
+++ b/studio/styles/react-data-grid-logs.scss
@@ -77,8 +77,8 @@
   background: linear-gradient(
     to right,
     var(--colors-scale2) 0%,
-    var(--colors-brand9) 25%,
-    var(--colors-brand4) 35%,
+    hsl(var(--brand-default)) 25%,
+    hsl(var(--brand-300)) 35%,
     var(--colors-scale2) 45%,
     var(--colors-scale3) 75%
   );

From ee83d41e2e3329e0211af140785b5be60de703f5 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Sun, 30 Jul 2023 17:50:41 +0800
Subject: [PATCH 15/73] consistent stroke width

---
 apps/docs/components/HomePageCover.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/components/HomePageCover.tsx b/apps/docs/components/HomePageCover.tsx
index 8af655f282c..acd3a7c253c 100644
--- a/apps/docs/components/HomePageCover.tsx
+++ b/apps/docs/components/HomePageCover.tsx
@@ -69,7 +69,7 @@ const HomePageCover = (props) => {
         <div className="md:max-w-xs xl:max-w-none">
           <div className="flex items-center gap-3 mb-3">
             <IconBackground>
-              <IconPlay className="text-brand-600 dark:text-brand w-4" />
+              <IconPlay className="text-brand-600 dark:text-brand w-4" strokeWidth={2} />
             </IconBackground>
             <h3 className="text-2xl m-0">Getting Started</h3>
           </div>

From be3071ee0bc792c2f91d0b2aac5e14529de80330 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Sun, 30 Jul 2023 18:01:33 +0800
Subject: [PATCH 16/73] fix: issue with bg opacity on docs

---
 .../NavigationMenu/TopNavBarRef.tsx           | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
index f8358d3d75d..cc60b27d266 100644
--- a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
@@ -56,7 +56,7 @@ const TopNavBarRef: FC = () => {
   }
 
   return (
-    <nav className="h-[60px] border-b backdrop-blur backdrop-filter bg-white-1200 dark:bg-scale-200/90">
+    <nav className="h-[60px] border-b backdrop-blur backdrop-filter bg bg-opacity-75">
       <div className="px-5 max-w-7xl mx-auto flex gap-3 justify-between items-center h-full">
         <div className={['lg:hidden'].join(' ')}>
           <Link href="/">
@@ -82,21 +82,20 @@ const TopNavBarRef: FC = () => {
               group
               items-center
               justify-between
-              bg-scaleA-200
+              bg-surface-100/75
+              hover:bg-surface-200
               border
               transition
-              hover:border-scale-600
-              hover:bg-scaleA-300
-              border-scale-500 pl-1.5 md:pl-3 pr-1.5 w-full h-[32px] rounded"
+              border-scale-500 pl-1.5 md:pl-3 pr-1.5 w-full h-[32px] rounded
+              text-lighter
+              "
             >
               <div className="flex items-center space-x-2">
-                <IconSearch className="text-scale-1100" size={18} strokeWidth={2} />
-                <p className="hidden md:flex text-scale-1100 text-sm group-hover:text-scale-1200 transition">
-                  Search docs...
-                </p>
+                <IconSearch className="" size={18} strokeWidth={2} />
+                <p className="hidden md:flex text-sm">Search docs...</p>
               </div>
               <div className="hidden md:flex items-center space-x-1">
-                <div className="text-scale-1200 md:flex items-center justify-center h-5 w-10 border rounded bg-scale-500 border-scale-700 gap-1">
+                <div className="md:flex items-center justify-center h-5 w-10 border rounded bg-surface-300 gap-1">
                   <IconCommand size={12} strokeWidth={1.5} />
                   <span className="text-[12px]">K</span>
                 </div>

From 7e2398869a618a143e87ad223c9900eea3fad36d Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Sun, 30 Jul 2023 18:03:20 +0800
Subject: [PATCH 17/73] fix opacity issue

---
 .../components/Navigation/NavigationMenu/TopNavBarRef.tsx     | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
index cc60b27d266..bba13421321 100644
--- a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
@@ -82,8 +82,10 @@ const TopNavBarRef: FC = () => {
               group
               items-center
               justify-between
-              bg-surface-100/75
+              bg-surface-100
+              bg-opacity-75
               hover:bg-surface-200
+              hover:bg-opacity-100
               border
               transition
               border-scale-500 pl-1.5 md:pl-3 pr-1.5 w-full h-[32px] rounded

From 6b912ff1b4d508204e31d5e4488ce9bf37ff5988 Mon Sep 17 00:00:00 2001
From: Jon Meyers <jonathon.d.meyers@gmail.com>
Date: Mon, 31 Jul 2023 21:31:52 +1000
Subject: [PATCH 18/73] add examples for edge and static routes

---
 .../pages/guides/auth/auth-helpers/nextjs.mdx | 248 ++++++++++++++++++
 1 file changed, 248 insertions(+)

diff --git a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
index cbb1ae76649..8c57226a701 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
@@ -846,6 +846,254 @@ TypeScript types can be [generated with the Supabase CLI](/docs/reference/javasc
 
 See [refreshing session example](/docs/guides/auth/auth-helpers/nextjs#managing-session-with-middleware) above.
 
+### Edge Runtime
+
+The Next.js Edge Runtime allows you to host Server Components and Route Handlers from Edge nodes, serving the routes as close as possible to your user's location.
+
+A route can be configured to use the Edge Runtime by exporting a `runtime` variable set to `edge`. Additionally, the `cookies()` function must be called from the Edge route, before creating a Supabase Client.
+
+#### Server Components
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="js"
+>
+<TabPanel id="js" label="JavaScript">
+
+```jsx app/page.jsx
+import { cookies } from 'next/headers'
+import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'
+
+export const runtime = 'edge'
+export const dynamic = 'force-dynamic'
+
+export default async function Home() {
+  const cookieStore = cookies()
+
+  const supabase = createServerComponentClient({
+    cookies: () => cookieStore,
+  })
+
+  const { data } = await supabase.from('todos').select()
+  return <pre>{JSON.stringify(data, null, 2)}</pre>
+}
+```
+
+</TabPanel>
+
+<TabPanel id="ts" label="TypeScript">
+
+```tsx app/page.tsx
+import { cookies } from 'next/headers'
+import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'
+
+import type { Database } from '@/lib/database.types'
+
+export const runtime = 'edge'
+export const dynamic = 'force-dynamic'
+
+export default async function ServerComponent() {
+  const cookieStore = cookies()
+
+  const supabase = createServerComponentClient({
+    cookies: () => cookieStore,
+  })
+
+  const { data } = await supabase.from('todos').select()
+  return <pre>{JSON.stringify(data, null, 2)}</pre>
+}
+```
+
+<Admonition type="note">
+
+TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createServerComponentClient` to add type support to the Supabase client.
+
+</Admonition>
+
+</TabPanel>
+</Tabs>
+
+#### Route Handlers
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="js"
+>
+<TabPanel id="js" label="JavaScript">
+
+```jsx app/api/todos/route.jsx
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
+import { NextResponse } from 'next/server'
+import { cookies } from 'next/headers'
+
+export const runtime = 'edge'
+export const dynamic = 'force-dynamic'
+
+export async function POST(request) {
+  const { title } = await request.json()
+  const cookieStore = cookies()
+
+  const supabase = createRouteHandlerClient({
+    cookies: () => cookieStore,
+  })
+
+  const { data } = await supabase.from('todos').insert({ title }).select()
+  return NextResponse.json(data)
+}
+```
+
+</TabPanel>
+
+<TabPanel id="ts" label="TypeScript">
+
+```tsx app/api/todos/route.tsx
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
+import { NextResponse } from 'next/server'
+import { cookies } from 'next/headers'
+
+import type { Database } from '@/lib/database.types'
+
+export const runtime = 'edge'
+export const dynamic = 'force-dynamic'
+
+export async function POST(request: Request) {
+  const { title } = await request.json()
+  const cookieStore = cookies()
+
+  const supabase = createRouteHandlerClient({
+    cookies: () => cookieStore,
+  })
+
+  const { data } = await supabase.from('todos').insert({ title }).select()
+  return NextResponse.json(data)
+}
+```
+
+<Admonition type="note">
+
+TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createRouteHandlerClient` to add type support to the Supabase client.
+
+</Admonition>
+
+</TabPanel>
+</Tabs>
+
+### Static Routes
+
+Server Components and Route Handlers are static by default - data is fetched once at build time and the value is cached. Since the request to Supabase now happens at build time, there is no user, session or cookie to pass along with the request to Supabase. Therefore, the `createClient` function from `supabase-js` can be used to fetch data for static routes.
+
+#### Server Components
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="js"
+>
+<TabPanel id="js" label="JavaScript">
+
+```jsx app/page.jsx
+import { createClient } from '@supabase/supabase-js'
+
+export default async function Home() {
+  const supabase = createClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
+  )
+
+  const { data } = await supabase.from('todos').select()
+  return <pre>{JSON.stringify(data, null, 2)}</pre>
+}
+```
+
+</TabPanel>
+
+<TabPanel id="ts" label="TypeScript">
+
+```tsx app/page.tsx
+import { createClient } from '@supabase/supabase-js'
+
+export default async function Home() {
+  const supabase = createClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  )
+
+  const { data } = await supabase.from('todos').select()
+  return <pre>{JSON.stringify(data, null, 2)}</pre>
+}
+```
+
+<Admonition type="note">
+
+TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createServerComponentClient` to add type support to the Supabase client.
+
+</Admonition>
+
+</TabPanel>
+</Tabs>
+
+#### Route Handlers
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="js"
+>
+<TabPanel id="js" label="JavaScript">
+
+```jsx app/api/todos/route.jsx
+import { createClient } from '@supabase/supabase-js'
+import { NextResponse } from 'next/server'
+
+export async function POST(request) {
+  const { title } = await request.json()
+
+  const supabase = createClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
+  )
+
+  const { data } = await supabase.from('todos').insert({ title }).select()
+  return NextResponse.json(data)
+}
+```
+
+</TabPanel>
+
+<TabPanel id="ts" label="TypeScript">
+
+```tsx app/api/todos/route.tsx
+import { createClient } from '@supabase/supabase-js'
+import { NextResponse } from 'next/server'
+
+export async function POST(request: Request) {
+  const { title } = await request.json()
+
+  const supabase = createClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  )
+
+  const { data } = await supabase.from('todos').insert({ title }).select()
+  return NextResponse.json(data)
+}
+```
+
+<Admonition type="note">
+
+TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createRouteHandlerClient` to add type support to the Supabase client.
+
+</Admonition>
+
+</TabPanel>
+</Tabs>
+
 ## More examples
 
 - [Build a Twitter Clone with the Next.js App Router and Supabase - free egghead course](https://egghead.io/courses/build-a-twitter-clone-with-the-next-js-app-router-and-supabase-19bebadb)

From 922aad461878f00a1605e6a4190b8f1d376582a0 Mon Sep 17 00:00:00 2001
From: Greg Richardson <greg.nmr@gmail.com>
Date: Wed, 7 Jun 2023 00:23:36 -0600
Subject: [PATCH 19/73] feat(federation): remark pymdown tab support

---
 apps/docs/lib/mdx/plugins/remarkTabs.ts       | 138 ++++++++++++++++++
 .../pages/guides/cli/github-action/[slug].tsx |   9 ++
 2 files changed, 147 insertions(+)
 create mode 100644 apps/docs/lib/mdx/plugins/remarkTabs.ts

diff --git a/apps/docs/lib/mdx/plugins/remarkTabs.ts b/apps/docs/lib/mdx/plugins/remarkTabs.ts
new file mode 100644
index 00000000000..3562c2a6eca
--- /dev/null
+++ b/apps/docs/lib/mdx/plugins/remarkTabs.ts
@@ -0,0 +1,138 @@
+import { Content, Paragraph, Parent } from 'mdast'
+import { MdxJsxFlowElement } from 'mdast-util-mdx'
+import { Node } from 'unist'
+import { visit } from 'unist-util-visit'
+
+/**
+ * Transforms PyMdown Tabs to Supabase Tabs.
+ *
+ * https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/
+ */
+const remarkPyMdownTabs = function () {
+  return function transformer(root: Parent) {
+    visit(root, 'paragraph', (node: Paragraph, nodeIndex: number, parent: Parent) => {
+      for (let i = 0; i < node.children.length; i++) {
+        const child = node.children[i]
+        if (child.type !== 'text') {
+          continue
+        }
+
+        // Look for 3 '=', followed by an optionally quoted title,
+        // followed by optional newlines of text
+        const match = child.value.match(/^\n*=== ("?)(.+)\1\n?((?:.|\n)*)/)
+
+        if (!match) {
+          continue
+        }
+
+        // Extract the tab title along with the remaining text
+        const [, , title, value] = match
+
+        // Rewrite the node's value to remove the tab syntax
+        child.value = value
+
+        // Extract sibling nodes that should be linked to this tab
+        const siblingsToNest = extractLinkedSiblings(parent, node, nodeIndex)
+
+        const children: any[] = [...node.children.slice(i), ...siblingsToNest]
+
+        const tabPanelElement: MdxJsxFlowElement = {
+          type: 'mdxJsxFlowElement',
+          name: 'TabPanel',
+          attributes: [
+            {
+              type: 'mdxJsxAttribute',
+              name: 'id',
+              value: title,
+            },
+            {
+              type: 'mdxJsxAttribute',
+              name: 'label',
+              value: title,
+            },
+          ],
+          children,
+        }
+
+        let nodesAdded = 0
+        const previousNode = parent.children[nodeIndex - 1]
+
+        if (previousNode?.type === 'mdxJsxFlowElement' && previousNode.name === 'Tabs') {
+          // Add TabPanel to existing Tabs component
+          previousNode.children.push(tabPanelElement)
+
+          // Remove this node
+          parent.children.splice(nodeIndex, 1)
+          nodesAdded--
+        } else {
+          // Create new Tabs components and add TabPanel
+          const tabsElement: MdxJsxFlowElement = {
+            type: 'mdxJsxFlowElement',
+            name: 'Tabs',
+            attributes: [
+              {
+                type: 'mdxJsxAttribute',
+                name: 'scrollable',
+              },
+              {
+                type: 'mdxJsxAttribute',
+                name: 'size',
+                value: 'small',
+              },
+              {
+                type: 'mdxJsxAttribute',
+                name: 'type',
+                value: 'underlined',
+              },
+            ],
+            children: [tabPanelElement],
+          }
+
+          // Overwrite this paragraph node with Tabs component
+          parent.children.splice(nodeIndex, 1, tabsElement)
+        }
+
+        // If this wasn't the first child of the paragraph, create
+        // a new paragraph before this with the previous text children
+        if (i > 0) {
+          const previousChildren = node.children.slice(0, i)
+          const paragraph: Paragraph = {
+            type: 'paragraph',
+            children: previousChildren,
+          }
+          parent.children.splice(nodeIndex, 0, paragraph)
+
+          nodesAdded++
+        }
+
+        // Return the correct index for the next visit, since
+        // we may have added or removed an element in the array
+        return nodeIndex + nodesAdded
+      }
+    })
+  }
+}
+
+/**
+ * Identifies sibling nodes that should be linked to this admonition
+ * based on their indent level (ie. 4 spaces).
+ *
+ * Iterates through proceeding siblings until one is found that is
+ * not indented relative to the original node.
+ *
+ * Splices the discovered siblings out of the original parent and returns them.
+ */
+function extractLinkedSiblings(parent: Parent, node: Node, index: number, indentAmount = 4) {
+  const { column } = node.position.start
+
+  let nextSibling: Content
+  let i = index
+
+  do {
+    nextSibling = parent.children[++i]
+  } while (nextSibling?.position && nextSibling.position.start.column === column + indentAmount)
+
+  return parent.children.splice(index + 1, i - index - 1)
+}
+
+export default remarkPyMdownTabs
diff --git a/apps/docs/pages/guides/cli/github-action/[slug].tsx b/apps/docs/pages/guides/cli/github-action/[slug].tsx
index 181f3acb409..fe30a5f3f2a 100644
--- a/apps/docs/pages/guides/cli/github-action/[slug].tsx
+++ b/apps/docs/pages/guides/cli/github-action/[slug].tsx
@@ -11,6 +11,7 @@ import Layout from '~/layouts/DefaultGuideLayout'
 import { UrlTransformFunction, linkTransform } from '~/lib/mdx/plugins/rehypeLinkTransform'
 import remarkMkDocsAdmonition from '~/lib/mdx/plugins/remarkAdmonition'
 import { removeTitle } from '~/lib/mdx/plugins/remarkRemoveTitle'
+import remarkPyMdownTabs from '~/lib/mdx/plugins/remarkTabs'
 
 // We fetch these docs at build time from an external repo
 const org = 'supabase'
@@ -31,6 +32,13 @@ const pageMap = [
     },
     remoteFile: 'generating-types.md',
   },
+  {
+    slug: 'api',
+    meta: {
+      title: 'GraphQL API',
+    },
+    remoteFile: 'api.md',
+  },
 ]
 
 interface ActionDocsProps {
@@ -116,6 +124,7 @@ export const getStaticProps: GetStaticProps<ActionDocsProps> = async ({ params }
       remarkPlugins: [
         remarkGfm,
         remarkMkDocsAdmonition,
+        remarkPyMdownTabs,
         [removeTitle, meta.title],
         [remarkCodeHike, codeHikeOptions],
       ],

From 743f5009f6e9e07bcc1ffded15034b59a4d54df9 Mon Sep 17 00:00:00 2001
From: Jon Meyers <jonathon.d.meyers@gmail.com>
Date: Mon, 31 Jul 2023 21:37:32 +1000
Subject: [PATCH 20/73] add force-dynamic to routes that import Next.js cookies
 function

---
 .../pages/guides/auth/auth-helpers/nextjs.mdx | 32 ++++++++++++++++---
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
index 8c57226a701..cca63f190bd 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
@@ -162,6 +162,8 @@ import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
 import { cookies } from 'next/headers'
 import { NextResponse } from 'next/server'
 
+export const dynamic = 'force-dynamic'
+
 export async function GET(request) {
   const requestUrl = new URL(request.url)
   const code = requestUrl.searchParams.get('code')
@@ -190,6 +192,8 @@ import { NextResponse } from 'next/server'
 import type { NextRequest } from 'next/server'
 import type { Database } from '@/lib/database.types'
 
+export const dynamic = 'force-dynamic'
+
 export async function GET(request: NextRequest) {
   const requestUrl = new URL(request.url)
   const code = requestUrl.searchParams.get('code')
@@ -390,6 +394,8 @@ import { createServerActionClient } from '@supabase/auth-helpers-nextjs'
 import { revalidatePath } from 'next/cache'
 import { cookies } from 'next/headers'
 
+export const dynamic = 'force-dynamic'
+
 export default async function Login() {
   const handleSignUp = async (formData) => {
     'use server'
@@ -452,6 +458,8 @@ import { cookies } from 'next/headers'
 
 import type { Database } from '@/lib/database.types'
 
+export const dynamic = 'force-dynamic'
+
 export default async function Login() {
   const handleSignUp = async (formData: FormData) => {
     'use server'
@@ -653,6 +661,8 @@ In order to use Supabase in Server Components, you need to have implemented the
 import { cookies } from 'next/headers'
 import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'
 
+export const dynamic = 'force-dynamic'
+
 export default async function Home() {
   const supabase = createServerComponentClient({ cookies })
   const { data } = await supabase.from('todos').select()
@@ -670,6 +680,8 @@ import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'
 
 import type { Database } from '@/lib/database.types'
 
+export const dynamic = 'force-dynamic'
+
 export default async function ServerComponent() {
   const supabase = createServerComponentClient<Database>({ cookies })
   const { data } = await supabase.from('todos').select()
@@ -724,6 +736,8 @@ import { cookies } from 'next/headers'
 import { createServerActionClient } from '@supabase/auth-helpers-nextjs'
 import { revalidatePath } from 'next/cache'
 
+export const dynamic = 'force-dynamic'
+
 export default async function NewTodo() {
   const addTodo = async (formData) => {
     'use server'
@@ -753,6 +767,8 @@ import { revalidatePath } from 'next/cache'
 
 import type { Database } from '@/lib/database.types'
 
+export const dynamic = 'force-dynamic'
+
 export default async function NewTodo() {
   const addTodo = async (formData: FormData) => {
     'use server'
@@ -806,6 +822,8 @@ import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
 import { NextResponse } from 'next/server'
 import { cookies } from 'next/headers'
 
+export const dynamic = 'force-dynamic'
+
 export async function POST(request) {
   const { title } = await request.json()
   const supabase = createRouteHandlerClient({ cookies })
@@ -825,6 +843,8 @@ import { cookies } from 'next/headers'
 
 import type { Database } from '@/lib/database.types'
 
+export const dynamic = 'force-dynamic'
+
 export async function POST(request: Request) {
   const { title } = await request.json()
   const supabase = createRouteHandlerClient<Database>({ cookies })
@@ -894,7 +914,7 @@ import type { Database } from '@/lib/database.types'
 export const runtime = 'edge'
 export const dynamic = 'force-dynamic'
 
-export default async function ServerComponent() {
+export default async function ServerComponent<Database>() {
   const cookieStore = cookies()
 
   const supabase = createServerComponentClient({
@@ -964,7 +984,7 @@ export async function POST(request: Request) {
   const { title } = await request.json()
   const cookieStore = cookies()
 
-  const supabase = createRouteHandlerClient({
+  const supabase = createRouteHandlerClient<Database>({
     cookies: () => cookieStore,
   })
 
@@ -1017,8 +1037,10 @@ export default async function Home() {
 ```tsx app/page.tsx
 import { createClient } from '@supabase/supabase-js'
 
+import type { Database } from '@/lib/database.types'
+
 export default async function Home() {
-  const supabase = createClient(
+  const supabase = createClient<Database>(
     process.env.NEXT_PUBLIC_SUPABASE_URL!,
     process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
   )
@@ -1072,10 +1094,12 @@ export async function POST(request) {
 import { createClient } from '@supabase/supabase-js'
 import { NextResponse } from 'next/server'
 
+import type { Database } from '@/lib/database.types'
+
 export async function POST(request: Request) {
   const { title } = await request.json()
 
-  const supabase = createClient(
+  const supabase = createClient<Database>(
     process.env.NEXT_PUBLIC_SUPABASE_URL!,
     process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
   )

From 27479dbd862bce279f7e5aba54d686eab072bcfc Mon Sep 17 00:00:00 2001
From: Jon Meyers <jonathon.d.meyers@gmail.com>
Date: Mon, 31 Jul 2023 21:45:41 +1000
Subject: [PATCH 21/73] rename Home routes to be Page

---
 apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
index cca63f190bd..dba2976c0a1 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
@@ -559,7 +559,7 @@ This allows for the Supabase client to be easily instantiated in the correct con
 import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
 import { useEffect, useState } from 'react'
 
-export default function Home() {
+export default function Page() {
   const [todos, setTodos] = useState()
   const supabase = createClientComponentClient()
 
@@ -590,7 +590,7 @@ import type { Database } from '@/lib/database.types'
 
 type Todo = Database['public']['Tables']['todos']['Row']
 
-export default function Home() {
+export default function Page() {
   const [todos, setTodos] = useState<Todo[] | null>(null)
   const supabase = createClientComponentClient<Database>()
 
@@ -663,7 +663,7 @@ import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'
 
 export const dynamic = 'force-dynamic'
 
-export default async function Home() {
+export default async function Page() {
   const supabase = createServerComponentClient({ cookies })
   const { data } = await supabase.from('todos').select()
   return <pre>{JSON.stringify(data, null, 2)}</pre>
@@ -889,7 +889,7 @@ import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'
 export const runtime = 'edge'
 export const dynamic = 'force-dynamic'
 
-export default async function Home() {
+export default async function Page() {
   const cookieStore = cookies()
 
   const supabase = createServerComponentClient({
@@ -1019,7 +1019,7 @@ Server Components and Route Handlers are static by default - data is fetched onc
 ```jsx app/page.jsx
 import { createClient } from '@supabase/supabase-js'
 
-export default async function Home() {
+export default async function Page() {
   const supabase = createClient(
     process.env.NEXT_PUBLIC_SUPABASE_URL,
     process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
@@ -1039,7 +1039,7 @@ import { createClient } from '@supabase/supabase-js'
 
 import type { Database } from '@/lib/database.types'
 
-export default async function Home() {
+export default async function Page() {
   const supabase = createClient<Database>(
     process.env.NEXT_PUBLIC_SUPABASE_URL!,
     process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

From 1e2c14808808b718015367e225efd8e41c561673 Mon Sep 17 00:00:00 2001
From: Bo Lu <lv.patrick@gmail.com>
Date: Mon, 31 Jul 2023 22:15:55 +1000
Subject: [PATCH 22/73] fix: add tabs remark plugin

---
 .../NavigationMenu/NavigationMenu.constants.ts           | 9 +++++++++
 .../pages/guides/database/extensions/wrappers/[slug].tsx | 2 ++
 2 files changed, 11 insertions(+)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index 4e0bdaa626a..e427afe443f 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -660,6 +660,15 @@ export const database: NavMenuConstant = {
         {
           name: 'wrappers: 3rd Party Integrations',
           url: '/guides/database/extensions/wrappers',
+          items: [
+            { name: 'Airtable', url: '/guides/database/extensions/wrappers/airtable' },
+            { name: 'AWS S3', url: '/guides/database/extensions/wrappers/s3' },
+            { name: 'BigQuery', url: '/guides/database/extensions/wrappers/bigquery' },
+            { name: 'ClickHouse', url: '/guides/database/extensions/wrappers/clickhouse' },
+            { name: 'Firebase', url: '/guides/database/extensions/wrappers/firebase' },
+            { name: 'Logflare', url: '/guides/database/extensions/wrappers/logflare' },
+            { name: 'Stripe', url: '/guides/database/extensions/wrappers/stripe' },
+          ],
         },
       ],
     },
diff --git a/apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx b/apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx
index 81beffacd4b..2363a4ce7d0 100644
--- a/apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx
+++ b/apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx
@@ -12,6 +12,7 @@ import Layout from '~/layouts/DefaultGuideLayout'
 import { UrlTransformFunction, linkTransform } from '~/lib/mdx/plugins/rehypeLinkTransform'
 import remarkMkDocsAdmonition from '~/lib/mdx/plugins/remarkAdmonition'
 import { removeTitle } from '~/lib/mdx/plugins/remarkRemoveTitle'
+import remarkPyMdownTabs from '~/lib/mdx/plugins/remarkTabs'
 
 // We fetch these docs at build time from an external repo
 const org = 'supabase'
@@ -157,6 +158,7 @@ export const getStaticProps: GetStaticProps<WrappersDocsProps> = async ({ params
         remarkGfm,
         remarkMkDocsAdmonition,
         emoji,
+        remarkPyMdownTabs,
         [removeTitle, meta.title],
         [remarkCodeHike, codeHikeOptions],
       ],

From 3e2f075027f83357f652d684074e380a036bc39b Mon Sep 17 00:00:00 2001
From: Jan Tennert <jan.m.tennert@gmail.com>
Date: Tue, 1 Aug 2023 01:15:42 +0200
Subject: [PATCH 23/73] Add missing Kotlin icon to Quickstarts and fix
 indentation

---
 apps/docs/components/HomePageCover.tsx                    | 5 +++++
 .../pages/guides/getting-started/quickstarts/kotlin.mdx   | 8 ++++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/apps/docs/components/HomePageCover.tsx b/apps/docs/components/HomePageCover.tsx
index e760c411dc3..04d9b079a3c 100644
--- a/apps/docs/components/HomePageCover.tsx
+++ b/apps/docs/components/HomePageCover.tsx
@@ -28,6 +28,11 @@ const HomePageCover = (props) => {
       icon: '/docs/img/icons/flutter-icon',
       href: '/guides/getting-started/quickstarts/flutter',
     },
+    {
+      tooltip: 'Android Kotlin',
+      icon: '/docs/img/icons/kotlin-icon',
+      href: '/guides/getting-started/quickstarts/kotlin',
+    },
     {
       tooltip: 'SvelteKit',
       icon: '/docs/img/icons/svelte-icon',
diff --git a/apps/docs/pages/guides/getting-started/quickstarts/kotlin.mdx b/apps/docs/pages/guides/getting-started/quickstarts/kotlin.mdx
index 91f5a535fa5..ba1a00d77b5 100644
--- a/apps/docs/pages/guides/getting-started/quickstarts/kotlin.mdx
+++ b/apps/docs/pages/guides/getting-started/quickstarts/kotlin.mdx
@@ -102,10 +102,10 @@ export const meta = {
           supabaseUrl = "https://xyzcompany.supabase.co",
           supabaseKey = "public-anon-key"
         ) {
-              install(GoTrue)
-              install(Postgrest)
-              install(Storage)
-          }
+          install(GoTrue)
+          install(Postgrest)
+          install(Storage)
+      }
       ```
 
     </StepHikeCompact.Code>

From 0c5575176e8b9576386b83f5ec637f3991910fbb Mon Sep 17 00:00:00 2001
From: Jan Tennert <jan.m.tennert@gmail.com>
Date: Tue, 1 Aug 2023 01:19:14 +0200
Subject: [PATCH 24/73] Cleanup Kotlin Quickstart

---
 apps/docs/pages/guides/getting-started/quickstarts/kotlin.mdx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/apps/docs/pages/guides/getting-started/quickstarts/kotlin.mdx b/apps/docs/pages/guides/getting-started/quickstarts/kotlin.mdx
index ba1a00d77b5..4b1991f3d12 100644
--- a/apps/docs/pages/guides/getting-started/quickstarts/kotlin.mdx
+++ b/apps/docs/pages/guides/getting-started/quickstarts/kotlin.mdx
@@ -62,8 +62,6 @@ export const meta = {
       ```kotlin
         implementation "io.github.jan-tennert.supabase:postgrest-kt:$supabase_version"
         implementation "io.ktor:ktor-client-android:$ktor_version"
-        implementation "io.ktor:ktor-client-core:$ktor_version"
-        implementation "io.ktor:ktor-utils:$ktor_version"
       ```
 
     </StepHikeCompact.Code>
@@ -102,9 +100,7 @@ export const meta = {
           supabaseUrl = "https://xyzcompany.supabase.co",
           supabaseKey = "public-anon-key"
         ) {
-          install(GoTrue)
           install(Postgrest)
-          install(Storage)
       }
       ```
 

From 469b0a47cdf1c31b39ee67637a50d0ac3f1635e0 Mon Sep 17 00:00:00 2001
From: Jan Tennert <jan.m.tennert@gmail.com>
Date: Tue, 1 Aug 2023 01:32:59 +0200
Subject: [PATCH 25/73] Fix Kotlin function docs

---
 spec/supabase_kt_v0.yml | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/spec/supabase_kt_v0.yml b/spec/supabase_kt_v0.yml
index 256778c0e98..265fae6ca9d 100644
--- a/spec/supabase_kt_v0.yml
+++ b/spec/supabase_kt_v0.yml
@@ -3098,9 +3098,10 @@ functions:
           function()
           //invoke it with a body:
           function(body)
-          //invoke it with custom headers:
+          //invoke it with custom http options:
           function(body) {
-              set("Header", "Value")
+              header("Header", "Value")
+              parameter("Key", "Value") //url parameter
           }
           ```
   - id: subscribe

From b12e9147338ac69c0ae4098032269e220b82ce9e Mon Sep 17 00:00:00 2001
From: Jan Tennert <jan.m.tennert@gmail.com>
Date: Tue, 1 Aug 2023 01:35:02 +0200
Subject: [PATCH 26/73] Fix naming

---
 spec/supabase_kt_v0.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/supabase_kt_v0.yml b/spec/supabase_kt_v0.yml
index 265fae6ca9d..7e1f6665408 100644
--- a/spec/supabase_kt_v0.yml
+++ b/spec/supabase_kt_v0.yml
@@ -3098,7 +3098,7 @@ functions:
           function()
           //invoke it with a body:
           function(body)
-          //invoke it with custom http options:
+          //invoke it with custom request options:
           function(body) {
               header("Header", "Value")
               parameter("Key", "Value") //url parameter

From 7cdb91501ff9e60a587bf9ffae796c224183932b Mon Sep 17 00:00:00 2001
From: Bo Lu <lv.patrick@gmail.com>
Date: Tue, 1 Aug 2023 10:56:08 +1000
Subject: [PATCH 27/73] fix: rearrange wrappers nav links

---
 .../NavigationMenu.constants.ts               | 27 ++++++++++---------
 .../{wrappers.mdx => wrappers/overview.mdx}   |  2 +-
 2 files changed, 15 insertions(+), 14 deletions(-)
 rename apps/docs/pages/guides/database/extensions/{wrappers.mdx => wrappers/overview.mdx} (98%)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index e427afe443f..7ebd4ae9659 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -657,19 +657,20 @@ export const database: NavMenuConstant = {
           name: 'RUM: inverted index for full-text search',
           url: '/guides/database/extensions/rum',
         },
-        {
-          name: 'wrappers: 3rd Party Integrations',
-          url: '/guides/database/extensions/wrappers',
-          items: [
-            { name: 'Airtable', url: '/guides/database/extensions/wrappers/airtable' },
-            { name: 'AWS S3', url: '/guides/database/extensions/wrappers/s3' },
-            { name: 'BigQuery', url: '/guides/database/extensions/wrappers/bigquery' },
-            { name: 'ClickHouse', url: '/guides/database/extensions/wrappers/clickhouse' },
-            { name: 'Firebase', url: '/guides/database/extensions/wrappers/firebase' },
-            { name: 'Logflare', url: '/guides/database/extensions/wrappers/logflare' },
-            { name: 'Stripe', url: '/guides/database/extensions/wrappers/stripe' },
-          ],
-        },
+      ],
+    },
+    {
+      name: 'Wrappers',
+      url: undefined,
+      items: [
+        { name: 'Overview', url: '/guides/database/extensions/wrappers/overview' },
+        { name: 'Airtable', url: '/guides/database/extensions/wrappers/airtable' },
+        { name: 'AWS S3', url: '/guides/database/extensions/wrappers/s3' },
+        { name: 'BigQuery', url: '/guides/database/extensions/wrappers/bigquery' },
+        { name: 'ClickHouse', url: '/guides/database/extensions/wrappers/clickhouse' },
+        { name: 'Firebase', url: '/guides/database/extensions/wrappers/firebase' },
+        { name: 'Logflare', url: '/guides/database/extensions/wrappers/logflare' },
+        { name: 'Stripe', url: '/guides/database/extensions/wrappers/stripe' },
       ],
     },
     {
diff --git a/apps/docs/pages/guides/database/extensions/wrappers.mdx b/apps/docs/pages/guides/database/extensions/wrappers/overview.mdx
similarity index 98%
rename from apps/docs/pages/guides/database/extensions/wrappers.mdx
rename to apps/docs/pages/guides/database/extensions/wrappers/overview.mdx
index e19b099c1e3..16373b0a30e 100644
--- a/apps/docs/pages/guides/database/extensions/wrappers.mdx
+++ b/apps/docs/pages/guides/database/extensions/wrappers/overview.mdx
@@ -2,7 +2,7 @@ import Layout from '~/layouts/DefaultGuideLayout'
 
 export const meta = {
   id: 'wrappers',
-  title: 'wrappers: 3rd Party Integrations',
+  title: 'Wrappers: 3rd Party Integrations',
   description: '3rd party integrations for PostgreSQL ',
 }
 

From 43c49e8dd1193c5d54cdba375d175083eb1be840 Mon Sep 17 00:00:00 2001
From: Jon Meyers <jonathon.d.meyers@gmail.com>
Date: Tue, 1 Aug 2023 10:55:58 +1000
Subject: [PATCH 28/73] rewrite server-side auth section to use Route Handlers,
 rather than Server Actions

---
 .../pages/guides/auth/auth-helpers/nextjs.mdx | 360 ++++++++++++------
 1 file changed, 247 insertions(+), 113 deletions(-)

diff --git a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
index dba2976c0a1..0aaafb1f237 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
@@ -373,13 +373,9 @@ TypeScript types can be [generated with the Supabase CLI](/docs/reference/javasc
 
 ### Server-side
 
-The combination of [Server Components](https://nextjs.org/docs/getting-started/react-essentials#server-components) and [Server Actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions) can be used to trigger the authentication process from form submissions.
+The combination of [Server Components](https://nextjs.org/docs/getting-started/react-essentials#server-components) and [Route Handlers](https://nextjs.org/docs/app/building-your-application/routing/route-handlers) can be used to trigger the authentication process from form submissions.
 
-<Admonition type="note">
-
-Next.js [Server Actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions) are currently in Alpha and may change. For now we recommend [triggering the authentication flow client-side](/docs/guides/auth/auth-helpers/nextjs#client-side) for production applications.
-
-</Admonition>
+#### Sign Up Route
 
 <Tabs
   scrollable
@@ -389,59 +385,248 @@ Next.js [Server Actions](https://nextjs.org/docs/app/building-your-application/d
 >
 <TabPanel id="js" label="JavaScript">
 
-```jsx app/login.js
-import { createServerActionClient } from '@supabase/auth-helpers-nextjs'
-import { revalidatePath } from 'next/cache'
+```jsx app/auth/sign-up.js
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
 import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server'
 
 export const dynamic = 'force-dynamic'
 
-export default async function Login() {
-  const handleSignUp = async (formData) => {
-    'use server'
-    const email = formData.get('email')
-    const password = formData.get('password')
+export async function POST(request) {
+  const requestUrl = new URL(request.url)
+  const formData = await request.formData()
+  const email = formData.get('email')
+  const password = formData.get('password')
+  const supabase = createRouteHandlerClient({ cookies })
 
-    const supabase = createServerActionClient({ cookies })
-    await supabase.auth.signUp({
-      email,
-      password,
-      options: {
-        emailRedirectTo: 'http://localhost:3000/auth/callback',
-      },
-    })
+  await supabase.auth.signUp({
+    email,
+    password,
+    options: {
+      emailRedirectTo: `${requestUrl.origin}/auth/callback`,
+    },
+  })
 
-    revalidatePath('/')
-  }
+  return NextResponse.redirect(requestUrl.origin, {
+    status: 301,
+  })
+}
+```
 
-  const handleSignIn = async (formData) => {
-    'use server'
-    const email = formData.get('email')
-    const password = formData.get('password')
+</TabPanel>
 
-    const supabase = createServerActionClient({ cookies })
-    await supabase.auth.signInWithPassword({
-      email,
-      password,
-    })
+<TabPanel id="ts" label="TypeScript">
 
-    revalidatePath('/')
-  }
+```tsx app/auth/sign-up.ts
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
+import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server'
 
-  const handleSignOut = async () => {
-    'use server'
-    const supabase = createServerActionClient({ cookies })
-    await supabase.auth.signOut()
-    revalidatePath('/')
-  }
+import type { Database } from '@/lib/database.types'
 
+export const dynamic = 'force-dynamic'
+
+export async function POST(request: Request) {
+  const requestUrl = new URL(request.url)
+  const formData = await request.formData()
+  const email = String(formData.get('email'))
+  const password = String(formData.get('password'))
+  const supabase = createRouteHandlerClient<Database>({ cookies })
+
+  await supabase.auth.signUp({
+    email,
+    password,
+    options: {
+      emailRedirectTo: `${requestUrl.origin}/auth/callback`,
+    },
+  })
+
+  return NextResponse.redirect(requestUrl.origin, {
+    status: 301,
+  })
+}
+```
+
+<Admonition type="note">
+
+TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createRouteHandlerClient` to add type support to the Supabase client.
+
+</Admonition>
+
+</TabPanel>
+</Tabs>
+
+<Admonition type="note">
+
+Returning a `301` status redirects from a POST to a GET route
+
+</Admonition>
+
+#### Login Route
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="js"
+>
+<TabPanel id="js" label="JavaScript">
+
+```jsx app/auth/login.js
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
+import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server'
+
+export const dynamic = 'force-dynamic'
+
+export async function POST(request) {
+  const requestUrl = new URL(request.url)
+  const formData = await request.formData()
+  const email = formData.get('email')
+  const password = formData.get('password')
+  const supabase = createRouteHandlerClient({ cookies })
+
+  await supabase.auth.signInWithPassword({
+    email,
+    password,
+  })
+
+  return NextResponse.redirect(requestUrl.origin, {
+    status: 301,
+  })
+}
+```
+
+</TabPanel>
+
+<TabPanel id="ts" label="TypeScript">
+
+```tsx app/auth/login.ts
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
+import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server'
+
+import type { Database } from '@/lib/database.types'
+
+export const dynamic = 'force-dynamic'
+
+export async function POST(request: Request) {
+  const requestUrl = new URL(request.url)
+  const formData = await request.formData()
+  const email = String(formData.get('email'))
+  const password = String(formData.get('password'))
+  const supabase = createRouteHandlerClient<Database>({ cookies })
+
+  await supabase.auth.signInWithPassword({
+    email,
+    password,
+  })
+
+  return NextResponse.redirect(requestUrl.origin, {
+    status: 301,
+  })
+}
+```
+
+<Admonition type="note">
+
+TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createRouteHandlerClient` to add type support to the Supabase client.
+
+</Admonition>
+
+</TabPanel>
+</Tabs>
+
+<Admonition type="note">
+
+Returning a `301` status redirects from a POST to a GET route
+
+</Admonition>
+
+#### Logout Route
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="js"
+>
+<TabPanel id="js" label="JavaScript">
+
+```jsx app/auth/logout.js
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
+import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server'
+
+export const dynamic = 'force-dynamic'
+
+export async function POST(request) {
+  const requestUrl = new URL(request.url)
+  const supabase = createRouteHandlerClient({ cookies })
+
+  await supabase.auth.signOut()
+
+  return NextResponse.redirect(`${requestUrl.origin}/login`, {
+    status: 301,
+  })
+}
+```
+
+</TabPanel>
+
+<TabPanel id="ts" label="TypeScript">
+
+```tsx app/auth/logout.ts
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
+import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server'
+
+import type { Database } from '@/lib/database.types'
+
+export const dynamic = 'force-dynamic'
+
+export async function POST(request: Request) {
+  const requestUrl = new URL(request.url)
+  const supabase = createRouteHandlerClient<Database>({ cookies })
+
+  await supabase.auth.signOut()
+
+  return NextResponse.redirect(`${requestUrl.origin}/login`, {
+    status: 301,
+  })
+}
+```
+
+<Admonition type="note">
+
+TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createRouteHandlerClient` to add type support to the Supabase client.
+
+</Admonition>
+
+</TabPanel>
+</Tabs>
+
+#### Login Page
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="js"
+>
+<TabPanel id="js" label="JavaScript">
+
+```jsx app/login.jsx
+export default function Login() {
   return (
-    <form action={handleSignUp}>
+    <form action="/auth/login" method="post">
+      <label htmlFor="email">Email</label>
       <input name="email" />
+      <label htmlFor="password">Password</label>
       <input type="password" name="password" />
-      <button>Sign up</button>
-      <button formAction={handleSignIn}>Sign in</button>
-      <button formAction={handleSignOut}>Sign out</button>
+      <button>Sign In</button>
+      <button formAction="/auth/sign-up">Sign Up</button>
+      <button formAction="/auth/logout">Sign Out</button>
     </form>
   )
 }
@@ -451,72 +636,21 @@ export default async function Login() {
 
 <TabPanel id="ts" label="TypeScript">
 
-```tsx app/login.ts
-import { createServerActionClient } from '@supabase/auth-helpers-nextjs'
-import { revalidatePath } from 'next/cache'
-import { cookies } from 'next/headers'
-
-import type { Database } from '@/lib/database.types'
-
-export const dynamic = 'force-dynamic'
-
-export default async function Login() {
-  const handleSignUp = async (formData: FormData) => {
-    'use server'
-    const email = String(formData.get('email'))
-    const password = String(formData.get('password'))
-
-    const supabase = createServerActionClient<Database>({ cookies })
-    await supabase.auth.signUp({
-      email,
-      password,
-      options: {
-        emailRedirectTo: 'http://localhost:3000/auth/callback',
-      },
-    })
-
-    revalidatePath('/')
-  }
-
-  const handleSignIn = async (formData: FormData) => {
-    'use server'
-    const email = String(formData.get('email'))
-    const password = String(formData.get('password'))
-
-    const supabase = createServerActionClient<Database>({ cookies })
-    await supabase.auth.signInWithPassword({
-      email,
-      password,
-    })
-
-    revalidatePath('/')
-  }
-
-  const handleSignOut = async () => {
-    'use server'
-    const supabase = createServerActionClient<Database>({ cookies })
-    await supabase.auth.signOut()
-    revalidatePath('/')
-  }
-
+```tsx app/login.tsx
+export default function Login() {
   return (
-    <form action={handleSignUp}>
+    <form action="/auth/login" method="post">
+      <label htmlFor="email">Email</label>
       <input name="email" />
+      <label htmlFor="password">Password</label>
       <input type="password" name="password" />
-      <button>Sign up</button>
-      <button formAction={handleSignIn}>Sign in</button>
-      <button formAction={handleSignOut}>Sign out</button>
+      <button>Sign In</button>
+      <button formAction="/auth/sign-up">Sign Up</button>
     </form>
   )
 }
 ```
 
-<Admonition type="note">
-
-TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createServerActionClient` to add type support to the Supabase client.
-
-</Admonition>
-
 </TabPanel>
 </Tabs>
 
@@ -817,7 +951,7 @@ TypeScript types can be [generated with the Supabase CLI](/docs/reference/javasc
 >
 <TabPanel id="js" label="JavaScript">
 
-```jsx app/api/todos/route.jsx
+```jsx app/api/todos/route.js
 import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
 import { NextResponse } from 'next/server'
 import { cookies } from 'next/headers'
@@ -836,7 +970,7 @@ export async function POST(request) {
 
 <TabPanel id="ts" label="TypeScript">
 
-```tsx app/api/todos/route.tsx
+```tsx app/api/todos/route.ts
 import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
 import { NextResponse } from 'next/server'
 import { cookies } from 'next/headers'
@@ -914,10 +1048,10 @@ import type { Database } from '@/lib/database.types'
 export const runtime = 'edge'
 export const dynamic = 'force-dynamic'
 
-export default async function ServerComponent<Database>() {
+export default async function Page() {
   const cookieStore = cookies()
 
-  const supabase = createServerComponentClient({
+  const supabase = createServerComponentClient<Database>({
     cookies: () => cookieStore,
   })
 
@@ -945,7 +1079,7 @@ TypeScript types can be [generated with the Supabase CLI](/docs/reference/javasc
 >
 <TabPanel id="js" label="JavaScript">
 
-```jsx app/api/todos/route.jsx
+```jsx app/api/todos/route.js
 import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
 import { NextResponse } from 'next/server'
 import { cookies } from 'next/headers'
@@ -970,7 +1104,7 @@ export async function POST(request) {
 
 <TabPanel id="ts" label="TypeScript">
 
-```tsx app/api/todos/route.tsx
+```tsx app/api/todos/route.ts
 import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
 import { NextResponse } from 'next/server'
 import { cookies } from 'next/headers'
@@ -1052,7 +1186,7 @@ export default async function Page() {
 
 <Admonition type="note">
 
-TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createServerComponentClient` to add type support to the Supabase client.
+TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createClient` to add type support to the Supabase client.
 
 </Admonition>
 
@@ -1069,7 +1203,7 @@ TypeScript types can be [generated with the Supabase CLI](/docs/reference/javasc
 >
 <TabPanel id="js" label="JavaScript">
 
-```jsx app/api/todos/route.jsx
+```jsx app/api/todos/route.js
 import { createClient } from '@supabase/supabase-js'
 import { NextResponse } from 'next/server'
 
@@ -1090,7 +1224,7 @@ export async function POST(request) {
 
 <TabPanel id="ts" label="TypeScript">
 
-```tsx app/api/todos/route.tsx
+```tsx app/api/todos/route.ts
 import { createClient } from '@supabase/supabase-js'
 import { NextResponse } from 'next/server'
 
@@ -1111,7 +1245,7 @@ export async function POST(request: Request) {
 
 <Admonition type="note">
 
-TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createRouteHandlerClient` to add type support to the Supabase client.
+TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createClient` to add type support to the Supabase client.
 
 </Admonition>
 

From 42ed5e6e468793b8364e109f157a36327effac34 Mon Sep 17 00:00:00 2001
From: Copple <10214025+kiwicopple@users.noreply.github.com>
Date: Tue, 1 Aug 2023 09:58:05 +0200
Subject: [PATCH 29/73] Update
 apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts

---
 .../NavigationMenu/NavigationMenu.constants.ts     | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index 7ebd4ae9659..e37c4002be0 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -664,13 +664,13 @@ export const database: NavMenuConstant = {
       url: undefined,
       items: [
         { name: 'Overview', url: '/guides/database/extensions/wrappers/overview' },
-        { name: 'Airtable', url: '/guides/database/extensions/wrappers/airtable' },
-        { name: 'AWS S3', url: '/guides/database/extensions/wrappers/s3' },
-        { name: 'BigQuery', url: '/guides/database/extensions/wrappers/bigquery' },
-        { name: 'ClickHouse', url: '/guides/database/extensions/wrappers/clickhouse' },
-        { name: 'Firebase', url: '/guides/database/extensions/wrappers/firebase' },
-        { name: 'Logflare', url: '/guides/database/extensions/wrappers/logflare' },
-        { name: 'Stripe', url: '/guides/database/extensions/wrappers/stripe' },
+        { name: 'Connecting to Airtable', url: '/guides/database/extensions/wrappers/airtable' },
+        { name: 'Connecting to AWS S3', url: '/guides/database/extensions/wrappers/s3' },
+        { name: 'Connecting to BigQuery', url: '/guides/database/extensions/wrappers/bigquery' },
+        { name: 'Connecting to ClickHouse', url: '/guides/database/extensions/wrappers/clickhouse' },
+        { name: 'Connecting to Firebase', url: '/guides/database/extensions/wrappers/firebase' },
+        { name: 'Connecting to Logflare', url: '/guides/database/extensions/wrappers/logflare' },
+        { name: 'Connecting to Stripe', url: '/guides/database/extensions/wrappers/stripe' },
       ],
     },
     {

From d02d7e75f8bb7fa49b7d7d059ee2a7bb4106168b Mon Sep 17 00:00:00 2001
From: Copple <10214025+kiwicopple@users.noreply.github.com>
Date: Tue, 1 Aug 2023 11:19:37 +0200
Subject: [PATCH 30/73] Update
 apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts

---
 .../Navigation/NavigationMenu/NavigationMenu.constants.ts    | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index e37c4002be0..75820a279ab 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -667,7 +667,10 @@ export const database: NavMenuConstant = {
         { name: 'Connecting to Airtable', url: '/guides/database/extensions/wrappers/airtable' },
         { name: 'Connecting to AWS S3', url: '/guides/database/extensions/wrappers/s3' },
         { name: 'Connecting to BigQuery', url: '/guides/database/extensions/wrappers/bigquery' },
-        { name: 'Connecting to ClickHouse', url: '/guides/database/extensions/wrappers/clickhouse' },
+        { 
+          name: 'Connecting to ClickHouse', 
+          url: '/guides/database/extensions/wrappers/clickhouse' 
+        },
         { name: 'Connecting to Firebase', url: '/guides/database/extensions/wrappers/firebase' },
         { name: 'Connecting to Logflare', url: '/guides/database/extensions/wrappers/logflare' },
         { name: 'Connecting to Stripe', url: '/guides/database/extensions/wrappers/stripe' },

From b411e72aded1b797c7bbe4cb126b85d1db28e42e Mon Sep 17 00:00:00 2001
From: Jan Tennert <jan.m.tennert@gmail.com>
Date: Tue, 1 Aug 2023 12:06:48 +0200
Subject: [PATCH 31/73] Clarify passwort reset docs

---
 spec/supabase_kt_v0.yml | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/spec/supabase_kt_v0.yml b/spec/supabase_kt_v0.yml
index 7e1f6665408..bcac0e3b304 100644
--- a/spec/supabase_kt_v0.yml
+++ b/spec/supabase_kt_v0.yml
@@ -2571,9 +2571,7 @@ functions:
       - The password reset flow consist of 2 broad steps: (i) Allow the user to login via the password reset link; (ii) Update the user's password.
       - The `sendRecoveryEmail()` only sends a password reset link to the user's email.
       To update the user's password, see [`modifyUser()`](/docs/reference/kotlin/auth-updateuser).
-      - When the user clicks the reset link in the email they are redirected back to your application.
-      You can configure the URL that the user is redirected to with the `redirectUrl` parameter.
-      See [redirect URLs and wildcards](/docs/guides/auth#redirect-urls-and-wildcards) to add additional redirect URLs to your project.
+      - The user gets redirected back to your app, assuming you setup [OTP handling](/docs/reference/kotlin/initializing)
       - After the user has been redirected successfully, prompt them for a new password and call `modifyUser()`:
         ```kotlin
         client.gotrue.modifyUser(Email) {

From 7026ad186152633088bec0f97d225cfd0052bda3 Mon Sep 17 00:00:00 2001
From: Jan Tennert <jan.m.tennert@gmail.com>
Date: Tue, 1 Aug 2023 12:11:24 +0200
Subject: [PATCH 32/73] Fix wrong method

---
 spec/supabase_kt_v0.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/supabase_kt_v0.yml b/spec/supabase_kt_v0.yml
index bcac0e3b304..07e5d59e6ce 100644
--- a/spec/supabase_kt_v0.yml
+++ b/spec/supabase_kt_v0.yml
@@ -2574,7 +2574,7 @@ functions:
       - The user gets redirected back to your app, assuming you setup [OTP handling](/docs/reference/kotlin/initializing)
       - After the user has been redirected successfully, prompt them for a new password and call `modifyUser()`:
         ```kotlin
-        client.gotrue.modifyUser(Email) {
+        client.gotrue.modifyUser {
             password = "1234567"
         }
         ```

From ef8c25032a037688019dd959b0ae7661c5be23c4 Mon Sep 17 00:00:00 2001
From: Jan Tennert <jan.m.tennert@gmail.com>
Date: Tue, 1 Aug 2023 16:33:17 +0000
Subject: [PATCH 33/73] Fix typo

---
 spec/supabase_kt_v0.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/supabase_kt_v0.yml b/spec/supabase_kt_v0.yml
index 07e5d59e6ce..265d6a037c9 100644
--- a/spec/supabase_kt_v0.yml
+++ b/spec/supabase_kt_v0.yml
@@ -2563,7 +2563,7 @@ functions:
           - `NotAuthenticated`, 
           - `LoadingFromStorage`, 
           - `NetworkError`, 
-          - `Authenticated(sesssion)`
+          - `Authenticated(session)`
   - id: reset-password-for-email
     title: 'Send a password reset request'
     notes: |

From 7239300cc32c37eb2cb38262f573b3629740ebe1 Mon Sep 17 00:00:00 2001
From: Copple <10214025+kiwicopple@users.noreply.github.com>
Date: Tue, 1 Aug 2023 19:42:53 +0200
Subject: [PATCH 34/73] fix linting errors

---
 .../Navigation/NavigationMenu/NavigationMenu.constants.ts   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index 75820a279ab..f9501929869 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -667,9 +667,9 @@ export const database: NavMenuConstant = {
         { name: 'Connecting to Airtable', url: '/guides/database/extensions/wrappers/airtable' },
         { name: 'Connecting to AWS S3', url: '/guides/database/extensions/wrappers/s3' },
         { name: 'Connecting to BigQuery', url: '/guides/database/extensions/wrappers/bigquery' },
-        { 
-          name: 'Connecting to ClickHouse', 
-          url: '/guides/database/extensions/wrappers/clickhouse' 
+        {
+          name: 'Connecting to ClickHouse',
+          url: '/guides/database/extensions/wrappers/clickhouse',
         },
         { name: 'Connecting to Firebase', url: '/guides/database/extensions/wrappers/firebase' },
         { name: 'Connecting to Logflare', url: '/guides/database/extensions/wrappers/logflare' },

From eb5ae6e96f46f780cb39d8edebccfbfb0ec3bf41 Mon Sep 17 00:00:00 2001
From: Copple <10214025+kiwicopple@users.noreply.github.com>
Date: Tue, 1 Aug 2023 19:43:49 +0200
Subject: [PATCH 35/73] Update
 apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts

---
 .../Navigation/NavigationMenu/NavigationMenu.constants.ts       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index f9501929869..bd3528f0602 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -660,7 +660,7 @@ export const database: NavMenuConstant = {
       ],
     },
     {
-      name: 'Wrappers',
+      name: 'Foreign Data Wrappers',
       url: undefined,
       items: [
         { name: 'Overview', url: '/guides/database/extensions/wrappers/overview' },

From 66b1d82e3d363d7b74daeb0ffa480e75faeea87e Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Wed, 2 Aug 2023 04:18:25 +0800
Subject: [PATCH 36/73] Update
 studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx

---
 studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx b/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx
index 1783a8f28e8..c0847e3788d 100644
--- a/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx
+++ b/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx
@@ -139,7 +139,7 @@ const APIKeys = () => {
                   for your tables and configured policies. You may also use the service key which
                   can be found{' '}
                   <Link href={`/project/${projectRef}/settings/api`}>
-                    <a className="transition text-brand-300 hover:text-brand">here</a>
+                    <a className="transition text-brand hover:text-brand-600">here</a>
                   </Link>{' '}
                   to bypass RLS.
                 </p>

From cdca055270b397e2752e64c8a7cbcb1da822feff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Wed, 2 Aug 2023 00:38:36 +0200
Subject: [PATCH 37/73] fix: only show db size warning on capped plans

---
 .../interfaces/Organization/Usage/Usage.constants.tsx          | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/studio/components/interfaces/Organization/Usage/Usage.constants.tsx b/studio/components/interfaces/Organization/Usage/Usage.constants.tsx
index 0743b1ac3d8..d38ad187a07 100644
--- a/studio/components/interfaces/Organization/Usage/Usage.constants.tsx
+++ b/studio/components/interfaces/Organization/Usage/Usage.constants.tsx
@@ -103,10 +103,11 @@ export const USAGE_CATEGORIES: CategoryMeta[] = [
 
           const isApproachingLimit = hasLimit && usageRatio >= USAGE_APPROACHING_THRESHOLD
           const isExceededLimit = hasLimit && usageRatio >= 1
+          const isCapped = usageMeta?.capped
 
           return (
             <div>
-              {(isApproachingLimit || isExceededLimit) && (
+              {(isApproachingLimit || isExceededLimit) && isCapped && (
                 <Alert
                   withIcon
                   variant={isExceededLimit ? 'danger' : 'warning'}

From b57db1521c53aad9713d46f971ba4b738f194852 Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Tue, 1 Aug 2023 23:23:29 -0230
Subject: [PATCH 38/73] temp fix

---
 packages/config/code-hike.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/config/code-hike.scss b/packages/config/code-hike.scss
index e022649d777..0a8d5970c18 100644
--- a/packages/config/code-hike.scss
+++ b/packages/config/code-hike.scss
@@ -15,7 +15,8 @@
   --ch-13: #5a1e02;
   --ch-14: #161b22;
   --ch-15: #8b949e;
-  --ch-16: hsl(var(--foreground-lighter));
+  // --ch-16: hsl(var(--foreground-lighter));
+  --ch-16: #2a2929;
   --ch-17: #264f78;
   --ch-18: #3794ff;
   --ch-19: #ffffff0b;
@@ -44,7 +45,8 @@
   --ch-13: #ffd8b5;
   --ch-14: #eaeef2;
   --ch-15: #57606a;
-  --ch-16: hsl(var(--foreground-lighter));
+  // --ch-16: hsl(var(--foreground-lighter));
+  --ch-16: #eeeeee;
   --ch-17: #add6ff;
   --ch-18: #1a85ff;
   --ch-19: #fdff0033;

From 83f0193bcb8419f5d9051397a6bcb510d7f6dbd0 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Wed, 2 Aug 2023 12:38:23 +0800
Subject: [PATCH 39/73] feat: resync vercel env vars

---
 .../IntegrationSettings/Integration.tsx       | 48 +++++++++++++++++--
 1 file changed, 45 insertions(+), 3 deletions(-)

diff --git a/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx b/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx
index ffd8d671337..6c547d68cf6 100644
--- a/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx
+++ b/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx
@@ -12,6 +12,7 @@ import {
   ScaffoldSectionDetail,
 } from 'components/layouts/Scaffold'
 import ConfirmationModal from 'components/ui/ConfirmationModal'
+import { useIntegrationsVercelConnectionSyncEnvsMutation } from 'data/integrations/integrations-vercel-connection-sync-envs-mutation'
 import {
   IntegrationName,
   IntegrationProjectConnection,
@@ -21,7 +22,7 @@ import { BASE_PATH } from 'lib/constants'
 import { pluralize } from 'lib/helpers'
 import { EMPTY_ARR } from 'lib/void'
 import { useCallback, useState } from 'react'
-import { Button, Dropdown, IconChevronDown, IconTrash, Modal } from 'ui'
+import { Button, Dropdown, IconChevronDown, IconLoader, IconRefreshCw, IconTrash, Modal } from 'ui'
 
 export interface IntegrationProps {
   title: string
@@ -123,6 +124,7 @@ const IntegrationConnectionItem = ({
   onDeleteConnection,
 }: IntegrationConnectionItemProps) => {
   const [isOpen, setIsOpen] = useState(false)
+  const [dropdownVisible, setDropdownVisible] = useState(false)
 
   const onConfirm = useCallback(async () => {
     try {
@@ -136,6 +138,17 @@ const IntegrationConnectionItem = ({
     setIsOpen(false)
   }, [])
 
+  const { mutateAsync: syncEnvs, isLoading: isSyncEnvLoading } =
+    useIntegrationsVercelConnectionSyncEnvsMutation()
+
+  const onReSyncEnvVars = useCallback(async () => {
+    try {
+      await syncEnvs({ connectionId: connection.id })
+    } finally {
+      setDropdownVisible(false)
+    }
+  }, [connection, syncEnvs])
+
   return (
     <>
       <IntegrationConnection
@@ -143,13 +156,42 @@ const IntegrationConnectionItem = ({
         type={type}
         actions={
           <Dropdown
+            open={dropdownVisible}
+            onOpenChange={() => setDropdownVisible(!dropdownVisible)}
+            modal={false}
             side="bottom"
             align="end"
-            size="large"
+            size="medium"
             overlay={
               <>
+                {type === 'Vercel' && (
+                  <>
+                    <Dropdown.Item
+                      icon={
+                        isSyncEnvLoading ? (
+                          <IconLoader className="animate-spin" size={14} />
+                        ) : (
+                          <IconRefreshCw size={14} />
+                        )
+                      }
+                      onClick={(event) => {
+                        // event.stopPropagation()
+                        // event.preventDefault()
+                      }}
+                      onSelect={(event) => {
+                        event.stopPropagation()
+                        event.preventDefault()
+                        onReSyncEnvVars()
+                      }}
+                      disabled={isSyncEnvLoading}
+                    >
+                      Re-sync environment variables
+                    </Dropdown.Item>
+                    <Dropdown.Separator />
+                  </>
+                )}
                 <Dropdown.Item icon={<IconTrash size={14} />} onSelect={() => setIsOpen(true)}>
-                  Delete
+                  Delete connection
                 </Dropdown.Item>
               </>
             }

From 52a3bef322d3d7f5061eea8fd89a3e98c1a77fa9 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Wed, 2 Aug 2023 12:40:50 +0800
Subject: [PATCH 40/73] Update Integration.tsx

---
 .../Organization/IntegrationSettings/Integration.tsx        | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx b/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx
index 6c547d68cf6..65af19e69c2 100644
--- a/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx
+++ b/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx
@@ -174,10 +174,6 @@ const IntegrationConnectionItem = ({
                           <IconRefreshCw size={14} />
                         )
                       }
-                      onClick={(event) => {
-                        // event.stopPropagation()
-                        // event.preventDefault()
-                      }}
                       onSelect={(event) => {
                         event.stopPropagation()
                         event.preventDefault()
@@ -185,7 +181,7 @@ const IntegrationConnectionItem = ({
                       }}
                       disabled={isSyncEnvLoading}
                     >
-                      Re-sync environment variables
+                      Resync environment variables
                     </Dropdown.Item>
                     <Dropdown.Separator />
                   </>

From 91210b68e876817ff33148c7b76bfa1d901d172b Mon Sep 17 00:00:00 2001
From: Alaister Young <a@alaisteryoung.com>
Date: Wed, 2 Aug 2023 14:50:25 +1000
Subject: [PATCH 41/73] add default error handler for vercel env sync

---
 ...ns-vercel-connection-sync-envs-mutation.ts | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/studio/data/integrations/integrations-vercel-connection-sync-envs-mutation.ts b/studio/data/integrations/integrations-vercel-connection-sync-envs-mutation.ts
index 357bc3b6438..78240f76f43 100644
--- a/studio/data/integrations/integrations-vercel-connection-sync-envs-mutation.ts
+++ b/studio/data/integrations/integrations-vercel-connection-sync-envs-mutation.ts
@@ -1,5 +1,8 @@
-import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { useMutation, UseMutationOptions } from '@tanstack/react-query'
+import { toast } from 'react-hot-toast'
+
 import { post } from 'data/fetchers'
+import { ResponseError } from 'types'
 
 export type IntegrationsVercelConnectionSyncEnvsVariables = {
   connectionId: string
@@ -29,25 +32,31 @@ type IntegrationsVercelConnectionSyncEnvsData = Awaited<
 
 export const useIntegrationsVercelConnectionSyncEnvsMutation = ({
   onSuccess,
+  onError,
   ...options
 }: Omit<
   UseMutationOptions<
     IntegrationsVercelConnectionSyncEnvsData,
-    unknown,
+    ResponseError,
     IntegrationsVercelConnectionSyncEnvsVariables
   >,
   'mutationFn'
 > = {}) => {
-  const queryClient = useQueryClient()
-
   return useMutation<
     IntegrationsVercelConnectionSyncEnvsData,
-    unknown,
+    ResponseError,
     IntegrationsVercelConnectionSyncEnvsVariables
   >((vars) => syncEnvsIntegrationsVercelConnection(vars), {
     async onSuccess(data, variables, context) {
       await onSuccess?.(data, variables, context)
     },
+    async onError(data, variables, context) {
+      if (onError === undefined) {
+        toast.error(`Failed to sync environment variables: ${data.message}`)
+      } else {
+        onError(data, variables, context)
+      }
+    },
     ...options,
   })
 }

From 17be4841cb5c9b26fef76732a1e11215e4de62d2 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Wed, 2 Aug 2023 13:02:47 +0800
Subject: [PATCH 42/73] Update Integration.tsx

---
 .../interfaces/Organization/IntegrationSettings/Integration.tsx  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx b/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx
index 65af19e69c2..08ee496acad 100644
--- a/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx
+++ b/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx
@@ -175,7 +175,6 @@ const IntegrationConnectionItem = ({
                         )
                       }
                       onSelect={(event) => {
-                        event.stopPropagation()
                         event.preventDefault()
                         onReSyncEnvVars()
                       }}

From cd0a7edadc31889a2ff421c76d616062e367835f Mon Sep 17 00:00:00 2001
From: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Date: Wed, 2 Aug 2023 08:47:02 +0200
Subject: [PATCH 43/73] lw8: add meetups section

---
 .../components/LaunchWeek/8/LW8Meetups.tsx    | 111 ++++++++++++++++++
 apps/www/pages/launch-week/index.tsx          |  14 ++-
 .../pages/launch-week/tickets/[username].tsx  |   2 +-
 apps/www/pages/launch-week/tickets/index.tsx  |   2 +-
 4 files changed, 125 insertions(+), 4 deletions(-)
 create mode 100644 apps/www/components/LaunchWeek/8/LW8Meetups.tsx

diff --git a/apps/www/components/LaunchWeek/8/LW8Meetups.tsx b/apps/www/components/LaunchWeek/8/LW8Meetups.tsx
new file mode 100644
index 00000000000..dbcce1ec01c
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/LW8Meetups.tsx
@@ -0,0 +1,111 @@
+import Link from 'next/link'
+import React, { useEffect, useState } from 'react'
+import { Badge } from 'ui'
+import useConfData from '../hooks/use-conf-data'
+
+export interface Meetup {
+  id?: any
+  title: string
+  isLive: boolean
+  link: string
+  display_info: string
+  start_at: string
+}
+
+const LW8Meetups = ({ meetups }: { meetups?: Meetup[] }) => {
+  const { supabase } = useConfData()
+  const [meets, setMeets] = useState<Meetup[]>(meetups ?? [])
+  const [realtimeChannel, setRealtimeChannel] = useState<ReturnType<
+    (typeof supabase)['channel']
+  > | null>(null)
+
+  useEffect(() => {
+    // Listen to realtime changes
+    if (supabase && !realtimeChannel) {
+      const channel = supabase
+        .channel('changes')
+        .on(
+          'postgres_changes',
+          {
+            event: 'UPDATE',
+            schema: 'public',
+            table: 'lw8_meetups',
+          },
+          async () => {
+            const { data: newMeets, error } = await supabase.from('lw8_meetups').select('*')
+            console.log('newMeets error', error)
+            console.log('newMeets', newMeets)
+            setMeets(newMeets)
+          }
+        )
+        .subscribe()
+      setRealtimeChannel(channel)
+    }
+
+    return () => {
+      // Cleanup realtime subscription on unmount
+      realtimeChannel?.unsubscribe()
+    }
+  }, [])
+
+  useEffect(() => {
+    console.log('meetups', meets)
+  }, [meets])
+
+  return (
+    <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-8">
+      <div className="col-span-1 lg:col-span-4 flex flex-col justify-center">
+        <h2 className="text-2xl sm:text-3xl xl:text-4xl tracking-[-.5px]">Join us live</h2>
+        <p className="text-scale-1000 text-xs sm:text-sm lg:text-base py-3 lg:max-w-md">
+          Celebrate LW8 with us at our first-ever live meetups across various locations. Join the
+          fun, grab some swag, and be a part of the Supabase community.
+        </p>
+      </div>
+      <div className="col-span-1 lg:col-span-7 lg:col-start-6 w-full max-w-4xl flex flex-col justify-between items-stretch">
+        {meets &&
+          meets
+            ?.sort((a, b) => (new Date(a.start_at) > new Date(b.start_at) ? 1 : -1))
+            .map(({ display_info, link, isLive, title }: Meetup) => (
+              <Link href={link ?? '#'}>
+                <a
+                  target="_blank"
+                  className={[
+                    'w-full group py-0 flex items-center gap-2 md:gap-4 text-lg sm:text-2xl lg:text-4xl border-b border-[#111718]',
+                    'hover:text-brand',
+                    isLive ? 'text-scale-1100' : 'text-scale-800',
+                    !link && 'pointer-events-none',
+                  ].join(' ')}
+                >
+                  <div className="flex items-center gap-2 md:gap-4">
+                    <span>{title}</span>
+                    {isLive && <Badge>Live now</Badge>}
+                    <span className="opacity-0 -translate-x-2 transition-all md:group-hover:opacity-100 group-hover:translate-x-0">
+                      <svg
+                        width="47"
+                        height="47"
+                        viewBox="0 0 47 47"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M33.0387 16.2422L40.6691 23.8727M40.6691 23.8727L33.0387 31.5031M40.6691 23.8727L6.33203 23.8727"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                  {display_info && (
+                    <span className="text-sm text-right flex-1">{display_info}</span>
+                  )}
+                </a>
+              </Link>
+            ))}
+      </div>
+    </div>
+  )
+}
+
+export default LW8Meetups
diff --git a/apps/www/pages/launch-week/index.tsx b/apps/www/pages/launch-week/index.tsx
index a44ac87bf85..4b41360d683 100644
--- a/apps/www/pages/launch-week/index.tsx
+++ b/apps/www/pages/launch-week/index.tsx
@@ -11,6 +11,7 @@ import { PageState, ConfDataContext, UserData } from '~/components/LaunchWeek/ho
 import DefaultLayout from '~/components/Layouts/Default'
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import { LaunchWeekLogoHeader } from '~/components/LaunchWeek/8/LaunchWeekLogoHeader'
+import { Meetup } from '~/components/LaunchWeek/8/LW8Meetups'
 
 import { useTheme } from 'common/Providers'
 
@@ -21,6 +22,7 @@ const AnimatedParticles = dynamic(
   () => import('~/components/LaunchWeek/8/AnimatedParticles/ParticlesCanvas')
 )
 const TicketContainer = dynamic(() => import('~/components/LaunchWeek/8/Ticket/TicketContainer'))
+const LW8Meetups = dynamic(() => import('~/components/LaunchWeek/8/LW8Meetups'))
 const LaunchWeekPrizeSection = dynamic(
   () => import('~/components/LaunchWeek/8/LaunchWeekPrizeSection')
 )
@@ -29,6 +31,7 @@ const CTABanner = dynamic(() => import('~/components/CTABanner'))
 
 interface Props {
   users?: UserData[]
+  meetups?: Meetup[]
 }
 
 const supabaseAdmin = createClient(
@@ -39,7 +42,7 @@ const supabaseAdmin = createClient(
     'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9idWxkYW5ycHRsb2t0eGNmZnZuIiwicm9sZSI6ImFub24iLCJpYXQiOjE2Njk3MjcwMTIsImV4cCI6MTk4NTMwMzAxMn0.SZLqryz_-stF8dgzeVXmzZWPOqdOrBwqJROlFES8v3I'
 )
 
-export default function TicketHome({ users }: Props) {
+export default function TicketHome({ users, meetups }: Props) {
   const { query } = useRouter()
 
   const TITLE = 'Supabase LaunchWeek 8'
@@ -149,7 +152,7 @@ export default function TicketHome({ users }: Props) {
                     />
                   </div>
                 </SectionContainer>
-                <div className="absolute w-full aspect-[1/1] md:aspect-[1.5/1] lg:aspect-[2.5/1] inset-0 z-0">
+                <div className="absolute w-full aspect-[1/1] md:aspect-[1.5/1] lg:aspect-[2.5/1] inset-0 z-0 pointer-events-none">
                   <Image
                     src="/images/launchweek/8/LW8-gradient.png"
                     layout="fill"
@@ -162,6 +165,10 @@ export default function TicketHome({ users }: Props) {
               </div>
             </div>
 
+            <SectionContainer>
+              <LW8Meetups meetups={meetups} />
+            </SectionContainer>
+
             <div className="relative !w-full max-w-[100vw] min-h-[400px] !px-4 sm:max-w-xl md:max-w-4xl lg:max-w-7xl z-20 flex flex-col justify-around items-center !py-4 md:!py-8 lg:!pb-0 gap-2 md:gap-4 !mx-auto">
               {supabase && (
                 <div className="w-full max-w-[100vw] px-4 flex justify-center py-8 md:py-20">
@@ -191,9 +198,12 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
     .from('lw8_tickets_golden')
     .select('username, golden', { count: 'exact' })
 
+  const { data: meetups } = await supabaseAdmin!.from('lw8_meetups').select('*')
+
   return {
     props: {
       users,
+      meetups,
     },
   }
 }
diff --git a/apps/www/pages/launch-week/tickets/[username].tsx b/apps/www/pages/launch-week/tickets/[username].tsx
index 37808e679e4..0aa62979f24 100644
--- a/apps/www/pages/launch-week/tickets/[username].tsx
+++ b/apps/www/pages/launch-week/tickets/[username].tsx
@@ -114,7 +114,7 @@ export default function UsernamePage({ user, users, ogImageUrl }: Props) {
                     )}
                   </div>
                 </SectionContainer>
-                <div className="absolute w-full aspect-[1/1] md:aspect-[1.5/1] lg:aspect-[2.5/1] inset-0 z-0">
+                <div className="absolute w-full aspect-[1/1] md:aspect-[1.5/1] lg:aspect-[2.5/1] inset-0 z-0 pointer-events-none">
                   <Image
                     src="/images/launchweek/8/LW8-gradient.png"
                     layout="fill"
diff --git a/apps/www/pages/launch-week/tickets/index.tsx b/apps/www/pages/launch-week/tickets/index.tsx
index 6feffbfbc68..69c57824d72 100644
--- a/apps/www/pages/launch-week/tickets/index.tsx
+++ b/apps/www/pages/launch-week/tickets/index.tsx
@@ -154,7 +154,7 @@ export default function TicketsPage({ users }: Props) {
               />
             </div>
           </SectionContainer>
-          <div className="absolute w-full aspect-[1/1] md:aspect-[1.5/1] lg:aspect-[2.5/1] inset-0 z-0">
+          <div className="absolute w-full aspect-[1/1] md:aspect-[1.5/1] lg:aspect-[2.5/1] inset-0 z-0 pointer-events-none">
             <Image
               src="/images/launchweek/8/LW8-gradient.png"
               layout="fill"

From 05d8c4d6d802ff304410cad16ebbb4d975ba51e1 Mon Sep 17 00:00:00 2001
From: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Date: Wed, 2 Aug 2023 08:55:35 +0200
Subject: [PATCH 44/73] lw8: limit stars in constellation and cleanup console
 logs

---
 apps/www/components/LaunchWeek/8/LW8Meetups.tsx | 8 +-------
 apps/www/pages/launch-week/index.tsx            | 5 +++--
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/apps/www/components/LaunchWeek/8/LW8Meetups.tsx b/apps/www/components/LaunchWeek/8/LW8Meetups.tsx
index dbcce1ec01c..be2913f2540 100644
--- a/apps/www/components/LaunchWeek/8/LW8Meetups.tsx
+++ b/apps/www/components/LaunchWeek/8/LW8Meetups.tsx
@@ -32,9 +32,7 @@ const LW8Meetups = ({ meetups }: { meetups?: Meetup[] }) => {
             table: 'lw8_meetups',
           },
           async () => {
-            const { data: newMeets, error } = await supabase.from('lw8_meetups').select('*')
-            console.log('newMeets error', error)
-            console.log('newMeets', newMeets)
+            const { data: newMeets } = await supabase.from('lw8_meetups').select('*')
             setMeets(newMeets)
           }
         )
@@ -48,10 +46,6 @@ const LW8Meetups = ({ meetups }: { meetups?: Meetup[] }) => {
     }
   }, [])
 
-  useEffect(() => {
-    console.log('meetups', meets)
-  }, [meets])
-
   return (
     <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-8">
       <div className="col-span-1 lg:col-span-4 flex flex-col justify-center">
diff --git a/apps/www/pages/launch-week/index.tsx b/apps/www/pages/launch-week/index.tsx
index 4b41360d683..ba868c312e2 100644
--- a/apps/www/pages/launch-week/index.tsx
+++ b/apps/www/pages/launch-week/index.tsx
@@ -192,11 +192,12 @@ export default function TicketHome({ users, meetups }: Props) {
   )
 }
 
-export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
+export const getServerSideProps: GetServerSideProps = async () => {
   // fetch users for the TicketBrickWall
   const { data: users } = await supabaseAdmin!
     .from('lw8_tickets_golden')
-    .select('username, golden', { count: 'exact' })
+    .select('username, golden')
+    .limit(1000)
 
   const { data: meetups } = await supabaseAdmin!.from('lw8_meetups').select('*')
 

From e9b7882f410b3416b029983ff645fce08c040a64 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 2 Aug 2023 16:19:18 +0800
Subject: [PATCH 45/73] Remove usage of env var in getReturnToPath, default
 fallback to /projects

---
 studio/lib/gotrue.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/studio/lib/gotrue.ts b/studio/lib/gotrue.ts
index d83f9e902c9..9a285edf300 100644
--- a/studio/lib/gotrue.ts
+++ b/studio/lib/gotrue.ts
@@ -1,6 +1,5 @@
 import { User } from '@supabase/gotrue-js'
 import { gotrueClient } from 'common'
-import { DEFAULT_HOME, IS_PLATFORM } from './constants'
 export { STORAGE_KEY } from 'common'
 
 export const auth = gotrueClient
@@ -37,7 +36,7 @@ export const getIdentity = (gotrueUser: User) => {
 
 // NOTE: do not use any imports in this function as it is used standalone in the documents head
 // [Joshen] Potentially can remove after full move over to /dashboard
-export const getReturnToPath = (fallback = DEFAULT_HOME) => {
+export const getReturnToPath = (fallback = '/projects') => {
   const searchParams = new URLSearchParams(location.search)
 
   // [Joshen] Remove base path value ("/dashboard") from returnTo

From 761cbee5408b2ac30046d0fcccce28a3b98b16b6 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 2 Aug 2023 16:41:02 +0800
Subject: [PATCH 46/73] convert retrieving database size to RQ on
 reports/database

---
 studio/data/database/database-size-query.ts   | 36 ++++++++++++++++++
 .../pages/project/[ref]/reports/database.tsx  | 37 ++++++-------------
 2 files changed, 47 insertions(+), 26 deletions(-)
 create mode 100644 studio/data/database/database-size-query.ts

diff --git a/studio/data/database/database-size-query.ts b/studio/data/database/database-size-query.ts
new file mode 100644
index 00000000000..3676d47365d
--- /dev/null
+++ b/studio/data/database/database-size-query.ts
@@ -0,0 +1,36 @@
+import { UseQueryOptions } from '@tanstack/react-query'
+import { ExecuteSqlData, useExecuteSqlQuery } from '../sql/execute-sql-query'
+
+export const getDatabaseSizeQuery = () => {
+  const sql = /* SQL */ `
+select sum(pg_database_size(pg_database.datname))::bigint as db_size from pg_database;
+`.trim()
+
+  return sql
+}
+
+export type DatabaseSizeVariables = {
+  projectRef?: string
+  connectionString?: string
+}
+
+export type DatabaseSizeData = { result: { db_size: number }[] }
+export type DatabaseSizeError = unknown
+
+export const useDatabaseSizeQuery = <TData extends DatabaseSizeData = DatabaseSizeData>(
+  { projectRef, connectionString }: DatabaseSizeVariables,
+  options: UseQueryOptions<ExecuteSqlData, DatabaseSizeError, TData> = {}
+) => {
+  return useExecuteSqlQuery(
+    {
+      projectRef,
+      connectionString,
+      sql: getDatabaseSizeQuery(),
+      queryKey: ['database-size'],
+    },
+    {
+      ...options,
+      staleTime: 1000 * 60, // default good for a minute
+    }
+  )
+}
diff --git a/studio/pages/project/[ref]/reports/database.tsx b/studio/pages/project/[ref]/reports/database.tsx
index 03e276c2b09..49367c6f4e5 100644
--- a/studio/pages/project/[ref]/reports/database.tsx
+++ b/studio/pages/project/[ref]/reports/database.tsx
@@ -1,9 +1,8 @@
 import dayjs from 'dayjs'
 import { observer } from 'mobx-react-lite'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 
 import { useParams } from 'common/hooks'
-import { useStore } from 'hooks'
 import { TIME_PERIODS_INFRA, USAGE_APPROACHING_THRESHOLD } from 'lib/constants'
 import { formatBytes } from 'lib/helpers'
 import { NextPageWithLayout } from 'types'
@@ -15,8 +14,9 @@ import ChartHandler from 'components/to-be-cleaned/Charts/ChartHandler'
 import DateRangePicker from 'components/to-be-cleaned/DateRangePicker'
 import Panel from 'components/ui/Panel'
 import SparkBar from 'components/ui/SparkBar'
-import { useProjectUsageQuery } from 'data/usage/project-usage-query'
+import { useDatabaseSizeQuery } from 'data/database/database-size-query'
 import { useProjectSubscriptionV2Query } from 'data/subscriptions/project-subscription-v2-query'
+import { useProjectUsageQuery } from 'data/usage/project-usage-query'
 
 const DatabaseReport: NextPageWithLayout = () => {
   return (
@@ -35,36 +35,21 @@ DatabaseReport.getLayout = (page) => <ReportsLayout title="Database">{page}</Rep
 export default DatabaseReport
 
 const DatabaseUsage = observer(() => {
-  const { meta, ui } = useStore()
-  const { project } = useProjectContext()
-  const [databaseSize, setDatabaseSize] = useState<any>(0)
-  const [dateRange, setDateRange] = useState<any>(undefined)
-
   const { ref: projectRef } = useParams()
+  const { project } = useProjectContext()
   const { data: usage } = useProjectUsageQuery({ projectRef })
   const { data: subscription } = useProjectSubscriptionV2Query({ projectRef })
 
+  const [dateRange, setDateRange] = useState<any>(undefined)
+
   const databaseSizeLimit = usage?.db_size?.limit ?? 0
   const databaseEgressLimit = usage?.db_egress?.limit ?? 0
 
-  useEffect(() => {
-    let cancel = false
-    const getDatabaseSize = async () => {
-      const res = await meta.query(
-        'select sum(pg_database_size(pg_database.datname))::bigint as db_size from pg_database;'
-      )
-      if (!res.error && !cancel) {
-        setDatabaseSize(res[0].db_size)
-      } else {
-        ui.setNotification({ category: 'error', message: 'Failed to retrieve database size' })
-      }
-    }
-    getDatabaseSize()
-
-    return () => {
-      cancel = true
-    }
-  }, [])
+  const { data } = useDatabaseSizeQuery({
+    projectRef: project?.ref,
+    connectionString: project?.connectionString,
+  })
+  const databaseSize = data?.result[0].db_size ?? 0
 
   const databaseSizeUsageRatio = databaseSize / databaseSizeLimit
   const sizeIsApproaching = databaseSizeUsageRatio >= USAGE_APPROACHING_THRESHOLD

From bac2a4b8af858c194e0eb68abd4a192b4ee27fe6 Mon Sep 17 00:00:00 2001
From: Joel Lee <lee.yi.jie.joel@gmail.com>
Date: Wed, 2 Aug 2023 10:42:54 +0200
Subject: [PATCH 47/73] chore: clarify use of whatsapp otp with twilio verify

---
 apps/docs/pages/guides/auth/phone-login/twilio.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/pages/guides/auth/phone-login/twilio.mdx b/apps/docs/pages/guides/auth/phone-login/twilio.mdx
index 60277debe66..0041b693113 100644
--- a/apps/docs/pages/guides/auth/phone-login/twilio.mdx
+++ b/apps/docs/pages/guides/auth/phone-login/twilio.mdx
@@ -329,7 +329,7 @@ In some cases, you may wish to use WhatsApp as a delivery channel instead. Here
 - You wish for a secure channel
 - Your users mostly use WhatsApp as a messaging platform
 
-To make use of WhatsApp OTP, please complete the following steps:
+Whatsapp OTPs can be used with Twilio Verify without additional configuration. To make use of WhatsApp OTP with Twilio Programmable Messaging, please complete the following steps:
 
 - Go through the [Twilio self sign up guide for WhatsApp](https://www.twilio.com/docs/whatsapp/self-sign-up)
 - Submit a template via the [Twilio Guide For Submitting WhatsApp templates](https://www.twilio.com/docs/whatsapp/tutorial/send-whatsapp-notification-messages-templates#creating-message-templates-and-submitting-them-for-approval)

From efb36a3d39cc4d2fd9b8674f1046f4a685f5e82c Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 2 Aug 2023 16:43:58 +0800
Subject: [PATCH 48/73] Fix invalid href error for org settings new nav

---
 .../layouts/SettingsLayout/OrganizationSettingsMenu.tsx       | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/studio/components/layouts/SettingsLayout/OrganizationSettingsMenu.tsx b/studio/components/layouts/SettingsLayout/OrganizationSettingsMenu.tsx
index ee1ff6fe3d7..bf8a585a2e6 100644
--- a/studio/components/layouts/SettingsLayout/OrganizationSettingsMenu.tsx
+++ b/studio/components/layouts/SettingsLayout/OrganizationSettingsMenu.tsx
@@ -28,7 +28,9 @@ const OrganizationSettingsMenu = () => {
           <SettingsMenuItem
             key={link.label}
             label={link.label}
-            href={link.pathname.replace('[slug]', organization?.slug ?? '')}
+            href={
+              organization !== undefined ? link.pathname.replace('[slug]', organization.slug) : '/'
+            }
             isActive={link.pathname === router.pathname}
           />
         ))}

From 3e2d22ea36edcb9f6b080345839108bfda769a45 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 2 Aug 2023 16:51:47 +0800
Subject: [PATCH 49/73] Fix test

---
 studio/tests/unit/get-return-to-path.test.ts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/studio/tests/unit/get-return-to-path.test.ts b/studio/tests/unit/get-return-to-path.test.ts
index 5b11a40ae13..f7951444c17 100644
--- a/studio/tests/unit/get-return-to-path.test.ts
+++ b/studio/tests/unit/get-return-to-path.test.ts
@@ -1,9 +1,8 @@
 import { getReturnToPath } from 'lib/gotrue'
-import { DEFAULT_HOME } from 'lib/constants'
 
 describe(`getReturnToPath`, () => {
   it(`returns to /projects when no fallback is provided`, () => {
-    expect(getReturnToPath()).toBe(DEFAULT_HOME)
+    expect(getReturnToPath()).toBe('/projects')
   })
 
   it(`returns to /custom when fallback is provided`, () => {
@@ -34,7 +33,7 @@ describe(`getReturnToPath`, () => {
     // @ts-ignore
     window.location = { search: `?returnTo=https://google.com` }
 
-    expect(getReturnToPath()).toBe(DEFAULT_HOME)
+    expect(getReturnToPath()).toBe('/projects')
   })
 
   it(`does not allow XSS`, () => {
@@ -43,7 +42,7 @@ describe(`getReturnToPath`, () => {
     // @ts-ignore
     window.location = { search: `?returnTo=javascript:alert(1)` }
 
-    expect(getReturnToPath()).toBe(DEFAULT_HOME)
+    expect(getReturnToPath()).toBe('/projects')
   })
 
   it(`does not allow XSS with encoded characters`, () => {
@@ -52,6 +51,6 @@ describe(`getReturnToPath`, () => {
     // @ts-ignore
     window.location = { search: `?returnTo=javascript%3Aalert%281%29` }
 
-    expect(getReturnToPath()).toBe(DEFAULT_HOME)
+    expect(getReturnToPath()).toBe('/projects')
   })
 })

From 11227c3a967a9a02f4351bdbfe72c48236e17715 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 2 Aug 2023 16:58:20 +0800
Subject: [PATCH 50/73] small style fix

---
 studio/components/ui/PasswordStrengthBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/studio/components/ui/PasswordStrengthBar.tsx b/studio/components/ui/PasswordStrengthBar.tsx
index 8a82411b562..38ba5a101fd 100644
--- a/studio/components/ui/PasswordStrengthBar.tsx
+++ b/studio/components/ui/PasswordStrengthBar.tsx
@@ -39,7 +39,7 @@ const PasswordStrengthBar = ({
           ? passwordStrengthMessage
           : 'This is the password to your postgres database, so it must be strong and hard to guess.'}{' '}
         <span
-          className="text-brand-300 underline hover:text-brand transition cursor-pointer"
+          className="text-brand opacity-50 underline hover:opacity-100 transition cursor-pointer"
           onClick={generateStrongPassword}
         >
           Generate a password

From 983d50e7460eccd5c67e31741e51f0afe5aed413 Mon Sep 17 00:00:00 2001
From: Joel Lee <lee.yi.jie.joel@gmail.com>
Date: Wed, 2 Aug 2023 11:43:53 +0200
Subject: [PATCH 51/73] Update
 apps/docs/pages/guides/auth/phone-login/twilio.mdx

Co-authored-by: Stojan Dimitrovski <sdimitrovski@gmail.com>
---
 apps/docs/pages/guides/auth/phone-login/twilio.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/pages/guides/auth/phone-login/twilio.mdx b/apps/docs/pages/guides/auth/phone-login/twilio.mdx
index 0041b693113..01b16e358f9 100644
--- a/apps/docs/pages/guides/auth/phone-login/twilio.mdx
+++ b/apps/docs/pages/guides/auth/phone-login/twilio.mdx
@@ -329,7 +329,7 @@ In some cases, you may wish to use WhatsApp as a delivery channel instead. Here
 - You wish for a secure channel
 - Your users mostly use WhatsApp as a messaging platform
 
-Whatsapp OTPs can be used with Twilio Verify without additional configuration. To make use of WhatsApp OTP with Twilio Programmable Messaging, please complete the following steps:
+WhatsApp OTPs can be used with Twilio Verify without additional configuration. To make use of WhatsApp OTP with Twilio Programmable Messaging, please complete the following steps:
 
 - Go through the [Twilio self sign up guide for WhatsApp](https://www.twilio.com/docs/whatsapp/self-sign-up)
 - Submit a template via the [Twilio Guide For Submitting WhatsApp templates](https://www.twilio.com/docs/whatsapp/tutorial/send-whatsapp-notification-messages-templates#creating-message-templates-and-submitting-them-for-approval)

From d49236d756bdcbe5559f18db288bc78a2c1f3ce3 Mon Sep 17 00:00:00 2001
From: Copple <10214025+kiwicopple@users.noreply.github.com>
Date: Wed, 2 Aug 2023 03:29:10 -0700
Subject: [PATCH 52/73] chore: update image versions for
 docker/docker-compose.yml

---
 docker/docker-compose.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
index 432c5409ee5..153418c7ab4 100644
--- a/docker/docker-compose.yml
+++ b/docker/docker-compose.yml
@@ -61,7 +61,7 @@ services:
 
   auth:
     container_name: supabase-auth
-    image: supabase/gotrue:v2.62.1
+    image: supabase/gotrue:v2.82.4
     depends_on:
       db:
         # Disable this if you are using an external Postgres database
@@ -247,7 +247,7 @@ services:
 
   functions:
     container_name: supabase-edge-functions
-    image: supabase/edge-runtime:v1.6.6
+    image: supabase/edge-runtime:v1.8.1
     restart: unless-stopped
     environment:
       JWT_SECRET: ${JWT_SECRET}
@@ -267,7 +267,7 @@ services:
   # Comment out everything below this point if you are using an external Postgres database
   db:
     container_name: supabase-db
-    image: supabase/postgres:15.1.0.90
+    image: supabase/postgres:15.1.0.103
     healthcheck:
       test: pg_isready -U postgres -h localhost
       interval: 5s

From 47d99f4f119c000c4ac36fed3f21fdccea6dc8da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramiro=20Nu=C3=B1ez=20Dosio?= <ramiro@supabase.io>
Date: Wed, 2 Aug 2023 12:07:33 +0100
Subject: [PATCH 53/73] New blog: Supabase Beta July 2023

Added new Beta Update blog post.
---
 .../_blog/2023-08-01-beta-update-july-2023.md | 102 ++++++++++++++++++
 1 file changed, 102 insertions(+)
 create mode 100644 apps/www/_blog/2023-08-01-beta-update-july-2023.md

diff --git a/apps/www/_blog/2023-08-01-beta-update-july-2023.md b/apps/www/_blog/2023-08-01-beta-update-july-2023.md
new file mode 100644
index 00000000000..3910f889d9b
--- /dev/null
+++ b/apps/www/_blog/2023-08-01-beta-update-july-2023.md
@@ -0,0 +1,102 @@
+x---
+title: Supabase Beta July 2023
+description: WIP
+author: ant_wilson
+image: /storage/v1/object/public/images/marketing-emails/beta-update-july.png
+thumb: /storage/v1/object/public/images/marketing-emails/beta-update-july.png
+tags:
+  - release-notes
+date: '2023-08-02'
+toc_depth: 3
+---
+
+Next Monday is Launch Week 🎱, where we’ll be announcing a tonne of surprises. In the meantime, here’s a summary of everything we shipped in July. Read on!
+
+## Supabase Launch Week 8
+
+!(Supabase Launch Week 8)[https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/launch-week.png]
+
+Launch Week 8 starts next week. We’ll be announcing one new major feature every day for an entire week (with a few bonus surprises along the way). Get your ticket and tune in on Monday the 7th.
+
+[Get your ticket](https://supabase.com/launch-week)
+
+## New Android Kotlin Library
+
+!(New Android Kotlin Library)[https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/android-kotlin.png?t=2023-08-02T11%3A05%3A46.805Z]
+
+Are you a mobile dev? We now have client libraries for Android. This is thanks to one of our community members - [@TheRealJanGER](https://twitter.com/TheRealJanGER). Try it out, and if you want to help us maintain the library let us know.
+
+[Quickstart](https://supabase.com/docs/guides/getting-started/quickstarts/kotlin)
+
+[Tutorial](https://supabase.com/docs/guides/getting-started/tutorials/with-kotlin)
+
+## pgvector 0.4.0 performance
+
+!(pgvector 0.4.0 performance)[https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/pgvector.png]
+
+There's been a lot of talk about pgvector performance, so we pushed it to the limits to figure out its strengths and limitations. The good news is that work has already [started](https://github.com/pgvector/pgvector/tree/hnsw) on HNSW, and isn’t far away.
+
+[Read the benchmark](https://supabase.com/blog/pgvector-performance)
+
+## Quick product announcements
+
+- [**Postgres Tooling**] pgsodium 3.1.8 released
+- [**Postgres Tooling**] PostgREST 11.1 is now live. [Blog post](https://supabase.com/blog/postgrest-11-1-release)
+- [**Auth**] You can now use Resend as a custom SMTP provider. [Doc](https://www.notion.so/Clicking-on-https-supabase-com-docs-reference-dart-functions-invoke-redirects-to-https-supabase--fb705ffc7cbb41fd98b31ab9c8772019?pvs=21)
+
+## Egghead course: Twitter Clone with the Next.js App Router
+
+![Egghead course: Twitter Clone with the Next.js App Router](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/egghead-course.png?t=2023-08-02T10%3A55%3A17.908Z)
+
+Should we rebrand to X Clone? Next.js App router is ushering in the next era of web development. What a best way to learn to navigate it than by building a full-stack app?
+
+[Course](https://egghead.io/courses/build-a-twitter-clone-with-the-next-js-app-router-and-supabase-19bebadb)
+
+## Twitter Space: Launch Week 8 - Kickoff 🏈
+
+![Twitter Space](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/twitter-space.png?t=2023-08-02T11%3A05%3A03.838Z)
+
+After Monday's announcement, we are kicking off LW8 with a very cool Twitter Space, featuring the DevRel team and guests. Bring your questions!
+
+10:00 AM PT | 1:00 PM ET | 06:00 PM UK
+
+[Set reminder](https://twitter.com/i/spaces/1DXGyvjkeEeJM)
+
+## Made with Supabase
+
+![Made with Supabase: Snowchat](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/snowchat.png)
+
+[snowChat](https://snowchat.streamlit.app/) | An intuitive and user-friendly application that allows you to interact with your Snowflake data using natural language queries. Built by [Kaarthik Andavar](https://twitter.com/kaarthikcodes) using Python, Streamlit, Open AI, and Supabase Vector.
+
+## Extended Community Highlights
+
+![Community Highlights](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/community-highlights.png)
+
+- Build a Simple Dropbox clone using Deno, DenoKV, Fresh and Supabase. [Video Tutorial](https://www.youtube.com/watch?v=_WerF8YMqks)
+- Safeguarding Data Integrity with pg_safeupdate in PostgreSQL and Supabase. [Blog post](https://www.notion.so/809925346af243b3a4ede8774e71472c?pvs=21)
+- Supabase for C#: Streamlining Backend Development with Database Magic. [Blog post](https://themurph.hashnode.dev/supabase-csharp)
+- Building an MVP app using Supabase. [Blog post](https://www.antstack.com/blog/building-an-mvp-app-using-supabase/)
+- Fortify Your Application With Supabase: Exploring Fine-Grained Control with Row-Level Security and OAuth Sign-in. [Article](https://techconative.com/blog/supabase-rls-security-oauth-authentication/)
+- Using Supabase authentication in NestJs. [Tutorial](https://blog.iamstarcode.com/using-supabase-authentication-in-nestjs)
+
+## Supabase in Times Square
+
+![Supabase in Times Square](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/times-sq.png?t=2023-08-02T11%3A04%3A14.458Z)
+
+The Redpoint team put together InfraRed 100, a report that recognizes 100 transformative companies in cloud infrastructure. We are honoured to be included with so many amazing companies we admire 🙇🏻‍♂️. They even featured us on a billboard in Times Square to celebrate.
+
+[Read the full report](https://www.redpoint.com/infrared/100/)
+
+## We’re Hiring
+
+- [Support Engineer (APAC)](https://boards.greenhouse.io/supabase/jobs/4934378004)
+- [FullStack Engineer Billing](https://www.notion.so/Beta-Update-July-Monday-31st-10386eba40934ea597ee5e5b1b81574e?pvs=21)
+
+## ⚠️ Baking hot meme zone ⚠️
+
+If you made it this far in the email you deserve a devilish treat.
+
+NPCs represent…
+
+![July's favorite meme](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/supabase-meme.png)
+

From c0981e232dab1e88ddfb14019b81a653317f55ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramiro=20Nu=C3=B1ez=20Dosio?= <ramiro@supabase.io>
Date: Wed, 2 Aug 2023 12:09:01 +0100
Subject: [PATCH 54/73] Fix and added description.

---
 apps/www/_blog/2023-08-01-beta-update-july-2023.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/www/_blog/2023-08-01-beta-update-july-2023.md b/apps/www/_blog/2023-08-01-beta-update-july-2023.md
index 3910f889d9b..f105098da83 100644
--- a/apps/www/_blog/2023-08-01-beta-update-july-2023.md
+++ b/apps/www/_blog/2023-08-01-beta-update-july-2023.md
@@ -1,6 +1,6 @@
-x---
+---
 title: Supabase Beta July 2023
-description: WIP
+description: Launch Week 8 is coming, but we still shipped some goodies during July!
 author: ant_wilson
 image: /storage/v1/object/public/images/marketing-emails/beta-update-july.png
 thumb: /storage/v1/object/public/images/marketing-emails/beta-update-july.png

From 1f1ff8444715a5cb5604bdc850f2f8fd0f320456 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramiro=20Nu=C3=B1ez=20Dosio?= <ramiro@supabase.io>
Date: Wed, 2 Aug 2023 12:37:28 +0100
Subject: [PATCH 55/73] Added more content.

---
 apps/www/_blog/2023-08-01-beta-update-july-2023.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/apps/www/_blog/2023-08-01-beta-update-july-2023.md b/apps/www/_blog/2023-08-01-beta-update-july-2023.md
index f105098da83..e242e7c5df1 100644
--- a/apps/www/_blog/2023-08-01-beta-update-july-2023.md
+++ b/apps/www/_blog/2023-08-01-beta-update-july-2023.md
@@ -78,6 +78,9 @@ After Monday's announcement, we are kicking off LW8 with a very cool Twitter Spa
 - Building an MVP app using Supabase. [Blog post](https://www.antstack.com/blog/building-an-mvp-app-using-supabase/)
 - Fortify Your Application With Supabase: Exploring Fine-Grained Control with Row-Level Security and OAuth Sign-in. [Article](https://techconative.com/blog/supabase-rls-security-oauth-authentication/)
 - Using Supabase authentication in NestJs. [Tutorial](https://blog.iamstarcode.com/using-supabase-authentication-in-nestjs)
+- React Native file upload with Supabase Storage. [Tutorial](https://supabase.com/blog/react-native-storage) | [Video](https://www.youtube.com/watch?v=am6w5zEDk_g)
+- Safeguarding Data Integrity with pg_safeupdate in PostgreSQL and Supabase. [Blog Post](https://blog.mansueli.com/safeguarding-data-integrity-with-pg-safeupdate-in-postgresql-and-supabase)
+- Supabase almost SHUT ME DOWN. [Video](https://www.youtube.com/watch?v=2WHTZa4ENfc)
 
 ## Supabase in Times Square
 

From 5398451f5b151116d01a18462babf52a80f98a55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramiro=20Nu=C3=B1ez=20Dosio?= <ramiro@supabase.io>
Date: Wed, 2 Aug 2023 12:44:41 +0100
Subject: [PATCH 56/73] Added og image.

---
 ...3.md => 2023-08-02-beta-update-july-2023.md} |   4 ++--
 .../july-2023-beta-update.png                   | Bin 0 -> 43498 bytes
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename apps/www/_blog/{2023-08-01-beta-update-july-2023.md => 2023-08-02-beta-update-july-2023.md} (97%)
 create mode 100644 apps/www/public/images/blog/2023-08-02-july-2023-beta-update/july-2023-beta-update.png

diff --git a/apps/www/_blog/2023-08-01-beta-update-july-2023.md b/apps/www/_blog/2023-08-02-beta-update-july-2023.md
similarity index 97%
rename from apps/www/_blog/2023-08-01-beta-update-july-2023.md
rename to apps/www/_blog/2023-08-02-beta-update-july-2023.md
index e242e7c5df1..b815e9f1fac 100644
--- a/apps/www/_blog/2023-08-01-beta-update-july-2023.md
+++ b/apps/www/_blog/2023-08-02-beta-update-july-2023.md
@@ -2,8 +2,8 @@
 title: Supabase Beta July 2023
 description: Launch Week 8 is coming, but we still shipped some goodies during July!
 author: ant_wilson
-image: /storage/v1/object/public/images/marketing-emails/beta-update-july.png
-thumb: /storage/v1/object/public/images/marketing-emails/beta-update-july.png
+image: 2023-08-02-july-2023-beta-update/july-2023-beta-update.png
+thumb: 2023-08-02-july-2023-beta-update/july-2023-beta-update.png
 tags:
   - release-notes
 date: '2023-08-02'
diff --git a/apps/www/public/images/blog/2023-08-02-july-2023-beta-update/july-2023-beta-update.png b/apps/www/public/images/blog/2023-08-02-july-2023-beta-update/july-2023-beta-update.png
new file mode 100644
index 0000000000000000000000000000000000000000..1b75bf3f00392019136b0a0606599efa17512221
GIT binary patch
literal 43498
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

literal 0
HcmV?d00001


From 5bd3287721a18e20f321b59968bab437be853720 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramiro=20Nu=C3=B1ez=20Dosio?= <ramiro@supabase.io>
Date: Wed, 2 Aug 2023 13:15:01 +0100
Subject: [PATCH 57/73] Fix.

---
 apps/www/_blog/2023-08-02-beta-update-july-2023.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/www/_blog/2023-08-02-beta-update-july-2023.md b/apps/www/_blog/2023-08-02-beta-update-july-2023.md
index b815e9f1fac..7d07c73eeb2 100644
--- a/apps/www/_blog/2023-08-02-beta-update-july-2023.md
+++ b/apps/www/_blog/2023-08-02-beta-update-july-2023.md
@@ -1,6 +1,6 @@
 ---
 title: Supabase Beta July 2023
-description: Launch Week 8 is coming, but we still shipped some goodies during July!
+description: Launch Week 8 is coming - but we still shipped some goodies during July
 author: ant_wilson
 image: 2023-08-02-july-2023-beta-update/july-2023-beta-update.png
 thumb: 2023-08-02-july-2023-beta-update/july-2023-beta-update.png

From 941dcd8260e1b36aea1305aaf82e93c087c16c22 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Wed, 2 Aug 2023 20:37:03 +0800
Subject: [PATCH 58/73] wrong file extension

---
 ...a-update-july-2023.md => 2023-08-02-beta-update-july-2023.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename apps/www/_blog/{2023-08-02-beta-update-july-2023.md => 2023-08-02-beta-update-july-2023.mdx} (100%)

diff --git a/apps/www/_blog/2023-08-02-beta-update-july-2023.md b/apps/www/_blog/2023-08-02-beta-update-july-2023.mdx
similarity index 100%
rename from apps/www/_blog/2023-08-02-beta-update-july-2023.md
rename to apps/www/_blog/2023-08-02-beta-update-july-2023.mdx

From 21a12d4ef6ae8a09774de62f3a7bc967427e2fdd Mon Sep 17 00:00:00 2001
From: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Date: Wed, 2 Aug 2023 14:43:06 +0200
Subject: [PATCH 59/73] Add lw8 intro callouts

---
 .../LaunchWeek/8/LW8CalloutsSection.tsx       |  54 +++
 .../8/Releases/components/index.tsx           | 337 ++++++++++++++++++
 apps/www/pages/launch-week/index.tsx          |   5 +
 3 files changed, 396 insertions(+)
 create mode 100644 apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx
 create mode 100644 apps/www/components/LaunchWeek/8/Releases/components/index.tsx

diff --git a/apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx b/apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx
new file mode 100644
index 00000000000..737d2a14a89
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import SectionContainer from '../../Layouts/SectionContainer'
+import { SmallCard } from '../8/Releases/components'
+import Link from 'next/link'
+import Image from 'next/image'
+
+const LW8CalloutsSection = () => {
+  return (
+    <SectionContainer className="!py-0 w-full !px-0 !max-w-none">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 scroll-mt-[105px]" id="hackathon">
+        <SmallCard className="hover:from-background-surface-300 hover:to-background-surface-300">
+          <Link href="/blog/supabase-lw8-hackathon">
+            <a className="flex flex-row justify-between items-center w-full h-full">
+              <div className="relative flex-shrink flex items-center p-2 w-1/2 md:w-auto">
+                <div className="flex flex-col gap-1 pl-4">
+                  <span className="text-white">Join us daily at Twitter Spaces </span>
+                  <span className="">Next up: Monday – Opening Day</span>
+                </div>
+              </div>
+              <div className="relative flex !aspect-video h-[80px] md:h-[100px] gap-2 z-10 rounded overflow-hidden">
+                <Image
+                  src="/images/launchweek/8/twitter-spaces-preview.png"
+                  layout="fill"
+                  objectFit="cover"
+                />
+              </div>
+            </a>
+          </Link>
+        </SmallCard>
+        <SmallCard className="hover:from-background-surface-300 hover:to-background-surface-300">
+          <Link href="/blog/supabase-lw8-hackathon">
+            <a className="flex flex-row justify-between items-center w-full h-full">
+              <div className="relative h-full flex-shrink flex flex-col md:flex-row md:items-center p-2 w-1/2 md:w-auto gap-1 md:gap-4">
+                <div className="flex flex-col gap-1 pl-4">
+                  <span className="text-white">LW8 Hackathon Aug 4 – Aug 13</span>
+                  <span className="">Read more about rules and prizes on the blog</span>
+                </div>
+              </div>
+              <div className="relative flex !aspect-video h-[80px] md:h-[100px] gap-2 z-10 rounded overflow-hidden">
+                <Image
+                  src="/images/launchweek/8/twitter-spaces-preview.png"
+                  layout="fill"
+                  objectFit="cover"
+                />
+              </div>
+            </a>
+          </Link>
+        </SmallCard>
+      </div>
+    </SectionContainer>
+  )
+}
+
+export default LW8CalloutsSection
diff --git a/apps/www/components/LaunchWeek/8/Releases/components/index.tsx b/apps/www/components/LaunchWeek/8/Releases/components/index.tsx
new file mode 100644
index 00000000000..58a6ab51863
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/Releases/components/index.tsx
@@ -0,0 +1,337 @@
+import { Badge } from 'ui'
+
+import Link from 'next/link'
+import CountdownComponent from '../../Countdown'
+
+export const PencilSvg = () => (
+  <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M3.21792 11.2469L11.8015 2.66333L14.0953 4.95709L5.51167 13.5407M3.21792 11.2469L2.34219 14.4164L5.51167 13.5407M3.21792 11.2469L5.51167 13.5407"
+      stroke="#8F8F8F"
+      strokeMiterlimit="10"
+      strokeLinejoin="bevel"
+    />
+  </svg>
+)
+export const DocsSvg = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M4.96289 9.48618H10.9629M4.96289 7.48618H10.9629M4.96289 11.4862H8.96289M3 2.00034V13.9998H12.9996V5.60113L9.38156 2.00034H3ZM12.9644 5.58432L9.38004 2L9.38004 5.58432L12.9644 5.58432Z"
+      stroke="#8F8F8F"
+      strokeMiterlimit="10"
+      strokeLinejoin="bevel"
+    />
+  </svg>
+)
+export const PlaySvg = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M13.4287 8L8.74762 10.7026L4.06653 13.4053L4.06653 8L4.06653 2.59474L8.74762 5.29737L13.4287 8Z"
+      stroke="#8F8F8F"
+      strokeMiterlimit="10"
+      strokeLinejoin="bevel"
+    />
+  </svg>
+)
+export const GithubSvg = () => (
+  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.2125 1.75781C4.6765 1.75781 1.8125 4.62181 1.8125 8.15781C1.8125 10.9898 3.6445 13.3818 6.1885 14.2298C6.5085 14.2858 6.6285 14.0938 6.6285 13.9258C6.6285 13.7738 6.6205 13.2698 6.6205 12.7338C5.0125 13.0298 4.5965 12.3418 4.4685 11.9818C4.3965 11.7978 4.0845 11.2298 3.8125 11.0778C3.5885 10.9578 3.2685 10.6618 3.8045 10.6538C4.3085 10.6458 4.6685 11.1178 4.7885 11.3098C5.3645 12.2778 6.2845 12.0058 6.6525 11.8378C6.7085 11.4218 6.8765 11.1418 7.0605 10.9818C5.6365 10.8218 4.1485 10.2698 4.1485 7.82181C4.1485 7.12581 4.3965 6.54981 4.8045 6.10181C4.7405 5.94181 4.5165 5.28581 4.8685 4.40581C4.8685 4.40581 5.4045 4.23781 6.6285 5.06181C7.1405 4.91781 7.6845 4.84581 8.2285 4.84581C8.7725 4.84581 9.3165 4.91781 9.8285 5.06181C11.0525 4.22981 11.5885 4.40581 11.5885 4.40581C11.9405 5.28581 11.7165 5.94181 11.6525 6.10181C12.0605 6.54981 12.3085 7.11781 12.3085 7.82181C12.3085 10.2778 10.8125 10.8218 9.3885 10.9818C9.6205 11.1818 9.8205 11.5658 9.8205 12.1658C9.8205 13.0218 9.8125 13.7098 9.8125 13.9258C9.8125 14.0938 9.9325 14.2938 10.2525 14.2298C11.523 13.8009 12.627 12.9844 13.4092 11.8951C14.1913 10.8059 14.6122 9.49877 14.6125 8.15781C14.6125 4.62181 11.7485 1.75781 8.2125 1.75781Z"
+      fill="#8F8F8F"
+    />
+  </svg>
+)
+export const LinkSvg = () => (
+  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M6.875 4.0013H4.20833C3.47195 4.0013 2.875 4.59826 2.875 5.33464V12.0013C2.875 12.7377 3.47195 13.3346 4.20833 13.3346H10.875C11.6114 13.3346 12.2083 12.7377 12.2083 12.0013V9.33464M9.54167 2.66797H13.5417M13.5417 2.66797V6.66797M13.5417 2.66797L6.875 9.33464"
+      stroke="#8F8F8F"
+      strokeWidth="1"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+export const ArrowTopRightSvg = () => (
+  <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M3.44531 13.846L13.1152 4.17578"
+      stroke="#8F8F8F"
+      strokeMiterlimit="10"
+      strokeLinejoin="bevel"
+    />
+    <path
+      d="M3.44531 4.09375H13.1152V13.7637"
+      stroke="#8F8F8F"
+      strokeMiterlimit="10"
+      strokeLinejoin="bevel"
+    />
+  </svg>
+)
+export const HackernewsSvg = () => (
+  <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.26821 7.87591L9.94194 4.47266H11.8008L8.82871 10.074V13.606H7.16205V10.0213L4.1875 4.47266H6.15549L7.86748 7.9537C7.87321 7.95954 7.87972 7.96606 7.88751 7.97386C7.95585 8.04219 7.98757 8.11202 8.00726 8.16124C8.01322 8.17614 8.01776 8.18804 8.02175 8.19849C8.02548 8.20824 8.02872 8.21672 8.03217 8.22518L8.04751 8.24052C8.11375 8.10585 8.19796 7.98119 8.26821 7.87591Z"
+      fill="#8F8F8F"
+    />
+  </svg>
+)
+
+export const SmallCard = ({ className, children }: { className?: string; children: any }) => (
+  <div
+    className={[
+      'relative p-[1px] bg-gradient-to-b from-[#111718] to-[#1C1C1C60] rounded-2xl overflow-hidden shadow-lg',
+      className,
+    ].join(' ')}
+  >
+    <div
+      className={[
+        'rounded-2xl text-sm text-[#9296AA] p-2 flex flex-row justify-between items-center backdrop-blur-md h-full',
+        'bg-[#030A0C]',
+      ].join(' ')}
+    >
+      {children}
+    </div>
+  </div>
+)
+
+export const StyledArticleBadge = ({
+  className,
+  children,
+}: {
+  className?: string
+  children: any
+}) => (
+  <div
+    className={['relative bg-transparent border border-[#F4FFFA90] rounded-full', className].join(
+      ' '
+    )}
+  >
+    <div className="!bg-transparent rounded-full !py-1 !px-4 w-full inset-[1px] text-sm border-none dark:from-white dark:to-[#6453C5] dark:border-none">
+      <span className="text-sm text-[#F4FFFA80] bg-clip-text bg-gradient-to-r from-[#F4FFFA] to-[#7E7AAD]">
+        {children}
+      </span>
+      <div className="absolute inset-0 w-full h-full bg-[#1C1C1C] rounded-full blur-2xl" />
+    </div>
+  </div>
+)
+
+export const AccordionHeader = ({
+  date,
+  day,
+  title,
+  shipped,
+  publishedAt,
+  shippable = true,
+}: {
+  date: string
+  day: string
+  title: string
+  shipped?: boolean
+  publishedAt: string
+  shippable?: boolean
+}) => {
+  return (
+    <div className="flex flex-1 flex-col sm:flex-row">
+      <div className="flex gap-4 w-full sm:w-auto sm:min-w-[240px] md:min-w-[380px] items-center">
+        <span className="text-scale-900 text-sm">
+          <span className="inline sm:hidden md:inline">{day} </span>
+          {date && (
+            <span>
+              <span className="inline sm:hidden md:inline">・</span> {date}
+            </span>
+          )}
+        </span>
+      </div>
+      {shippable && shipped && (
+        <Badge
+          className={`relative inset-0 !bg-transparent !py-1 !px-4 h-fit backdrop-blur-md ${
+            shipped
+              ? 'bg-gradient-to-br from-[#05090B] to-[#05090B] !border-[#061517]'
+              : 'border-[#FFFFFF20]'
+          }`}
+        >
+          <span className="text-[#A0A0A0] text-sm font-normal bg-clip-text bg-gradient-to-r from-[#F4FFFA] to-[#675FA7]">
+            Shipped
+          </span>
+        </Badge>
+      )}
+      {shipped && <span className="text-scale-1200 text-lg mt-1 sm:mt-0">{title}</span>}
+      {shippable && !shipped && (
+        <span className="text-sm font-normal text-[#A0A0A0] mt-1 sm:mt-0 flex items-center gap-1 md:gap-4">
+          <svg
+            width="17"
+            height="17"
+            viewBox="0 0 17 17"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g opacity="0.5">
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M4.32656 7.58047V5.98047C4.32656 3.77133 6.11742 1.98047 8.32656 1.98047C10.5357 1.98047 12.3266 3.77133 12.3266 5.98047V7.58047C13.2102 7.58047 13.9266 8.29681 13.9266 9.18047V13.1805C13.9266 14.0641 13.2102 14.7805 12.3266 14.7805H4.32656C3.44291 14.7805 2.72656 14.0641 2.72656 13.1805V9.18047C2.72656 8.29681 3.44291 7.58047 4.32656 7.58047ZM10.7266 5.98047V7.58047H5.92656V5.98047C5.92656 4.65499 7.00108 3.58047 8.32656 3.58047C9.65205 3.58047 10.7266 4.65499 10.7266 5.98047Z"
+                fill="#A0A0A0"
+              />
+            </g>
+          </svg>
+
+          <CountdownComponent />
+        </span>
+      )}
+    </div>
+  )
+}
+export const MultistepSectionHeader = ({ title, blog }: any) => {
+  return (
+    <div className="flex flex-1 flex-col sm:flex-row py-8">
+      <div className="flex gap-4 w-full items-center justify-between md:justify-start">
+        {title && <span className="text-scale-1200 text-lg mt-3 sm:mt-0">{title}</span>}
+        {!!blog && (
+          <ChipLink href={blog} className="!w-auto !text-left !justify-between !flex-none">
+            Blog post
+            <div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
+              <PencilSvg />
+            </div>
+          </ChipLink>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export const ChipLink = ({
+  href,
+  uiOnly,
+  className,
+  target,
+  children,
+}: {
+  href?: string
+  className?: string
+  uiOnly?: boolean
+  target?: '_blank' | '_self' | '_parent' | '_top' | 'framename'
+  children: any
+}) =>
+  uiOnly ? (
+    <span
+      className={[
+        'flex flex-auto justify-center sm:justify-between w-full text-center sm:text-left min-h-[43px] sm:w-auto items-center border border-[#232323] bg-gradient-to-r text-white from-[#46444490] to-[#19191980] hover:from-[#4e4e4e90] hover:to-[#19191980] backdrop-blur-xl rounded-full text-sm py-2 px-3 sm:pr-2',
+        className,
+      ].join(' ')}
+    >
+      {children}
+    </span>
+  ) : !!href ? (
+    <Link href={href}>
+      <a
+        target={target ?? '_self'}
+        rel="noopener"
+        className={[
+          'flex flex-auto justify-center sm:justify-between w-full text-center sm:text-left min-h-[43px] sm:w-auto items-center border border-[#232323] bg-gradient-to-r text-white from-[#46444490] to-[#19191980] hover:from-[#4e4e4e90] hover:to-[#19191980] backdrop-blur-xl rounded-full text-sm py-2 px-3 sm:pr-2',
+          className,
+        ].join(' ')}
+      >
+        {children}
+      </a>
+    </Link>
+  ) : null
+
+export const SectionButtons = ({
+  blog,
+  docs,
+  video,
+  github,
+  url,
+  hackernews,
+  mobileGrid,
+}: {
+  blog?: string
+  docs?: string
+  video?: string
+  github?: string
+  url?: string
+  hackernews?: string
+  mobileGrid?: boolean
+}) => {
+  return (
+    <div
+      className={[
+        'flex w-full max-w-full md:w-auto justify-center gap-2 z-10',
+        mobileGrid && 'grid grid-cols-2 gap-2 sm:flex',
+      ].join(' ')}
+    >
+      {!!blog && (
+        <ChipLink href={blog}>
+          Blog post
+          <div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
+            <PencilSvg />
+          </div>
+        </ChipLink>
+      )}
+      {!!docs && (
+        <ChipLink href={docs}>
+          Docs
+          <div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
+            <DocsSvg />
+          </div>
+        </ChipLink>
+      )}
+      {!!video && (
+        <ChipLink href={video} target="_blank">
+          Video
+          <div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
+            <PlaySvg />
+          </div>
+        </ChipLink>
+      )}
+      {!!github && (
+        <ChipLink href={github} target="_blank">
+          Github
+          <div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
+            <GithubSvg />
+          </div>
+        </ChipLink>
+      )}
+      {!!url && (
+        <ChipLink href={url}>
+          Read
+          <div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
+            <LinkSvg />
+          </div>
+        </ChipLink>
+      )}
+      {hackernews && (
+        <ChipLink href={hackernews} target="_blank">
+          Hackernews
+          <div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
+            <HackernewsSvg />
+          </div>
+        </ChipLink>
+      )}
+    </div>
+  )
+}
+
+export const CartTitle = ({ children }: { children: any }) => (
+  <span className="z-0 relative text-[#F4FFFA90] bg-clip-text bg-gradient-to-r from-[#F4FFFA] to-[#675FA7] tracking-[-.5px] text-xl">
+    {children}
+    <div className="absolute -z-10 inset-0 w-full h-full bg-[#1C1C1C90] rounded-full blur-xl" />
+  </span>
+)
+
+export default {
+  AccordionHeader,
+  DocsSvg,
+  PencilSvg,
+  PlaySvg,
+  CartTitle,
+  ChipLink,
+  SectionButtons,
+  SmallCard,
+  StyledArticleBadge,
+}
diff --git a/apps/www/pages/launch-week/index.tsx b/apps/www/pages/launch-week/index.tsx
index ba868c312e2..e9b4930eb22 100644
--- a/apps/www/pages/launch-week/index.tsx
+++ b/apps/www/pages/launch-week/index.tsx
@@ -17,6 +17,7 @@ import { useTheme } from 'common/Providers'
 
 import 'swiper/swiper.min.css'
 import Head from 'next/head'
+import LW8CalloutsSection from '../../components/LaunchWeek/8/LW8CalloutsSection'
 
 const AnimatedParticles = dynamic(
   () => import('~/components/LaunchWeek/8/AnimatedParticles/ParticlesCanvas')
@@ -165,6 +166,10 @@ export default function TicketHome({ users, meetups }: Props) {
               </div>
             </div>
 
+            <SectionContainer className="!pb-0">
+              <LW8CalloutsSection />
+            </SectionContainer>
+
             <SectionContainer>
               <LW8Meetups meetups={meetups} />
             </SectionContainer>

From f73be89f6bbcc7594d155787ab876e7f74571a7b Mon Sep 17 00:00:00 2001
From: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Date: Wed, 2 Aug 2023 14:44:06 +0200
Subject: [PATCH 60/73] renmove extra space

---
 apps/www/_blog/2023-08-02-beta-update-july-2023.mdx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/www/_blog/2023-08-02-beta-update-july-2023.mdx b/apps/www/_blog/2023-08-02-beta-update-july-2023.mdx
index 7d07c73eeb2..b93b6b1cf2f 100644
--- a/apps/www/_blog/2023-08-02-beta-update-july-2023.mdx
+++ b/apps/www/_blog/2023-08-02-beta-update-july-2023.mdx
@@ -102,4 +102,3 @@ If you made it this far in the email you deserve a devilish treat.
 NPCs represent…
 
 ![July's favorite meme](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/supabase-meme.png)
-

From d06614effb46b7fd15de4da41014c57584f2fbe0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramiro=20Nu=C3=B1ez=20Dosio?= <ramiro@supabase.io>
Date: Wed, 2 Aug 2023 13:57:50 +0100
Subject: [PATCH 61/73] Fix images.

---
 apps/www/_blog/2023-08-02-beta-update-july-2023.mdx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/www/_blog/2023-08-02-beta-update-july-2023.mdx b/apps/www/_blog/2023-08-02-beta-update-july-2023.mdx
index b93b6b1cf2f..4f36f6ddf43 100644
--- a/apps/www/_blog/2023-08-02-beta-update-july-2023.mdx
+++ b/apps/www/_blog/2023-08-02-beta-update-july-2023.mdx
@@ -14,7 +14,7 @@ Next Monday is Launch Week 🎱, where we’ll be announcing a tonne of surprise
 
 ## Supabase Launch Week 8
 
-!(Supabase Launch Week 8)[https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/launch-week.png]
+![Supabase Launch Week 8](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/launch-week.png)
 
 Launch Week 8 starts next week. We’ll be announcing one new major feature every day for an entire week (with a few bonus surprises along the way). Get your ticket and tune in on Monday the 7th.
 
@@ -22,7 +22,7 @@ Launch Week 8 starts next week. We’ll be announcing one new major feature ever
 
 ## New Android Kotlin Library
 
-!(New Android Kotlin Library)[https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/android-kotlin.png?t=2023-08-02T11%3A05%3A46.805Z]
+![New Android Kotlin Library](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/android-kotlin.png?t=2023-08-02T11%3A05%3A46.805Z)
 
 Are you a mobile dev? We now have client libraries for Android. This is thanks to one of our community members - [@TheRealJanGER](https://twitter.com/TheRealJanGER). Try it out, and if you want to help us maintain the library let us know.
 
@@ -32,7 +32,7 @@ Are you a mobile dev? We now have client libraries for Android. This is thanks t
 
 ## pgvector 0.4.0 performance
 
-!(pgvector 0.4.0 performance)[https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/pgvector.png]
+![pgvector 0.4.0 performance](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/pgvector.png)
 
 There's been a lot of talk about pgvector performance, so we pushed it to the limits to figure out its strengths and limitations. The good news is that work has already [started](https://github.com/pgvector/pgvector/tree/hnsw) on HNSW, and isn’t far away.
 

From 034c40cc57238d4965bac7d24f717e1e793d4ea8 Mon Sep 17 00:00:00 2001
From: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Date: Wed, 2 Aug 2023 15:08:05 +0200
Subject: [PATCH 62/73] update images

---
 .../LaunchWeek/8/LW8CalloutsSection.tsx       | 16 ++---
 .../components/LaunchWeek/8/LW8Meetups.tsx    |  4 +-
 .../launchweek/8/lw8-hackathon-thumb.svg      | 66 +++++++++++++++++++
 .../launchweek/8/twitter-spaces-thumb.svg     | 13 ++++
 4 files changed, 89 insertions(+), 10 deletions(-)
 create mode 100644 apps/www/public/images/launchweek/8/lw8-hackathon-thumb.svg
 create mode 100644 apps/www/public/images/launchweek/8/twitter-spaces-thumb.svg

diff --git a/apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx b/apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx
index 737d2a14a89..c0dda61b44a 100644
--- a/apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx
+++ b/apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx
@@ -9,10 +9,10 @@ const LW8CalloutsSection = () => {
     <SectionContainer className="!py-0 w-full !px-0 !max-w-none">
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 scroll-mt-[105px]" id="hackathon">
         <SmallCard className="hover:from-background-surface-300 hover:to-background-surface-300">
-          <Link href="/blog/supabase-lw8-hackathon">
-            <a className="flex flex-row justify-between items-center w-full h-full">
-              <div className="relative flex-shrink flex items-center p-2 w-1/2 md:w-auto">
-                <div className="flex flex-col gap-1 pl-4">
+          <Link href="https://twitter.com/i/spaces/1DXGyvjkeEeJM">
+            <a target="_blank" className="flex flex-row justify-between items-center w-full h-full">
+              <div className="relative flex-shrink flex items-center p-2 w-2/3 lg:w-1/2 md:w-auto">
+                <div className="flex flex-col gap-1 sm:pl-4">
                   <span className="text-white">Join us daily at Twitter Spaces </span>
                   <span className="">Next up: Monday – Opening Day</span>
                 </div>
@@ -29,16 +29,16 @@ const LW8CalloutsSection = () => {
         </SmallCard>
         <SmallCard className="hover:from-background-surface-300 hover:to-background-surface-300">
           <Link href="/blog/supabase-lw8-hackathon">
-            <a className="flex flex-row justify-between items-center w-full h-full">
-              <div className="relative h-full flex-shrink flex flex-col md:flex-row md:items-center p-2 w-1/2 md:w-auto gap-1 md:gap-4">
-                <div className="flex flex-col gap-1 pl-4">
+            <a target="_blank" className="flex flex-row justify-between items-center w-full h-full">
+              <div className="relative h-full flex-shrink flex flex-col md:flex-row md:items-center p-2 w-2/3 lg:w-1/2 md:w-auto gap-1 md:gap-4">
+                <div className="flex flex-col gap-1 sm:pl-4">
                   <span className="text-white">LW8 Hackathon Aug 4 – Aug 13</span>
                   <span className="">Read more about rules and prizes on the blog</span>
                 </div>
               </div>
               <div className="relative flex !aspect-video h-[80px] md:h-[100px] gap-2 z-10 rounded overflow-hidden">
                 <Image
-                  src="/images/launchweek/8/twitter-spaces-preview.png"
+                  src="/images/launchweek/8/lw8-hackathon-thumb.svg"
                   layout="fill"
                   objectFit="cover"
                 />
diff --git a/apps/www/components/LaunchWeek/8/LW8Meetups.tsx b/apps/www/components/LaunchWeek/8/LW8Meetups.tsx
index be2913f2540..a654c4f4b11 100644
--- a/apps/www/components/LaunchWeek/8/LW8Meetups.tsx
+++ b/apps/www/components/LaunchWeek/8/LW8Meetups.tsx
@@ -65,8 +65,8 @@ const LW8Meetups = ({ meetups }: { meetups?: Meetup[] }) => {
                   target="_blank"
                   className={[
                     'w-full group py-0 flex items-center gap-2 md:gap-4 text-lg sm:text-2xl lg:text-4xl border-b border-[#111718]',
-                    'hover:text-brand',
-                    isLive ? 'text-scale-1100' : 'text-scale-800',
+                    'hover:text-scale-1200',
+                    isLive ? 'text-scale-1100' : 'text-[#56646B]',
                     !link && 'pointer-events-none',
                   ].join(' ')}
                 >
diff --git a/apps/www/public/images/launchweek/8/lw8-hackathon-thumb.svg b/apps/www/public/images/launchweek/8/lw8-hackathon-thumb.svg
new file mode 100644
index 00000000000..7914a72a43a
--- /dev/null
+++ b/apps/www/public/images/launchweek/8/lw8-hackathon-thumb.svg
@@ -0,0 +1,66 @@
+<svg width="132" height="76" viewBox="0 0 132 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2932_199528)">
+<path d="M135.023 -31.2891H-2.9375V106.672H135.023V-31.2891Z" fill="#020405" stroke="white"/>
+<g opacity="0.3" filter="url(#filter0_f_2932_199528)">
+<path d="M-12.1957 67.4624C2.39617 70.8852 14.3008 38.7141 18.4292 22.2007C27.8868 -9.77554 76.5265 2.15942 62.3399 -20.5841C48.1534 -43.3275 25.1847 -21.2597 -12.1957 -22.1604C-49.5761 -23.0611 -22.3289 12.743 -22.5541 37.5131C-22.7793 62.2832 -65.7892 62.7336 -63.7626 77.3705C-61.736 92.0074 -30.4355 63.184 -12.1957 67.4624Z" fill="#6F13A4"/>
+</g>
+<circle cx="84.4815" cy="49.1861" r="0.417039" transform="rotate(4.39775 84.4815 49.1861)" fill="#7E7E7E"/>
+<circle cx="70.6654" cy="50.5636" r="0.417039" transform="rotate(108.965 70.6654 50.5636)" fill="#7E7E7E"/>
+<circle cx="60.431" cy="61.7823" r="0.417039" transform="rotate(108.965 60.431 61.7823)" fill="#7E7E7E"/>
+<circle cx="52.849" cy="74.38" r="0.417039" transform="rotate(108.965 52.849 74.38)" fill="#7E7E7E"/>
+<circle cx="52.2982" cy="27.4893" r="0.417039" transform="rotate(108.965 52.2982 27.4893)" fill="#7E7E7E"/>
+<circle cx="109.712" cy="62.0753" r="0.417039" transform="rotate(108.965 109.712 62.0753)" fill="#7E7E7E"/>
+<circle cx="81.169" cy="47.1236" r="0.417039" transform="rotate(4.39775 81.169 47.1236)" fill="#7E7E7E"/>
+<circle cx="120.923" cy="24.7525" r="0.417039" transform="rotate(4.39775 120.923 24.7525)" fill="#7E7E7E"/>
+<circle cx="81.1416" cy="48.4634" r="0.417039" transform="rotate(4.39775 81.1416 48.4634)" fill="#7E7E7E"/>
+<circle cx="77.4659" cy="4.05716" r="0.417039" transform="rotate(4.39775 77.4659 4.05716)" fill="#7E7E7E"/>
+<circle cx="77.4971" cy="10.3579" r="0.417039" transform="rotate(4.39775 77.4971 10.3579)" fill="#7E7E7E"/>
+<circle cx="82.6182" cy="8.56888" r="0.417039" transform="rotate(4.39775 82.6182 8.56888)" fill="#7E7E7E"/>
+<circle cx="74.1849" cy="48.2198" r="0.417039" transform="rotate(108.965 74.1849 48.2198)" fill="#7E7E7E"/>
+<circle cx="112.642" cy="50.5574" r="0.417039" transform="rotate(169.398 112.642 50.5574)" fill="#7E7E7E"/>
+<circle cx="120.539" cy="29.4917" r="0.417039" transform="rotate(-86.0346 120.539 29.4917)" fill="#7E7E7E"/>
+<circle cx="124.281" cy="29.019" r="0.417039" transform="rotate(-86.0346 124.281 29.019)" fill="#7E7E7E"/>
+<circle cx="126.234" cy="20.0425" r="0.417039" transform="rotate(-86.0346 126.234 20.0425)" fill="#7E7E7E"/>
+<circle cx="62.8511" cy="25.3355" r="0.417039" transform="rotate(-86.0346 62.8511 25.3355)" fill="#7E7E7E"/>
+<circle cx="130.66" cy="35.4136" r="0.417039" transform="rotate(-86.0346 130.66 35.4136)" fill="#7E7E7E"/>
+<circle cx="126.968" cy="8.71436" r="0.417039" transform="rotate(-86.0346 126.968 8.71436)" fill="#7E7E7E"/>
+<circle cx="74.273" cy="11.9644" r="0.417039" transform="rotate(-86.0346 74.273 11.9644)" fill="#7E7E7E"/>
+<circle cx="89.2027" cy="-0.0864194" r="0.417039" transform="rotate(-86.0346 89.2027 -0.0864194)" fill="#7E7E7E"/>
+<circle cx="67.9839" cy="23.3433" r="0.417039" transform="rotate(-86.0346 67.9839 23.3433)" fill="#7E7E7E"/>
+<circle cx="68.5503" cy="25.4175" r="0.417039" transform="rotate(-86.0346 68.5503 25.4175)" fill="#7E7E7E"/>
+<circle cx="77.316" cy="29.8433" r="0.417039" transform="rotate(-86.0346 77.316 29.8433)" fill="#7E7E7E"/>
+<circle cx="76.0738" cy="32.1011" r="0.417039" transform="rotate(-86.0346 76.0738 32.1011)" fill="#7E7E7E"/>
+<circle cx="84.9293" cy="44.6362" r="0.417039" transform="rotate(-86.0346 84.9293 44.6362)" fill="#7E7E7E"/>
+<circle cx="116.373" cy="51.702" r="0.417039" transform="rotate(169.398 116.373 51.702)" fill="#7E7E7E"/>
+<circle cx="60.2868" cy="67.0926" r="0.417039" transform="rotate(169.398 60.2868 67.0926)" fill="#7E7E7E"/>
+<circle cx="51.7594" cy="33.7059" r="0.417039" transform="rotate(169.398 51.7594 33.7059)" fill="#7E7E7E"/>
+<circle cx="116.045" cy="50.3934" r="0.417039" transform="rotate(169.398 116.045 50.3934)" fill="#7E7E7E"/>
+<circle cx="124.845" cy="75.4598" r="0.417039" transform="rotate(169.398 124.845 75.4598)" fill="#7E7E7E"/>
+<g filter="url(#filter1_d_2932_199528)">
+<ellipse cx="0.0105357" cy="0.0118572" rx="0.0105357" ry="0.0118572" transform="matrix(0.999179 0.040507 -0.108737 0.994071 81.8594 17.4141)" fill="#EADEEC"/>
+<ellipse cx="0.0118517" cy="0.0105419" rx="0.0118517" ry="0.0105419" transform="matrix(0.102081 -0.994776 0.999487 0.0320441 80.8203 17.9219)" fill="#EADEEC"/>
+<ellipse cx="0.0118517" cy="0.0105419" rx="0.0118517" ry="0.0105419" transform="matrix(0.102081 -0.994776 0.999487 0.0320441 81.5117 17.3398)" fill="#EADEEC"/>
+</g>
+<path d="M30.5417 38.0921H26.5594V42.1641H25.535V33.2263H26.5594V37.1958H30.5417V33.2263H31.5661V42.1641H30.5417V38.0921ZM40.6412 42.1641L39.8473 39.4878H36.6332L35.8393 42.1641H34.815L37.6064 33.2263H38.8869L41.6912 42.1641H40.6412ZM38.5796 35.2494L38.2979 34.1354H38.1698L37.8881 35.2494L36.8765 38.6427H39.6168L38.5796 35.2494ZM47.6 42.3177C47.0963 42.3177 46.6439 42.2281 46.2427 42.0488C45.8415 41.861 45.5 41.5793 45.2183 41.2037C44.9451 40.8281 44.7317 40.35 44.578 39.7696C44.4329 39.1805 44.3604 38.4891 44.3604 37.6952C44.3604 36.9013 44.4329 36.2141 44.578 35.6336C44.7317 35.0446 44.9451 34.5623 45.2183 34.1866C45.5 33.811 45.8415 33.5336 46.2427 33.3543C46.6439 33.1665 47.0963 33.0726 47.6 33.0726C48.3341 33.0726 48.9232 33.2305 49.3671 33.5464C49.811 33.8537 50.161 34.3275 50.4171 34.9677L49.5975 35.4671C49.4354 34.9805 49.2006 34.6135 48.8933 34.3659C48.5945 34.1098 48.1634 33.9818 47.6 33.9818C46.9171 33.9818 46.3878 34.2293 46.0122 34.7244C45.6451 35.211 45.4616 35.8683 45.4616 36.6964V38.6939C45.4616 39.522 45.6451 40.1836 46.0122 40.6787C46.3878 41.1653 46.9171 41.4086 47.6 41.4086C48.1805 41.4086 48.6286 41.2763 48.9445 41.0116C49.2604 40.7385 49.4994 40.3458 49.6616 39.8336L50.4811 40.3458C50.225 40.986 49.8622 41.4769 49.3927 41.8183C48.9317 42.1513 48.3341 42.3177 47.6 42.3177ZM56.0454 37.7336L54.8801 39.1933V42.1641H53.8558V33.2263H54.8801V36.2098L54.8033 38.0537H54.9314L56.2503 36.2098L58.4783 33.2263H59.6564L56.7112 37.0549L59.8484 42.1641H58.6448L56.0454 37.7336ZM68.2866 42.1641L67.4927 39.4878H64.2787L63.4848 42.1641H62.4604L65.2519 33.2263H66.5324L69.3366 42.1641H68.2866ZM66.225 35.2494L65.9433 34.1354H65.8153L65.5336 35.2494L64.522 38.6427H67.2622L66.225 35.2494ZM74.5931 34.1226V42.1641H73.5687V34.1226H71.0462V33.2263H77.1157V34.1226H74.5931ZM85.37 38.0921H81.3877V42.1641H80.3633V33.2263H81.3877V37.1958H85.37V33.2263H86.3944V42.1641H85.37V38.0921ZM93.459 42.3177C92.3749 42.3177 91.534 41.9464 90.9365 41.2037C90.3389 40.461 90.0402 39.2915 90.0402 37.6952C90.0402 36.0988 90.3389 34.9293 90.9365 34.1866C91.534 33.444 92.3749 33.0726 93.459 33.0726C94.5432 33.0726 95.384 33.444 95.9816 34.1866C96.5792 34.9293 96.8779 36.0988 96.8779 37.6952C96.8779 39.2915 96.5792 40.461 95.9816 41.2037C95.384 41.9464 94.5432 42.3177 93.459 42.3177ZM93.459 41.4086C94.2017 41.4086 94.7737 41.1653 95.1749 40.6787C95.5761 40.1836 95.7767 39.522 95.7767 38.6939V36.6964C95.7767 35.8683 95.5761 35.211 95.1749 34.7244C94.7737 34.2293 94.2017 33.9818 93.459 33.9818C92.7164 33.9818 92.1444 34.2293 91.7432 34.7244C91.342 35.211 91.1414 35.8683 91.1414 36.6964V38.6939C91.1414 39.522 91.342 40.1836 91.7432 40.6787C92.1444 41.1653 92.7164 41.4086 93.459 41.4086ZM102.342 36.3635L101.561 34.5196H101.433L101.522 36.3635V42.1641H100.523V33.2263H101.778L104.749 39.0269L105.53 40.8708H105.658L105.569 39.0269V33.2263H106.567V42.1641H105.312L102.342 36.3635Z" fill="#9296AA"/>
+</g>
+<defs>
+<filter id="filter0_f_2932_199528" x="-111.277" y="-78.3514" width="223.636" height="207.347" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="23.7226" result="effect1_foregroundBlur_2932_199528"/>
+</filter>
+<filter id="filter1_d_2932_199528" x="79.6286" y="16.1247" width="3.44206" height="2.98893" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="0.595867"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980333 0 0 0 0 0.508333 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2932_199528"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2932_199528" result="shape"/>
+</filter>
+<clipPath id="clip0_2932_199528">
+<rect width="131.914" height="75.3795" fill="white" transform="translate(0.0859375)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/www/public/images/launchweek/8/twitter-spaces-thumb.svg b/apps/www/public/images/launchweek/8/twitter-spaces-thumb.svg
new file mode 100644
index 00000000000..040168b9ee6
--- /dev/null
+++ b/apps/www/public/images/launchweek/8/twitter-spaces-thumb.svg
@@ -0,0 +1,13 @@
+<svg width="132" height="76" viewBox="0 0 132 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2932_199515)">
+<path d="M135.707 -30.9727H-2.25391V106.988H135.707V-30.9727Z" fill="#020405" stroke="white"/>
+<path d="M53.5312 31.597C52.8096 31.925 52.0318 32.1405 51.2258 32.2436C52.0505 31.7469 52.6878 30.9597 52.9877 30.0132C52.2099 30.4818 51.3477 30.8098 50.4386 30.9972C49.6983 30.1912 48.658 29.7227 47.4772 29.7227C45.2748 29.7227 43.4755 31.522 43.4755 33.7431C43.4755 34.0617 43.513 34.371 43.5786 34.6615C40.2423 34.4928 37.2715 32.8903 35.294 30.463C34.9473 31.0534 34.7505 31.7469 34.7505 32.4779C34.7505 33.8743 35.4534 35.1113 36.5405 35.8142C35.8751 35.8142 35.2566 35.6268 34.713 35.3456C34.713 35.3456 34.713 35.3456 34.713 35.3738C34.713 37.3231 36.1 38.9537 37.9368 39.3192C37.5995 39.4129 37.2433 39.4598 36.8778 39.4598C36.6248 39.4598 36.3718 39.4317 36.1281 39.3848C36.6342 40.9686 38.1055 42.1495 39.8768 42.1776C38.5085 43.2647 36.7748 43.9019 34.8817 43.9019C34.5631 43.9019 34.2444 43.8832 33.9258 43.8457C35.7064 44.9891 37.8244 45.6544 40.0923 45.6544C47.4772 45.6544 51.5351 39.5254 51.5351 34.2117C51.5351 34.0336 51.5351 33.8649 51.5257 33.6869C52.3129 33.1246 52.9877 32.4123 53.5312 31.597Z" fill="#9296AA"/>
+<line x1="72.6041" y1="23.8327" x2="61.7657" y2="51.7278" stroke="#9296AA" stroke-opacity="0.3" stroke-width="0.5"/>
+<path d="M90.9633 36.3271L97.5885 28.7852H96.0188L90.2635 35.3323L85.6702 28.7852H80.3711L87.3187 38.6865L80.3711 46.5946H81.9408L88.0148 39.679L92.8666 46.5946H98.1657L90.9633 36.3271ZM88.8126 38.7734L88.1076 37.7868L82.5069 29.9441H84.9184L89.4396 36.2758L90.1417 37.2624L96.018 45.4922H93.6066L88.8126 38.7734Z" fill="#9296AA"/>
+</g>
+<defs>
+<clipPath id="clip0_2932_199515">
+<rect width="131.914" height="75.3795" fill="white" transform="translate(0.0859375)"/>
+</clipPath>
+</defs>
+</svg>

From 9bbde8b5010083ced0f3fbe4fbdddf04aca2c4cf Mon Sep 17 00:00:00 2001
From: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Date: Wed, 2 Aug 2023 15:15:11 +0200
Subject: [PATCH 63/73] update image

---
 apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx b/apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx
index c0dda61b44a..511b7a46c61 100644
--- a/apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx
+++ b/apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx
@@ -19,7 +19,7 @@ const LW8CalloutsSection = () => {
               </div>
               <div className="relative flex !aspect-video h-[80px] md:h-[100px] gap-2 z-10 rounded overflow-hidden">
                 <Image
-                  src="/images/launchweek/8/twitter-spaces-preview.png"
+                  src="/images/launchweek/8/twitter-spaces-thumb.svg"
                   layout="fill"
                   objectFit="cover"
                 />

From 4b82ef30ddf3edca3a9d3a48a41a6a72c7fd846f Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Wed, 2 Aug 2023 10:59:38 -0230
Subject: [PATCH 64/73] Adds vector and double precision argument types

---
 .../SidePanelEditor/SidePanelEditor.constants.ts     | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants.ts b/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants.ts
index 585853061ee..ddee6d5ee0c 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants.ts
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants.ts
@@ -2,7 +2,15 @@ import { sortBy, concat } from 'lodash'
 import { PostgresDataTypeOption } from './SidePanelEditor.types'
 
 export const DATE_FORMAT = 'YYYY-MM-DDTHH:mm:ssZ'
-export const NUMERICAL_TYPES = ['int2', 'int4', 'int8', 'float4', 'float8', 'numeric']
+export const NUMERICAL_TYPES = [
+  'int2',
+  'int4',
+  'int8',
+  'float4',
+  'float8',
+  'numeric',
+  'double precision',
+]
 export const JSON_TYPES = ['json', 'jsonb']
 export const TEXT_TYPES = ['text', 'varchar']
 
@@ -11,7 +19,7 @@ export const DATE_TYPES = ['date']
 export const TIME_TYPES = ['time', 'timetz']
 export const DATETIME_TYPES = concat(TIMESTAMP_TYPES, DATE_TYPES, TIME_TYPES)
 
-export const OTHER_DATA_TYPES = ['uuid', 'bool']
+export const OTHER_DATA_TYPES = ['uuid', 'bool', 'vector']
 export const POSTGRES_DATA_TYPES = sortBy(
   concat(NUMERICAL_TYPES, JSON_TYPES, TEXT_TYPES, DATETIME_TYPES, OTHER_DATA_TYPES)
 )

From 59d91056b8ecb7c2d60c858ccb6750f3635b8e80 Mon Sep 17 00:00:00 2001
From: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Date: Wed, 2 Aug 2023 15:50:31 +0200
Subject: [PATCH 65/73] Update text

---
 .../www/components/LaunchWeek/8/LW8Meetups.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/www/components/LaunchWeek/8/LW8Meetups.tsx b/apps/www/components/LaunchWeek/8/LW8Meetups.tsx
index a654c4f4b11..12fc28f4843 100644
--- a/apps/www/components/LaunchWeek/8/LW8Meetups.tsx
+++ b/apps/www/components/LaunchWeek/8/LW8Meetups.tsx
@@ -47,15 +47,15 @@ const LW8Meetups = ({ meetups }: { meetups?: Meetup[] }) => {
   }, [])
 
   return (
-    <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-8">
-      <div className="col-span-1 lg:col-span-4 flex flex-col justify-center">
-        <h2 className="text-2xl sm:text-3xl xl:text-4xl tracking-[-.5px]">Join us live</h2>
-        <p className="text-scale-1000 text-xs sm:text-sm lg:text-base py-3 lg:max-w-md">
-          Celebrate LW8 with us at our first-ever live meetups across various locations. Join the
-          fun, grab some swag, and be a part of the Supabase community.
+    <div className="max-w-6xl mx-auto grid grid-cols-1 xl:grid-cols-12 gap-8 xl:gap-8">
+      <div className="col-span-1 xl:col-span-4 flex flex-col justify-center max-w-lg">
+        <h2 className="text-2xl sm:text-3xl xl:text-4xl tracking-[-.5px]">Join the community</h2>
+        <p className="text-scale-1000 text-xs sm:text-sm xl:text-base py-3 xl:max-w-md">
+          Celebrate LW8 at our first-ever live community meetups across various locations. Join the
+          fun, grab some swag, and meet the Supabase community.
         </p>
       </div>
-      <div className="col-span-1 lg:col-span-7 lg:col-start-6 w-full max-w-4xl flex flex-col justify-between items-stretch">
+      <div className="col-span-1 xl:col-span-7 xl:col-start-6 w-full max-w-4xl flex flex-col justify-between items-stretch">
         {meets &&
           meets
             ?.sort((a, b) => (new Date(a.start_at) > new Date(b.start_at) ? 1 : -1))
@@ -64,7 +64,7 @@ const LW8Meetups = ({ meetups }: { meetups?: Meetup[] }) => {
                 <a
                   target="_blank"
                   className={[
-                    'w-full group py-0 flex items-center gap-2 md:gap-4 text-lg sm:text-2xl lg:text-4xl border-b border-[#111718]',
+                    'w-full group py-0 flex items-center gap-2 md:gap-4 text-lg sm:text-2xl xl:text-4xl border-b border-[#111718]',
                     'hover:text-scale-1200',
                     isLive ? 'text-scale-1100' : 'text-[#56646B]',
                     !link && 'pointer-events-none',
@@ -73,7 +73,7 @@ const LW8Meetups = ({ meetups }: { meetups?: Meetup[] }) => {
                   <div className="flex items-center gap-2 md:gap-4">
                     <span>{title}</span>
                     {isLive && <Badge>Live now</Badge>}
-                    <span className="opacity-0 -translate-x-2 transition-all md:group-hover:opacity-100 group-hover:translate-x-0">
+                    <span className="hidden md:inline opacity-0 -translate-x-2 transition-all md:group-hover:opacity-100 group-hover:translate-x-0">
                       <svg
                         width="47"
                         height="47"

From 27d5719fcb62915384d8e1cc461ebf975129c4e5 Mon Sep 17 00:00:00 2001
From: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Date: Wed, 2 Aug 2023 16:02:43 +0200
Subject: [PATCH 66/73] Add nav anchors

---
 apps/www/components/Layouts/SectionContainer.tsx |  4 +++-
 apps/www/pages/launch-week/index.tsx             | 10 ++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/www/components/Layouts/SectionContainer.tsx b/apps/www/components/Layouts/SectionContainer.tsx
index db5ec705165..931294e211d 100644
--- a/apps/www/components/Layouts/SectionContainer.tsx
+++ b/apps/www/components/Layouts/SectionContainer.tsx
@@ -3,10 +3,12 @@ import classNames from 'classnames'
 interface Props {
   children: React.ReactNode
   className?: string
+  id?: string
 }
 
-const SectionContainer = ({ children, className }: Props) => (
+const SectionContainer = ({ children, className, id }: Props) => (
   <div
+    id={id}
     className={classNames(
       `sm:py-18 container relative mx-auto px-6 py-16 md:py-24 lg:px-16 lg:py-24 xl:px-20`,
       className
diff --git a/apps/www/pages/launch-week/index.tsx b/apps/www/pages/launch-week/index.tsx
index e9b4930eb22..0462fd955db 100644
--- a/apps/www/pages/launch-week/index.tsx
+++ b/apps/www/pages/launch-week/index.tsx
@@ -166,11 +166,13 @@ export default function TicketHome({ users, meetups }: Props) {
               </div>
             </div>
 
-            <SectionContainer className="!pb-0">
-              <LW8CalloutsSection />
-            </SectionContainer>
+            <div id="twitter-spaces">
+              <SectionContainer className="!pb-0" id="hackathon">
+                <LW8CalloutsSection />
+              </SectionContainer>
+            </div>
 
-            <SectionContainer>
+            <SectionContainer id="meetups">
               <LW8Meetups meetups={meetups} />
             </SectionContainer>
 

From f8299d50961373eb619c5d6290222aa244cfb1cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramiro=20Nu=C3=B1ez=20Dosio?= <ramiro@supabase.io>
Date: Wed, 2 Aug 2023 15:06:06 +0100
Subject: [PATCH 67/73] Update quick product announcements section.

---
 apps/www/_blog/2023-08-02-beta-update-july-2023.mdx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/www/_blog/2023-08-02-beta-update-july-2023.mdx b/apps/www/_blog/2023-08-02-beta-update-july-2023.mdx
index 4f36f6ddf43..2a6c49e301c 100644
--- a/apps/www/_blog/2023-08-02-beta-update-july-2023.mdx
+++ b/apps/www/_blog/2023-08-02-beta-update-july-2023.mdx
@@ -40,9 +40,10 @@ There's been a lot of talk about pgvector performance, so we pushed it to the li
 
 ## Quick product announcements
 
-- [**Postgres Tooling**] pgsodium 3.1.8 released
-- [**Postgres Tooling**] PostgREST 11.1 is now live. [Blog post](https://supabase.com/blog/postgrest-11-1-release)
-- [**Auth**] You can now use Resend as a custom SMTP provider. [Doc](https://www.notion.so/Clicking-on-https-supabase-com-docs-reference-dart-functions-invoke-redirects-to-https-supabase--fb705ffc7cbb41fd98b31ab9c8772019?pvs=21)
+- [Auth] There is a new OAuth provider in time: Login with Figma. [Docs](https://supabase.com/docs/guides/auth/social-login/auth-figma)
+- [Auth] You can now use Resend as a custom SMTP provider. [Docs](https://resend.com/docs/send-with-supabase-smtp)
+- [Postgres Tooling] pgsodium 3.1.8 released. [PR](https://github.com/michelp/pgsodium/releases/tag/v3.1.8)
+- [Postgres Tooling] PostgREST 11.1 is now live. [Blog post](https://supabase.com/blog/postgrest-11-1-release)
 
 ## Egghead course: Twitter Clone with the Next.js App Router
 

From 691c3065eac52aabc0c6b815e3bf55ef7744b1ca Mon Sep 17 00:00:00 2001
From: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Date: Wed, 2 Aug 2023 16:18:29 +0200
Subject: [PATCH 68/73] fix mobile padding

---
 apps/www/components/LaunchWeek/8/LW8Meetups.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/www/components/LaunchWeek/8/LW8Meetups.tsx b/apps/www/components/LaunchWeek/8/LW8Meetups.tsx
index 12fc28f4843..9ae4ceda564 100644
--- a/apps/www/components/LaunchWeek/8/LW8Meetups.tsx
+++ b/apps/www/components/LaunchWeek/8/LW8Meetups.tsx
@@ -70,7 +70,7 @@ const LW8Meetups = ({ meetups }: { meetups?: Meetup[] }) => {
                     !link && 'pointer-events-none',
                   ].join(' ')}
                 >
-                  <div className="flex items-center gap-2 md:gap-4">
+                  <div className="flex items-center gap-2 md:gap-4 py-2 md:py-0">
                     <span>{title}</span>
                     {isLive && <Badge>Live now</Badge>}
                     <span className="hidden md:inline opacity-0 -translate-x-2 transition-all md:group-hover:opacity-100 group-hover:translate-x-0">

From 53cfe46a04273347311f8c00b0b892106f850c5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Wed, 2 Aug 2023 19:51:14 +0200
Subject: [PATCH 69/73] chore: keep spend cap disabled on downgrade team -> pro

---
 .../Subscription/PlanUpdateSidePanel.tsx              | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/PlanUpdateSidePanel.tsx b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/PlanUpdateSidePanel.tsx
index d91951a27a5..9ec255913b8 100644
--- a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/PlanUpdateSidePanel.tsx
+++ b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/PlanUpdateSidePanel.tsx
@@ -7,7 +7,7 @@ import { useEffect, useState } from 'react'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import { useOrgPlansQuery } from 'data/subscriptions/org-plans-query'
 import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
-import { useOrgSubscriptionUpdateMutation } from 'data/subscriptions/org-subscription-update-mutation'
+import { SubscriptionTier, useOrgSubscriptionUpdateMutation } from 'data/subscriptions/org-subscription-update-mutation'
 import { useCheckPermissions, useSelectedOrganization, useStore } from 'hooks'
 import { PRICING_TIER_PRODUCT_IDS } from 'lib/constants'
 import Telemetry from 'lib/telemetry'
@@ -110,9 +110,14 @@ const PlanUpdateSidePanel = () => {
       return ui.setNotification({ category: 'error', message: 'Please select a payment method' })
     }
 
-    updateOrgSubscription({ slug, tier: selectedTier, paymentMethod: selectedPaymentMethod })
+    // If the user is downgrading from team, should have spend cap disabled by default 
+    const tier = subscription?.plan?.id === 'team' && selectedTier === PRICING_TIER_PRODUCT_IDS.PRO ? PRICING_TIER_PRODUCT_IDS.PAYG as SubscriptionTier : selectedTier
+
+    updateOrgSubscription({ slug, tier, paymentMethod: selectedPaymentMethod })
   }
 
+  const planMeta = selectedTier ? availablePlans.find((p) => p.id === selectedTier.split('tier_')[1]) : null
+
   return (
     <>
       <SidePanel
@@ -289,7 +294,7 @@ const PlanUpdateSidePanel = () => {
         onCancel={() => setSelectedTier(undefined)}
         onConfirm={onUpdateSubscription}
         overlayClassName="pointer-events-none"
-        header={`Confirm to upgrade to ${subscriptionPlanMeta?.name}`}
+        header={`Confirm ${planMeta?.change_type === 'downgrade' ? 'downgrade' : 'upgrade'} to ${subscriptionPlanMeta?.name}`}
       >
         <Modal.Content>
           <div className="py-6 space-y-2">

From 86190802ca872ea48f7a57d9156a4b3229096a2e Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 3 Aug 2023 14:17:52 +0800
Subject: [PATCH 70/73] Fix v2 home page white space

---
 studio/pages/org/[slug]/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/studio/pages/org/[slug]/index.tsx b/studio/pages/org/[slug]/index.tsx
index b1e1245555c..c1e599eca39 100644
--- a/studio/pages/org/[slug]/index.tsx
+++ b/studio/pages/org/[slug]/index.tsx
@@ -23,7 +23,7 @@ const ProjectsPage: NextPageWithLayout = () => {
   const projects = allProjects?.filter((project) => project.organization_id === organization?.id)
 
   return (
-    <ScaffoldContainer>
+    <ScaffoldContainer className="h-full overflow-y-auto">
       <ScaffoldSection>
         <div className="col-span-12 space-y-8">
           <Link href={`/new/${organization?.slug}`}>

From d24eb1ea0b034b1091a2545875a7d8f4b66224b2 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 3 Aug 2023 14:22:29 +0800
Subject: [PATCH 71/73] Show building state if project status is unknown

---
 studio/components/layouts/ProjectLayout/BuildingState.tsx | 6 +++---
 studio/components/layouts/ProjectLayout/ProjectLayout.tsx | 4 +++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/studio/components/layouts/ProjectLayout/BuildingState.tsx b/studio/components/layouts/ProjectLayout/BuildingState.tsx
index 53188486c5d..908c1578a2f 100644
--- a/studio/components/layouts/ProjectLayout/BuildingState.tsx
+++ b/studio/components/layouts/ProjectLayout/BuildingState.tsx
@@ -3,7 +3,7 @@ import ClientLibrary from 'components/interfaces/Home/ClientLibrary'
 import ExampleProject from 'components/interfaces/Home/ExampleProject'
 import { CLIENT_LIBRARIES, EXAMPLE_PROJECTS } from 'components/interfaces/Home/Home.constants'
 import Link from 'next/link'
-import { FC, useEffect, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { Badge, Button, IconArrowRight, IconLoader } from 'ui'
 
 import { DisplayApiSettings, DisplayConfigSettings } from 'components/ui/ProjectSettings'
@@ -55,8 +55,8 @@ const BuildingState = ({ project }: BuildingStateProps) => {
               <div className="flex items-center gap-2">
                 <IconLoader className="animate-spin" size={12} />
                 <span>
-                  {project.status === PROJECT_STATUS.RESTORING
-                    ? 'Restoring project'
+                  {project.status === PROJECT_STATUS.UNKNOWN
+                    ? 'Initiating project set up'
                     : 'Setting up project'}
                 </span>
               </div>
diff --git a/studio/components/layouts/ProjectLayout/ProjectLayout.tsx b/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
index 0ce4030e476..90d627cc098 100644
--- a/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
+++ b/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
@@ -171,7 +171,9 @@ const ContentWrapper = ({ isLoading, children }: ContentWrapperProps) => {
 
   const isProjectUpgrading = selectedProject?.status === PROJECT_STATUS.UPGRADING
   const isProjectRestoring = selectedProject?.status === PROJECT_STATUS.RESTORING
-  const isProjectBuilding = selectedProject?.status === PROJECT_STATUS.COMING_UP
+  const isProjectBuilding =
+    selectedProject?.status === PROJECT_STATUS.COMING_UP ||
+    selectedProject?.status === PROJECT_STATUS.UNKNOWN
   const isProjectPausing =
     selectedProject?.status === PROJECT_STATUS.GOING_DOWN ||
     selectedProject?.status === PROJECT_STATUS.PAUSING

From ffe0e552dea3b24dcfe9964a44eccca75c310798 Mon Sep 17 00:00:00 2001
From: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Date: Thu, 3 Aug 2023 10:11:41 +0200
Subject: [PATCH 72/73] add alt text to images

---
 apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx b/apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx
index 511b7a46c61..8f001d4cfc7 100644
--- a/apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx
+++ b/apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx
@@ -20,6 +20,7 @@ const LW8CalloutsSection = () => {
               <div className="relative flex !aspect-video h-[80px] md:h-[100px] gap-2 z-10 rounded overflow-hidden">
                 <Image
                   src="/images/launchweek/8/twitter-spaces-thumb.svg"
+                  alt="twitter spaces thumbnail"
                   layout="fill"
                   objectFit="cover"
                 />
@@ -39,6 +40,7 @@ const LW8CalloutsSection = () => {
               <div className="relative flex !aspect-video h-[80px] md:h-[100px] gap-2 z-10 rounded overflow-hidden">
                 <Image
                   src="/images/launchweek/8/lw8-hackathon-thumb.svg"
+                  alt="hackathon thumbnail"
                   layout="fill"
                   objectFit="cover"
                 />

From bf396bf30454c4d4de8d6c719416eab68e12f857 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 3 Aug 2023 17:13:08 +0800
Subject: [PATCH 73/73] Ignore isValidBranch check in RouteValidationWRapper
 for self hosted

---
 studio/components/interfaces/App/RouteValidationWrapper.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/studio/components/interfaces/App/RouteValidationWrapper.tsx b/studio/components/interfaces/App/RouteValidationWrapper.tsx
index f2bb8a31b74..3b82a9b1679 100644
--- a/studio/components/interfaces/App/RouteValidationWrapper.tsx
+++ b/studio/components/interfaces/App/RouteValidationWrapper.tsx
@@ -7,7 +7,7 @@ import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useProjectsQuery } from 'data/projects/projects-query'
 import { useFlag, useStore } from 'hooks'
 import useLatest from 'hooks/misc/useLatest'
-import { DEFAULT_HOME, LOCAL_STORAGE_KEYS } from 'lib/constants'
+import { DEFAULT_HOME, IS_PLATFORM, LOCAL_STORAGE_KEYS } from 'lib/constants'
 
 // Ideally these could all be within a _middleware when we use Next 12
 const RouteValidationWrapper = ({ children }: PropsWithChildren<{}>) => {
@@ -68,7 +68,9 @@ const RouteValidationWrapper = ({ children }: PropsWithChildren<{}>) => {
       // Check validity of project that the user is trying to access
       const projects = projectsRef.current ?? []
       const isValidProject = projects.some((project) => project.ref === ref)
-      const isValidBranch = projects.some((project) => project.preview_branch_refs.includes(ref))
+      const isValidBranch = IS_PLATFORM
+        ? projects.some((project) => project.preview_branch_refs.includes(ref))
+        : true
 
       if (!isValidProject && !isValidBranch) {
         ui.setNotification({ category: 'error', message: 'This project does not exist' })