@boostdev/design-system-components 1.0.2 → 1.1.0

package/src/components/ui/Table/Table.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import css from './Table.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
 export interface TableColumn<Row> {
   key: string;
@@ -9,14 +10,13 @@ export interface TableColumn<Row> {
   render?: (row: Row) => ReactNode;
 }
 
-interface TableProps<Row extends Record<string, unknown>> {
+interface TableProps<Row extends Record<string, unknown>> extends WithClassName {
   columns: TableColumn<Row>[];
   rows: Row[];
   caption?: string;
   sortKey?: string;
   sortDirection?: 'asc' | 'desc';
   onSort?: (key: string, direction: 'asc' | 'desc') => void;
-  className?: string;
 }
 
 export function Table<Row extends Record<string, unknown>>({

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;
@@ -27,7 +27,7 @@
 
   .tab.--active {
     --tab_color:        var(--bds-color_interactive_on-bg);
-    --tab_border-color: var(--bds-interactive);
+    --tab_border-color: var(--bds-color_interactive);
   }
 
   .tab:disabled {

package/src/components/ui/Tabs/Tabs.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Tabs } from './Tabs';
 
 const meta = {
-  title: 'UI/Tabs',
+  title: 'React/UI/Tabs',
   component: Tabs,
 } satisfies Meta<typeof Tabs>;
 

package/src/components/ui/Tabs/Tabs.tsx

@@ -1,6 +1,7 @@
 import { KeyboardEvent, ReactNode, useId, useRef, useState } from 'react';
 import css from './Tabs.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
 export interface TabItem {
   id: string;
@@ -9,10 +10,9 @@ export interface TabItem {
   disabled?: boolean;
 }
 
-interface TabsProps {
+interface TabsProps extends WithClassName {
   tabs: TabItem[];
   defaultTab?: string;
-  className?: string;
 }
 
 export function Tabs({ tabs, defaultTab, className }: Readonly<TabsProps>) {

package/src/components/ui/Tooltip/Tooltip.mdx

@@ -36,6 +36,20 @@ Short contextual label that appears on hover or focus. Use to supplement icon bu
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--tooltip_bg`</td><td>`var(--bds-color_on-bg)`</td><td>Tooltip background colour</td></tr>
+<tr><td>`--tooltip_text`</td><td>`var(--bds-color_bg)`</td><td>Tooltip text colour</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Tooltip content is linked via `aria-describedby` on the trigger element

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/Tooltip/Tooltip.stories.tsx

@@ -3,7 +3,7 @@ import { Tooltip } from './Tooltip';
 import { Button } from '../../interaction/Button/Button';
 
 const meta = {
-  title: 'UI/Tooltip',
+  title: 'React/UI/Tooltip',
   component: Tooltip,
   argTypes: {
     placement: { control: 'radio', options: ['top', 'bottom', 'left', 'right'] },

package/src/components/ui/Tooltip/Tooltip.tsx

@@ -1,12 +1,12 @@
 import { ReactElement, ReactNode, cloneElement, isValidElement, useId, useState } from 'react';
 import css from './Tooltip.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-interface TooltipProps {
+interface TooltipProps extends WithClassName {
   content: ReactNode;
   placement?: 'top' | 'bottom' | 'left' | 'right';
   children: ReactElement;
-  className?: string;
 }
 
 export function Tooltip({

package/src/components/ui/Typography/Typography.mdx

@@ -35,6 +35,19 @@ Renders a text element with a design-system variant. Decouples visual style from
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--typography_color`</td><td>`var(--bds-color_on-bg)`</td><td>Text colour override</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Defaults to the semantically correct element for each variant (`h1`–`h3`, `p`)

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/components/ui/Typography/Typography.native.stories.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Typography } from './Typography.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/UI/Typography',
+  component: Typography,
+  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    variant: { control: 'select', options: ['h1', 'h2', 'h3', 'body', 'body_s'] },
+  },
+} satisfies Meta<typeof Typography>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Heading1: Story = { args: { children: 'Heading 1', variant: 'h1' } };
+export const Heading2: Story = { args: { children: 'Heading 2', variant: 'h2' } };
+export const Heading3: Story = { args: { children: 'Heading 3', variant: 'h3' } };
+export const Body: Story = { args: { children: 'The quick brown fox jumps over the lazy dog.', variant: 'body' } };
+export const BodySmall: Story = { args: { children: 'The quick brown fox jumps over the lazy dog.', variant: 'body_s' } };
+export const AllVariants: Story = {
+  args: { children: '' },
+  render: () => (
+    <ThemeProvider>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        <Typography variant="h1">Heading 1</Typography>
+        <Typography variant="h2">Heading 2</Typography>
+        <Typography variant="h3">Heading 3</Typography>
+        <Typography variant="body">Body — The quick brown fox jumps over the lazy dog.</Typography>
+        <Typography variant="body_s">Body Small — The quick brown fox jumps over the lazy dog.</Typography>
+      </div>
+    </ThemeProvider>
+  ),
+};

package/src/components/ui/Typography/Typography.native.tsx

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+import { StyleSheet, Text, StyleProp, TextStyle } from 'react-native';
+import { font, lineHeight } from '../../../native/tokens';
+import { useTheme } from '../../../native/ThemeContext';
+
+type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body' | 'body_s';
+
+interface TypographyProps {
+  variant?: TypographyVariant;
+  children: ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+const styles = StyleSheet.create({
+  base: {
+    fontFamily: font.family.body,
+    fontWeight: font.weight.body,
+  },
+  h1: {
+    fontSize: font.size.heading1,
+    fontFamily: font.family.heading,
+    fontWeight: font.weight.heading,
+    lineHeight: lineHeight.heading1,
+  },
+  h2: {
+    fontSize: font.size.heading2,
+    fontFamily: font.family.heading,
+    fontWeight: font.weight.heading,
+    lineHeight: lineHeight.heading2,
+  },
+  h3: {
+    fontSize: font.size.heading3,
+    fontFamily: font.family.heading,
+    fontWeight: font.weight.heading,
+    lineHeight: lineHeight.heading3,
+  },
+  body: {
+    fontSize: font.size.body,
+    lineHeight: lineHeight.body,
+  },
+  body_s: {
+    fontSize: font.size.bodyS,
+    lineHeight: lineHeight.bodyS,
+  },
+});
+
+const accessibilityRoles: Record<TypographyVariant, 'header' | 'text'> = {
+  h1: 'header',
+  h2: 'header',
+  h3: 'header',
+  body: 'text',
+  body_s: 'text',
+};
+
+export function Typography({ variant = 'body', children, style }: TypographyProps) {
+  const { colors } = useTheme();
+  return (
+    <Text
+      accessibilityRole={accessibilityRoles[variant]}
+      style={[styles.base, styles[variant], { color: colors.colorOnBg }, style]}
+    >
+      {children}
+    </Text>
+  );
+}

package/src/components/ui/Typography/Typography.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Typography } from './Typography';
 
 const meta = {
-  title: 'UI/Typography',
+  title: 'React/UI/Typography',
   component: Typography,
   argTypes: {
     variant: { control: 'select', options: ['h1', 'h2', 'h3', 'body', 'body_s'] },

package/src/components/ui/Typography/Typography.tsx

@@ -1,14 +1,14 @@
 import { ReactNode, ElementType } from 'react';
 import css from './Typography.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
 type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body' | 'body_s';
 
-interface TypographyProps {
+interface TypographyProps extends WithClassName {
   variant?: TypographyVariant;
   component?: ElementType;
   children: ReactNode;
-  className?: string;
 }
 
 const variantToElement: Record<TypographyVariant, ElementType> = {

package/src/css/bdc.css

@@ -52,8 +52,16 @@
 
     /* 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);
+
+    /* Active / selected state colours — override these to theme all filled form controls globally */
+    --bdc-color_active:            var(--bds-color_green);
+    --bdc-color_on-active:         var(--bds-color_on-green);
+    --bdc-color_active--subtle:    var(--bds-color_green--subtle);
+    --bdc-color_on-active--subtle: var(--bds-color_on-green--subtle);
+    --bdc-color_active--strong:    var(--bds-color_green--strong);
+    --bdc-color_on-active--strong: var(--bds-color_on-green--strong);
 
     /* 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';
@@ -71,3 +73,4 @@ export type { IconWrapperProps } from './components/layout/IconWrapper';
 
 // Utilities
 export { cn } from '@boostdev/design-system-foundation';
+export type { WithClassName } from './types';

package/src/native/ThemeContext.tsx

@@ -0,0 +1,28 @@
+import { createContext, ReactNode, useContext, useMemo } from 'react';
+import { useColorScheme } from 'react-native';
+import { colors } from './tokens';
+
+type ThemeColors = typeof colors.light | typeof colors.dark;
+
+interface ThemeContextValue {
+  colors: ThemeColors;
+  isDark: boolean;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const scheme = useColorScheme();
+  const isDark = scheme === 'dark';
+  const value = useMemo<ThemeContextValue>(
+    () => ({ colors: isDark ? colors.dark : colors.light, isDark }),
+    [isDark],
+  );
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error('useTheme must be used within ThemeProvider');
+  return ctx;
+}

package/src/native/tokens.ts

@@ -0,0 +1,13 @@
+import { colors, spacing, font, border, zIndex, animation } from '@boostdev/design-system-foundation/native';
+
+export { colors, spacing, font, border, zIndex, animation };
+
+/** Absolute lineHeight values for React Native (ratio × fontSize). */
+export const lineHeight = {
+  display: Math.round(font.size.display * font.lineHeight.display),
+  heading1: Math.round(font.size.heading1 * font.lineHeight.heading),
+  heading2: Math.round(font.size.heading2 * font.lineHeight.heading),
+  heading3: Math.round(font.size.heading3 * font.lineHeight.heading),
+  body: Math.round(font.size.body * font.lineHeight.body),
+  bodyS: Math.round(font.size.bodyS * font.lineHeight.body),
+} as const;

package/src/native.ts

@@ -0,0 +1,39 @@
+// React Native component barrel
+// Explicitly imports *.native.tsx variants so tsup compiles them into dist/native/index.js.
+// Metro resolves this via the "react-native" export condition in package.json.
+
+// Infrastructure
+export { ThemeProvider, useTheme } from './native/ThemeContext';
+
+// UI
+export { Typography } from './components/ui/Typography/Typography.native';
+export { Badge } from './components/ui/Badge/Badge.native';
+export { Avatar } from './components/ui/Avatar/Avatar.native';
+export { Separator } from './components/ui/Separator/Separator.native';
+export { Loading } from './components/ui/Loading/Loading.native';
+export { Progress } from './components/ui/Progress/Progress.native';
+export { Skeleton } from './components/ui/Skeleton/Skeleton.native';
+export { Alert } from './components/ui/Alert/Alert.native';
+export { NotificationBanner } from './components/ui/NotificationBanner/NotificationBanner.native';
+
+// Layout
+export { Card } from './components/layout/Card/Card.native';
+export { SectionHeader } from './components/layout/SectionHeader/SectionHeader.native';
+export { IconWrapper } from './components/layout/IconWrapper/IconWrapper.native';
+export type { IconWrapperProps } from './components/layout/IconWrapper/IconWrapper.native';
+export { ButtonGroup } from './components/layout/ButtonGroup/ButtonGroup.native';
+export type { ButtonGroupProps } from './components/layout/ButtonGroup/ButtonGroup.native';
+
+// Interaction
+export { Button } from './components/interaction/Button/Button.native';
+export type { ButtonProps } from './components/interaction/Button/Button.native';
+export { Switch } from './components/interaction/form/Switch/Switch.native';
+export { Checkbox } from './components/interaction/form/Checkbox/Checkbox.native';
+export { Radio } from './components/interaction/form/Radio/Radio.native';
+
+// Atoms
+export { Label } from './components/interaction/form/atoms/Label.native';
+export { Message } from './components/interaction/form/atoms/Message.native';
+
+// Tokens (re-exported for convenience)
+export { colors, spacing, font, border, zIndex, animation, lineHeight } from './native/tokens';

package/src/react-augment.d.ts

@@ -0,0 +1,13 @@
+// This file MUST be a module (not a global script) so that `declare module 'react'`
+// is treated as an augmentation that merges with @types/react rather than as an
+// ambient module declaration that would shadow @types/react entirely.
+// The `export {}` below is what makes TypeScript treat this as a module.
+export {};
+
+// CSS Anchor Positioning properties — not yet in React's CSSProperties types.
+declare module 'react' {
+  interface CSSProperties {
+    anchorName?: string;
+    positionAnchor?: string;
+  }
+}

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);
   }
 }
 ```