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