v30.4.0

Aug 20, 2021

vars: Add new background and border colours

New backgroundColor values:

  • brandAccentSoft
  • brandAccentSoftActive
  • brandAccentSoftHover
  • criticalSoft
  • criticalSoftActive
  • criticalSoftHover
  • formAccentSoft
  • formAccentSoftActive
  • formAccentSoftHover

New borderColor values:

  • cautionLight
  • criticalLight
  • infoLight
  • positiveLight
  • promoteLight

v30.4.0

Aug 20, 2021

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

v30.0.0

Jun 21, 2021

Add vars object for accessing themed CSS variables within vanilla-extract stylesheets and runtime files.

Theming is now achieved natively with CSS variables rather than generating separate styles for each theme. CSS variables are exposed via the braid-design-system/css import.

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

export const className = style({
  paddingTop: vars.space.small
});