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