@discourser/design-system 0.22.0 → 0.22.2

package/src/stories/foundations/Typography.mdx

@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import { TypeSpecimen } from './components/TypeSpecimen';
-import { material3Language } from '../../languages/material3.language';
 
 <Meta title="Foundations/Typography" />
 
@@ -15,7 +14,7 @@ The system uses three font families, each serving a specific purpose:
 <div style={{ marginBottom: '32px', padding: '24px', backgroundColor: '#f5f5f5', borderRadius: '8px' }}>
   <div style={{ marginBottom: '16px' }}>
     <div style={{ fontWeight: '600', marginBottom: '8px' }}>Display</div>
-    <div style={{ fontFamily: material3Language.typography.fonts.display, fontSize: '24px', marginBottom: '4px' }}>
+    <div style={{ fontFamily: '"Fraunces", Georgia, serif', fontSize: '24px', marginBottom: '4px' }}>
       "Fraunces", Georgia, serif
     </div>
     <div style={{ fontSize: '12px', color: '#666' }}>
@@ -25,7 +24,7 @@ The system uses three font families, each serving a specific purpose:
 
   <div style={{ marginBottom: '16px' }}>
     <div style={{ fontWeight: '600', marginBottom: '8px' }}>Body</div>
-    <div style={{ fontFamily: material3Language.typography.fonts.body, fontSize: '16px', marginBottom: '4px' }}>
+    <div style={{ fontFamily: '"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', fontSize: '16px', marginBottom: '4px' }}>
       "Poppins", -apple-system, BlinkMacSystemFont, sans-serif
     </div>
     <div style={{ fontSize: '12px', color: '#666' }}>
@@ -35,7 +34,7 @@ The system uses three font families, each serving a specific purpose:
 
   <div>
     <div style={{ fontWeight: '600', marginBottom: '8px' }}>Monospace</div>
-    <div style={{ fontFamily: material3Language.typography.fonts.mono, fontSize: '14px', marginBottom: '4px' }}>
+    <div style={{ fontFamily: '"JetBrains Mono", "Fira Code", Consolas, monospace', fontSize: '14px', marginBottom: '4px' }}>
       JetBrains Mono, Fira Code, Consolas, monospace
     </div>
     <div style={{ fontSize: '12px', color: '#666' }}>
@@ -55,32 +54,35 @@ Material Design 3's type scale consists of 13 styles across 5 categories: Displa
 Display styles are the largest text on screen, reserved for short, important text or numerals.
 
 <TypeSpecimen
+  styleName="displayLarge"
   name="Display Large"
-  fontSize={material3Language.typography.scale.displayLarge.fontSize}
-  lineHeight={material3Language.typography.scale.displayLarge.lineHeight}
-  fontWeight={material3Language.typography.scale.displayLarge.fontWeight}
-  letterSpacing={material3Language.typography.scale.displayLarge.letterSpacing}
-  fontFamily={material3Language.typography.scale.displayLarge.fontFamily}
+  fontSize="57px"
+  lineHeight="64px"
+  fontWeight="400"
+  letterSpacing="-0.25px"
+  fontFamily="display"
   sampleText="Display Large"
 />
 
 <TypeSpecimen
+  styleName="displayMedium"
   name="Display Medium"
-  fontSize={material3Language.typography.scale.displayMedium.fontSize}
-  lineHeight={material3Language.typography.scale.displayMedium.lineHeight}
-  fontWeight={material3Language.typography.scale.displayMedium.fontWeight}
-  letterSpacing={material3Language.typography.scale.displayMedium.letterSpacing}
-  fontFamily={material3Language.typography.scale.displayMedium.fontFamily}
+  fontSize="45px"
+  lineHeight="52px"
+  fontWeight="400"
+  letterSpacing="0px"
+  fontFamily="display"
   sampleText="Display Medium"
 />
 
 <TypeSpecimen
+  styleName="displaySmall"
   name="Display Small"
-  fontSize={material3Language.typography.scale.displaySmall.fontSize}
-  lineHeight={material3Language.typography.scale.displaySmall.lineHeight}
-  fontWeight={material3Language.typography.scale.displaySmall.fontWeight}
-  letterSpacing={material3Language.typography.scale.displaySmall.letterSpacing}
-  fontFamily={material3Language.typography.scale.displaySmall.fontFamily}
+  fontSize="36px"
+  lineHeight="44px"
+  fontWeight="400"
+  letterSpacing="0px"
+  fontFamily="display"
   sampleText="Display Small"
 />
 
