feat: Add Datasets component to home page #3221 (#3508)

### What problem does this PR solve?

feat: Add Datasets component to home page #3221
### Type of change


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

web/package-lock.json

@@ -19,6 +19,7 @@
         "@radix-ui/react-dropdown-menu": "^2.1.2",
         "@radix-ui/react-icons": "^1.3.1",
         "@radix-ui/react-label": "^2.1.0",
+        "@radix-ui/react-navigation-menu": "^1.2.1",
         "@radix-ui/react-popover": "^1.1.2",
         "@radix-ui/react-select": "^2.1.2",
         "@radix-ui/react-separator": "^1.1.0",
@@ -4421,6 +4422,41 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-navigation-menu": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.1.tgz",
+      "integrity": "sha512-egDo0yJD2IK8L17gC82vptkvW1jLeni1VuqCyzY727dSJdk5cDjINomouLoNk8RVF7g2aNIfENKWL4UzeU9c8Q==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popover": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/@radix-ui/react-popover/-/react-popover-1.1.2.tgz",

web/package.json

@@ -30,6 +30,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "^1.3.1",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-navigation-menu": "^1.2.1",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",

web/src/components/ui/navigation-menu.tsx

@@ -0,0 +1,128 @@
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+import { cva } from 'class-variance-authority';
+import { ChevronDown } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn('absolute left-0 top-full flex justify-center')}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+));
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName;
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative z-10 flex max-w-max flex-1 items-center justify-center',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      'group flex flex-1 list-none items-center justify-center space-x-1',
+      className,
+    )}
+    {...props}
+  />
+));
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
+
+const navigationMenuTriggerStyle = cva(
+  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
+);
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), 'group', className)}
+    {...props}
+  >
+    {children}{' '}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ',
+      className,
+    )}
+    {...props}
+  />
+));
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
+      className,
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+));
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName;
+
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+};

web/src/pages/home/applications.tsx

