From 7380531dd14b65959de120cb97fc9da04159378f Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Thu, 17 Oct 2024 19:17:46 +0530
Subject: [PATCH 1/4] Add global colorTokens to theme and replace one-off
 hardcoded white colors

---
 packages/manager/src/components/Accordion.tsx  |  2 +-
 .../CopyableTextField/CopyableTextField.tsx    |  2 +-
 .../src/components/Placeholder/Placeholder.tsx |  4 ++--
 .../components/PrimaryNav/PrimaryNav.styles.ts |  2 +-
 .../RegionSelect/RegionSelect.styles.ts        |  6 +++---
 .../manager/src/components/Tag/Tag.styles.ts   |  4 +++-
 packages/manager/src/dev-tools/Preferences.tsx |  4 +++-
 .../PaymentDrawer/GooglePayButton.tsx          | 18 ++++++++++--------
 .../features/CancelLanding/CancelLanding.tsx   |  2 +-
 .../Tabs/Marketplace/AppDetailDrawer.tsx       |  2 +-
 .../TwoFactor/QRCodeForm.tsx                   |  2 +-
 .../VPCs/VPCDetail/VPCDetail.styles.ts         |  2 +-
 .../PlansPanel/PlanSelection.styles.ts         |  2 +-
 packages/ui/src/foundations/themes/index.ts    |  3 +++
 packages/ui/src/foundations/themes/light.ts    |  1 +
 15 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/packages/manager/src/components/Accordion.tsx b/packages/manager/src/components/Accordion.tsx
index cdfa7a2e7fc..10d726437a3 100644
--- a/packages/manager/src/components/Accordion.tsx
+++ b/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',
diff --git a/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx b/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx
index 1f2da7ffcd7..a7830174239 100644
--- a/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx
+++ b/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': {
diff --git a/packages/manager/src/components/Placeholder/Placeholder.tsx b/packages/manager/src/components/Placeholder/Placeholder.tsx
index 003c2984029..64cf96a7db7 100644
--- a/packages/manager/src/components/Placeholder/Placeholder.tsx
+++ b/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',
diff --git a/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts b/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts
index 03912e910e5..30479b522c4 100644
--- a/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts
+++ b/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',
diff --git a/packages/manager/src/components/RegionSelect/RegionSelect.styles.ts b/packages/manager/src/components/RegionSelect/RegionSelect.styles.ts
index 8ed59451213..689f7e5c041 100644
--- a/packages/manager/src/components/RegionSelect/RegionSelect.styles.ts
+++ b/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,
   },
 }));
