atoms

v33.10.0

Jul 4, 2025

Box, atoms: Add sticky to position.

EXAMPLE USAGE:

<Box position="sticky" top={0} ... />

Box, atoms: Deprecate outline value none, and boxShadow value outlineFocus.

Previously it was recommended to hide an element's outline in favour of using boxShadow="outlineFocus".

Braid now leverages the outline property directly, managing focus rings of interactive elements as part of its scoped CSS reset.

MIGRATION GUIDE:

For styling the focus ring via Box:
1. Remove usage of outline="none" and boxShadow="outlineFocus"
2. Refer to focus outlines for guidance on leveraging Braid's focus outline styles.
- <Box outline="none" className={styles.customFocusStyles} /> + <Box />
For styling the focus outline of an element based on the focus of another element, see outlineStyle.

v33.0.0

Oct 15, 2024

Box, atoms: Add content to maxWidth

Add the content option to the maxWidth property on the styling atoms. This will ensure an element is only as wide as its content.

EXAMPLE USAGE:

<Box maxWidth="content" />

import { atoms } from 'braid-design-system/css';

atoms({
  maxWidth: 'content',
})

Box, atoms: Add responsive gap support

Add the gap property to the available styling atoms, inclusive of responsive spacing values.

EXAMPLE USAGE:

<Box gap="small" />

import { atoms } from 'braid-design-system/css';

atoms({ gap: 'small' });

v32.3.0

Apr 6, 2023

Box, atoms: Add borderBrandAccent variants to available boxShadows

Add borderBrandAccent and borderBrandAccentLight to the available boxShadows, combining the brandAccent and brandAccentLight border colours with the standard border width token. Previously, brandAccent was only available with the large border width.

EXAMPLE USAGE:

<Box boxShadow="borderBrandAccent" />
{/* or */}
<Box boxShadow="borderBrandAccentLight" />

import { atoms } from 'braid-design-system/css';

atoms({ boxShadow: 'borderBrandAccent' });
atoms({ boxShadow: 'borderBrandAccentLight' });

v32.2.0

Mar 31, 2023

Box, atoms, vars: Add small to border radius scale

Extends the border radius scale to include small as a step below standard. This addition is to support an upcoming design uplift that requires greater fidelity in the scale. Note, the new value is also available as a responsive property.

EXAMPLE USAGE:

<Box borderRadius="small" />

{/* Or responsively: */}
<Box borderRadius={{ mobile: 'small', tablet: 'standard' }} />

import { atoms } from 'braid-design-system/css';

atoms({ borderRadius: 'small' })

import { vars } from 'braid-design-system/css';

const radius = vars.borderRadius.small;

Add xxxlarge to the space scale

Extends the range of the space scale to include xxxlarge. This addition is to support an upcoming design uplift that requires greater fidelity in the scale. Note, the new value is also available as a responsive property.

EXAMPLE USAGE:

<Stack space="xxxlarge">...</Stack>

{/* Or responsively: */}
<Stack space={{ mobile: 'large', tablet: 'xxxlarge' }}>...</Stack>

import { atoms } from 'braid-design-system/css';

atoms({ paddingY: 'xxxlarge' })

import { vars } from 'braid-design-system/css';

const space = vars.space.xxxlarge;

v31.19.0

Oct 27, 2022

Box, atoms: Remove native buttons on number input field

Extends the CSS reset behaviour of HTML input fields where type="number" to remove the native increment and decrement buttons.

EXAMPLE USAGE: The following will now render a HTML input of type number without native buttons:
<Box component="input" type="number" />
Additionally, if using the atoms function to build styles, when resetting an input field, the native buttons will also be removed.
const customClasses = atoms({ reset: 'input', ... });

v31.6.0

Feb 25, 2022

Box, BoxRenderer, atoms: Add support for inset shorthand

Introduces the inset shorthand as a convenience for applying top, bottom, left and right properties.

EXAMPLE USAGE:

<Box position="absolute" inset={0} />

atoms({
  position: 'absolute',
  inset: 0,
})

v31.0.0

Nov 23, 2021

atoms: Add boxShadow border variants

