Chore/constraint value styling (#9853)

Fixes a few small styling issues with the constraint value chips:
- Background color was wrong
- They shouldn't have a border when they're not focused
 
Different styles: 
1. Keyboard focus
2. Mouse hover
3. No focus
4. No focus
5. Add values button for reference.
<img width="405" alt="image"
src="https://github.com/user-attachments/assets/ded98393-a7a8-4d4a-81ff-63a3f4d32184"
/>

frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/AddValuesWidget.tsx

@@ -9,8 +9,10 @@ import {
     useState,
 } from 'react';
 import { parseParameterStrings } from 'utils/parseParameter';
+import { baseChipStyles } from './ValueList';
 
 const AddValuesButton = styled('button')(({ theme }) => ({
+    ...baseChipStyles(theme),
     color: theme.palette.primary.main,
     svg: {
         fill: theme.palette.primary.main,
@@ -26,13 +28,7 @@ const AddValuesButton = styled('button')(({ theme }) => ({
     alignItems: 'center',
     padding: theme.spacing(0.5, 1.5, 0.5, 1.5),
     height: 'auto',
-    transition: 'all 0.3s ease',
+    cursor: 'pointer',
-    outline: `1px solid #0000`,
-    background: theme.palette.background.elevation1,
-    ':hover, :focus-visible': {
-        background: theme.palette.background.elevation1,
-        outlineColor: theme.palette.secondary.dark,
-    },
 }));
 
 const StyledPopover = styled(Popover)(({ theme }) => ({

frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/ValueList.tsx

@@ -1,5 +1,5 @@
 import Clear from '@mui/icons-material/Clear';
-import { Chip, type ChipProps, styled } from '@mui/material';
+import { Chip, type ChipProps, styled, type Theme } from '@mui/material';
 import { type FC, forwardRef, type PropsWithChildren, useRef } from 'react';
 
 const ValueListWrapper = styled('div')(({ theme }) => ({
@@ -14,16 +14,26 @@ const StyledList = styled('ul')({
     display: 'contents',
 });
 
+export const baseChipStyles = (theme: Theme) => ({
+    ':hover': { background: theme.palette.secondary.light },
+    ':focus-visible': {
+        background: theme.palette.background.elevation1,
+        outlineColor: theme.palette.secondary.dark,
+    },
+    background: theme.palette.background.elevation1,
+    color: theme.palette.text.primary,
+    height: 'auto',
+    outline: `1px solid #0000`,
+    transition: 'all 0.3s ease',
+});
+
 const ValueChipBase = styled(
     forwardRef<HTMLDivElement, ChipProps>((props, ref) => (
         <Chip size='small' {...props} ref={ref} />
     )),
 )(({ theme }) => ({
-    transition: 'all 0.3s ease',
+    ...baseChipStyles(theme),
-    outline: `1px solid #0000`,
+    color: theme.palette.text.primary,
-    background: theme.palette.secondary.light,
-    color: theme.palette.secondary.dark,
-    border: `1px solid ${theme.palette.secondary.border}`,
     padding: 0,
     height: 'auto',
     '& .MuiChip-label': {
@@ -34,12 +44,6 @@ const ValueChipBase = styled(
     '& .MuiChip-deleteIcon': {
         marginRight: theme.spacing(1),
     },
-    ':hover, :focus-visible': {
-        background: theme.palette.secondary.light,
-    },
-    ':focus-visible': {
-        outlineColor: theme.palette.secondary.dark,
-    },
 }));
 
 const ValueChip = styled(ValueChipBase)(({ theme }) => ({