diff --git a/packages/manager/src/components/Tag/Tag.styles.ts b/packages/manager/src/components/Tag/Tag.styles.ts
index 74ab54e1dd9..0b90204c5cd 100644
--- a/packages/manager/src/components/Tag/Tag.styles.ts
+++ b/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,
diff --git a/packages/manager/src/dev-tools/Preferences.tsx b/packages/manager/src/dev-tools/Preferences.tsx
index de25a3a0216..ba94111b6a6 100644
--- a/packages/manager/src/dev-tools/Preferences.tsx
+++ b/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
diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/GooglePayButton.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/GooglePayButton.tsx
index f9fdb454989..103b8366ddc 100644
--- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/GooglePayButton.tsx
+++ b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/GooglePayButton.tsx
@@ -1,29 +1,30 @@
-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': {
@@ -31,7 +32,8 @@ const useStyles = makeStyles()((theme: Theme) => ({
       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',
diff --git a/packages/manager/src/features/CancelLanding/CancelLanding.tsx b/packages/manager/src/features/CancelLanding/CancelLanding.tsx
index 74b96cc01ca..4f692688751 100644
--- a/packages/manager/src/features/CancelLanding/CancelLanding.tsx
+++ b/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': {
diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppDetailDrawer.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppDetailDrawer.tsx
index ddbfc43bae3..875bf972789 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppDetailDrawer.tsx
+++ b/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',
diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/QRCodeForm.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/QRCodeForm.tsx
index 79d664307c6..25433fbe675 100644
--- a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/QRCodeForm.tsx
+++ b/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`,
 }));
diff --git a/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.styles.ts b/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.styles.ts
index 7dc1846cbb2..5a05726de28 100644
--- a/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.styles.ts
+++ b/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,
diff --git a/packages/manager/src/features/components/PlansPanel/PlanSelection.styles.ts b/packages/manager/src/features/components/PlansPanel/PlanSelection.styles.ts
index ee20e52388a..c9a4141f952 100644
--- a/packages/manager/src/features/components/PlansPanel/PlanSelection.styles.ts
+++ b/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',
diff --git a/packages/ui/src/foundations/themes/index.ts b/packages/ui/src/foundations/themes/index.ts
index 4a507f9e6b1..5254dbea4fb 100644
--- a/packages/ui/src/foundations/themes/index.ts
+++ b/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;
diff --git a/packages/ui/src/foundations/themes/light.ts b/packages/ui/src/foundations/themes/light.ts
index c7f36351839..24e658064c6 100644
--- a/packages/ui/src/foundations/themes/light.ts
+++ b/packages/ui/src/foundations/themes/light.ts
@@ -240,6 +240,7 @@ export const lightTheme: ThemeOptions = {
   borderColors,
   breakpoints,
   chartTokens: Chart,
+  colorTokens: Color,
   color,
   components: {
     MuiAccordion: {

From 33d6a33670b1445368c2ceadf0def3b2a8fdfc5c Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Thu, 17 Oct 2024 19:32:33 +0530
Subject: [PATCH 2/4] Added changeset: Add global colorTokens to theme and
 replace one-off hardcoded white colors

---
 .../.changeset/pr-11120-upcoming-features-1729173753438.md   | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-11120-upcoming-features-1729173753438.md

diff --git a/packages/manager/.changeset/pr-11120-upcoming-features-1729173753438.md b/packages/manager/.changeset/pr-11120-upcoming-features-1729173753438.md
new file mode 100644
index 00000000000..41910c4409c
--- /dev/null
+++ b/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))

From 6a9961861a2f971bed9c2627362250c5b869c2b2 Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Thu, 17 Oct 2024 19:49:35 +0530
Subject: [PATCH 3/4] replace remaining colors

---
 packages/manager/src/components/TagCell/TagCell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/manager/src/components/TagCell/TagCell.tsx b/packages/manager/src/components/TagCell/TagCell.tsx
index 24c56689188..e03653b4df9 100644
--- a/packages/manager/src/components/TagCell/TagCell.tsx
+++ b/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,

From 2bd4ad5676983ff8eec679285e6b6bfba7b39b59 Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Wed, 23 Oct 2024 16:18:36 +0530
Subject: [PATCH 4/4] Remove optional chaining for this token

---
 packages/manager/src/components/Accordion.tsx                 | 2 +-
 .../src/components/CopyableTextField/CopyableTextField.tsx    | 2 +-
 packages/manager/src/components/Placeholder/Placeholder.tsx   | 4 ++--
 .../manager/src/components/PrimaryNav/PrimaryNav.styles.ts    | 2 +-
 .../src/components/RegionSelect/RegionSelect.styles.ts        | 4 ++--
 packages/manager/src/components/Tag/Tag.styles.ts             | 2 +-
 packages/manager/src/components/TagCell/TagCell.tsx           | 2 +-
 packages/manager/src/dev-tools/Preferences.tsx                | 2 +-
 .../BillingSummary/PaymentDrawer/GooglePayButton.tsx          | 4 ++--
 packages/manager/src/features/CancelLanding/CancelLanding.tsx | 2 +-
 .../Linodes/LinodeCreate/Tabs/Marketplace/AppDetailDrawer.tsx | 2 +-
 .../Profile/AuthenticationSettings/TwoFactor/QRCodeForm.tsx   | 2 +-
 .../manager/src/features/VPCs/VPCDetail/VPCDetail.styles.ts   | 2 +-
 .../features/components/PlansPanel/PlanSelection.styles.ts    | 2 +-
 packages/ui/src/foundations/themes/index.ts                   | 2 +-
 15 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/manager/src/components/Accordion.tsx b/packages/manager/src/components/Accordion.tsx
index 10d726437a3..e3c7133630e 100644
--- a/packages/manager/src/components/Accordion.tsx
+++ b/packages/manager/src/components/Accordion.tsx
@@ -23,7 +23,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
     alignItems: 'center',
     backgroundColor: '#2575d0',
     borderRadius: '50%',
-    color: theme.colorTokens?.Neutrals.White,
+    color: theme.colorTokens.Neutrals.White,
     display: 'flex',
     fontFamily: theme.font.bold,
     fontSize: '0.875rem',
diff --git a/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx b/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx
index a7830174239..6dea1154ba6 100644
--- a/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx
+++ b/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`
-          : `${theme.colorTokens?.Neutrals.White} !important`,
+          : `${theme.colorTokens.Neutrals.White} !important`,
       opacity: theme.name === 'dark' ? 0.5 : 0.8,
     },
     '&& .MuiInput-root': {
diff --git a/packages/manager/src/components/Placeholder/Placeholder.tsx b/packages/manager/src/components/Placeholder/Placeholder.tsx
index 64cf96a7db7..bdfff2a7e72 100644
--- a/packages/manager/src/components/Placeholder/Placeholder.tsx
+++ b/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' ? theme.colorTokens?.Neutrals.White : '#000',
+      fill: theme.name === 'light' ? theme.colorTokens.Neutrals.White : '#000',
     },
     '& .insidePath path': {
       opacity: 0,
       stroke: theme.palette.primary.main,
     },
     '& .outerCircle': {
-      fill: theme.name === 'light' ? theme.colorTokens?.Neutrals.White : '#000',
+      fill: theme.name === 'light' ? theme.colorTokens.Neutrals.White : '#000',
       stroke: theme.bg.offWhite,
     },
     height: '160px',
diff --git a/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts b/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts
index 30479b522c4..2455532add4 100644
--- a/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts
+++ b/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts
@@ -29,7 +29,7 @@ const useStyles = makeStyles<void, 'linkItem'>()(
         opacity: 0,
       },
       alignItems: 'center',
-      color: theme.colorTokens?.Neutrals.White,
+      color: theme.colorTokens.Neutrals.White,
       display: 'flex',
       fontFamily: 'LatoWebBold',
       fontSize: '0.875rem',
diff --git a/packages/manager/src/components/RegionSelect/RegionSelect.styles.ts b/packages/manager/src/components/RegionSelect/RegionSelect.styles.ts
index 689f7e5c041..50369c7f418 100644
--- a/packages/manager/src/components/RegionSelect/RegionSelect.styles.ts
+++ b/packages/manager/src/components/RegionSelect/RegionSelect.styles.ts
@@ -115,10 +115,10 @@ export const StyledChip = styled(Chip)(({ theme }) => ({
   },
   '& .MuiChip-deleteIcon.MuiSvgIcon-root': {
     '&:hover': {
-      backgroundColor: theme.colorTokens?.Neutrals.White,
+      backgroundColor: theme.colorTokens.Neutrals.White,
       color: '#3683dc',
     },
     backgroundColor: '#3683dc',
-    color: theme.colorTokens?.Neutrals.White,
+    color: theme.colorTokens.Neutrals.White,
   },
 }));
diff --git a/packages/manager/src/components/Tag/Tag.styles.ts b/packages/manager/src/components/Tag/Tag.styles.ts
index 0b90204c5cd..582b8f8dde1 100644
--- a/packages/manager/src/components/Tag/Tag.styles.ts
+++ b/packages/manager/src/components/Tag/Tag.styles.ts
@@ -92,7 +92,7 @@ export const StyledDeleteButton = styled(StyledLinkButton, {
   },
   borderBottomRightRadius: 3,
   borderLeft: `1px solid ${
-    theme.name === 'light' ? theme.colorTokens?.Neutrals.White : '#2e3238'
+    theme.name === 'light' ? theme.colorTokens.Neutrals.White : '#2e3238'
   }`,
   borderRadius: 0,
   borderTopRightRadius: 3,
diff --git a/packages/manager/src/components/TagCell/TagCell.tsx b/packages/manager/src/components/TagCell/TagCell.tsx
index e03653b4df9..49b037bf6d4 100644
--- a/packages/manager/src/components/TagCell/TagCell.tsx
+++ b/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: theme.colorTokens?.Neutrals.White,
+    color: theme.colorTokens.Neutrals.White,
   },
   backgroundColor: theme.color.tagButtonBg,
   borderRadius: 0,
diff --git a/packages/manager/src/dev-tools/Preferences.tsx b/packages/manager/src/dev-tools/Preferences.tsx
index ba94111b6a6..9fdd92e2928 100644
--- a/packages/manager/src/dev-tools/Preferences.tsx
+++ b/packages/manager/src/dev-tools/Preferences.tsx
@@ -9,7 +9,7 @@ export const Preferences = () => {
       <h4 style={{ marginBottom: 4 }}>Preferences</h4>
       <a
         href="/profile/settings?preferenceEditor=true"
-        style={{ color: theme.colorTokens?.Neutrals.White }}
+        style={{ color: theme.colorTokens.Neutrals.White }}
       >
         Open preference Modal
         <LinkIcon
diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/GooglePayButton.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/GooglePayButton.tsx
index 103b8366ddc..20f3e00a10c 100644
--- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/GooglePayButton.tsx
+++ b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/GooglePayButton.tsx
@@ -24,7 +24,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
   button: {
     '& svg': {
       color:
-        theme.name === 'light' ? theme.colorTokens?.Neutrals.White : '#616161',
+        theme.name === 'light' ? theme.colorTokens.Neutrals.White : '#616161',
       height: 16,
     },
     '&:hover': {
@@ -33,7 +33,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
     },
     alignItems: 'center',
     backgroundColor:
-      theme.name === 'light' ? '#000' : theme.colorTokens?.Neutrals.White,
+      theme.name === 'light' ? '#000' : theme.colorTokens.Neutrals.White,
     border: 0,
     borderRadius: 4,
     cursor: 'pointer',
diff --git a/packages/manager/src/features/CancelLanding/CancelLanding.tsx b/packages/manager/src/features/CancelLanding/CancelLanding.tsx
index 4f692688751..9056ddbde6a 100644
--- a/packages/manager/src/features/CancelLanding/CancelLanding.tsx
+++ b/packages/manager/src/features/CancelLanding/CancelLanding.tsx
@@ -16,7 +16,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
   root: {
     '& button': {
       backgroundColor: '#00b159',
-      color: theme.colorTokens?.Neutrals.White,
+      color: theme.colorTokens.Neutrals.White,
       marginTop: theme.spacing(8),
     },
     '& h1': {
diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppDetailDrawer.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppDetailDrawer.tsx
index 875bf972789..10fa1e88aed 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppDetailDrawer.tsx
+++ b/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: `${theme.colorTokens?.Neutrals.White} !important`,
+    color: `${theme.colorTokens.Neutrals.White} !important`,
     fontFamily: theme.font.bold,
     fontSize: '2.2rem',
     lineHeight: '2.5rem',
diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/QRCodeForm.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/QRCodeForm.tsx
index 25433fbe675..e2d79add7c6 100644
--- a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/QRCodeForm.tsx
+++ b/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 ${theme.colorTokens?.Neutrals.White}`,
+  border: `5px solid ${theme.colorTokens.Neutrals.White}`,
   display: 'inline-block',
   margin: `${theme.spacing(2)} 0`,
 }));
diff --git a/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.styles.ts b/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.styles.ts
index 5a05726de28..8a9e7640dd2 100644
--- a/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.styles.ts
+++ b/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: theme.colorTokens?.Neutrals.White,
+    color: theme.colorTokens.Neutrals.White,
   },
   color: theme.textColors.linkActiveLight,
   fontFamily: theme.font.normal,
diff --git a/packages/manager/src/features/components/PlansPanel/PlanSelection.styles.ts b/packages/manager/src/features/components/PlansPanel/PlanSelection.styles.ts
index c9a4141f952..0a1970408ea 100644
--- a/packages/manager/src/features/components/PlansPanel/PlanSelection.styles.ts
+++ b/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: theme.colorTokens?.Neutrals.White,
+    color: theme.colorTokens.Neutrals.White,
     marginLeft: theme.spacing(),
     position: 'relative',
     textTransform: 'uppercase',
diff --git a/packages/ui/src/foundations/themes/index.ts b/packages/ui/src/foundations/themes/index.ts
index 5254dbea4fb..757677dd594 100644
--- a/packages/ui/src/foundations/themes/index.ts
+++ b/packages/ui/src/foundations/themes/index.ts
@@ -75,7 +75,7 @@ declare module '@mui/material/styles/createTheme' {
     bg: BgColors;
     borderColors: BorderColors;
     chartTokens: ChartTypes;
-    colorTokens?: ColorTypes; // Global token: theme agnostic
+    colorTokens: ColorTypes; // Global token: theme agnostic
     color: Colors;
     font: Fonts;
     graphs: any;