refactor: [M3-9591] - Cleanup token organization and paths

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),

packages/manager/src/features/Account/CloseAccountDialog.tsx

@@ -82,7 +82,7 @@ const CloseAccountDialog = ({ closeDialog, open }: Props) => {
         type: 'AccountSetting',
       }}
       typographyStyleSx={(theme) => ({
-        borderTop: `1px solid ${theme.tokens.border.Normal}`,
+        borderTop: `1px solid ${theme.tokens.alias.Border.Normal}`,
         marginBottom: theme.tokens.spacing.S8,
         marginTop: theme.tokens.spacing.S16,
         paddingTop: theme.tokens.spacing.S16,
@@ -104,7 +104,7 @@ const CloseAccountDialog = ({ closeDialog, open }: Props) => {
       <StyledNoticeWrapper>
         <Notice
           sx={(theme) => ({
-            border: `1px solid ${theme.tokens.action.Negative.Default}`,
+            border: `1px solid ${theme.tokens.alias.Action.Negative.Default}`,
           })}
           important
           spacingBottom={12}

packages/manager/src/features/Account/Quotas/QuotasIncreaseForm.tsx

@@ -116,7 +116,7 @@ export const QuotasIncreaseForm = (props: QuotasIncreaseFormProps) => {
                       endAdornment: (
                         <Typography
                           sx={(theme) => ({
-                            color: theme.tokens.content.Text,
+                            color: theme.tokens.alias.Content.Text,
                             font: theme.font.bold,
                             fontSize: theme.tokens.font.FontSize.Xxxs,
                             mx: 1,
@@ -177,7 +177,7 @@ export const QuotasIncreaseForm = (props: QuotasIncreaseFormProps) => {
           >
             <Stack
               sx={(theme) => ({
-                backgroundColor: theme.tokens.background.Neutral,
+                backgroundColor: theme.tokens.alias.Background.Neutral,
                 p: 2,
               })}
               data-testid="quota-increase-form-preview-content"

packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetail.tsx

@@ -171,17 +171,17 @@ export const StyledAlertChip = styled(Chip, {
   borderRadius?: string;
 }>(({ borderRadius, theme }) => ({
   '& .MuiChip-label': {
-    color: theme.tokens.content.Text.Primary.Default,
+    color: theme.tokens.alias.Content.Text.Primary.Default,
     marginRight: theme.spacing(1),
   },
-  backgroundColor: theme.tokens.background.Normal,
+  backgroundColor: theme.tokens.alias.Background.Normal,
   borderRadius: borderRadius || 0,
   height: theme.spacing(3),
 }));
 
 export const StyledAlertTypography = styled(Typography, {
   label: 'StyledAlertTypography',
 })(({ theme }) => ({
-  color: theme.tokens.content.Text.Primary.Default,
+  color: theme.tokens.alias.Content.Text.Primary.Default,
   fontSize: theme.typography.body1.fontSize,
 }));

packages/manager/src/features/CloudPulse/Alerts/AlertsResources/AlertsResourcesNotice.tsx

@@ -31,7 +31,7 @@ export const AlertsResourcesNotice = React.memo(
       <StyledNotice gap={1} variant="info">
         <Typography
           sx={(theme) => ({
-            fontFamily: theme.tokens.typography.Body.Bold,
+            fontFamily: theme.tokens.alias.Typography.Body.Bold,
           })}
           data-testid="selection_notice"
         >
@@ -54,7 +54,7 @@ export const AlertsResourcesNotice = React.memo(
 export const StyledNotice = styled(Notice, { label: 'StyledNotice' })(
   ({ theme }) => ({
     alignItems: 'center',
-    background: theme.tokens.background.Normal,
+    background: theme.tokens.alias.Background.Normal,
     borderRadius: 1,
     display: 'flex',
     flexWrap: 'nowrap',

packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertInformationActionRow.tsx

@@ -57,7 +57,7 @@ export const AlertInformationActionRow = (
       <TableCell>
         <Typography
           sx={(theme) => ({
-            font: theme.tokens.typography.Label.Regular.S,
+            font: theme.tokens.alias.Typography.Label.Regular.S,
           })}
         >
           {capitalize(type)}

packages/manager/src/features/CloudPulse/Alerts/ContextualView/MetricThreshold.tsx

@@ -16,7 +16,7 @@ export const MetricThreshold = (props: MetricThresholdProps) => {
     return (
       <Typography
         sx={(theme) => ({
-          font: theme.tokens.typography.Label.Regular.S,
+          font: theme.tokens.alias.Typography.Label.Regular.S,
         })}
       >
         -
@@ -31,7 +31,7 @@ export const MetricThreshold = (props: MetricThresholdProps) => {
     return (
       <Typography
         sx={(theme) => ({
-          font: theme.tokens.typography.Label.Regular.S,
+          font: theme.tokens.alias.Typography.Label.Regular.S,
         })}
       >
         {metric}
@@ -48,7 +48,7 @@ export const MetricThreshold = (props: MetricThresholdProps) => {
     <Box alignItems="center" display="flex" gap={1.75}>
       <Typography
         sx={(theme) => ({
-          font: theme.tokens.typography.Label.Regular.S,
+          font: theme.tokens.alias.Typography.Label.Regular.S,
         })}
       >
         {metric}

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/NotificationChannels/AddNotificationChannelDrawer.tsx

@@ -119,7 +119,7 @@ export const AddNotificationChannelDrawer = (
           >
             <Typography
               sx={(theme) => ({
-                color: theme.tokens.content.Text,
+                color: theme.tokens.alias.Content.Text,
               })}
               gutterBottom
               variant="h3"

packages/manager/src/features/CloudPulse/Alerts/EditAlert/EditAlertResourcesConfirmationDialog.tsx

@@ -60,7 +60,7 @@ export const EditAlertResourcesConfirmDialog = React.memo(
       >
         <Typography
           sx={(theme) => ({
-            font: theme.tokens.typography.Body,
+            font: theme.tokens.alias.Typography.Body,
           })}
           variant="body1"
         >

packages/manager/src/features/CloudPulse/Alerts/Utils/AlertsNoticeMessage.tsx

@@ -25,7 +25,7 @@ export const AlertsNoticeMessage = (props: AlertsNoticeProps) => {
       <StyledNotice variant={variant}>
         <Typography
           sx={(theme) => ({
-            fontFamily: theme.tokens.typography.Body.Bold,
+            fontFamily: theme.tokens.alias.Typography.Body.Bold,
           })}
           data-testid="alert_message_notice"
         >

packages/manager/src/features/CloudPulse/Alerts/Utils/utils.ts

@@ -104,7 +104,7 @@ export const getServiceTypeLabel = (
  * @returns The style object for the box used in alert details page
  */
 export const getAlertBoxStyles = (theme: Theme) => ({
-  backgroundColor: theme.tokens.background.Neutral,
+  backgroundColor: theme.tokens.alias.Background.Neutral,
   padding: theme.spacing(3),
 });
 /**

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.style.ts

@@ -46,7 +46,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     '& span': {
       font: theme.font.bold,
     },
-    background: theme.tokens.interaction.Background.Secondary,
+    background: theme.tokens.alias.Interaction.Background.Secondary,
     border: `1px solid ${
       theme.name === 'light'
         ? theme.tokens.color.Neutrals[40]

packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleTable.tsx

@@ -335,8 +335,8 @@ const FirewallRuleTableRow = React.memo((props: FirewallRuleTableRowProps) => {
     },
     ':focus': {
       backgroundColor: isActive
-        ? theme.tokens.background.Neutralsubtle
-        : theme.tokens.background.Normal,
+        ? theme.tokens.alias.Background.Neutralsubtle
+        : theme.tokens.alias.Background.Normal,
     },
     cursor: isActive ? 'grabbing' : 'grab',
     position: 'relative',

packages/manager/src/features/Firewalls/FirewallLanding/PublicTemplateRules.tsx

@@ -16,7 +16,7 @@ export const PublicTemplateRules = () => {
       </Typography>
       <Box
         sx={(theme) => ({
-          backgroundColor: theme.tokens.background.Neutral,
+          backgroundColor: theme.tokens.alias.Background.Neutral,
           marginTop: theme.spacing(2),
           padding: theme.spacing(2),
         })}
@@ -30,7 +30,7 @@ export const PublicTemplateRules = () => {
 };
 
 const templateRuleStyling = (theme: Theme) => ({
-  backgroundColor: theme.tokens.background.Neutral,
+  backgroundColor: theme.tokens.alias.Background.Neutral,
   marginTop: theme.spacing(1),
   padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
 });

packages/manager/src/features/Firewalls/FirewallLanding/VPCTemplateRules.tsx

@@ -21,7 +21,7 @@ export const VPCTemplateRules = () => {
       </Typography>
       <Box
         sx={(theme) => ({
-          backgroundColor: theme.tokens.background.Neutral,
+          backgroundColor: theme.tokens.alias.Background.Neutral,
           marginTop: theme.spacing(2),
           padding: theme.spacing(2),
         })}

packages/manager/src/features/Footer.tsx

@@ -24,7 +24,7 @@ export const Footer = React.memo(() => {
           xs: 'column',
         }}
         sx={(theme) => ({
-          borderTop: `1px solid ${theme.tokens.footer.Border}`,
+          borderTop: `1px solid ${theme.tokens.component.GlobalFooter.Border}`,
           padding: `12px 16px`,
         })}
         textAlign={{
@@ -66,7 +66,7 @@ export const Footer = React.memo(() => {
         >
           <Typography
             sx={(theme) => ({
-              color: theme.tokens.content.Text.Primary.Default,
+              color: theme.tokens.alias.Content.Text.Primary.Default,
             })}
             variant="body1"
           >
@@ -84,7 +84,7 @@ const StyledLink = styled(Link)(({ theme }) => ({
     marginLeft: 0,
   },
   '&:hover': {
-    color: theme.tokens.footer.Link.Hover,
+    color: theme.tokens.component.GlobalFooter.Link.Hover,
   },
-  color: theme.tokens.footer.Link.Default,
+  color: theme.tokens.component.GlobalFooter.Link.Default,
 }));