refactor: [M3-8898] - Replace one-off hardcoded color values with color tokens pt3

packages/manager/.changeset/pr-11241-tech-stories-1731391925729.md

@@ -0,0 +1,5 @@
+---
+'@linode/manager': Tech Stories
+---
+
+Replace one-off hardcoded color values with color tokens pt3 ([#11241](https://github.com/linode/manager/pull/11241))

packages/manager/src/components/AreaChart/AreaChart.tsx

@@ -241,10 +241,10 @@ export const AreaChart = (props: AreaChartProps) => {
           <YAxis stroke={theme.color.label} tickFormatter={humanizeLargeData} />
           <Tooltip
             contentStyle={{
-              color: '#606469',
+              color: theme.tokens.color.Neutrals[70],
             }}
             itemStyle={{
-              color: '#606469',
+              color: theme.tokens.color.Neutrals[70],
               fontFamily: theme.font.bold,
             }}
             content={<CustomTooltip />}

packages/manager/src/components/Checkbox.tsx

@@ -78,7 +78,7 @@ const StyledCheckbox = styled(_Checkbox)(({ theme, ...props }) => ({
   '&:hover': {
     color: theme.palette.primary.main,
   },
-  color: '#ccc',
+  color: theme.tokens.color.Neutrals[40],
   transition: theme.transitions.create(['color']),
   ...(props.checked && {
     color: theme.palette.primary.main,
@@ -88,7 +88,7 @@ const StyledCheckbox = styled(_Checkbox)(({ theme, ...props }) => ({
       fill: `${theme.bg.main}`,
       opacity: 0.5,
     },
-    color: '#ccc !important',
+    color: `${theme.tokens.color.Neutrals[40]} !important`,
     fill: `${theme.bg.main} !important`,
     pointerEvents: 'none',
   }),

packages/manager/src/components/CopyableTextField/CopyableTextField.tsx

@@ -60,15 +60,21 @@ const StyledTextField = styled(TextField)(({ theme }) => ({
   '.removeDisabledStyles': {
     '& .MuiInput-input': {
       WebkitTextFillColor: 'unset !important',
-      borderColor: theme.name === 'light' ? '#ccc' : '#222',
+      borderColor:
+        theme.name === 'light'
+          ? theme.tokens.color.Neutrals[40]
+          : theme.tokens.color.Neutrals.Black,
       color:
         theme.name === 'light'
           ? `${theme.palette.text.primary} !important`
           : `${theme.tokens.color.Neutrals.White} !important`,
       opacity: theme.name === 'dark' ? 0.5 : 0.8,
     },
     '&& .MuiInput-root': {
-      borderColor: theme.name === 'light' ? '#ccc' : '#222',
+      borderColor:
+        theme.name === 'light'
+          ? theme.tokens.color.Neutrals[40]
+          : theme.tokens.color.Neutrals.Black,
       opacity: 1,
     },
   },

packages/manager/src/components/Dialog/Dialog.tsx

@@ -115,10 +115,10 @@ const StyledDialog = styled(_Dialog, {
   },
 }));
 
-const StyledHr = styled('hr')({
-  backgroundColor: '#e3e5e8',
+const StyledHr = styled('hr', { label: 'StyledHr' })(({ theme }) => ({
+  backgroundColor: theme.tokens.color.Neutrals[20],
   border: 'none',
   height: 1,
   margin: '-2em 8px 0px 8px',
   width: '100%',
-});
+}));

packages/manager/src/components/EnhancedSelect/Select.styles.ts

@@ -86,7 +86,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     },
     '& .react-select__control': {
       '&:hover': {
-        border: `1px dotted #ccc`,
+        border: `1px dotted ${theme.tokens.color.Neutrals[40]}`,
         cursor: 'text',
       },
       '&--is-focused, &--is-focused:hover': {
@@ -136,7 +136,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
         width: 8,
       },
       '&::-webkit-scrollbar-thumb': {
-        backgroundColor: '#ccc',
+        backgroundColor: theme.tokens.color.Neutrals[40],
         borderRadius: 8,
       },
       backgroundColor: theme.bg.white,
@@ -290,7 +290,7 @@ export const reactSelectStyles = (theme: Theme) => ({
   control: (base: any) => ({
     ...base,
     '&:hover': {
-      border: `1px dotted #ccc`,
+      border: `1px dotted ${theme.tokens.color.Neutrals[40]}`,
       cursor: 'text',
     },
     '&--is-focused, &--is-focused:hover': {
@@ -349,7 +349,7 @@ export const reactSelectStyles = (theme: Theme) => ({
       width: 8,
     },
     '&::-webkit-scrollbar-thumb': {
-      backgroundColor: '#ccc',
+      backgroundColor: theme.tokens.color.Neutrals[40],
       borderRadius: 8,
     },
     backgroundColor: theme.bg.white,

packages/manager/src/components/LineGraph/LineGraph.tsx

@@ -284,7 +284,7 @@ export const LineGraph = (props: LineGraphProps) => {
         intersect: false,
         mode: 'index',
         position: 'nearest',
-        titleFontColor: '#606469',
+        titleFontColor: theme.tokens.color.Neutrals[70],
         xPadding: 8,
         yPadding: 10,
       },

packages/manager/src/components/PasswordInput/StrengthIndicator.tsx

@@ -17,7 +17,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
     '&[class*="strength-"]': {
       backgroundColor: theme.palette.primary.main,
     },
-    backgroundColor: '#C9CACB',
+    backgroundColor: theme.tokens.color.Neutrals[40],
     height: '4px',
     transition: 'background-color .5s ease-in-out',
   },

packages/manager/src/components/Placeholder/Placeholder.tsx

@@ -218,12 +218,20 @@ const StyledButtonWrapper = styled('div')(({ theme }) => ({
 const StyledLinksSection = styled('div')<
   Pick<PlaceholderProps, 'showTransferDisplay'>
 >(({ theme, ...props }) => ({
-  borderTop: `1px solid ${theme.name === 'light' ? '#e3e5e8' : '#2e3238'}`,
+  borderTop: `1px solid ${
+    theme.name === 'light'
+      ? theme.tokens.color.Neutrals[20]
+      : theme.tokens.color.Neutrals[100]
+  }`,
   gridArea: 'links',
   paddingTop: '38px',
 
   ...(props.showTransferDisplay && {
-    borderBottom: `1px solid ${theme.name === 'light' ? '#e3e5e8' : '#2e3238'}`,
+    borderBottom: `1px solid ${
+      theme.name === 'light'
+        ? theme.tokens.color.Neutrals[20]
+        : theme.tokens.color.Neutrals[100]
+    }`,
     paddingBottom: theme.spacing(2),
     [theme.breakpoints.up('md')]: {
       paddingBottom: theme.spacing(4),

packages/manager/src/components/Tag/Tag.styles.ts

@@ -92,7 +92,9 @@ export const StyledDeleteButton = styled(StyledLinkButton, {
   },
   borderBottomRightRadius: 3,
   borderLeft: `1px solid ${
-    theme.name === 'light' ? theme.tokens.color.Neutrals.White : '#2e3238'
+    theme.name === 'light'
+      ? theme.tokens.color.Neutrals.White
+      : theme.tokens.color.Neutrals[100]
   }`,
   borderRadius: theme.tokens.borderRadius.None,
   borderTopRightRadius: 3,

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.style.ts

@@ -19,15 +19,15 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     },
     '&[disabled]': {
       '& g': {
-        stroke: '#cdd0d5',
+        stroke: theme.tokens.color.Neutrals[30],
       },
       '&:hover': {
         backgroundColor: 'inherit',
         textDecoration: 'none',
       },
       // Override disabled background color defined for dark mode
       backgroundColor: 'transparent',
-      color: '#cdd0d5',
+      color: theme.tokens.color.Neutrals[30],
       cursor: 'default',
     },
     color: theme.palette.primary.main,
@@ -47,7 +47,11 @@ export const useStyles = makeStyles()((theme: Theme) => ({
       fontFamily: theme.font.bold,
     },
     background: theme.tokens.interaction.Background.Secondary,
-    border: `1px solid ${theme.name === 'light' ? '#ccc' : '#222'}`,
+    border: `1px solid ${
+      theme.name === 'light'
+        ? theme.tokens.color.Neutrals[40]
+        : theme.tokens.color.Neutrals.Black
+    }`,
     padding: `${theme.spacing(1)} 15px`,
   },
   copyToolTip: {

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx

@@ -36,15 +36,15 @@ const useStyles = makeStyles()((theme: Theme) => ({
     },
     '&[disabled]': {
       '& g': {
-        stroke: '#cdd0d5',
+        stroke: theme.tokens.color.Neutrals[30],
       },
       '&:hover': {
         backgroundColor: 'inherit',
         textDecoration: 'none',
       },
       // Override disabled background color defined for dark mode
       backgroundColor: 'transparent',
-      color: '#cdd0d5',
+      color: theme.tokens.color.Neutrals[30],
       cursor: 'default',
     },
     color: theme.palette.primary.main,
@@ -64,7 +64,11 @@ const useStyles = makeStyles()((theme: Theme) => ({
       fontFamily: theme.font.bold,
     },
     background: theme.bg.bgAccessRowTransparentGradient,
-    border: `1px solid ${theme.name === 'light' ? '#ccc' : '#222'}`,
+    border: `1px solid ${
+      theme.name === 'light'
+        ? theme.tokens.color.Neutrals[40]
+        : theme.tokens.color.Neutrals.Black
+    }`,
     padding: '8px 15px',
   },
   copyToolTip: {

packages/manager/src/features/Events/FormattedEventMessage.tsx

@@ -58,7 +58,10 @@ const formatMessage = (message: string): JSX.Element => {
 };
 
 const StyledPre = styled('pre')(({ theme }) => ({
-  backgroundColor: theme.name === 'dark' ? '#222' : '#f4f4f4',
+  backgroundColor:
+    theme.name === 'dark'
+      ? theme.tokens.color.Neutrals.Black
+      : theme.tokens.color.Neutrals[5],
   borderRadius: 4,
   display: 'inline',
   fontSize: '0.75rem',

packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesList.tsx

@@ -27,7 +27,11 @@ export const HostNamesList = ({ objectStorageKey }: Props) => {
       <StyledBoxShadowWrapper
         sx={(theme) => ({
           backgroundColor: theme.bg.main,
-          border: `1px solid ${theme.name === 'light' ? '#ccc' : '#222'}`,
+          border: `1px solid ${
+            theme.name === 'light'
+              ? theme.tokens.color.Neutrals[40]
+              : theme.tokens.color.Neutrals.Black
+          }`,
           minHeight: '34px',
         })}
         displayShadow={currentListHeight > maxHeight}

packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts

@@ -21,7 +21,10 @@ export const StyledPhoneNumberTitle = styled(Typography, {
 export const StyledLabel = styled(Typography, {
   label: 'StyledLabel',
 })(({ theme }) => ({
-  color: theme.name === 'light' ? '#555' : '#c9cacb',
+  color:
+    theme.name === 'light'
+      ? theme.tokens.color.Neutrals[80]
+      : theme.tokens.color.Neutrals[40],
   fontSize: '.875rem',
   lineHeight: '1',
   marginBottom: '8px',
@@ -34,7 +37,10 @@ export const StyledInputContainer = styled(Box, {
   shouldForwardProp: omittedProps(['isPhoneInputFocused']),
 })<{ isPhoneInputFocused: boolean }>(({ isPhoneInputFocused, theme }) => ({
   backgroundColor: theme.name === 'dark' ? '#343438' : undefined,
-  border: theme.name === 'light' ? '1px solid #ccc' : '1px solid #222',
+  border:
+    theme.name === 'light'
+      ? `1px solid ${theme.tokens.color.Neutrals[40]}`
+      : `1px solid ${theme.tokens.color.Neutrals.Black}`,
   transition: 'border-color 225ms ease-in-out',
   width: 'fit-content',
   ...(isPhoneInputFocused &&
@@ -45,7 +51,7 @@ export const StyledInputContainer = styled(Box, {
         }
       : {
           borderColor: '#3683dc',
-          boxShadow: '0 0 2px 1px #222',
+          boxShadow: `0 0 2px 1px ${theme.tokens.color.Neutrals.Black}`,
         })),
 }));
 

packages/manager/src/features/TopMenu/NotificationMenu/NotificationMenu.tsx

@@ -88,7 +88,9 @@ export const NotificationMenu = () => {
         <IconButton
           sx={(theme) => ({
             ...topMenuIconButtonSx(theme),
-            color: notificationContext.menuOpen ? '#606469' : '#c9c7c7',
+            color: notificationContext.menuOpen
+              ? theme.tokens.color.Neutrals[70]
+              : theme.tokens.color.Neutrals[40],
           })}
           aria-describedby={id}
           aria-haspopup="true"

packages/manager/src/features/TopMenu/SearchBar/SearchBar.styles.ts

@@ -16,7 +16,7 @@ export const StyledIconButton = styled(IconButton, {
   },
   backgroundColor: 'inherit',
   border: 'none',
-  color: '#c9c7c7',
+  color: theme.tokens.color.Neutrals[40],
   cursor: 'pointer',
   padding: theme.spacing(),
   position: 'relative',

packages/manager/src/features/TopMenu/SearchBar/SearchBar.tsx

@@ -323,8 +323,11 @@ const SearchBar = (props: SearchProps) => {
       </StyledIconButton>
       <StyledSearchBarWrapperDiv className={searchActive ? 'active' : ''}>
         <Search
+          sx={(theme) => ({
+            color: theme.tokens.color.Neutrals[40],
+            fontSize: '2rem',
+          })}
           data-qa-search-icon
-          sx={{ color: '#c9cacb', fontSize: '2rem' }}
         />
         <label className="visually-hidden" htmlFor="main-search">
           Main search

packages/manager/src/features/TopMenu/TopMenu.tsx

@@ -39,7 +39,11 @@ export const TopMenu = React.memo((props: TopMenuProps) => {
   return (
     <React.Fragment>
       {loggedInAsCustomer && (
-        <Box bgcolor="pink" padding="1em" textAlign="center">
+        <Box
+          bgcolor={(theme) => theme.tokens.color.Pink[40]}
+          padding="1em"
+          textAlign="center"
+        >
           <Typography
             color={(theme) => theme.tokens.color.Neutrals.Black}
             fontSize="1.2em"

packages/manager/src/features/TopMenu/TopMenuTooltip.tsx

@@ -24,9 +24,9 @@ export const TopMenuTooltip = React.memo(({ children, title }: Props) => {
 
 export const topMenuIconButtonSx = (theme: Theme) => ({
   '&:hover, &:focus': {
-    color: '#606469',
+    color: theme.tokens.color.Neutrals[70],
   },
-  color: '#c9c7c7',
+  color: theme.tokens.color.Neutrals[40],
   height: `50px`,
   [theme.breakpoints.down('sm')]: {
     padding: 1,

packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx

@@ -181,7 +181,9 @@ export const UserMenu = React.memo(() => {
     return matchesSmDown ? undefined : open ? (
       <KeyboardArrowUp sx={sx} />
     ) : (
-      <KeyboardArrowDown sx={{ color: '#9ea4ae', ...sx }} />
+      <KeyboardArrowDown
+        sx={(theme) => ({ color: theme.tokens.color.Neutrals[50], ...sx })}
+      />
     );
   };
 
@@ -288,7 +290,7 @@ export const UserMenu = React.memo(() => {
           )}
           <Box>
             <Heading>My Profile</Heading>
-            <Divider color="#9ea4ae" />
+            <Divider />
             <Grid columnSpacing={2} container rowSpacing={1}>
               <Grid container direction="column" wrap="nowrap" xs={6}>
                 {profileLinks.slice(0, 4).map(renderLink)}
@@ -301,7 +303,7 @@ export const UserMenu = React.memo(() => {
           {hasAccountAccess && (
             <Box>
               <Heading>Account</Heading>
-              <Divider color="#9ea4ae" />
+              <Divider />
               <Stack mt={1} spacing={1.5}>
                 {accountLinks.map((menuLink) =>
                   menuLink.hide ? null : (

packages/ui/src/components/Notice/Notice.styles.ts

@@ -77,7 +77,7 @@ export const useStyles = makeStyles<
   },
   warning: {
     [`& .${classes.icon}`]: {
-      color: '#555',
+      color: theme.tokens.color.Neutrals[80],
     },
     [`&.${classes.important}`]: {
       borderLeftWidth: 32,