@12-apps/ui 6.33.1 → 6.35.0

package/src/components/navigation/ContextMenu/ContextMenu.tsx

@@ -9,6 +9,8 @@ import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 import React, { cloneElement, isValidElement,useState } from 'react';
 
 import type { ContextMenuItem,ContextMenuProps } from './ContextMenu.types';
+import { absoluteInk, neutralTones, shadowInk, sheen } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 const StyledMenu = styled(Menu, {
   shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'size',
@@ -21,26 +23,26 @@ const StyledMenu = styled(Menu, {
       backgroundColor: alpha(theme.palette.background.paper, 0.85),
       backdropFilter: 'blur(20px)',
       border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
-      boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.12)}`,
+      boxShadow: `0 8px 32px ${shadowInk(theme, 0.12)}`,
     }),
 
     ...(customVariant === 'dark' && {
-      backgroundColor: alpha(theme.palette.grey[900], 0.95),
-      color: theme.palette.common.white,
+      backgroundColor: alpha(neutralTones(theme).inverseSurface, 0.95),
+      color: absoluteInk(theme).white,
       '& .MuiMenuItem-root': {
-        color: theme.palette.common.white,
+        color: absoluteInk(theme).white,
       },
       '& .MuiListItemIcon-root': {
-        color: theme.palette.common.white,
+        color: absoluteInk(theme).white,
       },
       '& .MuiDivider-root': {
-        borderColor: alpha(theme.palette.common.white, 0.12),
+        borderColor: sheen(theme, 0.12),
       },
     }),
 
     ...(size === 'sm' && {
       '& .MuiMenuItem-root': {
-        fontSize: '0.875rem',
+        fontSize: rem(theme, 14),
         minHeight: 32,
         padding: theme.spacing(0.5, 1.5),
       },
@@ -48,7 +50,7 @@ const StyledMenu = styled(Menu, {
 
     ...(size === 'lg' && {
       '& .MuiMenuItem-root': {
-        fontSize: '1.125rem',
+        fontSize: rem(theme, 18),
         minHeight: 48,
         padding: theme.spacing(1.5, 2),
       },
@@ -95,7 +97,7 @@ const StyledMenuItem = styled(MenuItem, {
 
 const MenuHeader = styled(Typography)(({ theme }) => ({
   padding: theme.spacing(1, 2),
-  fontSize: '0.75rem',
+  fontSize: rem(theme, 12),
   fontWeight: 600,
   textTransform: 'uppercase',
   color: theme.palette.text.secondary,
@@ -103,7 +105,7 @@ const MenuHeader = styled(Typography)(({ theme }) => ({
 }));
 
 const ShortcutText = styled(Typography)(({ theme }) => ({
-  fontSize: '0.75rem',
+  fontSize: rem(theme, 12),
   color: theme.palette.text.secondary,
   marginLeft: 'auto',
   paddingLeft: theme.spacing(2),

package/src/components/navigation/DropdownMenu/DropdownMenu.tsx

@@ -12,6 +12,8 @@ import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 import React, { cloneElement, isValidElement,useRef, useState } from 'react';
 
 import type { DropdownMenuItem,DropdownMenuProps } from './DropdownMenu.types';
+import { modeInk, shadowInk, sheen } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 // Resolves every light/dark decision once. The inline version repeated
 // `theme.palette.mode === 'dark' ? … : …` nine times, and two of those had the
@@ -21,7 +23,7 @@ const glassTokens = (theme: Theme) => {
   const isDark = theme.palette.mode === 'dark';
 
   return {
-    edge: isDark ? theme.palette.common.white : theme.palette.common.black,
+    edge: modeInk(theme),
     dropShadowAlpha: isDark ? 0.4 : 0.12,
     insetHighlightAlpha: isDark ? 0.2 : 0.8,
     sheenAlpha: isDark ? 0.1 : 0.8,
@@ -37,9 +39,9 @@ const glassMenuStyles = (theme: Theme): CSSObject => {
     WebkitBackdropFilter: 'blur(24px) saturate(1.8)', // Safari support
     border: `1px solid ${alpha(edge, 0.12)}`,
     boxShadow: [
-      `0 8px 32px ${alpha(theme.palette.common.black, dropShadowAlpha)}`,
+      `0 8px 32px ${shadowInk(theme, dropShadowAlpha)}`,
       `0 0 0 1px ${alpha(edge, 0.05)}`,
-      `inset 0 1px 0 ${alpha(theme.palette.common.white, insetHighlightAlpha)}`,
+      `inset 0 1px 0 ${sheen(theme, insetHighlightAlpha)}`,
     ].join(', '),
     // Enhanced glass morphism with subtle gradient overlay
     '&::before': {
@@ -49,7 +51,7 @@ const glassMenuStyles = (theme: Theme): CSSObject => {
       left: 0,
       right: 0,
       bottom: 0,
-      background: `linear-gradient(135deg, ${alpha(theme.palette.common.white, sheenAlpha)} 0%, transparent 50%)`,
+      background: `linear-gradient(135deg, ${sheen(theme, sheenAlpha)} 0%, transparent 50%)`,
       borderRadius: 'inherit',
       pointerEvents: 'none',
       zIndex: 1,
@@ -72,13 +74,13 @@ const StyledMenu = styled(Menu, {
     ...(customVariant === 'glass' && glassMenuStyles(theme)),
 
     ...(customVariant === 'minimal' && {
-      boxShadow: `0 2px 8px ${alpha(theme.palette.common.black, 0.08)}`,
+      boxShadow: `0 2px 8px ${shadowInk(theme, 0.08)}`,
       border: `1px solid ${theme.palette.divider}`,
     }),
 
     ...(size === 'sm' && {
       '& .MuiMenuItem-root': {
-        fontSize: '0.875rem',
+        fontSize: rem(theme, 14),
         minHeight: 32,
         padding: theme.spacing(0.75, 2),
       },
@@ -86,7 +88,7 @@ const StyledMenu = styled(Menu, {
 
     ...(size === 'lg' && {
       '& .MuiMenuItem-root': {
-        fontSize: '1.125rem',
+        fontSize: rem(theme, 18),
         minHeight: 48,
         padding: theme.spacing(1.5, 3),
       },
@@ -131,7 +133,7 @@ const StyledMenuItem = styled(MenuItem, {
 
 const MenuHeader = styled(Typography)(({ theme }) => ({
   padding: theme.spacing(1, 2),
-  fontSize: '0.75rem',
+  fontSize: rem(theme, 12),
   fontWeight: 600,
   textTransform: 'uppercase',
   color: theme.palette.text.secondary,
@@ -139,7 +141,7 @@ const MenuHeader = styled(Typography)(({ theme }) => ({
 }));
 
 const ShortcutText = styled(Typography)(({ theme }) => ({
-  fontSize: '0.75rem',
+  fontSize: rem(theme, 12),
   color: theme.palette.text.secondary,
   marginLeft: 'auto',
   paddingLeft: theme.spacing(2),

package/src/components/navigation/NavigationMenu/NavigationMenu.shell.tsx

@@ -6,6 +6,7 @@ import type { CSSProperties, PropsWithChildren, ReactNode } from 'react';
 import React from 'react';
 
 import { slideIn } from './NavigationMenu.styles';
+import { shadowInk } from '../../../tokens/ink';
 
 const megaMenuSlide = keyframes`
   from {
@@ -35,7 +36,7 @@ const NavigationContainer = styled(Box, {
       background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.95)} 0%, ${alpha(theme.palette.background.paper, 0.98)} 100%)`,
       backdropFilter: 'blur(10px)',
       borderRadius: theme.spacing(2),
-      boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.08)}`,
+      boxShadow: `0 8px 32px ${shadowInk(theme, 0.08)}`,
     }),
   }),
   ...(variant === 'vertical' && {
@@ -47,7 +48,7 @@ const NavigationContainer = styled(Box, {
       background: `linear-gradient(180deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
       backdropFilter: 'blur(12px)',
       borderRadius: theme.spacing(2),
-      boxShadow: `0 12px 40px ${alpha(theme.palette.common.black, 0.1)}`,
+      boxShadow: `0 12px 40px ${shadowInk(theme, 0.1)}`,
       '&::before': {
         content: '""',
         position: 'absolute',
@@ -68,7 +69,7 @@ const NavigationContainer = styled(Box, {
       backdropFilter: 'blur(15px)',
       borderRadius: theme.spacing(3),
       overflow: 'hidden',
-      boxShadow: `0 20px 60px ${alpha(theme.palette.common.black, 0.12)}`,
+      boxShadow: `0 20px 60px ${shadowInk(theme, 0.12)}`,
     }),
   }),
 }));
@@ -143,7 +144,7 @@ const MegaMenuSection = styled(Box)(({ theme }) => ({
   padding: theme.spacing(3),
   borderRadius: theme.spacing(2),
   background: `linear-gradient(145deg, ${theme.palette.background.paper} 0%, ${alpha(theme.palette.background.default, 0.9)} 100%)`,
-  boxShadow: `0 10px 30px ${alpha(theme.palette.common.black, 0.08)}`,
+  boxShadow: `0 10px 30px ${shadowInk(theme, 0.08)}`,
   border: `1px solid ${alpha(theme.palette.divider, 0.08)}`,
   position: 'relative',
   overflow: 'hidden',
@@ -173,7 +174,7 @@ const MegaMenuSection = styled(Box)(({ theme }) => ({
 
   '&:hover': {
     transform: 'translateY(-4px)',
-    boxShadow: `0 15px 40px ${alpha(theme.palette.common.black, 0.12)}`,
+    boxShadow: `0 15px 40px ${shadowInk(theme, 0.12)}`,
     transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
   },
 

package/src/components/navigation/NavigationMenu/NavigationMenu.styles.ts

@@ -1,5 +1,8 @@
 import { alpha, keyframes } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
+import { rem } from '../../../tokens/relative';
+
+import { EFFECT_GLOW } from '../../../tokens/ink.core';
 
 export const slideIn = keyframes`
   from {
@@ -14,25 +17,25 @@ export const slideIn = keyframes`
 
 export const pulseGlow = keyframes`
   0% {
-    box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.4);
+    box-shadow: 0 0 0 0 ${alpha(EFFECT_GLOW.muiBlue, 0.4)};
   }
   70% {
-    box-shadow: 0 0 0 10px rgba(25, 118, 210, 0);
+    box-shadow: 0 0 0 10px ${alpha(EFFECT_GLOW.muiBlue, 0)};
   }
   100% {
-    box-shadow: 0 0 0 0 rgba(25, 118, 210, 0);
+    box-shadow: 0 0 0 0 ${alpha(EFFECT_GLOW.muiBlue, 0)};
   }
 `;
 
 const SIZE_STYLES: Record<string, (theme: Theme) => CSSObject> = {
   sm: (theme) => ({
     padding: theme.spacing(1, 1.5),
-    fontSize: '0.875rem',
+    fontSize: rem(theme, 14),
     '& .MuiListItemIcon-root': { transform: 'scale(0.85)' },
   }),
   lg: (theme) => ({
     padding: theme.spacing(2, 2.5),
-    fontSize: '1.125rem',
+    fontSize: rem(theme, 18),
     '& .MuiListItemIcon-root': { transform: 'scale(1.15)' },
   }),
 };

package/src/components/navigation/NavigationMenu/NavigationMenuItem.tsx

@@ -16,6 +16,8 @@ import React, {  } from 'react';
 import { useMenuItemState } from './NavigationMenuItem.hooks';
 import { navItemButtonStyles, pulseGlow } from './NavigationMenu.styles';
 import type { NavigationMenuItem } from './NavigationMenu.types';
+import { onMedia, shadowInk, uiInk } from '../../../tokens/ink';
+import { sxRem } from '../../../tokens/relative';
 
 const StyledListItem = styled(ListItem, {
   shouldForwardProp: (prop) => !['variant', 'active', 'size', 'level'].includes(prop as string) })<{ variant?: string; active?: boolean; size?: string; level?: number }>(
@@ -77,7 +79,7 @@ const MenuItemPopover: React.FC<{
           pointerEvents: 'auto',
           mt: 0.5,
           borderRadius: 2,
-          boxShadow: (theme) => `0 12px 40px ${alpha(theme.palette.common.black, 0.15)}`,
+          boxShadow: (theme) => `0 12px 40px ${shadowInk(theme, 0.15)}`,
           border: (theme) => `1px solid ${alpha(theme.palette.divider, 0.1)}`,
           background: (theme) =>
             `linear-gradient(145deg, ${theme.palette.background.paper} 0%, ${alpha(theme.palette.background.default, 0.95)} 100%)`,
@@ -149,11 +151,12 @@ const MenuItemLabel: React.FC<{
             height: 20,
             px: 0.75,
             borderRadius: '10px',
-            fontSize: '0.75rem',
+            fontSize: sxRem(12),
             fontWeight: 600,
-            color: '#fff',
-            background: 'linear-gradient(135deg, #ff5252 0%, #ff1744 100%)',
-            boxShadow: '0 2px 8px rgba(255, 23, 68, 0.4)',
+            color: (theme) => onMedia(theme),
+            background: (theme) =>
+              `linear-gradient(135deg, ${uiInk(theme).attention.from} 0%, ${uiInk(theme).attention.to} 100%)`,
+            boxShadow: (theme) => `0 2px 8px ${alpha(uiInk(theme).attention.glow, 0.4)}`,
             animation:
               typeof item.badge === 'number' && item.badge > 0
                 ? `${pulseGlow} 2s infinite`
@@ -230,7 +233,7 @@ const MenuItemContent: React.FC<{
               justifyContent: 'center',
               transition: 'all 0.3s ease',
               '& svg': {
-                filter: item.active ? 'drop-shadow(0 2px 8px rgba(0,0,0,0.15))' : 'none',
+                filter: (theme) => (item.active ? `drop-shadow(0 2px 8px ${shadowInk(theme, 0.15)})` : 'none'),
                 transition: 'all 0.3s ease' } }}
           >
             <Grow in={true} timeout={600}>

package/src/components/navigation/Pagination/Pagination.styles.ts

@@ -1,14 +1,15 @@
 import { alpha } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
+import { rem } from '../../../tokens/relative';
 
 const ITEM_SIZE_STYLES: Record<string, (theme: Theme) => CSSObject> = {
   sm: (theme) => ({
-      fontSize: '0.875rem',
+      fontSize: rem(theme, 14),
       minWidth: 28,
       height: 28,
       padding: theme.spacing(0.25, 0.5) }),
   lg: (theme) => ({
-      fontSize: '1.125rem',
+      fontSize: rem(theme, 18),
       minWidth: 44,
       height: 44,
       padding: theme.spacing(1, 1.5) }) };

package/src/components/navigation/Tabs/Tabs.styles.ts

@@ -1,11 +1,12 @@
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 import { alpha } from '@mui/material/styles/index.js';
+import { rem } from '../../../tokens/relative';
 
 const sizeStyles = (theme: Theme, size?: string): CSSObject => ({
     ...(size === 'sm' && {
       minHeight: 32,
       '& .MuiTab-root': {
-        fontSize: '0.875rem',
+        fontSize: rem(theme, 14),
         minHeight: 32,
         padding: theme.spacing(0.5, 1.5),
       },
@@ -14,7 +15,7 @@ const sizeStyles = (theme: Theme, size?: string): CSSObject => ({
     ...(size === 'lg' && {
       minHeight: 56,
       '& .MuiTab-root': {
-        fontSize: '1.125rem',
+        fontSize: rem(theme, 18),
         minHeight: 56,
         padding: theme.spacing(1.5, 3),
       },

package/src/components/navigation/Tabs/Tabs.tsx

@@ -10,6 +10,7 @@ import React from 'react';
 import { CustomTabPanel } from './TabsPanel';
 import { tabsRootStyles } from './Tabs.styles';
 import type { TabItem, TabsProps } from './Tabs.types';
+import { rem } from '../../../tokens/relative';
 
 const StyledTabs = styled(MuiTabs, {
   shouldForwardProp: (prop) => !['customVariant', 'size', 'showDividers'].includes(prop as string) })<{ customVariant?: string; size?: string; showDividers?: boolean }>(
@@ -32,11 +33,11 @@ const CloseButton = styled(Box)(({ theme }) => ({
     backgroundColor: alpha(theme.palette.error.main, 0.1),
     color: theme.palette.error.main } }));
 
-const BadgeWrapper = styled(Badge)(() => ({
+const BadgeWrapper = styled(Badge)(({ theme }) => ({
   '& .MuiBadge-badge': {
     right: -6,
     top: 4,
-    fontSize: '0.75rem',
+    fontSize: rem(theme, 12),
     minWidth: 16,
     height: 16,
     padding: 0 } }));

package/src/components/typography/Blockquote/Blockquote.tsx

@@ -6,14 +6,13 @@ import { alpha, styled } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type { BlockquoteProps } from './Blockquote.types';
+import { absoluteInk, controlNeutral, neutralTones } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 const getColorFromTheme = (theme: Theme, color: string) => {
   if (color === 'neutral') {
-    return {
-      main: theme.palette.grey?.[700] || '#616161',
-      light: theme.palette.grey?.[500] || '#9e9e9e',
-      dark: theme.palette.grey?.[800] || '#424242',
-    };
+    const { main, light, dark } = controlNeutral(theme);
+    return { main, light, dark };
   }
 
   const colorMap: Record<string, typeof theme.palette.primary> = {
@@ -41,7 +40,7 @@ const StyledBlockquote = styled('blockquote', {
     padding: 0,
     position: 'relative' as const,
     fontFamily: theme.typography.body1.fontFamily,
-    fontSize: '1.125rem',
+    fontSize: rem(theme, 18),
     lineHeight: 1.6,
     fontStyle: 'italic',
     color: theme.palette.text.primary,
@@ -65,9 +64,9 @@ const StyledBlockquote = styled('blockquote', {
         background: `linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.light})`,
         borderRadius: theme.shape.borderRadius * 2,
         padding: '2px',
-        WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+        WebkitMask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,
         WebkitMaskComposite: 'exclude',
-        mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+        mask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,
         maskComposite: 'exclude',
       },
     };
@@ -80,7 +79,7 @@ const StyledBlockquote = styled('blockquote', {
       backgroundColor:
         theme.palette.mode === 'dark'
           ? alpha(theme.palette.background.paper, 0.8)
-          : alpha(theme.palette.grey[50], 0.95),
+          : alpha(neutralTones(theme).canvas, 0.95),
       backdropFilter: theme.palette.mode === 'dark' ? 'blur(10px)' : 'none',
       border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
       borderRadius: theme.shape.borderRadius * 2,
@@ -107,7 +106,7 @@ const QuoteIcon = styled(FormatQuote)<{ customColor: string }>(({ theme, customC
     position: 'absolute',
     top: theme.spacing(1),
     left: theme.spacing(1),
-    fontSize: '2rem',
+    fontSize: rem(theme, 32),
     opacity: 0.3,
     transform: 'rotate(180deg)',
     color: colorPalette.main,
@@ -123,12 +122,12 @@ const CitationContainer = styled(Box)(({ theme }) => ({
 
 const AuthorName = styled(Typography)(({ theme }) => ({
   fontWeight: 600,
-  fontSize: '0.875rem',
+  fontSize: rem(theme, 14),
   marginBottom: theme.spacing(0.5),
 }));
 
-const SourceName = styled(Typography)(() => ({
-  fontSize: '0.75rem',
+const SourceName = styled(Typography)(({ theme }) => ({
+  fontSize: rem(theme, 12),
   opacity: 0.7,
 }));
 

package/src/components/typography/Code/Code.tsx

@@ -7,6 +7,8 @@ import { alpha, styled } from '@mui/material/styles/index.js';
 import React, { useState } from 'react';
 
 import type { CodeProps } from './Code.types';
+import { modeInk, neutralTones } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 const StyledCodeContainer = styled(Box, {
   shouldForwardProp: (prop) =>
@@ -19,17 +21,17 @@ const StyledCodeContainer = styled(Box, {
 }>(({ theme, customVariant = 'inline', customSize = 'md', copyable }) => {
   // Size mapping
   const sizeMap = {
-    xs: { fontSize: '0.75rem', padding: '2px 4px' },
-    sm: { fontSize: '0.8125rem', padding: '3px 6px' },
-    md: { fontSize: '0.875rem', padding: '4px 8px' },
-    lg: { fontSize: '1rem', padding: '6px 12px' },
+    xs: { fontSize: rem(theme, 12), padding: '2px 4px' },
+    sm: { fontSize: rem(theme, 13), padding: '3px 6px' },
+    md: { fontSize: rem(theme, 14), padding: '4px 8px' },
+    lg: { fontSize: rem(theme, 16), padding: '6px 12px' },
   };
 
   const blockSizeMap = {
-    xs: { fontSize: '0.75rem', padding: '8px 12px' },
-    sm: { fontSize: '0.8125rem', padding: '12px 16px' },
-    md: { fontSize: '0.875rem', padding: '16px 20px' },
-    lg: { fontSize: '1rem', padding: '20px 24px' },
+    xs: { fontSize: rem(theme, 12), padding: '8px 12px' },
+    sm: { fontSize: rem(theme, 13), padding: '12px 16px' },
+    md: { fontSize: rem(theme, 14), padding: '16px 20px' },
+    lg: { fontSize: rem(theme, 16), padding: '20px 24px' },
   };
 
   const baseStyles = {
@@ -55,10 +57,10 @@ const StyledCodeContainer = styled(Box, {
       display: 'block',
       backgroundColor:
         theme.palette.mode === 'dark'
-          ? alpha(theme.palette.grey[900], 0.95)
-          : alpha(theme.palette.grey[100], 0.95),
+          ? alpha(neutralTones(theme).inverseSurface, 0.95)
+          : alpha(neutralTones(theme).surface, 0.95),
       color:
-        theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.text.primary,
+        theme.palette.mode === 'dark' ? modeInk(theme) : theme.palette.text.primary,
       border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
       overflow: 'auto',
       whiteSpace: 'pre' as const,
@@ -116,11 +118,11 @@ const CopyButton = styled(IconButton)(({ theme }) => ({
     backgroundColor:
       theme.palette.mode === 'dark'
         ? alpha(theme.palette.background.paper, 0.9)
-        : theme.palette.grey[100],
+        : neutralTones(theme).surface,
     transform: 'scale(1.05)',
   },
   '& .MuiSvgIcon-root': {
-    fontSize: 16,
+    fontSize: rem(theme, 16),
   },
 }));
 
@@ -128,7 +130,7 @@ const LanguageLabel = styled(Box)(({ theme }) => ({
   position: 'absolute',
   top: theme.spacing(1),
   left: theme.spacing(2),
-  fontSize: '0.75rem',
+  fontSize: rem(theme, 12),
   fontWeight: 500,
   color: alpha(theme.palette.text.primary, 0.6),
   backgroundColor:

package/src/components/typography/Heading/Heading.metrics.ts

@@ -1,5 +1,6 @@
 import type { HeadingWeight } from './Heading.base';
 import { HEADING_SCALE, type HeadingLevel } from '../../../tokens/heading-scale';
+import { NEUTRAL_RAMP } from '../../../tokens/ink.core';
 import { FONT_WEIGHTS, type UiTheme } from '../../../tokens/theme';
 import type { ColorValue } from '../../../tokens/vocabulary';
 
@@ -77,7 +78,7 @@ export function headingGradientStops(theme: UiTheme, color: ColorValue): [string
     case 'secondary':
       return [theme.palette.secondary.main, theme.palette.primary.main];
     case 'neutral':
-      return [theme.palette.grey[NEUTRAL_GRADIENT_STEPS.from], theme.palette.grey[NEUTRAL_GRADIENT_STEPS.to]];
+      return [NEUTRAL_RAMP[NEUTRAL_GRADIENT_STEPS.from], NEUTRAL_RAMP[NEUTRAL_GRADIENT_STEPS.to]];
     default:
       return [theme.palette[color].light, theme.palette[color].dark];
   }

package/src/components/typography/Heading/Heading.styles.ts

@@ -3,11 +3,11 @@ import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 import {
   HEADING_DEFAULT_COLOR,
   HEADING_DEFAULT_WEIGHT,
-  NEUTRAL_GRADIENT_STEPS,
   headingGradient,
   headingWeight,
   stepOf,
 } from './Heading.metrics';
+import { neutralTones } from '../../../tokens/ink';
 import { headingMetrics } from '../../../tokens/typography';
 import type { ColorValue } from '../../../tokens/scales';
 
@@ -54,12 +54,9 @@ const GRADIENT_STOPS: Record<ColorValue, (theme: Theme) => [string, string]> = {
   warning: (theme) => [theme.palette.warning.light, theme.palette.warning.dark],
   info: (theme) => [theme.palette.info.light, theme.palette.info.dark],
   danger: (theme) => [theme.palette.error.light, theme.palette.error.dark],
-  // The grey ramp has no light/dark pair, and every stop on it is
-  // `string | undefined` under `noUncheckedIndexedAccess`.
-  neutral: (theme) => [
-    theme.palette.grey[NEUTRAL_GRADIENT_STEPS.from] ?? '#9e9e9e',
-    theme.palette.grey[NEUTRAL_GRADIENT_STEPS.to] ?? '#212121',
-  ],
+  // The grey ramp has no light/dark pair: the muted tone into the darkest
+  // (`NEUTRAL_GRADIENT_STEPS`, 500 into 900).
+  neutral: (theme) => [neutralTones(theme).muted, neutralTones(theme).inverseSurface],
 };
 
 const gradientFor = (theme: Theme, color: ColorValue) => {

package/src/components/typography/Paragraph/Paragraph.tsx

@@ -16,7 +16,8 @@ import {
 } from './Paragraph.metrics';
 import type { ParagraphProps } from './Paragraph.types';
 import { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
-import { px } from '../../../tokens/theme';
+import { rem } from '../../../tokens/relative';
+import type { UiTypeStep } from '../../../tokens/theme';
 
 const getColorFromTheme = (theme: Theme, color: string) => {
   if (color === 'neutral') {
@@ -37,17 +38,20 @@ const getColorFromTheme = (theme: Theme, color: string) => {
 
 // Derived from the shared metrics, not restated: the native `Paragraph` reads
 // the same table, so the two renderers cannot disagree on a size.
-const sizeMap: Record<string, { fontSize: string; lineHeight: number }> = Object.fromEntries(
-  Object.entries(PARAGRAPH_SIZES).map(([size, step]) => [
-    size,
-    { fontSize: px(step.fontSize), lineHeight: step.lineHeight },
-  ]),
-);
+// The table keeps the design px; the size is converted where it is read.
+const sizeMap: Readonly<Record<string, UiTypeStep | undefined>> = PARAGRAPH_SIZES;
+
+const sizeStyles = (theme: Theme, customSize: string): CSSObject => {
+  const step = sizeMap[customSize];
+  return step ? { fontSize: rem(theme, step.fontSize), lineHeight: step.lineHeight } : {};
+};
 
 // `lead` and `small` shrink or grow relative to the scale, but only at the
 // default size — an explicit size wins.
-const sizeOverride = (customSize: string, atDefault: number): string | undefined =>
-  customSize === 'md' ? px(atDefault) : sizeMap[customSize]?.fontSize;
+const sizeOverride = (theme: Theme, customSize: string, atDefault: number): string | undefined => {
+  const drawnAt = customSize === 'md' ? atDefault : sizeMap[customSize]?.fontSize;
+  return drawnAt === undefined ? undefined : rem(theme, drawnAt);
+};
 
 const StyledParagraph = styled(Typography, {
   shouldForwardProp: (prop) =>
@@ -63,7 +67,7 @@ const StyledParagraph = styled(Typography, {
     fontFamily: theme.typography.body1.fontFamily,
     margin: `0 0 ${PARAGRAPH_MARGIN_BOTTOM_EM}em 0`,
     transition: 'all 0.2s ease',
-    ...sizeMap[customSize],
+    ...sizeStyles(theme, customSize),
   };
 
   // Variant-specific styles
@@ -77,7 +81,7 @@ const StyledParagraph = styled(Typography, {
       ...baseStyles,
       color: textColor,
       fontWeight: PARAGRAPH_FONT_WEIGHT,
-      fontSize: sizeOverride(customSize, LEAD_FONT_SIZE),
+      fontSize: sizeOverride(theme, customSize, LEAD_FONT_SIZE),
       lineHeight: LEAD_LINE_HEIGHT,
       letterSpacing: `${LEAD_LETTER_SPACING_EM}em`,
     },
@@ -90,7 +94,7 @@ const StyledParagraph = styled(Typography, {
     small: {
       ...baseStyles,
       color: theme.palette.text.secondary,
-      fontSize: sizeOverride(customSize, SMALL_FONT_SIZE),
+      fontSize: sizeOverride(theme, customSize, SMALL_FONT_SIZE),
       fontWeight: PARAGRAPH_FONT_WEIGHT,
       lineHeight: SMALL_LINE_HEIGHT,
     },