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:
borderBrandAccentLightLargeborderCriticalLightLargeborderFormAccentLightborderFormAccentLightLargeBox, 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, neutralSoftneutral, neutralInverted, neutralLightRemoved
card, formAccentDisabled, input, inputDisabled, selectionformHover, standard, standardInvertedMIGRATION 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:
borderCautionLightborderCriticalLightborderInfoLightborderPositiveLightborderPromoteLightBox, 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 }) );