responsiveStyle

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

Braid Logo