feat: dark theme v1 (#3298)

## About the changes

Creating the first version of the Dark theme

Refactor: colors variables
Refactor: use theme variable instead 
- this change will help us to use MuiCssBaseline, and we can use classes
directly for easy customization when we can't identify MUI classes

Refactor: adjusting some files components
- i’ve touched also the structure of some files, not only the colors
variables (but only to adjust the style, not functionality)

Fix: dark mode persistence on refresh (by Nuno)

Feat: dark mode sees light logos, and light mode sees dark logos (by
Nuno)

---------

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

frontend/src/assets/icons/pro-enterprise-feature-badge-light.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.739.811a1 1 0 0 0-1.479 0L9.947 2.253a1 1 0 0 1-1.043.28L7.045 1.94a1 1 0 0 0-1.28.739l-.417 1.906a1 1 0 0 1-.763.763l-1.906.417a1 1 0 0 0-.739 1.28l.592 1.859a1 1 0 0 1-.28 1.042L.812 11.261a1 1 0 0 0 0 1.478l1.442 1.314a1 1 0 0 1 .28 1.043l-.593 1.858a1 1 0 0 0 .74 1.28l1.905.417a1 1 0 0 1 .763.764l.417 1.905a1 1 0 0 0 1.28.74l1.859-.592a1 1 0 0 1 1.043.279l1.313 1.442a1 1 0 0 0 1.479 0l1.313-1.442a1 1 0 0 1 1.043-.28l1.859.592a1 1 0 0 0 1.28-.739l.417-1.905a1 1 0 0 1 .763-.764l1.906-.416a1 1 0 0 0 .739-1.28l-.592-1.86a1 1 0 0 1 .28-1.042l1.441-1.314a1 1 0 0 0 0-1.478l-1.442-1.314a1 1 0 0 1-.279-1.042l.592-1.86a1 1 0 0 0-.74-1.28l-1.905-.416a1 1 0 0 1-.763-.763l-.417-1.906a1 1 0 0 0-1.28-.74l-1.859.593a1 1 0 0 1-1.043-.28L12.74.811ZM7 7h3.434v6.565h3.13V7h3.436v10H7V7Z" fill="#E2E1F5"/><path d="M13.565 13.565H17V17h-3.435v-3.435Z" fill="#817AFE"/></svg>

frontend/src/component/admin/apiToken/ConfirmToken/UserToken/UserToken.tsx

@@ -1,4 +1,4 @@
-import { IconButton, Tooltip } from '@mui/material';
+import { Box, IconButton, Tooltip } from '@mui/material';
 import CopyIcon from '@mui/icons-material/FileCopy';
 import copy from 'copy-to-clipboard';
 import useToast from 'hooks/useToast';
@@ -24,18 +24,17 @@ export const UserToken = ({ token }: IUserTokenProps) => {
     };
 
     return (
-        <div
+        <Box
-            style={{
+            sx={theme => ({
-                backgroundColor: '#efefef',
+                backgroundColor: theme.palette.background.elevation2,
-                padding: '2rem',
+                padding: theme.spacing(4),
-                borderRadius: '3px',
+                borderRadius: `${theme.shape.borderRadius}px`,
-                margin: '0',
+                marginTop: theme.spacing(2),
-                marginTop: '1rem',
                 display: 'flex',
                 justifyContent: 'space-between',
                 alignItems: 'center',
                 wordBreak: 'break-all',
-            }}
+            })}
         >
             {token}
             <Tooltip title="Copy token" arrow>
@@ -43,6 +42,6 @@ export const UserToken = ({ token }: IUserTokenProps) => {
                     <CopyIcon />
                 </IconButton>
             </Tooltip>
-        </div>
+        </Box>
     );
 };

frontend/src/component/admin/apiToken/ProjectsList/ProjectsList.tsx

@@ -5,8 +5,9 @@ import { useSearchHighlightContext } from 'component/common/Table/SearchHighligh
 import { Fragment, VFC } from 'react';
 import { Link } from 'react-router-dom';
 
-const StyledLink = styled(Link)(() => ({
+const StyledLink = styled(Link)(({ theme }) => ({
     textDecoration: 'none',
+    color: theme.palette.links,
     '&:hover, &:focus': {
         textDecoration: 'underline',
     },

frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx

@@ -240,7 +240,7 @@ export const GoogleAuth = () => {
                             Save
                         </Button>{' '}
                         <p>
-                            <small style={{ color: 'red' }}>
+                            <small style={{ color: 'error.dark' }}>
                                 {errors?.message}
                             </small>
                         </p>

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

@@ -57,6 +57,10 @@ const StyledDescriptionBlock = styled('div')(({ theme }) => ({
     fontSize: theme.fontSizes.smallBody,
     borderRadius: theme.shape.borderRadiusMedium,
     marginBottom: theme.spacing(2),
+
+    a: {
+        color: theme.palette.links,
+    },
 }));
 
 interface IGroupForm {

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

@@ -26,7 +26,7 @@ export const GroupEmpty = () => {
                 to="/admin/groups/create-group"
                 component={Link}
                 variant="outlined"
-                color="secondary"
+                color="primary"
             >
                 Create your first group
             </Button>

frontend/src/component/admin/invoice/InvoiceList.tsx

@@ -69,7 +69,7 @@ const InvoiceList = () => {
                                         style={{
                                             backgroundColor:
                                                 item.status === 'past-due'
-                                                    ? '#ff9194'
+                                                    ? 'error.dark'
                                                     : 'inherit',
                                         }}
                                     >

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

@@ -35,7 +35,7 @@ export const InviteLinkBar: VFC = () => {
         <Typography
             component="span"
             variant="body2"
-            color={willExpireSoon ? 'warning.main' : 'inherit'}
+            color={willExpireSoon ? 'warning.dark' : 'inherit'}
             fontWeight="bold"
         >
             {expiresIn}
@@ -56,17 +56,17 @@ export const InviteLinkBar: VFC = () => {
 
     return (
         <Box
-            sx={{
+            sx={theme => ({
-                backgroundColor: 'background.paper',
+                backgroundColor: theme.palette.background.paper,
                 py: 2,
                 px: 4,
                 mb: 2,
-                borderRadius: theme => `${theme.shape.borderRadiusLarge}px`,
+                borderRadius: `${theme.shape.borderRadiusLarge}px`,
                 display: 'flex',
                 flexDirection: { xs: 'column', md: 'row' },
                 border: '2px solid',
-                borderColor: 'primary.main',
+                borderColor: theme.palette.background.alternative,
-            }}
+            })}
             ref={ref}
         >
             <Box

frontend/src/component/application/ApplicationList/ApplicationList.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { CircularProgress } from '@mui/material';
+import { CircularProgress, Link } from '@mui/material';
 import { Warning } from '@mui/icons-material';
 import { AppsLinkList, styles as themeStyles } from 'component/common';
 import { PageContent } from 'component/common/PageContent/PageContent';
@@ -49,9 +49,9 @@ export const ApplicationList = () => {
                 <br />
                 You can read more about how to use Unleash in your application
                 in the{' '}
-                <a href="https://docs.getunleash.io/docs/sdks/">
+                <Link href="https://docs.getunleash.io/docs/sdks/">
                     documentation.
-                </a>
+                </Link>
             </section>
         </>
     );

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

@@ -108,7 +108,7 @@ export const ReviewButton: FC<{ disabled: boolean }> = ({ disabled }) => {
                                     : 'center bottom',
                         }}
                     >
-                        <Paper>
+                        <Paper className="dropdown-outline">
                             <ClickAwayListener onClickAway={onClose}>
                                 <MenuList
                                     id="review-options-menu"

frontend/src/component/common/ApiTokenTable/ApiTokenTable.tsx

@@ -11,7 +11,14 @@ import {
     TableCell,
     TablePlaceholder,
 } from 'component/common/Table';
-import { Box, Table, TableBody, TableRow, useMediaQuery } from '@mui/material';
+import {
+    Box,
+    Table,
+    TableBody,
+    TableRow,
+    useMediaQuery,
+    Link,
+} from '@mui/material';
 import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
 import { ApiTokenDocs } from 'component/admin/apiToken/ApiTokenDocs/ApiTokenDocs';
 
@@ -117,13 +124,13 @@ export const ApiTokenTable = ({
                             <TablePlaceholder>
                                 <span>
                                     {'No tokens available. Read '}
-                                    <a
+                                    <Link
                                         href="https://docs.getunleash.io/how-to/api"
                                         target="_blank"
                                         rel="noreferrer"
                                     >
                                         API How-to guides
-                                    </a>{' '}
+                                    </Link>{' '}
                                     {' to learn more.'}
                                 </span>
                             </TablePlaceholder>

frontend/src/component/common/Badge/Badge.tsx

@@ -37,7 +37,7 @@ const StyledBadge = styled('div')<IBadgeProps>(
         fontWeight: theme.fontWeight.bold,
         lineHeight: 1,
         backgroundColor: theme.palette[color].light,
-        color: theme.palette[color].dark,
+        color: theme.palette[color].contrastText,
         border: `1px solid ${theme.palette[color].border}`,
     })
 );

frontend/src/component/common/BatchSelectionActionsBar/BatchSelectionActionsBar.tsx

@@ -36,7 +36,7 @@ const StyledBar = styled(Paper)(({ theme }) => ({
 
 const StyledCount = styled('span')(({ theme }) => ({
     background: theme.palette.secondary.main,
-    color: theme.palette.background.paper,
+    color: theme.palette.common.white,
     padding: theme.spacing(0.5, 1),
     borderRadius: theme.shape.borderRadius,
 }));

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

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

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

@@ -19,7 +19,6 @@ interface IConstraintAccordionBody {
 
 const StyledInputContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(2),
-    backgroundColor: theme.palette.neutral.light,
 }));
 
 const StyledButtonContainer = styled('div')(({ theme }) => ({

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

@@ -111,7 +111,7 @@ export const FreeTextInput = ({
                 <Button
                     className={styles.button}
                     variant="outlined"
-                    color="secondary"
+                    color="primary"
                     onClick={() => addValues()}
                 >
                     Add values

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

@@ -39,6 +39,7 @@ export const CaseSensitiveButton = ({
                 }
                 elseShow={
                     <StyledToggleButtonOn
+                        className="operator-is-active"
                         onClick={setCaseInsensitive}
                         disableRipple
                     >

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

@@ -7,7 +7,6 @@ import {
     StyledToggleButtonOn,
 } from '../StyledToggleButton';
 import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender';
-import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
 
 interface InvertedOperatorButtonProps {
     localConstraint: IConstraint;
@@ -17,59 +16,36 @@ interface InvertedOperatorButtonProps {
 export const InvertedOperatorButton = ({
     localConstraint,
     setInvertedOperator,
-}: InvertedOperatorButtonProps) => {
+}: InvertedOperatorButtonProps) => (
-    const theme = useTheme();
+    <Tooltip
-
+        title={
-    return (
+            Boolean(localConstraint.inverted)
-        <Tooltip
+                ? 'Remove negation'
-            title={
+                : 'Negate operator'
-                Boolean(localConstraint.inverted)
+        }
-                    ? 'Remove negation'
+        arrow
-                    : 'Negate operator'
+    >
-            }
+        <Box sx={{ display: 'flex', alignItems: 'stretch' }}>
-            arrow
+            <ConditionallyRender
-        >
+                condition={Boolean(localConstraint.inverted)}
-            <Box sx={{ display: 'flex', alignItems: 'stretch' }}>
+                show={
-                <ConditionallyRender
+                    <StyledToggleButtonOn
-                    condition={Boolean(localConstraint.inverted)}
+                        className="operator-is-active"
-                    show={
+                        onClick={setInvertedOperator}
-                        <StyledToggleButtonOn
+                        disableRipple
-                            onClick={setInvertedOperator}
+                    >
-                            disableRipple
+                        <NegatedIcon />
-                        >
+                    </StyledToggleButtonOn>
-                            <ThemeMode
+                }
-                                darkmode={
+                elseShow={
-                                    <NegatedIcon
+                    <StyledToggleButtonOff
-                                        style={{
+                        onClick={setInvertedOperator}
-                                            fill: theme.palette.background
+                        disableRipple
-                                                .paper,
+                    >
-                                        }}
+                        <NegatedIconOff />
-                                    />
+                    </StyledToggleButtonOff>
-                                }
+                }
-                                lightmode={<NegatedIcon />}
+            />
-                            />
+        </Box>
-                        </StyledToggleButtonOn>
+    </Tooltip>
-                    }
+);
-                    elseShow={
-                        <StyledToggleButtonOff
-                            onClick={setInvertedOperator}
-                            disableRipple
-                        >
-                            <ThemeMode
-                                darkmode={
-                                    <NegatedIconOff
-                                        style={{
-                                            fill: theme.palette.background
-                                                .paper,
-                                        }}
-                                    />
-                                }
-                                lightmode={<NegatedIconOff />}
-                            />
-                        </StyledToggleButtonOff>
-                    }
-                />
-            </Box>
-        </Tooltip>
-    );
-};

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

@@ -170,7 +170,10 @@ export const ConstraintAccordionList = forwardRef<
                         <div>
                             <StyledAddCustomLabel>
                                 <p>Add any number of constraints</p>
-                                <StyledHelpWrapper title="Help" arrow>
+                                <StyledHelpWrapper
+                                    title="View constraints documentation"
+                                    arrow
+                                >
                                     <a
                                         href={
                                             'https://docs.getunleash.io/reference/strategy-constraints'
@@ -186,7 +189,7 @@ export const ConstraintAccordionList = forwardRef<
                                 type="button"
                                 onClick={onAdd}
                                 variant="outlined"
-                                color="secondary"
+                                color="primary"
                             >
                                 Add constraint
                             </Button>

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

@@ -32,11 +32,8 @@ const StyledAccordion = styled(Accordion)(({ theme }) => ({
     backgroundColor: theme.palette.background.paper,
     boxShadow: 'none',
     margin: 0,
-
+    '&:before': {
-    '& .root': {
+        opacity: '0',
-        '&:before': {
-            opacity: '0 !important',
-        },
     },
 }));
 

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

@@ -44,7 +44,7 @@ const StyledHeaderValuesContainer = styled('div')(({ theme }) => ({
 const StyledHeaderValuesExpand = styled('p')(({ theme }) => ({
     fontSize: theme.fontSizes.smallBody,
     marginTop: theme.spacing(0.5),
-    color: theme.palette.primary.dark,
+    color: theme.palette.links,
     [theme.breakpoints.down('sm')]: {
         textAlign: 'center',
     },

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

@@ -18,12 +18,12 @@ export const ConstraintIcon: VFC<IConstraintIconProps> = ({ compact }) => (
         }}
     >
         <TrackChanges
-            sx={{
+            sx={theme => ({
-                fill: 'white',
+                fill: theme.palette.common.white,
                 display: 'block',
-                width: compact ? '16px' : '20px',
+                width: compact ? theme.spacing(2) : theme.spacing(2.5),
-                height: compact ? '16px' : '20px',
+                height: compact ? theme.spacing(2) : theme.spacing(2.5),
-            }}
+            })}
         />
     </Box>
 );

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

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

frontend/src/component/common/EnvironmentIcon/EnvironmentIcon.tsx

@@ -26,7 +26,7 @@ const EnvironmentIcon = ({ enabled, className }: IEnvironmentIcon) => {
     };
 
     const icon = {
-        fill: '#fff',
+        fill: theme.palette.common.white,
         width: '16px',
         height: '16px',
     };

frontend/src/component/common/FavoriteIconButton/FavoriteIconButton.tsx

@@ -37,6 +37,7 @@ export const FavoriteIconButton: VFC<IFavoriteIconButtonProps> = ({
                     }
                     elseShow={
                         <StarBorderIcon
+                            color="primary"
                             sx={{
                                 fontSize: theme =>
                                     size === 'medium'

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

@@ -20,7 +20,7 @@ export const FeatureStatusChip = ({
 
     return (
         <div data-loading style={{ marginLeft: '8px' }}>
-            <Badge color={stale ? 'neutral' : 'secondary'} title={title}>
+            <Badge color={stale ? 'error' : 'success'} title={title}>
                 {value}
             </Badge>
         </div>

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.primary.contrastText,
+    color: theme.palette.common.white,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -27,9 +27,13 @@ export const GuidanceIndicator: FC<IGuidanceIndicatorProps> = ({
 }) => {
     const theme = useTheme();
 
-    const defaults = { backgroundColor: theme.palette.primary.main };
+    const defaults = {
+        backgroundColor: theme.palette.background.alternative,
+        color: theme.palette.common.white,
+    };
     if (type === 'secondary') {
-        defaults.backgroundColor = theme.palette.text.disabled;
+        defaults.backgroundColor = theme.palette.background.paper;
+        defaults.color = theme.palette.text.secondary;
     }
 
     return (

frontend/src/component/common/HelpIcon/HelpIcon.tsx

@@ -16,7 +16,7 @@ const StyledContainer = styled('span')(({ theme }) => ({
     },
     '& svg': {
         fontSize: theme.fontSizes.mainHeader,
-        color: theme.palette.neutral.main,
+        color: theme.palette.action.active,
         marginLeft: theme.spacing(0.5),
     },
 }));

frontend/src/component/common/InstanceStatus/__snapshots__/InstanceStatusBar.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`InstanceStatusBar should warn when the trial has churned 1`] = `
 <aside
-  class="css-jmsogz"
+  class="css-163g6kh"
   data-testid="INSTANCE_STATUS_BAR_ID"
 >
   <svg
@@ -42,7 +42,7 @@ exports[`InstanceStatusBar should warn when the trial has churned 1`] = `
 
 exports[`InstanceStatusBar should warn when the trial has expired 1`] = `
 <aside
-  class="css-jmsogz"
+  class="css-163g6kh"
   data-testid="INSTANCE_STATUS_BAR_ID"
 >
   <svg
@@ -82,7 +82,7 @@ exports[`InstanceStatusBar should warn when the trial has expired 1`] = `
 
 exports[`InstanceStatusBar should warn when the trial is about to expire 1`] = `
 <aside
-  class="css-yx2rkt"
+  class="css-f22srx"
   data-testid="INSTANCE_STATUS_BAR_ID"
 >
   <svg
@@ -117,7 +117,7 @@ exports[`InstanceStatusBar should warn when the trial is about to expire 1`] = `
 
 exports[`InstanceStatusBar should warn when the trial is far from expired 1`] = `
 <aside
-  class="css-yx2rkt"
+  class="css-f22srx"
   data-testid="INSTANCE_STATUS_BAR_ID"
 >
   <svg
@@ -147,7 +147,7 @@ exports[`InstanceStatusBar should warn when the trial is far from expired 1`] =
 
 exports[`InstanceStatusBar should warn when trialExpiry has passed 1`] = `
 <aside
-  class="css-jmsogz"
+  class="css-163g6kh"
   data-testid="INSTANCE_STATUS_BAR_ID"
 >
   <svg

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

@@ -19,6 +19,7 @@ const StyledContainerBox = styled(Box, {
     shouldForwardProp: prop => prop !== 'readAt',
 })<{ readAt: boolean }>(({ theme, readAt }) => ({
     padding: theme.spacing(0.5),
+    marginRight: theme.spacing(1.5),
     backgroundColor: readAt
         ? theme.palette.neutral.light
         : theme.palette.secondary.light,
@@ -28,7 +29,6 @@ const StyledContainerBox = styled(Box, {
     justifyContent: 'center',
     alignItems: 'center',
     borderRadius: `${theme.shape.borderRadius}px`,
-    position: 'absolute',
     top: 3,
     left: 7,
 }));
@@ -36,15 +36,20 @@ const StyledContainerBox = styled(Box, {
 const StyledListItemButton = styled(ListItemButton)(({ theme }) => ({
     position: 'relative',
     cursor: 'pointer',
-    margin: theme.spacing(2, 0),
+    padding: theme.spacing(2.5, 2, 3, 2),
-    '&:not(:last-child)': {
+    borderRadius: theme.shape.borderRadiusMedium,
-        borderBottom: `2px solid ${theme.palette.divider}`,
-    },
     width: '100%',
+    '&:after': {
+        content: '""',
+        width: `calc(100% - ${theme.spacing(4)})`,
+        height: '1px',
+        position: 'absolute',
+        bottom: 0,
+        backgroundColor: theme.palette.divider,
+    },
 }));
 
 const StyledNotificationMessageBox = styled(Box)(({ theme }) => ({
-    marginLeft: theme.spacing(4),
     display: 'flex',
     flexDirection: 'column',
     width: '100%',
@@ -54,12 +59,14 @@ const StyledSecondaryInfoBox = styled(Box)(({ theme }) => ({
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    margin: theme.spacing(1.5, 0, 1.5, 0),
+    margin: theme.spacing(1, 0, 0, 5.25),
 }));
 
 const StyledMessageTypography = styled(Typography, {
     shouldForwardProp: prop => prop !== 'readAt',
 })<{ readAt: boolean }>(({ theme, readAt }) => ({
+    display: 'flex',
+    alignItems: 'center',
     fontSize: theme.fontSizes.smallBody,
     fontWeight: readAt ? 'normal' : 'bold',
     textDecoration: 'none',
@@ -81,7 +88,7 @@ const StyledAvatar = styled(Avatar)(({ theme }) => ({
 }));
 
 const StyledCreatedBy = styled(Typography)(({ theme }) => ({
-    fontSize: theme.fontSizes.smallerBody,
+    fontSize: theme.fontSizes.smallBody,
     color: theme.palette.neutral.main,
     marginLeft: theme.spacing(1),
 }));
@@ -133,9 +140,9 @@ export const Notification = ({
 
     return (
         <StyledListItemButton onClick={() => onNotificationClick(notification)}>
-            {resolveIcon(notification.notificationType)}{' '}
             <StyledNotificationMessageBox>
                 <StyledMessageTypography readAt={Boolean(readAt)}>
+                    {resolveIcon(notification.notificationType)}{' '}
                     {notification.message}
                 </StyledMessageTypography>
                 <StyledSecondaryInfoBox>

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

@@ -29,8 +29,7 @@ const StyledPrimaryContainerBox = styled(Box)(() => ({
 }));
 
 const StyledInnerContainerBox = styled(Box)(({ theme }) => ({
-    backgroundColor: theme.palette.neutral.light,
+    backgroundColor: theme.palette.background.elevation1,
-    padding: theme.spacing(1, 3),
     display: 'flex',
     justifyContent: 'center',
 }));
@@ -43,7 +42,7 @@ const StyledTypography = styled(Typography)(({ theme }) => ({
 }));
 
 const StyledPaper = styled(Paper)(({ theme }) => ({
-    width: '400px',
+    width: '420px',
     boxShadow: theme.boxShadows.popup,
     borderRadius: `${theme.shape.borderRadiusLarge}px`,
     position: 'absolute',
@@ -68,7 +67,7 @@ const StyledHeaderBox = styled(Box)(() => ({
 }));
 
 const StyledHeaderTypography = styled(Typography)(({ theme }) => ({
-    fontSize: theme.fontSizes.smallerBody,
+    fontSize: theme.fontSizes.smallBody,
 }));
 
 const StyledIconButton = styled(IconButton)(({ theme }) => ({
@@ -190,6 +189,7 @@ export const Notifications = () => {
                         onClickAway={() => setShowNotifications(false)}
                     >
                         <StyledPaper
+                            className="dropdown-outline"
                             onKeyDown={onKeyDown}
                             data-testid="NOTIFICATIONS_MODAL"
                         >

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

@@ -2,16 +2,12 @@ import { Typography, styled, Box } from '@mui/material';
 import { FC } from 'react';
 
 const StyledOuterContainerBox = styled(Box)(({ theme }) => ({
-    padding: theme.spacing(1.5, 3, 0.5, 3),
+    padding: theme.spacing(1, 1.5, 1, 3),
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-}));
+    position: 'relative',
-
-const StyledInnerBox = styled(Box)(({ theme }) => ({
     boxShadow: theme.boxShadows.separator,
-    width: '100%',
-    height: '4px',
 }));
 
 export const NotificationsHeader: FC = ({ children }) => {
@@ -21,8 +17,6 @@ export const NotificationsHeader: FC = ({ children }) => {
                 <Typography fontWeight="bold">Notifications</Typography>
                 {children}
             </StyledOuterContainerBox>
-
-            <StyledInnerBox />
         </>
     );
 };

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

@@ -2,7 +2,7 @@ import { List, styled } from '@mui/material';
 import { FC } from 'react';
 
 const StyledListContainer = styled(List)(({ theme }) => ({
-    padding: theme.spacing(2, 3),
+    padding: theme.spacing(1, 1, 3, 1),
 }));
 
 export const NotificationsList: FC = ({ children }) => {

frontend/src/component/common/OperatorUpgradeAlert/OperatorUpgradeAlert.tsx

@@ -15,7 +15,6 @@ const OperatorDocsLink = () => {
             href="https://docs.getunleash.io/reference/strategy-constraints#strategy-constraint-operators"
             target="_blank"
             rel="noreferrer"
-            style={{ color: 'inherit' }}
         >
             Read more
         </a>

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

@@ -1,7 +1,9 @@
 import { ReactComponent as ProPlanIcon } from 'assets/icons/pro-enterprise-feature-badge.svg';
+import { ReactComponent as ProPlanIconLight } from 'assets/icons/pro-enterprise-feature-badge-light.svg';
 import { Box, Button, Link, styled, Typography } from '@mui/material';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender';
+import { ThemeMode } from '../ThemeMode/ThemeMode';
 
 const PremiumFeatureWrapper = styled(Box, {
     shouldForwardProp: prop => prop !== 'tooltip',
@@ -111,7 +113,10 @@ export const PremiumFeature = ({ feature, tooltip }: PremiumFeatureProps) => {
     return (
         <PremiumFeatureWrapper tooltip={tooltip}>
             <StyledTitle>
-                <ProPlanIcon />
+                <ThemeMode
+                    darkmode={<ProPlanIconLight />}
+                    lightmode={<ProPlanIcon />}
+                />
                 {`${plan} feature`}
             </StyledTitle>
             <ConditionallyRender

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

@@ -35,20 +35,21 @@ const StyledContainer = styled('div')(({ theme }) => ({
 const StyledSearch = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
-    backgroundColor: theme.palette.background.paper,
+    backgroundColor: theme.palette.background.elevation1,
     border: `1px solid ${theme.palette.neutral.border}`,
     borderRadius: theme.shape.borderRadiusExtraLarge,
     padding: '3px 5px 3px 12px',
     width: '100%',
     zIndex: 3,
     '&:focus-within': {
-        borderColor: theme.palette.primary.light,
+        borderColor: theme.palette.primary.main,
         boxShadow: theme.boxShadows.main,
     },
 }));
 
 const StyledInputBase = styled(InputBase)(({ theme }) => ({
     width: '100%',
+    backgroundColor: theme.palette.background.elevation1,
 }));
 
 const StyledClose = styled(Close)(({ theme }) => ({

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

@@ -102,7 +102,7 @@ export const SearchSuggestions: VFC<SearchSuggestionsProps> = ({
             : 'example-search-text';
 
     return (
-        <StyledPaper>
+        <StyledPaper className="dropdown-outline">
             <StyledBox>
                 <StyledFilterList />
                 <Box>

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

@@ -1,4 +1,5 @@
 import { styled, TableCell } from '@mui/material';
+import { focusable } from 'themes/themeStyles';
 
 export const StyledTableCell = styled(TableCell, {
     shouldForwardProp: prop =>
@@ -36,13 +37,13 @@ export const StyledTableCell = styled(TableCell, {
 export const StyledButton = styled('button', {
     shouldForwardProp: prop => prop !== 'isSorted',
 })<{ isSorted?: boolean }>(({ theme, isSorted }) => ({
+    ...focusable(theme),
     all: 'unset',
     whiteSpace: 'nowrap',
     width: '100%',
     position: 'relative',
     zIndex: 1,
     ':hover, :focus, &:focus-visible, &:active': {
-        outline: 'revert',
         '.hover-only': {
             display: 'inline-block',
         },

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

@@ -17,7 +17,6 @@ interface ISortArrowProps {
 const iconStyle = (theme: Theme) => ({
     marginLeft: theme.spacing(0.25),
     marginRight: theme.spacing(-0.5),
-    color: theme.palette.neutral.main,
     fontSize: theme.fontSizes.mainHeader,
     verticalAlign: 'middle',
 });
@@ -36,7 +35,6 @@ export const SortArrow: VFC<ISortArrowProps> = ({
                     <KeyboardArrowDown
                         sx={theme => ({
                             ...iconStyle(theme),
-                            color: theme.palette.table.headerColor,
                         })}
                         className={className}
                         fontSize="inherit"
@@ -46,7 +44,6 @@ export const SortArrow: VFC<ISortArrowProps> = ({
                     <KeyboardArrowUp
                         sx={theme => ({
                             ...iconStyle(theme),
-                            color: theme.palette.table.headerColor,
                         })}
                         className={className}
                         fontSize="inherit"

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

@@ -4,8 +4,8 @@ import { Box } from '@mui/material';
 export const TablePlaceholder: FC = ({ children }) => (
     <Box
         sx={{
-            border: theme => `2px dashed ${theme.palette.neutral.light}`,
+            border: theme => `2px dashed ${theme.palette.divider}`,
-            p: 1.6,
+            p: 8,
             textAlign: 'center',
             display: 'flex',
             justifyContent: 'center',

frontend/src/component/common/ToastRenderer/Toast/Toast.styles.ts

@@ -4,7 +4,7 @@ export const useStyles = makeStyles()(theme => ({
     container: {
         maxWidth: '450px',
         background: theme.palette.background.paper,
-        boxShadow: '2px 2px 4px rgba(0,0,0,0.4)',
+        boxShadow: theme.boxShadows.popup,
         zIndex: 500,
         margin: '0 0.8rem',
         borderRadius: '12.5px',

frontend/src/component/common/VerticalTabs/VerticalTab/VerticalTab.tsx

@@ -10,7 +10,7 @@ const StyledTab = styled(Button)<{ selected: boolean }>(
                 ? theme.palette.background.paper
                 : 'transparent',
             borderLeft: `${theme.spacing(1)} solid ${
-                selected ? theme.palette.primary.main : 'transparent'
+                selected ? theme.palette.background.alternative : 'transparent'
             }`,
             borderRadius: theme.shape.borderRadiusMedium,
             justifyContent: 'start',

frontend/src/component/context/ContextForm/ContextForm.tsx

@@ -6,6 +6,7 @@ import {
     Typography,
     styled,
     Theme,
+    Link,
 } from '@mui/material';
 import React, { useState, useEffect } from 'react';
 import { Add } from '@mui/icons-material';
@@ -246,13 +247,13 @@ export const ContextForm: React.FC<IContextForm> = ({
                     guarantee a consistent behavior for specific values of this
                     context field. PS! Not all client SDK's support this feature
                     yet!{' '}
-                    <a
+                    <Link
                         href="https://docs.getunleash.io/reference/stickiness"
                         target="_blank"
                         rel="noreferrer"
                     >
                         Read more
-                    </a>
+                    </Link>
                 </p>
                 <StyledSwitchContainer>
                     <Switch

frontend/src/component/events/EventCard/EventCard.tsx

@@ -38,10 +38,14 @@ const StyledContainerListItem = styled('li')(({ theme }) => ({
             padding: theme.spacing(4),
         },
     },
+
+    a: {
+        color: theme.palette.links,
+    },
 }));
 
 export const StyledCodeSection = styled('div')(({ theme }) => ({
-    backgroundColor: 'white',
+    backgroundColor: theme.palette.background.paper,
     overflowX: 'auto',
     padding: theme.spacing(2),
     borderBottomLeftRadius: theme.shape.borderRadiusLarge,

frontend/src/component/feature/CopyFeature/CopyFeature.tsx

@@ -7,11 +7,11 @@ import {
     Paper,
     FormControlLabel,
     Alert,
+    styled,
 } from '@mui/material';
 import { FileCopy } from '@mui/icons-material';
 import { styles as themeStyles } from 'component/common';
 import { formatUnknownError } from 'utils/formatUnknownError';
-import styles from './CopyFeature.module.scss';
 import { trim } from 'component/common/util';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { getTogglePath } from 'utils/routePathHelpers';
@@ -19,6 +19,42 @@ import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 
+const StyledPage = styled(Paper)(({ theme }) => ({
+    overflow: 'visible',
+    borderRadius: theme.shape.borderRadiusLarge,
+}));
+
+const StyledHeader = styled('div')(({ theme }) => ({
+    padding: theme.spacing(3, 4),
+    borderBottom: `1px solid ${theme.palette.divider}`,
+}));
+
+const StyledTitle = styled('h1')(({ theme }) => ({
+    fontSize: theme.fontSizes.mainHeader,
+    fontWeight: theme.fontWeight.medium,
+}));
+
+const StyledSection = styled('section')(({ theme }) => ({
+    padding: theme.spacing(4),
+}));
+
+const StyledDescription = styled('p')(({ theme }) => ({
+    marginTop: 0,
+    marginBottom: theme.spacing(4),
+}));
+
+const StyledForm = styled('form')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    marginBottom: theme.spacing(3),
+    maxWidth: theme.spacing(50),
+}));
+
+const StyledFormControlLabel = styled(FormControlLabel)(({ theme }) => ({
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(4),
+}));
+
 export const CopyFeatureToggle = () => {
     const [replaceGroupId, setReplaceGroupId] = useState(true);
     const [apiError, setApiError] = useState('');
@@ -73,19 +109,16 @@ export const CopyFeatureToggle = () => {
     if (!feature || !feature.name) return <span>Toggle not found</span>;
 
     return (
-        <Paper
+        <StyledPage className={themeStyles.fullwidth}>
-            className={themeStyles.fullwidth}
+            <StyledHeader>
-            style={{ overflow: 'visible' }}
+                <StyledTitle>Copy&nbsp;{featureId}</StyledTitle>
-        >
+            </StyledHeader>
-            <div className={styles.header}>
-                <h1>Copy&nbsp;{featureId}</h1>
-            </div>
             <ConditionallyRender
                 condition={Boolean(apiError)}
                 show={<Alert severity="error">{apiError}</Alert>}
             />
-            <section className={styles.content}>
+            <StyledSection>
-                <p className={styles.text}>
+                <StyledDescription>
                     You are about to create a new feature toggle by cloning the
                     configuration of feature toggle&nbsp;
                     <Link to={getTogglePath(projectId, featureId)}>
@@ -93,8 +126,8 @@ export const CopyFeatureToggle = () => {
                     </Link>
                     . You must give the new feature toggle a unique name before
                     you can proceed.
-                </p>
+                </StyledDescription>
-                <form onSubmit={onSubmit}>
+                <StyledForm onSubmit={onSubmit}>
                     <TextField
                         label="Name"
                         name="name"
@@ -108,7 +141,7 @@ export const CopyFeatureToggle = () => {
                         aria-required
                         autoFocus
                     />
-                    <FormControlLabel
+                    <StyledFormControlLabel
                         control={
                             <Switch
                                 value={replaceGroupId}
@@ -123,8 +156,8 @@ export const CopyFeatureToggle = () => {
                         <FileCopy />
                         &nbsp;&nbsp;&nbsp; Create from copy
                     </Button>
-                </form>
+                </StyledForm>
-            </section>
+            </StyledSection>
-        </Paper>
+        </StyledPage>
     );
 };

frontend/src/component/feature/FeatureForm/FeatureForm.tsx

@@ -6,6 +6,7 @@ import {
     Switch,
     Theme,
     Typography,
+    Link,
 } from '@mui/material';
 import FeatureTypeSelect from '../FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureTypeSelect/FeatureTypeSelect';
 import { CF_DESC_ID, CF_NAME_ID, CF_TYPE_ID } from 'utils/testIds';
@@ -52,7 +53,6 @@ const StyledContainer = styled('div')({
 
 const StyledInputDescription = styled('p')(({ theme }) => ({
     marginBottom: theme.spacing(1),
-    color: theme.palette.text.secondary,
 }));
 
 const StyledInput = styled(Input)(({ theme }) => ({
@@ -210,13 +210,13 @@ const FeatureForm: React.FC<IFeatureToggleForm> = ({
                         When you enable impression data for a feature toggle,
                         your client SDKs will emit events you can listen for
                         every time this toggle gets triggered. Learn more in{' '}
-                        <a
+                        <Link
                             target="_blank"
                             rel="noopener noreferrer"
                             href="https://docs.getunleash.io/advanced/impression_data"
                         >
                             the impression data documentation
-                        </a>
+                        </Link>
                     </p>
                     <StyledRow>
                         <FormControlLabel

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

@@ -42,6 +42,10 @@ const StyledDescription = styled('p')(({ theme }) => ({
     fontSize: theme.fontSizes.smallBody,
     textAlign: 'center',
     marginBottom: theme.spacing(3),
+
+    a: {
+        color: theme.palette.links,
+    },
 }));
 
 export const FeatureStrategyEmpty = ({

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

@@ -22,9 +22,7 @@ export const FeatureStrategyEnabled: FC<IFeatureStrategyEnabledProps> = ({
     const { feature } = useFeature(projectId, featureId);
 
     const featurePageLink = (
-        <Link to={featurePagePath} style={{ color: 'inherit' }}>
+        <Link to={featurePagePath}>feature toggle page</Link>
-            feature toggle page
-        </Link>
     );
 
     return (

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

@@ -254,7 +254,7 @@ export const FeatureStrategyForm = ({
                 </PermissionButton>
                 <Button
                     type="button"
-                    color="secondary"
+                    color="primary"
                     onClick={onCancel}
                     disabled={loading}
                 >

frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx

@@ -36,6 +36,7 @@ import FileDownload from '@mui/icons-material/FileDownload';
 import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
 import { ExportDialog } from './ExportDialog';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { focusable } from 'themes/themeStyles';
 
 export const featuresPlaceholder: FeatureSchema[] = Array(15).fill({
     name: 'Name of the feature',
@@ -306,7 +307,7 @@ export const FeatureToggleListTable: VFC = () => {
                                 component={RouterLink}
                                 to="/archive"
                                 underline="always"
-                                sx={{ marginRight: 2 }}
+                                sx={{ marginRight: 2, ...focusable(theme) }}
                             >
                                 View archive
                             </Link>

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

@@ -20,9 +20,9 @@ export const createChartOptions = (
         },
         plugins: {
             tooltip: {
-                backgroundColor: 'white',
+                backgroundColor: theme.palette.background.paper,
                 bodyColor: theme.palette.text.primary,
-                titleColor: theme.palette.action.active,
+                titleColor: theme.palette.text.secondary,
                 borderColor: theme.palette.primary.main,
                 borderWidth: 1,
                 padding: 10,

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

@@ -28,7 +28,7 @@ const StyledList = styled('ul')(({ theme }) => ({
 
 const StyledItem = styled('li')(({ theme }) => ({
     '& > [aria-pressed=true]': {
-        backgroundColor: theme.palette.primary.main,
+        backgroundColor: theme.palette.background.alternative,
         color: theme.palette.primary.contrastText,
     },
     '& > [aria-pressed=true]:hover': {

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

@@ -32,10 +32,9 @@ const StyledFeatureOverviewEnvironment = styled('div', {
 })<{ enabled: boolean }>(({ theme, enabled }) => ({
     borderRadius: theme.shape.borderRadiusLarge,
     marginBottom: theme.spacing(2),
-    backgroundColor: theme.palette.background.paper,
+    backgroundColor: enabled
-    background: enabled
         ? theme.palette.background.paper
-        : theme.palette.neutral.light,
+        : theme.palette.envAccordion.disabled,
 }));
 
 const StyledAccordion = styled(Accordion)({
@@ -53,14 +52,12 @@ const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
 
 const StyledAccordionDetails = styled(AccordionDetails, {
     shouldForwardProp: prop => prop !== 'enabled',
-})<{ enabled: boolean }>(({ theme, enabled }) => ({
+})<{ enabled: boolean }>(({ theme }) => ({
     padding: theme.spacing(3),
-    background: theme.palette.background.elevation2,
+    background: theme.palette.envAccordion.expanded,
     borderBottomLeftRadius: theme.shape.borderRadiusLarge,
     borderBottomRightRadius: theme.shape.borderRadiusLarge,
-    borderBottom: `4px solid ${
+    boxShadow: 'inset 0px 2px 4px rgba(32, 32, 33, 0.05)', // replace this with variable
-        enabled ? theme.palette.primary.light : theme.palette.neutral.border
-    }`,
 
     [theme.breakpoints.down('md')]: {
         padding: theme.spacing(2, 1),
@@ -143,6 +140,9 @@ const FeatureOverviewEnvironment = ({
                 <StyledFeatureOverviewEnvironment enabled={env.enabled}>
                     <StyledAccordion
                         data-testid={`${FEATURE_ENVIRONMENT_ACCORDION}_${env.name}`}
+                        className={`environment-accordion ${
+                            env.enabled ? '' : 'accordion-disabled'
+                        }`}
                     >
                         <StyledAccordionSummary
                             expandIcon={<ExpandMore titleAccess="Toggle" />}

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.background.application,
+    fill: theme.palette.background.elevation2,
     height: '75px',
     width: '75px',
     [theme.breakpoints.down(500)]: {

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

@@ -22,7 +22,7 @@ const SeparatorContent = styled('span')(({ theme }) => ({
     fontSize: theme.fontSizes.bodySize,
     textAlign: 'center',
     padding: '0 1rem',
-    background: theme.palette.background.elevation2,
+    background: theme.palette.envAccordion.expanded,
     position: 'relative',
     maxWidth: '80%',
     color: theme.palette.text.primary,

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

@@ -11,7 +11,7 @@ import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 const StyledContainer = styled('div')(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusLarge,
     color: theme.palette.primary.contrastText,
-    backgroundColor: theme.palette.background.sidebar,
+    backgroundColor: theme.palette.background.alternative,
     display: 'flex',
     flexDirection: 'column',
     maxWidth: '350px',

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

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

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

@@ -1,5 +1,5 @@
 import { CloudCircle } from '@mui/icons-material';
-import { styled } from '@mui/material';
+import { styled, Link } from '@mui/material';
 import { IFeatureEnvironment } from 'interfaces/featureToggle';
 import { EnvironmentVariantsTable } from './EnvironmentVariantsTable/EnvironmentVariantsTable';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@@ -107,13 +107,13 @@ export const EnvironmentVariantsCard = ({
                                         control which parameter is used to
                                         ensure consistent traffic allocation
                                         across variants.{' '}
-                                        <a
+                                        <Link
                                             href="https://docs.getunleash.io/reference/feature-toggle-variants"
                                             target="_blank"
                                             rel="noreferrer"
                                         >
                                             Read more
-                                        </a>
+                                        </Link>
                                     </StyledDescription>
                                 </>
                             }

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

@@ -1,4 +1,4 @@
-import { Alert, Button, Divider, styled } from '@mui/material';
+import { Alert, Button, Divider, Link, styled } from '@mui/material';
 import FormTemplate from 'component/common/FormTemplate/FormTemplate';
 import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
@@ -406,13 +406,13 @@ export const EnvironmentVariantsModal = ({
                                     By overriding the stickiness you can control
                                     which parameter is used to ensure consistent
                                     traffic allocation across variants.{' '}
-                                    <a
+                                    <Link
                                         href="https://docs.getunleash.io/reference/feature-toggle-variants"
                                         target="_blank"
                                         rel="noreferrer"
                                     >
                                         Read more
-                                    </a>
+                                    </Link>
                                 </StyledDescription>
                                 <div>
                                     <StyledStickinessSelect

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.background.elevation2,
+    backgroundColor: theme.palette.divider,
     height: '1px',
 }));
 

frontend/src/component/feature/StrategyTypes/RolloutSlider/RolloutSlider.tsx

@@ -10,7 +10,7 @@ const StyledSlider = withStyles(Slider, theme => ({
     thumb: {
         height: 24,
         width: 24,
-        backgroundColor: '#fff',
+        backgroundColor: theme.palette.background.paper,
         border: '2px solid currentColor',
     },
     active: {},

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

@@ -27,7 +27,7 @@ const StyledModal = styled('div')(({ theme }) => ({
     position: 'relative',
     padding: theme.spacing(8),
     background: theme.palette.background.paper,
-    boxShadow: '0 0 1rem rgba(0, 0, 0, 0.25)',
+    boxShadow: theme.boxShadows.popup,
     borderRadius: theme.spacing(2),
     [theme.breakpoints.down('md')]: {
         padding: theme.spacing(4),
@@ -43,7 +43,7 @@ const StyledClose = styled('div')({
 
 const StyledCloseIcon = styled(CloseOutlined)(({ theme }) => ({
     fontSize: '1.5rem',
-    color: theme.palette.action.disabled,
+    color: theme.palette.action.active,
 }));
 
 export const FeedbackCES = ({ state }: IFeedbackCESProps) => {

frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx

@@ -78,10 +78,10 @@ export const FeedbackNPS = ({ openUrl }: IFeedbackNPSProps) => {
         >
             <Box
                 sx={{
-                    borderRadius: '12.5px',
+                    borderRadius: `${theme.shape.borderRadiusLarge}px`,
                     backgroundColor: theme.palette.background.paper,
                     zIndex: 9999,
-                    boxShadow: '2px 2px 4px 4px rgba(143,143,143, 0.25)',
+                    boxShadow: theme.boxShadows.elevated,
                     padding: theme.spacing(3),
                     maxWidth: '400px',
                 }}
@@ -101,10 +101,10 @@ export const FeedbackNPS = ({ openUrl }: IFeedbackNPSProps) => {
                                 right: '-38px',
                                 top: '-47px',
                                 backgroundColor: theme.palette.background.paper,
-                                boxShadow:
+                                boxShadow: theme.boxShadows.elevated,
-                                    '2px 2px 4px 4px rgba(143,143,143, 0.25)',
                                 '&:hover': {
-                                    backgroundColor: '#fff',
+                                    backgroundColor:
+                                        theme.palette.background.paper,
                                 },
                             }}
                             onClick={() => setShowFeedback(false)}

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

@@ -17,7 +17,6 @@ const DraftBannerContentWrapper = styled(Box)(({ theme }) => ({
     [theme.breakpoints.down('lg')]: {
         padding: theme.spacing(1, 2),
     },
-    color: theme.palette.warning.main,
 }));
 
 const StyledBox = styled(Box)(({ theme }) => ({
@@ -87,6 +86,7 @@ const StickyBanner = styled(Box)(({ theme }) => ({
     zIndex: 250 /* has to lower than header.zIndex and higher than body.zIndex */,
     borderTop: `1px solid ${theme.palette.warning.border}`,
     borderBottom: `1px solid ${theme.palette.warning.border}`,
+    color: theme.palette.warning.contrastText,
     backgroundColor: theme.palette.warning.light,
 }));
 

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

@@ -13,6 +13,7 @@ import { useOptionalPathParam } from 'hooks/useOptionalPathParam';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import { DraftBanner } from './DraftBanner/DraftBanner';
+import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
 
 interface IMainLayoutProps {
     children: ReactNode;
@@ -100,7 +101,21 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
                                 {children}
                             </MainLayoutContentContainer>
                         </MainLayoutContent>
-                        <StyledImg src={formatAssetPath(textureImage)} alt="" />
+                        <ThemeMode
+                            darkmode={
+                                <StyledImg
+                                    style={{ opacity: 0.06 }}
+                                    src={formatAssetPath(textureImage)}
+                                    alt=""
+                                />
+                            }
+                            lightmode={
+                                <StyledImg
+                                    src={formatAssetPath(textureImage)}
+                                    alt=""
+                                />
+                            }
+                        />
                     </MainLayoutContentWrapper>
                     <Footer />
                 </MainLayoutContainer>

frontend/src/component/maintenance/MaintenanceBanner.tsx

@@ -2,6 +2,7 @@ import { styled } from '@mui/material';
 import { ErrorOutlineRounded } from '@mui/icons-material';
 
 const StyledErrorRoundedIcon = styled(ErrorOutlineRounded)(({ theme }) => ({
+    color: theme.palette.error.main,
     height: '20px',
     width: '20px',
     marginRight: theme.spacing(1),
@@ -12,7 +13,7 @@ const StyledDiv = styled('div')(({ theme }) => ({
     fontSize: theme.fontSizes.smallBody,
     justifyContent: 'center',
     alignItems: 'center',
-    color: theme.palette.error.main,
+    color: theme.palette.error.contrastText,
     backgroundColor: theme.palette.error.light,
     height: '65px',
     borderBottom: `1px solid ${theme.palette.error.border}`,

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

@@ -5,6 +5,7 @@ import { List, ListItem, ListItemText, Grid, styled } from '@mui/material';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { ApiDetails } from './ApiDetails/ApiDetails';
 import { FooterTitle } from './FooterTitle';
+import { focusable } from 'themes/themeStyles';
 
 const StyledFooter = styled('footer')(({ theme }) => ({
     padding: theme.spacing(4, 8),
@@ -23,8 +24,12 @@ const StyledListItem = styled(ListItem)(({ theme }) => ({
     padding: 0,
     margin: 0,
     '& a': {
+        ...focusable(theme),
         textDecoration: 'none',
         color: theme.palette.text.primary,
+        '&:hover': {
+            textDecoration: 'underline',
+        },
     },
 }));
 

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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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-1j1wl1e-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-MuiListItem-root"
                   disabled={false}
                 >
                   <div

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

@@ -87,6 +87,7 @@ const StyledLinks = styled('div')(({ theme }) => ({
 }));
 
 const StyledAdvancedNavButton = styled('button')(({ theme }) => ({
+    ...focusable(theme),
     border: 'none',
     background: 'transparent',
     height: '100%',

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

@@ -23,7 +23,7 @@ const StyledLink = styled(RouterLink)(({ theme }) => ({
     width: '100%',
     '&&': {
         // Override MenuItem's built-in padding.
-        color: 'black',
+        color: theme.palette.text.primary,
         padding: theme.spacing(1, 2),
     },
 }));

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

@@ -17,7 +17,7 @@ interface IPlaygroundEditorProps {
 
 const StyledEditorHeader = styled('aside')(({ theme }) => ({
     height: '50px',
-    backgroundColor: theme.palette.neutral.light,
+    backgroundColor: theme.palette.background.paper,
     borderTopRightRadius: theme.shape.borderRadiusMedium,
     borderTopLeftRadius: theme.shape.borderRadiusMedium,
     padding: theme.spacing(1, 2),
@@ -26,24 +26,23 @@ const StyledEditorHeader = styled('aside')(({ theme }) => ({
     justifyContent: 'space-between',
     alignItems: 'center',
     border: `1px solid ${theme.palette.divider}`,
-    borderBottom: 'none',
 }));
 
 const StyledEditorStatusContainer = styled('div')(({ theme, style }) => ({
-    width: '28px',
+    width: theme.spacing(3),
-    height: '28px',
+    height: theme.spacing(3),
     display: 'flex',
     alignItems: 'center',
+    color: theme.palette.background.paper,
     justifyContent: 'center',
     transition: `background-color 0.5s ease-in-out`,
     borderRadius: '50%',
-    opacity: 0.8,
     ...style,
 }));
 
 const StyledErrorSpan = styled('div')(({ theme }) => ({
-    fontSize: '0.9rem',
+    fontSize: theme.fontSizes.smallBody,
-    color: theme.palette.error.main,
+    color: theme.palette.error.dark,
     marginRight: theme.spacing(1),
 }));
 
@@ -52,11 +51,15 @@ const EditorStatusOk = () => {
     return (
         <StyledEditorStatusContainer
             style={{
-                color: theme.palette.success.contrastText,
                 backgroundColor: theme.palette.success.main,
             }}
         >
-            <Check sx={{ width: '20px', height: '20px' }} />
+            <Check
+                sx={theme => ({
+                    width: theme.spacing(2),
+                    height: theme.spacing(2),
+                })}
+            />
         </StyledEditorStatusContainer>
     );
 };
@@ -67,7 +70,6 @@ const EditorStatusError = () => {
     return (
         <StyledEditorStatusContainer
             style={{
-                color: theme.palette.error.contrastText,
                 backgroundColor: theme.palette.error.main,
             }}
         >
@@ -119,8 +121,6 @@ export const PlaygroundEditor: VFC<IPlaygroundEditorProps> = ({
                 style={{
                     border: `1px solid ${theme.palette.divider}`,
                     borderTop: 'none',
-                    borderBottomLeftRadius: theme.shape.borderRadiusMedium,
-                    borderBottomRightRadius: theme.shape.borderRadiusMedium,
                 }}
                 placeholder={JSON.stringify(
                     {

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

@@ -1,7 +1,7 @@
 import { styled } from '@mui/material';
 
 export const ImportLayoutContainer = styled('div')(({ theme }) => ({
-    backgroundColor: '#fff',
+    backgroundColor: theme.palette.background.paper,
     padding: theme.spacing(5, 8, 3, 8),
     display: 'flex',
     flexDirection: 'column',

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

@@ -21,18 +21,17 @@ const ModalContentContainer = styled('div')(({ theme }) => ({
 }));
 
 const TimelineContainer = styled('div')(({ theme }) => ({
-    backgroundColor: theme.palette.primary.main,
+    backgroundColor: theme.palette.background.sidebar,
-    padding: theme.spacing(6, 8, 3, 4),
+    padding: theme.spacing(8),
     flexBasis: '30%',
 }));
 
 const TimelineHeader = styled('div')(({ theme }) => ({
     textTransform: 'uppercase',
     fontSize: theme.fontSizes.smallBody,
-    color: theme.palette.primary.contrastText,
+    color: theme.palette.common.white,
     fontWeight: theme.typography.fontWeightBold,
-    paddingLeft: theme.spacing(2),
+    marginBottom: theme.spacing(3),
-    marginBottom: theme.spacing(4),
 }));
 
 const isValidJSON = (json: string) => {

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

@@ -1,7 +1,7 @@
 import TimelineSeparator from '@mui/lab/TimelineSeparator';
 import TimelineItem, { timelineItemClasses } from '@mui/lab/TimelineItem';
 import React, { FC } from 'react';
-import { Box, styled } from '@mui/material';
+import { alpha, Box, styled } from '@mui/material';
 import TimelineConnector from '@mui/lab/TimelineConnector';
 import TimelineDot from '@mui/lab/TimelineDot';
 import TimelineContent from '@mui/lab/TimelineContent';
@@ -9,42 +9,58 @@ import Timeline from '@mui/lab/Timeline';
 import { StageName } from './StageName';
 
 const StyledTimeline = styled(Timeline)(() => ({
+    padding: 0,
+    margin: 0,
+
     [`& .${timelineItemClasses.root}:before`]: {
         flex: 0,
         padding: 0,
     },
 }));
 
-const StyledTimelineConnector = styled(TimelineConnector)(({ theme }) => ({
+const StyledTimelineConnector = styled(TimelineConnector, {
+    shouldForwardProp: prop => prop !== 'active',
+})<{ active: boolean }>(({ theme, active }) => ({
     width: '1px',
-    backgroundColor: theme.palette.neutral.border,
+    backgroundColor: active
+        ? theme.palette.common.white
+        : `${alpha(theme.palette.common.white, 0.5)}`,
 }));
 
 const StyledTimelineDot = styled(TimelineDot, {
     shouldForwardProp: prop => prop !== 'active',
 })<{ active: boolean }>(({ theme, active }) => ({
-    color: active ? theme.palette.primary.main : theme.palette.neutral.border,
+    color: active
-    backgroundColor: active ? theme.palette.primary.contrastText : 'initial',
+        ? theme.palette.background.sidebar
-    fontWeight: active ? theme.fontWeight.bold : theme.fontWeight.medium,
+        : `${alpha(theme.palette.common.white, 0.8)}`,
-    borderColor: theme.palette.neutral.border,
+    backgroundColor: active ? theme.palette.common.white : 'initial',
-    width: '40px',
+    fontWeight: active ? theme.fontWeight.bold : 'normal',
-    height: '40px',
+    borderColor: active
+        ? theme.palette.common.white
+        : `${alpha(theme.palette.common.white, 0.8)}`,
+    width: theme.spacing(5),
+    height: theme.spacing(5),
+    lineHeight: theme.spacing(5),
     borderWidth: '1px',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
+    margin: theme.spacing(1, 0),
 }));
 
 const StyledTimelineContent = styled(TimelineContent, {
     shouldForwardProp: prop => prop !== 'active',
 })<{ active: boolean }>(({ theme, active }) => ({
-    marginBottom: theme.spacing(6),
+    padding: theme.spacing(2, 2, 6, 2),
-    color: active ? theme.palette.common.white : theme.palette.neutral.border,
+    color: active
-    marginTop: theme.spacing(2),
+        ? theme.palette.common.white
+        : `${alpha(theme.palette.common.white, 0.8)}`,
 }));
 
-const TimelineItemTitle = styled(Box)(({ theme }) => ({
+const TimelineItemTitle = styled(Box, {
-    fontWeight: theme.fontWeight.bold,
+    shouldForwardProp: prop => prop !== 'active',
+})<{ active: boolean }>(({ theme, active }) => ({
+    fontWeight: active ? theme.fontWeight.bold : 'normal',
     fontSize: theme.fontSizes.bodySize,
 }));
 
@@ -65,10 +81,12 @@ export const ImportTimeline: FC<{
                     >
                         1
                     </StyledTimelineDot>
-                    <StyledTimelineConnector />
+                    <StyledTimelineConnector active={stage === 'configure'} />
                 </TimelineSeparator>
                 <StyledTimelineContent active={stage === 'configure'}>
-                    <TimelineItemTitle>Import file</TimelineItemTitle>
+                    <TimelineItemTitle active={stage === 'configure'}>
+                        Import file
+                    </TimelineItemTitle>
                     <TimelineItemDescription>
                         Import previously exported toggle configuration from
                         another Unleash instance as a JSON file
@@ -83,10 +101,10 @@ export const ImportTimeline: FC<{
                     >
                         2
                     </StyledTimelineDot>
-                    <StyledTimelineConnector />
+                    <StyledTimelineConnector active={stage === 'validate'} />
                 </TimelineSeparator>
                 <StyledTimelineContent active={stage === 'validate'}>
-                    <TimelineItemTitle>
+                    <TimelineItemTitle active={stage === 'validate'}>
                         Validate configuration
                     </TimelineItemTitle>
                     <TimelineItemDescription>
@@ -104,7 +122,9 @@ export const ImportTimeline: FC<{
                     </StyledTimelineDot>
                 </TimelineSeparator>
                 <StyledTimelineContent active={stage === 'import'}>
-                    <TimelineItemTitle>Finish import</TimelineItemTitle>
+                    <TimelineItemTitle active={stage === 'import'}>
+                        Finish import
+                    </TimelineItemTitle>
                     <TimelineItemDescription>
                         Feature toggle configuration will be imported to your
                         new Unleash instance

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

@@ -4,6 +4,7 @@ export const PulsingAvatar = styled(Avatar, {
     shouldForwardProp: prop => prop !== 'active',
 })<{ active: boolean }>(({ theme, active }) => ({
     transition: 'background-color 0.5s ease',
+    color: theme.palette.common.white,
     backgroundColor: active
         ? theme.palette.primary.main
         : theme.palette.divider,

frontend/src/component/project/Project/Project.styles.ts

@@ -64,7 +64,7 @@ export const StyledProjectTitle = styled('span')(({ theme }) => ({
 
 export const StyledSeparator = styled('div')(({ theme }) => ({
     width: '100%',
-    backgroundColor: theme.palette.background.elevation2,
+    backgroundColor: theme.palette.divider,
     height: '1px',
 }));
 

frontend/src/component/project/Project/ProjectStats/StatusBox.tsx

@@ -20,7 +20,7 @@ const StyledBoxChangeContainer = styled(Box)(({ theme }) => ({
 }));
 
 const StyledTypographySubtext = styled(Typography)(({ theme }) => ({
-    color: theme.palette.neutral.main,
+    color: theme.palette.text.secondary,
     fontSize: theme.typography.body2.fontSize,
 }));
 

frontend/src/component/project/ProjectAccess/ProjectAccess.styles.ts

@@ -12,7 +12,9 @@ export const useStyles = makeStyles()(theme => ({
         backgroundColor: theme.palette.divider,
         margin: theme.spacing(4, -4, 3),
     },
-    inputLabel: { backgroundColor: '#fff' },
+    inputLabel: {
+        backgroundColor: theme.palette.background.paper,
+    },
     roleName: {
         fontWeight: 'bold',
         padding: '5px 0px',

frontend/src/component/project/ProjectList/ProjectList.tsx

@@ -22,7 +22,9 @@ import { Search } from 'component/common/Search/Search';
 import { PremiumFeature } from 'component/common/PremiumFeature/PremiumFeature';
 import { ITooltipResolverProps } from 'component/common/TooltipResolver/TooltipResolver';
 import { ReactComponent as ProPlanIcon } from 'assets/icons/pro-enterprise-feature-badge.svg';
+import { ReactComponent as ProPlanIconLight } from 'assets/icons/pro-enterprise-feature-badge-light.svg';
 import { safeRegExp } from '@server/util/escape-regex';
+import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
 
 const StyledDivContainer = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -75,7 +77,12 @@ function resolveCreateButtonData(
                 sx: { maxWidth: '320px' },
                 variant: 'custom',
             },
-            endIcon: <ProPlanIcon />,
+            endIcon: (
+                <ThemeMode
+                    darkmode={<ProPlanIconLight />}
+                    lightmode={<ProPlanIcon />}
+                />
+            ),
         };
     } else if (!hasAccess) {
         return {

frontend/src/component/splash/SplashPageOperators.tsx

@@ -21,7 +21,7 @@ const StyledContent = styled('div')(({ theme }) => ({
     padding: theme.spacing(4),
     borderRadius: theme.spacing(1),
     backgroundColor: theme.palette.primary.main,
-    color: 'white',
+    color: theme.palette.common.white,
     [theme.breakpoints.up('md')]: {
         padding: theme.spacing(8),
     },

frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx

@@ -5,6 +5,7 @@ import {
     IconButton,
     styled,
     Tooltip,
+    Link,
 } from '@mui/material';
 import { Delete } from '@mui/icons-material';
 import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
@@ -109,13 +110,13 @@ export const StrategyParameter = ({
                     <StyledParagraph>
                         Parameters let you provide arguments to your strategy
                         that it can access for evaluation. Read more in the{' '}
-                        <a
+                        <Link
                             href="https://docs.getunleash.io/reference/custom-activation-strategies#parameter-types"
                             target="_blank"
                             rel="noreferrer"
                         >
                             parameter types documentation
-                        </a>
+                        </Link>
                         .
                     </StyledParagraph>
                 }

frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap

@@ -35,7 +35,7 @@ exports[`renders an empty list correctly 1`] = `
                 className="css-non55o"
               >
                 <div
-                  className="css-1phd8d6"
+                  className="css-16ldy6v"
                 >
                   <svg
                     aria-hidden={true}
@@ -49,7 +49,7 @@ exports[`renders an empty list correctly 1`] = `
                     />
                   </svg>
                   <div
-                    className="MuiInputBase-root MuiInputBase-colorPrimary css-4a25hy-MuiInputBase-root"
+                    className="MuiInputBase-root MuiInputBase-colorPrimary css-tv3fxu-MuiInputBase-root"
                     onClick={[Function]}
                   >
                     <input
@@ -153,7 +153,7 @@ exports[`renders an empty list correctly 1`] = `
                 <button
                   aria-label=""
                   aria-labelledby={null}
-                  className=" css-1xwc11x"
+                  className=" css-sskrcd"
                   data-mui-internal-clone-element={true}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -177,7 +177,7 @@ exports[`renders an empty list correctly 1`] = `
                     </span>
                     <svg
                       aria-hidden={true}
-                      className="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-57xzpo-MuiSvgIcon-root"
+                      className="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-18chwvk-MuiSvgIcon-root"
                       data-testid="KeyboardArrowUpIcon"
                       focusable="false"
                       viewBox="0 0 24 24"
@@ -199,7 +199,7 @@ exports[`renders an empty list correctly 1`] = `
                     </span>
                     <svg
                       aria-hidden={true}
-                      className="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit sort-arrow css-57xzpo-MuiSvgIcon-root"
+                      className="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit sort-arrow css-18chwvk-MuiSvgIcon-root"
                       data-testid="KeyboardArrowUpIcon"
                       focusable="false"
                       viewBox="0 0 24 24"

frontend/src/component/user/Profile/ProfileTab/ProfileTab.tsx

@@ -26,7 +26,7 @@ const StyledHeader = styled('div')(({ theme }) => ({
     alignItems: 'center',
     padding: theme.spacing(6),
     borderRadius: theme.shape.borderRadiusLarge,
-    backgroundColor: theme.palette.primary.main,
+    backgroundColor: theme.palette.background.alternative,
     color: theme.palette.primary.contrastText,
     marginBottom: theme.spacing(3),
     boxShadow: theme.boxShadows.primaryHeader,

frontend/src/component/user/StandaloneBanner.tsx

@@ -13,18 +13,21 @@ interface IStandaloneBannerProps {
 const StyledGradient = styled(Gradient)(({ theme }) => ({
     display: 'flex',
     justifyContent: 'center',
-    [theme.breakpoints.up('sm')]: {
+    borderTopLeftRadius: theme.shape.borderRadiusLarge,
-        borderBottomLeftRadius: '3px',
+    [theme.breakpoints.down('md')]: {
-        borderTopLeftRadius: '3px',
+        borderTopLeftRadius: theme.shape.borderRadiusLarge,
+        borderTopRightRadius: theme.shape.borderRadiusLarge,
+    },
+    [theme.breakpoints.down('sm')]: {
+        borderTopLeftRadius: '0',
+        borderTopRightRadius: '0',
     },
 }));
 
 const StyledContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(12, 8),
-    color: '#fff',
+    color: theme.palette.common.white,
     position: 'relative',
-    borderTopLeftRadius: '3px',
-    borderBottomLeftRadius: '3px',
     textAlign: 'right',
     [theme.breakpoints.down('md')]: {
         padding: theme.spacing(6, 4),
@@ -35,7 +38,7 @@ const StyledContainer = styled('div')(({ theme }) => ({
 }));
 
 const StyledTitle = styled(Typography)(({ theme }) => ({
-    color: '#fff',
+    color: theme.palette.common.white,
     marginBottom: theme.spacing(2),
     fontSize: theme.spacing(4),
     marginTop: theme.spacing(10),
@@ -48,9 +51,6 @@ const StyledSubtitle = styled(Typography)(({ theme }) => ({
     [theme.breakpoints.down('md')]: {
         display: 'none',
     },
-    [theme.breakpoints.down('sm')]: {
-        display: 'none',
-    },
     fontSize: theme.spacing(4),
     fontWeight: 'normal',
 }));
@@ -62,6 +62,9 @@ const StyledLogoContainer = styled('div')(({ theme }) => ({
         display: 'flex',
         flexDirection: 'column',
     },
+    [theme.breakpoints.down('md')]: {
+        top: '9px',
+    },
 }));
 
 const logoStyles = (theme: Theme) => ({

frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx

@@ -45,7 +45,7 @@ const StyledLink = styled(Link<typeof RouterLink | 'a'>)(({ theme }) => ({
     alignItems: 'center',
     gap: theme.spacing(1),
     padding: 0,
-    color: theme.palette.primary.dark,
+    color: theme.palette.links,
     fontWeight: theme.fontWeight.medium,
     '&:hover, &:focus': {
         textDecoration: 'underline',
@@ -87,7 +87,7 @@ export const UserProfileContent = ({
     <ConditionallyRender
         condition={showProfile}
         show={
-            <StyledPaper id={id}>
+            <StyledPaper className="dropdown-outline" id={id}>
                 <StyledProfileInfo>
                     <StyledUserAvatar user={profile} />
                     <div>

frontend/src/component/user/common/AuthOptions/AuthOptions.tsx

@@ -30,7 +30,9 @@ const AuthOptions = ({ options }: IAuthOptionProps) => {
                         href={o.path}
                         size="small"
                         data-testid={`${SSO_LOGIN_BUTTON}-${o.type}`}
-                        style={{ height: '40px', color: '#000' }}
+                        style={{
+                            height: '40px',
+                        }}
                         startIcon={
                             <ConditionallyRender
                                 condition={o.type === 'google'}

frontend/src/component/user/common/ResetPasswordForm/PasswordChecker.tsx

@@ -44,11 +44,12 @@ const StyledTitle = styled(Typography)(({ theme }) => ({
 }));
 
 const StyledContainer = styled('div')(({ theme }) => ({
-    border: '1px solid #f1f1f1',
+    backgroundColor: theme.palette.background.elevation2,
     borderRadius: theme.shape.borderRadius,
     position: 'relative',
     maxWidth: '350px',
-    color: '#44606e',
+    color: theme.palette.text.secondary,
+    padding: theme.spacing(0.5, 0, 1.5),
 }));
 
 const StyledHeaderContainer = styled('div')(({ theme }) => ({
@@ -86,7 +87,9 @@ const StyledStatusBar = styled('div', {
     width: '50px',
     borderRadius: theme.shape.borderRadius,
     height: '6px',
-    backgroundColor: error ? 'red' : theme.palette.primary.main,
+    backgroundColor: error
+        ? theme.palette.error.main
+        : theme.palette.primary.main,
 }));
 
 const PasswordChecker = ({

frontend/src/component/user/common/StandaloneLayout.tsx

@@ -33,16 +33,21 @@ const StyledHeader = styled('header')(({ theme }) => ({
 const StyledMain = styled('main')(({ theme }) => ({
     width: '60%',
     flex: '1',
-    borderTopRightRadius: '3px',
+    borderTopRightRadius: theme.shape.borderRadiusLarge,
-    borderBottomRightRadius: '3px',
+    borderBottomRightRadius: theme.shape.borderRadiusLarge,
     backgroundColor: theme.palette.background.paper,
     position: 'relative',
     [theme.breakpoints.down('md')]: {
-        borderRadius: '0',
+        borderTopRightRadius: '0',
+        borderBottomLeftRadius: theme.shape.borderRadiusLarge,
+        borderBottomRightRadius: theme.shape.borderRadiusLarge,
         width: '100%',
         position: 'static',
         minHeight: 'auto',
     },
+    [theme.breakpoints.down('sm')]: {
+        borderRadius: '0',
+    },
 }));
 
 const StyledInnerRightContainer = styled('div')(({ theme }) => ({

frontend/src/hooks/useThemeMode.ts

@@ -4,7 +4,6 @@ import { setLocalStorageItem } from 'utils/storage';
 import mainTheme from 'themes/theme';
 import darkTheme from 'themes/dark-theme';
 import { Theme } from '@emotion/react';
-import useUiConfig from './api/getters/useUiConfig/useUiConfig';
 
 interface IUseThemeModeOutput {
     resolveTheme: () => Theme;
@@ -14,8 +13,7 @@ interface IUseThemeModeOutput {
 
 export const useThemeMode = (): IUseThemeModeOutput => {
     const { themeMode, setThemeMode } = useContext(UIContext);
-    const { uiConfig } = useUiConfig();
+    const key = 'unleash-theme';
-    const key = `${uiConfig.baseUriPath}:unleash-theme`;
 
     const resolveTheme = () => {
         if (themeMode === 'light') {

frontend/src/themes/app.css

@@ -36,7 +36,6 @@ button {
 .skeleton {
     position: relative;
     overflow: hidden;
-    background-color: #e2e8f0;
     z-index: 9999;
     box-shadow: none;
     fill: none;
@@ -44,7 +43,6 @@ button {
 }
 
 .skeleton::before {
-    background-color: #e2e8f0;
     content: '';
     position: absolute;
     top: 0px;
@@ -62,13 +60,13 @@ button {
     bottom: 0;
     left: 0;
     transform: translateX(-100%);
-    background-image: linear-gradient(
+    /* background-image: linear-gradient(
         90deg,
         rgba(255, 255, 255, 0) 0,
         rgba(255, 255, 255, 0.2) 100%,
         rgba(255, 255, 255, 0.5) 100%,
         rgba(255, 255, 255, 0)
-    );
+    ); */
     animation: shimmer 3s infinite;
     content: '';
     z-index: 5001;
@@ -134,7 +132,6 @@ p {
 
 a {
     cursor: pointer;
-    color: #615bc2;
 }
 
 a:hover {

frontend/src/themes/colors.ts

@@ -16,8 +16,8 @@ export const colors = {
         100: '#F7F7FA',
         50: '#FFFFFF',
     },
-    // In MUI there colors are used with transparency, and we keep them here for a better overview
+    // In MUI these colors are used with transparency, and we keep them here for a better overview
-    // We can use there for other places if needed
+    // We can use these colors for other places if needed
     action: {
         0.54: 'rgba(25, 24, 41, 0.54)',
         0.32: 'rgba(25, 24, 41, 0.32)',
@@ -51,7 +51,7 @@ export const colors = {
         50: '#FFF2F3',
     },
     orange: {
-        900: '#B35300',
+        900: '#A34C00',
         800: '#D76500',
         700: '#F28D00',
         600: '#FFAA33',

frontend/src/themes/dark-theme.ts

@@ -1,7 +1,19 @@
 import { createTheme } from '@mui/material/styles';
-import { colors } from './colors';
+import { alpha } from '@mui/material';
+import { focusable } from 'themes/themeStyles';
 
-export default createTheme({
+const actionColors = {
+    0.54: 'rgba(223, 222, 255, 0.54)',
+    0.32: 'rgba(223, 222, 255, 0.32)',
+    0.12: 'rgba(223, 222, 255, 0.12)',
+    0.08: 'rgba(223, 222, 255, 0.08)',
+    0.05: 'rgba(223, 222, 255, 0.05)',
+};
+const purpleColor = {
+    0.5: 'rgba(151, 146, 237, 0.5))',
+};
+
+const theme = {
     breakpoints: {
         values: {
             xs: 0,
@@ -17,7 +29,7 @@ export default createTheme({
         elevated: '0px 1px 20px rgba(45, 42, 89, 0.1)',
         popup: '0px 2px 6px rgba(0, 0, 0, 0.25)',
         primaryHeader: '0px 8px 24px rgba(97, 91, 194, 0.2)',
-        separator: '0px 2px 3px hsl(0deg 0% 78% / 50%)',
+        separator: '0px 2px 4px rgba(32, 32, 33, 0.12)', // Notifications header
     },
     typography: {
         fontFamily: 'Sen, Roboto, sans-serif',
@@ -66,86 +78,96 @@ export default createTheme({
 
     palette: {
         common: {
-            // Used for text color
+            white: '#EEEEFC', // Switch base (OFF) // Tooltips text color // Text color
-            white: colors.grey[50],
+            black: '#A0A0B1', // Switch track (OFF)
         },
         text: {
-            primary: colors.grey[900],
+            primary: '#EEEEFC',
-            secondary: colors.grey[800],
+            secondary: '#A0A0B1',
-            disabled: colors.grey[600],
+            disabled: '#888799',
         },
         primary: {
-            main: colors.purple[800],
+            main: '#9792ED',
-            light: colors.purple[700],
+            light: '#4C4992',
-            dark: colors.purple[900],
+            // Maybe to move links color to another variable????
-            contrastText: colors.grey[50], // Color used for content when primary.main is used as a background
+            dark: '#9792ED', // Color used for links and on hover for primary buttons
+            contrastText: '#EEEEFC', // Color used for content when primary.main is used as a background
         },
         secondary: {
             // Used for purple badges and puple light elements
-            light: colors.purple[50],
+            main: '#57549C', // used on icons on these elements
-            main: colors.purple[800],
+            light: '#34325E', // used as a bakground on these elements
-            dark: colors.purple[900],
+            dark: '#EEEEFC', // used for text on these elements
-            border: colors.purple[300],
+            border: '#4C4992',
+            contrastText: '#EEEEFC', // Color used for content when info.main is used as a background
         },
         info: {
-            light: colors.blue[50],
+            // main: '#5483C9',  // used on icons on these elements
-            main: colors.blue[500],
+            main: '#a2bbe2', // used on icons on these elements
-            dark: colors.blue[700],
+            light: '#1A2641', // used as a bakground on these elements
-            contrastText: colors.grey[50], // Color used for content when info.main is used as a background
+            dark: '#a2bbe2', // used for text on these elements
-            border: colors.blue[200],
+            border: '#1B407A',
+            contrastText: '#EEEEFC', // Color used for content when info.main is used as a background
         },
         success: {
-            light: colors.green[50],
+            // main: '#62872F',  // used on icons on these elements
-            main: colors.green[600],
+            main: '#94ae6f', // used on icons on these elements
-            dark: colors.green[800],
+            light: '#333D30', // used as a bakground on these elements
-            contrastText: colors.grey[50], // Color used for content when success.main is used as a background
+            dark: '#94ae6f', // used for text on these elements
-            border: colors.green[300],
+            border: '#3D600C',
+            contrastText: '#EEEEFC', // Color used for content when success.main is used as a background
         },
         warning: {
-            light: colors.orange[100],
+            // main: '#9E691C',  // used on icons on these elements
-            main: colors.orange[800],
+            main: '#bc7d21', // used on icons on these elements
-            dark: colors.orange[900],
+            light: '#3B302C', // used as a bakground on these elements
-            contrastText: colors.grey[50], // Color used for content when warning.main is used as a background
+            dark: '#bc7d21', // used for text on these elements
-            border: colors.orange[500],
+            contrastText: '#EEEEFC', // Color used for content when warning.main is used as a background
+            border: '#6C4A19',
         },
         error: {
-            light: colors.red[50],
+            // main: '#B93F4A',  // used on error buttons // used on icons on these elements
-            main: colors.red[700],
+            main: '#ff6472', // used on error buttons // used on icons on these elements
-            dark: colors.red[800],
+            light: '#3F2835', // used as a bakground on these elements
-            contrastText: colors.grey[50], // Color used for content when error.main is used as a background
+            // dark: '#F15260',  // used for text on these elements
-            border: colors.red[300],
+            dark: '#ff6472', // used for text on these elements
+            border: '#8A3E45',
+            contrastText: '#EEEEFC', // Color used for content when error.main is used as a background
         },
 
         /**
          *  Used for grey badges, hover elements, and grey light elements
          */
         neutral: {
-            light: colors.grey[100],
+            main: '#858699', // used on icons on these elements
-            main: colors.grey[700],
+            light: '#2B2A3C', // used as a bakground on these elements
-            dark: colors.grey[800],
+            dark: '#EEEEFC', // used for text on these elements
-            border: colors.grey[400],
+            border: '#454360',
+            contrastText: '#EEEEFC', // Color used for text inside badge
         },
 
         background: {
-            paper: colors.grey[50],
+            paper: '#222130', // Background color for all containers
-            default: colors.grey[50],
+            default: '#222130',
-            application: colors.grey[300],
+            application: '#1A1924',
-            sidebar: colors.purple[800],
+            sidebar: '#4C4992',
-            elevation1: colors.grey[100],
+            alternative: '#4C4992', // used on the dark theme to shwitch primary main to a darker shade
-            elevation2: colors.grey[200],
+            elevation1: '#2B2A3C',
+            elevation2: '#2B2A3C',
+            // elevation2: '#302E42',
         },
 
         action: {
             // Colors used for Icons and Buttons -> this comes from MUI and we overwriting it with our colors
-            active: colors.action[0.54],
+            active: actionColors[0.54],
-            hover: colors.action[0.05],
+            hover: actionColors[0.05],
             hoverOpacity: 0.05,
-            selected: colors.action[0.08],
+            selected: actionColors[0.08],
             selectedOpacity: 0.08,
-            disabled: colors.action[0.32],
+            disabled: actionColors[0.32],
-            disabledBackground: colors.action[0.12],
+            disabledBackground: actionColors[0.12],
             disabledOpacity: 0.38,
-            focus: colors.action[0.12],
+            focus: actionColors[0.12],
             focusOpacity: 0.12,
             activatedOpacity: 0.12,
         },
@@ -153,64 +175,123 @@ export default createTheme({
         /**
          * General divider
          */
-        divider: colors.grey[400],
+        divider: '#39384C',
 
         /**
          * Table colors.
          */
         table: {
-            headerColor: colors.grey[900], //New - Is needed? ###CHECK
+            headerBackground: '#2B2A3C',
-            headerBackground: colors.grey[200],
+            headerHover: '#313045',
-            headerHover: colors.grey[300],
+            divider: '#323144',
-            divider: colors.grey[300],
+            rowHover: '#262536',
-            rowHover: colors.grey[100],
         },
 
         /**
-         * Text highlight effect color. Used when filtering/searching over content.
+         * Text highlight effect color. Used when filtering/searching over content
          */
-        highlight: colors.orange[200],
+        highlight: 'rgba(255, 234, 204, 0.7)',
 
         /**
          * Background color used for the API command in the sidebar
          */
-        codebox: colors.action[0.12],
+        codebox: 'rgba(52, 50, 94, 0.3)',
+
+        /**
+         * Links color
+         */
+        links: '#9792ED',
 
         /**
          * Gradient for the login page
          */
         loginGradient: {
-            from: colors.purple[800],
+            from: '#4C4992',
-            to: colors.purple[950],
+            to: '#4944a7',
         },
 
         /**
-         * Colors for event log output.
+         * Colors for event log output
          */
         eventLog: {
-            diffAdd: colors.green[800],
+            diffAdd: '#77AB2E',
-            diffSub: colors.red[800],
+            diffSub: '#df626c',
-            edited: colors.grey[900],
+            edited: '#EEEEFC',
         },
 
         /**
-         * For 'Seen' column on feature toggles list and other.
+         * For 'Seen' column on feature toggles list and other
          */
         seen: {
-            unknown: colors.grey[100],
+            unknown: '#2B2A3C',
-            recent: colors.green[100],
+            recent: '#4E6131',
-            inactive: colors.orange[200],
+            inactive: '#875D21',
-            abandoned: colors.red[200],
+            abandoned: '#8A3E45',
-            primary: colors.purple[100],
+            primary: '#302E42',
+        },
+
+        /**
+         * For Environment Accordion
+         */
+        envAccordion: {
+            disabled: '#2B2A3C',
+            expanded: '#1A1924',
+        },
+
+        /**
+         * MUI grey colors
+         */
+        grey: {
+            // This was to see were these colors are used from MUI
+            // 50: '#A6000E',
+            100: '#888799', // Disabled Switch base (OFF)
+            // 200: '#A6000E',
+            // 300: '#A6000E',
+            // 400: '#A6000E',
+            // 500: '#A6000E',
+            600: '#343348', // slider tooltip background
+            700: '#343348', // Dark tooltip background
+            // 800: '#A6000E',
+            // 900: '#A6000E',
+            // A100: '#A6000E',
+            // A200: '#A6000E',
+            // A400: '#A6000E',
+            // A700: '#A6000E',
         },
     },
+};
 
+export default createTheme({
+    ...theme,
     components: {
+        // Skeleton
+        MuiCssBaseline: {
+            styleOverrides: {
+                '.skeleton': {
+                    '&::before': {
+                        backgroundColor: theme.palette.background.elevation1,
+                    },
+                    '&::after': {
+                        background:
+                            'linear-gradient(90deg, rgba(223, 222, 255, 0) 0, rgba(223, 222, 255, 0.2) 100%, rgba(223, 222, 255, 0.5) 100%, rgba(223, 222, 255, 0))',
+                    },
+                },
+                a: {
+                    color: theme.palette.links,
+                },
+                '.dropdown-outline, .MuiAutocomplete-popper': {
+                    // used for user dropdown, autocomplete, and change request primary button dropdown, notifications dropdown
+                    outline: `1px solid ${theme.palette.divider}`,
+                },
+            },
+        },
+
         // Links
         MuiLink: {
             styleOverrides: {
                 root: ({ theme }) => ({
-                    color: theme.palette.primary.dark,
+                    ...focusable(theme),
+                    color: theme.palette.links,
                     '&:hover': {
                         textDecoration: 'none',
                     },
@@ -225,7 +306,7 @@ export default createTheme({
                     color: theme.palette.text.primary,
                     fontSize: '0.875rem',
                     '& a': {
-                        color: theme.palette.primary.dark,
+                        color: theme.palette.links,
                         textDecoration: 'none',
                         '&:hover': {
                             textDecoration: 'underline',
@@ -239,7 +320,6 @@ export default createTheme({
         MuiTableHead: {
             styleOverrides: {
                 root: ({ theme }) => ({
-                    // background: 'transparent',
                     '& th': {
                         height: theme.shape.tableRowHeightCompact,
                         backgroundColor: theme.palette.table.headerBackground,
@@ -281,13 +361,22 @@ export default createTheme({
         MuiAlert: {
             styleOverrides: {
                 root: ({ theme }) => ({
+                    padding: theme.spacing(2, 3),
                     borderRadius: theme.shape.borderRadiusMedium,
                     a: {
                         color: 'inherit',
                     },
+                    '> .MuiAlert-icon': {
+                        padding: 0,
+                        opacity: 1,
+                        fontSize: '24px',
+                    },
+                    '> .MuiAlert-message': {
+                        padding: '3px 0 0 0',
+                    },
                     '&.MuiAlert-standardInfo': {
                         backgroundColor: theme.palette.info.light,
-                        color: theme.palette.info.dark,
+                        color: theme.palette.info.contrastText,
                         border: `1px solid ${theme.palette.info.border}`,
                         '& .MuiAlert-icon': {
                             color: theme.palette.info.main,
@@ -295,7 +384,7 @@ export default createTheme({
                     },
                     '&.MuiAlert-standardSuccess': {
                         backgroundColor: theme.palette.success.light,
-                        color: theme.palette.success.dark,
+                        color: theme.palette.success.contrastText,
                         border: `1px solid ${theme.palette.success.border}`,
                         '& .MuiAlert-icon': {
                             color: theme.palette.success.main,
@@ -303,7 +392,7 @@ export default createTheme({
                     },
                     '&.MuiAlert-standardWarning': {
                         backgroundColor: theme.palette.warning.light,
-                        color: theme.palette.warning.dark,
+                        color: theme.palette.warning.contrastText,
                         border: `1px solid ${theme.palette.warning.border}`,
                         '& .MuiAlert-icon': {
                             color: theme.palette.warning.main,
@@ -311,7 +400,7 @@ export default createTheme({
                     },
                     '&.MuiAlert-standardError': {
                         backgroundColor: theme.palette.error.light,
-                        color: theme.palette.error.dark,
+                        color: theme.palette.error.contrastText,
                         border: `1px solid ${theme.palette.error.border}`,
                         '& .MuiAlert-icon': {
                             color: theme.palette.error.main,
@@ -326,6 +415,7 @@ export default createTheme({
             styleOverrides: {
                 root: ({ theme }) => ({
                     '& .MuiTabs-indicator': {
+                        backgroundColor: theme.palette.background.alternative,
                         height: '4px',
                     },
                     '& .MuiTabs-flexContainer': {
@@ -345,7 +435,7 @@ export default createTheme({
                     lineHeight: '1',
                     minHeight: '62px',
                     '&:hover': {
-                        backgroundColor: theme.palette.background.elevation2,
+                        backgroundColor: theme.palette.action.hover,
                     },
                     '&.Mui-selected': {
                         color: theme.palette.text.primary,
@@ -361,13 +451,31 @@ export default createTheme({
             },
         },
 
-        // Constraint accordion / cards
+        // Environment accordion
         MuiAccordion: {
             styleOverrides: {
                 root: ({ theme }) => ({
                     '&:first-of-type, &:last-of-type': {
-                        borderRadius: theme.shape.borderRadiusMedium,
+                        borderRadius: theme.shape.borderRadiusLarge,
                     },
+                    '&.environment-accordion.Mui-expanded': {
+                        outline: `2px solid ${alpha(
+                            theme.palette.background.alternative,
+                            0.6
+                        )}`,
+                        boxShadow: `0px 2px 8px ${alpha(
+                            theme.palette.primary.main,
+                            0.2
+                        )}`,
+                    },
+                    '&.accordion-disabled': {
+                        outline: `1px solid ${alpha('#39384C', 0.5)}`,
+                        backgroundColor: theme.palette.background.application,
+                    },
+                    '&.accordion-disabled.Mui-expanded .MuiAccordionSummary-root':
+                        {
+                            borderBottom: `1px solid ${theme.palette.divider}`,
+                        },
                 }),
             },
         },
@@ -384,30 +492,33 @@ export default createTheme({
             },
         },
 
-        // Project overview, improve toggle/switch disabled focus effect color
+        // Project overview, improve switch (ON - state) hover effect color
         MuiSwitch: {
             styleOverrides: {
                 root: ({ theme }) => ({
                     zIndex: 1,
-                    '&:not(.Mui-checked) .MuiTouchRipple-child': {
+                    '&&& > .Mui-checked:hover': {
-                        color: theme.palette.neutral.border,
+                        backgroundColor: actionColors[0.08],
+                    },
+                    '&&& > .Mui-checked.Mui-disabled': {
+                        color: '#423F6E',
                     },
                 }),
             },
         },
 
-        // Overwiteing the action.disabledOpacity from MU
+        // Overwiteing the action.disabledOpacity from MUI
         MuiMenuItem: {
             styleOverrides: {
                 root: {
                     '&.Mui-disabled': {
-                        opacity: 0.66,
+                        opacity: 0.4,
                     },
                 },
             },
         },
 
-        // Inputs background - This is used when we have inputs on a grey background (e.g. edit contstraints, playground)
+        // Inputs background - This is used when we have inputs on a darker background (e.g. edit contstraints, playground)
         MuiInputBase: {
             styleOverrides: {
                 root: ({ theme }) => ({
@@ -424,429 +535,64 @@ export default createTheme({
                 }),
             },
         },
+
+        // For dark theme, primary buttons are a bit darker then the primary.main that we use as a primary color
+        MuiButton: {
+            styleOverrides: {
+                root: ({ theme }) => ({
+                    '&:not(.Mui-disabled).MuiButton-containedPrimary': {
+                        backgroundColor: theme.palette.background.alternative,
+                        '&:hover': {
+                            backgroundColor: theme.palette.secondary.main,
+                        },
+                    },
+                }),
+            },
+        },
+
+        // Constraints negation icon
+        MuiIconButton: {
+            styleOverrides: {
+                root: ({ theme }) => ({
+                    '&.operator-is-active svg': {
+                        fill: theme.palette.background.application,
+                    },
+                }),
+            },
+        },
+
+        // Inputs
+        MuiOutlinedInput: {
+            styleOverrides: {
+                root: ({ theme }) => ({
+                    fieldset: {
+                        borderColor: '#646382',
+                    },
+
+                    '&&&:hover fieldset': {
+                        borderColor: '#8B8BA7',
+                    },
+
+                    '&&&.Mui-focused fieldset': {
+                        borderColor: '#9792ED',
+                    },
+
+                    '&&&.Mui-disabled fieldset': {
+                        borderColor: '#47475D',
+                    },
+                }),
+            },
+        },
+
+        // Popovers
+        MuiPopover: {
+            styleOverrides: {
+                root: ({ theme }) => ({
+                    '.MuiPopover-paper': {
+                        outline: `1px solid ${theme.palette.divider}`,
+                    },
+                }),
+            },
+        },
     },
 });
-
-// Old dark theme below:
-
-// import { createTheme } from '@mui/material/styles';
-// import { colors } from './colors';
-
-// const themeColors = {
-//     main: colors.darkblue[900],
-//     secondary: colors.darkblue[800],
-//     textColor: '#ffffffe6',
-//     hover: 'rgb(255, 255, 255, 0.7)',
-// };
-
-// export default createTheme({
-//     breakpoints: {
-//         values: {
-//             xs: 0,
-//             sm: 600,
-//             md: 960,
-//             lg: 1260,
-//             xl: 1536,
-//         },
-//     },
-//     boxShadows: {
-//         main: '0px 2px 4px rgba(129, 122, 254, 0.2)',
-//         card: '0px 2px 10px rgba(28, 25, 78, 0.12)',
-//         elevated: '0px 1px 20px rgba(45, 42, 89, 0.1)',
-//         popup: '0px 2px 6px rgba(0, 0, 0, 0.25)',
-//         primaryHeader: '0px 8px 24px rgba(97, 91, 194, 0.2)',
-//         separator: '0px 2px 3px hsl(0deg 0% 78% / 50%)',
-//     },
-//     typography: {
-//         fontFamily: 'Sen, Roboto, sans-serif',
-//         fontWeightBold: '700',
-//         fontWeightMedium: '700',
-//         allVariants: { lineHeight: 1.4 },
-//         button: { lineHeight: 1.75 },
-//         h1: {
-//             fontSize: '1.5rem',
-//             lineHeight: 1.875,
-//         },
-//         h3: {
-//             fontSize: '1rem',
-//             fontWeight: '700',
-//         },
-//         caption: {
-//             fontSize: `${12 / 16}rem`,
-//         },
-//     },
-//     fontSizes: {
-//         largeHeader: '2.25rem',
-//         mainHeader: '1.25rem',
-//         bodySize: '1rem',
-//         smallBody: `${14 / 16}rem`,
-//         smallerBody: `${12 / 16}rem`,
-//     },
-//     fontWeight: {
-//         thin: 300,
-//         medium: 400,
-//         semi: 700,
-//         bold: 700,
-//     },
-//     shape: {
-//         borderRadius: 4,
-//         borderRadiusMedium: 8,
-//         borderRadiusLarge: 12,
-//         borderRadiusExtraLarge: 20,
-//         tableRowHeight: 64,
-//         tableRowHeightCompact: 56,
-//         tableRowHeightDense: 48,
-//     },
-//     palette: {
-//         primary: {
-//             main: themeColors.textColor,
-//             light: colors.purple[700],
-//             dark: colors.purple[900],
-//         },
-//         secondary: {
-//             main: colors.purple[800],
-//             light: colors.purple[700],
-//             dark: colors.purple[900],
-//         },
-//         info: {
-//             light: colors.blue[50],
-//             main: colors.blue[500],
-//             dark: colors.blue[700],
-//             border: colors.blue[200],
-//         },
-//         success: {
-//             light: colors.green[50],
-//             main: colors.green[600],
-//             dark: themeColors.main,
-//             border: colors.green[300],
-//         },
-//         warning: {
-//             light: colors.orange[100],
-//             main: colors.orange[800],
-//             dark: colors.orange[900],
-//             border: colors.orange[500],
-//         },
-//         error: {
-//             light: colors.red[50],
-//             main: colors.red[700],
-//             dark: colors.red[800],
-//             border: colors.red[300],
-//         },
-//         background: {
-//             paper: themeColors.main,
-//         },
-//         divider: themeColors.secondary,
-//         // dividerAlternative: colors.grey[400],
-//         tableHeaderHover: colors.darkblue[700],
-//         tableHeaderBackground: themeColors.secondary,
-//         tableHeaderColor: themeColors.textColor,
-//         highlight: '#FFEACC',
-//         secondaryContainer: themeColors.secondary,
-//         contentWrapper: colors.darkblue[800],
-//         formBackground: themeColors.main,
-//         formSidebar: colors.darkblue[1000],
-//         headerBackground: themeColors.main,
-//         footerBackground: themeColors.main,
-//         sidebarContainer: 'rgba(32,32,33, 0.2)',
-//         codebox: colors.darkblue[600],
-//         featureMetaData: colors.darkblue[1000],
-//         playgroundBackground: colors.darkblue[600],
-//         playgroundFormBackground: themeColors.secondary,
-//         standaloneBackground: colors.black,
-//         featureStrategySegmentChipBackground: themeColors.secondary,
-//         featureSegmentSearchBackground: themeColors.secondary,
-//         dialogHeaderBackground: themeColors.secondary,
-//         dialogHeaderText: themeColors.textColor,
-//         lightBorder: colors.darkblue[500],
-//         constraintAccordion: {
-//             editBackground: colors.darkblue[600],
-//             background: themeColors.secondary,
-//             operatorBackground: themeColors.main,
-//         },
-//         standaloneBannerGradient: {
-//             from: colors.darkblue[1000],
-//             to: colors.black,
-//         },
-//         projectCard: {
-//             hover: themeColors.secondary,
-//             textColor: themeColors.textColor,
-//         },
-//         formSidebarTextColor: themeColors.textColor,
-//         checkmarkBadge: themeColors.secondary,
-//         inputLabelBackground: 'transparent',
-//         grey: colors.grey,
-//         text: {
-//             primary: themeColors.textColor,
-//             secondary: colors.grey[800],
-//             disabled: colors.grey[600],
-//         },
-//         code: {
-//             main: '#0b8c8f',
-//             diffAdd: 'green',
-//             diffSub: 'red',
-//             diffNeutral: 'black',
-//             edited: 'blue',
-//         },
-//         neutral: {
-//             light: colors.darkblue[500],
-//             main: colors.grey[700],
-//             dark: colors.grey[800],
-//             border: colors.grey[500],
-//         },
-//         activityIndicators: {
-//             primary: themeColors.secondary,
-//             unknown: themeColors.secondary,
-//             recent: themeColors.secondary,
-//             inactive: themeColors.secondary,
-//             abandoned: themeColors.secondary,
-//         },
-//         // tertiary: {
-//         //     light: themeColors.secondary,
-//         //     main: colors.grey[400],
-//         //     dark: colors.grey[600],
-//         //     background: 'white',
-//         //     contrast: colors.grey[300],
-//         // },
-//         inactiveIcon: colors.grey[600],
-//     },
-//     components: {
-//         MuiAppBar: {
-//             styleOverrides: {
-//                 root: {
-//                     color: themeColors.textColor,
-//                 },
-//             },
-//         },
-//         MuiInputLabel: {
-//             styleOverrides: {
-//                 root: {
-//                     color: themeColors.textColor,
-//                 },
-//             },
-//         },
-//         MuiIconButton: {
-//             styleOverrides: {
-//                 root: {
-//                     color: colors.grey[50],
-//                     '&:hover': {
-//                         backgroundColor: themeColors.hover,
-//                     },
-//                     '&.Mui-disabled': {
-//                         '& .MuiSvgIcon-root': {
-//                             color: colors.grey[700],
-//                         },
-//                     },
-//                 },
-//             },
-//         },
-//         MuiLink: {
-//             styleOverrides: {
-//                 root: {
-//                     color: colors.grey[50],
-//                     '&:hover': {
-//                         textDecoration: 'none',
-//                     },
-//                 },
-//             },
-//         },
-//         MuiBreadcrumbs: {
-//             styleOverrides: {
-//                 root: {
-//                     color: themeColors.textColor,
-//                     fontSize: '0.875rem',
-//                     '& a': {
-//                         color: themeColors.textColor,
-//                         textDecoration: 'underline',
-//                         '&:hover': {
-//                             textDecoration: 'none',
-//                         },
-//                     },
-//                 },
-//             },
-//         },
-//         MuiTableHead: {
-//             styleOverrides: {
-//                 root: {
-//                     background: 'transparent',
-//                     '& th': {
-//                         background: colors.grey[200],
-//                     },
-//                 },
-//             },
-//         },
-//         MuiTableRow: {
-//             styleOverrides: {
-//                 root: {
-//                     '&.MuiTableRow-hover:hover': {
-//                         background: themeColors.secondary,
-//                     },
-//                 },
-//             },
-//         },
-//         MuiTableCell: {
-//             styleOverrides: {
-//                 root: {
-//                     borderBottomColor: themeColors.main,
-//                 },
-//             },
-//         },
-//         MuiAlert: {
-//             styleOverrides: {
-//                 root: {
-//                     borderRadius: '8px',
-//                     a: {
-//                         color: 'inherit',
-//                     },
-//                     '&.MuiAlert-standardInfo': {
-//                         backgroundColor: colors.blue[50],
-//                         color: colors.blue[700],
-//                         border: `1px solid ${colors.blue[200]}`,
-//                         '& .MuiAlert-icon .MuiSvgIcon-root': {
-//                             color: colors.blue[500],
-//                         },
-//                     },
-//                     '&.MuiAlert-standardSuccess': {
-//                         backgroundColor: colors.green[50],
-//                         color: colors.green[800],
-//                         border: `1px solid ${colors.green[300]}`,
-//                         '& .MuiAlert-icon .MuiSvgIcon-root': {
-//                             color: colors.green[500],
-//                         },
-//                     },
-//                     '&.MuiAlert-standardWarning': {
-//                         backgroundColor: colors.orange[100],
-//                         color: colors.orange[900],
-//                         border: `1px solid ${colors.orange[500]}`,
-//                         '& .MuiAlert-icon .MuiSvgIcon-root': {
-//                             color: colors.orange[800],
-//                         },
-//                     },
-//                     '&.MuiAlert-standardError': {
-//                         backgroundColor: colors.red[50],
-//                         color: colors.red[800],
-//                         border: `1px solid ${colors.red[300]}`,
-//                         '& .MuiAlert-icon .MuiSvgIcon-root': {
-//                             color: colors.red[700],
-//                         },
-//                     },
-//                 },
-//             },
-//         },
-//         MuiButton: {
-//             styleOverrides: {
-//                 root: {
-//                     '&.Mui-disabled': {
-//                         backgroundColor: colors.grey[400],
-//                     },
-//                 },
-//             },
-//         },
-//         MuiSvgIcon: {
-//             styleOverrides: {
-//                 root: {
-//                     color: themeColors.textColor,
-//                 },
-//             },
-//         },
-//         MuiTabs: {
-//             styleOverrides: {
-//                 root: {
-//                     backgroundColor: themeColors.main,
-//                     color: themeColors.textColor,
-//                     '& .MuiTabs-indicator': {
-//                         height: '4px',
-//                     },
-//                 },
-//             },
-//         },
-//         MuiTab: {
-//             styleOverrides: {
-//                 root: {
-//                     color: themeColors.textColor,
-//                     fontSize: '1rem',
-//                     textTransform: 'none',
-//                     fontWeight: 400,
-//                     minHeight: '62px',
-//                     '&:hover': {
-//                         backgroundColor: themeColors.secondary,
-//                     },
-//                     '&.Mui-selected': {
-//                         color: themeColors.textColor,
-//                         fontWeight: 700,
-//                     },
-//                     '& > span': {
-//                         color: colors.purple[900],
-//                     },
-//                 },
-//             },
-//         },
-//         MuiAccordionSummary: {
-//             styleOverrides: {
-//                 root: {
-//                     '& > .MuiAccordionSummary-content.Mui-expanded': {
-//                         margin: '12px 0',
-//                     },
-//                 },
-//             },
-//         },
-//         MuiSwitch: {
-//             styleOverrides: {
-//                 switchBase: {
-//                     zIndex: 1,
-//                     '&:not(.Mui-checked) .MuiTouchRipple-child': {
-//                         color: colors.grey['500'],
-//                     },
-//                 },
-//             },
-//         },
-//         MuiIcon: {
-//             styleOverrides: {
-//                 root: {
-//                     color: colors.grey[50],
-//                 },
-//                 colorDisabled: {
-//                     color: colors.grey[50],
-//                 },
-//             },
-//         },
-//         MuiMenu: {
-//             styleOverrides: {
-//                 root: {
-//                     '.MuiMenu-list': {
-//                         backgroundColor: colors.darkblue[600],
-//                     },
-//                 },
-//             },
-//         },
-//         MuiMenuItem: {
-//             styleOverrides: {
-//                 root: {
-//                     '&.Mui-disabled': {
-//                         opacity: 0.66,
-//                     },
-//                     '&:hover': {
-//                         backgroundColor: themeColors.secondary,
-//                     },
-//                 },
-//             },
-//         },
-//         MuiInputBase: {
-//             styleOverrides: {
-//                 root: {
-//                     backgroundColor: colors.darkblue[1000],
-//                     '.MuiSvgIcon-root': {
-//                         color: '#fff',
-//                     },
-//                 },
-//             },
-//         },
-//         MuiPaper: {
-//             styleOverrides: {
-//                 root: {
-//                     backgroundColor: themeColors.main,
-//                     color: themeColors.textColor,
-//                 },
-//             },
-//         },
-//     },
-// });

frontend/src/themes/theme.ts

@@ -1,7 +1,9 @@
 import { createTheme } from '@mui/material/styles';
 import { colors } from './colors';
+import { alpha } from '@mui/material';
+import { focusable } from 'themes/themeStyles';
 
-export default createTheme({
+const theme = {
     breakpoints: {
         values: {
             xs: 0,
@@ -17,7 +19,7 @@ export default createTheme({
         elevated: '0px 1px 20px rgba(45, 42, 89, 0.1)',
         popup: '0px 2px 6px rgba(0, 0, 0, 0.25)',
         primaryHeader: '0px 8px 24px rgba(97, 91, 194, 0.2)',
-        separator: '0px 2px 3px hsl(0deg 0% 78% / 50%)',
+        separator: '0px 2px 4px rgba(32, 32, 33, 0.12)', // Notifications header
     },
     typography: {
         fontFamily: 'Sen, Roboto, sans-serif',
@@ -66,8 +68,8 @@ export default createTheme({
 
     palette: {
         common: {
-            // Used for text color
+            white: colors.grey[50], // Tooltips text color // Switch base (OFF) // Text color
-            white: colors.grey[50],
+            black: colors.grey[900], // Switch track (OFF)
         },
         text: {
             primary: colors.grey[900],
@@ -82,48 +84,50 @@ export default createTheme({
         },
         secondary: {
             // Used for purple badges and puple light elements
-            light: colors.purple[50],
             main: colors.purple[800],
-            dark: colors.purple[900],
+            light: colors.purple[50],
+            dark: colors.purple[900], // Color used for text
             border: colors.purple[300],
+            contrastText: colors.purple[900], // Color used for text inside badge
         },
         info: {
-            light: colors.blue[50],
             main: colors.blue[500],
-            dark: colors.blue[700],
+            light: colors.blue[50],
-            contrastText: colors.grey[50], // Color used for content when info.main is used as a background
+            dark: colors.blue[800], // Color used for text
             border: colors.blue[200],
+            contrastText: colors.blue[800], // Color used for text inside alert
         },
         success: {
-            light: colors.green[50],
             main: colors.green[600],
-            dark: colors.green[800],
+            light: colors.green[50],
-            contrastText: colors.grey[50], // Color used for content when success.main is used as a background
+            dark: colors.green[800], // Color used for text
             border: colors.green[300],
+            contrastText: colors.green[800], // Color used for text inside alert
         },
         warning: {
-            light: colors.orange[100],
             main: colors.orange[800],
-            dark: colors.orange[900],
+            light: colors.orange[100],
-            contrastText: colors.grey[50], // Color used for content when warning.main is used as a background
+            dark: colors.orange[900], // Color used for text
             border: colors.orange[500],
+            contrastText: colors.orange[900], // Color used for text inside alert
         },
         error: {
+            main: colors.red[700], // used on error buttons // used on icons on these elements
             light: colors.red[50],
-            main: colors.red[700],
+            dark: colors.red[800], // Color used for text
-            dark: colors.red[800],
-            contrastText: colors.grey[50], // Color used for content when error.main is used as a background
             border: colors.red[300],
+            contrastText: colors.red[800], // Color used for text inside alert
         },
 
         /**
          *  Used for grey badges, hover elements, and grey light elements
          */
         neutral: {
-            light: colors.grey[100],
             main: colors.grey[700],
+            light: colors.grey[100],
             dark: colors.grey[800],
             border: colors.grey[400],
+            contrastText: colors.grey[800], // Color used for text inside badge
         },
 
         background: {
@@ -131,6 +135,7 @@ export default createTheme({
             default: colors.grey[50],
             application: colors.grey[300],
             sidebar: colors.purple[800],
+            alternative: colors.purple[800], // used on the dark theme to shwitch primary main to a darker shade
             elevation1: colors.grey[100],
             elevation2: colors.grey[200],
         },
@@ -159,7 +164,6 @@ export default createTheme({
          * Table colors.
          */
         table: {
-            headerColor: colors.grey[900], //New - Is needed? ###CHECK
             headerBackground: colors.grey[200],
             headerHover: colors.grey[300],
             divider: colors.grey[300],
@@ -167,7 +171,7 @@ export default createTheme({
         },
 
         /**
-         * Text highlight effect color. Used when filtering/searching over content.
+         * Text highlight effect color. Used when filtering/searching over content
          */
         highlight: colors.orange[200],
 
@@ -176,6 +180,11 @@ export default createTheme({
          */
         codebox: colors.action[0.12],
 
+        /**
+         * Links color
+         */
+        links: colors.purple[900],
+
         /**
          * Gradient for the login page
          */
@@ -185,7 +194,7 @@ export default createTheme({
         },
 
         /**
-         * Colors for event log output.
+         * Colors for event log output
          */
         eventLog: {
             diffAdd: colors.green[800],
@@ -194,7 +203,7 @@ export default createTheme({
         },
 
         /**
-         * For 'Seen' column on feature toggles list and other.
+         * For 'Seen' column on feature toggles list and other
          */
         seen: {
             unknown: colors.grey[100],
@@ -203,14 +212,66 @@ export default createTheme({
             abandoned: colors.red[200],
             primary: colors.purple[100],
         },
-    },
 
+        /**
+         * For Environment Accordion.
+         */
+        envAccordion: {
+            disabled: colors.grey[100],
+            expanded: colors.grey[200],
+        },
+
+        /**
+         * MUI grey colors
+         */
+        grey: {
+            // This was to see were these colors are used from MUI
+            // 50: '#A6000E',
+            100: colors.grey[100], // Disabled Switch base (OFF)
+            // 200: '#A6000E',
+            // 300: '#A6000E',
+            // 400: '#A6000E',
+            // 500: '#A6000E',
+            600: colors.grey[800], // slider tooltip background
+            700: colors.grey[800], // Dark tooltip background
+            // 800: '#A6000E',
+            // 900: '#A6000E',
+            // A100: '#A6000E',
+            // A200: '#A6000E',
+            // A400: '#A6000E',
+            // A700: '#A6000E',
+        },
+    },
+};
+
+export default createTheme({
+    ...theme,
     components: {
+        // Skeleton
+        MuiCssBaseline: {
+            styleOverrides: {
+                '.skeleton': {
+                    '&::before': {
+                        backgroundColor: theme.palette.background.elevation1,
+                    },
+                    '&::after': {
+                        background:
+                            'linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 100%, rgba(255, 255, 255, 0.5) 100%, rgba(255, 255, 255, 0))',
+                    },
+                },
+
+                a: {
+                    color: theme.palette.links,
+                },
+            },
+        },
+
         // Links
         MuiLink: {
             styleOverrides: {
                 root: ({ theme }) => ({
-                    color: theme.palette.primary.dark,
+                    ...focusable(theme),
+                    color: theme.palette.links,
                     '&:hover': {
                         textDecoration: 'none',
                     },
@@ -225,7 +286,7 @@ export default createTheme({
                     color: theme.palette.text.primary,
                     fontSize: '0.875rem',
                     '& a': {
-                        color: theme.palette.primary.dark,
+                        color: theme.palette.links,
                         textDecoration: 'none',
                         '&:hover': {
                             textDecoration: 'underline',
@@ -239,7 +300,6 @@ export default createTheme({
         MuiTableHead: {
             styleOverrides: {
                 root: ({ theme }) => ({
-                    // background: 'transparent',
                     '& th': {
                         height: theme.shape.tableRowHeightCompact,
                         backgroundColor: theme.palette.table.headerBackground,
@@ -281,10 +341,19 @@ export default createTheme({
         MuiAlert: {
             styleOverrides: {
                 root: ({ theme }) => ({
+                    padding: theme.spacing(2, 3),
                     borderRadius: theme.shape.borderRadiusMedium,
                     a: {
                         color: 'inherit',
                     },
+                    '> .MuiAlert-icon': {
+                        padding: 0,
+                        opacity: 1,
+                        fontSize: '24px',
+                    },
+                    '> .MuiAlert-message': {
+                        padding: '3px 0 0 0',
+                    },
                     '&.MuiAlert-standardInfo': {
                         backgroundColor: theme.palette.info.light,
                         color: theme.palette.info.dark,
@@ -345,7 +414,7 @@ export default createTheme({
                     lineHeight: '1',
                     minHeight: '62px',
                     '&:hover': {
-                        backgroundColor: theme.palette.background.elevation2,
+                        backgroundColor: theme.palette.action.hover,
                     },
                     '&.Mui-selected': {
                         color: theme.palette.text.primary,
@@ -361,12 +430,22 @@ export default createTheme({
             },
         },
 
-        // Constraint accordion / cards
+        // Environment accordion
         MuiAccordion: {
             styleOverrides: {
                 root: ({ theme }) => ({
                     '&:first-of-type, &:last-of-type': {
-                        borderRadius: theme.shape.borderRadiusMedium,
+                        borderRadius: theme.shape.borderRadiusLarge,
+                    },
+                    '&.environment-accordion.Mui-expanded': {
+                        outline: `2px solid ${alpha(
+                            theme.palette.background.alternative,
+                            0.6
+                        )}`,
+                        boxShadow: `0px 2px 8px ${alpha(
+                            theme.palette.primary.main,
+                            0.2
+                        )}`,
                     },
                 }),
             },
@@ -384,19 +463,20 @@ export default createTheme({
             },
         },
 
-        // Project overview, improve toggle/switch disabled focus effect color
+        // Project overview, improve switch (OFF - state) focus effect color
         MuiSwitch: {
             styleOverrides: {
                 root: ({ theme }) => ({
                     zIndex: 1,
-                    '&:not(.Mui-checked) .MuiTouchRipple-child': {
+                    '.MuiSwitch-switchBase:not(.Mui-checked) .MuiTouchRipple-child':
-                        color: theme.palette.neutral.border,
+                        {
-                    },
+                            color: theme.palette.action.disabled,
+                        },
                 }),
             },
         },
 
-        // Overwiteing the action.disabledOpacity from MU
+        // Overwiteing the action.disabledOpacity from MUI
         MuiMenuItem: {
             styleOverrides: {
                 root: {

frontend/src/themes/themeStyles.ts

@@ -9,6 +9,7 @@ export const focusable = (theme: Theme) => ({
         outlineWidth: 2,
         outlineOffset: 2,
         outlineColor: theme.palette.primary.main,
+        borderRadius: '2px',
     },
 });
 

frontend/src/themes/themeTypes.ts

@@ -34,15 +34,14 @@ declare module '@mui/material/styles' {
 
     interface CustomPalette {
         /**
-         * Generic neutral palette color.
+         * Generic neutral palette color
          */
         neutral: PaletteColorOptions;
 
         /**
-         * Table colors.
+         * Table colors
          */
         table: {
-            headerColor: string;
             headerBackground: string;
             headerHover: string;
             divider: string;
@@ -50,7 +49,7 @@ declare module '@mui/material/styles' {
         };
 
         /**
-         * Colors for event log output.
+         * Colors for event log output
          */
         eventLog: {
             diffAdd: string;
@@ -59,7 +58,7 @@ declare module '@mui/material/styles' {
         };
 
         /**
-         * For 'Seen' column on feature toggles list and other.
+         * For 'Seen' column on feature toggles list and other
          */
         seen: {
             unknown: string;
@@ -69,8 +68,6 @@ declare module '@mui/material/styles' {
             primary: string;
         };
 
-        // dividerAlternative: string;
-
         /**
          * Background color for the API command in the sidebar
          */
@@ -85,9 +82,22 @@ declare module '@mui/material/styles' {
         };
 
         /**
-         * Text highlight effect color. Used when filtering/searching over content.
+         * Text highlight effect color. Used when filtering/searching over content
          */
         highlight: string;
+
+        /**
+         * For Links
+         */
+        links: string;
+
+        /**
+         * For Environment Accordion
+         */
+        envAccordion: {
+            disabled: string;
+            expanded: string;
+        };
     }
 
     interface Theme extends CustomTheme {}
@@ -102,23 +112,24 @@ declare module '@mui/material/styles' {
     interface CustomTypeBackground {
         application: string;
         sidebar: string;
+        alternative: string;
         elevation1: string;
         elevation2: string;
     }
 
     interface PaletteColor {
-        light: string;
         main: string;
+        light: string;
         dark: string;
-        contrastText: string;
         border?: string;
+        contrastText: string;
     }
     interface PaletteColorOptions {
-        light?: string;
         main?: string;
+        light?: string;
         dark?: string;
-        contrastText?: string;
         border?: string;
+        contrastText?: string;
     }
 }