refactor: variant colors (#9586)

Toned-down colors for dark theme

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/RolloutParameter/RolloutVariants/RolloutVariants.tsx

@@ -6,22 +6,14 @@ import type { StrategyVariantSchema } from 'openapi';
 import type { FC } from 'react';
 
 const StyledVariantChip = styled(StrategyEvaluationChip)<{ order: number }>(
-    ({ theme, order }) => {
-        const variantColor =
-            theme.palette.variants[order % theme.palette.variants.length];
-
-        return {
-            borderRadius: theme.shape.borderRadiusExtraLarge,
-            border: 'none',
-            color: theme.palette.text.primary,
-            background:
-                // TODO: adjust theme.palette.variants
-                theme.mode === 'dark'
-                    ? `hsl(from ${variantColor} h calc(s - 30) calc(l - 45))`
-                    : `hsl(from ${variantColor} h s calc(l + 5))`,
-            fontWeight: theme.typography.fontWeightRegular,
-        };
-    },
+    ({ theme, order }) => ({
+        borderRadius: theme.shape.borderRadiusExtraLarge,
+        border: 'none',
+        color: theme.palette.text.primary,
+        background:
+            theme.palette.variants[order % theme.palette.variants.length],
+        fontWeight: theme.typography.fontWeightRegular,
+    }),
 );
 
 const StyledPayloadHeader = styled('div')(({ theme }) => ({

frontend/src/themes/colors.ts

@@ -95,18 +95,31 @@ export const colors = {
         600: '#1f3751',
         500: '#0e2840',
     },
-    variants: [
-        '#BEBBF3',
-        '#FFC46F',
-        '#B0D182',
-        '#96D2FA',
-        '#F7E3AE',
-        '#7FBAA9',
-        '#D3B9DB',
-        '#FBC5A0',
-        '#DDE7B5',
-        '#9EC4E3',
-        '#F8B6CC',
+    lightVariants: [
+        '#d2d1f5',
+        '#f8d18f',
+        '#c1d699',
+        '#b7dbf9',
+        '#f7ecc8',
+        '#9ac1b5',
+        '#dacbe2',
+        '#f6d6bb',
+        '#e7edcb',
+        '#b7cfe7',
+        '#f3d0dc',
+    ] as string[],
+    darkVariants: [
+        '#3f3d89',
+        '#6f4f1d',
+        '#3a3f2f',
+        '#325e87',
+        '#68620e',
+        '#8e3a53',
+        '#585659',
+        '#8a552a',
+        '#686e4b',
+        '#3e4f60',
+        '#343444',
     ] as string[],
     chartSeries: [
         '#816DD3',

frontend/src/themes/dark-theme.ts

@@ -222,7 +222,7 @@ const theme = {
             // A400: '#A6000E',
             // A700: '#A6000E',
         },
-        variants: colors.variants,
+        variants: colors.darkVariants,
 
         /**
          * Dashboard and charts

frontend/src/themes/theme.ts

@@ -281,7 +281,7 @@ const theme = {
             // A400: '#A6000E',
             // A700: '#A6000E',
         },
-        variants: colors.variants,
+        variants: colors.lightVariants,
 
         /**
          * Dashboard and charts