pmakode-akamai · Oct 29, 2024 · Oct 28, 2024 · Oct 29, 2024 · Oct 29, 2024 · Oct 29, 2024
diff --git a/packages/manager/.changeset/pr-11171-upcoming-features-1730182630692.md b/packages/manager/.changeset/pr-11171-upcoming-features-1730182630692.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add global `font` and `spacing` tokens to theme and refactor design tokens ([#11171](https://github.com/linode/manager/pull/11171))
diff --git a/packages/manager/src/GoTo.tsx b/packages/manager/src/GoTo.tsx
@@ -42,7 +42,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
     },
     '& .react-select__option--is-focused': {
       backgroundColor: theme.palette.primary.main,
-      color: theme.colorTokens.Neutrals.White,
+      color: theme.tokens.color.Neutrals.White,
     },
     '& .react-select__value-container': {
       '& p': {

diff --git 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.tokens.color.Neutrals.White,
     display: 'flex',
     fontFamily: theme.font.bold,
     fontSize: '0.875rem',

diff --git a/packages/manager/src/components/AkamaiBanner/AkamaiBanner.styles.ts b/packages/manager/src/components/AkamaiBanner/AkamaiBanner.styles.ts
@@ -11,7 +11,7 @@ export const StyledAkamaiLogo = styled(AkamaiLogo, {
   label: 'StyledAkamaiLogo',
 })(({ theme }) => ({
   '& .akamai-logo-icon': {
-    fill: theme.colorTokens.Neutrals.White,
+    fill: theme.tokens.color.Neutrals.White,
   },
   '& .akamai-logo-name': {
     display: 'none',
@@ -21,7 +21,7 @@ export const StyledAkamaiLogo = styled(AkamaiLogo, {
 export const StyledWarningIcon = styled(Warning, {
   label: 'StyledWarningIcon',
 })(({ theme }) => ({
-  color: theme.colorTokens.Neutrals.Black,
+  color: theme.tokens.color.Neutrals.Black,
 }));
 
 export const StyledBanner = styled(Stack, {
@@ -41,10 +41,10 @@ export const StyledBannerLabel = styled(Box, {
 })<{ warning?: boolean }>(({ theme, warning }) => ({
   backgroundColor: warning
     ? theme.palette.warning.dark
-    : theme.colorTokens.Neutrals.Black,
+    : theme.tokens.color.Neutrals.Black,
   color: warning
-    ? theme.colorTokens.Neutrals.Black
-    : theme.colorTokens.Neutrals.White,
+    ? theme.tokens.color.Neutrals.Black
+    : theme.tokens.color.Neutrals.White,
   padding: theme.spacing(2.3),
   [theme.breakpoints.up('sm')]: {
     textWrap: 'nowrap',

diff --git a/packages/manager/src/components/ColorPalette/ColorPalette.tsx b/packages/manager/src/components/ColorPalette/ColorPalette.tsx
@@ -50,7 +50,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
  *
  * If a color does not exist in the current palette and is only used once, consider applying the color conditionally:
  *
- * `theme.name === 'light' ? theme.colorTokens.Neutrals.White : theme.colorTokens.Neutrals.Black`
+ * `theme.name === 'light' ? theme.tokens.color.Neutrals.White : theme.tokens.color.Neutrals.Black`
  */
 export const ColorPalette = () => {
   const { classes } = useStyles();

diff --git 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.tokens.color.Neutrals.White} !important`,
       opacity: theme.name === 'dark' ? 0.5 : 0.8,
     },
     '&& .MuiInput-root': {

diff --git a/packages/manager/src/components/Drawer.tsx b/packages/manager/src/components/Drawer.tsx
@@ -31,7 +31,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
   button: {
     '& :hover, & :focus': {
       backgroundColor: theme.palette.primary.main,
-      color: theme.colorTokens.Neutrals.White,
+      color: theme.tokens.color.Neutrals.White,
     },
     '& > span': {
       padding: 2,

diff --git a/packages/manager/src/components/EnhancedSelect/Select.styles.ts b/packages/manager/src/components/EnhancedSelect/Select.styles.ts
@@ -169,7 +169,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
       },
       '&:hover': {
         '& svg': {
-          color: theme.colorTokens.Neutrals.White,
+          color: theme.tokens.color.Neutrals.White,
         },
         backgroundColor: theme.palette.primary.main,
       },
@@ -202,7 +202,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     },
     '& .react-select__option--is-focused': {
       backgroundColor: theme.palette.primary.main,
-      color: theme.colorTokens.Neutrals.White,
+      color: theme.tokens.color.Neutrals.White,
     },
     '& .react-select__option--is-selected': {
       '&.react-select__option--is-focused': {
@@ -251,7 +251,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     '& .tag': {
       '&:hover': {
         backgroundColor: theme.palette.primary.main,
-        color: theme.colorTokens.Neutrals.White,
+        color: theme.tokens.color.Neutrals.White,
       },
       backgroundColor: theme.bg.lightBlue1,
       color: theme.palette.text.primary,
@@ -377,7 +377,7 @@ export const reactSelectStyles = (theme: Theme) => ({
     },
     '&:hover': {
       '& svg': {
-        color: theme.colorTokens.Neutrals.White,
+        color: theme.tokens.color.Neutrals.White,
       },
       backgroundColor: theme.palette.primary.main,
     },
@@ -408,7 +408,7 @@ export const reactSelectStyles = (theme: Theme) => ({
       return {
         ...optionStyles,
         backgroundColor: theme.palette.primary.main,
-        color: theme.colorTokens.Neutrals.White,
+        color: theme.tokens.color.Neutrals.White,
       };
     }
     if (state.isSelected) {

diff --git a/packages/manager/src/components/ImageSelect/ImageOption.tsx b/packages/manager/src/components/ImageSelect/ImageOption.tsx
@@ -25,18 +25,18 @@ const useStyles = makeStyles()((theme: Theme) => ({
   },
   focused: {
     '& g': {
-      fill: theme.colorTokens.Neutrals.White,
+      fill: theme.tokens.color.Neutrals.White,
     },
     backgroundColor: theme.palette.primary.main,
-    color: theme.colorTokens.Neutrals.White,
+    color: theme.tokens.color.Neutrals.White,
   },
   root: {
     '& *': {
       lineHeight: '1.2em',
     },
     '& g': {
       fill:
-        theme.name === 'dark' ? theme.colorTokens.Neutrals.White : '#888f91',
+        theme.name === 'dark' ? theme.tokens.color.Neutrals.White : '#888f91',
     },
     display: 'flex !important',
     flexDirection: 'row',

diff --git a/packages/manager/src/components/MainContentBanner.tsx b/packages/manager/src/components/MainContentBanner.tsx
@@ -66,7 +66,7 @@ export const MainContentBanner = React.memo(() => {
       sx={(theme) => ({
         alignItems: 'center',
         backgroundColor: theme.bg.mainContentBanner,
-        color: theme.colorTokens.Neutrals.White,
+        color: theme.tokens.color.Neutrals.White,
         display: 'flex',
         justifyContent: 'space-between',
         position: 'sticky',

diff --git a/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx b/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx
@@ -27,7 +27,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
   button: {
     '& :hover, & :focus': {
       backgroundColor: theme.palette.primary.main,
-      color: theme.colorTokens.Neutrals.White,
+      color: theme.tokens.color.Neutrals.White,
     },
     '& > span': {
       padding: 2,

diff --git a/packages/manager/src/components/Notice/Notice.styles.ts b/packages/manager/src/components/Notice/Notice.styles.ts
@@ -16,7 +16,7 @@ export const useStyles = makeStyles<
     borderLeft: `5px solid ${theme.palette.error.dark}`,
   },
   icon: {
-    color: theme.colorTokens.Neutrals.White,
+    color: theme.tokens.color.Neutrals.White,
     left: -25, // This value must be static regardless of theme selection
     position: 'absolute',
   },

diff --git a/packages/manager/src/components/Placeholder/Placeholder.tsx b/packages/manager/src/components/Placeholder/Placeholder.tsx
@@ -98,8 +98,8 @@ export const Placeholder = (props: PlaceholderProps) => {
     '& .circle': {
       fill:
         theme.name === 'light'
-          ? theme.colorTokens.Neutrals.White
-          : theme.colorTokens.Neutrals.Black,
+          ? theme.tokens.color.Neutrals.White
+          : theme.tokens.color.Neutrals.Black,
     },
     '& .insidePath path': {
       opacity: 0,
@@ -108,8 +108,8 @@ export const Placeholder = (props: PlaceholderProps) => {
     '& .outerCircle': {
       fill:
         theme.name === 'light'
-          ? theme.colorTokens.Neutrals.White
-          : theme.colorTokens.Neutrals.Black,
+          ? theme.tokens.color.Neutrals.White
+          : theme.tokens.color.Neutrals.Black,
       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
@@ -29,7 +29,7 @@ const useStyles = makeStyles<void, 'linkItem'>()(
         opacity: 0,
       },
       alignItems: 'center',
-      color: theme.colorTokens.Neutrals.White,
+      color: theme.tokens.color.Neutrals.White,
       display: 'flex',
       fontFamily: 'LatoWebBold',
       fontSize: '0.875rem',
@@ -69,7 +69,7 @@ const useStyles = makeStyles<void, 'linkItem'>()(
           fill: theme.palette.success.dark,
         },
         [`& .${classes.linkItem}`]: {
-          color: theme.colorTokens.Neutrals.White,
+          color: theme.tokens.color.Neutrals.White,
         },
         backgroundImage: 'linear-gradient(98deg, #38584B 1%, #3A5049 166%)',
         border: 'red',

diff --git a/packages/manager/src/components/PromotionalOfferCard/PromotionalOfferCard.tsx b/packages/manager/src/components/PromotionalOfferCard/PromotionalOfferCard.tsx
@@ -18,10 +18,10 @@ const useStyles = makeStyles()((theme: Theme) => ({
   button: {
     '&:hover, &:focus': {
       backgroundColor: '#3f8a4e',
-      color: theme.colorTokens.Neutrals.White,
+      color: theme.tokens.color.Neutrals.White,
     },
     backgroundColor: '#4FAD62',
-    color: theme.colorTokens.Neutrals.White,
+    color: theme.tokens.color.Neutrals.White,
     marginLeft: theme.spacing(2),
     marginRight: theme.spacing(2),
     textAlign: 'center',

diff --git 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.tokens.color.Neutrals.White,
       color: '#3683dc',
     },
     backgroundColor: '#3683dc',
-    color: theme.colorTokens.Neutrals.White,
+    color: theme.tokens.color.Neutrals.White,
   },
 }));
diff --git a/packages/manager/src/components/ShowMore/ShowMore.tsx b/packages/manager/src/components/ShowMore/ShowMore.tsx
@@ -34,7 +34,7 @@ export const ShowMore = <T extends {}>(props: ShowMoreProps<T>) => {
           anchorEl
             ? {
                 backgroundColor: theme.palette.primary.main,
-                color: theme.colorTokens.Neutrals.White,
+                color: theme.tokens.color.Neutrals.White,
               }
             : null
         }
@@ -72,7 +72,7 @@ const StyledChip = styled(Chip)(({ theme }) => ({
   },
   '&:hover': {
     backgroundColor: theme.palette.primary.main,
-    color: theme.colorTokens.Neutrals.White,
+    color: theme.tokens.color.Neutrals.White,
   },
   backgroundColor: theme.bg.lightBlue1,
   fontFamily: theme.font.bold,

diff --git a/packages/manager/src/components/Tag/Tag.styles.ts b/packages/manager/src/components/Tag/Tag.styles.ts
@@ -48,9 +48,9 @@ export const StyledChip = styled(Chip, {
     '& > span': {
       '&:hover, &:focus': {
         backgroundColor: theme.palette.primary.main,
-        color: theme.colorTokens.Neutrals.White,
+        color: theme.tokens.color.Neutrals.White,
       },
-      color: theme.colorTokens.Neutrals.White,
+      color: theme.tokens.color.Neutrals.White,
     },
 
     backgroundColor: theme.palette.primary.main,
@@ -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.tokens.color.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
@@ -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.tokens.color.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
@@ -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.tokens.color.Neutrals.White }}
       >
         Open preference Modal
         <LinkIcon

diff --git a/...nager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/GooglePayButton.tsx b/...nager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/GooglePayButton.tsx
@@ -25,7 +25,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
   button: {
     '& svg': {
       color:
-        theme.name === 'light' ? theme.colorTokens.Neutrals.White : '#616161',
+        theme.name === 'light' ? theme.tokens.color.Neutrals.White : '#616161',
       height: 16,
     },
     '&:hover': {
@@ -35,8 +35,8 @@ const useStyles = makeStyles()((theme: Theme) => ({
     alignItems: 'center',
     backgroundColor:
       theme.name === 'light'
-        ? theme.colorTokens.Neutrals.Black
-        : theme.colorTokens.Neutrals.White,
+        ? theme.tokens.color.Neutrals.Black
+        : theme.tokens.color.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
@@ -16,7 +16,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
   root: {
     '& button': {
       backgroundColor: '#00b159',
-      color: theme.colorTokens.Neutrals.White,
+      color: theme.tokens.color.Neutrals.White,
       marginTop: theme.spacing(8),
     },
     '& h1': {

diff --git a/packages/manager/src/features/Databases/DatabaseCreate/EngineOption.tsx b/packages/manager/src/features/Databases/DatabaseCreate/EngineOption.tsx
@@ -10,7 +10,7 @@ import type { OptionProps } from 'react-select';
 const useStyles = makeStyles()((theme: Theme) => ({
   focused: {
     backgroundColor: theme.palette.primary.main,
-    color: theme.colorTokens.Neutrals.White,
+    color: theme.tokens.color.Neutrals.White,
   },
   root: {
     padding: theme.spacing(1),

diff --git a/...atures/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.style.ts b/...atures/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.style.ts
@@ -46,7 +46,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     '& span': {
       fontFamily: theme.font.bold,
     },
-    background: theme.interactionTokens.Background.Secondary,
+    background: theme.tokens.interaction.Background.Secondary,
     border: `1px solid ${theme.name === 'light' ? '#ccc' : '#222'}`,
     padding: `${theme.spacing(1)} 15px`,
   },

diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/ApplicationPlatform.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/ApplicationPlatform.tsx
@@ -40,7 +40,7 @@ export const ApplicationPlatform = (props: APLProps) => {
           '&&.MuiFormLabel-root.Mui-focused': {
             color:
               theme.name === 'dark'
-                ? theme.colorTokens.Neutrals.White
+                ? theme.tokens.color.Neutrals.White
                 : theme.color.black,
           },
         })}

diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx
@@ -63,7 +63,7 @@ export const HAControlPlane = (props: HAControlPlaneProps) => {
           '&&.MuiFormLabel-root.Mui-focused': {
             color:
               theme.name === 'dark'
-                ? theme.colorTokens.Neutrals.White
+                ? theme.tokens.color.Neutrals.White
                 : theme.color.black,
           },
         })}

diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppDetailDrawer.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppDetailDrawer.tsx
@@ -16,14 +16,14 @@ import type { Theme } from '@mui/material/styles';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   appName: {
-    color: `${theme.colorTokens.Neutrals.White} !important`,
+    color: `${theme.tokens.color.Neutrals.White} !important`,
     fontFamily: theme.font.bold,
     fontSize: '2.2rem',
     lineHeight: '2.5rem',
     textAlign: 'center',
   },
   button: {
-    color: `${theme.colorTokens.Neutrals.White} !important`,
+    color: `${theme.tokens.color.Neutrals.White} !important`,
     margin: theme.spacing(2),
     position: 'absolute',
   },

diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts b/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts
@@ -158,7 +158,7 @@ export const StyledTableCell = styled(TableCell, { label: 'StyledTableCell' })(
       fontSize: 15,
     },
     alignItems: 'center',
-    backgroundColor: theme.interactionTokens.Background.Secondary,
+    backgroundColor: theme.tokens.interaction.Background.Secondary,
     color: theme.textColors.tableStatic,
     display: 'flex',
     fontFamily: '"UbuntuMono", monospace, sans-serif',
@@ -181,7 +181,7 @@ export const StyledCopyTooltip = styled(CopyTooltip, {
 export const StyledGradientDiv = styled('div', { label: 'StyledGradientDiv' })(
   ({ theme }) => ({
     '&:after': {
-      backgroundImage: `linear-gradient(to right,  ${theme.bg.bgAccessRowTransparentGradient}, ${theme.interactionTokens.Background.Secondary});`,
+      backgroundImage: `linear-gradient(to right,  ${theme.bg.bgAccessRowTransparentGradient}, ${theme.tokens.interaction.Background.Secondary});`,
       bottom: 0,
       content: '""',
       height: '100%',