v31.0.0

Nov 23, 2021

atoms: Add boxShadow border variants

New boxShadows The following box shadows are now available:

  • borderBrandAccentLightLarge
  • borderCriticalLightLarge
  • borderFormAccentLight
  • borderFormAccentLightLarge

v31.0.0

Nov 23, 2021

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

v30.4.0

Aug 20, 2021

Box, atoms, vars: Add large and xlarge to borderRadius scale

v30.4.0

Aug 20, 2021

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