import { responsiveStyle } from "braid-design-system/css"
A utility to make authoring mobile-first responsive styles in vanilla-extract stylesheets easier.
The responsiveStyle function is a convenience for authoring responsive styling rules. It accepts sets of rules for each breakpoint, e.g. mobile, tablet, desktop or wide, and returns them wrapped in the corresponding media query.
The returned object must be passed through one of vanilla-extract’s styling apis, e.g. style, to create the actual styles.
// 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,
    },
    wide: {
      flexBasis: vars.space.xlarge,
    },
  })
)

// 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,
    },
    [`screen and (min-width: ${breakpoints.wide}px)`]: {
      flexBasis: vars.space.xlarge,
    },
  },
})