upcoming: [M3-8755, M3-6700] - Add global colorTokens to theme and replace one-off hardcoded white colors

packages/manager/.changeset/pr-11120-upcoming-features-1729173753438.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add global colorTokens to theme and replace one-off hardcoded white colors ([#11120](https://github.com/linode/manager/pull/11120))

packages/manager/src/components/Accordion.tsx

@@ -23,7 +23,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
     alignItems: 'center',
     backgroundColor: '#2575d0',
     borderRadius: '50%',
-    color: '#fff',
+    color: theme.colorTokens.Neutrals.White,
     display: 'flex',
     fontFamily: theme.font.bold,
     fontSize: '0.875rem',

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

@@ -65,7 +65,7 @@ const StyledTextField = styled(TextField)(({ theme }) => ({
       color:
         theme.name === 'light'
           ? `${theme.palette.text.primary} !important`
-          : '#fff !important',
+          : `${theme.colorTokens.Neutrals.White} !important`,
       opacity: theme.name === 'dark' ? 0.5 : 0.8,
     },
     '&& .MuiInput-root': {

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

@@ -96,14 +96,14 @@ export const Placeholder = (props: PlaceholderProps) => {
       fill: theme.palette.primary.main,
     },
     '& .circle': {
-      fill: theme.name === 'light' ? '#fff' : '#000',
+      fill: theme.name === 'light' ? theme.colorTokens.Neutrals.White : '#000',
     },
     '& .insidePath path': {
       opacity: 0,
       stroke: theme.palette.primary.main,
     },
     '& .outerCircle': {
-      fill: theme.name === 'light' ? '#fff' : '#000',
+      fill: theme.name === 'light' ? theme.colorTokens.Neutrals.White : '#000',
       stroke: theme.bg.offWhite,
     },
     height: '160px',

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

@@ -29,7 +29,7 @@ const useStyles = makeStyles<void, 'linkItem'>()(
         opacity: 0,
       },
       alignItems: 'center',
-      color: '#fff',
+      color: theme.colorTokens.Neutrals.White,
       display: 'flex',
       fontFamily: 'LatoWebBold',
       fontSize: '0.875rem',

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

@@ -106,7 +106,7 @@ export const SelectedIcon = styled(DoneIcon, {
   width: 17,
 }));
 
-export const StyledChip = styled(Chip)(() => ({
+export const StyledChip = styled(Chip)(({ theme }) => ({
   '& .MuiChip-deleteIcon': {
     '& svg': {
       borderRadius: '50%',
@@ -115,10 +115,10 @@ export const StyledChip = styled(Chip)(() => ({
   },
   '& .MuiChip-deleteIcon.MuiSvgIcon-root': {
     '&:hover': {
-      backgroundColor: '#fff',
+      backgroundColor: theme.colorTokens.Neutrals.White,
       color: '#3683dc',
     },
     backgroundColor: '#3683dc',
-    color: '#fff',
+    color: theme.colorTokens.Neutrals.White,
   },
 }));

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

@@ -91,7 +91,9 @@ export const StyledDeleteButton = styled(StyledLinkButton, {
     backgroundColor: theme.color.buttonPrimaryHover,
   },
   borderBottomRightRadius: 3,
-  borderLeft: `1px solid ${theme.name === 'light' ? '#fff' : '#2e3238'}`,
+  borderLeft: `1px solid ${
+    theme.name === 'light' ? theme.colorTokens.Neutrals.White : '#2e3238'
+  }`,
   borderRadius: 0,
   borderTopRightRadius: 3,
   height: 30,

packages/manager/src/components/TagCell/TagCell.tsx

@@ -235,7 +235,7 @@ const StyledTag = styled(Tag, {
 const StyledIconButton = styled(IconButton)(({ theme }) => ({
   '&:hover': {
     backgroundColor: theme.palette.primary.main,
-    color: '#ffff',
+    color: theme.colorTokens.Neutrals.White,
   },
   backgroundColor: theme.color.tagButtonBg,
   borderRadius: 0,

packages/manager/src/dev-tools/Preferences.tsx

@@ -1,13 +1,15 @@
 import LinkIcon from '@mui/icons-material/Link';
+import { useTheme } from '@mui/material';
 import * as React from 'react';
 
 export const Preferences = () => {
+  const theme = useTheme();
   return (
     <>
       <h4 style={{ marginBottom: 4 }}>Preferences</h4>
       <a
         href="/profile/settings?preferenceEditor=true"
-        style={{ color: '#fff' }}
+        style={{ color: theme.colorTokens.Neutrals.White }}
       >
         Open preference Modal
         <LinkIcon

packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/GooglePayButton.tsx

@@ -1,37 +1,39 @@
-import { APIWarning } from '@linode/api-v4/lib/types';
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
-import * as React from 'react';
 import { QueryClient, useQueryClient } from '@tanstack/react-query';
+import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import GooglePayIcon from 'src/assets/icons/payment/gPayButton.svg';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { Tooltip } from 'src/components/Tooltip';
-import { PaymentMessage } from 'src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer';
+import { getPaymentLimits } from 'src/features/Billing/billingUtils';
 import {
   gPay,
   initGooglePaymentInstance,
 } from 'src/features/Billing/GooglePayProvider';
-import { getPaymentLimits } from 'src/features/Billing/billingUtils';
 import { useScript } from 'src/hooks/useScript';
 import { useAccount } from 'src/queries/account/account';
 import { useClientToken } from 'src/queries/account/payment';
 
-import { SetSuccess } from './types';
+import type { SetSuccess } from './types';
+import type { APIWarning } from '@linode/api-v4/lib/types';
+import type { Theme } from '@mui/material/styles';
+import type { PaymentMessage } from 'src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   button: {
     '& svg': {
-      color: theme.name === 'light' ? '#fff' : '#616161',
+      color:
+        theme.name === 'light' ? theme.colorTokens.Neutrals.White : '#616161',
       height: 16,
     },
     '&:hover': {
       opacity: 0.8,
       transition: 'none',
     },
     alignItems: 'center',
-    backgroundColor: theme.name === 'light' ? '#000' : '#fff',
+    backgroundColor:
+      theme.name === 'light' ? '#000' : theme.colorTokens.Neutrals.White,
     border: 0,
     borderRadius: 4,
     cursor: 'pointer',

packages/manager/src/features/CancelLanding/CancelLanding.tsx

@@ -16,7 +16,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
   root: {
     '& button': {
       backgroundColor: '#00b159',
-      color: '#fff',
+      color: theme.colorTokens.Neutrals.White,
       marginTop: theme.spacing(8),
     },
     '& h1': {

packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppDetailDrawer.tsx

@@ -16,7 +16,7 @@ import type { Theme } from '@mui/material/styles';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   appName: {
-    color: '#fff !important',
+    color: `${theme.colorTokens.Neutrals.White} !important`,
     fontFamily: theme.font.bold,
     fontSize: '2.2rem',
     lineHeight: '2.5rem',

packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/QRCodeForm.tsx

@@ -42,7 +42,7 @@ const StyledInstructions = styled(Typography, {
 const StyledQRCodeContainer = styled('div', {
   label: 'StyledQRCodeContainer',
 })(({ theme }) => ({
-  border: `5px solid #fff`,
+  border: `5px solid ${theme.colorTokens.Neutrals.White}`,
   display: 'inline-block',
   margin: `${theme.spacing(2)} 0`,
 }));

packages/manager/src/features/VPCs/VPCDetail/VPCDetail.styles.ts

@@ -9,7 +9,7 @@ export const StyledActionButton = styled(Button, {
 })(({ theme }) => ({
   '&:hover': {
     backgroundColor: theme.color.blue,
-    color: '#fff',
+    color: theme.colorTokens.Neutrals.White,
   },
   color: theme.textColors.linkActiveLight,
   fontFamily: theme.font.normal,

packages/manager/src/features/components/PlansPanel/PlanSelection.styles.ts

@@ -6,7 +6,7 @@ import { TableCell } from 'src/components/TableCell';
 export const StyledChip = styled(Chip, { label: 'StyledChip' })(
   ({ theme }) => ({
     backgroundColor: theme.color.green,
-    color: '#fff',
+    color: theme.colorTokens.Neutrals.White,
     marginLeft: theme.spacing(),
     position: 'relative',
     textTransform: 'uppercase',

packages/ui/src/foundations/themes/index.ts

@@ -7,6 +7,7 @@ import { lightTheme } from './light';
 
 import type {
   ChartTypes,
+  ColorTypes,
   InteractionTypes as InteractionTypesLight,
 } from '@linode/design-language-system';
 import type { InteractionTypes as InteractionTypesDark } from '@linode/design-language-system/themes/dark';
@@ -74,6 +75,7 @@ declare module '@mui/material/styles/createTheme' {
     bg: BgColors;
     borderColors: BorderColors;
     chartTokens: ChartTypes;
+    colorTokens: ColorTypes; // Global token: theme agnostic
     color: Colors;
     font: Fonts;
     graphs: any;
@@ -95,6 +97,7 @@ declare module '@mui/material/styles/createTheme' {
     bg?: DarkModeBgColors | LightModeBgColors;
     borderColors?: DarkModeBorderColors | LightModeBorderColors;
     chartTokens?: ChartTypes;
+    colorTokens?: ColorTypes; // Global token: theme agnostic
     color?: DarkModeColors | LightModeColors;
     font?: Fonts;
     graphs?: any;

packages/ui/src/foundations/themes/light.ts

@@ -240,6 +240,7 @@ export const lightTheme: ThemeOptions = {
   borderColors,
   breakpoints,
   chartTokens: Chart,
+  colorTokens: Color,
   color,
   components: {
     MuiAccordion: {