refactor: light theme colors (#3252)

## About the changes
Refactoring the colors for the light theme to be much easier to continue
with dark mode

This is the first step to finish dark mode

https://linear.app/unleash/project/[low][s][alpha]-dark-mode-in-unleash-admin-ui-31b407d13c4b/1

This PR uses `main-theme` as a placeholder for `dark-theme` for now due
to the new changes. Still need to set the correct values here.

---------

Co-authored-by: Nuno Góis <github@nunogois.com>

frontend/src/component/admin/billing/BillingDashboard/BillingInformation/BillingInformation.tsx

@@ -8,7 +8,7 @@ const StyledInfoBox = styled('aside')(({ theme }) => ({
     padding: theme.spacing(4),
     height: '100%',
     borderRadius: theme.shape.borderRadiusLarge,
-    backgroundColor: theme.palette.secondaryContainer,
+    backgroundColor: theme.palette.background.elevation2,
 }));
 
 const StyledTitle = styled(Typography)(({ theme }) => ({
@@ -26,7 +26,7 @@ const StyledInfoLabel = styled(Typography)(({ theme }) => ({
 
 const StyledDivider = styled(Divider)(({ theme }) => ({
     margin: `${theme.spacing(2.5)} 0`,
-    borderColor: theme.palette.dividerAlternative,
+    borderColor: theme.palette.divider,
 }));
 interface IBillingInformationProps {
     instanceStatus: IInstanceStatus;

frontend/src/component/admin/groups/GroupForm/GroupForm.tsx

@@ -53,7 +53,7 @@ const StyledDescriptionBlock = styled('div')(({ theme }) => ({
     maxWidth: theme.spacing(60),
     padding: theme.spacing(3),
     backgroundColor: theme.palette.neutral.light,
-    color: theme.palette.grey[900],
+    color: theme.palette.text.primary,
     fontSize: theme.fontSizes.smallBody,
     borderRadius: theme.shape.borderRadiusMedium,
     marginBottom: theme.spacing(2),

frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx

@@ -15,7 +15,7 @@ const StyledLink = styled(Link)(({ theme }) => ({
 const StyledGroupCard = styled('aside')(({ theme }) => ({
     padding: theme.spacing(2.5),
     height: '100%',
-    border: `1px solid ${theme.palette.dividerAlternative}`,
+    border: `1px solid ${theme.palette.divider}`,
     borderRadius: theme.shape.borderRadiusLarge,
     boxShadow: theme.boxShadows.card,
     display: 'flex',

frontend/src/component/admin/maintenance/MaintenanceToggle.tsx

@@ -15,7 +15,7 @@ const StyledContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
     padding: theme.spacing(3),
-    border: `1px solid ${theme.palette.dividerAlternative}`,
+    border: `1px solid ${theme.palette.divider}`,
     borderRadius: theme.shape.borderRadiusLarge,
 }));
 

frontend/src/component/admin/network/NetworkTraffic/NetworkTraffic.tsx

@@ -62,7 +62,7 @@ const createInstanceChartOptions = (
         tooltip: {
             backgroundColor: theme.palette.background.paper,
             bodyColor: theme.palette.text.primary,
-            titleColor: theme.palette.grey[700],
+            titleColor: theme.palette.action.active,
             borderColor: theme.palette.primary.main,
             borderWidth: 1,
             padding: 10,

frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountModal.tsx

@@ -71,7 +71,7 @@ const StyledRoleRadio = styled(Radio)(({ theme }) => ({
 
 const StyledSecondaryContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(3),
-    backgroundColor: theme.palette.secondaryContainer,
+    backgroundColor: theme.palette.background.elevation2,
     borderRadius: theme.shape.borderRadiusMedium,
     marginTop: theme.spacing(4),
     marginBottom: theme.spacing(2),

frontend/src/component/admin/users/InviteLink/InviteLink.tsx

@@ -174,7 +174,7 @@ export const InviteLink: VFC<ICreateInviteLinkProps> = () => {
                             borderRadius: theme =>
                                 `${theme.shape.borderRadiusMedium}px`,
                             backgroundColor: theme =>
-                                theme.palette.secondaryContainer,
+                                theme.palette.background.elevation2,
                         }}
                     >
                         <Typography variant="body2" fontWeight="bold">

frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx

@@ -57,7 +57,7 @@ export const InviteLinkBar: VFC = () => {
     return (
         <Box
             sx={{
-                backgroundColor: 'tertiary.background',
+                backgroundColor: 'background.paper',
                 py: 2,
                 px: 4,
                 mb: 2,

frontend/src/component/admin/users/LinkField/LinkField.tsx

@@ -37,7 +37,7 @@ export const LinkField = ({ inviteLink, small }: ILinkFieldProps) => {
     return (
         <Box
             sx={{
-                backgroundColor: theme => theme.palette.secondaryContainer,
+                backgroundColor: theme => theme.palette.background.elevation2,
                 py: 4,
                 px: 4,
                 borderRadius: theme => `${theme.shape.borderRadius}px`,

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/Change.tsx

@@ -48,11 +48,11 @@ const StyledSingleChangeBox = styled(Box, {
         borderColor:
             $hasConflict || $isInConflictFeature
                 ? theme.palette.warning.border
-                : theme.palette.dividerAlternative,
+                : theme.palette.divider,
         borderTopColor:
             ($hasConflict || $isAfterWarning) && !$isInConflictFeature
                 ? theme.palette.warning.border
-                : theme.palette.dividerAlternative,
+                : theme.palette.divider,
     })
 );
 

frontend/src/component/changeRequest/ChangeRequest/Changes/FeatureToggleChanges.tsx

@@ -35,7 +35,7 @@ export const FeatureToggleChanges: FC<IFeatureToggleChanges> = ({
                 borderColor: theme =>
                     conflict
                         ? theme.palette.warning.border
-                        : theme.palette.tertiary.main,
+                        : theme.palette.divider,
                 borderBottom: 'none',
                 overflow: 'hidden',
             })}

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/ChangeRequestComment.tsx

@@ -20,7 +20,7 @@ const CommentPaper = styled(Paper)(({ theme }) => ({
 const CommentHeader = styled(Box)(({ theme }) => ({
     display: 'flex',
     borderBottom: '1px solid',
-    borderColor: theme.palette.dividerAlternative,
+    borderColor: theme.palette.divider,
     paddingBottom: theme.spacing(1.5),
 }));
 

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx

@@ -26,7 +26,7 @@ export const StyledHeader = styled(Typography)(({ theme }) => ({
 
 export const StyledCard = styled(Card)(({ theme }) => ({
     padding: theme.spacing(0.75, 1.5),
-    backgroundColor: theme.palette.tertiary.light,
+    backgroundColor: theme.palette.background.elevation2,
 }));
 
 export const StyledAvatar = styled(Avatar)(({ theme }) => ({

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.tsx

@@ -29,26 +29,26 @@ const resolveBorder = (state: ChangeRequestState, theme: Theme) => {
         return `2px solid ${theme.palette.primary.main}`;
     }
 
-    return `1px solid ${theme.palette.tertiary.main}`;
+    return `1px solid ${theme.palette.divider}`;
 };
 
 const resolveIconColors = (state: ChangeRequestState, theme: Theme) => {
     if (state === 'Approved') {
         return {
             bgColor: theme.palette.success.main!,
-            svgColor: theme.palette.tertiary.background,
+            svgColor: theme.palette.background.paper,
         };
     }
 
     if (state === 'Applied') {
         return {
             bgColor: theme.palette.primary.main!,
-            svgColor: theme.palette.tertiary.background,
+            svgColor: theme.palette.background.paper,
         };
     }
 
     return {
-        bgColor: theme.palette.tableHeaderBackground,
+        bgColor: theme.palette.background.elevation2,
         svgColor: theme.palette.neutral.main!,
     };
 };
@@ -117,8 +117,8 @@ const Approved = () => {
             <StyledFlexAlignCenterBox>
                 <StyledSuccessIcon />
                 <Box>
-                    <StyledReviewTitle color={theme.palette.success.main}>
+                    <StyledReviewTitle color={theme.palette.success.dark}>
-                        Changed approved
+                        Changes approved
                     </StyledReviewTitle>
                     <Typography>
                         One approving review from requested approvers
@@ -131,7 +131,7 @@ const Approved = () => {
             <StyledFlexAlignCenterBox>
                 <StyledSuccessIcon />
                 <Box>
-                    <StyledReviewTitle color={theme.palette.success.main}>
+                    <StyledReviewTitle color={theme.palette.success.dark}>
                         Changes are ready to be applied
                     </StyledReviewTitle>
                 </Box>
@@ -152,7 +152,7 @@ const ReviewRequired = ({ minApprovals }: IReviewRequiredProps) => {
             <StyledFlexAlignCenterBox>
                 <StyledWarningIcon />
                 <Box>
-                    <StyledReviewTitle color={theme.palette.warning.main}>
+                    <StyledReviewTitle color={theme.palette.warning.dark}>
                         Review required
                     </StyledReviewTitle>
                     <Typography>
@@ -166,7 +166,7 @@ const ReviewRequired = ({ minApprovals }: IReviewRequiredProps) => {
 
             <StyledFlexAlignCenterBox>
                 <StyledWarningIcon />
-                <StyledReviewTitle color={theme.palette.warning.main}>
+                <StyledReviewTitle color={theme.palette.warning.dark}>
                     Apply changes is blocked
                 </StyledReviewTitle>
             </StyledFlexAlignCenterBox>

frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx

@@ -59,7 +59,7 @@ export const Separator = () => (
         sx={{
             marginLeft: 1.5,
             marginRight: 1.5,
-            color: 'dividerAlternative',
+            color: 'divider',
         }}
     >
         |

frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx

@@ -38,7 +38,7 @@ export const EnvironmentChangeRequest: FC<{
                 padding: 3,
                 border: '2px solid',
                 mb: 5,
-                borderColor: theme => theme.palette.secondaryContainer,
+                borderColor: theme => theme.palette.divider,
                 borderRadius: theme => `${theme.shape.borderRadiusLarge}px`,
             }}
         >

frontend/src/component/changeRequest/ChangeRequestSidebar/ReviewChangesHeader/ReviewChangesHeader.tsx

@@ -6,7 +6,7 @@ import { PageHeader } from '../../../common/PageHeader/PageHeader';
 const StyledHelpOutline = styled(HelpOutline)(({ theme }) => ({
     fontSize: theme.fontSizes.mainHeader,
     marginLeft: '0.3rem',
-    color: theme.palette.grey[700],
+    color: theme.palette.action.active,
 }));
 
 const StyledHeaderHint = styled('div')(({ theme }) => ({

frontend/src/component/common/AutocompleteBox/AutocompleteBox.styles.ts

@@ -8,7 +8,7 @@ export const useStyles = makeStyles()(theme => ({
         borderTopRightRadius: 50,
         borderBottomRightRadius: 50,
         '& fieldset': {
-            borderColor: theme.palette.grey[300],
+            borderColor: theme.palette.divider,
             borderLeftColor: 'transparent',
         },
         '&.Mui-focused .MuiOutlinedInput-notchedOutline': {

frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx

@@ -31,7 +31,7 @@ const StyledIcon = styled('div', {
 })<{ $disabled: boolean }>(({ theme, $disabled }) => ({
     background: $disabled
         ? theme.palette.primary.light
-        : theme.palette.featureSegmentSearchBackground,
+        : theme.palette.primary.main,
     height: '48px',
     width: '48px',
     display: 'flex',
@@ -40,7 +40,7 @@ const StyledIcon = styled('div', {
     paddingLeft: 6,
     borderTopLeftRadius: '40px',
     borderBottomLeftRadius: '40px',
-    color: theme.palette.text.tertiaryContrast,
+    color: theme.palette.primary.contrastText,
 }));
 
 const StyledAutocomplete = styled(Autocomplete)({

frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx

@@ -7,7 +7,7 @@ interface ICheckMarkBadgeProps {
 }
 
 const StyledBatch = styled('div')(({ theme }) => ({
-    backgroundColor: theme.palette.checkmarkBadge,
+    backgroundColor: theme.palette.primary.main,
     width: '75px',
     height: '75px',
     borderRadius: '50px',
@@ -21,12 +21,12 @@ const StyledBatch = styled('div')(({ theme }) => ({
 }));
 
 const StyledClose = styled(Close)(({ theme }) => ({
-    color: theme.palette.tertiary.background,
+    color: theme.palette.background.paper,
     width: '35px',
     height: '35px',
 }));
 const StyledCheck = styled(Check)(({ theme }) => ({
-    color: theme.palette.tertiary.background,
+    color: theme.palette.background.paper,
     width: '35px',
     height: '35px',
 }));

frontend/src/component/common/Codebox/Codebox.tsx

@@ -17,7 +17,7 @@ const StyledCode = styled('pre')(({ theme }) => ({
     margin: 0,
     wordBreak: 'break-all',
     whiteSpace: 'pre-wrap',
-    color: theme.palette.formSidebarTextColor,
+    color: theme.palette.common.white,
     fontSize: theme.fontSizes.smallBody,
 }));
 

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx

@@ -50,9 +50,9 @@ const resolveContextDefinition = (
 const StyledForm = styled('div')({ padding: 0, margin: 0, width: '100%' });
 
 const StyledAccordion = styled(Accordion)(({ theme }) => ({
-    border: `1px solid ${theme.palette.dividerAlternative}`,
+    border: `1px solid ${theme.palette.divider}`,
     borderRadius: theme.shape.borderRadiusMedium,
-    backgroundColor: theme.palette.constraintAccordion.editBackground,
+    backgroundColor: theme.palette.background.elevation1,
     boxShadow: 'none',
     margin: 0,
     '& .expanded': {

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintFormHeader/ConstraintFormHeader.tsx

@@ -3,7 +3,7 @@ import { styled } from '@mui/material';
 
 const StyledHeader = styled('h3')(({ theme }) => ({
     fontSize: theme.fontSizes.bodySize,
-    fontWeight: theme.typography.fontWeightMedium,
+    fontWeight: theme.typography.fontWeightRegular,
     marginTop: theme.spacing(2),
     marginBottom: theme.spacing(0.5),
 }));

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts

@@ -12,6 +12,6 @@ export const useStyles = makeStyles()(theme => ({
     description: {
         lineHeight: 1.33,
         fontSize: theme.fontSizes.smallerBody,
-        color: theme.palette.grey[700],
+        color: theme.palette.action.active,
     },
 }));

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx

@@ -6,12 +6,12 @@ export const StyledToggleButtonOff = styled(IconButton)(({ theme }) => ({
     minWidth: '28px',
     maxWidth: '28px',
     height: 'auto',
-    backgroundColor: theme.palette.tertiary.background,
+    backgroundColor: theme.palette.background.paper,
     borderRadius: theme.shape.borderRadius,
     padding: '0 1px 0',
     marginRight: '1rem',
     '&:hover': {
-        background: theme.palette.tertiary.contrast[300],
+        background: theme.palette.background.application,
     },
     [theme.breakpoints.between(1101, 1365)]: {
         marginRight: '0.5rem',

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx

@@ -46,7 +46,7 @@ const StyledHelpWrapper = styled(Tooltip)(({ theme }) => ({
 }));
 
 const StyledHelp = styled(HelpOutline)(({ theme }) => ({
-    fill: theme.palette.tertiary.dark,
+    fill: theme.palette.action.active,
     [theme.breakpoints.down(860)]: {
         display: 'none',
     },
@@ -60,7 +60,7 @@ const StyledConstraintLabel = styled('p')(({ theme }) => ({
 const StyledAddCustomLabel = styled('div')(({ theme }) => ({
     marginTop: theme.spacing(1),
     marginBottom: theme.spacing(1),
-    color: theme.palette.text.secondary,
+    color: theme.palette.text.primary,
     display: 'flex',
 }));
 

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx

@@ -27,9 +27,9 @@ interface IConstraintAccordionViewProps {
 }
 
 const StyledAccordion = styled(Accordion)(({ theme }) => ({
-    border: `1px solid ${theme.palette.dividerAlternative}`,
+    border: `1px solid ${theme.palette.divider}`,
     borderRadius: theme.shape.borderRadiusMedium,
-    backgroundColor: theme.palette.constraintAccordion.background,
+    backgroundColor: theme.palette.background.paper,
     boxShadow: 'none',
     margin: 0,
 

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper.tsx

@@ -5,7 +5,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 export const StyledIconWrapperBase = styled('div')<{
     prefix?: boolean;
 }>(({ theme }) => ({
-    backgroundColor: theme.palette.grey[200],
+    backgroundColor: theme.palette.background.elevation2,
     width: 24,
     display: 'flex',
     alignItems: 'center',

frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx

@@ -11,7 +11,7 @@ interface IConstraintOperatorProps {
 const StyledContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(0.5, 1.5),
     borderRadius: theme.shape.borderRadius,
-    backgroundColor: theme.palette.constraintAccordion.operatorBackground,
+    backgroundColor: theme.palette.background.elevation2,
     lineHeight: 1.25,
 }));
 

frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect.tsx

@@ -64,7 +64,7 @@ const StyledMenuItem = styled(MenuItem, {
                   left: 0,
                   right: 0,
                   borderTop: '1px solid',
-                  borderTopColor: theme.palette.tertiary.contrast,
+                  borderTopColor: theme.palette.divider,
               },
           }
         : {}

frontend/src/component/common/Dialogue/Dialogue.tsx

@@ -21,7 +21,7 @@ const StyledDialog = styled(Dialog)(({ theme, maxWidth }) => ({
 
 const StyledDialogTitle = styled(DialogTitle)(({ theme }) => ({
     backgroundColor: theme.palette.primary.main,
-    color: theme.palette.text.tertiaryContrast,
+    color: theme.palette.primary.contrastText,
     padding: theme.spacing(3.5, 6),
     fontWeight: theme.fontWeight.medium,
 }));

frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.tsx

@@ -1,16 +1,10 @@
-import { Chip, styled } from '@mui/material';
+import { Badge } from 'component/common/Badge/Badge';
 
 interface IStatusChip {
     stale: boolean;
     showActive?: boolean;
 }
 
-const StyledChip = styled(Chip)(({ theme }) => ({
-    background: 'transparent',
-    border: `1px solid ${theme.palette.primary.main}`,
-    color: theme.palette.primary.main,
-}));
-
 export const FeatureStatusChip = ({
     stale,
     showActive = true,
@@ -26,12 +20,9 @@ export const FeatureStatusChip = ({
 
     return (
         <div data-loading style={{ marginLeft: '8px' }}>
-            <StyledChip
+            <Badge color={stale ? 'neutral' : 'secondary'} title={title}>
-                color="primary"
+                {value}
-                variant="outlined"
+            </Badge>
-                title={title}
-                label={value}
-            />
         </div>
     );
 };

frontend/src/component/common/FormTemplate/FormTemplate.tsx

@@ -46,7 +46,7 @@ const StyledContainer = styled('section', {
 const StyledRelativeDiv = styled('div')(({ theme }) => relative);
 
 const StyledFormContent = styled('div')(({ theme }) => ({
-    backgroundColor: theme.palette.formBackground,
+    backgroundColor: theme.palette.background.paper,
     display: 'flex',
     flexDirection: 'column',
     padding: theme.spacing(6),
@@ -73,7 +73,7 @@ const StyledSidebarDivider = styled(Divider)(({ theme }) => ({
 }));
 
 const StyledSubtitle = styled('h2')(({ theme }) => ({
-    color: theme.palette.formSidebarTextColor,
+    color: theme.palette.common.white,
     marginBottom: theme.spacing(2),
     display: 'flex',
     justifyContent: 'space-between',
@@ -83,7 +83,7 @@ const StyledSubtitle = styled('h2')(({ theme }) => ({
 }));
 
 const StyledIcon = styled(FileCopy)(({ theme }) => ({
-    fill: theme.palette.text.tertiaryContrast,
+    fill: theme.palette.primary.contrastText,
 }));
 
 const StyledMobileGuidanceContainer = styled('div')(() => ({
@@ -105,11 +105,11 @@ const StyledMobileGuidanceButton = styled(IconButton)(() => ({
 }));
 
 const StyledInfoIcon = styled(Info)(({ theme }) => ({
-    fill: theme.palette.text.tertiaryContrast,
+    fill: theme.palette.primary.contrastText,
 }));
 
 const StyledSidebar = styled('aside')(({ theme }) => ({
-    backgroundColor: theme.palette.formSidebar,
+    backgroundColor: theme.palette.background.sidebar,
     padding: theme.spacing(4),
     flexGrow: 0,
     flexShrink: 0,
@@ -124,7 +124,7 @@ const StyledSidebar = styled('aside')(({ theme }) => ({
 }));
 
 const StyledDescription = styled('p')(({ theme }) => ({
-    color: theme.palette.formSidebarTextColor,
+    color: theme.palette.common.white,
     zIndex: 1,
     position: 'relative',
 }));
@@ -137,11 +137,11 @@ const StyledLinkContainer = styled('div')(({ theme }) => ({
 
 const StyledLinkIcon = styled(MenuBookIcon)(({ theme }) => ({
     marginRight: theme.spacing(1),
-    color: theme.palette.text.tertiaryContrast,
+    color: theme.palette.primary.contrastText,
 }));
 
 const StyledDocumentationLink = styled('a')(({ theme }) => ({
-    color: theme.palette.text.tertiaryContrast,
+    color: theme.palette.primary.contrastText,
     display: 'block',
     '&:hover': {
         textDecoration: 'none',

frontend/src/component/common/GuidanceIndicator/GuidanceIndicator.tsx

@@ -5,7 +5,7 @@ const StyledIndicator = styled('div')(({ style, theme }) => ({
     width: '25px',
     height: '25px',
     borderRadius: '50%',
-    color: theme.palette.text.tertiaryContrast,
+    color: theme.palette.primary.contrastText,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -29,7 +29,7 @@ export const GuidanceIndicator: FC<IGuidanceIndicatorProps> = ({
 
     const defaults = { backgroundColor: theme.palette.primary.main };
     if (type === 'secondary') {
-        defaults.backgroundColor = theme.palette.tertiary.dark;
+        defaults.backgroundColor = theme.palette.text.disabled;
     }
 
     return (

frontend/src/component/common/HtmlTooltip/HtmlTooltip.tsx

@@ -46,13 +46,13 @@ const StyledHtmlTooltip = styled(
             color: theme.palette.text.primary,
             fontWeight: theme.fontWeight.medium,
             maxWidth: 'inherit',
-            border: `1px solid ${theme.palette.lightBorder}`,
+            border: `1px solid ${theme.palette.divider}`,
             maxHeight,
             fontSize,
         },
         [`& .${tooltipClasses.arrow}`]: {
             '&:before': {
-                border: `1px solid ${theme.palette.lightBorder}`,
+                border: `1px solid ${theme.palette.divider}`,
             },
             color: theme.palette.background.paper,
         },

frontend/src/component/common/NotFound/NotFound.tsx

@@ -12,7 +12,7 @@ const StyledContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(4),
     position: 'fixed',
     inset: 0,
-    backgroundColor: theme.palette.text.tertiaryContrast,
+    backgroundColor: theme.palette.primary.contrastText,
     width: '100%',
 }));
 

frontend/src/component/common/Notifications/Notification.tsx

@@ -38,7 +38,7 @@ const StyledListItemButton = styled(ListItemButton)(({ theme }) => ({
     cursor: 'pointer',
     margin: theme.spacing(2, 0),
     '&:not(:last-child)': {
-        borderBottom: `2px solid ${theme.palette.tertiary.contrast}`,
+        borderBottom: `2px solid ${theme.palette.divider}`,
     },
     width: '100%',
 }));

frontend/src/component/common/PageHeader/PageHeader.tsx

@@ -15,7 +15,7 @@ import { usePageTitle } from 'hooks/usePageTitle';
 
 const StyledDivider = styled(Divider)(({ theme }) => ({
     height: '100%',
-    borderColor: theme.palette.dividerAlternative,
+    borderColor: theme.palette.divider,
     width: '1px',
     display: 'inline-block',
     marginLeft: theme.spacing(2),

frontend/src/component/common/PercentageCircle/PercentageCircle.tsx

@@ -18,7 +18,7 @@ const PercentageCircle = ({
         transform: 'rotate(-90deg)',
         height: size,
         width: size,
-        background: theme.palette.grey[200],
+        background: theme.palette.background.elevation2,
     };
 
     // The percentage circle used to be drawn by CSS with a conic-gradient,

frontend/src/component/common/PremiumFeature/PremiumFeature.tsx

@@ -10,7 +10,9 @@ const PremiumFeatureWrapper = styled(Box, {
     flexDirection: 'column',
     alignItems: tooltip ? 'start' : 'center',
     textAlign: tooltip ? 'left' : 'center',
-    backgroundColor: tooltip ? 'transparent' : theme.palette.secondaryContainer,
+    backgroundColor: tooltip
+        ? 'transparent'
+        : theme.palette.background.elevation2,
     borderRadius: tooltip ? 0 : theme.shape.borderRadiusLarge,
     padding: tooltip ? theme.spacing(1, 0.5) : theme.spacing(7.5, 1),
 }));

frontend/src/component/common/Search/Search.tsx

@@ -101,7 +101,7 @@ export const Search = ({
                 <SearchIcon
                     sx={{
                         mr: 1,
-                        color: theme => theme.palette.inactiveIcon,
+                        color: theme => theme.palette.action.disabled,
                     }}
                 />
                 <StyledInputBase

frontend/src/component/common/Search/SearchSuggestions/SearchDescription/SearchDescription.tsx

@@ -12,7 +12,7 @@ const StyledHeader = styled('span')(({ theme }) => ({
 }));
 
 const StyledCode = styled('span')(({ theme }) => ({
-    backgroundColor: theme.palette.secondaryContainer,
+    backgroundColor: theme.palette.background.elevation2,
     color: theme.palette.text.primary,
     padding: theme.spacing(0, 0.5),
     borderRadius: theme.spacing(0.5),

frontend/src/component/common/Search/SearchSuggestions/SearchInstructions/SearchInstructions.tsx

@@ -9,7 +9,7 @@ const StyledHeader = styled('span')(({ theme }) => ({
 }));
 
 const StyledCode = styled('span')(({ theme }) => ({
-    backgroundColor: theme.palette.secondaryContainer,
+    backgroundColor: theme.palette.background.elevation2,
     color: theme.palette.text.primary,
     padding: theme.spacing(0, 0.5),
     borderRadius: theme.spacing(0.5),

frontend/src/component/common/Search/SearchSuggestions/SearchSuggestions.tsx

@@ -38,12 +38,12 @@ const StyledFilterList = styled(FilterList)(({ theme }) => ({
 }));
 
 const StyledDivider = styled(Divider)(({ theme }) => ({
-    border: `1px dashed ${theme.palette.dividerAlternative}`,
+    border: `1px dashed ${theme.palette.divider}`,
     margin: theme.spacing(1.5, 0),
 }));
 
 const StyledCode = styled('span')(({ theme }) => ({
-    backgroundColor: theme.palette.secondaryContainer,
+    backgroundColor: theme.palette.background.elevation2,
     color: theme.palette.text.primary,
     padding: theme.spacing(0, 0.5),
     borderRadius: theme.spacing(0.5),

frontend/src/component/common/SegmentItem/SegmentItem.tsx

@@ -21,7 +21,7 @@ interface ISegmentItemProps {
 }
 
 const StyledAccordion = styled(Accordion)(({ theme }) => ({
-    border: `1px solid ${theme.palette.dividerAlternative}`,
+    border: `1px solid ${theme.palette.divider}`,
     borderRadius: theme.shape.borderRadiusMedium,
     backgroundColor: theme.palette.background.paper,
     boxShadow: 'none',

frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx

@@ -99,7 +99,7 @@ export const StrategyItemContainer: FC<IStrategyItemContainerProps> = ({
                     />
                     <Icon
                         sx={{
-                            fill: theme => theme.palette.inactiveIcon,
+                            fill: theme => theme.palette.action.disabled,
                         }}
                     />
                     <StringTruncator

frontend/src/component/common/StrategySeparator/StrategySeparator.tsx

@@ -9,7 +9,7 @@ const StyledContent = styled('div')(({ theme }) => ({
     padding: theme.spacing(0.75, 1),
     color: theme.palette.text.primary,
     fontSize: theme.fontSizes.smallerBody,
-    backgroundColor: theme.palette.secondaryContainer,
+    backgroundColor: theme.palette.background.elevation2,
     borderRadius: theme.shape.borderRadius,
     position: 'absolute',
     zIndex: theme.zIndex.fab,
@@ -23,8 +23,7 @@ const StyledCenteredContent = styled(StyledContent)(({ theme }) => ({
     top: '50%',
     left: '50%',
     transform: 'translate(-50%, -50%)',
-    backgroundColor: theme.palette.activityIndicators.primary,
+    backgroundColor: theme.palette.seen.primary,
-    border: `1px solid ${theme.palette.primary.border}`,
     borderRadius: theme.shape.borderRadiusLarge,
     padding: theme.spacing(0.75, 1.5),
 }));

frontend/src/component/common/TabNav/TabNav/TabNav.tsx

@@ -51,7 +51,7 @@ export const TabNav = ({
                 sx={{
                     backgroundColor: theme => theme.palette.background.paper,
                     borderBottom: '1px solid',
-                    borderBottomColor: theme => theme.palette.grey[300],
+                    borderBottomColor: theme => theme.palette.divider,
                     borderRadius: 0,
                 }}
             >

frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.styles.ts

@@ -22,7 +22,7 @@ export const StyledTableCell = styled(TableCell, {
     ...(isSortable && {
         padding: 0,
         '&:hover, &:focus': {
-            backgroundColor: theme.palette.tableHeaderHover,
+            backgroundColor: theme.palette.table.headerHover,
             '& svg': {
                 color: 'inherit',
             },

frontend/src/component/common/Table/SortableTableHeader/CellSortable/SortArrow/SortArrow.tsx

@@ -36,7 +36,7 @@ export const SortArrow: VFC<ISortArrowProps> = ({
                     <KeyboardArrowDown
                         sx={theme => ({
                             ...iconStyle(theme),
-                            color: theme.palette.tableHeaderColor,
+                            color: theme.palette.table.headerColor,
                         })}
                         className={className}
                         fontSize="inherit"
@@ -46,7 +46,7 @@ export const SortArrow: VFC<ISortArrowProps> = ({
                     <KeyboardArrowUp
                         sx={theme => ({
                             ...iconStyle(theme),
-                            color: theme.palette.tableHeaderColor,
+                            color: theme.palette.table.headerColor,
                         })}
                         className={className}
                         fontSize="inherit"

frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx

@@ -1,5 +1,5 @@
 import { VFC } from 'react';
-import { styled, TableHead, TableRow } from '@mui/material';
+import { TableHead, TableRow } from '@mui/material';
 import { HeaderGroup } from 'react-table';
 import { CellSortable } from './CellSortable/CellSortable';
 
@@ -9,23 +9,6 @@ interface ISortableTableHeaderProps {
     flex?: boolean;
 }
 
-const StyledTableRow = styled(TableRow)(({ theme }) => ({
-    '& > th': {
-        height: theme.shape.tableRowHeightCompact,
-        border: 0,
-        backgroundColor: theme.palette.tableHeaderBackground,
-        color: theme.palette.tableHeaderColor,
-        '&:first-of-type': {
-            borderTopLeftRadius: theme.shape.borderRadiusMedium,
-            borderBottomLeftRadius: theme.shape.borderRadiusMedium,
-        },
-        '&:last-of-type': {
-            borderTopRightRadius: theme.shape.borderRadiusMedium,
-            borderBottomRightRadius: theme.shape.borderRadiusMedium,
-        },
-    },
-}));
-
 export const SortableTableHeader: VFC<ISortableTableHeaderProps> = ({
     headerGroups,
     className,
@@ -33,7 +16,7 @@ export const SortableTableHeader: VFC<ISortableTableHeaderProps> = ({
 }) => (
     <TableHead className={className}>
         {headerGroups.map(headerGroup => (
-            <StyledTableRow {...headerGroup.getHeaderGroupProps()}>
+            <TableRow {...headerGroup.getHeaderGroupProps()}>
                 {headerGroup.headers.map((column: HeaderGroup) => {
                     const content = column.render('Header');
 
@@ -64,7 +47,7 @@ export const SortableTableHeader: VFC<ISortableTableHeaderProps> = ({
                         </CellSortable>
                     );
                 })}
-            </StyledTableRow>
+            </TableRow>
         ))}
     </TableHead>
 );

frontend/src/component/common/Table/cells/ActionCell/ActionCell.tsx

@@ -9,7 +9,7 @@ const StyledContainer = styled(Box)(({ theme }) => ({
 }));
 
 const StyledDivider = styled(Divider)(({ theme }) => ({
-    borderColor: theme.palette.dividerAlternative,
+    borderColor: theme.palette.divider,
     height: theme.spacing(3),
     margin: theme.spacing(0, 2),
 }));

frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureSeenCell.tsx

@@ -30,21 +30,21 @@ const useFeatureColor = () => {
     return (unit?: string): string => {
         switch (unit) {
             case 'second':
-                return theme.palette.activityIndicators.recent;
+                return theme.palette.seen.recent;
             case 'minute':
-                return theme.palette.activityIndicators.recent;
+                return theme.palette.seen.recent;
             case 'hour':
-                return theme.palette.activityIndicators.recent;
+                return theme.palette.seen.recent;
             case 'day':
-                return theme.palette.activityIndicators.recent;
+                return theme.palette.seen.recent;
             case 'week':
-                return theme.palette.activityIndicators.inactive;
+                return theme.palette.seen.inactive;
             case 'month':
-                return theme.palette.activityIndicators.abandoned;
+                return theme.palette.seen.abandoned;
             case 'year':
-                return theme.palette.activityIndicators.abandoned;
+                return theme.palette.seen.abandoned;
             default:
-                return theme.palette.activityIndicators.unknown;
+                return theme.palette.seen.unknown;
         }
     };
 };

frontend/src/component/common/Table/cells/FeatureTypeCell/FeatureTypeCell.styles.ts

@@ -8,6 +8,6 @@ export const useStyles = makeStyles()(theme => ({
         alignItems: 'center',
     },
     icon: {
-        color: theme.palette.inactiveIcon,
+        color: theme.palette.action.disabled,
     },
 }));

frontend/src/component/context/ContectFormChip/ContextFormChip.tsx

@@ -16,7 +16,7 @@ const StyledContainer = styled('li')(({ theme }) => ({
     alignItems: 'start',
     gap: theme.spacing(1),
     padding: theme.spacing(1),
-    background: theme.palette.secondaryContainer,
+    background: theme.palette.background.elevation2,
     borderRadius: theme.shape.borderRadius,
     wordBreak: 'break-word',
 }));

frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentCloneModal/EnvironmentCloneModal.tsx

@@ -59,7 +59,7 @@ const StyledInput = styled(Input)(({ theme }) => ({
 
 const StyledSecondaryContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(3),
-    backgroundColor: theme.palette.secondaryContainer,
+    backgroundColor: theme.palette.background.elevation2,
     borderRadius: theme.shape.borderRadiusMedium,
     marginTop: theme.spacing(4),
 }));

frontend/src/component/events/EventDiff/EventDiff.tsx

@@ -18,10 +18,10 @@ const EventDiff = ({ entry }: IEventDiffProps) => {
     const theme = useTheme();
 
     const styles: Record<string, CSSProperties> = {
-        A: { color: theme.palette.code.edited }, // array edited
+        A: { color: theme.palette.eventLog.edited }, // array edited
-        E: { color: theme.palette.code.edited }, // edited
+        E: { color: theme.palette.eventLog.edited }, // edited
-        D: { color: theme.palette.code.diffSub }, // deleted
+        D: { color: theme.palette.eventLog.diffSub }, // deleted
-        N: { color: theme.palette.code.diffAdd }, // added
+        N: { color: theme.palette.eventLog.diffAdd }, // added
     };
 
     const diffs =

frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx

@@ -57,7 +57,7 @@ const StyledHr = styled('hr')(({ theme }) => ({
     height: '1px',
     margin: theme.spacing(2, 0),
     border: 'none',
-    background: theme.palette.tertiary.light,
+    background: theme.palette.background.elevation2,
 }));
 
 const StyledButtons = styled('div')(({ theme }) => ({

frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcon/FeatureStrategyIcon.tsx

@@ -26,7 +26,7 @@ const StyledIcon = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    color: theme.palette.inactiveIcon,
+    color: theme.palette.action.disabled,
 
     '& svg': {
         width: theme.spacing(2.5),

frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx

@@ -48,7 +48,7 @@ const StyledCard = styled(Link)(({ theme }) => ({
     lineHeight: 1.25,
     borderWidth: '1px',
     borderStyle: 'solid',
-    borderColor: theme.palette.dividerAlternative,
+    borderColor: theme.palette.divider,
     borderRadius: theme.spacing(1),
     '&:hover, &:focus': {
         borderColor: theme.palette.primary.main,

frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip.tsx

@@ -22,8 +22,8 @@ const StyledChip = styled('span')(({ theme }) => ({
     paddingBlockStart: theme.spacing(0.5),
     paddingBlockEnd: theme.spacing(0.5),
     borderRadius: '100rem',
-    background: theme.palette.featureStrategySegmentChipBackground,
+    background: theme.palette.primary.main,
-    color: theme.palette.text.tertiaryContrast,
+    color: theme.palette.primary.contrastText,
 }));
 
 const StyledButton = styled('button')(({ theme }) => ({

frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentList.tsx

@@ -30,7 +30,7 @@ const StyledAnd = styled('p')(({ theme }) => ({
     borderRadius: theme.shape.borderRadius,
     lineHeight: 1,
     color: theme.palette.text.primary,
-    backgroundColor: theme.palette.secondaryContainer,
+    backgroundColor: theme.palette.background.elevation2,
 }));
 
 export const FeatureStrategySegmentList = ({

frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts

@@ -22,7 +22,7 @@ export const createChartOptions = (
             tooltip: {
                 backgroundColor: 'white',
                 bodyColor: theme.palette.text.primary,
-                titleColor: theme.palette.grey[700],
+                titleColor: theme.palette.action.active,
                 borderColor: theme.palette.primary.main,
                 borderWidth: 1,
                 padding: 10,

frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx

@@ -31,6 +31,9 @@ const StyledItem = styled('li')(({ theme }) => ({
         backgroundColor: theme.palette.primary.main,
         color: theme.palette.primary.contrastText,
     },
+    '& > [aria-pressed=true]:hover': {
+        backgroundColor: theme.palette.primary.light,
+    },
 }));
 
 export const FeatureMetricsChips = ({

frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx

@@ -39,7 +39,7 @@ export const FeatureMetricsContent = ({
                 borderTop={1}
                 pt={2}
                 mt={3}
-                borderColor={theme.palette.grey[200]}
+                borderColor={theme.palette.divider}
             >
                 <LazyFeatureMetricsChart
                     metrics={metrics}

frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.tsx

@@ -37,7 +37,7 @@ const StyledText = styled('p')(({ theme }) => ({
     padding: theme.spacing(2, 0, 0, 0),
     borderTopWidth: '1px',
     borderTopStyle: 'solid',
-    borderTopColor: theme.palette.dividerAlternative,
+    borderTopColor: theme.palette.divider,
     fontSize: theme.fontSizes.smallerBody,
     color: theme.palette.text.secondary,
 }));

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

@@ -16,6 +16,7 @@ import {
     parseParameterStrings,
 } from 'utils/parseParameter';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
+import { Badge } from 'component/common/Badge/Badge';
 
 interface IStrategyExecutionProps {
     strategy: IFeatureStrategyPayload;
@@ -29,7 +30,7 @@ const NoItems: VFC = () => (
 
 const StyledValueContainer = styled(Box)(({ theme }) => ({
     padding: theme.spacing(2, 3),
-    border: `1px solid ${theme.palette.dividerAlternative}`,
+    border: `1px solid ${theme.palette.divider}`,
     borderRadius: theme.shape.borderRadiusMedium,
 }));
 
@@ -72,13 +73,8 @@ export const StrategyExecution: VFC<IStrategyExecutionProps> = ({
                                 />
                             </Box>
                             <div>
-                                <Chip
+                                <Badge color="success">{percentage}%</Badge> of
-                                    color="success"
+                                your base{' '}
-                                    variant="outlined"
-                                    size="small"
-                                    label={`${percentage}%`}
-                                />{' '}
-                                of your base{' '}
                                 {constraints.length > 0
                                     ? 'who match constraints'
                                     : ''}{' '}
@@ -167,12 +163,7 @@ export const StrategyExecution: VFC<IStrategyExecutionProps> = ({
                             <div>
                                 {nameItem}
                                 {isSetTo}
-                                <Chip
+                                <Badge color="success">{percentage}%</Badge>
-                                    color="success"
-                                    variant="outlined"
-                                    size="small"
-                                    label={`${percentage}%`}
-                                />
                             </div>
                         </StyledValueContainer>
                     ) : null;
@@ -187,16 +178,15 @@ export const StrategyExecution: VFC<IStrategyExecutionProps> = ({
                                 text={name}
                             />
                             {isSetTo}
-                            <Chip
+                            <Badge
                                 color={
                                     parameters[name] === 'true'
                                         ? 'success'
                                         : 'error'
                                 }
-                                variant="outlined"
+                            >
-                                size="small"
+                                {parameters[name]}
-                                label={parameters[name]}
+                            </Badge>
-                            />
                         </StyledValueContainer>
                     ) : null;
 
@@ -266,13 +256,7 @@ export const StrategyExecution: VFC<IStrategyExecutionProps> = ({
         strategy.name === 'default' && (
             <>
                 <StyledValueContainer sx={{ width: '100%' }}>
-                    The standard strategy is{' '}
+                    The standard strategy is <Badge color="success">ON</Badge>{' '}
-                    <Chip
-                        variant="outlined"
-                        size="small"
-                        color="success"
-                        label="ON"
-                    />{' '}
                     for all users.
                 </StyledValueContainer>
             </>

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx

@@ -3,7 +3,6 @@ import {
     AccordionDetails,
     AccordionSummary,
     Box,
-    Chip,
     styled,
 } from '@mui/material';
 import { ExpandMore } from '@mui/icons-material';
@@ -22,6 +21,7 @@ import { FEATURE_ENVIRONMENT_ACCORDION } from 'utils/testIds';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { FeatureStrategyIcons } from 'component/feature/FeatureStrategy/FeatureStrategyIcons/FeatureStrategyIcons';
 import { useGlobalLocalStorage } from 'hooks/useGlobalLocalStorage';
+import { Badge } from 'component/common/Badge/Badge';
 
 interface IFeatureOverviewEnvironmentProps {
     env: IFeatureEnvironment;
@@ -55,7 +55,7 @@ const StyledAccordionDetails = styled(AccordionDetails, {
     shouldForwardProp: prop => prop !== 'enabled',
 })<{ enabled: boolean }>(({ theme, enabled }) => ({
     padding: theme.spacing(3),
-    background: theme.palette.secondaryContainer,
+    background: theme.palette.background.elevation2,
     borderBottomLeftRadius: theme.shape.borderRadiusLarge,
     borderBottomRightRadius: theme.shape.borderRadiusLarge,
     borderBottom: `4px solid ${
@@ -162,12 +162,12 @@ const FeatureOverviewEnvironment = ({
                                     <ConditionallyRender
                                         condition={!env.enabled}
                                         show={
-                                            <Chip
+                                            <Badge
-                                                size="small"
+                                                color="neutral"
-                                                variant="outlined"
-                                                label="Disabled"
                                                 sx={{ ml: 1 }}
-                                            />
+                                            >
+                                                Disabled
+                                            </Badge>
                                         }
                                     />
                                 </StyledHeaderTitle>

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx

@@ -40,7 +40,7 @@ const StyledInfoParagraph = styled('p')(({ theme }) => ({
 }));
 
 const StyledIcon = styled(FiberManualRecord)(({ theme }) => ({
-    fill: theme.palette.standaloneBackground,
+    fill: theme.palette.background.application,
     height: '75px',
     width: '75px',
     [theme.breakpoints.down(500)]: {

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/SectionSeparator/SectionSeparator.tsx

@@ -14,7 +14,7 @@ const SeparatorContainer = styled('div')(({ theme }) => ({
         transform: 'translateY(-50%)',
         height: 2,
         width: '100%',
-        backgroundColor: theme.palette.dividerAlternative,
+        backgroundColor: theme.palette.divider,
     },
 }));
 
@@ -22,7 +22,7 @@ const SeparatorContent = styled('span')(({ theme }) => ({
     fontSize: theme.fontSizes.bodySize,
     textAlign: 'center',
     padding: '0 1rem',
-    background: theme.palette.secondaryContainer,
+    background: theme.palette.background.elevation2,
     position: 'relative',
     maxWidth: '80%',
     color: theme.palette.text.primary,

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx

@@ -10,8 +10,8 @@ import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 
 const StyledContainer = styled('div')(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusLarge,
-    color: theme.palette.text.tertiaryContrast,
+    color: theme.palette.primary.contrastText,
-    backgroundColor: theme.palette.featureMetaData,
+    backgroundColor: theme.palette.background.sidebar,
     display: 'flex',
     flexDirection: 'column',
     maxWidth: '350px',
@@ -54,7 +54,7 @@ const StyledBodyItem = styled('span')(({ theme }) => ({
 const StyledDescriptionContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
-    color: theme.palette.text.tertiaryContrast,
+    color: theme.palette.primary.contrastText,
 }));
 
 const FeatureOverviewMetaData = () => {
@@ -74,7 +74,7 @@ const FeatureOverviewMetaData = () => {
                             marginRight: theme.spacing(2),
                             height: '40px',
                             width: '40px',
-                            fill: theme.palette.text.tertiaryContrast,
+                            fill: theme.palette.primary.contrastText,
                         })}
                     />{' '}
                     <StyledHeader>{capitalize(type || '')} toggle</StyledHeader>
@@ -101,8 +101,8 @@ const FeatureOverviewMetaData = () => {
                                     >
                                         <Edit
                                             sx={theme => ({
-                                                color: theme.palette.text
+                                                color: theme.palette.primary
-                                                    .tertiaryContrast,
+                                                    .contrastText,
                                             })}
                                         />
                                     </PermissionIconButton>
@@ -124,8 +124,8 @@ const FeatureOverviewMetaData = () => {
                                     >
                                         <Edit
                                             sx={theme => ({
-                                                color: theme.palette.text
+                                                color: theme.palette.primary
-                                                    .tertiaryContrast,
+                                                    .contrastText,
                                             })}
                                         />
                                     </PermissionIconButton>

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentHider.tsx

@@ -8,9 +8,7 @@ const StyledVisibilityToggle = styled(IconButton, {
 })<{ visibilityOff: boolean }>(({ theme, visibilityOff }) => ({
     marginLeft: 'auto',
     marginRight: theme.spacing(-1),
-    color: visibilityOff
+    color: visibilityOff ? theme.palette.neutral.main : theme.palette.divider,
-        ? theme.palette.neutral.main
-        : theme.palette.tertiary.main,
     '&:hover': {
         color: theme.palette.neutral.main,
     },

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelTags/FeatureOverviewSidePanelTags.tsx

@@ -27,9 +27,6 @@ const StyledTagContainer = styled('div')(({ theme }) => ({
 
 const StyledChip = styled(Chip)(({ theme }) => ({
     fontSize: theme.fontSizes.smallBody,
-    '.MuiChip-deleteIcon': {
-        color: theme.palette.neutral.main,
-    },
 }));
 
 const StyledDivider = styled(Divider)(({ theme }) => ({

frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsCard.tsx

@@ -8,7 +8,7 @@ import { Badge } from 'component/common/Badge/Badge';
 const StyledCard = styled('div')(({ theme }) => ({
     padding: theme.spacing(3),
     borderRadius: theme.shape.borderRadiusLarge,
-    border: `1px solid ${theme.palette.dividerAlternative}`,
+    border: `1px solid ${theme.palette.divider}`,
     '&:not(:last-child)': {
         marginBottom: theme.spacing(3),
     },

frontend/src/component/feature/FeatureView/FeatureView.tsx

@@ -68,7 +68,7 @@ const StyledToolbarContainer = styled('div')({
 
 const StyledSeparator = styled('div')(({ theme }) => ({
     width: '100%',
-    backgroundColor: theme.palette.tertiary.light,
+    backgroundColor: theme.palette.background.elevation2,
     height: '1px',
 }));
 

frontend/src/component/feedback/FeedbackCES/FeedbackCES.tsx

@@ -43,7 +43,7 @@ const StyledClose = styled('div')({
 
 const StyledCloseIcon = styled(CloseOutlined)(({ theme }) => ({
     fontSize: '1.5rem',
-    color: theme.palette.inactiveIcon,
+    color: theme.palette.action.disabled,
 }));
 
 export const FeedbackCES = ({ state }: IFeedbackCESProps) => {

frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.tsx

@@ -41,7 +41,7 @@ const StyledScoreValue = styled('label')(({ theme }) => ({
         display: 'grid',
         justifyContent: 'center',
         alignItems: 'center',
-        background: theme.palette.grey[300],
+        background: theme.palette.divider,
         width: '3rem',
         height: '3rem',
         borderRadius: '10rem',
@@ -53,7 +53,7 @@ const StyledScoreValue = styled('label')(({ theme }) => ({
     '& input:checked + span': {
         fontWeight: theme.fontWeight.bold,
         background: theme.palette.primary.main,
-        color: theme.palette.text.tertiaryContrast,
+        color: theme.palette.primary.contrastText,
     },
     '& input:focus-visible + span': {
         outline: '2px solid',

frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap

@@ -29,7 +29,7 @@ exports[`FeedbackCESForm 1`] = `
             Very difficult
           </span>
           <label
-            class="css-112g122"
+            class="css-ruqihc"
           >
             <input
               name="score"
@@ -41,7 +41,7 @@ exports[`FeedbackCESForm 1`] = `
             </span>
           </label>
           <label
-            class="css-112g122"
+            class="css-ruqihc"
           >
             <input
               name="score"
@@ -53,7 +53,7 @@ exports[`FeedbackCESForm 1`] = `
             </span>
           </label>
           <label
-            class="css-112g122"
+            class="css-ruqihc"
           >
             <input
               name="score"
@@ -65,7 +65,7 @@ exports[`FeedbackCESForm 1`] = `
             </span>
           </label>
           <label
-            class="css-112g122"
+            class="css-ruqihc"
           >
             <input
               name="score"
@@ -77,7 +77,7 @@ exports[`FeedbackCESForm 1`] = `
             </span>
           </label>
           <label
-            class="css-112g122"
+            class="css-ruqihc"
           >
             <input
               name="score"
@@ -89,7 +89,7 @@ exports[`FeedbackCESForm 1`] = `
             </span>
           </label>
           <label
-            class="css-112g122"
+            class="css-ruqihc"
           >
             <input
               name="score"
@@ -101,7 +101,7 @@ exports[`FeedbackCESForm 1`] = `
             </span>
           </label>
           <label
-            class="css-112g122"
+            class="css-ruqihc"
           >
             <input
               name="score"
@@ -131,7 +131,7 @@ exports[`FeedbackCESForm 1`] = `
             class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
           >
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline css-1qvtpcv-MuiInputBase-root-MuiOutlinedInput-root"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline css-1nhioic-MuiInputBase-root-MuiOutlinedInput-root"
             >
               <textarea
                 aria-invalid="false"
@@ -169,7 +169,7 @@ exports[`FeedbackCESForm 1`] = `
           hidden=""
         >
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-w5plom-MuiButtonBase-root-MuiButton-root"
+            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1bqn98c-MuiButtonBase-root-MuiButton-root"
             disabled=""
             tabindex="-1"
             type="submit"

frontend/src/component/layout/MainLayout/MainLayout.tsx

@@ -28,7 +28,7 @@ const MainLayoutContentWrapper = styled('main')(({ theme }) => ({
     overflow: 'auto', // prevent margin collapsing
     flex: 1,
     width: '100%',
-    backgroundColor: theme.palette.contentWrapper,
+    backgroundColor: theme.palette.background.application,
     position: 'relative',
 }));
 

frontend/src/component/menu/Footer/Footer.tsx

@@ -11,7 +11,7 @@ const StyledFooter = styled('footer')(({ theme }) => ({
     width: '100%',
     flexGrow: 1,
     zIndex: 100,
-    backgroundColor: theme.palette.footerBackground,
+    backgroundColor: theme.palette.background.paper,
 }));
 
 const StyledList = styled(List)({

frontend/src/component/menu/Footer/__snapshots__/Footer.test.tsx.snap

@@ -53,7 +53,7 @@ exports[`should render DrawerMenu 1`] = `
                 className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
               >
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -72,7 +72,7 @@ exports[`should render DrawerMenu 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -91,7 +91,7 @@ exports[`should render DrawerMenu 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -111,7 +111,7 @@ exports[`should render DrawerMenu 1`] = `
                 </li>
                  
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -131,7 +131,7 @@ exports[`should render DrawerMenu 1`] = `
                 </li>
                  
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -150,7 +150,7 @@ exports[`should render DrawerMenu 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -169,7 +169,7 @@ exports[`should render DrawerMenu 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -188,7 +188,7 @@ exports[`should render DrawerMenu 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -224,7 +224,7 @@ exports[`should render DrawerMenu 1`] = `
                 className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
               >
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -243,7 +243,7 @@ exports[`should render DrawerMenu 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -262,7 +262,7 @@ exports[`should render DrawerMenu 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -281,7 +281,7 @@ exports[`should render DrawerMenu 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -300,7 +300,7 @@ exports[`should render DrawerMenu 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -334,7 +334,7 @@ exports[`should render DrawerMenu 1`] = `
                 className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
               >
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -353,7 +353,7 @@ exports[`should render DrawerMenu 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -372,7 +372,7 @@ exports[`should render DrawerMenu 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -391,7 +391,7 @@ exports[`should render DrawerMenu 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -410,7 +410,7 @@ exports[`should render DrawerMenu 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -498,7 +498,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                 className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
               >
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -517,7 +517,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -536,7 +536,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -556,7 +556,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                 </li>
                  
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -576,7 +576,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                 </li>
                  
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -595,7 +595,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -614,7 +614,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -633,7 +633,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -669,7 +669,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                 className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
               >
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -688,7 +688,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -707,7 +707,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -726,7 +726,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -745,7 +745,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -779,7 +779,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                 className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
               >
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -798,7 +798,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -817,7 +817,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -836,7 +836,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -855,7 +855,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div

frontend/src/component/menu/Header/Header.tsx

@@ -42,7 +42,7 @@ import { useThemeMode } from 'hooks/useThemeMode';
 import { Notifications } from 'component/common/Notifications/Notifications';
 
 const StyledHeader = styled(AppBar)(({ theme }) => ({
-    backgroundColor: theme.palette.headerBackground,
+    backgroundColor: theme.palette.background.paper,
     padding: theme.spacing(1),
     boxShadow: 'none',
     position: 'relative',

frontend/src/component/playground/Playground/Playground.tsx

@@ -159,7 +159,7 @@ export const Playground: VFC<{}> = () => {
             >
                 <Box
                     sx={{
-                        background: theme.palette.playgroundBackground,
+                        background: theme.palette.background.elevation2,
                         borderBottomLeftRadius: theme.shape.borderRadiusMedium,
                     }}
                 >
@@ -170,7 +170,7 @@ export const Playground: VFC<{}> = () => {
                             py: 3,
                             mb: 4,
                             mt: 2,
-                            background: theme.palette.playgroundBackground,
+                            background: theme.palette.background.elevation2,
                             transition: 'width 0.4s ease',
                             minWidth: matches ? 'auto' : '500px',
                             width: formWidth,

frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundCodeFieldset/PlaygroundEditor/PlaygroundEditor.tsx

@@ -25,7 +25,7 @@ const StyledEditorHeader = styled('aside')(({ theme }) => ({
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    border: `1px solid ${theme.palette.lightBorder}`,
+    border: `1px solid ${theme.palette.divider}`,
     borderBottom: 'none',
 }));
 
@@ -52,7 +52,7 @@ const EditorStatusOk = () => {
     return (
         <StyledEditorStatusContainer
             style={{
-                color: theme.palette.text.tertiaryContrast,
+                color: theme.palette.success.contrastText,
                 backgroundColor: theme.palette.success.main,
             }}
         >
@@ -67,7 +67,7 @@ const EditorStatusError = () => {
     return (
         <StyledEditorStatusContainer
             style={{
-                color: theme.palette.text.tertiaryContrast,
+                color: theme.palette.error.contrastText,
                 backgroundColor: theme.palette.error.main,
             }}
         >
@@ -117,7 +117,7 @@ export const PlaygroundEditor: VFC<IPlaygroundEditorProps> = ({
                 extensions={[json()]}
                 onChange={onCodeFieldChange}
                 style={{
-                    border: `1px solid ${theme.palette.lightBorder}`,
+                    border: `1px solid ${theme.palette.divider}`,
                     borderTop: 'none',
                     borderBottomLeftRadius: theme.shape.borderRadiusMedium,
                     borderBottomRightRadius: theme.shape.borderRadiusMedium,

frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundForm.tsx

@@ -49,7 +49,7 @@ export const PlaygroundForm: VFC<IPlaygroundFormProps> = ({
                 variant="fullWidth"
                 sx={{
                     mb: 2,
-                    borderColor: theme.palette.dividerAlternative,
+                    borderColor: theme.palette.divider,
                     borderStyle: 'dashed',
                 }}
             />
@@ -60,7 +60,7 @@ export const PlaygroundForm: VFC<IPlaygroundFormProps> = ({
                 sx={{
                     mt: 3,
                     mb: 2,
-                    borderColor: theme.palette.dividerAlternative,
+                    borderColor: theme.palette.divider,
                 }}
             />
             <Box

frontend/src/component/playground/Playground/PlaygroundResultsTable/ContextBanner/ContextBanner.tsx

@@ -9,7 +9,7 @@ interface IContextBannerProps {
 }
 
 const StyledContextFieldList = styled('ul')(({ theme }) => ({
-    color: colors.black,
+    color: theme.palette.text.primary,
     listStyleType: 'none',
     padding: theme.spacing(2),
 }));

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx

@@ -12,7 +12,7 @@ interface FeatureResultInfoPopoverCellProps {
 
 const FeatureResultPopoverWrapper = styled('div')(({ theme }) => ({
     alignItems: 'flex-end',
-    color: theme.palette.tertiary.main,
+    color: theme.palette.divider,
 }));
 
 export const FeatureResultInfoPopoverCell = ({
@@ -48,7 +48,7 @@ export const FeatureResultInfoPopoverCell = ({
                         maxWidth: '100%',
                         height: 'auto',
                         overflowY: 'auto',
-                        backgroundColor: theme.palette.tertiary.light,
+                        backgroundColor: theme.palette.background.elevation2,
                         borderRadius: theme.shape.borderRadius,
                     }),
                 }}

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx

@@ -45,7 +45,7 @@ export const FeatureStrategyItem = ({
             <StrategyExecution
                 strategyResult={strategy}
                 input={input}
-                percentageFill={theme.palette.tertiary.light}
+                percentageFill={theme.palette.background.elevation2}
             />
         </StrategyItemContainer>
     );

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomParameterItem/CustomParameterItem.tsx

@@ -13,7 +13,7 @@ const StyledWrapper = styled(Box)(({ theme }) => ({
     width: '100%',
     padding: theme.spacing(2, 3),
     borderRadius: theme.shape.borderRadiusMedium,
-    border: `1px solid ${theme.palette.dividerAlternative}`,
+    border: `1px solid ${theme.palette.divider}`,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx

@@ -16,7 +16,7 @@ const StyledDivContainer = styled('div', {
     width: '100%',
     padding: theme.spacing(2, 3),
     borderRadius: theme.shape.borderRadiusMedium,
-    border: `1px solid ${theme.palette.dividerAlternative}`,
+    border: `1px solid ${theme.palette.divider}`,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.styles.tsx

@@ -5,5 +5,5 @@ export const StyledBoxSummary = styled(Box)(({ theme }) => ({
     height: 'auto',
     padding: theme.spacing(2, 3),
     borderRadius: theme.shape.borderRadiusMedium,
-    border: `1px solid ${theme.palette.dividerAlternative}`,
+    border: `1px solid ${theme.palette.divider}`,
 }));

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx

@@ -1,7 +1,7 @@
 import { Fragment, VFC } from 'react';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
-import { Chip, styled } from '@mui/material';
+import { styled } from '@mui/material';
 import { PlaygroundRequestSchema, PlaygroundStrategySchema } from 'openapi';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { ConstraintExecution } from './ConstraintExecution/ConstraintExecution';
@@ -10,6 +10,7 @@ import { PlaygroundResultStrategyExecutionParameters } from './StrategyExecution
 import { CustomStrategyParams } from './CustomStrategyParams/CustomStrategyParams';
 import { formattedStrategyNames } from 'utils/strategyNames';
 import { StyledBoxSummary } from './StrategyExecution.styles';
+import { Badge } from 'component/common/Badge/Badge';
 
 interface IStrategyExecutionProps {
     strategyResult: PlaygroundStrategySchema;
@@ -60,14 +61,8 @@ export const StrategyExecution: VFC<IStrategyExecutionProps> = ({
         ),
         name === 'default' && (
             <StyledBoxSummary sx={{ width: '100%' }}>
-                The standard strategy is{' '}
+                The standard strategy is <Badge color="success">ON</Badge> for
-                <Chip
+                all users.
-                    variant="outlined"
-                    size="small"
-                    color="success"
-                    label="ON"
-                />{' '}
-                for all users.
             </StyledBoxSummary>
         ),
     ].filter(Boolean);

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx

@@ -2,12 +2,13 @@ import {
     parseParameterNumber,
     parseParameterStrings,
 } from 'utils/parseParameter';
-import { Box, Chip } from '@mui/material';
+import { Box } from '@mui/material';
 import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle';
 import { PlaygroundParameterItem } from '../PlaygroundParameterItem/PlaygroundParameterItem';
 import { StyledBoxSummary } from '../StrategyExecution.styles';
 import { PlaygroundConstraintSchema, PlaygroundRequestSchema } from 'openapi';
 import { getMappedParam } from '../helpers';
+import { Badge } from 'component/common/Badge/Badge';
 
 export interface PlaygroundResultStrategyExecutionParametersProps {
     parameters: { [key: string]: string };
@@ -41,12 +42,7 @@ export const PlaygroundResultStrategyExecutionParameters = ({
                                     />
                                 </Box>
                                 <div>
-                                    <Chip
+                                    <Badge color="success">{percentage}%</Badge>{' '}
-                                        color="success"
-                                        variant="outlined"
-                                        size="small"
-                                        label={`${percentage}%`}
-                                    />{' '}
                                     of your base{' '}
                                     {constraints.length > 0
                                         ? 'who match constraints'

frontend/src/component/project/Project/Import/ActionsContainer.tsx

@@ -2,7 +2,7 @@ import { Box, styled } from '@mui/material';
 
 export const ActionsContainer = styled(Box)(({ theme }) => ({
     width: '100%',
-    borderTop: `1px solid ${theme.palette.dividerAlternative}`,
+    borderTop: `1px solid ${theme.palette.divider}`,
     marginTop: 'auto',
     paddingTop: theme.spacing(3),
     display: 'flex',

frontend/src/component/project/Project/Import/ImportModal.tsx

@@ -29,7 +29,7 @@ const TimelineContainer = styled('div')(({ theme }) => ({
 const TimelineHeader = styled('div')(({ theme }) => ({
     textTransform: 'uppercase',
     fontSize: theme.fontSizes.smallBody,
-    color: theme.palette.text.tertiaryContrast,
+    color: theme.palette.primary.contrastText,
     fontWeight: theme.typography.fontWeightBold,
     paddingLeft: theme.spacing(2),
     marginBottom: theme.spacing(4),

frontend/src/component/project/Project/Import/ImportTimeline.tsx

@@ -24,7 +24,7 @@ const StyledTimelineDot = styled(TimelineDot, {
     shouldForwardProp: prop => prop !== 'active',
 })<{ active: boolean }>(({ theme, active }) => ({
     color: active ? theme.palette.primary.main : theme.palette.neutral.border,
-    backgroundColor: active ? theme.palette.text.tertiaryContrast : 'initial',
+    backgroundColor: active ? theme.palette.primary.contrastText : 'initial',
     fontWeight: active ? theme.fontWeight.bold : theme.fontWeight.medium,
     borderColor: theme.palette.neutral.border,
     width: '40px',
@@ -39,9 +39,7 @@ const StyledTimelineContent = styled(TimelineContent, {
     shouldForwardProp: prop => prop !== 'active',
 })<{ active: boolean }>(({ theme, active }) => ({
     marginBottom: theme.spacing(6),
-    color: active
+    color: active ? theme.palette.common.white : theme.palette.neutral.border,
-        ? theme.palette.text.tertiaryContrast
-        : theme.palette.neutral.border,
     marginTop: theme.spacing(2),
 }));
 

frontend/src/component/project/Project/Import/PulsingAvatar.tsx

@@ -6,7 +6,7 @@ export const PulsingAvatar = styled(Avatar, {
     transition: 'background-color 0.5s ease',
     backgroundColor: active
         ? theme.palette.primary.main
-        : theme.palette.tertiary.main,
+        : theme.palette.divider,
     '@keyframes pulse': {
         '0%': {
             boxShadow: `0 0 0 0px ${alpha(theme.palette.primary.main, 0.7)}`,

frontend/src/component/project/Project/Import/configure/ImportExplanation.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { Box, styled, Typography } from '@mui/material';
 
 const ImportExplanationContainer = styled(Box)(({ theme }) => ({
-    backgroundColor: theme.palette.secondaryContainer,
+    backgroundColor: theme.palette.background.elevation2,
     borderRadius: theme.shape.borderRadiusLarge,
     padding: theme.spacing(3),
 }));

frontend/src/component/project/Project/Import/configure/ImportOptions.tsx

@@ -6,7 +6,7 @@ import { IMPORT_ENVIRONMENT } from 'utils/testIds';
 import useProject from 'hooks/api/getters/useProject/useProject';
 
 const ImportOptionsContainer = styled(Box)(({ theme }) => ({
-    backgroundColor: theme.palette.secondaryContainer,
+    backgroundColor: theme.palette.background.elevation2,
     borderRadius: theme.shape.borderRadiusLarge,
     padding: theme.spacing(3),
 }));

frontend/src/component/project/Project/Import/validate/ValidationStage.tsx

@@ -15,7 +15,7 @@ import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const ImportInfoContainer = styled(Box)(({ theme }) => ({
-    backgroundColor: theme.palette.secondaryContainer,
+    backgroundColor: theme.palette.background.elevation2,
     borderRadius: theme.shape.borderRadiusLarge,
     padding: theme.spacing(3),
 }));