Feat: Restore the button's background color #3221 (#9307)

### What problem does this PR solve?

Feat: Restore the button's background color #3221
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/chat-input.tsx

@@ -1,46 +0,0 @@
-import { useEventListener } from 'ahooks';
-import { Mic, Paperclip, Send } from 'lucide-react';
-import { useRef, useState } from 'react';
-import { Button } from './ui/button';
-import { Textarea } from './ui/textarea';
-
-export function ChatInput() {
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const [textareaHeight, setTextareaHeight] = useState<number>(40);
-
-  useEventListener(
-    'keydown',
-    (ev) => {
-      if (ev.shiftKey && ev.code === 'Enter') {
-        setTextareaHeight((h) => {
-          return h + 10;
-        });
-      }
-    },
-    {
-      target: textareaRef,
-    },
-  );
-
-  return (
-    <section className="flex items-end bg-colors-background-neutral-strong px-4 py-3 rounded-xl m-8">
-      <Button variant={'icon'} className="w-10 h-10">
-        <Mic />
-      </Button>
-      <Textarea
-        ref={textareaRef}
-        placeholder="Tell us a little bit about yourself "
-        className="resize-none focus-visible:ring-0 focus-visible:ring-offset-0 bg-transparent border-none min-h-0 max-h-20"
-        style={{ height: textareaHeight }}
-      />
-      <div className="flex gap-2">
-        <Button variant={'icon'} size={'icon'}>
-          <Paperclip />
-        </Button>
-        <Button variant={'tertiary'} size={'icon'}>
-          <Send />
-        </Button>
-      </div>
-    </section>
-  );
-}

web/src/components/ui/badge.tsx

@@ -15,8 +15,6 @@ const badgeVariants = cva(
         destructive:
           'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
         outline: 'text-foreground',
-        tertiary:
-          'border-transparent bg-colors-background-core-strong text-colors-text-persist-light hover:bg-colors-background-core-strong/80',
       },
     },
     defaultVariants: {

web/src/components/ui/button.tsx

@@ -6,20 +6,21 @@ import { cn } from '@/lib/utils';
 import { Loader2, Plus } from 'lucide-react';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default:
+          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
         destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
         outline:
-          'border border-text-sub-title-invert bg-transparent hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-bg-card text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
         link: 'text-primary underline-offset-4 hover:underline',
-        tertiary:
-          'bg-colors-background-sentiment-solid-primary text-colors-text-persist-light hover:bg-colors-background-sentiment-solid-primary/80',
         icon: 'bg-colors-background-inverse-standard text-foreground hover:bg-colors-background-inverse-standard/80',
         dashed: 'border border-dashed border-input hover:bg-accent',
         transparent: 'bg-transparent hover:bg-accent border',

web/src/components/ui/container.tsx

@@ -1,19 +0,0 @@
-import { cn } from '@/lib/utils';
-
-export function Container({
-  children,
-  className,
-  ...props
-}: React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>) {
-  return (
-    <div
-      className={cn(
-        'px-2 py-1 bg-colors-background-inverse-standard  inline-flex items-center rounded-sm gap-2',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}

web/src/components/ui/input.tsx

@@ -14,7 +14,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-8 w-full rounded-md border border-input bg-colors-background-inverse-weak px-2 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-8 w-full rounded-md border border-input bg-bg-card px-2 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
         ref={ref}

web/src/components/ui/loading-button.tsx

@@ -20,8 +20,6 @@ const buttonVariants = cva(
           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
-        tertiary:
-          'bg-colors-background-sentiment-solid-primary text-colors-text-persist-light hover:bg-colors-background-sentiment-solid-primary/80',
       },
       size: {
         default: 'h-10 px-4 py-2',

web/src/components/ui/select.tsx

@@ -26,7 +26,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-8 w-full items-center justify-between rounded-md border border-input bg-colors-background-inverse-weak px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'flex h-8 w-full items-center bg-bg-card justify-between rounded-md border border-input  px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className,
     )}
     {...props}

web/src/components/ui/tabs.tsx

@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      'inline-flex h-10 items-center justify-center rounded-md bg-colors-background-inverse-standard p-1 text-colors-text-neutral-standard',
+      'inline-flex h-10 items-center justify-center rounded-md  p-1 ',
       className,
     )}
     {...props}

web/src/components/ui/textarea.tsx

@@ -54,7 +54,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          'flex min-h-[80px] w-full rounded-md border border-input bg-colors-background-inverse-weak px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm overflow-hidden',
+          'flex min-h-[80px] w-full bg-bg-card rounded-md border border-input px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm overflow-hidden',
           className,
         )}
         rows={autoSize?.minRows ?? props.rows ?? undefined}