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>