Fix/cmdk color issues (#27236)

* init

* tidy

* spelling

apps/design-system/components/command-menu.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react'
 import { useRouter } from 'next/navigation'
 import { DialogProps } from '@radix-ui/react-alert-dialog'
-import { CircleIcon, FileIcon, LaptopIcon, MoonIcon, SunIcon } from 'lucide-react'
+import { CircleIcon, LaptopIcon, MoonIcon, SunIcon } from 'lucide-react'
 import { useTheme } from 'next-themes'
 
 import { docsConfig } from '@/config/docs'

packages/ui-patterns/Cmdk/AiCommand.tsx

@@ -14,7 +14,6 @@ import { SSE } from 'sse.js'
 import {
   AiIconAnimation,
   Button,
-  IconAlertTriangle,
   IconCornerDownLeft,
   IconUser,
   Input,
@@ -29,6 +28,7 @@ import { useCommandMenu } from './CommandMenuProvider'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { cn } from 'ui/src/lib/utils'
+import { StatusIcon } from '../Icons/StatusIcons'
 
 const questions = [
   'How do I get started with Supabase?',
@@ -443,13 +443,17 @@ const AiCommand = () => {
           </CommandGroup>
         )}
         {hasError && (
-          <div className="p-6 flex flex-col items-center gap-6 mt-4">
-            <IconAlertTriangle className="text-amber-900" strokeWidth={1.5} size={21} />
-            <p className="text-lg text-foreground text-center">
-              Sorry, looks like Clippy is having a hard time!
-            </p>
-            <p className="text-sm text-foreground-muted text-center">Please try again in a bit.</p>
-            <Button size="tiny" type="secondary" onClick={handleReset}>
+          <div className="p-6 flex flex-col items-center gap-2 mt-4">
+            <StatusIcon variant="warning" />
+            <div>
+              <p className="text-sm text-foreground text-center">
+                Sorry, looks like Supabase AI is having a hard time!
+              </p>
+              <p className="text-sm text-foreground-lighter text-center">
+                Please try again in a bit.
+              </p>
+            </div>
+            <Button size="tiny" type="default" onClick={handleReset}>
               Try again?
             </Button>
           </div>

packages/ui-patterns/Cmdk/Command.utils.tsx

@@ -85,13 +85,7 @@ export const CommandDialog = ({
         }}
         hideClose
         size={'xlarge'}
-        className={cn(
-          '!bg-overlay/90 backdrop-filter backdrop-blur-sm',
-          '!border-overlay/90',
-          'transition ease-out',
-          'place-self-start mx-auto top-24',
-          animateBounce ? 'scale-[101.5%]' : 'scale-100'
-        )}
+        className={cn('place-self-start mx-auto top-24')}
       >
         <ErrorBoundary FallbackComponent={CommandError}>
           <Command
@@ -101,7 +95,6 @@ export const CommandDialog = ({
               '[&_[cmdk-item]_svg]:w-5',
               '[&_[cmdk-input-wrapper]_svg]:h-5',
               '[&_[cmdk-input-wrapper]_svg]:w-5',
-
               '[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0',
             ].join(' ')}
           >
@@ -134,7 +127,7 @@ export const CommandInput = React.forwardRef<
         className={cn(
           'flex h-11 w-full rounded-md bg-transparent px-4 py-7 text-sm outline-none',
           'focus:shadow-none focus:ring-transparent',
-          'text-foreground-light placeholder:text-border-stronger disabled:cursor-not-allowed disabled:opacity-50 border-0',
+          'text-foreground-light placeholder:text-foreground-muted disabled:cursor-not-allowed disabled:opacity-50 border-0',
           className
         )}
         {...props}
@@ -187,7 +180,7 @@ export const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      'overflow-hidden py-3 px-2 text-border-strong [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-foreground-muted',
+      'overflow-hidden py-3 px-2 text-foreground-muted [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-foreground-muted',
       className
     )}
     {...props}
@@ -210,7 +203,7 @@ export const CommandSeparator = React.forwardRef<
     className={cn(
       `h-px
     w-full
-    bg-alternative
+    bg-border
     `,
       className
     )}
@@ -245,27 +238,25 @@ export const CommandItem = React.forwardRef<CommandPrimitiveItemElement, Command
         'flex',
         type === 'block-link'
           ? `
-        bg-transparent
-        border
-        border-overlay/90
+        bg-surface-200 dark:bg-surface-100 
         px-5
         transition-all
         outline-none
-        aria-selected:border-overlay
-        aria-selected:bg-overlay-hover/90
+        aria-selected:border-foreground-muted
+        aria-selected:bg-selection
+        dark:aria-selected:bg-selection
         aria-selected:shadow-sm
-        aria-selected:scale-[100.3%]
         data-[disabled]:pointer-events-none data-[disabled]:opacity-50`
           : type === 'link'
             ? `
         px-2
         transition-all
         outline-none
-        aria-selected:bg-overlay-hover/90
+        aria-selected:bg-selection/90
         data-[disabled]:pointer-events-none data-[disabled]:opacity-50`
             : `
         px-2
-        aria-selected:bg-overlay-hover/80
+        aria-selected:bg-selection/80
         aria-selected:backdrop-filter
         aria-selected:backdrop-blur-md
         data-[disabled]:pointer-events-none
@@ -351,7 +342,7 @@ export const TextHighlighter = ({ text, query, ...props }: TextHighlighterProps)
 
     // Add back the wrapped `query` (if it's not the last element)
     if (index !== parts.length - 1) {
-      returnValue.push(<span className="font-semibold text-foreground">{query}</span>)
+      returnValue.push(<span className="text-foreground">{query}</span>)
     }
 
     return returnValue

packages/ui-patterns/Cmdk/DocsSearch.tsx

@@ -4,20 +4,13 @@ import {
   DocsSearchResultType as PageType,
   useDocsSearch,
 } from 'common'
-import {
-  AlertTriangle,
-  Book,
-  ChevronRight,
-  Github,
-  Hash,
-  MessageSquare,
-  Search,
-} from 'lucide-react'
+import { Book, ChevronRight, Github, Hash, Loader2, MessageSquare, Search } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { useEffect, useRef } from 'react'
 import { Button } from 'ui'
 import { CommandGroup, CommandItem, CommandLabel, TextHighlighter } from './Command.utils'
 import { useCommandMenu } from './CommandMenuProvider'
+import { StatusIcon } from '../Icons/StatusIcons'
 
 const questions = [
   'How do I get started with Supabase?',
@@ -143,16 +136,14 @@ const DocsSearch = () => {
       className="
         transition
         w-6 h-6
-        bg-alternative
-        group-aria-selected:scale-[105%]
-        group-aria-selected:bg-foreground
-        text-foreground
-        group-aria-selected:text-background
+        bg-surface-100
+        border
+        group-aria-selected:bg-surface-200
+        group-aria-selected:text-foreground-lighter
+        text-foreground-muted
         rounded flex
         items-center
         justify-center
-
-        group-aria-selected:[&_svg]:scale-[103%]
         "
       {...props}
     />
@@ -198,7 +189,7 @@ const DocsSearch = () => {
                 <ChevronArrow />
               </CommandItem>
               {page.sections.length > 0 && (
-                <div className="border-l border-default ml-3 pt-3">
+                <div className="border-l border-muted ml-3 pt-3">
                   {page.sections.map((section, i) => (
                     <CommandItem
                       className="ml-3 mb-3"
@@ -214,10 +205,10 @@ const DocsSearch = () => {
                     >
                       <div className="grow flex gap-3 items-center">
                         <IconContainer>{getPageSectionIcon(page)}</IconContainer>
-                        <div className="flex flex-col gap-2">
+                        <div className="flex flex-col gap-0">
                           <cite>
                             <TextHighlighter
-                              className="not-italic text-xs rounded-full px-2 py-1 bg-overlay-hover text-foreground"
+                              className="not-italic text-[10px] rounded-full px-2 py-1 bg-surface-300 text-foreground-muted"
                               text={page.title}
                               query={search}
                             />
@@ -261,27 +252,30 @@ const DocsSearch = () => {
         </CommandGroup>
       )}
       {state.status === 'loading' && state.staleResults.length === 0 && (
-        <div className="p-6 grid gap-6 my-4">
-          <p className="text-lg text-foreground-muted text-center">Searching for results</p>
+        <div className="flex items-center gap-3 my-4 justify-center">
+          <Loader2 className="animate animate-spin text-foreground-muted" size={14} />
+          <p className="text-sm text-foreground-muted text-center">Searching for results</p>
         </div>
       )}
       {state.status === 'noResults' && (
-        <div className="p-6 flex flex-col items-center gap-6 mt-4 text-foreground-light">
-          <AlertTriangle strokeWidth={1.5} size={40} />
-          <p className="text-lg text-center">No results found.</p>
-          <Button size="tiny" type="secondary" onClick={handleResetPrompt}>
+        <div className="p-6 flex flex-col items-center gap-3 mt-4 text-foreground-light">
+          <StatusIcon variant="default" />
+          <p className="text-sm text-foreground-light text-center">No results found.</p>
+          <Button size="tiny" type="default" onClick={handleResetPrompt}>
             Try again?
           </Button>
         </div>
       )}
       {state.status === 'error' && (
-        <div className="p-6 flex flex-col items-center gap-6 mt-4">
-          <AlertTriangle strokeWidth={1.5} size={40} />
-          <p className="text-lg text-center">
-            Sorry, looks like we&apos;re having some issues with search!
-          </p>
-          <p className="text-sm text-center">Please try again in a bit.</p>
-          <Button size="tiny" type="secondary" onClick={handleResetPrompt}>
+        <div className="p-6 flex flex-col items-center gap-3 mt-4">
+          <StatusIcon variant="warning" />
+          <div className="flex flex-col items-center gap-1">
+            <p className="text-sm text-foreground-light">
+              Sorry, looks like we&apos;re having some issues with search.
+            </p>
+            <p className="text-sm text-foreground-lighter">Please try again in a bit.</p>
+          </div>
+          <Button size="tiny" type="default" onClick={handleResetPrompt}>
             Try again?
           </Button>
         </div>

packages/ui-patterns/Cmdk/GenerateSQL/GenerateSQL.tsx

@@ -21,6 +21,7 @@ import { SAMPLE_QUERIES } from '../Command.constants'
 import SQLOutputActions from './SQLOutputActions'
 import { generatePrompt } from './GenerateSQL.utils'
 import { ExcludeSchemaAlert, IncludeSchemaAlert, AiWarning } from '../Command.alerts'
+import { StatusIcon } from '../../Icons/StatusIcons'
 
 const GenerateSQL = () => {
   const [includeSchemaMetadata, setIncludeSchemaMetadata] = useState(false)
@@ -238,13 +239,17 @@ const GenerateSQL = () => {
           </div>
         )}
         {hasError && (
-          <div className="p-6 flex flex-col items-center gap-6 mt-4">
-            <IconAlertTriangle className="text-amber-900" strokeWidth={1.5} size={21} />
-            <p className="text-lg text-foreground text-center">
-              Sorry, looks like Clippy is having a hard time!
-            </p>
-            <p className="text-sm text-foreground-muted text-center">Please try again in a bit.</p>
-            <Button size="tiny" type="secondary" onClick={handleReset}>
+          <div className="p-6 flex flex-col items-center gap-2 mt-4">
+            <StatusIcon variant="warning" />
+            <div>
+              <p className="text-sm text-foreground text-center">
+                Sorry, looks like Supabase AI is having a hard time!
+              </p>
+              <p className="text-sm text-foreground-lighter text-center">
+                Please try again in a bit.
+              </p>
+            </div>
+            <Button size="tiny" type="default" onClick={handleReset}>
               Try again?
             </Button>
           </div>