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 responsiveStyle function for creating custom mobile-first styles within vanilla-extract stylesheets

EXAMPLE USAGE

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

export const className = style(
  responsiveStyle({
    mobile: {
      flexBasis: vars.space.small,
    },
    tablet: {
      flexBasis: vars.space.medium,
    },
    desktop: {
      flexBasis: vars.space.large,
    },
  })
);

// is equivalent to
import { style } from '@vanilla-extract/css';
import { vars, breakpoints } from 'braid-design-system/css';

export const className = style({
  "flexBasis": vars.space.small,
  "@media": {
    [`screen and (min-width: ${breakpoints.tablet}px)`]: {
      "flexBasis": vars.space.medium
    },
    [`screen and (min-width: ${breakpoints.desktop}px)`]: {
      "flexBasis": vars.space.large
    }
  }
});