@boostdev/design-system-components 1.0.1 → 1.0.3

package/src/components/ui/ProgressCircle/ProgressCircle.module.css

@@ -11,11 +11,11 @@
   }
 
   .track {
-    stroke: var(--bds-bg--subtle);
+    stroke: var(--bds-color_bg--subtle);
   }
 
   .fill {
-    stroke: var(--progressCircle_color-active, var(--bds-active));
+    stroke: var(--progressCircle_color-active, var(--bds-color_green));
     transition: stroke-dashoffset var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 
@@ -24,7 +24,7 @@
     font-size: var(--bds-font_size--body--s);
     font-weight: var(--bds-font_weight--semibold);
     font-variant-numeric: tabular-nums;
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     line-height: 1;
   }
 

package/src/components/ui/Separator/Separator.module.css

@@ -1,7 +1,7 @@
 @layer component {
   .separator {
     border: none;
-    background-color: var(--separator_color, var(--bds-on-bg));
+    background-color: var(--separator_color, var(--bds-color_on-bg));
   }
 
   .separator.--horizontal {

package/src/components/ui/Skeleton/Skeleton.module.css

@@ -2,9 +2,9 @@
   .skeleton {
     background: linear-gradient(
       90deg,
-      var(--bds-grey--subtle) 25%,
-      var(--bds-bg) 50%,
-      var(--bds-grey--subtle) 75%
+      var(--bds-color_grey--subtle) 25%,
+      var(--bds-color_bg) 50%,
+      var(--bds-color_grey--subtle) 75%
     );
     background-size: 200% 100%;
     animation: shimmer 1.5s infinite;

package/src/components/ui/SkipLink/SkipLink.module.css

@@ -5,14 +5,14 @@
     inset-inline-start: var(--bds-space_s);
     z-index: var(--z_overlay);
     padding: var(--bds-space_xs) var(--bds-space_m);
-    background-color: var(--bds-bg);
-    color: var(--bds-on-bg);
+    background-color: var(--bds-color_bg);
+    color: var(--bds-color_on-bg);
     font-size: var(--bds-font_size--body);
     font-weight: var(--bds-font_weight--semibold);
     border-radius: var(--bds-border_radius--s);
     text-decoration: none;
 
-    --bdc_color: var(--color_focus, var(--bds-interactive));
+    --bdc_color: var(--color_focus, var(--bds-color_interactive));
 
     border: var(--skip-link_border, none);
     outline: var(--bdc-outline_width) solid var(--bdc_color);

package/src/components/ui/Table/Table.module.css

@@ -3,7 +3,7 @@
     width: 100%;
     overflow-x: auto;
     border: var(--table_border, none);
-    --bdc_color: var(--bds-bg--subtle);
+    --bdc_color: var(--bds-color_bg--subtle);
     --bdc-outline_radius: var(--bds-border_radius--s);
 
     outline: var(--bdc-outline_width) solid var(--bdc_color);
@@ -23,11 +23,11 @@
     text-align: start;
     padding: var(--bds-space_s) var(--bds-space_m);
     font-weight: var(--bds-font_weight--semibold);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
   }
 
   .thead {
-    background-color: var(--bds-bg--subtle);
+    background-color: var(--bds-color_bg--subtle);
   }
 
   .th {
@@ -35,9 +35,9 @@
     text-align: start;
     font-weight: var(--bds-font_weight--semibold);
     font-size: var(--bds-font_size--body--s);
-    color: var(--bds-on-bg--subtle);
+    color: var(--bds-color_on-bg--subtle);
     white-space: nowrap;
-    border-bottom: 1px solid var(--bds-bg--subtle);
+    border-bottom: 1px solid var(--bds-color_bg--subtle);
   }
 
   .th.--sortable {
@@ -52,7 +52,7 @@
     padding: var(--bds-space_s) var(--bds-space_m);
     width: 100%;
     cursor: pointer;
-    color: var(--bds-on-bg--subtle);
+    color: var(--bds-color_on-bg--subtle);
     font-weight: var(--bds-font_weight--semibold);
     font-size: var(--bds-font_size--body--s);
     transition: var(--bds-animation_transition);
@@ -66,7 +66,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .sortButton:hover {
-      color: var(--bds-on-bg);
+      color: var(--bds-color_on-bg);
     }
   }
 
@@ -80,7 +80,7 @@
 
   .sortIcon.--sort-active {
     opacity: 1;
-    color: var(--bds-interactive);
+    color: var(--bds-color_interactive);
   }
 
   .sortIcon.--sort-desc {
@@ -88,7 +88,7 @@
   }
 
   .tbody .tr {
-    border-bottom: 1px solid var(--bds-bg--subtle);
+    border-bottom: 1px solid var(--bds-color_bg--subtle);
     transition: var(--bds-animation_transition);
   }
 
@@ -98,13 +98,13 @@
 
   @media (hover: hover) and (pointer: fine) {
     .tbody .tr:hover {
-      background-color: var(--bds-bg--subtle);
+      background-color: var(--bds-color_bg--subtle);
     }
   }
 
   .td {
     padding: var(--bds-space_s) var(--bds-space_m);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     vertical-align: middle;
   }
 

package/src/components/ui/Tabs/Tabs.module.css

@@ -6,7 +6,7 @@
 
   .tabList {
     display: flex;
-    border-bottom: 1px solid var(--bds-bg--subtle);
+    border-bottom: 1px solid var(--bds-color_bg--subtle);
     gap: var(--bds-space_xxs);
   }
 
@@ -18,7 +18,7 @@
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
     font-weight: var(--bds-font_weight--semibold);
-    color: var(--tab_color, var(--bds-on-bg));
+    color: var(--tab_color, var(--bds-color_on-bg));
     border-bottom: 2px solid var(--tab_border-color, transparent);
     margin-bottom: -1px;
     cursor: pointer;
@@ -26,8 +26,8 @@
   }
 
   .tab.--active {
-    --tab_color:        var(--bds-interactive);
-    --tab_border-color: var(--bds-interactive);
+    --tab_color:        var(--bds-color_interactive_on-bg);
+    --tab_border-color: var(--bds-color_interactive);
   }
 
   .tab:disabled {
@@ -43,7 +43,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .tab:not(:disabled, .--active):hover {
-      --tab_color: var(--bds-interactive);
+      --tab_color: var(--bds-color_interactive_on-bg);
     }
   }
 

package/src/components/ui/Tooltip/Tooltip.module.css

@@ -10,8 +10,8 @@
     z-index: var(--bds-z-index_popover);
     padding: var(--bds-space_xxs) var(--bds-space_xs);
     border-radius: var(--bds-border_radius--xs);
-    background-color: var(--tooltip_bg, var(--bds-on-bg));
-    color: var(--tooltip_text, var(--bds-bg));
+    background-color: var(--tooltip_bg, var(--bds-color_on-bg));
+    color: var(--tooltip_text, var(--bds-color_bg));
     font-size: var(--bds-font_size--body--s);
     line-height: var(--bds-font_line-height--body);
     white-space: nowrap;

package/src/components/ui/Typography/Typography.module.css

@@ -2,7 +2,7 @@
   .typography {
     margin: 0;
     font-family: var(--bds-font_family--body);
-    color: var(--typography_color, var(--bds-on-bg));
+    color: var(--typography_color, var(--bds-color_on-bg));
   }
 
   .--h1 {

package/src/css/bdc.css

@@ -52,8 +52,8 @@
 
     /* Colour tokens (kept as --bdc_color — see naming note above) */
     --bdc_color:        currentcolor;
-    --bdc_color--focus: var(--bds-interactive);
-    --bdc_color--error: var(--bds-error);
+    --bdc_color--focus: var(--bds-color_interactive);
+    --bdc_color--error: var(--bds-color_error);
 
     /* Outline geometry */
     --bdc-outline_width:  1px;

package/src/index.ts

@@ -1,3 +1,5 @@
+import './css/bdc.css';
+
 // UI
 export { Accordion } from './components/ui/Accordion';
 export type { AccordionItem } from './components/ui/Accordion';

package/src/stories/DesignSystem/Borders.mdx

@@ -7,7 +7,7 @@ export const BorderDemo = ({ label, token, color = 'currentcolor', offset = '-1p
     <div style={{
       width: '8rem',
       height: '5rem',
-      background: 'var(--bds-bg)',
+      background: 'var(--bds-color_bg)',
       borderRadius: '0.5rem',
       outline: `${width} solid ${color}`,
       outlineOffset: offset,
@@ -64,11 +64,11 @@ Components use `outline` rather than `border` for their decorative edge. The rea
 
 ## Visual examples
 
-<div style={{ display: 'flex', gap: '2.5rem', flexWrap: 'wrap', padding: '2rem', background: 'var(--bds-bg--subtle)', borderRadius: '0.75rem', marginBottom: '2rem' }}>
+<div style={{ display: 'flex', gap: '2.5rem', flexWrap: 'wrap', padding: '2rem', background: 'var(--bds-color_bg--subtle)', borderRadius: '0.75rem', marginBottom: '2rem' }}>
   <BorderDemo label="Default" token="currentcolor" color="currentcolor" />
-  <BorderDemo label="Focus" token="--bdc_color--focus" color="var(--bds-interactive)" />
-  <BorderDemo label="Error" token="--bdc_color--error" color="var(--bds-error)" />
-  <BorderDemo label="Outer halo" token="--bdc-outline_offset: 2px" color="var(--bds-interactive)" offset="2px" width="2px" />
+  <BorderDemo label="Focus" token="--bdc_color--focus" color="var(--bds-color_interactive)" />
+  <BorderDemo label="Error" token="--bdc_color--error" color="var(--bds-color_error)" />
+  <BorderDemo label="Outer halo" token="--bdc-outline_offset: 2px" color="var(--bds-color_interactive)" offset="2px" width="2px" />
 </div>
 
 | State | `--bdc_color` resolves to | Trigger |
@@ -123,13 +123,13 @@ Override a component's border colour for a specific context by reassigning `--bd
 ```css
 /* Scoped to a single component instance */
 .my-context .my-input {
-  --bdc_color: var(--bds-warning);
+  --bdc_color: var(--bds-color_warning);
 }
 
 /* Override globally via the token layer */
 @layer tokens.override {
   :root {
-    --bdc_color: var(--bds-brand);
+    --bdc_color: var(--bds-color_green);
   }
 }
 ```

package/src/stories/DesignSystem/Colors.mdx

@@ -47,12 +47,12 @@ export const TokenRow = ({ token, description }) => (
 # Colours
 
 Colours are the most visible part of the design system.
-Every colour token comes in surface–content pairs: for every `--bds-*` there is a `--bds-on-*` that guarantees WCAG AA contrast.
+Every colour token comes in surface–content pairs: for every `--bds-color_*` there is a `--bds-color_on-*` that guarantees WCAG AA contrast.
 
 ```css
 .badge {
-  background-color: var(--bds-success--subtle);
-  color:            var(--bds-on-success--subtle); /* always legible */
+  background-color: var(--bds-color_success--subtle);
+  color:            var(--bds-color_on-success--subtle); /* always legible */
 }
 ```
 
@@ -63,57 +63,56 @@ These are the tokens you should use in component CSS. They adapt automatically t
 ### Brand & intent
 
 <SwatchRow>
-  <Swatch label="CTA / Active" token="--bds-cta" bg="var(--bds-cta)" text="var(--bds-on-cta)" />
-  <Swatch label="Interactive" token="--bds-interactive" bg="var(--bds-interactive)" text="var(--bds-on-interactive)" />
-  <Swatch label="Brand" token="--bds-brand" bg="var(--bds-brand)" text="var(--bds-on-brand)" />
+  <Swatch label="Interactive" token="--bds-color_interactive" bg="var(--bds-color_interactive)" text="var(--bds-color_on-interactive)" />
+  <Swatch label="Green (CTA)" token="--bds-color_green" bg="var(--bds-color_green)" text="var(--bds-color_on-green)" />
 </SwatchRow>
 
 ### Status
 
 <SwatchRow>
-  <Swatch label="Success" token="--bds-success" bg="var(--bds-success)" text="var(--bds-on-success)" />
-  <Swatch label="Warning" token="--bds-warning" bg="var(--bds-warning)" text="var(--bds-on-warning)" />
-  <Swatch label="Error" token="--bds-error" bg="var(--bds-error)" text="var(--bds-on-error)" />
-  <Swatch label="Important" token="--bds-important" bg="var(--bds-important)" text="var(--bds-on-important)" />
+  <Swatch label="Success" token="--bds-color_success" bg="var(--bds-color_success)" text="var(--bds-color_on-success)" />
+  <Swatch label="Warning" token="--bds-color_warning" bg="var(--bds-color_warning)" text="var(--bds-color_on-warning)" />
+  <Swatch label="Error" token="--bds-color_error" bg="var(--bds-color_error)" text="var(--bds-color_on-error)" />
+  <Swatch label="Important" token="--bds-color_important" bg="var(--bds-color_important)" text="var(--bds-color_on-important)" />
 </SwatchRow>
 
 ### Surface
 
 <SwatchRow>
-  <Swatch label="Background" token="--bds-bg" bg="var(--bds-bg)" text="var(--bds-on-bg)" />
-  <Swatch label="Subtle background" token="--bds-bg--subtle" bg="var(--bds-bg--subtle)" text="var(--bds-on-bg--subtle)" />
+  <Swatch label="Background" token="--bds-color_bg" bg="var(--bds-color_bg)" text="var(--bds-color_on-bg)" />
+  <Swatch label="Subtle background" token="--bds-color_bg--subtle" bg="var(--bds-color_bg--subtle)" text="var(--bds-color_on-bg--subtle)" />
 </SwatchRow>
 
 ### Neutral grey scale
 
 <SwatchRow>
-  <Swatch label="Grey subtle" token="--bds-grey--subtle" bg="var(--bds-grey--subtle)" text="var(--bds-on-grey--subtle)" />
-  <Swatch label="Grey" token="--bds-grey" bg="var(--bds-grey)" text="var(--bds-on-grey)" />
-  <Swatch label="Grey strong" token="--bds-grey--strong" bg="var(--bds-grey--strong)" text="var(--bds-on-grey--strong)" />
+  <Swatch label="Grey subtle" token="--bds-color_grey--subtle" bg="var(--bds-color_grey--subtle)" text="var(--bds-color_on-grey--subtle)" />
+  <Swatch label="Grey" token="--bds-color_grey" bg="var(--bds-color_grey)" text="var(--bds-color_on-grey)" />
+  <Swatch label="Grey strong" token="--bds-color_grey--strong" bg="var(--bds-color_grey--strong)" text="var(--bds-color_on-grey--strong)" />
 </SwatchRow>
 
 ### Green scale
 
 <SwatchRow>
-  <Swatch label="Green subtle" token="--bds-green--subtle" bg="var(--bds-green--subtle)" text="var(--bds-on-green--subtle)" />
-  <Swatch label="Green" token="--bds-green" bg="var(--bds-green)" text="var(--bds-on-green)" />
-  <Swatch label="Green strong" token="--bds-green--strong" bg="var(--bds-green--strong)" text="var(--bds-on-green--strong)" />
+  <Swatch label="Green subtle" token="--bds-color_green--subtle" bg="var(--bds-color_green--subtle)" text="var(--bds-color_on-green--subtle)" />
+  <Swatch label="Green" token="--bds-color_green" bg="var(--bds-color_green)" text="var(--bds-color_on-green)" />
+  <Swatch label="Green strong" token="--bds-color_green--strong" bg="var(--bds-color_green--strong)" text="var(--bds-color_on-green--strong)" />
 </SwatchRow>
 
 ### Blue scale
 
 <SwatchRow>
-  <Swatch label="Blue subtle" token="--bds-blue--subtle" bg="var(--bds-blue--subtle)" text="var(--bds-on-blue--subtle)" />
-  <Swatch label="Blue" token="--bds-blue" bg="var(--bds-blue)" text="var(--bds-on-blue)" />
-  <Swatch label="Blue strong" token="--bds-blue--strong" bg="var(--bds-blue--strong)" text="var(--bds-on-blue--strong)" />
+  <Swatch label="Blue subtle" token="--bds-color_blue--subtle" bg="var(--bds-color_blue--subtle)" text="var(--bds-color_on-blue--subtle)" />
+  <Swatch label="Blue" token="--bds-color_blue" bg="var(--bds-color_blue)" text="var(--bds-color_on-blue)" />
+  <Swatch label="Blue strong" token="--bds-color_blue--strong" bg="var(--bds-color_blue--strong)" text="var(--bds-color_on-blue--strong)" />
 </SwatchRow>
 
 ### Orange scale
 
 <SwatchRow>
-  <Swatch label="Orange subtle" token="--bds-orange--subtle" bg="var(--bds-orange--subtle)" text="var(--bds-on-orange--subtle)" />
-  <Swatch label="Orange" token="--bds-orange" bg="var(--bds-orange)" text="var(--bds-on-orange)" />
-  <Swatch label="Orange strong" token="--bds-orange--strong" bg="var(--bds-orange--strong)" text="var(--bds-on-orange--strong)" />
+  <Swatch label="Orange subtle" token="--bds-color_orange--subtle" bg="var(--bds-color_orange--subtle)" text="var(--bds-color_on-orange--subtle)" />
+  <Swatch label="Orange" token="--bds-color_orange" bg="var(--bds-color_orange)" text="var(--bds-color_on-orange)" />
+  <Swatch label="Orange strong" token="--bds-color_orange--strong" bg="var(--bds-color_orange--strong)" text="var(--bds-color_on-orange--strong)" />
 </SwatchRow>
 
 ---
@@ -182,15 +181,15 @@ These `--bds-BASE__color--*` tokens are the primitive values. **Do not use them
 
 ## Theming
 
-Override `--bds-cta` (and its `on-` pair) to change the primary action colour globally:
+Override `--bds-color_green` and `--bds-color_interactive` to change the primary action colour globally:
 
 ```css
 @layer tokens.override {
   :root {
-    --bds-cta:            var(--bds-BASE__color--blue);
-    --bds-on-cta:         var(--bds-BASE__color--white);
-    --bds-interactive:    var(--bds-BASE__color--blue);
-    --bds-on-interactive: var(--bds-BASE__color--white);
+    --bds-color_green:           var(--bds-BASE__color--blue);
+    --bds-color_on-green:         var(--bds-BASE__color--white);
+    --bds-color_interactive:     var(--bds-BASE__color--blue);
+    --bds-color_on-interactive: var(--bds-BASE__color--white);
   }
 }
 ```

package/src/stories/DesignSystem/Elevation.mdx

@@ -7,7 +7,7 @@ export const ShadowCard = ({ token, label }) => (
     <div style={{
       width: '8rem',
       height: '5rem',
-      background: 'var(--bds-bg)',
+      background: 'var(--bds-color_bg)',
       borderRadius: '0.75rem',
       boxShadow: `var(${token})`,
     }} />
@@ -23,7 +23,7 @@ export const RadiusBox = ({ token, label, value }) => (
     <div style={{
       width: '4rem',
       height: '4rem',
-      background: 'var(--bds-interactive)',
+      background: 'var(--bds-color_interactive)',
       borderRadius: `var(${token})`,
       opacity: 0.8,
     }} />
@@ -49,7 +49,7 @@ export const ZRow = ({ token, value, description }) => (
 
 Five shadow levels from subtle to dramatic. All values adapt to dark mode (higher opacity for visibility against dark surfaces).
 
-<div style={{ display: 'flex', gap: '2.5rem', flexWrap: 'wrap', padding: '2rem', background: 'var(--bds-bg--subtle)', borderRadius: '0.75rem', marginBottom: '2rem' }}>
+<div style={{ display: 'flex', gap: '2.5rem', flexWrap: 'wrap', padding: '2rem', background: 'var(--bds-color_bg--subtle)', borderRadius: '0.75rem', marginBottom: '2rem' }}>
   <ShadowCard token="--bds-shadow_s" label="Small" />
   <ShadowCard token="--bds-shadow_m" label="Medium" />
   <ShadowCard token="--bds-shadow_l" label="Large" />
@@ -69,7 +69,7 @@ Five shadow levels from subtle to dramatic. All values adapt to dark mode (highe
 
 ## Border radius
 
-<div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap', padding: '2rem', background: 'var(--bds-bg--subtle)', borderRadius: '0.75rem', marginBottom: '2rem' }}>
+<div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap', padding: '2rem', background: 'var(--bds-color_bg--subtle)', borderRadius: '0.75rem', marginBottom: '2rem' }}>
   <RadiusBox token="--bds-border_radius--xs" label="X-Small" value="0.25rem / 4px" />
   <RadiusBox token="--bds-border_radius--s" label="Small" value="0.75rem / 12px" />
   <RadiusBox token="--bds-border_radius--m" label="Medium" value="1rem / 16px" />

package/src/stories/DesignSystem/Grid.mdx

@@ -2,11 +2,11 @@ import { Meta } from '@storybook/blocks';
 
 <Meta title="Design System/Grid" />
 
-export const GridCell = ({ span, label, color = 'var(--bds-interactive)' }) => (
+export const GridCell = ({ span, label, color = 'var(--bds-color_interactive)' }) => (
   <div style={{
     gridColumn: span,
     background: color,
-    color: 'var(--bds-on-interactive)',
+    color: 'var(--bds-color_on-interactive)',
     borderRadius: '0.25rem',
     padding: '0.5rem 0.75rem',
     fontSize: '0.75rem',
@@ -23,7 +23,7 @@ export const GridDemo = ({ children }) => (
     gridTemplateColumns: 'repeat(12, 1fr)',
     gap: '0.5rem',
     padding: '1rem',
-    background: 'var(--bds-bg--subtle)',
+    background: 'var(--bds-color_bg--subtle)',
     borderRadius: '0.5rem',
     marginBottom: '1.5rem',
   }}>
@@ -69,14 +69,14 @@ The grid system is responsive and built entirely on CSS custom properties. It ad
 
 <GridDemo>
   <GridCell span="span 9" label="span 75%" />
-  <GridCell span="span 3" label="25%" color="var(--bds-grey)" />
+  <GridCell span="span 3" label="25%" color="var(--bds-color_grey)" />
 </GridDemo>
 
 ### Two thirds — `--bds-grid_span-66`
 
 <GridDemo>
   <GridCell span="span 8" label="span 66%" />
-  <GridCell span="span 4" label="33%" color="var(--bds-grey)" />
+  <GridCell span="span 4" label="33%" color="var(--bds-color_grey)" />
 </GridDemo>
 
 ### Half and half — `--bds-grid_span-50`

package/src/stories/DesignSystem/Motion.mdx

@@ -7,7 +7,7 @@ export const AnimDemo = ({ label, token, animationStyle }) => (
     <div style={{
       width: '3rem',
       height: '3rem',
-      background: 'var(--bds-interactive)',
+      background: 'var(--bds-color_interactive)',
       borderRadius: '0.5rem',
       animation: animationStyle,
       opacity: 0.9,
@@ -47,7 +47,7 @@ export const AnimDemo = ({ label, token, animationStyle }) => (
 
 The foundation ships six named keyframes.
 
-<div style={{ display: 'flex', gap: '3rem', flexWrap: 'wrap', padding: '2rem', background: 'var(--bds-bg--subtle)', borderRadius: '0.75rem', marginBottom: '2rem' }}>
+<div style={{ display: 'flex', gap: '3rem', flexWrap: 'wrap', padding: '2rem', background: 'var(--bds-color_bg--subtle)', borderRadius: '0.75rem', marginBottom: '2rem' }}>
   <AnimDemo label="bounce" animationStyle="bounce 1s ease-out infinite" />
   <AnimDemo label="rotate" animationStyle="rotate 2s linear infinite" />
   <AnimDemo label="fade-zoom" animationStyle="fade-zoom 2s ease-in-out infinite" />

package/src/stories/DesignSystem/Overview.mdx

@@ -81,7 +81,7 @@ Override any token in your own layer to retheme:
 @layer tokens.override {
   :root {
     --bds-cta:    var(--bds-BASE__color--blue);
-    --bds-on-cta: var(--bds-BASE__color--white);
+    --bds-color_on-green: var(--bds-BASE__color--white);
   }
 }
 ```

package/src/stories/DesignSystem/Spacing.mdx

@@ -3,10 +3,10 @@ import { Meta } from '@storybook/blocks';
 <Meta title="Design System/Spacing" />
 
 export const SpaceStep = ({ token, mobile, tablet, desktop }) => (
-  <div style={{ display: 'grid', gridTemplateColumns: '10rem auto 1fr', gap: '0 1.5rem', alignItems: 'center', padding: '0.625rem 0', borderBottom: '1px solid var(--bds-grey--subtle)' }}>
+  <div style={{ display: 'grid', gridTemplateColumns: '10rem auto 1fr', gap: '0 1.5rem', alignItems: 'center', padding: '0.625rem 0', borderBottom: '1px solid var(--bds-color_grey--subtle)' }}>
     <code style={{ fontSize: '0.75rem' }}>{token}</code>
-    <div style={{ width: `var(${token})`, height: '1.25rem', background: 'var(--bds-interactive)', borderRadius: '0.125rem', minWidth: '2px' }} />
-    <div style={{ fontSize: '0.75rem', color: 'var(--bds-grey)', fontFamily: 'monospace' }}>
+    <div style={{ width: `var(${token})`, height: '1.25rem', background: 'var(--bds-color_interactive)', borderRadius: '0.125rem', minWidth: '2px' }} />
+    <div style={{ fontSize: '0.75rem', color: 'var(--bds-color_grey)', fontFamily: 'monospace' }}>
       {mobile}{tablet !== mobile ? ` → ${tablet}` : ''}{desktop !== tablet ? ` → ${desktop}` : ''}
     </div>
   </div>

package/src/stories/DesignSystem/Typography.mdx

@@ -3,8 +3,8 @@ import { Meta } from '@storybook/blocks';
 <Meta title="Design System/Typography" />
 
 export const TypeScale = ({ token, label, style = {} }) => (
-  <div style={{ display: 'grid', gridTemplateColumns: '10rem 1fr', gap: '0.5rem 1.5rem', alignItems: 'baseline', padding: '0.75rem 0', borderBottom: '1px solid var(--bds-grey--subtle)' }}>
-    <div style={{ fontSize: '0.75rem', fontFamily: 'monospace', color: 'var(--bds-on-bg--muted, var(--bds-grey))', lineHeight: 1.4 }}>
+  <div style={{ display: 'grid', gridTemplateColumns: '10rem 1fr', gap: '0.5rem 1.5rem', alignItems: 'baseline', padding: '0.75rem 0', borderBottom: '1px solid var(--bds-color_grey--subtle)' }}>
+    <div style={{ fontSize: '0.75rem', fontFamily: 'monospace', color: 'var(--bds-on-bg--muted, var(--bds-color_grey))', lineHeight: 1.4 }}>
       {token}
     </div>
     <div style={{ fontFamily: 'var(--bds-font_family--body)', fontSize: `var(${token})`, ...style }}>
@@ -14,8 +14,8 @@ export const TypeScale = ({ token, label, style = {} }) => (
 );
 
 export const WeightSample = ({ weight, token, label }) => (
-  <div style={{ display: 'grid', gridTemplateColumns: '12rem 1fr', gap: '0.5rem 1.5rem', alignItems: 'baseline', padding: '0.75rem 0', borderBottom: '1px solid var(--bds-grey--subtle)' }}>
-    <div style={{ fontSize: '0.75rem', fontFamily: 'monospace', color: 'var(--bds-grey)' }}>
+  <div style={{ display: 'grid', gridTemplateColumns: '12rem 1fr', gap: '0.5rem 1.5rem', alignItems: 'baseline', padding: '0.75rem 0', borderBottom: '1px solid var(--bds-color_grey--subtle)' }}>
+    <div style={{ fontSize: '0.75rem', fontFamily: 'monospace', color: 'var(--bds-color_grey)' }}>
       <div>{token}</div>
       <div style={{ opacity: 0.7 }}>{weight}</div>
     </div>
@@ -26,8 +26,8 @@ export const WeightSample = ({ weight, token, label }) => (
 );
 
 export const TrackingSample = ({ token, label, value }) => (
-  <div style={{ display: 'grid', gridTemplateColumns: '12rem 1fr', gap: '0.5rem 1.5rem', alignItems: 'baseline', padding: '0.75rem 0', borderBottom: '1px solid var(--bds-grey--subtle)' }}>
-    <div style={{ fontSize: '0.75rem', fontFamily: 'monospace', color: 'var(--bds-grey)' }}>
+  <div style={{ display: 'grid', gridTemplateColumns: '12rem 1fr', gap: '0.5rem 1.5rem', alignItems: 'baseline', padding: '0.75rem 0', borderBottom: '1px solid var(--bds-color_grey--subtle)' }}>
+    <div style={{ fontSize: '0.75rem', fontFamily: 'monospace', color: 'var(--bds-color_grey)' }}>
       <div>{token}</div>
       <div style={{ opacity: 0.7 }}>{value}</div>
     </div>