Slide 21
Slide 21 text
import { defineProperties, createSprinkles } from "@vanilla-extract/sprinkles";
const space = { none: 0, small: "4px", medium: "8px" /*...*/ };
const responsiveProperties = defineProperties({
conditions: {
mobile: {},
tablet: { "@media": "screen and (min-width: 768px)" },
desktop: { "@media": "screen and (min-width: 1024px)" },
},
defaultCondition: "mobile",
properties: {
paddingTop: space,
paddingBottom: space,
// ...
},
});
export const sprinkles = createSprinkles(responsiveProperties);