@@ -89,32 +91,35 @@ Display styles are the largest text on screen, reserved for short, important tex
 Headlines are for high-emphasis text on smaller screens. They're best-suited for short, high-emphasis text.
 
 <TypeSpecimen
+  styleName="headlineLarge"
   name="Headline Large"
-  fontSize={material3Language.typography.scale.headlineLarge.fontSize}
-  lineHeight={material3Language.typography.scale.headlineLarge.lineHeight}
-  fontWeight={material3Language.typography.scale.headlineLarge.fontWeight}
-  letterSpacing={material3Language.typography.scale.headlineLarge.letterSpacing}
-  fontFamily={material3Language.typography.scale.headlineLarge.fontFamily}
+  fontSize="32px"
+  lineHeight="40px"
+  fontWeight="400"
+  letterSpacing="0px"
+  fontFamily="display"
   sampleText="Headline Large"
 />
 
 <TypeSpecimen
+  styleName="headlineMedium"
   name="Headline Medium"
-  fontSize={material3Language.typography.scale.headlineMedium.fontSize}
-  lineHeight={material3Language.typography.scale.headlineMedium.lineHeight}
-  fontWeight={material3Language.typography.scale.headlineMedium.fontWeight}
-  letterSpacing={material3Language.typography.scale.headlineMedium.letterSpacing}
-  fontFamily={material3Language.typography.scale.headlineMedium.fontFamily}
+  fontSize="28px"
+  lineHeight="36px"
+  fontWeight="400"
+  letterSpacing="0px"
+  fontFamily="display"
   sampleText="Headline Medium"
 />
 
 <TypeSpecimen
+  styleName="headlineSmall"
   name="Headline Small"
-  fontSize={material3Language.typography.scale.headlineSmall.fontSize}
-  lineHeight={material3Language.typography.scale.headlineSmall.lineHeight}
-  fontWeight={material3Language.typography.scale.headlineSmall.fontWeight}
-  letterSpacing={material3Language.typography.scale.headlineSmall.letterSpacing}
-  fontFamily={material3Language.typography.scale.headlineSmall.fontFamily}
+  fontSize="24px"
+  lineHeight="32px"
+  fontWeight="400"
+  letterSpacing="0px"
+  fontFamily="display"
   sampleText="Headline Small"
 />
 
@@ -123,32 +128,35 @@ Headlines are for high-emphasis text on smaller screens. They're best-suited for
 Titles are for medium-emphasis text that remains relatively short. Use titles for grouping related content or to emphasize important sections.
 
 <TypeSpecimen
+  styleName="titleLarge"
   name="Title Large"
-  fontSize={material3Language.typography.scale.titleLarge.fontSize}
-  lineHeight={material3Language.typography.scale.titleLarge.lineHeight}
-  fontWeight={material3Language.typography.scale.titleLarge.fontWeight}
-  letterSpacing={material3Language.typography.scale.titleLarge.letterSpacing}
-  fontFamily={material3Language.typography.scale.titleLarge.fontFamily}
+  fontSize="22px"
+  lineHeight="28px"
+  fontWeight="500"
+  letterSpacing="0px"
+  fontFamily="body"
   sampleText="Title Large"
 />
 
 <TypeSpecimen
+  styleName="titleMedium"
   name="Title Medium"
-  fontSize={material3Language.typography.scale.titleMedium.fontSize}
-  lineHeight={material3Language.typography.scale.titleMedium.lineHeight}
-  fontWeight={material3Language.typography.scale.titleMedium.fontWeight}
-  letterSpacing={material3Language.typography.scale.titleMedium.letterSpacing}
-  fontFamily={material3Language.typography.scale.titleMedium.fontFamily}
+  fontSize="16px"
+  lineHeight="24px"
+  fontWeight="500"
+  letterSpacing="0.15px"
+  fontFamily="body"
   sampleText="Title Medium"
 />
 
 <TypeSpecimen
+  styleName="titleSmall"
   name="Title Small"
-  fontSize={material3Language.typography.scale.titleSmall.fontSize}
-  lineHeight={material3Language.typography.scale.titleSmall.lineHeight}
-  fontWeight={material3Language.typography.scale.titleSmall.fontWeight}
-  letterSpacing={material3Language.typography.scale.titleSmall.letterSpacing}
-  fontFamily={material3Language.typography.scale.titleSmall.fontFamily}
+  fontSize="14px"
+  lineHeight="20px"
+  fontWeight="500"
+  letterSpacing="0.1px"
+  fontFamily="body"
   sampleText="Title Small"
 />
 
