@boostdev/design-system-components 1.0.2 → 1.1.0

package/src/components/interaction/form/Checkbox/Checkbox.native.spec.tsx

@@ -0,0 +1,42 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { Checkbox } from './Checkbox.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Checkbox (native)', () => {
+  it('has checkbox role with label', () => {
+    renderWithTheme(<Checkbox label="Accept terms" name="terms" />);
+    expect(screen.getByRole('checkbox', { name: 'Accept terms' })).toBeInTheDocument();
+  });
+
+  it('shows the checkmark when checked', () => {
+    renderWithTheme(<Checkbox label="Accept terms" name="terms" checked={true} />);
+    expect(screen.getByText('✓')).toBeInTheDocument();
+  });
+
+  it('hides the checkmark when unchecked', () => {
+    renderWithTheme(<Checkbox label="Accept terms" name="terms" checked={false} />);
+    expect(screen.queryByText('✓')).not.toBeInTheDocument();
+  });
+
+  it('checkmark uses theme color (contrast regression: was hardcoded #fff)', () => {
+    // Previously the checkmark had color: '#fff' hardcoded in the StyleSheet.
+    // Now it uses colors.colorOnInteractive from the theme, which is #000 in dark
+    // mode — fixing the 2.52:1 contrast failure on the dark interactive blue.
+    renderWithTheme(<Checkbox label="Accept terms" name="terms" checked={true} />);
+    const checkmark = screen.getByText('✓');
+    // The color must be applied as an inline style (overrides StyleSheet), not absent.
+    // In light mode colorOnInteractive=#fff; in dark mode it is #000.
+    expect(checkmark.style.color).toBeTruthy();
+  });
+
+  it('renders with error message', () => {
+    renderWithTheme(
+      <Checkbox label="Accept terms" name="terms" error="You must accept." />,
+    );
+    expect(screen.getByRole('alert')).toHaveTextContent('You must accept.');
+  });
+});

package/src/components/interaction/form/Checkbox/Checkbox.native.stories.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { Checkbox } from './Checkbox.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/Form/Checkbox',
+  component: Checkbox,
+  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Unchecked: Story = { args: { label: 'Accept terms', name: 'terms', checked: false } };
+export const Checked: Story = { args: { label: 'Accept terms', name: 'terms', checked: true } };
+export const Disabled: Story = { args: { label: 'Accept terms', name: 'terms', disabled: true } };
+export const DisabledChecked: Story = { args: { label: 'Accept terms', name: 'terms', checked: true, disabled: true } };
+export const WithError: Story = {
+  args: { label: 'Accept terms', name: 'terms', error: 'You must accept the terms.' },
+};
+export const WithHint: Story = {
+  args: { label: 'Subscribe to newsletter', name: 'newsletter', hint: 'Max one email per week.' },
+};
+export const Interactive: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return (
+      <ThemeProvider>
+        <Checkbox label="Accept terms and conditions" name="terms" checked={checked} onChange={setChecked} />
+      </ThemeProvider>
+    );
+  },
+};

package/src/components/interaction/form/Checkbox/Checkbox.native.tsx

