change: [M3-9434] - Update styles to CDS for create menu (linode#11821)

* change: [M3-9434] - Theme changes to create menu

* update styles to CDS

* Update CreateMenu.styles.ts

* Added changeset: Update styles to CSD for create menu

* Update packages/manager/src/features/TopMenu/CreateMenu/CreateMenu.styles.ts

Co-authored-by: Hussain Khalil <[email protected]>

* Disabling the custom font-weight eslint rule.

---------

Co-authored-by: Hussain Khalil <[email protected]>

Author: cpathipa

packages/manager/.changeset/pr-11821-changed-1741726538918.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Update styles to CSD for create menu ([#11821](https://github.com/linode/manager/pull/11821))

packages/manager/.eslintrc.cjs

@@ -241,7 +241,6 @@ module.exports = {
   rules: {
     '@linode/cloud-manager/deprecate-formik': 'warn',
     '@linode/cloud-manager/no-createLinode': 'off',
-    '@linode/cloud-manager/no-custom-fontWeight': 'error',
     '@typescript-eslint/consistent-type-imports': 'warn',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',

packages/manager/src/features/TopMenu/CreateMenu/CreateMenu.styles.ts

@@ -7,42 +7,46 @@ import Add from 'src/assets/icons/add.svg';
 export const StyledHeading = styled('h3', {
   label: 'StyledHeading',
   shouldForwardProp: omittedProps(['paddingTop']),
-})<{ paddingTop?: boolean }>(({ theme, ...props }) => ({
+})<{ marginTop?: boolean }>(({ theme, ...props }) => ({
   '& svg': {
     height: 20,
     marginRight: theme.spacing(1),
     width: 20,
   },
   alignItems: 'center',
-  color: theme.name === 'dark' ? theme.tokens.color.Neutrals[50] : 'inherit',
+  color: theme.tokens.content.Text.Secondary.Default,
   display: 'flex',
-  font: theme.font.bold,
-  fontSize: '0.7rem',
+  fontSize: theme.tokens.font.FontSize.Xxxs,
+  fontWeight: theme.tokens.font.FontWeight.Extrabold,
   letterSpacing: '1px',
+  lineHeight: theme.tokens.font.LineHeight.Xxxs,
   margin: 0,
   padding: '8px 14px',
-  textTransform: 'uppercase',
+  textTransform: theme.tokens.font.Textcase.Uppercase,
+  backgroundColor: theme.tokens.background.Normal,
   [theme.breakpoints.up('lg')]: {
-    background: 'inherit',
-    padding: `${props.paddingTop ? '16px' : '8px'} 16px 6px 16px`,
+    marginTop: `${props.marginTop ? '12px' : ''}`,
+    padding: `8px 16px 6px 16px`,
   },
 }));
 
 export const StyledMenuItem = styled(MenuItem, {
   label: 'StyledMenuItem',
 })(({ theme }) => ({
+  backgroundColor: theme.tokens.background.Normal,
   padding: '8px 14px',
   // We have to do this because in packages/manager/src/index.css we force underline links
   textDecoration: 'none !important',
   [theme.breakpoints.up('md')]: {
-    padding: '8px 16px',
+    minWidth: '326px',
+    padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
   },
 })) as typeof MenuItem;
 
 export const StyledPaper = styled(Paper, {
   label: 'StyledPaper',
 })(({ theme }) => ({
-  background: theme.bg.appBar,
+  backgroundColor: theme.tokens.background.Normal,
   maxHeight: 500,
   padding: `${theme.spacing(1)} 0`,
   [theme.breakpoints.down('lg')]: {
@@ -69,10 +73,10 @@ export const StyledMenuList = styled(MenuList, {
 export const StyledLinkTypography = styled(Typography, {
   label: 'StyledLinkTypography',
 })(({ theme }) => ({
-  color: theme.color.offBlack,
-  font: theme.font.bold,
-  fontSize: '1rem',
-  lineHeight: '1.4rem',
+  color: theme.tokens.content.Text.Primary.Default,
+  fontSize: theme.tokens.font.FontSize.S,
+  fontWeight: theme.tokens.font.FontWeight.Bold,
+  lineHeight: theme.tokens.font.LineHeight.Xs,
 }));
 
 export const StyledAddIcon = styled(Add, {

packages/manager/src/features/TopMenu/CreateMenu/ProductFamilyGroup.tsx

@@ -27,7 +27,7 @@ export const ProductFamilyGroup = (props: ProductFamilyGroupProps) => {
 
   return (
     <>
-      <StyledHeading paddingTop={productFamily.name === 'Databases'}>
+      <StyledHeading marginTop={productFamily.name === 'Databases'}>
         {productFamily.icon}
         {productFamily.name}
       </StyledHeading>