@@ -157,32 +165,35 @@ Titles are for medium-emphasis text that remains relatively short. Use titles fo
 Body styles are used for longer passages of text in your app.
 
 <TypeSpecimen
+  styleName="bodyLarge"
   name="Body Large"
-  fontSize={material3Language.typography.scale.bodyLarge.fontSize}
-  lineHeight={material3Language.typography.scale.bodyLarge.lineHeight}
-  fontWeight={material3Language.typography.scale.bodyLarge.fontWeight}
-  letterSpacing={material3Language.typography.scale.bodyLarge.letterSpacing}
-  fontFamily={material3Language.typography.scale.bodyLarge.fontFamily}
+  fontSize="16px"
+  lineHeight="24px"
+  fontWeight="400"
+  letterSpacing="0.5px"
+  fontFamily="body"
   sampleText="The quick brown fox jumps over the lazy dog. Body Large is used for longer passages of text that require good readability."
 />
 
 <TypeSpecimen
+  styleName="bodyMedium"
   name="Body Medium"
-  fontSize={material3Language.typography.scale.bodyMedium.fontSize}
-  lineHeight={material3Language.typography.scale.bodyMedium.lineHeight}
-  fontWeight={material3Language.typography.scale.bodyMedium.fontWeight}
-  letterSpacing={material3Language.typography.scale.bodyMedium.letterSpacing}
-  fontFamily={material3Language.typography.scale.bodyMedium.fontFamily}
+  fontSize="14px"
+  lineHeight="20px"
+  fontWeight="400"
+  letterSpacing="0.25px"
+  fontFamily="body"
   sampleText="The quick brown fox jumps over the lazy dog. Body Medium is the default body text size, balanced for readability and screen real estate."
 />
 
 <TypeSpecimen
+  styleName="bodySmall"
   name="Body Small"
-  fontSize={material3Language.typography.scale.bodySmall.fontSize}
-  lineHeight={material3Language.typography.scale.bodySmall.lineHeight}
-  fontWeight={material3Language.typography.scale.bodySmall.fontWeight}
-  letterSpacing={material3Language.typography.scale.bodySmall.letterSpacing}
-  fontFamily={material3Language.typography.scale.bodySmall.fontFamily}
+  fontSize="12px"
+  lineHeight="16px"
+  fontWeight="400"
+  letterSpacing="0.4px"
+  fontFamily="body"
   sampleText="The quick brown fox jumps over the lazy dog. Body Small is used for captions and supporting text that doesn't require much emphasis."
 />
 
@@ -191,32 +202,35 @@ Body styles are used for longer passages of text in your app.
 Label styles are for text in components like buttons, tabs, and labels. They're utilitarian and medium-emphasis.
 
 <TypeSpecimen
+  styleName="labelLarge"
   name="Label Large"
-  fontSize={material3Language.typography.scale.labelLarge.fontSize}
-  lineHeight={material3Language.typography.scale.labelLarge.lineHeight}
-  fontWeight={material3Language.typography.scale.labelLarge.fontWeight}
-  letterSpacing={material3Language.typography.scale.labelLarge.letterSpacing}
-  fontFamily={material3Language.typography.scale.labelLarge.fontFamily}
+  fontSize="14px"
+  lineHeight="20px"
+  fontWeight="500"
+  letterSpacing="0.1px"
+  fontFamily="body"
   sampleText="Label Large"
 />
 
 <TypeSpecimen
+  styleName="labelMedium"
   name="Label Medium"
-  fontSize={material3Language.typography.scale.labelMedium.fontSize}
-  lineHeight={material3Language.typography.scale.labelMedium.lineHeight}
-  fontWeight={material3Language.typography.scale.labelMedium.fontWeight}
-  letterSpacing={material3Language.typography.scale.labelMedium.letterSpacing}
-  fontFamily={material3Language.typography.scale.labelMedium.fontFamily}
+  fontSize="12px"
+  lineHeight="16px"
+  fontWeight="500"
+  letterSpacing="0.5px"
+  fontFamily="body"
   sampleText="Label Medium"
 />
 
 <TypeSpecimen
+  styleName="labelSmall"
   name="Label Small"
