@12-apps/ui 6.34.0 → 6.36.0

package/src/components/data-display/Banner/Banner.styles.ts

@@ -4,12 +4,13 @@ import type { CSSObject, PaletteColor, Theme } from '@mui/material/styles/index.
 import type { BannerVariant } from './Banner.types';
 import { ACTIVE, HOVER } from '../Alert/Alert.metrics';
 import { modeInk } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 // Animations
-export const fadeInSlide = keyframes`
+export const fadeInSlide = (theme: Theme) => keyframes`
   from {
     opacity: 0;
-    transform: translateY(-10px);
+    transform: translateY(${rem(theme, -10)});
   }
   to {
     opacity: 1;
@@ -17,13 +18,13 @@ export const fadeInSlide = keyframes`
   }
 `;
 
-const pulseAnimation = keyframes`
+const pulseAnimation = (theme: Theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 0.7;
   }
   70% {
-    box-shadow: 0 0 0 8px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, 8)} currentColor;
     opacity: 0;
   }
   100% {
@@ -48,7 +49,7 @@ export const bannerPartStyles = (theme: Theme, colorPalette: PaletteColor): CSSO
     flexShrink: 0,
     marginTop: theme.spacing(0.25),
     color: colorPalette.main,
-    fontSize: '1.25rem',
+    fontSize: rem(theme, 20),
     display: 'flex',
     alignItems: 'center',
     position: 'relative',
@@ -56,10 +57,10 @@ export const bannerPartStyles = (theme: Theme, colorPalette: PaletteColor): CSSO
     '&::before': {
       content: '""',
       position: 'absolute',
-      inset: -4,
+      inset: rem(theme, -4),
       borderRadius: '50%',
       background: alpha(colorPalette.main, 0.1),
-      animation: `${pulseAnimation} 3s infinite`,
+      animation: `${pulseAnimation(theme)} 3s infinite`,
     },
   },
 
@@ -72,7 +73,7 @@ export const bannerPartStyles = (theme: Theme, colorPalette: PaletteColor): CSSO
   // Title styles
   '.banner-title': {
     fontWeight: 600,
-    fontSize: '1rem',
+    fontSize: rem(theme, 16),
     lineHeight: 1.4,
     marginBottom: theme.spacing(0.5),
     color: colorPalette.dark || colorPalette.main,
@@ -80,7 +81,7 @@ export const bannerPartStyles = (theme: Theme, colorPalette: PaletteColor): CSSO
 
   // Description styles  
   '.banner-description': {
-    fontSize: '0.875rem',
+    fontSize: rem(theme, 14),
     lineHeight: 1.5,
     opacity: 0.9,
     color: 'inherit',
@@ -117,8 +118,8 @@ export const bannerPartStyles = (theme: Theme, colorPalette: PaletteColor): CSSO
 
     '&:focus-visible': {
       opacity: 1,
-      outline: `2px solid ${colorPalette.main}`,
-      outlineOffset: '2px',
+      outline: `${rem(theme, 2)} solid ${colorPalette.main}`,
+      outlineOffset: rem(theme, 2),
     },
   },
 });

package/src/components/data-display/Banner/Banner.tsx

@@ -14,6 +14,7 @@ import React from 'react';
 import { BANNER_TINT_S, bannerPartStyles, bannerPointerStates, fadeInSlide, getVariantColor } from './Banner.styles';
 import { FOCUS } from '../Alert/Alert.metrics';
 import type { BannerProps, BannerVariant } from './Banner.types';
+import { rem } from '../../../tokens/relative';
 
 
 
@@ -42,7 +43,7 @@ const StyledBanner = styled(Box, {
     width: fullWidth ? '100vw' : '100%',
     marginLeft: fullWidth ? '50%' : 0,
     transform: fullWidth ? 'translateX(-50%)' : 'none',
-    animation: `${fadeInSlide} 0.3s ease-out`,
+    animation: `${fadeInSlide(theme)} 0.3s ease-out`,
     transition: `all 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow ${BANNER_TINT_S}s cubic-bezier(0.4, 0, 0.2, 1)`,
 
     ...bannerPointerStates(theme),
@@ -56,8 +57,8 @@ const StyledBanner = styled(Box, {
     // ring stays for whoever tabs here and never fires on a click. Same defect
     // and same fix as `Alert`, which is the sibling surface (FUT-1458).
     '&:focus-visible': {
-      outline: `${FOCUS.ringWidth}px solid ${alpha(colorPalette.main, FOCUS.ringAlpha)}`,
-      outlineOffset: `${FOCUS.offset}px`,
+      outline: `${rem(theme, FOCUS.ringWidth)} solid ${alpha(colorPalette.main, FOCUS.ringAlpha)}`,
+      outlineOffset: rem(theme, FOCUS.offset),
     },
 
     ...bannerPartStyles(theme, colorPalette),
@@ -83,7 +84,7 @@ const StyledBanner = styled(Box, {
     // Glass effect variant (optional enhancement)
     '&.banner-glass': {
       backgroundColor: alpha(theme.palette.background.paper, 0.1),
-      backdropFilter: 'blur(20px)',
+      backdropFilter: `blur(${rem(theme, 20)})`,
       border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
       color: theme.palette.text.primary,
       
@@ -129,7 +130,7 @@ const buildActionSx = (
     minWidth: 'auto',
     px: 1.5,
     py: 0.5,
-    fontSize: '0.8125rem',
+    fontSize: rem(theme, 13),
     fontWeight: 500,
     borderRadius: 1,
 

package/src/components/data-display/CardKit/list-card-parts.tsx

@@ -5,6 +5,7 @@ import type { JSX, ReactNode } from 'react';
 import { Box } from '../../../mui/Box';
 
 import type { CardFactProps, CardLedgerLine } from './CardKit.types';
+import { sxRem } from '../../../tokens/relative';
 
 /**
  * THE SHARED FURNITURE OF AN EXPANDED LIST-CARD BODY.
@@ -37,7 +38,7 @@ export function DetailColumns({ left, right }: { left: ReactNode; right: ReactNo
  */
 export function Fact({ label, value }: CardFactProps): JSX.Element {
   return (
-    <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2, fontSize: 13, py: 0.25 }}>
+    <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2, fontSize: sxRem(13), py: 0.25 }}>
       <Box component="span" sx={{ color: 'text.secondary', flexShrink: 0 }}>
         {label}
       </Box>
@@ -73,7 +74,7 @@ export function Ledger({
           sx={{
             display: 'flex',
             justifyContent: 'space-between',
-            fontSize: 13,
+            fontSize: sxRem(13),
             color: line.tone === 'info' ? 'info.main' : 'text.secondary',
           }}
         >
@@ -108,9 +109,9 @@ export function BodyHeading({ children }: { children: ReactNode }): JSX.Element
   return (
     <Box
       sx={{
-        fontSize: 11,
+        fontSize: sxRem(11),
         fontWeight: 700,
-        letterSpacing: 0.4,
+        letterSpacing: sxRem(0.4),
         textTransform: 'uppercase',
         color: 'text.disabled',
         mb: 0.5,
@@ -137,7 +138,7 @@ export function TagList({
   empty: string;
 }): JSX.Element {
   if (items.length === 0) {
-    return <Box sx={{ fontSize: 13, color: 'text.disabled' }}>{empty}</Box>;
+    return <Box sx={{ fontSize: sxRem(13), color: 'text.disabled' }}>{empty}</Box>;
   }
   return (
     <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
@@ -146,7 +147,7 @@ export function TagList({
           key={item}
           component="span"
           sx={{
-            fontSize: 12,
+            fontSize: sxRem(12),
             px: 0.75,
             py: 0.25,
             borderRadius: 1,

package/src/components/data-display/Carousel/Carousel.parts.tsx

@@ -11,7 +11,7 @@ import React from 'react';
 import { withDefaults } from '../../../utils/withDefaults';
 
 import { neutralTones } from '../../../tokens/ink';
-import { accentFor, muiSize } from '../../../tokens/scales';
+import { accentFor, muiSize, rem } from '../../../tokens/scales';
 
 import type {
   CarouselArrowsProps,
@@ -72,8 +72,8 @@ const LineIndicator: React.FC<IndicatorProps> = ({ index, isActive, color, onSel
       tabIndex={0}
       {...indicatorAttrs(index, isActive)}
       sx={{
-        width: isActive ? 30 : 20,
-        height: 3,
+        width: rem(theme, isActive ? 30 : 20),
+        height: rem(theme, 3),
         backgroundColor: isActive
           ? accentFor(theme, color).main
           : alpha(accentFor(theme, color).main, 0.3),
@@ -96,8 +96,8 @@ const NumberIndicator: React.FC<IndicatorProps> = ({ index, isActive, color, onS
       tabIndex={0}
       {...indicatorAttrs(index, isActive)}
       sx={{
-        width: 24,
-        height: 24,
+        width: rem(theme, 24),
+        height: rem(theme, 24),
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
@@ -105,7 +105,7 @@ const NumberIndicator: React.FC<IndicatorProps> = ({ index, isActive, color, onS
         backgroundColor: isActive ? accentFor(theme, color).main : 'transparent',
         color: isActive ? accentFor(theme, color).contrastText : accentFor(theme, color).main,
         border: `1px solid ${accentFor(theme, color).main}`,
-        fontSize: '0.75rem',
+        fontSize: rem(theme, 12),
         fontWeight: isActive ? 'bold' : 'normal',
         cursor: 'pointer',
         transition: theme.transitions.create(['all']),
@@ -223,7 +223,7 @@ export const CarouselArrows: React.FC<CarouselArrowsProps> = (props) => {
 
   const theme = useTheme();
   const sx = arrowSx(theme, color, position === 'overlay');
-  const offset = position === 'outside' ? -40 : 8;
+  const offset = rem(theme, position === 'outside' ? -40 : 8);
 
   return (
     <Box data-testid="carousel-navigation">
@@ -255,7 +255,9 @@ export const CarouselArrows: React.FC<CarouselArrowsProps> = (props) => {
 };
 
 const THUMBNAIL_SIZES = { xs: 40, sm: 60, md: 80, lg: 100, xl: 120 } as const;
-const DEFAULT_THUMBNAIL_SIZE = 60;
+/** A thumbnail's side in design px — 60 for a size the table does not know. */
+const thumbnailSidePx = (size: string): number =>
+  THUMBNAIL_SIZES[size as keyof typeof THUMBNAIL_SIZES] ?? 60;
 
 const Thumbnail: React.FC<{
   item: CarouselItem;
@@ -272,9 +274,9 @@ const Thumbnail: React.FC<{
       data-testid={`carousel-thumbnail-${index}`}
       data-active={isActive}
       sx={{
-        width: side,
-        height: side,
-        border: `2px solid ${isActive ? theme.palette.primary.main : 'transparent'}`,
+        width: rem(theme, side),
+        height: rem(theme, side),
+        border: `${rem(theme, 2)} solid ${isActive ? theme.palette.primary.main : 'transparent'}`,
         borderRadius: 1,
         overflow: 'hidden',
         cursor: 'pointer',
@@ -318,7 +320,7 @@ export const CarouselThumbnails: React.FC<CarouselThumbnailsProps> = ({
   style,
 }) => {
   const theme = useTheme();
-  const side = THUMBNAIL_SIZES[size as keyof typeof THUMBNAIL_SIZES] ?? DEFAULT_THUMBNAIL_SIZE;
+  const side = thumbnailSidePx(size);
 
   return (
     <Box
@@ -327,7 +329,7 @@ export const CarouselThumbnails: React.FC<CarouselThumbnailsProps> = ({
       sx={{
         position: 'absolute',
         // Hung below the frame, clear of its own height plus a gap.
-        bottom: -side - 16,
+        bottom: rem(theme, -side - 16),
         left: '50%',
         transform: 'translateX(-50%)',
         display: 'flex',

package/src/components/data-display/Carousel/Carousel.slide.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 
 import type { CarouselItem, CarouselProps } from './Carousel.types';
 import { onMedia, shadowInk } from '../../../tokens/ink';
+import { rems } from '../../../tokens/relative';
 
 export interface CarouselSlideProps {
   item: CarouselItem;
@@ -33,7 +34,7 @@ const SlideCaption: React.FC<Pick<CarouselItem, 'title' | 'description' | 'conte
         variant="h5"
         sx={(theme) => ({
           color: image ? onMedia(theme) : 'text.primary',
-          textShadow: image ? `0 2px 4px ${shadowInk(theme, 0.5)}` : 'none',
+          textShadow: image ? `0 ${rems(theme, 2, 4)} ${shadowInk(theme, 0.5)}` : 'none',
           mb: 1,
         })}
       >
@@ -46,7 +47,7 @@ const SlideCaption: React.FC<Pick<CarouselItem, 'title' | 'description' | 'conte
         variant="body1"
         sx={(theme) => ({
           color: image ? onMedia(theme) : 'text.secondary',
-          textShadow: image ? `0 1px 2px ${shadowInk(theme, 0.5)}` : 'none',
+          textShadow: image ? `0 ${rems(theme, 1, 2)} ${shadowInk(theme, 0.5)}` : 'none',
         })}
       >
         {description}

package/src/components/data-display/Carousel/Carousel.styles.ts

@@ -2,29 +2,49 @@ import { alpha } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import type { CarouselProps } from './Carousel.types';
-import { accentFor } from '../../../tokens/scales';
+import { accentFor, rem, sxRem } from '../../../tokens/scales';
 
 type Variant = NonNullable<CarouselProps['variant']>;
 type Size = NonNullable<CarouselProps['size']>;
 type Color = NonNullable<CarouselProps['color']>;
 
-const SIZES: Record<Size, { height: number; fontSize: string }> = {
-  xs: { height: 200, fontSize: '0.75rem' },
-  sm: { height: 300, fontSize: '0.875rem' },
-  md: { height: 400, fontSize: '1rem' },
-  lg: { height: 500, fontSize: '1.125rem' },
-  xl: { height: 600, fontSize: '1.25rem' },
+const SIZES: Record<Size, { height: (theme: Theme) => string; fontSize: (theme: Theme) => string }> = {
+  xs: { height: sxRem(200), fontSize: sxRem(12) },
+  sm: { height: sxRem(300), fontSize: sxRem(14) },
+  md: { height: sxRem(400), fontSize: sxRem(16) },
+  lg: { height: sxRem(500), fontSize: sxRem(18) },
+  xl: { height: sxRem(600), fontSize: sxRem(20) },
 };
 
 const sizeStyles = (size: Size) => SIZES[size] ?? SIZES.md;
 
+/**
+ * The frame's box as CSS. A numeric `height`/`width` is design px, drawn
+ * through the type scale; an unset height is the documented 400. A numeric
+ * height is taken literally; any other falls back to the size preset, since a
+ * percentage cannot resolve against an unsized parent here. A string width
+ * passes through.
+ */
+export const frameBox = (
+  theme: Theme,
+  size: Size,
+  height: number | string | undefined,
+  width: number | string,
+): { width: string; height: string } => ({
+  width: typeof width === 'number' ? rem(theme, width) : width,
+  height: typeof height === 'number' || height === undefined
+    ? rem(theme, height ?? 400)
+    : sizeStyles(size).height(theme),
+});
+
 interface ContainerStyleInput {
   theme: Theme;
   variant: Variant;
   size: Size;
   color: Color;
-  height: number | string;
-  width: number | string;
+  /** The frame's box, resolved by {@link frameBox}. */
+  height: string;
+  width: string;
   glow: boolean;
   pulse: boolean;
   glass: boolean;
@@ -39,7 +59,7 @@ interface ContainerStyleInput {
 const SURFACES: Record<Variant, (input: ContainerStyleInput) => CSSObject> = {
   glass: ({ theme, color, glass }) => ({
     backgroundColor: alpha(theme.palette.background.paper, glass ? 0.1 : 0.9),
-    backdropFilter: 'blur(20px)',
+    backdropFilter: `blur(${rem(theme, 20)})`,
     border: `1px solid ${alpha(accentFor(theme, color).main, 0.2)}`,
   }),
 
@@ -59,26 +79,24 @@ const SURFACES: Record<Variant, (input: ContainerStyleInput) => CSSObject> = {
 };
 
 export const containerStyles = (input: ContainerStyleInput): CSSObject => {
-  const { theme, variant, size, color, height, width, glow, pulse } = input;
+  const { theme, variant, color, height, width, glow, pulse } = input;
   const accent = accentFor(theme, color).main;
 
   return {
     position: 'relative' as const,
     width,
-    // A numeric height is taken literally; anything else falls back to the size
-    // preset, since a percentage cannot resolve against an unsized parent here.
-    height: typeof height === 'number' ? height : sizeStyles(size).height,
+    height,
     overflow: 'hidden',
     borderRadius: theme.spacing(1),
     transition: theme.transitions.create(['all'], {
       duration: theme.transitions.duration.standard,
     }),
-    ...(glow && { boxShadow: `0 0 30px ${alpha(accent, 0.4)}` }),
+    ...(glow && { boxShadow: `0 0 ${rem(theme, 30)} ${alpha(accent, 0.4)}` }),
     ...(pulse && {
       animation: 'pulse 2s infinite',
       '@keyframes pulse': {
         '0%': { boxShadow: `0 0 0 0 ${alpha(accent, 0.4)}` },
-        '70%': { boxShadow: `0 0 0 20px ${alpha(accent, 0)}` },
+        '70%': { boxShadow: `0 0 0 ${rem(theme, 20)} ${alpha(accent, 0)}` },
         '100%': { boxShadow: `0 0 0 0 ${alpha(accent, 0)}` },
       },
     }),

package/src/components/data-display/Carousel/Carousel.tsx

@@ -11,7 +11,7 @@ import { withDefaults } from '../../../utils/withDefaults';
 import { useCarouselNavigation } from './Carousel.hooks';
 import { CarouselChrome } from './Carousel.chrome';
 import { CarouselTrack } from './Carousel.slide';
-import { containerStyles } from './Carousel.styles';
+import { containerStyles, frameBox } from './Carousel.styles';
 import type { CarouselItem, CarouselProps } from './Carousel.types';
 import { muiColor } from '../../../tokens/scales';
 
@@ -33,7 +33,6 @@ const DEFAULTS = {
   gradient: false,
   loading: false,
   disabled: false,
-  height: 400,
   width: '100%',
   pauseOnHover: true,
   indicatorPosition: 'bottom',
@@ -80,7 +79,7 @@ export const Carousel: React.FC<CarouselProps> = (props) => {
   );
 
   const frameSx = containerStyles({
-    theme, variant, size, color, height, width, glow, pulse, glass, gradient,
+    theme, variant, size, color, ...frameBox(theme, size, height, width), glow, pulse, glass, gradient,
   });
 
   if (loading) {

package/src/components/data-display/Chart/Chart.tsx

@@ -7,10 +7,10 @@ import React from 'react';
 
 import type { ChartProps } from './Chart.types';
 import { ChartContainer } from './ChartComposables';
-import { getSizeStyles, getVariantStyles } from './chart-internals';
+import { getSizeStyles, getVariantStyles, plotHeightPx } from './chart-internals';
 import { renderChartByType } from './chart-renderers';
 import { uiInk } from '../../../tokens/ink';
-import { muiColor } from '../../../tokens/scales';
+import { muiColor, rem } from '../../../tokens/scales';
 
 /**
  * Prop-driven Recharts wrapper (line/bar/area/pie/radar/scatter/composed)
@@ -66,7 +66,7 @@ function ChartHeader({ title, subtitle, neon, dataTestId }: HeaderProps): React.
 
 export const Chart: React.FC<ChartProps> = (props) => {
   const theme = useTheme();
-  const sizeStyles = getSizeStyles(props.size, props.height);
+  const sizeStyles = getSizeStyles(theme, props.size, props.height);
   const styles = variantSx(theme, props);
   const dataTestId = props['data-testid'] ?? 'chart';
 
@@ -97,8 +97,8 @@ export const Chart: React.FC<ChartProps> = (props) => {
       />
       <ChartContainer
         responsive={props.responsive ?? true}
-        width={props.width ?? '100%'}
-        height={props.fillHeight === true ? '100%' : sizeStyles.height}
+        width={typeof props.width === 'number' ? rem(theme, props.width) : (props.width ?? '100%')}
+        height={props.fillHeight === true ? '100%' : plotHeightPx(props.size, props.height)}
         data-testid={`${dataTestId}-container`}
       >
         {renderChartByType(props, theme)}

package/src/components/data-display/Chart/ChartComposables.tsx

@@ -5,6 +5,8 @@ import { useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 import { Legend, ResponsiveContainer, Tooltip } from 'recharts';
 
+import { rem, remPx, sxRem } from '../../../tokens/relative';
+
 /**
  * Raw chart composables (Squire's ChartConfig pattern, MUI-themed): a
  * responsive container plus themed tooltip/legend content renderers. The
@@ -19,7 +21,8 @@ export const ChartLegend = Legend;
 
 export interface ChartContainerProps {
   /**
-   * A number of pixels, or a PERCENTAGE of the box this container is given.
+   * A number of pixels (design px, drawn through the theme's type scale), or
+   * a PERCENTAGE of the box this container is given.
    *
    * The difference is not cosmetic: Recharts sizes the chart from the number
    * when it is one and only MEASURES its own box when it is a percentage
@@ -28,6 +31,7 @@ export interface ChartContainerProps {
    * blank space under the plot — until the height is handed over as a percent.
    */
   height: number | `${number}%`;
+  /** Design px when a number, through the type scale; a string is as given. */
   width?: number | string;
   responsive?: boolean;
   children: React.ReactElement;
@@ -42,15 +46,22 @@ export const ChartContainer: React.FC<ChartContainerProps> = ({
   children,
   'data-testid': dataTestId,
 }) => {
+  const theme = useTheme();
   if (!responsive) {
+    const box = {
+      width: typeof width === 'number' ? rem(theme, width) : width,
+      height: typeof height === 'number' ? rem(theme, height) : height,
+    };
     return (
-      <Box sx={{ width, height }} data-testid={dataTestId}>
+      <Box sx={box} data-testid={dataTestId}>
         {children}
       </Box>
     );
   }
+  // Recharts takes a number as px and only measures its box for a percentage.
+  const plot = { height: typeof height === 'number' ? remPx(theme, height) : height };
   return (
-    <ResponsiveContainer width="100%" height={height} data-testid={dataTestId}>
+    <ResponsiveContainer width="100%" {...plot} data-testid={dataTestId}>
       {children}
     </ResponsiveContainer>
   );
@@ -94,7 +105,7 @@ export const ChartTooltipContent: React.FC<ChartTooltipContentProps> = ({
         <Box key={index} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
           <Box
             component="span"
-            sx={{ width: 10, height: 10, borderRadius: '2px', backgroundColor: entry.color, flexShrink: 0 }}
+            sx={{ width: sxRem(10), height: sxRem(10), borderRadius: sxRem(2), backgroundColor: entry.color, flexShrink: 0 }}
           />
           <Typography variant="body2" sx={{ color: 'text.secondary' }}>
             {entry.name}
@@ -121,7 +132,7 @@ export const ChartLegendContent: React.FC<ChartLegendContentProps> = ({ payload
         <Box key={index} sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
           <Box
             component="span"
-            sx={{ width: 10, height: 10, borderRadius: '2px', backgroundColor: entry.color, flexShrink: 0 }}
+            sx={{ width: sxRem(10), height: sxRem(10), borderRadius: sxRem(2), backgroundColor: entry.color, flexShrink: 0 }}
           />
           <Typography variant="caption" sx={{ color: 'text.secondary' }}>
             {entry.value}

package/src/components/data-display/Chart/chart-axis.ts

@@ -1,4 +1,7 @@
+import type { Theme } from '@mui/material/styles/index.js';
+
 import type { ChartDataPoint, ChartProps } from './Chart.types';
+import { remPx } from '../../../tokens/relative';
 
 /**
  * Cartesian axis + bar geometry: the rules that keep a chart readable rather
@@ -25,10 +28,6 @@ import type { ChartDataPoint, ChartProps } from './Chart.types';
 const DEFAULT_MAX_CATEGORY_TICKS = 8;
 /** Category tick labels longer than this are truncated with an ellipsis. */
 const DEFAULT_TICK_LABEL_MAX_CHARS = 12;
-/** Bar corner radius, px. */
-const DEFAULT_BAR_RADIUS = 3;
-/** Cap on a single bar's thickness, px. */
-const DEFAULT_MAX_BAR_WIDTH = 38;
 
 /**
  * Thin a category axis to at most `maxTicks` labels, keeping every nth.
@@ -89,9 +88,9 @@ export interface CartesianAxisConfig {
 
 /** Resolved geometry for bar series. */
 export interface BarGeometry {
-  /** Per-corner radius, top corners only; `0` for stacked segments. */
+  /** Per-corner radius in rendered px, top corners only; `0` for stacked segments. */
   radius: number | [number, number, number, number];
-  /** Cap on a bar's thickness, px — also what keeps bars off the frame. */
+  /** Cap on a bar's thickness in rendered px — also what keeps bars off the frame. */
   maxBarSize: number;
 }
 
@@ -107,12 +106,17 @@ export function resolveAxisConfig(props: ChartProps, tickMargin: number): Cartes
   };
 }
 
-export function resolveBarGeometry(props: ChartProps): BarGeometry {
-  const radius = props.barRadius ?? DEFAULT_BAR_RADIUS;
+/**
+ * The bar geometry Recharts takes as px numbers, from design px through the
+ * type scale: a 3px corner and a 38px thickness cap unless the caller says
+ * otherwise.
+ */
+export function resolveBarGeometry(props: ChartProps, theme: Theme): BarGeometry {
+  const radius = remPx(theme, props.barRadius ?? 3);
   return {
     // A stacked segment rounded on its top corners tears a notch out of the
     // segment above it, so stacks stay square.
     radius: props.stacked ? 0 : [radius, radius, 0, 0],
-    maxBarSize: props.maxBarWidth ?? DEFAULT_MAX_BAR_WIDTH,
+    maxBarSize: remPx(theme, props.maxBarWidth ?? 38),
   };
 }

package/src/components/data-display/Chart/chart-context.ts

@@ -10,6 +10,7 @@ import {
   resolveSeries,
   type SizeStyles,
 } from './chart-internals';
+import { remPx } from '../../../tokens/relative';
 
 /**
  * Everything the per-type renderers in `chart-renderers.tsx` read, resolved
@@ -40,7 +41,7 @@ export interface ChartRenderContext {
 }
 
 export function buildChartContext(props: ChartProps, theme: Theme): ChartRenderContext {
-  const sizeStyles = getSizeStyles(props.size, props.height);
+  const sizeStyles = getSizeStyles(theme, props.size, props.height);
   const chartColors = getDefaultColors(theme, props.variant ?? 'default', props.colors);
   const { axisStyle, gridStroke, gridOpacity } = getAxisStyles(
     theme,
@@ -64,12 +65,26 @@ export function buildChartContext(props: ChartProps, theme: Theme): ChartRenderC
     gridStroke,
     gridOpacity,
     axisConfig: resolveAxisConfig(props, sizeStyles.tickMargin),
-    barGeometry: resolveBarGeometry(props),
+    barGeometry: resolveBarGeometry(props, theme),
     animationDuration: (props.animate ?? true) ? (props.animationDuration ?? 1500) : 0,
     commonProps: {
       data: props.data,
-      margin: { top: 20, right: 30, left: 20, bottom: 20, ...props.margin },
+      margin: {
+        top: remPx(theme, 20),
+        right: remPx(theme, 30),
+        left: remPx(theme, 20),
+        bottom: remPx(theme, 20),
+        ...marginPx(theme, props.margin),
+      },
       onClick: handleChartClick,
     },
   };
 }
+
+/** A caller's margin is in design px (the prop's contract); Recharts takes px numbers. */
+function marginPx(theme: Theme, margin: ChartProps['margin']): ChartProps['margin'] {
+  if (!margin) return undefined;
+  return Object.fromEntries(
+    Object.entries(margin).map(([side, px]) => [side, typeof px === 'number' ? remPx(theme, px) : px]),
+  );
+}