Feat: Modify the style of the home page in bright mode #3221 (#3832)

### What problem does this PR solve?

Feat: Modify the style of the home page in bright mode #3221

### Type of change


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

web/src/components/ui/button.tsx

@@ -20,6 +20,7 @@ const buttonVariants = cva(
         link: 'text-primary underline-offset-4 hover:underline',
         tertiary:
           'bg-colors-text-core-standard text-foreground hover:bg-colors-text-core-standard/80',
+        icon: 'bg-colors-background-inverse-standard text-foreground hover:bg-colors-background-inverse-standard/80',
       },
       size: {
         default: 'h-10 px-4 py-2',

web/src/components/ui/container.tsx

@@ -8,7 +8,7 @@ export function Container({
   return (
     <div
       className={cn(
-        'px-2 py-1 bg-backgroundInverseStandard text-backgroundInverseStandard-foreground inline-flex items-center rounded-sm gap-2',
+        'px-2 py-1 bg-colors-background-inverse-standard  inline-flex items-center rounded-sm gap-2',
         className,
       )}
       {...props}

web/src/components/ui/segmented .tsx

@@ -47,8 +47,10 @@ export function Segmented({
             key={actualValue}
             className={cn(
               'inline-flex items-center px-3 py-2 text-sm font-medium rounded-sm cursor-pointer',
-
-              { 'bg-backgroundCoreStandard': value === actualValue },
+              {
+                'bg-colors-background-inverse-strong': value === actualValue,
+                'text-colors-text-inverse-strong': value === actualValue,
+              },
             )}
             onClick={() => onChange?.(actualValue)}
           >