fix: update dark mode css. update borders for light and dark mode (#22392)

* update dark mode css. update borders for light and dark mode

* Delete concept-two.css

* Update Panel.tsx

* clean up

apps/studio/components/grid/components/footer/Footer.tsx

@@ -38,7 +38,7 @@ const Footer = ({ isLoading, isRefetching }: FooterProps) => {
           width={75}
           options={['definition', 'data']}
           activeOption={selectedView}
-          borderOverride="border-gray-500"
+          borderOverride="border"
           onClickOption={setSelectedView}
         />
       </div>

apps/studio/components/grid/components/header/Header.tsx

@@ -377,7 +377,7 @@ const RowHeader = ({ table, sorts, filters }: RowHeaderProps) => {
           </Button>
         )}
       </div>
-      <div className="h-[20px] border-r border-gray-700" />
+      <div className="h-[20px] border-r border-strong" />
       <div className="flex items-center gap-2">
         <Button
           type="primary"

apps/studio/components/grid/components/menu/ColumnMenu.tsx

@@ -12,6 +12,7 @@ import {
   IconLock,
   IconTrash,
   IconUnlock,
+  Separator,
 } from 'ui'
 
 import { useDispatch, useTrackedState } from '../../store'
@@ -92,7 +93,7 @@ const ColumnMenu = ({ column, isEncrypted }: ColumnMenuProps) => {
         </DropdownMenuItem>
         {state.editable && onDeleteColumn !== undefined && (
           <>
-            <Divider light />
+            <Separator />
             <DropdownMenuItem className="space-x-2" onClick={onDeleteColumn}>
               <IconTrash size="tiny" stroke="red" />
               <p>Delete column</p>

apps/studio/components/interfaces/Auth/Users/UserDropdown.tsx

@@ -121,7 +121,7 @@ const UserDropdown = ({
     <>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button type="text" loading={isLoading} className="hover:border-gray-500 flex">
+          <Button type="text" loading={isLoading} className="hover:border-muted flex">
             <IconMoreVertical />
           </Button>
         </DropdownMenuTrigger>

apps/studio/components/interfaces/Auth/Users/UsersListItemSkeleton.tsx

@@ -27,7 +27,7 @@ const UsersListItemSkeleton = () => {
         <ShimmeringLoader className="h-[20px] py-0 w-20" />
       </Table.td>
       <Table.td className="table-cell">
-        <Button type="text" disabled={true} className="hover:border-gray-500 flex">
+        <Button type="text" disabled={true} className="hover:border-muted flex">
           <IconMoreHorizontal />
         </Button>
       </Table.td>

apps/studio/components/interfaces/Database/Backups/BackupsEmpty.tsx

@@ -2,7 +2,7 @@ import { IconInfo } from 'ui'
 
 const BackupsEmpty = () => {
   return (
-    <div className="block w-full rounded border border-gray-400 border-opacity-50 bg-gray-300 p-3">
+    <div className="block w-full rounded border border-muted border-opacity-50 bg-gray-300 p-3">
       <div className="flex space-x-3">
         <IconInfo size={20} strokeWidth={1.5} />
         <p className="text-sm">No backups created yet - check again tomorrow.</p>

apps/studio/components/interfaces/Database/Roles/RolesList.tsx

@@ -3,6 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { partition, sortBy } from 'lodash'
 import { Plus, Search, X } from 'lucide-react'
 import { useState } from 'react'
+import { Badge, Button, Input } from 'ui'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import NoSearchResults from 'components/ui/NoSearchResults'
@@ -10,7 +11,6 @@ import SparkBar from 'components/ui/SparkBar'
 import { useDatabaseRolesQuery } from 'data/database-roles/database-roles-query'
 import { useMaxConnectionsQuery } from 'data/database/max-connections-query'
 import { useCheckPermissions } from 'hooks'
-import { Badge, Button, Input } from 'ui'
 import CreateRolePanel from './CreateRolePanel'
 import DeleteRoleModal from './DeleteRoleModal'
 import RoleRow from './RoleRow'
@@ -118,12 +118,12 @@ const RolesList = () => {
                   value={totalActiveConnections}
                   barClass={
                     maxConnectionLimit === 0 || maxConnectionLimit === undefined
-                      ? 'bg-control'
+                      ? 'bg-foreground'
                       : totalActiveConnections > 0.9 * maxConnectionLimit
-                        ? 'bg-red-800'
+                        ? 'bg-destructive'
                         : totalActiveConnections > 0.75 * maxConnectionLimit
-                          ? 'bg-amber-900'
-                          : 'bg-green-800'
+                          ? 'bg-warning'
+                          : undefined
                   }
                   labelTop={
                     Number.isInteger(maxConnectionLimit)

apps/studio/components/interfaces/Database/Tables/TableList.tsx

@@ -262,7 +262,7 @@ const TableList = ({
                             asChild
                             type="default"
                             iconRight={<Columns size={14} className="text-foreground-light" />}
-                            className="whitespace-nowrap hover:border-gray-500"
+                            className="whitespace-nowrap hover:border-muted"
                             style={{ paddingTop: 3, paddingBottom: 3 }}
                           >
                             <Link href={`/project/${ref}/database/tables/${x.id}`}>

apps/studio/components/interfaces/Database/Wrappers/WrappersDisabledState.tsx

@@ -74,7 +74,7 @@ const WrappersDisabledState = () => {
   return (
     <div>
       <div
-        className="w-full px-12 py-12 bg-no-repeat border rounded bg-studio border-default"
+        className="w-full px-12 py-12 bg-no-repeat border rounded-md bg-studio border-default"
         style={{
           backgroundSize: '45%',
           backgroundPosition: '105% 40%',

apps/studio/components/interfaces/Home/ProjectList/ProjectList.tsx

@@ -245,7 +245,7 @@ const OrganizationProjects = ({
 
 const NoProjectsState = ({ slug }: { slug: string }) => {
   return (
-    <div className="col-span-4 space-y-4 rounded-lg border-2 border-dashed border-gray-300 p-6 text-center">
+    <div className="col-span-4 space-y-4 rounded-lg border border-dashed p-6 text-center">
       <div className="space-y-1">
         <p>No projects</p>
         <p className="text-sm text-foreground-light">Get started by creating a new project.</p>

apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/PaymentMethods.tsx

@@ -172,10 +172,7 @@ const PaymentMethods = () => {
                                   {canUpdatePaymentMethods && !isActive ? (
                                     <DropdownMenu>
                                       <DropdownMenuTrigger asChild>
-                                        <Button
-                                          type="outline"
-                                          className="hover:border-gray-500 px-1"
-                                        >
+                                        <Button type="outline" className="hover:border-muted px-1">
                                           <IconMoreHorizontal />
                                         </Button>
                                       </DropdownMenuTrigger>

apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx

@@ -173,7 +173,6 @@ const NewOrgForm = ({ onPaymentMethodReset }: NewOrgFormProps) => {
     <>
       <form onSubmit={handleSubmit}>
         <Panel
-          hideHeaderStyling
           title={
             <div key="panel-title">
               <h4>Create a new organization</h4>
@@ -361,7 +360,7 @@ const NewOrgForm = ({ onPaymentMethodReset }: NewOrgFormProps) => {
                       icon={<IconEdit2 />}
                       onClick={() => resetPaymentMethod()}
                       disabled={newOrgLoading}
-                      className="hover:border-gray-500"
+                      className="hover:border-muted"
                     />
                   </div>
                 </div>

apps/studio/components/interfaces/Organization/NewProject/FreeProjectLimitWarning.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import { Button, IconAlertCircle } from 'ui'
+import { Admonition, Button, IconAlertCircle } from 'ui'
 
 import InformationBox from 'components/ui/InformationBox'
 import type { MemberWithFreeProjectLimit } from 'data/organizations/free-project-limit-check-query'
@@ -14,8 +14,38 @@ const FreeProjectLimitWarning = ({
   orgSlug,
 }: FreeProjectLimitWarningProps) => {
   return (
-    <div>
-      <InformationBox
+    <>
+      <Admonition
+        type={'default'}
+        title={'The organization has members who have exceeded their free project limits'}
+        description={
+          <div className="space-y-3">
+            <p className="text-sm leading-normal">
+              The following members have reached their maximum limits for the number of active free
+              plan projects within organizations where they are an administrator or owner:
+            </p>
+            <ul className="pl-5 list-disc">
+              {membersExceededLimit.map((member, idx: number) => (
+                <li key={`member-${idx}`}>
+                  {member.username || member.primary_email} (Limit: {member.free_project_limit} free
+                  projects)
+                </li>
+              ))}
+            </ul>
+            <p className="text-sm leading-normal">
+              These members will need to either delete, pause, or upgrade one or more of these
+              projects before you're able to create a free project within this organization.
+            </p>
+
+            <div>
+              <Button asChild type="secondary">
+                <Link href={`/org/${orgSlug}/billing?panel=subscriptionPlan`}>Upgrade plan</Link>
+              </Button>
+            </div>
+          </div>
+        }
+      ></Admonition>
+      {/* <InformationBox
         icon={<IconAlertCircle className="text-foreground" size="large" strokeWidth={1.5} />}
         defaultVisibility={true}
         hideCollapse
@@ -46,8 +76,8 @@ const FreeProjectLimitWarning = ({
             </div>
           </div>
         }
-      />
-    </div>
+      /> */}
+    </>
   )
 }
 

apps/studio/components/interfaces/SQLEditor/DownloadSnippetModal.tsx

@@ -78,7 +78,7 @@ const DownloadSnippetModal = ({ id, ...props }: DownloadSnippetModalProps) => {
                       width={75}
                       options={['CLI', 'NPM']}
                       activeOption={selectedView}
-                      borderOverride="border-gray-100"
+                      borderOverride="border-muted"
                       onClickOption={() =>
                         selectedView === 'CLI' ? setSelectedView('NPM') : setSelectedView('CLI')
                       }

apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx

@@ -21,12 +21,12 @@ import {
   IconExternalLink,
   Input_Shadcn_,
   Listbox,
+  Separator,
 } from 'ui'
 import z from 'zod'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import AlertError from 'components/ui/AlertError'
-import Divider from 'components/ui/Divider'
 import { FormActions } from 'components/ui/Forms'
 import Panel from 'components/ui/Panel'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
@@ -198,7 +198,7 @@ export const ConnectionPooling = () => {
                   <ShimmeringLoader className="h-4 w-1/3 col-span-4" delayIndex={i} />
                   <ShimmeringLoader className="h-8 w-full col-span-8" delayIndex={i} />
                 </div>
-                <Divider light />
+                <Separator />
               </Fragment>
             ))}
 

apps/studio/components/interfaces/Settings/Database/DatabaseSettings/DatabaseConnectionString.tsx

@@ -7,8 +7,6 @@ import {
   CollapsibleContent_Shadcn_,
   CollapsibleTrigger_Shadcn_,
   Collapsible_Shadcn_,
-  IconChevronDown,
-  IconExternalLink,
   Input,
   Separator,
   Tabs,
@@ -34,6 +32,7 @@ import {
   getConnectionStrings,
   getPoolerTld,
 } from './DatabaseSettings.utils'
+import { ChevronDown, ExternalLink } from 'lucide-react'
 
 const CONNECTION_TYPES = [
   { id: 'uri', label: 'URI' },
@@ -174,7 +173,7 @@ export const DatabaseConnectionString = ({ appearance }: DatabaseConnectionStrin
           appearance === 'minimal' && 'border-0 shadow-none'
         )}
         bodyClassName={cn(appearance === 'minimal' && 'bg-transparent')}
-        headerClasses={cn(appearance === 'minimal' && 'bg-transparent')}
+        titleClasses={cn(appearance === 'minimal' && 'bg-transparent')}
         title={
           <div
             ref={connectionStringsRef}
@@ -198,7 +197,7 @@ export const DatabaseConnectionString = ({ appearance }: DatabaseConnectionStrin
                 )}
               >
                 {readReplicasEnabled && <DatabaseSelector />}
-                <Button asChild type="default" icon={<IconExternalLink strokeWidth={1.5} />}>
+                <Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />}>
                   <a href="https://supabase.com/docs/guides/database/connecting-to-postgres">
                     Documentation
                   </a>
@@ -261,7 +260,7 @@ export const DatabaseConnectionString = ({ appearance }: DatabaseConnectionStrin
                     <p className="text-xs text-foreground-light group-hover:text-foreground transition">
                       How to connect to a different database or switch to another user
                     </p>
-                    <IconChevronDown
+                    <ChevronDown
                       className="transition-transform duration-200"
                       strokeWidth={1.5}
                       size={14}
@@ -319,7 +318,7 @@ export const DatabaseConnectionString = ({ appearance }: DatabaseConnectionStrin
                       <p className="text-xs text-foreground-light group-hover:text-foreground transition">
                         Connecting to SQL Alchemy
                       </p>
-                      <IconChevronDown
+                      <ChevronDown
                         className="transition-transform duration-200"
                         strokeWidth={1.5}
                         size={14}

apps/studio/components/interfaces/Settings/Vault/Keys/EncryptionKeysManagement.tsx

@@ -8,7 +8,6 @@ import toast from 'react-hot-toast'
 
 import { useParams } from 'common'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import Divider from 'components/ui/Divider'
 import { usePgSodiumKeyCreateMutation } from 'data/pg-sodium-keys/pg-sodium-key-create-mutation'
 import { usePgSodiumKeyDeleteMutation } from 'data/pg-sodium-keys/pg-sodium-key-delete-mutation'
 import { usePgSodiumKeysQuery } from 'data/pg-sodium-keys/pg-sodium-keys-query'
@@ -26,6 +25,7 @@ import {
   Input,
   Listbox,
   Modal,
+  Separator,
 } from 'ui'
 
 const DEFAULT_KEY_NAME = 'No description provided'
@@ -263,7 +263,7 @@ const EncryptionKeysManagement = () => {
                         </Tooltip.Root>
                       </div>
                     </div>
-                    {idx !== keys.length - 1 && <Divider light />}
+                    {idx !== keys.length - 1 && <Separator />}
                   </Fragment>
                 )
               })}

apps/studio/components/interfaces/Settings/Vault/Secrets/SecretsManagement.tsx

@@ -6,11 +6,19 @@ import { Fragment, useEffect, useState } from 'react'
 
 import { useParams } from 'common'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import Divider from 'components/ui/Divider'
 import { useVaultSecretsQuery } from 'data/vault/vault-secrets-query'
 import { useCheckPermissions } from 'hooks'
 import type { VaultSecret } from 'types'
-import { Button, IconExternalLink, IconLoader, IconSearch, IconX, Input, Listbox } from 'ui'
+import {
+  Button,
+  IconExternalLink,
+  IconLoader,
+  IconSearch,
+  IconX,
+  Input,
+  Listbox,
+  Separator,
+} from 'ui'
 import AddNewSecretModal from './AddNewSecretModal'
 import DeleteSecretModal from './DeleteSecretModal'
 import EditSecretModal from './EditSecretModal'
@@ -172,7 +180,7 @@ const SecretsManagement = () => {
                       onSelectEdit={setSelectedSecretToEdit}
                       onSelectRemove={setSelectedSecretToRemove}
                     />
-                    {idx !== secrets.length - 1 && <Divider light />}
+                    {idx !== secrets.length - 1 && <Separator />}
                   </Fragment>
                 )
               })}

apps/studio/components/interfaces/Support/Success.tsx

@@ -1,8 +1,7 @@
 import Link from 'next/link'
 import { useState } from 'react'
-import { Button, IconCheck, IconExternalLink, IconMail, IconSearch, Input } from 'ui'
+import { Button, IconCheck, IconExternalLink, IconMail, IconSearch, Input, Separator } from 'ui'
 
-import Divider from 'components/ui/Divider'
 import { CATEGORY_OPTIONS } from './Support.constants'
 import { useProfile } from 'lib/profile'
 
@@ -36,7 +35,7 @@ const Success = ({ sentCategory = '' }: SuccessProps) => {
       {categoriesToShowAdditionalResources.includes(sentCategory) && (
         <>
           <div className="!my-10 w-full">
-            <Divider light />
+            <Separator />
           </div>
           <div className="flex flex-col items-center px-12 space-y-2">
             <p>In the meantime, tap into our community</p>
@@ -72,7 +71,7 @@ const Success = ({ sentCategory = '' }: SuccessProps) => {
         </>
       )}
       <div className="!mt-10 w-full">
-        <Divider light />
+        <Separator />
       </div>
       <div className="w-full pb-4 px-4 flex items-center justify-end">
         <Link href="/">

apps/studio/components/interfaces/Support/SupportForm.tsx

@@ -6,7 +6,6 @@ import { ChangeEvent, useEffect, useRef, useState } from 'react'
 import toast from 'react-hot-toast'
 
 import { useParams } from 'common'
-import Divider from 'components/ui/Divider'
 import InformationBox from 'components/ui/InformationBox'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import { getProjectAuthConfig } from 'data/auth/auth-config-query'
@@ -34,6 +33,7 @@ import {
   IconX,
   Input,
   Listbox,
+  Separator,
 } from 'ui'
 import MultiSelect from 'ui-patterns/MultiSelect'
 import DisabledStateForFreeTier from './DisabledStateForFreeTier'
@@ -532,7 +532,7 @@ const SupportForm = ({ setSentCategory }: SupportFormProps) => {
               </div>
             )}
 
-            <Divider light />
+            <Separator />
 
             {!isDisabled ? (
               <>

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/DrilldownViewer/DrilldownViewer.tsx

@@ -72,7 +72,7 @@ const DrilldownViewer = ({ jsonData = {} }: DrilldownViewerProps) => {
   }
 
   return (
-    <div className="border border-x-0 border-t-0 border-gray-500">
+    <div className="border border-x-0 border-t-0 border-muted">
       <div className="h-10 px-3 flex-initial flex items-center justify-between">
         <DrilldownBreadCrumbs
           breadcrumbs={breadCrumbs}
@@ -80,7 +80,7 @@ const DrilldownViewer = ({ jsonData = {} }: DrilldownViewerProps) => {
           resetBreadcrumbs={resetBreadcrumbs}
         />
       </div>
-      <div className="flex items-stretch flex-auto justify-between border-t border-gray-500">
+      <div className="flex items-stretch flex-auto justify-between border-t border-muted">
         <DrilldownPane
           pane={1}
           jsonData={jsonPane1}

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx

@@ -99,7 +99,7 @@ const JsonEdit = ({
             <TwoOptionToggle
               options={['view', 'edit']}
               activeOption={view}
-              borderOverride="border-gray-500"
+              borderOverride="border-muted"
               onClickOption={setView}
             />
           </div>

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/TextEditor.tsx

@@ -53,7 +53,7 @@ export const TextEditor = ({
           <TwoOptionToggle
             options={['view', 'edit']}
             activeOption={view}
-            borderOverride="border-gray-500"
+            borderOverride="border-muted"
             onClickOption={setView}
           />
         </div>

apps/studio/components/layouts/APIAuthorizationLayout.tsx

@@ -1,9 +1,9 @@
-import Divider from 'components/ui/Divider'
 import { BASE_PATH } from 'lib/constants'
 import { useTheme } from 'next-themes'
 import Head from 'next/head'
 import Image from 'next/legacy/image'
 import type { PropsWithChildren } from 'react'
+import { Separator } from 'ui'
 
 export interface APIAuthorizationLayoutProps {}
 
@@ -36,7 +36,7 @@ const APIAuthorizationLayout = ({ children }: PropsWithChildren<APIAuthorization
             </div>
           </div>
         </div>
-        <Divider light />
+        <Separator />
         <div className="flex flex-col justify-center flex-grow mx-auto w-[90vw] max-w-[600px] h-full space-y-4">
           {children}
         </div>

apps/studio/components/layouts/Scaffold.tsx

@@ -28,7 +28,7 @@ const ScaffoldContainer = React.forwardRef<HTMLDivElement, React.HTMLAttributes<
 
 const ScaffoldDivider = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => {
-    return <div ref={ref} {...props} className={cn('w-full h-px bg-muted', className)} />
+    return <div ref={ref} {...props} className={cn('w-full h-px bg-border', className)} />
   }
 )
 

apps/studio/components/layouts/VercelIntegrationLayout.tsx

@@ -1,8 +1,8 @@
 import Head from 'next/head'
 import type { PropsWithChildren } from 'react'
 
-import Divider from 'components/ui/Divider'
 import { BASE_PATH } from 'lib/constants'
+import { Separator } from 'ui'
 
 const VercelIntegrationLayout = ({ children }: PropsWithChildren<{}>) => {
   return (
@@ -27,7 +27,7 @@ const VercelIntegrationLayout = ({ children }: PropsWithChildren<{}>) => {
             </div>
           </div>
         </div>
-        <Divider light />
+        <Separator />
         <div className="flex-grow overflow-y-auto">
           <div className="max-w-7xl h-full mx-auto px-4 sm:px-6">
             <div className="max-w-xl h-full mx-auto py-10">{children}</div>

apps/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerColumn.tsx

@@ -38,7 +38,7 @@ const DragOverOverlay = ({ isOpen, onDragLeave, onDrop, folderIsEmpty }: any) =>
       >
         {!folderIsEmpty && (
           <div
-            className="w-3/4 h-32 border-2 border-dashed border-gray-400 rounded-md flex flex-col items-center justify-center p-6 pointer-events-none"
+            className="w-3/4 h-32 border-2 border-dashed border-muted rounded-md flex flex-col items-center justify-center p-6 pointer-events-none"
             style={{ backgroundColor: 'rgba(0,0,0,0.4)' }}
           >
             <IconUpload className="text-white pointer-events-none" size={20} strokeWidth={2} />

apps/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePolicies.tsx

@@ -209,7 +209,7 @@ const StoragePolicies = () => {
             )
           })}
 
-          <div className="!mb-4 w-full border-b border-gray-600" />
+          <div className="!mb-4 w-full border-b border-muted" />
           <p className="text-sm text-foreground-light">
             You may also write policies for the tables under the storage schema directly for greater
             control

apps/studio/components/ui/Divider.tsx

@@ -1,3 +0,0 @@
-export default function Divider({ light }: { light: Boolean }) {
-  return <div className="h-px w-full bg-muted"></div>
-}

apps/studio/components/ui/Panel.tsx

@@ -5,39 +5,33 @@ interface PanelProps {
   bodyClassName?: string
   className?: string
   footer?: JSX.Element | false
-  hideHeaderStyling?: boolean
   loading?: boolean
   noMargin?: boolean
   title?: ReactNode | false
   wrapWithLoading?: boolean
   noHideOverflow?: boolean
-  headerClasses?: string
+  titleClasses?: string
 }
 
 function Panel(props: PropsWithChildren<PanelProps>) {
   const content = (
     <div
       className={cn(
-        'rounded-md border border-overlay shadow-sm',
+        'bg-surface-100',
+        'rounded-md border shadow-sm',
         props.noHideOverflow ? '' : 'overflow-hidden',
         props.noMargin ? '' : 'mb-8',
         props.className
       )}
     >
       {props.title && (
-        <div
-          className={cn(
-            props.hideHeaderStyling ? 'bg-surface-100 border-b border-overlay' : 'bg-surface-100',
-            props.headerClasses
-          )}
-        >
+        <div className={cn('bg-surface-100 border-b border-muted', props.titleClasses)}>
           <div className="flex items-center px-6 py-4">{props.title}</div>
         </div>
       )}
-      <div className={cn('bg-surface-100', props.bodyClassName)}>{props.children}</div>
-
+      {props.children}
       {props.footer && (
-        <div className="bg-surface-100 border-t border-overlay">
+        <div className="bg-surface-100 border-t border-muted">
           <div className="flex h-12 items-center px-6">{props.footer}</div>
         </div>
       )}

apps/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 opacity-50 underline hover:opacity-100 transition cursor-pointer"
+          className="text-foreground opacity-50 underline hover:opacity-100 transition cursor-pointer"
           onClick={generateStrongPassword}
         >
           Generate a password

apps/studio/components/ui/ProductMenu/ProductMenu.tsx

@@ -43,7 +43,7 @@ const ProductMenu = ({ page, menu }: ProductMenuProps) => {
                 </div>
               </div>
             </div>
-            {idx !== menu.length - 1 && <div className="h-px w-full bg-overlay"></div>}
+            {idx !== menu.length - 1 && <div className="h-px w-full bg-border-overlay"></div>}
           </div>
         ))}
       </Menu>

apps/studio/components/ui/SparkBar.tsx

@@ -16,7 +16,7 @@ interface SparkBarProps {
 const SparkBar = ({
   max = 100,
   value = 0,
-  barClass = '',
+  barClass = 'bg-foreground',
   bgClass = '',
   type = 'vertical',
   borderClass = '',
@@ -48,7 +48,7 @@ const SparkBar = ({
         )}
         <div
           className={`relative rounded h-1 overflow-hidden w-full border p-0 ${
-            bgClass ? bgClass : 'bg-overlay-hover'
+            bgClass ? bgClass : 'bg-surface-400'
           } ${borderClass ? borderClass : 'border-none'}`}
         >
           <div

apps/studio/pages/new/[slug].tsx

@@ -6,7 +6,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { PropsWithChildren, useEffect, useRef, useState } from 'react'
 import toast from 'react-hot-toast'
-import { Badge, Button, IconExternalLink, IconUsers, Input, Listbox } from 'ui'
+import { Badge, Button, IconExternalLink, IconUsers, Input, Listbox, Separator } from 'ui'
 
 import {
   FreeProjectLimitWarning,
@@ -300,11 +300,16 @@ const Wizard: NextPageWithLayout = () => {
 
   return (
     <Panel
-      hideHeaderStyling
       loading={!isOrganizationsSuccess || isLoadingFreeProjectLimitCheck}
       title={
         <div key="panel-title">
           <h3>Create a new project</h3>
+          <p className="text-sm text-foreground-lighter">
+            Your project will have its own dedicated instance and full postgres database.
+            <br />
+            An API will be set up so you can easily interact with your new database.
+            <br />
+          </p>
         </div>
       }
       footer={
@@ -334,26 +339,13 @@ const Wizard: NextPageWithLayout = () => {
       }
     >
       <>
-        <Panel.Content className="pt-0 pb-6">
-          <p className="text-sm text-foreground-lighter">
-            Your project will have its own dedicated instance and full postgres database.
-            <br />
-            An API will be set up so you can easily interact with your new database.
-            <br />
-          </p>
-        </Panel.Content>
         {projectCreationDisabled ? (
-          <Panel.Content className="pb-8 border-t border-panel-border-interior-light [[data-theme*=dark]_&]:border-panel-border-interior-dark">
+          <Panel.Content className="pb-8">
             <DisabledWarningDueToIncident title="Project creation is currently disabled" />
           </Panel.Content>
         ) : (
-          <>
-            <Panel.Content
-              className={[
-                'space-y-4 border-t border-b',
-                'border-panel-border-interior-light [[data-theme*=dark]_&]:border-panel-border-interior-dark',
-              ].join(' ')}
-            >
+          <div className="divide-y divide-border-muted">
+            <Panel.Content className={['space-y-4'].join(' ')}>
               {(organizations?.length ?? 0) > 0 && (
                 <Listbox
                   label="Organization"
@@ -379,12 +371,7 @@ const Wizard: NextPageWithLayout = () => {
 
             {canCreateProject && (
               <>
-                <Panel.Content
-                  className={[
-                    'border-b',
-                    'border-panel-border-interior-light [[data-theme*=dark]_&]:border-panel-border-interior-dark',
-                  ].join(' ')}
-                >
+                <Panel.Content>
                   <Input
                     id="project-name"
                     layout="horizontal"
@@ -398,12 +385,7 @@ const Wizard: NextPageWithLayout = () => {
                 </Panel.Content>
 
                 {showNonProdFields && (
-                  <Panel.Content
-                    className={[
-                      'border-b',
-                      'border-panel-border-interior-light [[data-theme*=dark]_&]:border-panel-border-interior-dark',
-                    ].join(' ')}
-                  >
+                  <Panel.Content>
                     <Input
                       id="custom-postgres-version"
                       layout="horizontal"
@@ -425,12 +407,7 @@ const Wizard: NextPageWithLayout = () => {
                 )}
 
                 {cloudProviderEnabled && showNonProdFields && (
-                  <Panel.Content
-                    className={[
-                      'border-b',
-                      'border-panel-border-interior-light [[data-theme*=dark]_&]:border-panel-border-interior-dark',
-                    ].join(' ')}
-                  >
+                  <Panel.Content>
                     <Listbox
                       layout="horizontal"
                       label="Cloud Provider"
@@ -453,12 +430,7 @@ const Wizard: NextPageWithLayout = () => {
                 )}
 
                 {orgSubscription?.plan.id !== 'free' && (
-                  <Panel.Content
-                    className={[
-                      'border-b',
-                      'border-panel-border-interior-light [[data-theme*=dark]_&]:border-panel-border-interior-dark',
-                    ].join(' ')}
-                  >
+                  <Panel.Content>
                     <Listbox
                       layout="horizontal"
                       label={
@@ -537,7 +509,7 @@ const Wizard: NextPageWithLayout = () => {
                   </Panel.Content>
                 )}
 
-                <Panel.Content className="border-b border-panel-border-interior-light [[data-theme*=dark]_&]:border-panel-border-interior-dark">
+                <Panel.Content>
                   <Input
                     id="password"
                     copy={dbPass.length > 0}
@@ -559,7 +531,7 @@ const Wizard: NextPageWithLayout = () => {
                   />
                 </Panel.Content>
 
-                <Panel.Content className="border-b border-panel-border-interior-light [[data-theme*=dark]_&]:border-panel-border-interior-dark">
+                <Panel.Content>
                   <RegionSelector
                     cloudProvider={cloudProvider}
                     selectedRegion={dbRegion}
@@ -569,19 +541,15 @@ const Wizard: NextPageWithLayout = () => {
               </>
             )}
 
-            {isAdmin && (
+            {isAdmin && freePlanWithExceedingLimits && slug && (
               <Panel.Content>
-                {freePlanWithExceedingLimits && slug && (
-                  <div className="mt-4">
-                    <FreeProjectLimitWarning
-                      membersExceededLimit={membersExceededLimit || []}
-                      orgSlug={slug}
-                    />
-                  </div>
-                )}
+                <FreeProjectLimitWarning
+                  membersExceededLimit={membersExceededLimit || []}
+                  orgSlug={slug}
+                />
               </Panel.Content>
             )}
-          </>
+          </div>
         )}
       </>
     </Panel>

apps/studio/pages/org/[slug]/index.tsx

@@ -74,7 +74,7 @@ const ProjectsPage: NextPageWithLayout = () => {
             {isSuccessProjects && (
               <>
                 {(projects?.length ?? 0) === 0 ? (
-                  <div className="col-span-4 space-y-4 rounded-lg border-2 border-dashed border-gray-300 p-6 text-center">
+                  <div className="col-span-4 space-y-4 rounded-lg border border-muted border-dashed p-6 text-center">
                     <div className="space-y-1">
                       <p>No projects</p>
                       <p className="text-sm text-foreground-light">

apps/studio/pages/org/_/[[...routeSlug]].tsx

@@ -67,7 +67,7 @@ const GenericOrganizationPage: NextPage = () => {
               <ShimmeringCard />
             </ul>
           ) : organizations?.length === 0 ? (
-            <div className="col-span-4 space-y-4 rounded-lg border-2 border-dashed border-gray-300 p-6 text-center">
+            <div className="col-span-4 space-y-4 rounded-lg border border-dashed border-muted p-6 text-center">
               <div className="space-y-1">
                 <p>You are not part of any organizations yet</p>
                 <p className="text-sm text-foreground-light">

apps/studio/pages/project/[ref]/database/schemas.tsx

@@ -32,7 +32,7 @@ const SchemasPage: NextPageWithLayout = () => {
   return (
     <>
       <div className="flex w-full h-full flex-col">
-        <div className="p-4 border-b border-default">
+        <div className="p-4 border-b border-muted">
           {isLoading && (
             <div className="h-[34px] w-[260px] bg-foreground-lighter rounded shimmering-loader" />
           )}

apps/studio/pages/vercel/integrate.tsx

@@ -1,4 +1,3 @@
-import Divider from 'components/ui/Divider'
 import { makeAutoObservable, runInAction } from 'mobx'
 import { observer, useLocalObservable } from 'mobx-react-lite'
 import Link from 'next/link'
@@ -25,7 +24,7 @@ import {
   VERCEL_DEFAULT_EXTERNAL_ID,
   VERCEL_INTEGRATION_CONFIGS,
 } from 'lib/vercelConfigs'
-import { Button, IconChevronRight, IconPlusCircle, IconX, Listbox, Select } from 'ui'
+import { Button, IconChevronRight, IconPlusCircle, IconX, Listbox, Select, Separator } from 'ui'
 
 interface IVercelIntegrationStore {
   code: string
@@ -441,7 +440,7 @@ const ProjectLinks = observer(() => {
         <h4 className="text-lg">Link Vercel to Supabase</h4>
         <p>Choose which of your Vercel projects to link to your existing Supabase projects.</p>
       </div>
-      <Divider light />
+      <Separator />
       <div className="space-y-2">
         <div className="flex justify-between">
           <p className="text-foreground-light">Vercel Projects</p>
@@ -449,7 +448,7 @@ const ProjectLinks = observer(() => {
           <p className="text-foreground-light">Supabase Projects</p>
         </div>
         <ProjectLinkList />
-        <Divider light />
+        <Separator />
         <div className="flex justify-end py-4">{displayButton()}</div>
       </div>
     </div>

apps/studio/styles/ui.scss

@@ -1,8 +1,3 @@
-.dark .sbui-default-button--dark-white {
-  @apply shadow-md text-typography-body-light border-gray-50 bg-white #{!important};
-  text-shadow: none !important;
-}
-
 /* Brought over from platform to be cleaned if needed */
 
 /* Form panels */
@@ -441,4 +436,3 @@
     @apply stroke-foreground-lighter;
   }
 }
-

packages/ui/build/css/themes/dark.css

@@ -37,10 +37,10 @@
   --border-strong: var(--colors-gray-dark-700);
   --border-alternative: var(--colors-gray-dark-500);
   --border-control: var(--colors-gray-dark-600);
-  --border-overlay: var(--colors-gray-dark-400);
-  --border-secondary: var(--colors-gray-dark-400);
-  --border-muted: var(--colors-gray-dark-400);
-  --border-default: var(--colors-gray-dark-500);
+  --border-overlay: var(--colors-gray-dark-500);
+  --border-secondary: var(--colors-gray-dark-500);
+  --border-muted: var(--colors-gray-dark-500);
+  --border-default: var(--colors-gray-dark-600);
   --background-button-default: var(--colors-gray-dark-500);
   --background-muted: var(--colors-gray-dark-400);
   --background-overlay-hover: var(--colors-gray-dark-500);

packages/ui/src/components/Admonition/index.tsx

@@ -105,7 +105,7 @@ export const Admonition = forwardRef<
         <>
           <AlertTitle
             className={cn(
-              'text mt-0.5 flex gap-3 items-center text-sm [&_p]:mb-1.5 [&_p]:mt-0',
+              'text mt-0.5 flex gap-3 text-sm [&_p]:mb-1.5 [&_p]:mt-0',
               !label && 'flex-col'
             )}
           >

packages/ui/src/components/shadcn/ui/separator.tsx

@@ -14,7 +14,7 @@ const Separator = React.forwardRef<
     decorative={decorative}
     orientation={orientation}
     className={cn(
-      'shrink-0 bg-border',
+      'shrink-0 bg-border-muted',
       orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
       className
     )}