-  fontSize={material3Language.typography.scale.labelSmall.fontSize}
-  lineHeight={material3Language.typography.scale.labelSmall.lineHeight}
-  fontWeight={material3Language.typography.scale.labelSmall.fontWeight}
-  letterSpacing={material3Language.typography.scale.labelSmall.letterSpacing}
-  fontFamily={material3Language.typography.scale.labelSmall.fontFamily}
+  fontSize="11px"
+  lineHeight="16px"
+  fontWeight="500"
+  letterSpacing="0.5px"
+  fontFamily="body"
   sampleText="Label Small"
 />
 

package/src/stories/foundations/components/ColorSwatch.tsx

@@ -1,163 +1,126 @@
 import { type CSSProperties } from 'react';
+import { css } from 'styled-system/css';
+
+// ── Pre-declared css() lookups — Panda CSS statically extracts these ─────────
+// Keys match the `name` prop passed from Colors.mdx (M3 semantic role names).
+// Values use the Panda semantic token path from src/preset/semantic-tokens.ts.
+const semanticBg: Record<string, string> = {
+  // Primary
+  primary: css({ bg: 'primary' }),
+  onPrimary: css({ bg: 'onPrimary' }),
+  primaryContainer: css({ bg: 'primary.container' }),
+  onPrimaryContainer: css({ bg: 'onPrimary.container' }),
+  // Secondary
+  secondary: css({ bg: 'secondary' }),
+  onSecondary: css({ bg: 'onSecondary' }),
+  secondaryContainer: css({ bg: 'secondary.container' }),
+  onSecondaryContainer: css({ bg: 'onSecondary.container' }),
+  // Tertiary
+  tertiary: css({ bg: 'tertiary' }),
+  onTertiary: css({ bg: 'onTertiary' }),
+  tertiaryContainer: css({ bg: 'tertiary.container' }),
+  onTertiaryContainer: css({ bg: 'onTertiary.container' }),
+  // Error
+  error: css({ bg: 'error' }),
+  onError: css({ bg: 'onError' }),
+  errorContainer: css({ bg: 'error.container' }),
+  onErrorContainer: css({ bg: 'onError.container' }),
+  // Surface
+  surface: css({ bg: 'surface' }),
+  onSurface: css({ bg: 'onSurface' }),
+  surfaceVariant: css({ bg: 'surfaceVariant' }),
+  onSurfaceVariant: css({ bg: 'onSurface.variant' }),
+  // Surface containers
+  surfaceContainerLowest: css({ bg: 'surface.container.lowest' }),
+  surfaceContainerLow: css({ bg: 'surface.container.low' }),
+  surfaceContainer: css({ bg: 'surface.container' }),
+  surfaceContainerHigh: css({ bg: 'surface.container.high' }),
+  surfaceContainerHighest: css({ bg: 'surface.container.highest' }),
+  // Outline
+  outline: css({ bg: 'outline' }),
+  outlineVariant: css({ bg: 'outline.variant' }),
+  // Inverse
+  inverseSurface: css({ bg: 'inverseSurface' }),
+  inverseOnSurface: css({ bg: 'inverseOnSurface' }),
+  inversePrimary: css({ bg: 'inversePrimary' }),
+  // Utility
+  background: css({ bg: 'background' }),
+  onBackground: css({ bg: 'onBackground' }),
+  scrim: css({ bg: 'scrim' }),
+  shadow: css({ bg: 'shadow' }),
+};
 
