refactor: [M3-9031] - Replace one-off hardcoded color values with color tokens pt5

packages/manager/.changeset/pr-11488-tech-stories-1736320081038.md

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

packages/manager/src/components/EnhancedSelect/components/DropdownIndicator.tsx

@@ -6,8 +6,8 @@ export const DropdownIndicator = () => {
   return <StyledKeyboardArrowDown />;
 };
 
-const StyledKeyboardArrowDown = styled(KeyboardArrowDown)(() => ({
-  color: '#aaa !important',
+const StyledKeyboardArrowDown = styled(KeyboardArrowDown)(({ theme }) => ({
+  color: `${theme.tokens.color.Neutrals[50]} !important`,
   height: 28,
   marginRight: '4px',
   marginTop: 0,

packages/manager/src/components/Uploaders/FileUpload.styles.ts

@@ -73,7 +73,9 @@ export const StyledActionsContainer = styled('div', {
 export const useStyles = makeStyles()((theme: Theme) => ({
   barColorPrimary: {
     backgroundColor:
-      theme.name === 'light' ? theme.tokens.color.Brand[30] : '#243142',
+      theme.name === 'light'
+        ? theme.tokens.color.Brand[30]
+        : theme.tokens.color.Brand[100],
   },
   error: {
     '& g': {

packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.tsx

@@ -96,7 +96,7 @@ export const ImageUploader = React.memo((props: Props) => {
 });
 
 const Dropzone = styled('div')<{ active: boolean }>(({ active, theme }) => ({
-  borderColor: 'gray',
+  borderColor: theme.tokens.color.Neutrals[60],
   borderStyle: 'dashed',
   borderWidth: 1,
   display: 'flex',

packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutSummary.styles.ts

@@ -28,12 +28,12 @@ export const StyledNodePoolSummaryBox = styled(Box, {
 
 export const StyledIconButton = styled(IconButton, {
   label: 'StyledIconButton',
-})(() => ({
+})(({ theme }) => ({
   '&:hover': {
-    color: '#6e6e6e',
+    color: theme.tokens.color.Neutrals[70],
   },
   alignItems: 'flex-start',
-  color: '#979797',
+  color: theme.tokens.color.Neutrals[60],
   marginTop: -4,
   padding: 0,
 }));

packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/LinodeSummary.tsx

@@ -122,7 +122,7 @@ const LinodeSummary = (props: Props) => {
           {
             data: metrics,
             format: formatPercentage,
-            legendColor: 'blue',
+            legendColor: theme.graphs.blue,
             legendTitle: 'CPU %',
           },
         ]}
@@ -170,13 +170,13 @@ const LinodeSummary = (props: Props) => {
           {
             data: getMetrics(data.io),
             format: formatNumber,
-            legendColor: 'yellow',
+            legendColor: theme.graphs.yellow,
             legendTitle: 'I/O Rate',
           },
           {
             data: getMetrics(data.swap),
             format: formatNumber,
-            legendColor: 'red',
+            legendColor: theme.graphs.red,
             legendTitle: 'Swap Rate',
           },
         ]}

packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/NetworkGraphs.tsx

@@ -214,25 +214,25 @@ const Graph = (props: GraphProps) => {
         {
           data: metrics.publicIn,
           format,
-          legendColor: 'darkGreen',
+          legendColor: theme.graphs.darkGreen,
           legendTitle: 'Public In',
         },
         {
           data: metrics.publicOut,
           format,
-          legendColor: 'lightGreen',
+          legendColor: theme.graphs.lightGreen,
           legendTitle: 'Public Out',
         },
         {
           data: metrics.privateIn,
           format,
-          legendColor: 'purple',
+          legendColor: theme.graphs.purple,
           legendTitle: 'Private In',
         },
         {
           data: metrics.privateOut,
           format,
-          legendColor: 'yellow',
+          legendColor: theme.graphs.yellow,
           legendTitle: 'Private Out',
         },
       ]}

packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx

@@ -107,7 +107,7 @@ export const TablesPanel = () => {
             {
               data: metrics,
               format: formatNumber,
-              legendColor: 'purple',
+              legendColor: theme.graphs.purple,
               legendTitle: 'Connections',
             },
           ]}
@@ -195,13 +195,13 @@ export const TablesPanel = () => {
             {
               data: getMetrics(trafficIn),
               format: formatBitsPerSecond,
-              legendColor: 'darkGreen',
+              legendColor: theme.graphs.darkGreen,
               legendTitle: 'Traffic In',
             },
             {
               data: getMetrics(trafficOut),
               format: formatBitsPerSecond,
-              legendColor: 'lightGreen',
+              legendColor: theme.graphs.lightGreen,
               legendTitle: 'Traffic Out',
             },
           ]}

packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx

@@ -274,13 +274,13 @@ export const PhoneVerification = ({
                   }))}
                   slotProps={{
                     paper: {
-                      sx: {
-                        border: '1px solid #3683dc',
+                      sx: (theme) => ({
+                        border: `1px solid ${theme.tokens.color.Ultramarine[80]}`,
                         maxHeight: '285px',
                         overflow: 'hidden',
                         textWrap: 'nowrap',
                         width: 'fit-content',
-                      },
+                      }),
                     },
                   }}
                   textFieldProps={{