@@ -0,0 +1,80 @@
+import { ReactNode } from 'react';
+import { StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { spacing, border } from '../../../../native/tokens';
+import { useTheme } from '../../../../native/ThemeContext';
+import { Label } from '../atoms/Label.native';
+import { Message } from '../atoms/Message.native';
+
+interface CheckboxProps {
+  label: ReactNode;
+  name: string;
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  error?: string;
+  hint?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const BOX = 22;
+
+const styles = StyleSheet.create({
+  container: {
+    gap: spacing.xxs,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+    minHeight: 44,
+  },
+  box: {
+    width: BOX,
+    height: BOX,
+    borderRadius: border.radius.xs,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  checkmark: {
+    fontSize: 14,
+    fontWeight: '700',
+    lineHeight: 16,
+  },
+});
+
+export function Checkbox({
+  label,
+  name,
+  checked = false,
+  onChange,
+  disabled = false,
+  error,
+  hint,
+  style,
+}: CheckboxProps) {
+  const { colors } = useTheme();
+
+  const borderColor = error ? colors.colorError : checked ? colors.colorInteractive : colors.colorBgSubtle;
+  const bgColor = checked ? colors.colorInteractive : 'transparent';
+
+  return (
+    <View style={[styles.container, style]}>
+      <Pressable
+        onPress={() => !disabled && onChange?.(!checked)}
+        accessibilityRole="checkbox"
+        accessibilityLabel={typeof label === 'string' ? label : name}
+        accessibilityState={{ checked, disabled }}
+        disabled={disabled}
+        style={({ pressed }) => [styles.row, pressed && { opacity: 0.7 }, disabled && { opacity: 0.4 }]}
+      >
+        <View style={[styles.box, { borderColor, backgroundColor: bgColor }]}>
+          {checked && <Label label="✓" style={[styles.checkmark, { color: colors.colorOnInteractive }]} />}
+        </View>
+        <Label label={label} />
+      </Pressable>
+      <Message type="error" message={error} />
+      <Message type="hint" message={hint} />
+    </View>
+  );
+}

package/src/components/interaction/form/Checkbox/Checkbox.stories.tsx

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

package/src/components/interaction/form/Checkbox/Checkbox.tsx

@@ -4,13 +4,13 @@ import { Message } from '../atoms/Message';
 import { Label } from '../atoms/Label';
 import { cn } from '@boostdev/design-system-foundation';
 import { InputContainer } from '../atoms/InputContainer';
+import type { WithClassName } from '../../../../types';
 
-interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+interface CheckboxProps extends WithClassName, Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
   label: ReactNode;
   name: string;
   error?: string;
   hint?: string;
-  className?: string;
 }
 
 export function Checkbox({ label, name, error, hint, className, ...props }: CheckboxProps) {

package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.mdx

@@ -0,0 +1,44 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './CheckboxGroup.stories';
+
+<Meta of={Stories} />
+
+# CheckboxGroup
+
+Groups multiple `Checkbox` inputs under a shared label. Renders a `<fieldset>` with a `<legend>` for accessible grouping.
+
+## When to use
+- Multi-select option sets where several choices can be active simultaneously
+- Any time two or more checkboxes share a common label or question
+
+## When not to use
+- A single independent toggle — use `Checkbox` on its own
+- Mutually exclusive choices — use `RadioGroup`
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### With error
+<Canvas of={Stories.WithError} />
+
+### With hint
+<Canvas of={Stories.WithHint} />
+
+### Required
+<Canvas of={Stories.Required} />
+
+### Disabled
+<Canvas of={Stories.Disabled} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Accessibility
+
+- Wraps checkboxes in a `<fieldset>` with a `<legend>` — screen readers announce the group label before each option
+- `disabled` on the group sets the HTML `disabled` attribute on the `<fieldset>`, which disables all child inputs
+- `aria-required` is set on the `<fieldset>` when `required` is true
+- Error and hint messages are linked via `aria-describedby`

package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css

@@ -12,13 +12,13 @@
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body--s);
     font-weight: var(--bds-font_weight--medium);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     padding: 0;
     margin-block-end: var(--bds-space_xs);
   }
 
   .required {
-    color: var(--bds-error);
+    color: var(--bds-color_error);
   }
 
   .items {

package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.stories.tsx

@@ -3,7 +3,7 @@ import { Checkbox } from '../Checkbox';
 import { CheckboxGroup } from './CheckboxGroup';
 
 const meta = {
-  title: 'Form/CheckboxGroup',
+  title: 'React/Form/CheckboxGroup',
   component: CheckboxGroup,
 } satisfies Meta<typeof CheckboxGroup>;
 

package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx

@@ -2,15 +2,15 @@ import { ReactNode, useId } from 'react';
 import css from './CheckboxGroup.module.css';
 import { Message } from '../atoms/Message';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../../types';
 
-export interface CheckboxGroupProps {
+export interface CheckboxGroupProps extends WithClassName {
   legend: string;
   children: ReactNode;
   error?: string;
   hint?: string;
   required?: boolean;
   disabled?: boolean;
-  className?: string;
 }
 
 export function CheckboxGroup({

package/src/components/interaction/form/Combobox/Combobox.mdx

@@ -29,6 +29,27 @@ Searchable select with type-ahead filtering. Combines a text input with a dropdo
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--combobox_color_bg`</td><td>`var(--bds-color_bg)`</td><td>Input background colour</td></tr>
+<tr><td>`--combobox_color`</td><td>`var(--bds-color_on-bg)`</td><td>Input text colour</td></tr>
+<tr><td>`--combobox_border`</td><td>`none`</td><td>Input border</td></tr>
+<tr><td>`--combobox_radius`</td><td>`var(--bdc-outline_radius)`</td><td>Input corner radius</td></tr>
+<tr><td>`--combobox_shadow`</td><td>`var(--bdc-outline_shadow)`</td><td>Input box shadow</td></tr>
+<tr><td>`--combobox_on-color`</td><td>`var(--bds-color_on-bg)`</td><td>Dropdown list text colour</td></tr>
+<tr><td>`--combobox_listbox-border`</td><td>`none`</td><td>Dropdown list border</td></tr>
+<tr><td>`--combobox_listbox-radius`</td><td>`var(--bdc-outline_radius)`</td><td>Dropdown list corner radius</td></tr>
+<tr><td>`--combobox_listbox-shadow`</td><td>`var(--bds-shadow_m)`</td><td>Dropdown list box shadow</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Input uses `role="combobox"` with `aria-autocomplete="list"` and `aria-controls`

package/src/components/interaction/form/Combobox/Combobox.module.css

@@ -25,8 +25,8 @@
     outline-offset: var(--bdc-outline_offset);
     border-radius: var(--combobox_radius, var(--bdc-outline_radius));
     box-shadow: var(--combobox_shadow, var(--bdc-outline_shadow));
-    background-color: var(--combobox_color_bg, var(--bds-bg));
-    color: var(--combobox_color, var(--bds-on-bg));
+    background-color: var(--combobox_color_bg, var(--bds-color_bg));
+    color: var(--combobox_color, var(--bds-color_on-bg));
     transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
                 background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
@@ -55,7 +55,7 @@
     display: flex;
     align-items: center;
     pointer-events: none;
-    color: var(--combobox_color, var(--bds-on-bg));
+    color: var(--combobox_color, var(--bds-color_on-bg));
   }
 
   .chevron svg {
@@ -81,8 +81,8 @@
     outline: var(--bdc-outline_width) solid var(--bdc_color);
     outline-offset: var(--bdc-outline_offset);
     border-radius: var(--combobox_listbox-radius, var(--bdc-outline_radius));
-    background-color: var(--combobox_color, var(--bds-bg));
-    color: var(--combobox_on-color, var(--bds-on-bg));
+    background-color: var(--combobox_color, var(--bds-color_bg));
+    color: var(--combobox_on-color, var(--bds-color_on-bg));
     box-shadow: var(--combobox_listbox-shadow, var(--bds-shadow_m));
   }
 
@@ -91,14 +91,14 @@
     align-items: center;
     padding: var(--bds-space_xs) var(--bds-space_m);
     font-size: var(--bds-font_size--body);
-    color: var(--combobox_color, var(--bds-on-bg));
+    color: var(--combobox_color, var(--bds-color_on-bg));
     cursor: pointer;
     transition: var(--bds-animation_transition);
   }
 
   .option.--highlighted {
-    background-color: var(--bds-bg--subtle);
-    color: var(--bds-interactive);
+    background-color: var(--bds-color_bg--subtle);
+    color: var(--bds-color_interactive_on-bg);
   }
 
   .option.--selected {

package/src/components/interaction/form/Combobox/Combobox.stories.tsx

@@ -12,7 +12,7 @@ const options = [
 ];
 
 const meta = {
-  title: 'Form/Combobox',
+  title: 'React/Form/Combobox',
   component: Combobox,
 } satisfies Meta<typeof Combobox>;
 

package/src/components/interaction/form/Combobox/Combobox.tsx

@@ -13,6 +13,7 @@ import { cn } from '@boostdev/design-system-foundation';
 import { InputContainer } from '../atoms/InputContainer';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
+import type { WithClassName } from '../../../../types';
 
 export interface ComboboxOption {
   value: string;
@@ -20,7 +21,7 @@ export interface ComboboxOption {
   disabled?: boolean;
 }
 
-interface ComboboxProps {
+interface ComboboxProps extends WithClassName {
   label: ReactNode;
   name: string;
   options: ComboboxOption[];
@@ -30,7 +31,6 @@ interface ComboboxProps {
   disabled?: boolean;
   error?: string;
   hint?: string;
-  className?: string;
 }
 
 export function Combobox({

package/src/components/interaction/form/FileInput/FileInput.mdx

@@ -31,6 +31,20 @@ File upload input with styled trigger button, hint, and error support.
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--fileInput_color`</td><td>`var(--bds-color_on-bg)`</td><td>Text colour</td></tr>
+<tr><td>`--fileInput_border-color`</td><td>`currentcolor`</td><td>Drop zone border colour</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Native `<input type="file">` — opens the OS file picker

package/src/components/interaction/form/FileInput/FileInput.module.css

@@ -8,7 +8,7 @@
     display: flex;
     align-items: center;
     font-family: var(--bds-font_family--body);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     margin-block-end: var(--bds-space_xs);
   }
 
@@ -21,7 +21,7 @@
     padding: var(--bds-space_l) var(--bds-space_m);
     border: 2px dashed currentcolor;
     border-radius: var(--bds-border_radius--s);
-    color: var(--fileInput_color, var(--bds-on-bg));
+    color: var(--fileInput_color, var(--bds-color_on-bg));
     cursor: pointer;
     text-align: center;
     transition: var(--bds-animation_transition);
@@ -39,7 +39,7 @@
   }
 
   .hasError {
-    border-color: var(--bds-error);
+    border-color: var(--bds-color_error);
   }
 
   .isDisabled {
@@ -55,17 +55,17 @@
 
   .prompt {
     font-size: var(--bds-font_size--body);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
   }
 
   .prompt strong {
-    color: var(--bds-interactive);
+    color: var(--bds-color_interactive_on-bg);
     font-weight: var(--bds-font_weight--semibold);
   }
 
   .acceptHint {
     font-size: var(--bds-font_size--body--s);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
   }
 
   .hiddenInput {
@@ -80,8 +80,8 @@
 
   @media (hover: hover) and (pointer: fine) {
     .dropZone:not(.isDisabled):hover {
-      border-color: var(--bds-interactive);
-      background-color: rgb(from var(--bds-interactive) r g b / 4%);
+      border-color: var(--bds-color_interactive);
+      background-color: rgb(from var(--bds-color_interactive) r g b / 4%);
     }
   }
 }

package/src/components/interaction/form/FileInput/FileInput.stories.tsx

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

package/src/components/interaction/form/FileInput/FileInput.tsx

@@ -3,8 +3,9 @@ import css from './FileInput.module.css';
 import { Message } from '../atoms/Message';
 import { InputContainer } from '../atoms/InputContainer';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../../types';
 
-interface FileInputProps {
+interface FileInputProps extends WithClassName {
   label: string;
   name: string;
   accept?: string;
@@ -14,7 +15,6 @@ interface FileInputProps {
   error?: string;
   hint?: string;
   onChange?: (files: FileList | null) => void;
-  className?: string;
 }
 
 export function FileInput({

package/src/components/interaction/form/FormInput/FormInput.module.css

@@ -18,8 +18,8 @@
     outline-offset: var(--bdc-outline_offset);
     border-radius: var(--input_radius, var(--bdc-outline_radius));
     box-shadow: var(--input_shadow, var(--bdc-outline_shadow));
-    color: var(--input_color, var(--bds-on-bg));
-    background-color: var(--input_color_bg, var(--bds-bg));
+    color: var(--input_color, var(--bds-color_on-bg));
+    background-color: var(--input_color_bg, var(--bds-color_bg));
     transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
                 background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }

package/src/components/interaction/form/FormInput/FormInput.stories.tsx

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

package/src/components/interaction/form/FormInput/FormInput.tsx

@@ -4,15 +4,15 @@ import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
 import { cn } from '@boostdev/design-system-foundation';
 import { InputContainer } from '../atoms/InputContainer';
+import type { WithClassName } from '../../../../types';
 
-interface FormInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+interface FormInputProps extends WithClassName, Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
   label: ReactNode;
   name: string;
   type?: Exclude<HTMLInputTypeAttribute, 'checkbox' | 'radio' | 'file'>;
   ariaLabel?: string;
   error?: string;
   hint?: string;
-  className?: string;
 }
 
 export function FormInput({

package/src/components/interaction/form/NumberInput/NumberInput.mdx

@@ -31,6 +31,22 @@ Numeric text input with increment/decrement stepper buttons. Enforces `min`, `ma
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--numberInput_color`</td><td>`var(--bds-color_on-bg)`</td><td>Text colour</td></tr>
+<tr><td>`--numberInput_border`</td><td>`none`</td><td>Border</td></tr>
+<tr><td>`--numberInput_radius`</td><td>`var(--bdc-outline_radius)`</td><td>Corner radius</td></tr>
+<tr><td>`--numberInput_shadow`</td><td>`var(--bdc-outline_shadow)`</td><td>Box shadow</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Renders `<input type="number">` — browser-native spinner support

package/src/components/interaction/form/NumberInput/NumberInput.module.css

@@ -37,7 +37,7 @@
     text-align: center;
     padding: var(--bds-space_s);
     background: transparent;
-    color: var(--numberInput_color, var(--bds-on-bg));
+    color: var(--numberInput_color, var(--bds-color_on-bg));
     min-width: 0;
     appearance: textfield;
   }
@@ -57,8 +57,8 @@
     align-items: center;
     justify-content: center;
     padding: var(--bds-space_xs);
-    background-color: var(--bds-bg--subtle);
-    color: var(--numberInput_color, var(--bds-on-bg));
+    background-color: var(--bds-color_bg--subtle);
+    color: var(--numberInput_color, var(--bds-color_on-bg));
     cursor: pointer;
     transition: var(--bds-animation_transition);
     flex-shrink: 0;
@@ -76,7 +76,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .stepper:not(:disabled):hover {
-      background-color: var(--bds-bg--subtle);
+      background-color: var(--bds-color_bg--subtle);
       opacity: 0.7;
     }
   }

package/src/components/interaction/form/NumberInput/NumberInput.stories.tsx

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

package/src/components/interaction/form/NumberInput/NumberInput.tsx

@@ -4,8 +4,9 @@ import {Label} from '../atoms/Label';
 import {Message} from '../atoms/Message';
 import {InputContainer} from '../atoms/InputContainer';
 import {cn} from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../../types';
 
-interface NumberInputProps {
+interface NumberInputProps extends WithClassName {
   label: string;
   name: string;
   value?: number;
@@ -17,7 +18,6 @@ interface NumberInputProps {
   error?: string;
   hint?: string;
   onChange?: (value: number) => void;
-  className?: string;
 }
 
 export function NumberInput({

package/src/components/interaction/form/Radio/Radio.mdx

@@ -46,9 +46,9 @@ Single-select option within a group. Renders a styled native `<input type="radio
 <tr><th>Variable</th><th>Default</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--radio_color-active`</td><td>`var(--bds-active)`</td><td>Selected fill and border colour</td></tr>
-<tr><td>`--radio_color-on-active`</td><td>`var(--bds-on-active)`</td><td>Inner dot colour</td></tr>
-<tr><td>`--radio_description-color`</td><td>`var(--bds-on-bg--subtle)`</td><td>Description text colour</td></tr>
+<tr><td>`--radio_color-active`</td><td>`var(--bdc-color_active)`</td><td>Selected fill and border colour</td></tr>
+<tr><td>`--radio_color-on-active`</td><td>`var(--bdc-color_on-active)`</td><td>Inner dot colour</td></tr>
+<tr><td>`--radio_description-color`</td><td>`var(--bds-color_on-bg--subtle)`</td><td>Description text colour</td></tr>
 </tbody>
 </table>