Replace hardcoded color values with color tokens pt5

linode · Jan 8, 2025 · ce3b5e5 · ce3b5e5
1 parent 3febaa0
commit ce3b5e5
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 21 deletions.
diff --git a/packages/manager/src/components/EnhancedSelect/components/DropdownIndicator.tsx b/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,

diff --git a/packages/manager/src/components/Flag.tsx b/packages/manager/src/components/Flag.tsx
@@ -39,7 +39,7 @@ const getFlagClass = (country: Country | string) => {
 
 const StyledFlag = styled(Box, { label: 'StyledFlag' })(({ theme }) => ({
   boxShadow:
-    theme.palette.mode === 'light' ? `0px 0px 0px 1px #00000010` : undefined,
+    theme.palette.mode === 'light' ? `0px 0px 0px 1px #000000` : undefined,
   fontSize: '1.5rem',
   verticalAlign: 'top',
   width: '1.41rem',

diff --git a/packages/manager/src/components/Uploaders/FileUpload.styles.ts b/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': {

diff --git a/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.tsx b/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',

diff --git a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutSummary.styles.ts b/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,
 }));

diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/LinodeSummary.tsx b/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',
           },
         ]}

diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/NetworkGraphs.tsx b/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',
         },
       ]}

diff --git a/...manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx b/...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',
             },
           ]}

diff --git a/...nager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx b/...nager/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={{