refactor: light theme colors (#3252)

## About the changes Refactoring the colors for the light theme to be much easier to continue with dark mode This is the first step to finish dark mode https://linear.app/unleash/project/[low][s][alpha]-dark-mode-in-unleash-admin-ui-31b407d13c4b/1 This PR uses `main-theme` as a placeholder for `dark-theme` for now due to the new changes. Still need to set the correct values here. --------- Co-authored-by: Nuno Góis <github@nunogois.com>
Unleash · Mar 6, 2023 · 23af7a3 · 23af7a3
1 parent 62a1e20
commit 23af7a3
Show file tree

Hide file tree

Showing 113 changed files with 1,163 additions and 788 deletions.
diff --git a/...nd/src/component/admin/billing/BillingDashboard/BillingInformation/BillingInformation.tsx b/...nd/src/component/admin/billing/BillingDashboard/BillingInformation/BillingInformation.tsx
@@ -8,7 +8,7 @@ const StyledInfoBox = styled('aside')(({ theme }) => ({
     padding: theme.spacing(4),
     height: '100%',
     borderRadius: theme.shape.borderRadiusLarge,
-    backgroundColor: theme.palette.secondaryContainer,
+    backgroundColor: theme.palette.background.elevation2,
 }));
 
 const StyledTitle = styled(Typography)(({ theme }) => ({
@@ -26,7 +26,7 @@ const StyledInfoLabel = styled(Typography)(({ theme }) => ({
 
 const StyledDivider = styled(Divider)(({ theme }) => ({
     margin: `${theme.spacing(2.5)} 0`,
-    borderColor: theme.palette.dividerAlternative,
+    borderColor: theme.palette.divider,
 }));
 interface IBillingInformationProps {
     instanceStatus: IInstanceStatus;

diff --git a/frontend/src/component/admin/groups/GroupForm/GroupForm.tsx b/frontend/src/component/admin/groups/GroupForm/GroupForm.tsx
@@ -53,7 +53,7 @@ const StyledDescriptionBlock = styled('div')(({ theme }) => ({
     maxWidth: theme.spacing(60),
     padding: theme.spacing(3),
     backgroundColor: theme.palette.neutral.light,
-    color: theme.palette.grey[900],
+    color: theme.palette.text.primary,
     fontSize: theme.fontSizes.smallBody,
     borderRadius: theme.shape.borderRadiusMedium,
     marginBottom: theme.spacing(2),

diff --git a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx
@@ -15,7 +15,7 @@ const StyledLink = styled(Link)(({ theme }) => ({
 const StyledGroupCard = styled('aside')(({ theme }) => ({
     padding: theme.spacing(2.5),
     height: '100%',
-    border: `1px solid ${theme.palette.dividerAlternative}`,
+    border: `1px solid ${theme.palette.divider}`,
     borderRadius: theme.shape.borderRadiusLarge,
     boxShadow: theme.boxShadows.card,
     display: 'flex',

diff --git a/frontend/src/component/admin/maintenance/MaintenanceToggle.tsx b/frontend/src/component/admin/maintenance/MaintenanceToggle.tsx
@@ -15,7 +15,7 @@ const StyledContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
     padding: theme.spacing(3),
-    border: `1px solid ${theme.palette.dividerAlternative}`,
+    border: `1px solid ${theme.palette.divider}`,
     borderRadius: theme.shape.borderRadiusLarge,
 }));
 

diff --git a/frontend/src/component/admin/network/NetworkTraffic/NetworkTraffic.tsx b/frontend/src/component/admin/network/NetworkTraffic/NetworkTraffic.tsx
@@ -62,7 +62,7 @@ const createInstanceChartOptions = (
         tooltip: {
             backgroundColor: theme.palette.background.paper,
             bodyColor: theme.palette.text.primary,
-            titleColor: theme.palette.grey[700],
+            titleColor: theme.palette.action.active,
             borderColor: theme.palette.primary.main,
             borderWidth: 1,
             padding: 10,

diff --git a/...nt/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountModal.tsx b/...nt/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountModal.tsx
@@ -71,7 +71,7 @@ const StyledRoleRadio = styled(Radio)(({ theme }) => ({
 
 const StyledSecondaryContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(3),
-    backgroundColor: theme.palette.secondaryContainer,
+    backgroundColor: theme.palette.background.elevation2,
     borderRadius: theme.shape.borderRadiusMedium,
     marginTop: theme.spacing(4),
     marginBottom: theme.spacing(2),

diff --git a/frontend/src/component/admin/users/InviteLink/InviteLink.tsx b/frontend/src/component/admin/users/InviteLink/InviteLink.tsx
@@ -174,7 +174,7 @@ export const InviteLink: VFC<ICreateInviteLinkProps> = () => {
                             borderRadius: theme =>
                                 `${theme.shape.borderRadiusMedium}px`,
                             backgroundColor: theme =>
-                                theme.palette.secondaryContainer,
+                                theme.palette.background.elevation2,
                         }}
                     >
                         <Typography variant="body2" fontWeight="bold">

diff --git a/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx b/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx
@@ -57,7 +57,7 @@ export const InviteLinkBar: VFC = () => {
     return (
         <Box
             sx={{
-                backgroundColor: 'tertiary.background',
+                backgroundColor: 'background.paper',
                 py: 2,
                 px: 4,
                 mb: 2,

diff --git a/frontend/src/component/admin/users/LinkField/LinkField.tsx b/frontend/src/component/admin/users/LinkField/LinkField.tsx
@@ -37,7 +37,7 @@ export const LinkField = ({ inviteLink, small }: ILinkFieldProps) => {
     return (
         <Box
             sx={{
-                backgroundColor: theme => theme.palette.secondaryContainer,
+                backgroundColor: theme => theme.palette.background.elevation2,
                 py: 4,
                 px: 4,
                 borderRadius: theme => `${theme.shape.borderRadius}px`,

diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/Change.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/Change.tsx
@@ -48,11 +48,11 @@ const StyledSingleChangeBox = styled(Box, {
         borderColor:
             $hasConflict || $isInConflictFeature
                 ? theme.palette.warning.border
-                : theme.palette.dividerAlternative,
+                : theme.palette.divider,
         borderTopColor:
             ($hasConflict || $isAfterWarning) && !$isInConflictFeature
                 ? theme.palette.warning.border
-                : theme.palette.dividerAlternative,
+                : theme.palette.divider,
     })
 );
 

diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/FeatureToggleChanges.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/FeatureToggleChanges.tsx
@@ -35,7 +35,7 @@ export const FeatureToggleChanges: FC<IFeatureToggleChanges> = ({
                 borderColor: theme =>
                     conflict
                         ? theme.palette.warning.border
-                        : theme.palette.tertiary.main,
+                        : theme.palette.divider,
                 borderBottom: 'none',
                 overflow: 'hidden',
             })}

diff --git a/...ponent/changeRequest/ChangeRequestOverview/ChangeRequestComments/ChangeRequestComment.tsx b/...ponent/changeRequest/ChangeRequestOverview/ChangeRequestComments/ChangeRequestComment.tsx
@@ -20,7 +20,7 @@ const CommentPaper = styled(Paper)(({ theme }) => ({
 const CommentHeader = styled(Box)(({ theme }) => ({
     display: 'flex',
     borderBottom: '1px solid',
-    borderColor: theme.palette.dividerAlternative,
+    borderColor: theme.palette.divider,
     paddingBottom: theme.spacing(1.5),
 }));
 

diff --git a/...nt/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx b/...nt/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx
@@ -26,7 +26,7 @@ export const StyledHeader = styled(Typography)(({ theme }) => ({
 
 export const StyledCard = styled(Card)(({ theme }) => ({
     padding: theme.spacing(0.75, 1.5),
-    backgroundColor: theme.palette.tertiary.light,
+    backgroundColor: theme.palette.background.elevation2,
 }));
 
 export const StyledAvatar = styled(Avatar)(({ theme }) => ({

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

diff --git a/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx b/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
@@ -59,7 +59,7 @@ export const Separator = () => (
         sx={{
             marginLeft: 1.5,
             marginRight: 1.5,
-            color: 'dividerAlternative',
+            color: 'divider',
         }}
     >
         |

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

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

diff --git a/frontend/src/component/common/AutocompleteBox/AutocompleteBox.styles.ts b/frontend/src/component/common/AutocompleteBox/AutocompleteBox.styles.ts
@@ -8,7 +8,7 @@ export const useStyles = makeStyles()(theme => ({
         borderTopRightRadius: 50,
         borderBottomRightRadius: 50,
         '& fieldset': {
-            borderColor: theme.palette.grey[300],
+            borderColor: theme.palette.divider,
             borderLeftColor: 'transparent',
         },
         '&.Mui-focused .MuiOutlinedInput-notchedOutline': {

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

diff --git a/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx b/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx
@@ -7,7 +7,7 @@ interface ICheckMarkBadgeProps {
 }
 
 const StyledBatch = styled('div')(({ theme }) => ({
-    backgroundColor: theme.palette.checkmarkBadge,
+    backgroundColor: theme.palette.primary.main,
     width: '75px',
     height: '75px',
     borderRadius: '50px',
@@ -21,12 +21,12 @@ const StyledBatch = styled('div')(({ theme }) => ({
 }));
 
 const StyledClose = styled(Close)(({ theme }) => ({
-    color: theme.palette.tertiary.background,
+    color: theme.palette.background.paper,
     width: '35px',
     height: '35px',
 }));
 const StyledCheck = styled(Check)(({ theme }) => ({
-    color: theme.palette.tertiary.background,
+    color: theme.palette.background.paper,
     width: '35px',
     height: '35px',
 }));

diff --git a/frontend/src/component/common/Codebox/Codebox.tsx b/frontend/src/component/common/Codebox/Codebox.tsx
@@ -17,7 +17,7 @@ const StyledCode = styled('pre')(({ theme }) => ({
     margin: 0,
     wordBreak: 'break-all',
     whiteSpace: 'pre-wrap',
-    color: theme.palette.formSidebarTextColor,
+    color: theme.palette.common.white,
     fontSize: theme.fontSizes.smallBody,
 }));
 

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

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

diff --git a/...traintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts b/...traintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts
@@ -12,6 +12,6 @@ export const useStyles = makeStyles()(theme => ({
     description: {
         lineHeight: 1.33,
         fontSize: theme.fontSizes.smallerBody,
-        color: theme.palette.grey[700],
+        color: theme.palette.action.active,
     },
 }));
diff --git a/...mon/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx b/...mon/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx
@@ -6,12 +6,12 @@ export const StyledToggleButtonOff = styled(IconButton)(({ theme }) => ({
     minWidth: '28px',
     maxWidth: '28px',
     height: 'auto',
-    backgroundColor: theme.palette.tertiary.background,
+    backgroundColor: theme.palette.background.paper,
     borderRadius: theme.shape.borderRadius,
     padding: '0 1px 0',
     marginRight: '1rem',
     '&:hover': {
-        background: theme.palette.tertiary.contrast[300],
+        background: theme.palette.background.application,
     },
     [theme.breakpoints.between(1101, 1365)]: {
         marginRight: '0.5rem',

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

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

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

diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx
@@ -11,7 +11,7 @@ interface IConstraintOperatorProps {
 const StyledContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(0.5, 1.5),
     borderRadius: theme.shape.borderRadius,
-    backgroundColor: theme.palette.constraintAccordion.operatorBackground,
+    backgroundColor: theme.palette.background.elevation2,
     lineHeight: 1.25,
 }));
 

diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect.tsx
@@ -64,7 +64,7 @@ const StyledMenuItem = styled(MenuItem, {
                   left: 0,
                   right: 0,
                   borderTop: '1px solid',
-                  borderTopColor: theme.palette.tertiary.contrast,
+                  borderTopColor: theme.palette.divider,
               },
           }
         : {}

diff --git a/frontend/src/component/common/Dialogue/Dialogue.tsx b/frontend/src/component/common/Dialogue/Dialogue.tsx
@@ -21,7 +21,7 @@ const StyledDialog = styled(Dialog)(({ theme, maxWidth }) => ({
 
 const StyledDialogTitle = styled(DialogTitle)(({ theme }) => ({
     backgroundColor: theme.palette.primary.main,
-    color: theme.palette.text.tertiaryContrast,
+    color: theme.palette.primary.contrastText,
     padding: theme.spacing(3.5, 6),
     fontWeight: theme.fontWeight.medium,
 }));