feat: [M3-7579] - Design Tokens (CDS 2.0)

packages/manager/.changeset/pr-10022-added-1703703204947.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Added Design Tokens (CDS 2.0) ([#10022](https://github.com/linode/manager/pull/10022))

packages/manager/package.json

@@ -18,6 +18,7 @@
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "2.9.11",
     "@linode/api-v4": "*",
+    "@linode/design-language-system": "^2.3.0",
     "@linode/validation": "*",
     "@lukemorales/query-key-factory": "^1.3.4",
     "@mui/icons-material": "^5.14.7",

packages/manager/src/components/ActionMenu/ActionMenu.tsx

@@ -71,10 +71,10 @@ export const ActionMenu = React.memo((props: ActionMenuProps) => {
 
   const sxTooltipIcon = {
     '& :hover': {
-      color: '#4d99f1',
+      color: theme.color.white,
     },
     '&& .MuiSvgIcon-root': {
-      fill: theme.color.disabledText,
+      fill: theme.color.white,
       height: '20px',
       width: '20px',
     },
@@ -89,12 +89,12 @@ export const ActionMenu = React.memo((props: ActionMenuProps) => {
       <IconButton
         sx={(theme) => ({
           ':hover': {
-            backgroundColor: theme.palette.primary.main,
-            color: '#fff',
+            backgroundColor: theme.color.buttonPrimaryHover,
+            color: theme.color.white,
           },
-          backgroundColor: open ? theme.palette.primary.main : undefined,
+          backgroundColor: open ? theme.color.buttonPrimaryHover : undefined,
           borderRadius: 'unset',
-          color: open ? '#fff' : theme.textColors.linkActiveLight,
+          color: open ? theme.color.white : theme.textColors.linkActiveLight,
           height: '100%',
           minWidth: '40px',
           padding: '10px',
@@ -147,15 +147,6 @@ export const ActionMenu = React.memo((props: ActionMenuProps) => {
                 a.onClick();
               }
             }}
-            sx={{
-              '&:hover': {
-                background: '#226dc3',
-              },
-              background: '#3683dc',
-              borderBottom: '1px solid #5294e0',
-              color: '#fff',
-              padding: '10px 10px 10px 16px',
-            }}
             data-qa-action-menu-item={a.title}
             data-testid={a.title}
             disabled={a.disabled}

packages/manager/src/components/BetaChip/BetaChip.test.tsx

@@ -17,7 +17,7 @@ describe('BetaChip', () => {
     const { getByTestId } = renderWithTheme(<BetaChip color="primary" />);
     const betaChip = getByTestId('betaChip');
     expect(betaChip).toBeInTheDocument();
-    expect(betaChip).toHaveStyle('background-color: #3683dc');
+    expect(betaChip).toHaveStyle('background-color: rgb(16, 138, 214)');
   });
 
   it('triggers an onClick callback', () => {

packages/manager/src/components/Breadcrumb/Crumbs.styles.tsx

@@ -4,11 +4,10 @@ import { Typography } from 'src/components/Typography';
 
 export const StyledTypography = styled(Typography, {
   label: 'StyledTypography',
-})(({ theme }) => ({
+})(({}) => ({
   '&:hover': {
     textDecoration: 'underline',
   },
-  color: theme.textColors.tableHeader,
   fontSize: '1.125rem',
   lineHeight: 'normal',
   textTransform: 'capitalize',

packages/manager/src/components/Button/StyledActionButton.ts

@@ -15,10 +15,12 @@ export const StyledActionButton = styled(Button, {
 })(({ theme, ...props }) => ({
   ...(!props.disabled && {
     '&:hover': {
-      backgroundColor: theme.palette.primary.main,
-      color: theme.name === 'dark' ? theme.color.black : theme.color.white,
+      backgroundColor: theme.color.buttonPrimaryHover,
+      color: theme.color.white,
     },
   }),
+  background: 'transparent',
+  color: theme.textColors.linkActiveLight,
   fontFamily: latoWeb.normal,
   fontSize: '14px',
   lineHeight: '16px',

packages/manager/src/components/Button/StyledLinkButton.ts

@@ -10,20 +10,5 @@ import { styled } from '@mui/material/styles';
 export const StyledLinkButton = styled('button', {
   label: 'StyledLinkButton',
 })(({ theme }) => ({
-  '&:disabled': {
-    color: theme.palette.text.disabled,
-    cursor: 'not-allowed',
-  },
-  '&:hover:not(:disabled)': {
-    backgroundColor: 'transparent',
-    color: theme.palette.primary.main,
-    textDecoration: 'underline',
-  },
-  background: 'none',
-  border: 'none',
-  color: theme.textColors.linkActiveLight,
-  cursor: 'pointer',
-  font: 'inherit',
-  minWidth: 0,
-  padding: 0,
+  ...theme.applyLinkStyles,
 }));

packages/manager/src/components/Button/StyledTagButton.ts

@@ -24,11 +24,12 @@ export const StyledTagButton = styled(Button, {
   }),
   ...(!props.disabled && {
     '&:hover, &:focus': {
-      backgroundColor: theme.color.tagButton,
+      backgroundColor: theme.color.tagButtonBg,
       border: 'none',
+      color: theme.color.tagButtonText,
     },
-    backgroundColor: theme.color.tagButton,
-    color: theme.textColors.linkActiveLight,
+    backgroundColor: theme.color.tagButtonBg,
+    color: theme.color.tagButtonText,
   }),
 }));
 

packages/manager/src/components/CollapsibleTable/CollapsibleTable.tsx

@@ -1,5 +1,3 @@
-import Paper from '@mui/material/Paper';
-import TableContainer from '@mui/material/TableContainer';
 import * as React from 'react';
 
 import { Table } from 'src/components/Table';
@@ -25,25 +23,23 @@ export const CollapsibleTable = (props: Props) => {
   const { TableItems, TableRowEmpty, TableRowHead } = props;
 
   return (
-    <TableContainer component={Paper}>
-      <Table aria-label="collapsible table">
-        <TableHead data-qa-table-row="collapsible-table-headers-row">
-          {TableRowHead}
-        </TableHead>
-        <TableBody>
-          {TableItems.length === 0 && TableRowEmpty}
-          {TableItems.map((item) => {
-            return (
-              <CollapsibleRow
-                InnerTable={item.InnerTable}
-                OuterTableCells={item.OuterTableCells}
-                key={item.id}
-                label={item.label}
-              />
-            );
-          })}
-        </TableBody>
-      </Table>
-    </TableContainer>
+    <Table aria-label="collapsible table">
+      <TableHead data-qa-table-row="collapsible-table-headers-row">
+        {TableRowHead}
+      </TableHead>
+      <TableBody>
+        {TableItems.length === 0 && TableRowEmpty}
+        {TableItems.map((item) => {
+          return (
+            <CollapsibleRow
+              InnerTable={item.InnerTable}
+              OuterTableCells={item.OuterTableCells}
+              key={item.id}
+              label={item.label}
+            />
+          );
+        })}
+      </TableBody>
+    </Table>
   );
 };

packages/manager/src/components/ColorPalette/ColorPalette.tsx

@@ -1,12 +1,12 @@
-// eslint-disable-next-line no-restricted-imports
 import { useTheme } from '@mui/material';
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import { Typography } from 'src/components/Typography';
 
+import type { Theme } from '@mui/material/styles';
+
 interface Color {
   alias: string;
   color: string;
@@ -45,7 +45,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
 /**
  * Add a new color to the palette, especially another tint of gray or blue, only after exhausting the option of using an existing color.
  *
- * - Colors used in light mode are located in `foundations/light.ts
+ * - Colors used in light mode are located in `foundations/light.ts`
  * - Colors used in dark mode are located in `foundations/dark.ts`
  *
  * If a color does not exist in the current palette and is only used once, consider applying the color conditionally:
@@ -102,7 +102,7 @@ export const ColorPalette = () => {
     { alias: 'theme.color.drawerBackdrop', color: theme.color.drawerBackdrop },
     { alias: 'theme.color.label', color: theme.color.label },
     { alias: 'theme.color.disabledText', color: theme.color.disabledText },
-    { alias: 'theme.color.tagButton', color: theme.color.tagButton },
+    { alias: 'theme.color.tagButton', color: theme.color.tagButtonBg },
     { alias: 'theme.color.tagIcon', color: theme.color.tagIcon },
   ];
 

packages/manager/src/components/Divider.tsx

@@ -24,13 +24,6 @@ const StyledDivider = styled(_Divider, {
     'dark',
   ]),
 })<DividerProps>(({ theme, ...props }) => ({
-  borderColor: props.dark
-    ? theme.color.border2
-    : props.light
-    ? theme.name === 'light'
-      ? '#e3e5e8'
-      : '#2e3238'
-    : '',
   marginBottom: props.spacingBottom,
   marginTop: props.spacingTop,
 }));

packages/manager/src/components/DocsLink/DocsLink.tsx

@@ -50,13 +50,10 @@ export const DocsLink = (props: DocsLinkProps) => {
 const StyledDocsLink = styled(Link, {
   label: 'StyledDocsLink',
 })(({ theme }) => ({
+  ...theme.applyLinkStyles,
   '& svg': {
     marginRight: theme.spacing(),
   },
-  '&:hover': {
-    color: theme.textColors.linkActiveLight,
-    textDecoration: 'underline',
-  },
   alignItems: 'center',
   display: 'flex',
   fontFamily: theme.font.normal,