BRAID
Braid Logo
 

vars

v32.10.0

Sep 4, 2023

  • docs: Lighten soft background tokens

    Lighten the brandAccentSoft and formAccentSoft background tokens for the docs theme.

  • seekJobs: Change link colour to neutral

    Changing the foregroundColor token for link on the seekJobs theme to align with neutral text. Our different approach to using colour has seen links dialled back to compete less with other messaging and CTAs.

    This affects the following usages across the system:

    • vars.foregroundColor.link
    • Text (using tone="link")
    • TextLink and (TextLinkButton)

v32.8.3

Aug 7, 2023

  • apac, seekBusiness: Increase medium font weight

    The unicode range of Thai characters is not satisfied by the preferred fonts specified for the apac theme, resulting in these characters falling through and being rendered by sans-serif — which applies a platform-specific font. These system fonts do not have support for the semi-bold weight chosen for medium, resulting in the visual weight of medium text being rounded down to regular — providing no differentiation relative to other text in the UI.

    In addition, due to both Helvetica and Arial not having a medium weight, these fallbacks also have the same problem, even for Latin characters.

    By increasing the value of medium, it will now round to strong when the rendered font cannot satisfy medium — preventing the loss of hierarchy.

    This only affects apac-based themes, namely apac and seekBusiness.

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.16.0

Aug 2, 2022

  • vars: Expose shadow palette

    Provide access to the themed shadow scale on the vars object

    EXAMPLE USAGE:

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

export const dropShadow = style({
  boxShadow: vars.shadow.small,
});

v31.14.0

Jun 27, 2022

  • apac and seekBusiness themes: Update colour palette

    The colours used in these themes have been updated to the latest design standards as they were subtly off due to coming from an incorrect source.

v31.3.0

Jan 20, 2022

  • vars: Expose contentWidth theme tokens

v31.2.0

Dec 7, 2021

  • vars: Add light variant foreground colors

    New foregrounds The following foregrounds are now available on the vars.foregroundColor theme object:

    • cautionLight
    • infoLight
    • linkLight
    • linkLightVisited
    • positiveLight
    • promoteLight

v31.0.0

Nov 23, 2021

  • vars: Darken neutral background for the occ theme.

    A neutral background should be able to hold tone-based text. Moving from grey700 to grey800 as per the Atomic Design System color palette

  • vars: Add new backgrounds and light variant border colors

    New backgrounds The following backgrounds are now available on the vars.backgroundColor theme object:

    • neutralActive
    • neutralHover
    • neutralSoftActive
    • neutralSoftHover

    New borderColors The following border colors are now available on the vars.borderColor theme object:

    • brandAccentLight
    • criticalLight
    • formAccentLight

  • vars: Darken neutral background for the seekAnz theme.

    A neutral background should be able to hold tone-based text. Moving from sk-mid-gray-dark to sk-charcoal as per the Seek Style Guide color palette

  • 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

  • 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

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