feat: Add background colors such as inverse-strong #3221 (#3346)

### What problem does this PR solve?

feat: Add background colors such as inverse-strong #3221

### Type of change


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

web/src/components/ui/segmented .tsx

@@ -25,9 +25,19 @@ export interface SegmentedProps
   motionName?: string;
 }
 
-export function Segmented({ options, value, onChange }: SegmentedProps) {
+export function Segmented({
+  options,
+  value,
+  onChange,
+  className,
+}: SegmentedProps) {
   return (
-    <div className="flex items-center rounded-sm p-1 gap-2 bg-zinc-200">
+    <div
+      className={cn(
+        'flex items-center rounded-sm p-1 gap-2 bg-zinc-200',
+        className,
+      )}
+    >
       {options.map((option) => {
         const isObject = typeof option === 'object';
         const actualValue = isObject ? option.value : option;
@@ -36,9 +46,9 @@ export function Segmented({ options, value, onChange }: SegmentedProps) {
           <div
             key={actualValue}
             className={cn(
-              'inline-flex items-center px-2 py-1 text-sm font-medium rounded-sm cursor-pointer',
+              'inline-flex items-center px-3 py-2 text-sm font-medium rounded-sm cursor-pointer',
 
-              { 'bg-indigo-400': value === actualValue },
+              { 'bg-backgroundCoreStandard': value === actualValue },
             )}
             onClick={() => onChange?.(actualValue)}
           >

web/src/pages/home/header.tsx

@@ -5,6 +5,7 @@ import { Segmented, SegmentedValue } from '@/components/ui/segmented ';
 import { useTranslate } from '@/hooks/common-hooks';
 import { useNavigateWithFromState } from '@/hooks/route-hook';
 import {
+  ChevronDown,
   Cpu,
   Github,
   Library,
@@ -63,7 +64,7 @@ export function HomeHeader() {
   }, [navigate]);
 
   return (
-    <section className="px-[60px] py-[12px] flex justify-between">
+    <section className="px-[60px] py-[12px] flex justify-between items-center">
       <div className="flex items-center gap-4">
         <img
           src={'/logo.svg'}
@@ -82,11 +83,17 @@ export function HomeHeader() {
           options={options}
           value={currentPath}
           onChange={handleChange}
+          className="bg-backgroundInverseStandard text-backgroundInverseStandard-foreground"
         ></Segmented>
       </div>
       <div className="flex items-center gap-4">
-        <Button variant="secondary">V 0.13.0</Button>
         <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>

web/tailwind.config.js

@@ -22,15 +22,15 @@ module.exports = {
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',
         ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
+        background: 'var(--background)',
         foreground: 'hsl(var(--foreground))',
         primary: {
           DEFAULT: 'hsl(var(--primary))',
           foreground: 'hsl(var(--primary-foreground))',
         },
         secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
+          DEFAULT: 'var(--background-inverse-strong)',
+          foreground: 'var(--background-inverse-strong-foreground)',
         },
         destructive: {
           DEFAULT: 'hsl(var(--destructive))',
@@ -49,13 +49,21 @@ module.exports = {
           foreground: 'hsl(var(--popover-foreground))',
         },
         card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
+          DEFAULT: 'var(--background-inverse-standard)',
+          foreground: 'var(--background-inverse-standard-foreground)',
         },
         backgroundInverseStandard: {
           DEFAULT: 'var(--background-inverse-standard)',
           foreground: 'var(--background-inverse-standard-foreground)',
         },
+        backgroundInverseWeak: {
+          DEFAULT: 'var(--background-inverse-weak)',
+          foreground: 'var(--background-inverse-weak-foreground)',
+        },
+        backgroundCoreStandard: {
+          DEFAULT: 'var(--background-core-standard)',
+          foreground: 'var(--background-core-standard-foreground)',
+        },
       },
       borderRadius: {
         lg: `var(--radius)`,

web/tailwind.css

@@ -40,7 +40,7 @@
   }
 
   .dark {
-    --background: 224 71% 4%;
+    --background: rgba(11, 10, 18, 1);
     --foreground: 213 31% 91%;
 
     --muted: 223 47% 11%;
@@ -73,6 +73,15 @@
 
     --background-inverse-standard: rgba(230, 227, 246, 0.15);
     --background-inverse-standard-foreground: rgba(255, 255, 255, 1);
+
+    --background-inverse-weak: rgba(184, 181, 203, 0.15);
+    --background-inverse-weak-foreground: rgba(255, 255, 255, 1);
+
+    --background-core-standard: rgba(137, 126, 255, 1);
+    --background-core-standard-foreground: rgba(255, 255, 255, 1);
+
+    --background-inverse-strong: rgba(255, 255, 255, 0.15);
+    --background-inverse-strong-foreground: rgba(255, 255, 255, 1);
   }
 }