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

* Add design tokens * Updates to status colors * Saving... * Saving... * Version 14 * Update version to v1.0.0 * Added changeset: Added Design Tokens (CDS 2.0) * Update to latest version * Revert * Bump version * Updates to chip palette and update endpoint palette to use darker error color * Remove unnecessary background color for notice story * Update textfields, borders and outlines * Fix dark mode button * Revert input token changes * Revert border tokens and fix marketplace background * Fix darkmode * Dark mode tokens * More dark mode fixes * Update MuiFormHelperText dark mode color * Yarn lock * fix units * Fix disabled buttons * Saving * Saving... * Adjust billing paper * Work in progress * More style updates * Minor * Add feature flag * More updates * Modal close * Nearing the end * update snapshots * Snaclbar and placeholder update * Tefield updates dark theme * Update to menu items * react select placeholder * feedback @dwiley-akamai * feedback * Revert nav hover colors back to Linode green * last feedback bit --------- Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> Co-authored-by: Alban Bailly <abailly@akamai.com>
linode · Jun 24, 2024 · fc680a6 · fc680a6
1 parent 2d6f1d0
commit fc680a6
Show file tree

Hide file tree

Showing 62 changed files with 1,287 additions and 789 deletions.
diff --git a/packages/manager/.changeset/pr-10022-added-1703703204947.md b/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))
diff --git a/packages/manager/package.json b/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",

diff --git a/packages/manager/src/components/ActionMenu/ActionMenu.tsx b/packages/manager/src/components/ActionMenu/ActionMenu.tsx
@@ -1,4 +1,4 @@
-import { IconButton, ListItemText, useTheme } from '@mui/material';
+import { IconButton, ListItemText } from '@mui/material';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import * as React from 'react';
@@ -37,7 +37,6 @@ export interface ActionMenuProps {
  */
 export const ActionMenu = React.memo((props: ActionMenuProps) => {
   const { actionsList, ariaLabel, onOpen } = props;
-  const theme = useTheme();
 
   const menuId = convertToKebabCase(ariaLabel);
   const buttonId = `${convertToKebabCase(ariaLabel)}-button`;
@@ -70,16 +69,6 @@ export const ActionMenu = React.memo((props: ActionMenuProps) => {
   }
 
   const sxTooltipIcon = {
-    '& :hover': {
-      color: '#4d99f1',
-    },
-    '&& .MuiSvgIcon-root': {
-      fill: theme.color.disabledText,
-      height: '20px',
-      width: '20px',
-    },
-
-    color: '#fff',
     padding: '0 0 0 8px',
     pointerEvents: 'all', // Allows the tooltip to be hovered on a disabled MenuItem
   };
@@ -89,12 +78,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',
@@ -122,7 +111,6 @@ export const ActionMenu = React.memo((props: ActionMenuProps) => {
           paper: {
             sx: (theme) => ({
               backgroundColor: theme.palette.primary.main,
-              boxShadow: 'none',
             }),
           },
         }}
@@ -147,15 +135,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}

diff --git a/packages/manager/src/components/BetaChip/BetaChip.test.tsx b/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', () => {

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

diff --git a/packages/manager/src/components/Button/StyledActionButton.ts b/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',

diff --git a/packages/manager/src/components/Button/StyledLinkButton.ts b/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,
 }));
diff --git a/packages/manager/src/components/Button/StyledTagButton.ts b/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,
   }),
 }));
 

diff --git a/packages/manager/src/components/CollapsibleTable/CollapsibleTable.tsx b/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>
   );
 };
diff --git a/packages/manager/src/components/ColorPalette/ColorPalette.test.tsx b/packages/manager/src/components/ColorPalette/ColorPalette.test.tsx
diff --git a/packages/manager/src/components/ColorPalette/ColorPalette.tsx b/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 },
   ];
 

diff --git a/packages/manager/src/components/Divider.tsx b/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,
 }));