[pull] master from supabase:master

apps/design-system/README.md

@@ -1,46 +1,31 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Supabase Design System
+
+Design resources for building consistent user experiences at Supabase.
 
 ## Getting Started
 
-First, run the development server:
+First, make a copy of _.env.local.example_ and name it _env.local_. Then run the development server as described below.
+
+From within this _design-system_ directory, run:
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
 pnpm dev
-# or
-bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Or from the root directory run:
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+```bash
+pnpm dev:design-system
+```
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+Open [http://localhost:3003](http://localhost:3003) with your browser to see the result.
 
 ### Watching for MDX changes
 
-If you would like to watch for changes to MDX files with hot reload, you can run the following command in a separate Terminal shell:
+If you would like to watch for changes to MDX files with hot reload, you can run the following command in a separate terminal shell:
 
 ```
 pnpm content:dev
 ```
 
 This runs Contentlayer concurrently and watches for any changes.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

apps/design-system/app/layout.tsx

@@ -8,7 +8,7 @@ const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
   title: 'Supabase Design System',
-  description: 'Generated by create next app',
+  description: 'Design resources for building consistent user experiences at Supabase.',
 }
 
 interface RootLayoutProps {

apps/design-system/components/colors.tsx

@@ -1,13 +1,26 @@
 import { cn } from 'ui/src/lib/utils/cn'
-// import { Card } from '@ui/components/shadcn/ui/card'
 import color from 'ui/src/lib/tailwind-demo-classes'
 import { Grid, GridItem } from './grid'
+import { useState } from 'react'
 
 const Colors = ({
   definition,
 }: {
   definition: 'background' | 'border' | 'text' | 'colors' | 'palletes'
 }) => {
+  const [copiedIndex, setCopiedIndex] = useState<number | null>(null)
+
+  const handleCopy = async (value: string, index: number) => {
+    try {
+      await navigator.clipboard.writeText(value)
+      setCopiedIndex(index)
+      setTimeout(() => {
+        setCopiedIndex(null)
+      }, 2000)
+    } catch (err) {
+      console.error('Failed to copy text: ', err)
+    }
+  }
   const Example = ({ x }: { x: string }) => {
     switch (definition) {
       case 'background':
@@ -53,10 +66,11 @@ const Colors = ({
             <GridItem
               key={i}
               className={cn(x.includes('contrast') && 'bg-foreground hover:bg-foreground-light')}
+              onClick={() => handleCopy(x, i)}
             >
               <Example x={x} />
-              <span className="bg-surface-100 rounded-full border px-2 font-mono text-xs text-foreground-lighter group-data-[state=open]:text-foreground">
-                {x}
+              <span className="bg-surface-100 rounded-full border px-2 font-mono text-xs text-foreground-lighter group-data-[state=open]:text-foreground text-center">
+                {copiedIndex === i ? 'Copied!' : x}
               </span>
             </GridItem>
           )
@@ -66,90 +80,4 @@ const Colors = ({
   )
 }
 
-{
-  /* <div className="flex flex-col gap-12 py-20">
-        <div className="flex flex-row gap-12">
-          <div>
-            <h5 className="mb-3">Background</h5>
-            <div className="flex flex-col gap-3">
-              {color.background.map((x: string, i) => {
-                return (
-                  <div className="flex gap-3 items-center" key={i}>
-                    <div className={cn(x, 'relative w-12 h-12 border border-overlay shadow')}></div>
-                    <div className="font-mono text-sm bg-surface-100 px-2 py-0.5 rounded-full">
-                      {x}
-                    </div>
-                  </div>
-                )
-              })}
-            </div>
-          </div>
-          <div>
-            <h5 className="mb-3">Border</h5>
-            <div className="flex flex-col gap-3">
-              {color.border.map((x, i) => {
-                return (
-                  <div className="flex gap-3 items-center" key={i}>
-                    <div className={cn(x, 'relative w-12 h-12 border-4')}></div>
-                    <div className="font-mono text-sm bg-surface-100 px-2 py-0.5 rounded-full">
-                      {x}
-                    </div>
-                  </div>
-                )
-              })}
-            </div>
-          </div>
-          <div>
-            <h5 className="mb-3">texts</h5>
-            <div className="flex flex-col gap-3">
-              {color.text.map((x, i) => {
-                return (
-                  <div className="flex gap-3 items-center" key={i}>
-                    <span className={cn(x, 'relative w-12 h-12 flex items-center justify-center')}>
-                      ###
-                    </span>
-                    <div className="font-mono text-sm bg-surface-100 px-2 py-0.5 rounded-full">
-                      {x}
-                    </div>
-                  </div>
-                )
-              })}
-            </div>
-          </div>
-        </div>
-        <div className="flex flex-row gap-12">
-          <div>
-            <h5 className="mb-3">Colors</h5>
-            <div className="flex flex-col gap-3">
-              {color.colors.map((x: string, i) => {
-                return (
-                  <div className="flex gap-3 items-center" key={i}>
-                    <div className={cn(x, 'relative w-12 h-12 border border-overlay shadow')}></div>
-                    <div className="font-mono text-sm bg-surface-100 px-2 py-0.5 rounded-full">
-                      {x}
-                    </div>
-                  </div>
-                )
-              })}
-            </div>
-          </div>
-          <div>
-            <h5 className="mb-3">Palletes</h5>
-            <div className="flex flex-col gap-3">
-              {color.palletes.map((x, i) => {
-                return (
-                  <div className="flex gap-3 items-center" key={i}>
-                    <div className={cn(x, 'relative w-12 h-12 border border-overlay shadow')}></div>
-                    <div className="font-mono text-sm bg-surface-100 px-2 py-0.5 rounded-full">
-                      {x}
-                    </div>
-                  </div>
-                )
-              })}
-            </div>
-          </div>
-        </div>
-      </div> */
-}
-
 export { Colors }

apps/design-system/config/docs.ts

@@ -38,13 +38,13 @@ export const docsConfig: DocsConfig = {
           items: [],
         },
         {
-          title: 'Color usage',
-          href: '/docs/color-usage',
+          title: 'Tailwind Classes',
+          href: '/docs/tailwind-classes',
           items: [],
         },
         {
-          title: 'Tailwind classes',
-          href: '/docs/tailwind-classes',
+          title: 'Color Usage',
+          href: '/docs/color-usage',
           items: [],
         },
         {

apps/design-system/content/docs/changelog.mdx

@@ -4,6 +4,13 @@ description: Latest updates and announcements.
 toc: false
 ---
 
+## 1st Sep 2025 - Update button styles
+
+- [`Color usage`](/design-system/docs/color-usage) page updated
+- Color tokens improved for accessibility
+
+[PR](https://github.com/supabase/supabase/pull/38343)
+
 ## 18th Oct 2024 - Update multi-select
 
 Improved Multi Select with combobox, badge limit, and more examples.

apps/design-system/content/docs/color-usage.mdx

@@ -1,11 +1,15 @@
 ---
 title: Color usage
-description: Colors system breakdown with best practice
+description: Colors system breakdown with best practices.
 ---
 
-Colors available in the Supabase Design System
+The shorthand utility classes below simplify our full color palette by providing sensible, contrast-checked defaults. Use them whenever possible to ensure accessible text colors and balanced background fills.
 
-These are examples of using colors with shorthands.
+## Text
+
+Use accent text colors (e.g. text-destructive, text-warning) sparingly to avoid visual overload.
+
+<Colors definition={'text'} />
 
 ## Background
 
@@ -60,15 +64,8 @@ This is not to be confused with `Dialogs`, they require to use the same app back
 
 <Colors definition={'border'} />
 
-## Text
-
-These can also be accessed with `foreground`. Like `text-foreground-light`.
-
-<Colors definition={'text'} />
-
 ## Other Colors
 
 These can also be accessed with `foreground`. Like `text-foreground-light`.
 
 <Colors definition={'colors'} />
-```

apps/design-system/content/docs/tailwind-classes.mdx

@@ -1,37 +1,37 @@
 ---
 title: Tailwind Classes
-description: Icons system breakdown. Copy values of Icons.
+description: Theming support for Tailwind classes.
 ---
 
-Supabase is migrating to use tailwind classes that use CSS properties.
+Supabase uses Tailwind classes that in turn use CSS properties.
 This is to support the concept of theming, so that:
 
-1. It is easy for the team to update the theme without changing 100s of files.
-2. We could offer custom or additional themes in future.
+1. We can update themes from one place.
+2. We can offer custom or additional themes in the future.
 
 ## Primitives
 
-We (the Supabase Design team ✨) define primitive color values using Figma Variables.
+We define primitive color values using these tokens:
 
 - `background`
 - `foreground`
 - `border`
 - `brand`
-- `destructive`
 - `warning`
+- `destructive`
 
-These values are exported from Figma as a .json file and transformed into tailwind utilities through some scripts under `packages/ui/internals/tokens`.
+These values are exported from Figma as a .json file and transformed into Tailwind utilities through some scripts under `packages/ui/internals/tokens`.
 
-Any of these colors are available on any tailwind utility that accepts color. For example:
+Any of these colors are available on any Tailwind utility that accepts color. For example:
 
 ```jsx
-// this uses the default foreground color
+// this uses the default foreground color for this theme
 <span className="text-foreground"></span>
 
-// this uses the 'light' foreground color
+// this uses the 'light' foreground color for this theme (one notch 'softer' than the default)
 <span className="text-foreground-light"></span>
 
-// this uses the default warning color
+// this uses the default warning color for this theme
 <span className="text-warning"></span>
 
 // this uses the '500' warning color
@@ -48,26 +48,26 @@ We support shorthand classes for `background`, `foreground` and `border`. For ex
 
 This will stop you from needing to 'double type' the same utility name.
 
-You might notice we use `foreground` and `background` as prefixes, this is only because it is a Design Token standard, where as tailwind uses `bg` and `text`.
+You might notice we use `foreground` and `background` as prefixes, this is only because it is a Design Token standard, where as Tailwind uses `bg` and `text`.
 
 ## Mixing colors
 
 Even with shorthands, remember you can use any color. For example, `foreground-light` can also be applied on borders and backgrounds as `border-foreground-light` and `bg-foreground-light`, if needed.
-Similarly, background and border primitives can be used on other tailwind utilities.
+Similarly, background and border primitives can be used on other Tailwind utilities.
 
 ```jsx
 // use the text light color for some text
 <span className="text-light"></span>
 
 // we can use the same color for a background
 <div className="bg-foreground-light">
-    <span>I have the same color background as the left example</span>
+    <span>I have the same background color as the above example</span>
 </div>
 ```
 
 ## Opacity support
 
-All the colors are generated using tailwind opacity, like `hsl(--background-default) / var(--tw-bg-opacity)`.
+All colors are generated using Tailwind opacity, like `hsl(--background-default) / var(--tw-bg-opacity)`.
 This means all the color options in our themes can support opacity rules. For example:
 
 ```jsx
@@ -82,7 +82,9 @@ This means all the color options in our themes can support opacity rules. For ex
 
 ## Usage
 
-The following tailwind classes are a combination of tailwind utilities and our primitives. They're under development and are likely to change but most are now in use and will probably be permanent fixtures.
+The following Tailwind classes are a combination of Tailwind utilities and our primitives.
+
+Note that the shade of the `DEFAULT` value on each scale pattern is variable. Sometimes it is fixed at a particular shade (such as `500` or `600`), but only when contrast is sufficient.
 
 ### Foreground (Text)
 
@@ -118,7 +120,7 @@ Examples:
 | `background-control`          | Inputs, Radios, Checkboxes                                   |
 | `background-button-{DEFAULT}` | Button default                                               |
 
-The `background` part can be omitted when used on the `bg` tailwind utility.
+The `background` part can be omitted when used on the `bg` Tailwind utility.
 
 Examples:
 

apps/docs/app/page.tsx

@@ -268,7 +268,7 @@ const HomePage = () => (
           <TextLink
             label="Explore more resources"
             url="/guides/resources"
-            className="no-underline text-brand text-sm"
+            className="no-underline text-brand-link text-sm"
           />
         </div>
 
@@ -328,7 +328,7 @@ const HomePage = () => (
             <TextLink
               label="More on Self-Hosting"
               url="/guides/self-hosting"
-              className="no-underline text-brand text-sm"
+              className="no-underline text-brand-link text-sm"
             />
           </div>
         </div>

apps/docs/components/Feedback/Feedback.tsx

@@ -161,7 +161,7 @@ function Feedback({ className }: { className?: string }) {
               '[transition-property:opacity,transform,color] [transition-duration:150ms,250ms,250ms]',
               'motion-reduce:[transition-duration:150ms,1ms,300ms]',
               '[transition-timing-function:cubic-bezier(.76,0,.23,1)]',
-              !isNo && 'hover:text-warning-600 hover:border-warning-500',
+              !isNo && 'hover:text-warning hover:border-warning-500',
               isNo && `bg-warning text-warning-200 !border-warning disabled:opacity-100`,
               !showNo && 'opacity-0 invisible'
             )}