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' });
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' });
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;
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', ... });
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} />
or
atoms({ position: 'absolute', inset: 0, })
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
surface
, neutralSoft
neutral
, neutralInverted
, neutralLight
Removed
card
, formAccentDisabled
, input
, inputDisabled
, selection
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', });
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.
Add wide
breakpoint of 1200px
This adds support for wide
to the following touchpoints:
{ mobile: 'small', wide: 'large' }
<Columns collapseBelow="wide" space={{ mobile: 'small', wide: 'large' }}>
responsiveStyle
function, e.g.export const className = style(responsiveStyle({ wide: '...' }));
breakpoints
object, which now exposes the number 1200
via breakpoints.wide
, i.e.{ mobile: 0, tablet: 740, desktop: 940, wide: 1200 }
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 }) );