-interface ColorSwatchProps {
+interface SemanticSwatchProps {
   name: string;
-  value: string;
   description?: string;
 }
 
-export const ColorSwatch = ({ name, value, description }: ColorSwatchProps) => {
-  const swatchStyle: CSSProperties = {
-    backgroundColor: value,
-    width: '100%',
-    height: '80px',
-    borderRadius: '8px',
-    border: '1px solid rgba(0, 0, 0, 0.1)',
-    marginBottom: '8px',
-  };
+export const SemanticSwatch = ({ name, description }: SemanticSwatchProps) => {
+  const bgClass = semanticBg[name] ?? '';
 
   const containerStyle: CSSProperties = {
-    display: 'flex',
-    flexDirection: 'column',
     marginBottom: '16px',
   };
 
   const labelStyle: CSSProperties = {
     fontSize: '14px',
     fontWeight: '500',
-    marginBottom: '4px',
+    marginBottom: '8px',
     fontFamily: 'Inter, sans-serif',
   };
 
-  const valueStyle: CSSProperties = {
-    fontSize: '12px',
-    fontFamily: 'monospace',
-    color: '#666',
-  };
-
-  const descStyle: CSSProperties = {
-    fontSize: '12px',
-    color: '#666',
-    marginTop: '4px',
-  };
-
-  return (
-    <div style={containerStyle}>
-      <div style={swatchStyle} />
-      <div style={labelStyle}>{name}</div>
-      <div style={valueStyle}>{value}</div>
-      {description && <div style={descStyle}>{description}</div>}
-    </div>
-  );
-};
-
-interface TonalSwatchProps {
-  paletteName: string;
-  tone: number;
-  value: string;
-}
-
-export const TonalSwatch = ({ paletteName, tone, value }: TonalSwatchProps) => {
-  const swatchStyle: CSSProperties = {
-    backgroundColor: value,
-    width: '100%',
-    height: '60px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    border: '1px solid rgba(0, 0, 0, 0.1)',
-    position: 'relative',
-  };
-
-  const labelStyle: CSSProperties = {
-    fontSize: '11px',
-    fontWeight: '500',
-    fontFamily: 'monospace',
-    color: tone >= 50 ? '#000' : '#fff',
-    mixBlendMode: 'difference',
-  };
-
-  return (
-    <div style={swatchStyle} title={`${paletteName}.${tone}: ${value}`}>
-      <span style={labelStyle}>{tone}</span>
-    </div>
-  );
-};
-
-interface SemanticSwatchProps {
-  name: string;
-  lightValue: string;
-  darkValue: string;
-  description?: string;
-}
-
-export const SemanticSwatch = ({
-  name,
-  lightValue,
-  darkValue,
-  description,
-}: SemanticSwatchProps) => {
-  const containerStyle: CSSProperties = {
+  const swatchRowStyle: CSSProperties = {
     display: 'grid',
     gridTemplateColumns: '1fr 1fr',
     gap: '8px',
-    marginBottom: '16px',
   };
 
   const swatchContainerStyle: CSSProperties = {
     display: 'flex',
     flexDirection: 'column',
+    gap: '4px',
   };
 
-  const swatchStyle = (color: string): CSSProperties => ({
-    backgroundColor: color,
+  const swatchStyle: CSSProperties = {
     height: '80px',
     borderRadius: '8px',
     border: '1px solid rgba(0, 0, 0, 0.1)',
-    marginBottom: '8px',
-  });
-
-  const labelStyle: CSSProperties = {
-    fontSize: '14px',
-    fontWeight: '500',
-    marginBottom: '4px',
-    fontFamily: 'Inter, sans-serif',
-  };
-
-  const valueStyle: CSSProperties = {
-    fontSize: '11px',
-    fontFamily: 'monospace',
-    color: '#666',
   };
 
   const modeStyle: CSSProperties = {
     fontSize: '10px',
     textTransform: 'uppercase',
     color: '#999',
-    marginBottom: '4px',
     fontWeight: '600',
   };
 
+  const tokenStyle: CSSProperties = {
+    fontSize: '11px',
+    fontFamily: 'monospace',
+    color: '#666',
+  };
+
   const descStyle: CSSProperties = {
     fontSize: '12px',
     color: '#666',
     marginTop: '8px',
-    gridColumn: '1 / -1',
   };
 
   return (
-    <div>
+    <div style={containerStyle}>
       <div style={labelStyle}>{name}</div>
-      <div style={containerStyle}>
+      <div style={swatchRowStyle}>
+        {/* Light mode swatch — inherits default theme */}
         <div style={swatchContainerStyle}>
           <div style={modeStyle}>Light</div>
-          <div style={swatchStyle(lightValue)} />
-          <div style={valueStyle}>{lightValue}</div>
+          <div className={bgClass} style={swatchStyle} />
+          <div style={tokenStyle}>{name}</div>
         </div>
-        <div style={swatchContainerStyle}>
+        {/* Dark mode swatch — forced via data-theme="dark" */}
+        <div style={swatchContainerStyle} data-theme="dark">
           <div style={modeStyle}>Dark</div>
-          <div style={swatchStyle(darkValue)} />
-          <div style={valueStyle}>{darkValue}</div>
+          <div className={bgClass} style={swatchStyle} />
+          <div style={tokenStyle}>{name} [dark]</div>
         </div>
       </div>
       {description && <div style={descStyle}>{description}</div>}

package/src/stories/foundations/components/ElevationCard.tsx

@@ -1,11 +1,21 @@
 import { type CSSProperties } from 'react';
+import { css } from 'styled-system/css';
+
+// ── Pre-declared css() calls — Panda CSS statically extracts these ─────────
+export const elevationClasses: Record<string, string> = {
+  level0: css({ boxShadow: 'level0' }),
+  level1: css({ boxShadow: 'level1' }),
+  level2: css({ boxShadow: 'level2' }),
+  level3: css({ boxShadow: 'level3' }),
+  level4: css({ boxShadow: 'level4' }),
+  level5: css({ boxShadow: 'level5' }),
+};
 
 interface ElevationCardProps {
   level: string;
-  shadow: string;
 }
 
-export const ElevationCard = ({ level, shadow }: ElevationCardProps) => {
+export const ElevationCard = ({ level }: ElevationCardProps) => {
   const containerStyle: CSSProperties = {
     display: 'flex',
     flexDirection: 'column',
@@ -22,7 +32,7 @@ export const ElevationCard = ({ level, shadow }: ElevationCardProps) => {
     alignItems: 'center',
     justifyContent: 'center',
     marginBottom: '16px',
-    boxShadow: shadow === 'none' ? 'none' : shadow,
+    // boxShadow applied via className — reads from Panda CSS variable
   };
 
   const labelStyle: CSSProperties = {
@@ -33,34 +43,19 @@ export const ElevationCard = ({ level, shadow }: ElevationCardProps) => {
     color: '#333',
   };
 
-  const shadowValueStyle: CSSProperties = {
-    fontSize: '11px',
-    fontFamily: 'monospace',
-    color: '#666',
-    maxWidth: '300px',
-    textAlign: 'center',
-    wordBreak: 'break-word',
-    lineHeight: '1.5',
-  };
-
   return (
     <div style={containerStyle}>
       <div style={labelStyle}>{level}</div>
-      <div style={cardStyle}>
+      <div style={cardStyle} className={elevationClasses[level]}>
         <span style={{ color: '#999', fontSize: '14px' }}>
           {level === 'level0' ? 'No shadow' : 'Elevation'}
         </span>
       </div>
-      <div style={shadowValueStyle}>{shadow === 'none' ? 'none' : shadow}</div>
     </div>
   );
 };
 
-interface ElevationGridProps {
-  elevations: Record<string, string>;
-}
-
-export const ElevationGrid = ({ elevations }: ElevationGridProps) => {
+export const ElevationGrid = () => {
   const gridStyle: CSSProperties = {
     display: 'grid',
     gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
@@ -73,8 +68,10 @@ export const ElevationGrid = ({ elevations }: ElevationGridProps) => {
 
   return (
     <div style={gridStyle}>
-      {Object.entries(elevations).map(([level, shadow]) => (
-        <ElevationCard key={level} level={level} shadow={shadow} />
+      {(
+        ['level0', 'level1', 'level2', 'level3', 'level4', 'level5'] as const
+      ).map((level) => (
+        <ElevationCard key={level} level={level} />
       ))}
     </div>
   );

package/src/stories/foundations/components/SpacingBox.tsx

@@ -1,4 +1,18 @@
 import { type CSSProperties } from 'react';
+import { css } from 'styled-system/css';
+
+// ── Pre-declared css() calls — Panda CSS statically extracts these ─────────
+const spacingWidthClasses: Record<string, string> = {
+  none: css({ width: 'none' }),
+  xxs: css({ width: 'xxs' }),
+  xs: css({ width: 'xs' }),
+  sm: css({ width: 'sm' }),
+  md: css({ width: 'md' }),
+  lg: css({ width: 'lg' }),
+  xl: css({ width: 'xl' }),
+  xxl: css({ width: 'xxl' }),
+  xxxl: css({ width: 'xxxl' }),
+};
 
 interface SpacingBoxProps {
   name: string;
@@ -39,7 +53,6 @@ export const SpacingBox = ({ name, value }: SpacingBoxProps) => {
   };
 
   const boxStyle: CSSProperties = {
-    width: value,
     height: '40px',
     backgroundColor: '#4C662B',
     borderRadius: '4px',
@@ -64,7 +77,7 @@ export const SpacingBox = ({ name, value }: SpacingBoxProps) => {
         <div style={valueStyle}>{value}</div>
       </div>
       <div style={boxContainerStyle}>
-        <div style={boxStyle}>
+        <div style={boxStyle} className={spacingWidthClasses[name]}>
           <div style={dimensionStyle}>{value}</div>
         </div>
       </div>