refactor: [M3-9591] - Cleanup token organization and paths (#11867)

* Initial commit - save progress

* update docs

* feedback @jaalah-akamai

* feedback @jaalah-akamai

* cleanup

* Fix post develop merge

Author: abailly-akamai

docs/development-guide/16-design-tokens.md

@@ -9,7 +9,7 @@ Our design system provides tokens via the `theme.tokens` object, which contains
 theme.tokens.spacing.S16  // "1rem"
 
 // Accessing typography tokens
-theme.tokens.typography.Heading.Xxl  // "800 1.625rem/2rem 'Nunito Sans'"
+theme.tokens.alias.Typography.Heading.Xxl  // "800 1.625rem/2rem 'Nunito Sans'"
 ```
 
 ### ⚠️ Warning: Global vs. Theme-Sensitive Tokens
@@ -21,9 +21,9 @@ theme.tokens.typography.Heading.Xxl  // "800 1.625rem/2rem 'Nunito Sans'"
 <Paper sx={(theme) => ({ backgroundColor: theme.tokens.color.Neutral[5] })}>
 
 // ✅ Correct: Using alias (semantic) color tokens
-<Paper sx={(theme) => ({ backgroundColor: theme.tokens.content.Background.Normal })}>
+<Paper sx={(theme) => ({ backgroundColor: theme.tokens.alias.Content.Background.Normal })}>
 
-<Paper sx={(theme) => ({ backgroundColor: theme.semanticTokens.textColors.primary })}>
+<Paper sx={(theme) => ({ backgroundColor: theme.tokens.alias.Content.Text.Primary })}>
 ```
 
 ### Best Practices for Token Usage

packages/manager/src/components/EnhancedNumberInput/EnhancedNumberInput.tsx

@@ -142,7 +142,7 @@ const StyledButton = styled(Button)(({ theme }) => ({
     border: 'none',
   },
   border: 'none',
-  borderRadius: theme.tokens.borderRadius.None,
+  borderRadius: theme.tokens.alias.Radius.Default,
   height: 34,
   minHeight: 'fit-content',
   minWidth: 30,

packages/manager/src/components/IconTextLink/IconTextLink.tsx

@@ -31,7 +31,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
   },
   root: {
     alignItems: 'center',
-    borderRadius: theme.tokens.borderRadius.None,
+    borderRadius: theme.tokens.alias.Radius.Default,
     display: 'flex',
     gap: theme.spacing(2),
     padding: theme.spacing(0.5),

packages/manager/src/components/PaginationFooter/PaginationFooter.tsx

@@ -64,7 +64,7 @@ export const PaginationFooter = (props: Props) => {
     <Box
       sx={{
         background: theme.bg.bgPaper,
-        border: `1px solid ${theme.tokens.table.Row.Border}`,
+        border: `1px solid ${theme.tokens.component.Table.Row.Border}`,
         borderTop: 0,
         ...sx,
       }}

packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts

@@ -16,7 +16,7 @@ export const StyledAkamaiLogo = styled(AkamaiLogo, {
 export const StyledDivider = styled(Divider, {
   label: 'StyledDivider',
 })(({ theme }) => ({
-  borderColor: theme.tokens.border.Normal,
+  borderColor: theme.tokens.alias.Border.Normal,
   margin: 0,
 }));
 
@@ -38,7 +38,7 @@ export const StyledActiveLink = styled(Link, {
   alignItems: 'center',
   cursor: 'pointer',
   display: 'flex',
-  font: theme.tokens.typography.Body.Semibold,
+  font: theme.tokens.alias.Typography.Body.Semibold,
   height: 32,
   minWidth: SIDEBAR_WIDTH,
   padding: `8px 8px 8px 48px`,
@@ -57,11 +57,11 @@ export const StyledPrimaryLinkBox = styled(Box, {
     ? theme.tokens.color.Brand[60]
     : theme.tokens.color.Neutrals['White'],
   display: 'flex',
-  font: theme.tokens.typography.Label.Semibold.S,
+  font: theme.tokens.alias.Typography.Label.Semibold.S,
   transition: theme.transitions.create(['color', 'opacity']),
   width: '100%',
   ...(props.isActiveLink && {
-    font: theme.tokens.typography.Body.Bold,
+    font: theme.tokens.alias.Typography.Body.Bold,
   }),
   ...(props.isCollapsed && {
     opacity: 0,
@@ -80,7 +80,8 @@ export const StyledAccordion = styled(Accordion, {
         fontSize: theme.tokens.font.FontSize.Xxxs,
         // eslint-disable-next-line
         fontWeight: theme.tokens.font.FontWeight.Extrabold,
-        letterSpacing: theme.tokens.typography.Heading.OverlineLetterSpacing,
+        letterSpacing:
+          theme.tokens.alias.Typography.Heading.OverlineLetterSpacing,
         lineHeight: theme.tokens.font.LineHeight.Xxxs,
         paddingLeft: theme.tokens.spacing.S12,
         paddingRight: theme.tokens.spacing.S12,
@@ -101,7 +102,7 @@ export const StyledAccordion = styled(Accordion, {
       },
       alignItems: 'center',
       display: 'flex',
-      font: theme.tokens.typography.Label.Bold.S,
+      font: theme.tokens.alias.Typography.Label.Bold.S,
     },
     '.MuiAccordionDetails-root': {
       padding: 0,
@@ -150,15 +151,15 @@ export const StyledChip = styled(Chip, {
   shouldForwardProp: omittedProps(['isActiveLink']),
 })<{ isActiveLink: boolean }>(({ theme, ...props }) => ({
   backgroundColor: props.isActiveLink
-    ? theme.tokens.sideNavigation.SelectedMenuItem.Label.Background
-    : theme.tokens.sideNavigation.DefaultMenuItem.Label.Background,
+    ? theme.tokens.component.SideNavigation.SelectedMenuItem.Label.Background
+    : theme.tokens.component.SideNavigation.DefaultMenuItem.Label.Background,
   border: !props.isActiveLink
-    ? `1px solid ${theme.tokens.sideNavigation.DefaultMenuItem.Label.Border}`
+    ? `1px solid ${theme.tokens.component.SideNavigation.DefaultMenuItem.Label.Border}`
     : 'none',
   borderRadius: '2px',
   color: props.isActiveLink
-    ? theme.tokens.sideNavigation.SelectedMenuItem.Label.Text
-    : theme.tokens.sideNavigation.DefaultMenuItem.Label.Text,
+    ? theme.tokens.component.SideNavigation.SelectedMenuItem.Label.Text
+    : theme.tokens.component.SideNavigation.DefaultMenuItem.Label.Text,
   marginRight: '12px',
   overflow: 'hidden',
   whiteSpace: 'nowrap',

packages/manager/src/components/PrimaryNav/SideMenu.tsx

@@ -84,7 +84,7 @@ const StyledDrawer = styled(Drawer, {
     overflow: 'hidden',
     position: 'absolute',
     [theme.breakpoints.up('md')]: {
-      borderRight: `1px solid ${theme.tokens.sideNavigation.Border}`,
+      borderRight: `1px solid ${theme.tokens.component.SideNavigation.Border}`,
     },
     transform: 'none',
     transition: 'width linear 100ms, height linear 250ms',

packages/manager/src/components/RegionSelect/RegionOption.tsx

@@ -38,7 +38,7 @@ export const RegionOption = ({
         {item.id === 'global' ? (
           <PublicIcon
             sx={(theme) => ({
-              color: `${theme.tokens.content.Icon.Primary.Active}`,
+              color: `${theme.tokens.alias.Content.Icon.Primary.Active}`,
             })}
             className="public-icon"
           />

packages/manager/src/components/SelectionCard/CardBase.styles.ts

@@ -90,7 +90,7 @@ export const CardBaseSubheading = styled('div', {
   label: 'CardBaseSubheading',
 })<Partial<CardBaseProps>>(({ theme, ...props }) => ({
   color: props.checked
-    ? theme.tokens.content.Text.Primary.Default
+    ? theme.tokens.alias.Content.Text.Primary.Default
     : theme.palette.text.primary,
   fontSize: '0.875rem',
 }));

packages/manager/src/components/Tag/Tag.styles.ts

@@ -68,7 +68,7 @@ export const StyledDeleteButton = styled(StyledLinkButton, {
   label: 'StyledDeleteButton',
 })(({ theme }) => ({
   '& svg': {
-    borderRadius: theme.tokens.borderRadius.None,
+    borderRadius: theme.tokens.alias.Radius.Default,
     color: theme.color.tagIcon,
     height: 15,
     width: 15,
@@ -85,7 +85,7 @@ export const StyledDeleteButton = styled(StyledLinkButton, {
       ? theme.tokens.color.Neutrals.White
       : theme.tokens.color.Neutrals[100]
   }`,
-  borderRadius: theme.tokens.borderRadius.None,
+  borderRadius: theme.tokens.alias.Radius.Default,
   borderTopRightRadius: 3,
   height: 30,
   margin: 0,

packages/manager/src/components/TagCell/TagCell.tsx

@@ -241,7 +241,7 @@ const StyledIconButton = styled(IconButton)(({ theme }) => ({
     color: theme.tokens.color.Neutrals.White,
   },
   backgroundColor: theme.color.tagButtonBg,
-  borderRadius: theme.tokens.borderRadius.None,
+  borderRadius: theme.tokens.alias.Radius.Default,
   color: theme.color.tagIcon,
   height: 30,
   marginLeft: theme.spacing(0.5),