@@ -0,0 +1,80 @@
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { ChevronRight, Cpu, MessageSquare, Search } from 'lucide-react';
+
+const applications = [
+  {
+    id: 1,
+    title: 'Jarvis chatbot',
+    type: 'Chat app',
+    date: '11/24/2024',
+    icon: <MessageSquare className="h-6 w-6" />,
+  },
+  {
+    id: 2,
+    title: 'Search app 01',
+    type: 'Search app',
+    date: '11/24/2024',
+    icon: <Search className="h-6 w-6" />,
+  },
+  {
+    id: 3,
+    title: 'Chatbot 01',
+    type: 'Chat app',
+    date: '11/24/2024',
+    icon: <MessageSquare className="h-6 w-6" />,
+  },
+  {
+    id: 4,
+    title: 'Workflow 01',
+    type: 'Agent',
+    date: '11/24/2024',
+    icon: <Cpu className="h-6 w-6" />,
+  },
+];
+
+export function Applications() {
+  return (
+    <section className="mt-12">
+      <div className="flex justify-between items-center mb-6">
+        <h2 className="text-2xl font-bold">Applications</h2>
+        <div className="flex bg-colors-background-inverse-standard rounded-lg p-1">
+          <Button variant="default" size="sm">
+            All
+          </Button>
+          <Button variant="ghost" size="sm">
+            Chat
+          </Button>
+          <Button variant="ghost" size="sm">
+            Search
+          </Button>
+          <Button variant="ghost" size="sm">
+            Agents
+          </Button>
+        </div>
+      </div>
+      <div className="grid grid-cols-4 gap-6">
+        {[...Array(12)].map((_, i) => {
+          const app = applications[i % 4];
+          return (
+            <Card key={i} className="bg-colors-background-inverse-weak">
+              <CardContent className="p-4 flex items-center gap-6">
+                <div className="w-[70px] h-[70px] rounded-xl flex items-center justify-center bg-gradient-to-br from-[#45A7FA] via-[#AE63E3] to-[#4433FF]">
+                  {app.icon}
+                </div>
+                <div className="flex-1">
+                  <h3 className="text-lg font-semibold">{app.title}</h3>
+                  <p className="text-sm opacity-80">{app.type}</p>
+                  <p className="text-sm opacity-80">{app.date}</p>
+                </div>
+                <Button variant="secondary" size="icon">
+                  <ChevronRight className="h-6 w-6" />
+                </Button>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

web/src/pages/home/banner.tsx

@@ -1,5 +1,5 @@
 import { Card, CardContent } from '@/components/ui/card';
-import { ArrowRight } from 'lucide-react';
+import { ArrowRight, X } from 'lucide-react';
 
 function BannerCard() {
   return (
@@ -17,34 +17,22 @@ function BannerCard() {
   );
 }
 
-function MyCard() {
-  return (
-    <div className="w-[265px] h-[87px] pl-[17px] pr-[13px] py-[15px] bg-[#b8b5cb]/20 rounded-xl border border-[#e6e3f6]/10 backdrop-blur-md justify-between items-end inline-flex">
-      <div className="grow shrink basis-0 flex-col justify-start items-start gap-[9px] inline-flex">
-        <div className="px-1 py-0.5 bg-[#644bf7] rounded justify-center items-center gap-2 inline-flex">
-          <div className="text-white text-xs font-medium font-['IBM Plex Mono'] leading-none">
-            System
-          </div>
-        </div>
-        <div className="self-stretch text-white text-lg font-normal font-['Inter'] leading-7">
-          Setting up your LLM
-        </div>
-      </div>
-      <div className="w-6 h-6 relative" />
-    </div>
-  );
-}
-
 export function Banner() {
   return (
-    <section className="bg-[url('@/assets/banner.png')] bg-cover h-28 rounded-2xl mx-14 my-8 flex gap-8 justify-between">
+    <section className="bg-[url('@/assets/banner.png')] bg-cover h-28 rounded-2xl  my-8 flex gap-8 justify-between">
       <div className="h-full text-3xl font-bold items-center inline-flex ml-6">
         Welcome to RAGFlow
       </div>
-      <div className="flex justify-between items-center gap-10 mr-5">
+      <div className="flex justify-between items-center gap-4 mr-5">
+        <BannerCard></BannerCard>
         <BannerCard></BannerCard>
         <BannerCard></BannerCard>
-        <MyCard></MyCard>
+        <button
+          type="button"
+          className="relative p-1 hover:bg-white/10 rounded-full transition-colors"
+        >
+          <X className="w-6 h-6 text-white" />
+        </button>
       </div>
     </section>
   );

web/src/pages/home/card.tsx

@@ -1,39 +0,0 @@
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-
-export function CardWithForm() {
-  return (
-    <Card className="w-[350px]">
-      <CardHeader>
-        <CardTitle>Create project</CardTitle>
-        <CardDescription>Deploy your new project in one-click.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form>
-          <div className="grid w-full items-center gap-4">
-            <div className="flex flex-col space-y-1.5">
-              <Label htmlFor="name">Name</Label>
-              <Input id="name" placeholder="Name of your project" />
-            </div>
-            <div className="flex flex-col space-y-1.5">
-              <Label htmlFor="framework">Framework</Label>
-            </div>
-          </div>
-        </form>
-      </CardContent>
-      <CardFooter className="flex justify-between">
-        <Button variant="outline">Cancel</Button>
-        <Button>Deploy</Button>
-      </CardFooter>
-    </Card>
-  );
-}

web/src/pages/home/datasets.tsx

@@ -0,0 +1,85 @@
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+
+const datasets = [
+  {
+    id: 1,
+    title: 'Legal knowledge base',
+    files: '1,242 files',
+    size: '152 MB',
+    created: '12.02.2024',
+    image: '/image-3.png',
+  },
+  {
+    id: 2,
+    title: 'HR knowledge base',
+    files: '1,242 files',
+    size: '152 MB',
+    created: '12.02.2024',
+    image: '/image.png',
+  },
+  {
+    id: 3,
+    title: 'IT knowledge base',
+    files: '1,242 files',
+    size: '152 MB',
+    created: '12.02.2024',
+    image: '/rectangle-86.png',
+  },
+  {
+    id: 4,
+    title: 'Legal knowledge base',
+    files: '1,242 files',
+    size: '152 MB',
+    created: '12.02.2024',
+    image: '/image-2.png',
+  },
+];
+
+export function Datasets() {
+  return (
+    <section>
+      <h2 className="text-2xl font-bold mb-6">Datasets</h2>
+      <div className="flex gap-6">
+        {datasets.map((dataset) => (
+          <Card
+            key={dataset.id}
+            className="bg-colors-background-inverse-weak flex-1"
+          >
+            <CardContent className="p-4">
+              <div className="flex justify-between mb-4">
+                <div
+                  className="w-[70px] h-[70px] rounded-xl bg-cover"
+                  style={{ backgroundImage: `url(${dataset.image})` }}
+                />
+                <Button variant="ghost" size="icon">
+                  <MoreHorizontal className="h-6 w-6" />
+                </Button>
+              </div>
+              <div className="flex justify-between items-end">
+                <div>
+                  <h3 className="text-lg font-semibold mb-2">
+                    {dataset.title}
+                  </h3>
+                  <p className="text-sm opacity-80">
+                    {dataset.files} | {dataset.size}
+                  </p>
+                  <p className="text-sm opacity-80">
+                    Created {dataset.created}
+                  </p>
+                </div>
+                <Button variant="secondary" size="icon">
+                  <ChevronRight className="h-6 w-6" />
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+        <Button className="bg-[#9276ff] h-auto" variant={'secondary'}>
+          See all
+        </Button>
+      </div>
+    </section>
+  );
+}

web/src/pages/home/header.tsx

@@ -64,7 +64,7 @@ export function HomeHeader() {
   }, [navigate]);
 
   return (
-    <section className="px-[60px] py-[12px] flex justify-between items-center">
+    <section className="py-[12px] flex justify-between items-center">
       <div className="flex items-center gap-4">
         <img
           src={'/logo.svg'}

web/src/pages/home/index.tsx

@@ -1,14 +1,16 @@
+import { Applications } from './applications';
 import { Banner } from './banner';
+import { Datasets } from './datasets';
 import { HomeHeader } from './header';
-import NextBanner from './next-banner';
 
 const Home = () => {
   return (
-    <div>
+    <div className="text-white mx-8">
       <HomeHeader></HomeHeader>
       <section>
         <Banner></Banner>
-        <NextBanner></NextBanner>
+        <Datasets></Datasets>
+        <Applications></Applications>
       </section>
     </div>
   );

web/src/pages/home/next-banner.tsx

@@ -1,64 +0,0 @@
-import { Badge } from '@/components/ui/badge';
-import { Card, CardContent } from '@/components/ui/card';
-import { ArrowRight, X } from 'lucide-react';
-
-const guideCards = [
-  {
-    badge: 'System',
-    title: 'Setting up your LLM',
-  },
-  {
-    badge: 'Chat app',
-    title: 'Configuration guides',
-  },
-  {
-    badge: 'Search app',
-    title: 'Prompt setting guides',
-  },
-];
-
-export default function WelcomeGuide(): JSX.Element {
-  return (
-    <div className="flex w-full max-w-[1800px] items-center gap-4 px-[60px] py-6 relative bg-[#223d8e0d] rounded-3xl overflow-hidden">
-      <div
-        className="absolute inset-0 bg-gradient-to-r from-pink-300 via-purple-400 to-blue-500 opacity-75"
-        style={{
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-        }}
-      />
-
-      <h1 className="relative flex-1 text-4xl font-bold text-white">
-        Welcome to RAGFlow
-      </h1>
-
-      <div className="inline-flex items-center gap-[22px] relative">
-        {guideCards.map((card, index) => (
-          <Card
-            key={index}
-            className="w-[265px]  backdrop-blur-md border-colors-outline-neutral-standard"
-          >
-            <CardContent className="flex items-end justify-between p-[15px]">
-              <div className="flex flex-col items-start gap-[9px] flex-1">
-                <Badge
-                  variant="secondary"
-                  className="bg-colors-background-core-weak text-colors-text-neutral-strong"
-                >
-                  {card.badge}
-                </Badge>
-                <p className="text-lg text-colors-text-neutral-strong">
-                  {card.title}
-                </p>
-              </div>
-              <ArrowRight className="w-6 h-6" />
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-
-      <button className="relative p-1 hover:bg-white/10 rounded-full transition-colors">
-        <X className="w-6 h-6 text-white" />
-      </button>
-    </div>
-  );
-}

web/tailwind.config.js

@@ -69,6 +69,75 @@ module.exports = {
           DEFAULT: 'var(--background-core-weak)',
           foreground: 'var(--background-core-weak-foreground)',
         },
+
+        'color-background-brand-default': {
+          DEFAULT: 'var(--color-background-brand-default)',
+          foreground: 'var(--background-inverse-standard-foreground)',
+        },
+        'color-background-positive-default': {
+          DEFAULT: 'var(--color-background-positive-default)',
+          foreground: 'var(--background-inverse-standard-foreground)',
+        },
+        'colors-background-core-standard': {
+          DEFAULT: 'var(--colors-background-core-standard)',
+          foreground: 'var(--background-inverse-standard-foreground)',
+        },
+        'colors-background-core-strong': {
+          DEFAULT: 'var(--colors-background-core-strong)',
+          foreground: 'var(--background-inverse-standard-foreground)',
+        },
+        'colors-background-core-weak': {
+          DEFAULT: 'var(--colors-background-core-weak)',
+          foreground: 'var(--background-inverse-standard-foreground)',
+        },
+        'colors-background-functional-solid-danger': {
+          DEFAULT: 'var(--colors-background-functional-solid-danger)',
+          foreground: 'var(--background-inverse-standard-foreground)',
+        },
+        'colors-background-functional-solid-notice': {
+          DEFAULT: 'var(--colors-background-functional-solid-notice)',
+          foreground: 'var(--background-inverse-standard-foreground)',
+        },
+        'colors-background-functional-solid-positive': {
+          DEFAULT: 'var(--colors-background-functional-solid-positive)',
+          foreground: 'var(--background-inverse-standard-foreground)',
+        },
+        'colors-background-functional-transparent-danger': {
+          DEFAULT: 'var(--colors-background-functional-transparent-danger)',
+          foreground: 'var(--background-inverse-standard-foreground)',
+        },
+        'colors-background-functional-transparent-notice': {
+          DEFAULT: 'var(--colors-background-functional-transparent-notice)',
+          foreground: 'var(--background-inverse-standard-foreground)',
+        },
+        'colors-background-functional-transparent-positive': {
+          DEFAULT: 'var(--colors-background-functional-transparent-positive)',
+          foreground: 'var(--background-inverse-standard-foreground)',
+        },
+        'colors-background-inverse-standard': {
+          DEFAULT: 'var(--colors-background-inverse-standard)',
+          foreground: 'var(--background-inverse-standard-foreground)',
+        },
+        'colors-background-inverse-strong': {
+          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)',
+        },
+        'colors-background-neutral-strong': {
+          DEFAULT: 'var(--colors-background-neutral-strong)',
+          foreground: 'var(--background-inverse-standard-foreground)',
+        },
+        'colors-background-neutral-weak': {
+          DEFAULT: 'var(--colors-background-neutral-weak)',
+          foreground: 'var(--background-inverse-standard-foreground)',
+        },
       },
       borderRadius: {
         lg: `var(--radius)`,

web/tailwind.css

@@ -87,6 +87,27 @@
 
     --background-core-weak: rgb(101, 75, 248);
     --background-core-weak-foreground: rgba(255, 255, 255, 1);
+
+    --colors-background-core-standard: rgba(137, 126, 255, 1);
+    --colors-background-core-strong: rgba(152, 147, 255, 1);
+    --colors-background-core-weak: rgba(101, 75, 248, 1);
+    --colors-background-functional-solid-danger: rgba(255, 57, 92, 1);
+    --colors-background-functional-solid-notice: rgba(255, 208, 94, 1);
+    --colors-background-functional-solid-positive: rgba(74, 225, 145, 1);
+    --colors-background-functional-transparent-danger: rgba(234, 50, 83, 0.2);
+    --colors-background-functional-transparent-notice: rgba(248, 208, 111, 0.5);
+    --colors-background-functional-transparent-positive: rgba(
+      65,
+      203,
+      130,
+      0.5
+    );
+    --colors-background-inverse-standard: rgba(230, 227, 246, 0.15);
+    --colors-background-inverse-strong: rgba(255, 255, 255, 0.15);
+    --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);
   }
 }