diff --git a/apps/design-system/README.md b/apps/design-system/README.md index 47f009cebeab7..e8db8fd524659 100644 --- a/apps/design-system/README.md +++ b/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. diff --git a/apps/design-system/app/layout.tsx b/apps/design-system/app/layout.tsx index 9b522fbcc1a5c..c3fa53e49cea7 100644 --- a/apps/design-system/app/layout.tsx +++ b/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 { diff --git a/apps/design-system/components/colors.tsx b/apps/design-system/components/colors.tsx index e1d63267d0f1b..830581aebae12 100644 --- a/apps/design-system/components/colors.tsx +++ b/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(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 = ({ handleCopy(x, i)} > - - {x} + + {copiedIndex === i ? 'Copied!' : x} ) @@ -66,90 +80,4 @@ const Colors = ({ ) } -{ - /*
-
-
-
Background
-
- {color.background.map((x: string, i) => { - return ( -
-
-
- {x} -
-
- ) - })} -
-
-
-
Border
-
- {color.border.map((x, i) => { - return ( -
-
-
- {x} -
-
- ) - })} -
-
-
-
texts
-
- {color.text.map((x, i) => { - return ( -
- - ### - -
- {x} -
-
- ) - })} -
-
-
-
-
-
Colors
-
- {color.colors.map((x: string, i) => { - return ( -
-
-
- {x} -
-
- ) - })} -
-
-
-
Palletes
-
- {color.palletes.map((x, i) => { - return ( -
-
-
- {x} -
-
- ) - })} -
-
-
-
*/ -} - export { Colors } diff --git a/apps/design-system/config/docs.ts b/apps/design-system/config/docs.ts index 4064fbd6d0434..cd0c0bf8e2cb0 100644 --- a/apps/design-system/config/docs.ts +++ b/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: [], }, { diff --git a/apps/design-system/content/docs/changelog.mdx b/apps/design-system/content/docs/changelog.mdx index 1ae4506b73a49..bd19ae0967b91 100644 --- a/apps/design-system/content/docs/changelog.mdx +++ b/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. diff --git a/apps/design-system/content/docs/color-usage.mdx b/apps/design-system/content/docs/color-usage.mdx index 62e27d9df88db..e4635a07a70fc 100644 --- a/apps/design-system/content/docs/color-usage.mdx +++ b/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. + + ## Background @@ -60,15 +64,8 @@ This is not to be confused with `Dialogs`, they require to use the same app back -## Text - -These can also be accessed with `foreground`. Like `text-foreground-light`. - - - ## Other Colors These can also be accessed with `foreground`. Like `text-foreground-light`. -``` diff --git a/apps/design-system/content/docs/tailwind-classes.mdx b/apps/design-system/content/docs/tailwind-classes.mdx index eb149f4e965e9..a8efa6a3ef12d 100644 --- a/apps/design-system/content/docs/tailwind-classes.mdx +++ b/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 -// this uses the 'light' foreground color +// this uses the 'light' foreground color for this theme (one notch 'softer' than the default) -// this uses the default warning color +// this uses the default warning color for this theme // this uses the '500' warning color @@ -48,12 +48,12 @@ 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 @@ -61,13 +61,13 @@ Similarly, background and border primitives can be used on other tailwind utilit // we can use the same color for a background
- I have the same color background as the left example + I have the same background color as the above example
``` ## 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: diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx index 85f114233359a..5714662b1adba 100644 --- a/apps/docs/app/page.tsx +++ b/apps/docs/app/page.tsx @@ -268,7 +268,7 @@ const HomePage = () => ( @@ -328,7 +328,7 @@ const HomePage = () => ( diff --git a/apps/docs/components/Feedback/Feedback.tsx b/apps/docs/components/Feedback/Feedback.tsx index e96f190715849..a54532715deef 100644 --- a/apps/docs/components/Feedback/Feedback.tsx +++ b/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' )} diff --git a/apps/docs/components/Feedback/FeedbackModal.tsx b/apps/docs/components/Feedback/FeedbackModal.tsx index c2b8af3ea080d..e615e41634be5 100644 --- a/apps/docs/components/Feedback/FeedbackModal.tsx +++ b/apps/docs/components/Feedback/FeedbackModal.tsx @@ -58,7 +58,7 @@ function FeedbackModal({ visible, page, onCancel, onSubmit }: FeedbackModalProps href="https://supabase.com/dashboard/support/new" target="_blank" rel="noopener noreferrer" - className="text-brand hover:underline" + className="text-brand-link hover:underline" > support request diff --git a/apps/docs/components/HomePageCover.tsx b/apps/docs/components/HomePageCover.tsx index 591c630023e3e..4958cb9ba9933 100644 --- a/apps/docs/components/HomePageCover.tsx +++ b/apps/docs/components/HomePageCover.tsx @@ -20,7 +20,7 @@ function AiPrompt({ className }: { className?: string }) { className={cn( 'group', 'w-fit rounded-full border px-3 py-1 flex gap-2 items-center text-foreground-light text-sm', - 'hover:border-brand hover:text-brand focus-visible:text-brand', + 'hover:border-brand hover:text-brand-link focus-visible:text-brand-link', 'transition-colors', className )} diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx index f18ba82147d78..50bcae9a64fae 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx @@ -22,7 +22,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {
  • {icon && } {title} @@ -99,7 +99,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => { href={`${menu.parent ?? '/'}`} className={[ 'flex items-center gap-1 text-xs group mb-3', - 'text-base transition-all duration-200 text-brand hover:text-brand-600 hover:cursor-pointer ', + 'text-base transition-all duration-200 text-brand-link hover:text-brand-600 hover:cursor-pointer ', ].join(' ')} >
    diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx index 25fb97f180c06..9991c5c7266bb 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 === pathname ? 'text-brand' : 'hover:text-brand text-foreground', + props.url === pathname ? 'text-brand-link' : 'hover:text-brand-link text-foreground', ].join(' ')} > {props.title ?? props.id} @@ -75,7 +75,7 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any 'flex items-center gap-2', 'cursor-pointer transition text-sm', activeItem - ? 'text-brand font-medium' + ? 'text-brand-link font-medium' : 'hover:text-foreground text-foreground-lighter', ].join(' ')} parent={props.subItem.parent} @@ -104,8 +104,8 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any className={[ 'cursor-pointer transition text-sm', subSubItem.url === pathname - ? 'text-brand' - : 'hover:text-brand text-foreground-lighter', + ? 'text-brand-link' + : 'hover:text-brand-link text-foreground-lighter', ].join(' ')} > {subSubItem.name} diff --git a/apps/docs/components/Navigation/SideBar.tsx b/apps/docs/components/Navigation/SideBar.tsx index d754fadbc7a73..04badfb27877a 100644 --- a/apps/docs/components/Navigation/SideBar.tsx +++ b/apps/docs/components/Navigation/SideBar.tsx @@ -105,7 +105,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => { size={14} strokeWidth={2} /> - + {group.label} @@ -119,7 +119,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => { 'py-1.5 px-5 rounded text-sm transition', `${ section.url === pathname - ? 'bg-background text-brand' + ? 'bg-background text-brand-link' : 'text-foreground-light hover:text-foreground' }`, ].join(' ')} @@ -144,7 +144,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => { size={14} strokeWidth={2} /> - + {section.name} @@ -157,7 +157,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => { 'py-1.5 ml-4 px-5 rounded text-sm transition', `${ item.url === pathname - ? 'bg-background text-brand' + ? 'bg-background text-brand-link' : 'text-foreground-light hover:text-foreground' }`, ].join(' ')} diff --git a/apps/docs/features/docs/Reference.header.tsx b/apps/docs/features/docs/Reference.header.tsx index 518d112377fac..82946f133de2c 100644 --- a/apps/docs/features/docs/Reference.header.tsx +++ b/apps/docs/features/docs/Reference.header.tsx @@ -40,7 +40,7 @@ function ClientLibHeader({ menuData, className }: ClientLibHeaderProps) { href={menuData.pkg.repo} target="_blank" rel="noreferrer noopener" - className="hover:text-brand focus-visible:text-brand transition-colors" + className="hover:text-brand-link focus-visible:text-brand-link transition-colors" > View on GitHub diff --git a/apps/docs/features/docs/Reference.ui.tsx b/apps/docs/features/docs/Reference.ui.tsx index c96ad830c1fd8..b04fdd9b964ea 100644 --- a/apps/docs/features/docs/Reference.ui.tsx +++ b/apps/docs/features/docs/Reference.ui.tsx @@ -221,7 +221,7 @@ function ParamOrTypeDetails({ paramOrType }: { paramOrType: object }) { /> {/* @ts-ignore */} {paramOrType?.comment?.tags?.some((tag) => tag.tag === 'deprecated') && ( - Deprecated + Deprecated )} {getTypeName(paramOrType)}
    @@ -353,7 +353,7 @@ export function ApiSchemaParamDetails({ param }: { param: IApiEndPoint['paramete {param.name} - {param.schema?.deprecated && Deprecated} + {param.schema?.deprecated && Deprecated} {param.schema && ( {getTypeDisplayFromSchema(param.schema)?.displayName ?? ''} diff --git a/apps/studio/components/interfaces/APIKeys/SecretAPIKeys.tsx b/apps/studio/components/interfaces/APIKeys/SecretAPIKeys.tsx index 273b0cb6e640f..2debd28019afb 100644 --- a/apps/studio/components/interfaces/APIKeys/SecretAPIKeys.tsx +++ b/apps/studio/components/interfaces/APIKeys/SecretAPIKeys.tsx @@ -1,13 +1,14 @@ import { PermissionAction } from '@supabase/shared-types/out/constants' import dayjs from 'dayjs' -import { useMemo, useRef } from 'react' +import { ReactNode, useMemo, useRef } from 'react' import { useParams } from 'common' +import AlertError from 'components/ui/AlertError' import { FormHeader } from 'components/ui/Forms/FormHeader' import { APIKeysData, useAPIKeysQuery } from 'data/api-keys/api-keys-query' import useLogsQuery from 'hooks/analytics/useLogsQuery' import { useAsyncCheckProjectPermissions } from 'hooks/misc/useCheckPermissions' -import { Card, CardContent, EyeOffIcon, Skeleton, WarningIcon, cn } from 'ui' +import { Card, CardContent, EyeOffIcon, Skeleton, cn } from 'ui' import { Table, TableBody, @@ -52,8 +53,9 @@ export const SecretAPIKeys = () => { const { ref: projectRef } = useParams() const { data: apiKeysData, - isLoading: isLoadingApiKeys, error, + isLoading: isLoadingApiKeys, + isError: isErrorApiKeys, } = useAPIKeysQuery({ projectRef, reveal: false }) const { can: canReadAPIKeys, isLoading: isLoadingPermissions } = useAsyncCheckProjectPermissions( @@ -90,14 +92,14 @@ export const SecretAPIKeys = () => { ) - const TableContainer = ({ children }: { children: React.ReactNode }) => ( + const TableContainer = ({ children, className }: { children: ReactNode; className?: string }) => (
    } /> - + @@ -147,14 +149,10 @@ export const SecretAPIKeys = () => { ) } - if (error) { + if (isErrorApiKeys) { return ( - -
    - -

    Error loading Secret API Keys

    -

    {error.message}

    -
    + + ) } diff --git a/apps/studio/components/interfaces/Auth/Users/UserLogs.tsx b/apps/studio/components/interfaces/Auth/Users/UserLogs.tsx index a0a13a8479cb3..b24c16e3f6c4c 100644 --- a/apps/studio/components/interfaces/Auth/Users/UserLogs.tsx +++ b/apps/studio/components/interfaces/Auth/Users/UserLogs.tsx @@ -127,10 +127,7 @@ export const UserLogs = ({ user }: UserLogsProps) => { )} > {(is400 || is500) && ( - + )} {status} diff --git a/apps/studio/components/interfaces/Database/Replication/PipelineStatus.tsx b/apps/studio/components/interfaces/Database/Replication/PipelineStatus.tsx index e0804c42dfaed..16c666ba212fc 100644 --- a/apps/studio/components/interfaces/Database/Replication/PipelineStatus.tsx +++ b/apps/studio/components/interfaces/Database/Replication/PipelineStatus.tsx @@ -52,24 +52,24 @@ export const PipelineStatus = ({ if (requestStatus === PipelineStatusRequestStatus.RestartRequested) { return { label: 'Restarting', - dot: , - color: 'text-warning-600', + dot: , + color: 'text-warning', tooltip: stateMessages.message, } } if (requestStatus === PipelineStatusRequestStatus.StartRequested) { return { label: 'Starting', - dot: , - color: 'text-warning-600', + dot: , + color: 'text-warning', tooltip: stateMessages.message, } } if (requestStatus === PipelineStatusRequestStatus.StopRequested) { return { label: 'Stopping', - dot: , - color: 'text-warning-600', + dot: , + color: 'text-warning', tooltip: stateMessages.message, } } @@ -86,8 +86,8 @@ export const PipelineStatus = ({ case PipelineStatusName.STARTING: return { label: 'Starting', - dot: , - color: 'text-warning-600', + dot: , + color: 'text-warning', tooltip: stateMessages.message, } case PipelineStatusName.STARTED: @@ -108,7 +108,7 @@ export const PipelineStatus = ({ return { label: 'Unknown', dot:
    , - color: 'text-warning-600', + color: 'text-warning', tooltip: stateMessages.message, } default: diff --git a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus.utils.tsx b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus.utils.tsx index cb2370426151e..a4d3504431bc7 100644 --- a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus.utils.tsx +++ b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus.utils.tsx @@ -11,7 +11,7 @@ export const getStatusConfig = (state: TableState['state']) => { return { badge: Queued, description: 'Waiting to start replication', - color: 'text-warning-600', + color: 'text-warning', } case 'copying_table': return { @@ -41,7 +41,7 @@ export const getStatusConfig = (state: TableState['state']) => { return { badge: Unknown, description: 'Unknown status', - color: 'text-warning-600', + color: 'text-warning', } } } diff --git a/apps/studio/components/interfaces/DiskManagement/fields/DiskSizeField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/DiskSizeField.tsx index 97b201fbbe2c2..ce2105adb2214 100644 --- a/apps/studio/components/interfaces/DiskManagement/fields/DiskSizeField.tsx +++ b/apps/studio/components/interfaces/DiskManagement/fields/DiskSizeField.tsx @@ -16,7 +16,7 @@ import { calculateDiskSizePrice } from '../DiskManagement.utils' import { BillingChangeBadge } from '../ui/BillingChangeBadge' import { DiskType, PLAN_DETAILS } from '../ui/DiskManagement.constants' import { DiskManagementDiskSizeReadReplicas } from '../ui/DiskManagementReadReplicas' -import DiskSpaceBar from '../ui/DiskSpaceBar' +import { DiskSpaceBar } from '../ui/DiskSpaceBar' import { DiskTypeRecommendationSection } from '../ui/DiskTypeRecommendationSection' import FormMessage from '../ui/FormMessage' import { InputPostTab } from '../ui/InputPostTab' diff --git a/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx b/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx index 5eb8b609d99c2..2588fe0bdee6d 100644 --- a/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx +++ b/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx @@ -19,7 +19,7 @@ interface DiskSpaceBarProps { form: UseFormReturn } -export default function DiskSpaceBar({ form }: DiskSpaceBarProps) { +export const DiskSpaceBar = ({ form }: DiskSpaceBarProps) => { const { ref } = useParams() const { resolvedTheme } = useTheme() const { formState, watch } = form @@ -94,7 +94,7 @@ export default function DiskSpaceBar({ form }: DiskSpaceBarProps) {
    diff --git a/apps/studio/components/interfaces/Linter/LintPageTabs.tsx b/apps/studio/components/interfaces/Linter/LintPageTabs.tsx index 9047a0b8da525..ede1abe89bff2 100644 --- a/apps/studio/components/interfaces/Linter/LintPageTabs.tsx +++ b/apps/studio/components/interfaces/Linter/LintPageTabs.tsx @@ -103,7 +103,7 @@ const LintPageTabs = ({ tab.id === LINTER_LEVELS.ERROR ? 'text-destructive-600' : tab.id === LINTER_LEVELS.WARN - ? 'text-warning-600' + ? 'text-warning' : 'text-brand-500' } > diff --git a/apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx b/apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx index 144f72ff09043..afbee18af5a50 100644 --- a/apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx +++ b/apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx @@ -87,7 +87,7 @@ export const RegionSelector = ({ <>

    Select the region closest to your users for the best performance.

    {showNonProdFields && ( -
    +

    Only these regions are supported for local/staging projects:

    • East US (North Virginia)
      • diff --git a/apps/studio/components/interfaces/Realtime/Inspector/RealtimeMessageColumnRenderer.tsx b/apps/studio/components/interfaces/Realtime/Inspector/RealtimeMessageColumnRenderer.tsx index 41f2eac07833b..464ec53ec98eb 100644 --- a/apps/studio/components/interfaces/Realtime/Inspector/RealtimeMessageColumnRenderer.tsx +++ b/apps/studio/components/interfaces/Realtime/Inspector/RealtimeMessageColumnRenderer.tsx @@ -25,17 +25,15 @@ export const ColumnRenderer: Column[] = [
      {ICONS[type]}
      - + {new Date(data.row.timestamp).toISOString()} - + {JSON.stringify(data.row.metadata)} diff --git a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubStatus.tsx b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubStatus.tsx index e67a721242cf3..16f62eb9f5e03 100644 --- a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubStatus.tsx +++ b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubStatus.tsx @@ -86,7 +86,7 @@ export const GitHubStatus = () => { {hasGitBranchSync ? ( ) : ( - + )} {hasGitBranchSync @@ -98,7 +98,7 @@ export const GitHubStatus = () => { {hasAutomaticBranching ? ( ) : ( - + )} {hasAutomaticBranching diff --git a/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx b/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx index 6d49492a126dc..594cc58012f6a 100644 --- a/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx +++ b/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx @@ -252,7 +252,7 @@ const VercelIntegrationConnectionForm = ({
    {form.formState.isDirty ? ( -

    +

    Note: Changing these settings will not trigger a resync of environment variables.

    diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.DatePickers.tsx b/apps/studio/components/interfaces/Settings/Logs/Logs.DatePickers.tsx index 4200143336db4..34644e08539ef 100644 --- a/apps/studio/components/interfaces/Settings/Logs/Logs.DatePickers.tsx +++ b/apps/studio/components/interfaces/Settings/Logs/Logs.DatePickers.tsx @@ -391,7 +391,7 @@ export const LogsDatePicker = ({ />
    {isLargeRange && !hideWarnings && ( -
    +
    Large ranges may result in memory errors for
    big projects.
    )} diff --git a/apps/studio/components/ui/DataTable/DataTable.utils.ts b/apps/studio/components/ui/DataTable/DataTable.utils.ts index 3f7c330a8ffc7..804e3b6dbfb7d 100644 --- a/apps/studio/components/ui/DataTable/DataTable.utils.ts +++ b/apps/studio/components/ui/DataTable/DataTable.utils.ts @@ -107,8 +107,8 @@ export function getStatusColor(value?: number | string): Record<'text' | 'bg' | case 'warning': case 'redirect': return { - text: 'text-warning-600 dark:text-warning', - bg: 'bg-warning-300 dark:bg-waning-200', + text: 'text-warning', + bg: 'bg-warning-300 dark:bg-warning-200', border: 'border border-warning-400/50 dark:border-warning-400/50', } case '5': diff --git a/apps/www/components/Footer/index.tsx b/apps/www/components/Footer/index.tsx index 49d067de71326..26fba97af5c40 100644 --- a/apps/www/components/Footer/index.tsx +++ b/apps/www/components/Footer/index.tsx @@ -58,7 +58,7 @@ const Footer = (props: Props) => {
    We protect your data. - + More on Security
    diff --git a/apps/www/components/Sections/CustomerQuotesSection.tsx b/apps/www/components/Sections/CustomerQuotesSection.tsx index 9c6becfe71444..829b81db4fa74 100644 --- a/apps/www/components/Sections/CustomerQuotesSection.tsx +++ b/apps/www/components/Sections/CustomerQuotesSection.tsx @@ -76,7 +76,7 @@ const CustomerQuotesSection = (props: Props) => { {customer.author}, {customer.role}

    {customer.url && ( -
    +
    Read Customer Story
    diff --git a/apps/www/pages/legal/dpa.tsx b/apps/www/pages/legal/dpa.tsx index d14eca794d528..68e6a2466ced4 100644 --- a/apps/www/pages/legal/dpa.tsx +++ b/apps/www/pages/legal/dpa.tsx @@ -22,7 +22,7 @@ const DPA = () => { href="https://supabase.com/downloads/docs/Supabase+DPA+250805.pdf" target="_blank" rel="noopener noreferrer" - className="text-brand hover:underline" + className="text-brand-link hover:underline" onClick={() => sendTelemetryEvent({ action: 'dpa_pdf_opened', @@ -42,7 +42,7 @@ const DPA = () => { href="https://supabase.com/dashboard/org/_/documents" target="_blank" rel="noopener noreferrer" - className="text-brand hover:underline" + className="text-brand-link hover:underline" > request it from the legal documents page {' '} diff --git a/apps/www/pages/partners/integrations/[slug].tsx b/apps/www/pages/partners/integrations/[slug].tsx index 0391250d51b08..38fe738a2fb05 100644 --- a/apps/www/pages/partners/integrations/[slug].tsx +++ b/apps/www/pages/partners/integrations/[slug].tsx @@ -248,7 +248,7 @@ const PartnerDetails = ({ partner }: { partner: Partner }) => { Category {partner.category} @@ -260,7 +260,7 @@ const PartnerDetails = ({ partner }: { partner: Partner }) => { href={partner.website} target="_blank" rel="noreferrer" - className="text-brand hover:underline transition-colors" + className="text-brand-link hover:underline transition-colors" > {new URL(partner.website).host} @@ -273,7 +273,7 @@ const PartnerDetails = ({ partner }: { partner: Partner }) => { href={partner.docs} target="_blank" rel="noreferrer" - className="text-brand hover:underline transition-colors" + className="text-brand-link hover:underline transition-colors" > Learn diff --git a/packages/ui-patterns/src/GlassPanel/index.tsx b/packages/ui-patterns/src/GlassPanel/index.tsx index c28771a7863bf..9a79ef5490c93 100644 --- a/packages/ui-patterns/src/GlassPanel/index.tsx +++ b/packages/ui-patterns/src/GlassPanel/index.tsx @@ -119,7 +119,7 @@ export const GlassPanel = ({
    {children && {children}} - {showLink && Learn more} + {showLink && Learn more}
    ) diff --git a/packages/ui-patterns/src/IconPanel/index.tsx b/packages/ui-patterns/src/IconPanel/index.tsx index 0d864d2f2ea1c..5377024f1ffed 100644 --- a/packages/ui-patterns/src/IconPanel/index.tsx +++ b/packages/ui-patterns/src/IconPanel/index.tsx @@ -102,7 +102,7 @@ export const IconPanel = ({ {children && ( {children} )} - {showLink && Learn more} + {showLink && Learn more}
    diff --git a/packages/ui/build/css/themes/classic-dark.css b/packages/ui/build/css/themes/classic-dark.css index cfca7fb104d79..4d140300dd69a 100644 --- a/packages/ui/build/css/themes/classic-dark.css +++ b/packages/ui/build/css/themes/classic-dark.css @@ -10,7 +10,6 @@ --secondary-400: 0deg 0% 100%; --secondary-200: 0deg 0% 100%; --brand-link: 153.1deg 60.2% 52.7%; - --brand-button: 151.8deg 47.1% 40.8%; --brand-default: 153.1deg 60.2% 52.7%; --brand-600: 153deg 59.5% 70%; --brand-500: 153.5deg 61.8% 21.6%; diff --git a/packages/ui/build/css/themes/concept-two.css b/packages/ui/build/css/themes/concept-two.css index e60a2ee68bdb2..dd768064c4849 100644 --- a/packages/ui/build/css/themes/concept-two.css +++ b/packages/ui/build/css/themes/concept-two.css @@ -10,7 +10,6 @@ --secondary-400: 20deg 93.2% 40.4%; --secondary-200: 17.7deg 78.9% 27.8%; --brand-link: 163.9deg 53.2% 15.1%; - --brand-button: 175.6deg 61.8% 21.6%; --brand-default: 163.9deg 53.2% 15.1%; --brand-600: 156.3deg 59.5% 70%; --brand-500: 175.6deg 61.8% 21.6%; diff --git a/packages/ui/build/css/themes/dark-combined.css b/packages/ui/build/css/themes/dark-combined.css index d88ac21b51eff..5420c2f9bc35a 100644 --- a/packages/ui/build/css/themes/dark-combined.css +++ b/packages/ui/build/css/themes/dark-combined.css @@ -14,7 +14,6 @@ --secondary-400: 248.3deg 54.5% 25.9%; --secondary-200: 248deg 53.6% 11%; --brand-link: 155deg 100% 38.6%; - --brand-button: 154.9deg 100% 19.2%; --brand-default: 153.1deg 60.2% 52.7%; --brand-600: 154.9deg 59.5% 70%; --brand-500: 154.9deg 100% 19.2%; diff --git a/packages/ui/build/css/themes/dark.css b/packages/ui/build/css/themes/dark.css index 94c8e953e87ac..7798d095d1bca 100644 --- a/packages/ui/build/css/themes/dark.css +++ b/packages/ui/build/css/themes/dark.css @@ -12,14 +12,13 @@ --secondary-400: 248.3deg 54.5% 25.9%; --secondary-200: 248deg 53.6% 11%; --brand-link: 155deg 100% 38.6%; - --brand-button: 154.9deg 100% 19.2%; --brand-default: 153.1deg 60.2% 52.7%; --brand-600: 154.9deg 59.5% 70%; --brand-500: 154.9deg 100% 19.2%; --brand-400: 155.5deg 100% 9.6%; --brand-300: 155.1deg 100% 8%; --brand-200: 162deg 100% 2%; - --warning-default: 38.9deg 100% 42.9%; + --warning-default: 38.9deg 100% 42.9%; /* warning-600 */ --warning-600: 38.9deg 100% 42.9%; --warning-500: 34.8deg 90.9% 21.6%; --warning-400: 33.2deg 100% 14.5%; diff --git a/packages/ui/build/css/themes/light.css b/packages/ui/build/css/themes/light.css index 355e540e15111..71766dbe3f7e6 100644 --- a/packages/ui/build/css/themes/light.css +++ b/packages/ui/build/css/themes/light.css @@ -10,14 +10,13 @@ --secondary-400: 248.3deg 54.5% 25.9%; --secondary-200: 248deg 53.6% 11%; --brand-link: 153.4deg 100% 36.7%; - --brand-button: 151.8deg 47.1% 40.8%; --brand-default: 152.9deg 60% 52.9%; --brand-600: 156.5deg 86.5% 26.1%; --brand-500: 155.3deg 78.4% 40%; --brand-400: 151.3deg 66.9% 66.9%; --brand-300: 147.5deg 72% 80.4%; --brand-200: 147.6deg 72.5% 90%; - --warning-default: 38.9deg 100% 57.1%; + --warning-default: 30.3deg 80.3% 47.8%; /* warning-600 */ --warning-600: 30.3deg 80.3% 47.8%; --warning-500: 36.3deg 85.7% 67.1%; --warning-400: 41.9deg 100% 81.8%; diff --git a/packages/ui/build/css/tw-extend/color.js b/packages/ui/build/css/tw-extend/color.js index 1e2e93751ddc7..013fc7024a82f 100644 --- a/packages/ui/build/css/tw-extend/color.js +++ b/packages/ui/build/css/tw-extend/color.js @@ -603,10 +603,6 @@ module.exports = { cssVariable: 'var(--brand-default)', value: 'hsl(153.10000000000002, 60.2%, 52.7%)', }, - 'brand-button': { - cssVariable: 'var(--brand-button)', - value: 'hsl(154.89999999999998, 100%, 19.2%)', - }, 'brand-link': { cssVariable: 'var(--brand-link)', value: 'hsl(155, 100%, 38.6%)', diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx index df71885573960..9fb253e6f8e8a 100644 --- a/packages/ui/src/components/Button/Button.tsx +++ b/packages/ui/src/components/Button/Button.tsx @@ -177,7 +177,7 @@ const IconContainerVariants = cva('', { link: 'text-brand-600', text: 'text-foreground-lighter', danger: 'text-destructive-600', - warning: 'text-warning-600', + warning: 'text-warning', }, }, }) @@ -195,7 +195,7 @@ const loadingVariants = cva('', { link: 'text-brand-600', text: 'text-foreground-muted', danger: 'text-destructive-600', - warning: 'text-warning-600', + warning: 'text-warning', }, loading: { default: '', diff --git a/packages/ui/src/components/StatusIcon.tsx b/packages/ui/src/components/StatusIcon.tsx index 15e63505f4af5..75e3b9b5e9b98 100644 --- a/packages/ui/src/components/StatusIcon.tsx +++ b/packages/ui/src/components/StatusIcon.tsx @@ -91,7 +91,7 @@ const WarningIcon: React.FC & StatusIconProps> = ({ className={cn( !hideBackground ? 'w-4 h-4 p-0.5 bg-warning-600 text-warning-200 rounded' - : 'w-3 h-3 text-warning-600', + : 'w-3 h-3 text-warning', props.className )} > @@ -151,7 +151,7 @@ const EyeIcon: React.FC & StatusIconProps> = ({ className={cn( !hideBackground ? 'w-4 h-4 p-0.5 bg-warning-600 text-warning-200 rounded' - : 'w-3 h-3 text-warning-600', + : 'w-3 h-3 text-warning', props.className )} > @@ -180,7 +180,7 @@ const EyeOffIcon: React.FC & StatusIconProps> = ({ className={cn( !hideBackground ? 'w-4 h-4 p-0.5 bg-foreground-light text-background rounded' - : 'w-3 h-3 text-warning-600', + : 'w-3 h-3 text-warning', props.className )} > diff --git a/packages/ui/src/components/shadcn/ui/badge.tsx b/packages/ui/src/components/shadcn/ui/badge.tsx index 3e68a1b8574f4..343c1a5c80479 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-foreground-light border border-strong', - warning: 'bg-warning text-warning-600 border border-warning-500', + warning: 'bg-warning text-warning border border-warning-500', success: 'bg-brand text-brand-600 border border-brand-500', destructive: 'bg-destructive text-destructive-600 border border-destructive-500', brand: 'bg-brand text-brand-600 border border-brand-500', diff --git a/packages/ui/src/lib/tailwind-demo-classes.ts b/packages/ui/src/lib/tailwind-demo-classes.ts index 015278bf9b4d9..44d478dbd1c75 100644 --- a/packages/ui/src/lib/tailwind-demo-classes.ts +++ b/packages/ui/src/lib/tailwind-demo-classes.ts @@ -31,7 +31,16 @@ export default { 'border-button', 'border-button-hover', ], - text: ['text', 'text-light', 'text-lighter', 'text-muted', 'text-contrast'], + text: [ + 'text', + 'text-light', + 'text-lighter', + 'text-muted', + 'text-contrast', + 'text-destructive', + 'text-warning', + 'text-brand', + ], colors: [ 'bg-destructive-200', 'bg-destructive-300', @@ -51,7 +60,6 @@ export default { 'bg-brand-500', 'bg-brand-600', 'bg-brand', - 'bg-brand-button', 'bg-brand-link', 'bg-_secondary-200', 'bg-_secondary-400',