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}

web/src/pages/agents/template-card.tsx

@@ -19,7 +19,7 @@ export function TemplateCard({ data, showModal, isCreate = false }: IProps) {
     showModal(data);
   }, [data, showModal]);
   return (
-    <Card className="bg-colors-background-inverse-weak  border-colors-outline-neutral-standard group relative min-h-40">
+    <Card className="border-colors-outline-neutral-standard group relative min-h-40">
       <CardContent className="p-4 ">
         {isCreate && (
           <div

web/src/pages/chunk/index.tsx

@@ -69,14 +69,13 @@ export default function ChunkPage() {
             options={options}
             value={path}
             onChange={navigateToChunk as (val: SegmentedValue) => void}
-            className="bg-colors-background-inverse-standard text-colors-text-neutral-standard"
           ></Segmented>
         </div>
         <div className="flex items-center gap-2">
           <Button variant={'icon'} size={'icon'}>
             <EllipsisVertical />
           </Button>
-          <Button variant={'tertiary'} size={'sm'}>
+          <Button size={'sm'}>
             <Save />
             Save
           </Button>

web/src/pages/dataset/setting/advanced-setting-form.tsx

@@ -148,12 +148,7 @@ export default function AdvancedSettingForm() {
             </FormItem>
           )}
         />
-        <Button
-          variant={'tertiary'}
-          size={'sm'}
-          type="submit"
-          className="w-2/5"
-        >
+        <Button size={'sm'} type="submit" className="w-2/5">
           Test
         </Button>
       </form>

web/src/pages/dataset/setting/chunk-method-card.tsx

@@ -93,7 +93,7 @@ export default function ChunkMethodCard() {
   const form = useFormContext();
 
   return (
-    <Card className="border-0 p-6 mb-8 bg-colors-background-inverse-weak flex">
+    <Card className="border-0 p-6 mb-8 flex">
       <div className="w-2/5">
         <FormField
           control={form.control}
@@ -103,7 +103,7 @@ export default function ChunkMethodCard() {
               <FormLabel>{t('chunkMethod')}</FormLabel>
               <Select onValueChange={field.onChange} defaultValue={field.value}>
                 <FormControl>
-                  <SelectTrigger className="bg-colors-background-inverse-weak">
+                  <SelectTrigger>
                     <SelectValue placeholder="Select a verified email to display" />
                   </SelectTrigger>
                 </FormControl>

web/src/pages/dataset/testing/testing-form.tsx

@@ -98,10 +98,7 @@ export default function TestingForm({
             <FormItem>
               <FormLabel>{t('knowledgeDetails.testText')}</FormLabel>
               <FormControl>
-                <Textarea
-                  {...field}
-                  className="bg-colors-background-inverse-weak"
-                ></Textarea>
+                <Textarea {...field}></Textarea>
               </FormControl>
 
               <FormMessage />

web/src/pages/datasets/dataset-card.tsx

@@ -72,10 +72,7 @@ export function SeeAllCard() {
   const { navigateToDatasetList } = useNavigatePage();
 
   return (
-    <Card
-      className="bg-colors-background-inverse-weak w-40"
-      onClick={navigateToDatasetList}
-    >
+    <Card className="w-40" onClick={navigateToDatasetList}>
       <CardContent className="p-2.5 pt-1 w-full h-full flex items-center justify-center gap-1.5 text-text-secondary">
         See All <ChevronRight className="size-4" />
       </CardContent>

web/src/pages/home/application-card.tsx

@@ -1,5 +1,5 @@
 import { MoreButton } from '@/components/more-button';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { RAGFlowAvatar } from '@/components/ragflow-avatar';
 import { Card, CardContent } from '@/components/ui/card';
 import { formatDate } from '@/utils/date';
 import { ChevronRight } from 'lucide-react';
@@ -17,10 +17,11 @@ export function ApplicationCard({ app }: ApplicationCardProps) {
     <Card className="w-[264px]">
       <CardContent className="p-2.5  group flex justify-between">
         <div className="flex items-center gap-2.5">
-          <Avatar className="size-14 rounded-lg">
-            <AvatarImage src={app.avatar === null ? '' : app.avatar} />
-            <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-          </Avatar>
+          <RAGFlowAvatar
+            className="size-14 rounded-lg"
+            avatar={app.avatar}
+            name={app.title || 'CN'}
+          ></RAGFlowAvatar>
           <div className="flex-1">
             <h3 className="text-sm font-normal line-clamp-1 mb-1">
               {app.title}

web/src/pages/home/header.tsx

@@ -1,113 +0,0 @@
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Button } from '@/components/ui/button';
-import { Container } from '@/components/ui/container';
-import { Segmented, SegmentedValue } from '@/components/ui/segmented';
-import { useTranslate } from '@/hooks/common-hooks';
-import { useNavigateWithFromState } from '@/hooks/route-hook';
-import {
-  ChevronDown,
-  Cpu,
-  Github,
-  Library,
-  MessageSquareText,
-  Search,
-  Star,
-  Zap,
-} from 'lucide-react';
-import { useCallback, useMemo, useState } from 'react';
-import { useLocation } from 'umi';
-
-export function HomeHeader() {
-  const { t } = useTranslate('header');
-  const { pathname } = useLocation();
-  const navigate = useNavigateWithFromState();
-  const [currentPath, setCurrentPath] = useState('/home');
-
-  const tagsData = useMemo(
-    () => [
-      { path: '/home', name: t('knowledgeBase'), icon: Library },
-      { path: '/chat', name: t('chat'), icon: MessageSquareText },
-      { path: '/search', name: t('search'), icon: Search },
-      { path: '/flow', name: t('flow'), icon: Cpu },
-      // { path: '/file', name: t('fileManager'), icon: FileIcon },
-    ],
-    [t],
-  );
-
-  const options = useMemo(() => {
-    return tagsData.map((tag) => {
-      const HeaderIcon = tag.icon;
-
-      return {
-        label: (
-          <div className="flex items-center gap-1">
-            <HeaderIcon className="size-5"></HeaderIcon>
-            <span>{tag.name}</span>
-          </div>
-        ),
-        value: tag.path,
-      };
-    });
-  }, [tagsData]);
-
-  // const currentPath = useMemo(() => {
-  //   return tagsData.find((x) => pathname.startsWith(x.path))?.name || 'home';
-  // }, [pathname, tagsData]);
-
-  const handleChange = (path: SegmentedValue) => {
-    // navigate(path as string);
-    setCurrentPath(path as string);
-  };
-
-  const handleLogoClick = useCallback(() => {
-    navigate('/');
-  }, [navigate]);
-
-  return (
-    <section className="py-[12px] flex justify-between items-center">
-      <div className="flex items-center gap-4">
-        <img
-          src={'/logo.svg'}
-          alt="logo"
-          className="w-[100] h-[100] mr-[12]"
-          onClick={handleLogoClick}
-        />
-        <Button variant="secondary">
-          <Github />
-          21.5k stars
-          <Star />
-        </Button>
-      </div>
-      <div>
-        <Segmented
-          options={options}
-          value={currentPath}
-          onChange={handleChange}
-          className="bg-colors-background-inverse-standard text-backgroundInverseStandard-foreground"
-        ></Segmented>
-      </div>
-      <div className="flex items-center gap-4">
-        <Container>
-          V 0.13.0
-          <Button variant="secondary" className="size-8">
-            <ChevronDown />
-          </Button>
-        </Container>
-        <Container className="px-3 py-2">
-          <Avatar className="w-[30px] h-[30px]">
-            <AvatarImage src="https://github.com/shadcn.png" />
-            <AvatarFallback>CN</AvatarFallback>
-          </Avatar>
-          yifanwu92@gmail.com
-          <Button
-            variant="destructive"
-            className="py-[2px] px-[8px] h-[23px] rounded-[4px]"
-          >
-            <Zap />
-            Pro
-          </Button>
-        </Container>
-      </div>
-    </section>
-  );
-}

web/src/pages/next-search/index.tsx

@@ -13,9 +13,7 @@ export default function SearchPage() {
           <Button variant={'icon'} size={'icon'}>
             <EllipsisVertical />
           </Button>
-          <Button variant={'tertiary'} size={'sm'}>
-            Publish
-          </Button>
+          <Button size={'sm'}>Publish</Button>
         </div>
       </PageHeader>
     </section>

web/src/pages/next-searches/search-card.tsx

@@ -15,7 +15,7 @@ export function SearchCard({ data }: IProps) {
   const { navigateToSearch } = useNavigatePage();
 
   return (
-    <Card className="bg-colors-background-inverse-weak  border-colors-outline-neutral-standard">
+    <Card className="border-colors-outline-neutral-standard">
       <CardContent className="p-4 flex gap-2 items-start group">
         <div className="flex justify-between mb-4">
           <RAGFlowAvatar

web/src/pages/profile-setting/model/index.tsx

@@ -30,10 +30,7 @@ export default function ModelManagement() {
         <section className="mt-6">
           <div className="flex justify-between items-center mb-3">
             <h2 className="text-2xl font-semibold ">Model library</h2>
-            <Input
-              placeholder="search"
-              className="bg-colors-background-inverse-weak w-1/5"
-            ></Input>
+            <Input placeholder="search" className="w-1/5"></Input>
           </div>
           <div className="grid grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-4">
             {modelLibraryList.map((x, idx) => (

web/src/pages/profile-setting/model/model-card.tsx

@@ -104,7 +104,7 @@ export function AddModelCard() {
           <Button variant="secondary" size="icon">
             <MoreVertical className="h-4 w-4" />
           </Button>
-          <Button variant={'tertiary'}>
+          <Button>
             <Key /> API
           </Button>
         </div>
@@ -126,7 +126,7 @@ export function ModelLibraryCard() {
         <p>LLM,TEXT EMBEDDING, SPEECH2TEXT, MODERATION</p>
 
         <div className="text-right">
-          <Button variant={'tertiary'}>
+          <Button>
             <Plus /> Add
           </Button>
         </div>

web/src/pages/profile-setting/plan/index.tsx

@@ -79,20 +79,20 @@ export default function Plan() {
   return (
     <section className="p-8">
       <h1 className="text-3xl font-bold mb-6">Plan & balance</h1>
-      <Card className="border-0 p-6 mb-6 bg-colors-background-inverse-weak divide-y divide-colors-outline-neutral-strong">
+      <Card className="border-0 p-6 mb-6  divide-y divide-colors-outline-neutral-strong">
         <div className="pb-2 flex justify-between text-xl">
           <span className="font-bold ">Balance</span>
           <span className="font-medium">$ 100.00</span>
         </div>
         <div className="flex items-center justify-between pt-3">
           <span>The value equals to 1,000 tokens or 10.00 GBs of storage</span>
-          <Button variant={'tertiary'} size={'sm'}>
+          <Button size={'sm'}>
             <LogOut />
             Recharge
           </Button>
         </div>
       </Card>
-      <Card className="pt-6 bg-colors-background-inverse-weak">
+      <Card className="pt-6 ">
         <CardContent className="space-y-4">
           <div className="font-bold text-xl">Upgrade to access</div>
           <section className="grid grid-cols-2 gap-3">
@@ -107,7 +107,7 @@ export default function Plan() {
             options={options}
             value={val}
             onChange={handleChange}
-            className="bg-colors-background-inverse-standard inline-flex"
+            className="inline-flex"
           ></Segmented>
           <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
             {pricingData.map((plan, index) => (

web/src/pages/profile-setting/plan/pricing-card.tsx

@@ -38,10 +38,7 @@ export function PricingCard({
       <CardHeader className=" justify-between p-0 pb-3 h-52">
         <section>
           <div className="flex items-center justify-between mb-2">
-            <Badge
-              variant={isFree ? 'secondary' : 'tertiary'}
-              className="text-xs"
-            >
+            <Badge className="text-xs">
               {isPro && <Zap className="mr-2 h-4 w-4" />}
               {isEnterprise && <Mail className="mr-2 h-4 w-4" />}
               {title}
@@ -59,7 +56,6 @@ export function PricingCard({
             )}
           </div>
           <Button
-            variant={isFree ? 'secondary' : 'tertiary'}
             className={cn('w-full', {
               'bg-colors-text-core-standard': !isFree,
             })}

web/src/pages/profile-setting/profile/index.tsx

@@ -188,11 +188,7 @@ export default function Profile() {
                       {t('username')}
                     </FormLabel>
                     <FormControl className="w-3/4">
-                      <Input
-                        placeholder=""
-                        {...field}
-                        className="bg-colors-background-inverse-weak"
-                      />
+                      <Input placeholder="" {...field} />
                     </FormControl>
                   </div>
                   <div className="flex w-[640px] pt-1">

web/src/pages/profile-setting/prompt/index.tsx

@@ -16,7 +16,7 @@ const PromptManagement = () => {
       <div className="mx-auto">
         <div className="flex justify-between items-center mb-8">
           <h1 className="text-4xl font-bold">Prompt templates</h1>
-          <Button variant={'tertiary'} size={'sm'}>
+          <Button size={'sm'}>
             <Plus className="mr-2 h-4 w-4" />
             Create template
           </Button>

web/src/pages/profile-setting/team/index.tsx

@@ -32,7 +32,7 @@ const TeamManagement = () => {
       <div className=" mx-auto">
         <div className="flex justify-between items-center mb-8">
           <h1 className="text-4xl font-bold">Team management</h1>
-          <Button variant={'tertiary'} size={'sm'}>
+          <Button size={'sm'}>
             <Plus className="mr-2 h-4 w-4" />
             Create team
           </Button>
@@ -46,7 +46,7 @@ const TeamManagement = () => {
             </Button>
           </div>
 
-          <Card className="border-0 p-6 mb-6 bg-colors-background-inverse-weak">
+          <Card className="border-0 p-6 mb-6">
             <div className="grid grid-cols-3 gap-8">
               <div>
                 <p className="text-sm text-gray-400 mb-2">Project</p>
@@ -63,7 +63,7 @@ const TeamManagement = () => {
             </div>
           </Card>
 
-          <Card className="border-0 p-6 bg-colors-background-inverse-weak">
+          <Card className="border-0 p-6">
             <Table>
               <TableBody>
                 {teamMembers.map((member, idx) => (

web/tailwind.config.js

@@ -178,10 +178,6 @@ module.exports = {
           DEFAULT: 'var(--colors-background-inverse-strong)',
           foreground: 'var(--background-inverse-standard-foreground)',
         },
-        'colors-background-inverse-weak': {
-          DEFAULT: 'var(--colors-background-inverse-weak)',
-          foreground: 'var(--background-inverse-standard-foreground)',
-        },
         'colors-background-neutral-standard': {
           DEFAULT: 'var(--colors-background-neutral-standard)',
           foreground: 'var(--background-inverse-standard-foreground)',

web/tailwind.css

@@ -189,7 +189,6 @@
     );
     --colors-background-inverse-standard: rgba(230, 227, 246, 0.15);
     --colors-background-inverse-strong: rgba(255, 255, 255, 0.8);
-    --colors-background-inverse-weak: rgba(184, 181, 203, 0.15);
     --colors-background-neutral-standard: rgba(11, 10, 18, 1);
     --colors-background-neutral-strong: rgba(29, 26, 44, 1);
     --colors-background-neutral-weak: rgba(17, 16, 23, 1);