New boxShadows The following box shadows are now available:
- borderBrandAccentLightLarge
- borderCriticalLightLarge
- borderFormAccentLight
- borderFormAccentLightLarge

Box, atoms, vars: Update theme colour tokens with improved semantics.

Simplifies the semantics of the colour-based tokens to support upcoming colour mode work. Changes to the property values on backgroundColor and borderColor has flow on affects to the apis on Box and atoms.

TOKEN CHANGES

New

backgroundColor: surface, neutralSoft
borderColor: neutral, neutralInverted, neutralLight

Removed

backgroundColor: card, formAccentDisabled, input, inputDisabled, selection
borderColor: formHover, standard, standardInverted

MIGRATION GUIDE

Migration can largely be automated by running the Braid upgrade command. You must provide a glob to target your project’s source files. For example:

yarn braid-upgrade v31 "**/*.{ts,tsx}"

It may be necessary to manually migrate code in some cases, here are the affected use cases:

Box backgrounds

- <Box background="card" />
+ <Box background="surface" />

- <Box background="formAccentDisabled" />
+ <Box background="neutralLight" />

- <Box background="input" />
+ <Box background="surface" />

- <Box background="inputDisabled" />
+ <Box background="neutralSoft" />

- <Box background="selection" />
+ <Box background="formAccentSoft" />

Box boxShadows

- <Box boxShadow="borderStandard" />
+ <Box boxShadow="borderNeutralLight" />

- <Box boxShadow="borderStandardInverted" />
+ <Box boxShadow="borderNeutralInverted" />

- <Box boxShadow="borderStandardInvertedLarge" />
+ <Box boxShadow="borderNeutralInvertedLarge" />

- <Box boxShadow="borderFormHover" />
+ <Box boxShadow="borderFormAccent" />

vars

- vars.borderColor.standard
+ vars.borderColor.neutralLight

- vars.borderColor.standardInverted
+ vars.borderColor.neutralInverted

- vars.borderColor.formHover
+ vars.borderColor.formAccent

atoms

 atoms({
-  boxShadow: 'borderStandard',
+  boxShadow: 'borderNeutralLight',
 });

 atoms({
-  boxShadow: 'borderStandardInverted',
+  boxShadow: 'borderNeutralInverted',
 });

 atoms({
-  boxShadow: 'borderStandardInvertedLarge',
+  boxShadow: 'borderNeutralInvertedLarge',
 });

 atoms({
-  boxShadow: 'borderFormHover',
+  boxShadow: 'borderFormAccent',
 });

v30.4.0

Aug 20, 2021

atoms: Add new boxShadow values:
- borderCautionLight
- borderCriticalLight
- borderInfoLight
- borderPositiveLight
- borderPromoteLight
Box, atoms, vars: Add large and xlarge to borderRadius scale
apac and seekBusiness themes: Increase size of focus ring (accessed via the boxShadow value of "outlineFocus") and use updated colour palette.

v30.1.0

Jul 8, 2021

Add wide breakpoint of 1200px

This adds support for wide to the following touchpoints:

Responsive values, e.g.

{ mobile: 'small', wide: 'large' }

Responsive range props, e.g.

<Columns collapseBelow="wide" space={{ mobile: 'small', wide: 'large' }}>

The responsiveStyle function, e.g.

export const className = style(responsiveStyle({ wide: '...' }));

The breakpoints object, which now exposes the number 1200 via breakpoints.wide, i.e.

{
  mobile: 0,
  tablet: 740,
  desktop: 940,
  wide: 1200
}

v30.0.0

Jun 21, 2021

Add atoms function for accessing re-usable atomic classes within vanilla-extract stylesheets

Braid's re-usable atomic classes were previously only available via Box, but they are now accessible via the new atoms function.

// styles.css.ts
import { atoms } from 'braid-design-system/css';

export const className = atoms({
  paddingTop: 'small'
});

This allows you to co-locate custom styles with Braid's atomic classes in your stylesheets.

// styles.css.ts
import { style, composeStyles } from '@vanilla-extract/css';
import { atoms } from 'braid-design-system/css';

export const className = composeStyles(
  atoms({ position: 'absolute' }),
  style({ top: 300 })
);