{"owner":"vanilla-extract-css","repo":"vanilla-extract","hasSkills":true,"totalSkillsCount":7,"totalTokensCount":12801,"categories":["plugin-manifest","anthropic-skill"],"hasMcp":false,"mcpConfig":null,"found":["packages/compiler/README.md","packages/integration/README.md","packages/sprinkles/README.md","site/docs/packages/css-utils.md","site/docs/packages/dynamic.md","site/docs/packages/recipes.md","site/docs/packages/sprinkles.md"],"skills":{"packages/compiler/README.md":"# @vanilla-extract/compiler\n\nThis package is not intended for public consumption.\n","packages/integration/README.md":"# @vanilla-extract/integration\n\nThis package is not intended for public consumption.","packages/sprinkles/README.md":"# 🍨 Sprinkles\n\n**Zero-runtime atomic CSS framework for [vanilla-extract.](https://github.com/vanilla-extract-css/vanilla-extract)**\n\nGenerate a static set of custom utility classes and compose them either statically at build time, or dynamically at runtime, without the usual style generation overhead of CSS-in-JS.\n\nBasically, it’s like building your own zero-runtime, type-safe version of [Tailwind](https://tailwindcss.com), [Styled System](https://styled-system.com), etc.\n\n---\n\n**Compose sprinkles statically at build time.**\n\n```ts\n// styles.css.ts\n\nexport const className = sprinkles({\n  display: 'flex',\n  paddingX: 'small',\n  flexDirection: {\n    mobile: 'column',\n    desktop: 'row'\n  },\n  background: {\n    lightMode: 'blue-50',\n    darkMode: 'gray-700'\n  }\n});\n```\n\n**Or compose them dynamically at runtime! 🏃‍♂️**\n\n```ts\n// app.ts\n\nimport { sprinkles } from './sprinkles.css.ts';\n\nconst flexDirection = Math.random() > 0.5 ? 'column' : 'row';\n\ndocument.write(`\n  <section class=\"${sprinkles({ display: 'flex', flexDirection })}\">\n    ...\n  </section>\n`);\n```\n\n---\n\n🔥 &nbsp; Zero-runtime CSS-in-TypeScript with all styles generated at build time via [vanilla-extract.](https://vanilla-extract.style)\n\n🛠 &nbsp; Create your own custom set of atomic classes with declarative config.\n\n💪 &nbsp; Type-safe functional API for accessing sprinkles.\n\n🏃‍♂️ &nbsp; Compose sprinkles statically in `.css.ts` files, or dynamically at runtime (<0.5KB Gzip)\n\n🎨 &nbsp; Generate theme-based scales with CSS Variables using [vanilla-extract themes.](https://vanilla-extract.style/documentation/api/create-theme)\n\n✍️ &nbsp; Configure shorthands for common property combinations, e.g. `paddingX` / `paddingY`.\n\n🚦 &nbsp; Conditional sprinkles to target media/feature queries and selectors.\n\n✨ &nbsp; Scope conditions to individual properties.\n\n---\n\n🖥 &nbsp; [Try it out for yourself in CodeSandbox.](https://codesandbox.io/s/github/vanilla-extract-css/vanilla-extract/tree/master/examples/webpack-react?file=/src/sprinkles.css.ts)\n\n---\n\n## Setup\n\n> 💡 Before starting, ensure you've set up [vanilla-extract.](https://github.com/vanilla-extract-css/vanilla-extract)\n\nInstall Sprinkles.\n\n```bash\n$ npm install @vanilla-extract/sprinkles\n```\n\nCreate a `sprinkles.css.ts` file, then configure and export your `sprinkles` function.\n\n> 💡 This is just an example! Feel free to customise properties, values and conditions to match your requirements.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';\n\nconst space = {\n  'none': 0,\n  'small': '4px',\n  'medium': '8px',\n  'large': '16px',\n  // etc.\n};\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  properties: {\n    display: ['none', 'flex', 'block', 'inline'],\n    flexDirection: ['row', 'column'],\n    justifyContent: ['stretch', 'flex-start', 'center', 'flex-end', 'space-around', 'space-between'],\n    alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],\n    paddingTop: space,\n    paddingBottom: space,\n    paddingLeft: space,\n    paddingRight: space,\n    // etc.\n  },\n  shorthands: {\n    padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom'],\n    placeItems: ['justifyContent', 'alignItems'],\n  }\n});\n\nconst colors = {\n  'blue-50': '#eff6ff',\n  'blue-100': '#dbeafe',\n  'blue-200': '#bfdbfe',\n  'gray-700': '#374151',\n  'gray-800': '#1f2937',\n  'gray-900': '#111827',\n  // etc.\n};\n\nconst colorProperties = defineProperties({\n  conditions: {\n    lightMode: {},\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: 'lightMode',\n  properties: {\n    color: colors,\n    background: colors,\n    // etc.\n  }\n});\n\nexport const sprinkles = createSprinkles(responsiveProperties, colorProperties);\n\n// It's a good idea to export the Sprinkles type too\nexport type Sprinkles = Parameters<typeof sprinkles>[0];\n```\n\n**🎉 That's it — you’re ready to go!**\n\n## Usage\n\nYou can now use your `sprinkles` function in `.css.ts` files for zero-runtime usage.\n\n```ts\n// styles.css.ts\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = sprinkles({\n  display: 'flex',\n  paddingX: 'small',\n\n  // Conditional sprinkles:\n  flexDirection: {\n    mobile: 'column',\n    desktop: 'row',\n  },\n  background: {\n    lightMode: 'blue-50',\n    darkMode: 'gray-700',\n  }\n});\n```\n\nIf you want, you can even use your `sprinkles` function at runtime! 🏃‍♂️\n\n```tsx\n// app.ts\nimport { sprinkles } from './sprinkles.css.ts';\n\nconst flexDirection = Math.random() > 0.5 ? 'column' : 'row';\n\ndocument.write(`\n  <section class=\"${sprinkles({ display: 'flex', flexDirection })}\">\n    ...\n  </section>\n`);\n```\n\n> 💡 Although you don’t need to use this library at runtime, it’s designed to be as small and performant as possible. The runtime is only used to look up pre-existing class names. All styles are still generated at build time!\n\nWithin `.css.ts` files, combine with any custom styles by providing an array to vanilla-extract’s [`style`](https://vanilla-extract.style/documentation/api/style) function.\n\n```ts\n// styles.css.ts\nimport { style } from '@vanilla-extract/css';\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = style([\n  sprinkles({\n    display: 'flex',\n    padding: 'small'\n  }),\n  {\n    ':hover': {\n      outline: '2px solid currentColor'\n    }\n  }\n]);\n```\n\nSprinkles uses this internally, which means that a class list returned by `sprinkles` can be treated as if it were a single class within vanilla-extract selectors.\n\n```ts\n// styles.css.ts\nimport { globalStyle } from '@vanilla-extract/css';\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = sprinkles({\n  padding: 'small'\n});\n\nglobalStyle(`${container} *`, {\n  boxSizing: 'border-box'\n});\n```\n\n---\n\n⚛️ &nbsp; Using React? Turn your sprinkles into a `<Box>` component with 🍰 [Dessert Box.](https://github.com/TheMightyPenguin/dessert-box)\n\n---\n\n- [API](#api)\n  - [defineProperties](#defineproperties)\n    - [`properties`](#properties)\n    - [`shorthands`](#shorthands)\n    - [`conditions`](#conditions)\n    - [`defaultCondition`](#defaultcondition)\n    - [`responsiveArray`](#responsivearray)\n  - [createSprinkles](#createsprinkles)\n- [Utilities](#utilities)\n  - [createMapValueFn](#createmapvaluefn)\n  - [createNormalizeValueFn](#createnormalizevaluefn)\n- [Types](#types)\n  - [ConditionalValue](#conditionalvalue)\n  - [RequiredConditionalValue](#requiredconditionalvalue)\n- [Thanks](#thanks)\n- [License](#license)\n\n---\n\n## API\n\n### defineProperties\n\nDefines a collection of utility classes with [properties](#properties), [conditions](#conditions) and [shorthands.](#shorthands)\n\nIf you need to scope different conditions to different properties (e.g. some properties support breakpoints, some support light mode and dark mode, some are unconditional), you can provide as many collections of properties to [`createSprinkles`](#createsprinkles) as you like.\n\n```ts\nimport {\n  defineProperties,\n  createSprinkles\n} from '@vanilla-extract/sprinkles';\n\nconst space = {\n  none: 0,\n  small: '4px',\n  medium: '8px',\n  large: '16px'\n};\n\nconst colors = {\n  blue50: '#eff6ff',\n  blue100: '#dbeafe',\n  blue200: '#bfdbfe'\n  // etc.\n};\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  properties: {\n    display: ['none', 'block', 'flex'],\n    flexDirection: ['row', 'column'],\n    padding: space\n    // etc.\n  }\n});\n\nconst colorProperties = defineProperties({\n  conditions: {\n    lightMode: { '@media': '(prefers-color-scheme: light)' },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: false,\n  properties: {\n    color: colors,\n    background: colors\n  }\n  // etc.\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  colorProperties\n);\n```\n\n> 💡 If you want a good color palette to work with, you might want to consider importing [`tailwindcss/colors.`](https://tailwindcss.com/docs/customizing-colors#color-palette-reference)\n\n#### `properties`\n\nDefine which CSS properties and values should be available.\n\nFor simple mappings (i.e. valid CSS values), values can be provided as an array.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    display: ['none', 'block', 'flex'],\n    flexDirection: ['row', 'column'],\n    alignItems: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end'\n    ],\n    justifyContent: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end'\n    ]\n    // etc.\n  }\n});\n```\n\nFor semantic mappings (e.g. space scales, color palettes), values can be provided as an object.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    gap: {\n      none: 0,\n      small: 4,\n      medium: 8,\n      large: 16\n    }\n    // etc.\n  }\n});\n```\n\nYou can also use [vanilla-extract themes](/documentation/api/create-theme) to configure themed values.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\nimport { vars } from './vars.css.ts';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    gap: vars.space\n    // etc.\n  }\n});\n```\n\nFor more complicated scenarios, values can even be entire style objects. This works especially well when combined with CSS Variables.\n\n> 💡 Styles are created in the order that they were defined in your config. Properties that are less specific should be higher in the list.\n\n```ts\nimport { createVar } from '@vanilla-extract/css';\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst alpha = createVar();\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    background: {\n      red: {\n        vars: { [alpha]: '1' },\n        background: `rgba(255, 0, 0, ${alpha})`\n      }\n    },\n    backgroundOpacity: {\n      1: { vars: { [alpha]: '1' } },\n      0.1: { vars: { [alpha]: '0.1' } }\n    }\n    // etc.\n  }\n});\n```\n\n#### `shorthands`\n\nMaps custom shorthand properties to multiple underlying CSS properties. This is useful for mapping values like `padding`/`paddingX`/`paddingY` to their underlying longhand values.\n\n> 💡 Shorthands are evaluated in the order that they were defined in your configuration. Shorthands that are less specific should be higher in the list, e.g. `padding` should come before `paddingX`/`paddingY`.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\nimport { vars } from './vars.css.ts';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    paddingTop: vars.space,\n    paddingBottom: vars.space,\n    paddingLeft: vars.space,\n    paddingRight: vars.space\n  },\n  shorthands: {\n    padding: [\n      'paddingTop',\n      'paddingBottom',\n      'paddingLeft',\n      'paddingRight'\n    ],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom']\n  }\n});\n```\n\n#### `conditions`\n\nDefine a set of media/feature queries for the provided properties.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile'\n  // etc.\n});\n```\n\nProperties can also be scoped to selectors.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst properties = defineProperties({\n  conditions: {\n    default: {},\n    hover: { selector: '&:hover' },\n    focus: { selector: '&:focus' }\n  },\n  defaultCondition: 'default'\n  // etc.\n});\n```\n\n#### `defaultCondition`\n\nDefines which condition(s) should be used when a non-conditional value is requested, e.g. `sprinkles({ display: 'flex' })`.\n\nIf you're using mobile-first responsive conditions, this should be your lowest breakpoint.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile'\n  // etc.\n});\n```\n\nIf your conditions are mutually exclusive (e.g. light mode and dark mode), you can provide an array of default conditions. For example, the following configuration would automatically expand `sprinkles({ background: 'white' })` to the equivalent of `sprinkles({ background: { lightMode: 'white', darkMode: 'white' }})`.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    lightMode: { '@media': '(prefers-color-scheme: light)' },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: ['lightMode', 'darkMode']\n  // etc.\n});\n```\n\nYou can also set `defaultCondition` to `false`, which forces you to be explicit about which conditions you’re targeting.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    lightMode: {\n      '@media': '(prefers-color-scheme: light)'\n    },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: false\n  // etc.\n});\n```\n\n#### `responsiveArray`\n\nProviding an array of condition names enables the responsive array notation (e.g. `['column', 'row']`) by defining the order of conditions.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  responsiveArray: ['mobile', 'tablet', 'desktop']\n  // etc.\n});\n```\n\n### createSprinkles\n\nCreates a type-safe function for accessing your [defined properties](#defineProperties). You can provide as many collections of properties as you like.\n\n```ts\nimport {\n  defineProperties,\n  createSprinkles\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\nconst unconditionalProperties = defineProperties({\n  /* ... */\n});\nconst colorProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  unconditionalProperties,\n  colorProperties\n);\n```\n\nThe sprinkles function also exposes a static `properties` key that lets you check whether a given property can be handled by the function.\n\n```ts\nsprinkles.properties.has('paddingX');\n// -> boolean\n```\n\n> 💡 This is useful when building a Box component with sprinkles available at the top level (e.g. `<Box padding=\"small\">`) since you’ll need some way to filter sprinkle props from non-sprinkle props.\n\n\n## Utilities\n\n### createMapValueFn\n\nCreates a function for mapping over conditional values.\n\n> 💡 This is useful for converting high-level prop values to low-level sprinkles, e.g. converting left/right to flex-start/end.\n\nThis function should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\nYou can name the generated function whatever you like, typically based on the name of your conditions.\n\n```ts\nimport {\n  defineProperties,\n  createSprinkles,\n  createMapValueFn\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties\n);\nexport const mapResponsiveValue = createMapValueFn(\n  responsiveProperties\n);\n```\n\nYou can then import the generated function in your app code.\n\n```ts\nimport { mapResponsiveValue } from './sprinkles.css.ts';\n\nconst alignToFlexAlign = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n  stretch: 'stretch'\n} as const;\n\nmapResponsiveValue(\n  'left',\n  (value) => alignToFlexAlign[value]\n);\n// -> 'flex-start'\n\nmapResponsiveValue(\n  {\n    mobile: 'center',\n    desktop: 'left'\n  } as const,\n  (value) => alignToFlexAlign[value]\n);\n// -> { mobile: 'center', desktop: 'flex-start' }\n\nmapResponsiveValue(\n  ['center', null, 'left'] as const,\n  (value) => alignToFlexAlign[value]\n);\n// -> { mobile: 'center', desktop: 'flex-start' }\n```\n\n> 💡 You can generate a custom conditional value type with the [ConditionalValue](#conditionalvalue) type.\n\n### createNormalizeValueFn\n\nCreates a function for normalizing conditional values into a consistent object structure. Any primitive values or responsive arrays will be converted to conditional objects.\n\nThis function should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\n> 💡 You can name the generated function whatever you like, typically based on the name of your conditions.\n\n```ts\nimport {\n  defineProperties,\n  createSprinkles,\n  createNormalizeValueFn\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties\n);\nexport const normalizeResponsiveValue =\n  createNormalizeValueFn(responsiveProperties);\n```\n\nYou can then import the generated function in your app code.\n\n```ts\nimport { normalizeResponsiveValue } from './sprinkles.css.ts';\n\nnormalizeResponsiveValue('block');\n// -> { mobile: 'block' }\n\nnormalizeResponsiveValue(['none', null, 'block']);\n// -> { mobile: 'block', desktop: 'block' }\n\nnormalizeResponsiveValue({\n  mobile: 'none',\n  desktop: 'block'\n});\n// -> { mobile: 'block', desktop: 'block' }\n```\n\n## Types\n\n### ConditionalValue\n\nCreates a custom conditional value type.\n\n> 💡 This is useful for typing high-level prop values that are [mapped to low-level sprinkles,](#createmapvaluefn) e.g. supporting left/right prop values that map to flex-start/end.\n\nThis type should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\n> 💡 You can name the generated type whatever you like, typically based on the name of your conditions.\n\n```ts\nimport {\n  defineProperties,\n  ConditionalValue\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport type ResponsiveValue<Value extends string | number> =\n  ConditionalValue<typeof responsiveProperties, Value>;\n```\n\nYou can then import the generated type in your app code.\n\n```ts\nimport { ResponsiveValue } from './sprinkles.css.ts';\n\ntype ResponsiveAlign = ResponsiveValue<\n  'left' | 'center' | 'right'\n>;\n\nconst a: ResponsiveAlign = 'left';\nconst b: ResponsiveAlign = {\n  mobile: 'center',\n  desktop: 'left'\n};\nconst c: ResponsiveAlign = ['center', null, 'left'];\n```\n\n### RequiredConditionalValue\n\nSame as [ConditionalValue](#conditionalvalue) except the default condition is required. For example, if your default condition was `'mobile'`, then a conditional value of `{ desktop: '...' }` would be a type error.\n\n```ts\nimport {\n  defineProperties,\n  RequiredConditionalValue\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  defaultCondition: 'mobile'\n  // etc.\n});\n\nexport type RequiredResponsiveValue<\n  Value extends string | number\n> = RequiredConditionalValue<\n  typeof responsiveProperties,\n  Value\n>;\n```\n\nYou can then import the generated type in your app code.\n\n```ts\nimport { RequiredResponsiveValue } from './sprinkles.css.ts';\n\ntype ResponsiveAlign = RequiredResponsiveValue<\n  'left' | 'center' | 'right'\n>;\n\nconst a: ResponsiveAlign = 'left';\nconst b: ResponsiveAlign = {\n  mobile: 'center',\n  desktop: 'left'\n};\nconst c: ResponsiveAlign = ['center', null, 'left'];\n\n// Type errors:\nconst d: ResponsiveAlign = [null, 'center'];\nconst e: ResponsiveAlign = { desktop: 'center' };\n```\n\n---\n\n## Thanks\n\n- [Styled System](https://styled-system.com) for inspiring our approach to responsive props.\n- [Tailwind](https://tailwindcss.com) for teaching us to think utility-first.\n- [SEEK](https://www.seek.com.au) for giving us the space to do interesting work.\n\n## License\n\nMIT.\n","site/docs/packages/css-utils.md":"---\ntitle: CSS Utils\nparent: packages\n---\n\n# CSS Utils\n\nAn optional package providing utility functions that make it easier to work with CSS in TypeScript.\n\n```bash\nnpm install @vanilla-extract/css-utils\n```\n\nThis package is not limited to vanilla-extract—it can be used with any CSS-in-JS library.\n\n## calc\n\nStreamlines the creation of CSS calc expressions.\n\n### Simple expressions\n\n```tsx\nimport { calc } from '@vanilla-extract/css-utils';\n\nconst styles = {\n  height: calc.multiply('var(--grid-unit)', 2)\n};\n```\n\nThe following functions are available.\n\n- `calc.add`\n- `calc.subtract`\n- `calc.multiply`\n- `calc.divide`\n- `calc.negate`\n\n### Chainable expressions\n\nThe `calc` export is also a function, providing a chainable API for complex calc expressions.\n\n> When using expression chains it is necessary to call `toString()` to return the constructed expression as the final value.\n\n```tsx\nimport { calc } from '@vanilla-extract/css-utils';\n\nconst styles = {\n  marginTop: calc('var(--space-large)')\n    .divide(2)\n    .negate()\n    .toString()\n};\n```\n","site/docs/packages/dynamic.md":"---\ntitle: Dynamic\nparent: packages\n---\n\n# Dynamic\n\nA tiny ([< 1kB compressed](https://bundlephobia.com/package/@vanilla-extract/dynamic@2.0.2)) runtime for performing dynamic updates to scoped theme variables.\n\n```bash\nnpm install @vanilla-extract/dynamic\n```\n\n## assignInlineVars\n\nAllows variables to be assigned dynamically that have been created using vanilla-extract APIs, e.g. `createVar`, `createTheme`, etc.\n\nAs these APIs produce variable references that contain the CSS var function, e.g. `var(--brandColor__8uideo0)`, it is necessary to remove the wrapping function when setting its value.\n\nVariables with a value of `null` or `undefined` will be omitted from the resulting inline style.\n\n> 🧠&nbsp;&nbsp;`null` and `undefined` values can only be passed to `assignInlineVars` if a theme contract is not provided\n\n```tsx compiled\n// app.tsx\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport {\n  container,\n  brandColor,\n  textColor\n} from './styles.css.ts';\n\n// If `tone` is `undefined`, the following inline style becomes:\n// { '--brandColor__8uideo0': 'pink' }\n\nconst MyComponent = ({ tone }: { tone?: critical }) => (\n  <section\n    className={container}\n    style={assignInlineVars({\n      [brandColor]: 'pink',\n      [textColor]: tone === 'critical' ? 'red' : null\n    })}\n  >\n    ...\n  </section>\n);\n\n// styles.css.ts\nimport { createVar, style } from '@vanilla-extract/css';\n\nexport const brandColor = createVar();\nexport const textColor = createVar();\n\nexport const container = style({\n  background: brandColor,\n  color: textColor\n});\n```\n\nEven though this function returns an object of inline styles, it implements the `toString` method, returning a valid `style` attribute value so that it can be used in string templates.\n\n```ts\n// app.ts\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { container, brandColor } from './styles.css.ts';\n\n// The following inline style becomes:\n// \"--brandColor__8uideo0: pink;\"\n\ndocument.write(`\n  <section\n    class=\"${container}\"\n    style=\"${assignInlineVars({ [brandColor]: 'pink' })}\"\n  >\n    ...\n  </section>\n`);\n```\n\n### Assigning theme contracts dynamically\n\n[Theme contracts](/documentation/theming/) can also be assigned dynamically by passing one as the first argument.\nAll variables must be assigned or it’s a type error.\n\nThis API makes the concept of dynamic theming much simpler.\n\n```tsx compiled\n// app.tsx\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { container, themeVars } from './theme.css.ts';\n\ninterface ContainerProps {\n  brandColor: string;\n  fontFamily: string;\n}\nconst Container = ({\n  brandColor,\n  fontFamily\n}: ContainerProps) => (\n  <section\n    className={container}\n    style={assignInlineVars(themeVars, {\n      color: { brand: brandColor },\n      font: { body: fontFamily }\n    })}\n  >\n    ...\n  </section>\n);\n\nconst App = () => (\n  <Container brandColor=\"pink\" fontFamily=\"Arial\">\n    ...\n  </Container>\n);\n\n// theme.css.ts\nimport {\n  createThemeContract,\n  style\n} from '@vanilla-extract/css';\n\nexport const themeVars = createThemeContract({\n  color: {\n    brand: null\n  },\n  font: {\n    body: null\n  }\n});\n\nexport const container = style({\n  background: themeVars.color.brand,\n  fontFamily: themeVars.font.body\n});\n```\n\n## setElementVars\n\nAn imperative API, allowing variables created using vanilla-extract APIs, e.g. `createVar`, `createTheme`, etc, to be assigned dynamically on a DOM element.\n\nVariables with a value of `null` or `undefined` will not be assigned a value.\n\n> 🧠&nbsp;&nbsp;`null` and `undefined` values can only be passed to `setElementVars` if a theme contract is not provided\n\n```ts compiled\n// app.ts\n\nimport { setElementVars } from '@vanilla-extract/dynamic';\nimport { brandColor, textColor } from './styles.css.ts';\n\nconst el = document.getElementById('myElement');\n\nsetElementVars(el, {\n  [brandColor]: 'pink',\n  [textColor]: null\n});\n\n// styles.css.ts\nimport { createVar, style } from '@vanilla-extract/css';\n\nexport const brandColor = createVar();\nexport const textColor = createVar();\n```\n\n### Setting theme contracts dynamically\n\n[Theme contracts](/documentation/theming/) can also be set dynamically by passing one as the second argument.\nAll variables must be assigned or it’s a type error.\n\n```ts compiled\n// app.ts\n\nimport { setElementVars } from '@vanilla-extract/dynamic';\nimport { themeVars } from './theme.css.ts';\n\nconst el = document.getElementById('myElement');\n\nsetElementVars(el, themeVars, {\n  color: { brand: 'pink' },\n  font: { body: 'Arial' }\n});\n\n// theme.css.ts\nimport { createThemeContract } from '@vanilla-extract/css';\n\nexport const themeVars = createThemeContract({\n  color: {\n    brand: null\n  },\n  font: {\n    body: null\n  }\n});\n```\n","site/docs/packages/recipes.md":"---\ntitle: Recipes\nparent: packages\n---\n\n# Recipes\n\nCreate multi-variant styles with a type-safe runtime API, heavily inspired by [Stitches](https://stitches.dev).\n\nAs with the rest of vanilla-extract, all styles are generated at build time.\n\n> 💡 Recipes is an optional package built on top of vanilla-extract using its [function serialization API.](/documentation/api/add-function-serializer) It doesn't have privileged access to vanilla-extract internals so you're also free to build alternative implementations.\n\n## Setup\n\n```bash\nnpm install @vanilla-extract/recipes\n```\n\n## recipe\n\nCreates a multi-variant style function that can be used at runtime or statically in `.css.ts` files.\n\nAccepts an optional set of `base` styles, `variants`, `compoundVariants` and `defaultVariants`.\n\n```ts compiled\n// button.css.ts\nimport { recipe } from '@vanilla-extract/recipes';\n\nexport const button = recipe({\n  base: {\n    borderRadius: 6\n  },\n\n  variants: {\n    color: {\n      neutral: { background: 'whitesmoke' },\n      brand: { background: 'blueviolet' },\n      accent: { background: 'slateblue' }\n    },\n    size: {\n      small: { padding: 12 },\n      medium: { padding: 16 },\n      large: { padding: 24 }\n    },\n    rounded: {\n      true: { borderRadius: 999 }\n    }\n  },\n\n  // Applied when multiple variants are set at once\n  compoundVariants: [\n    {\n      variants: {\n        color: 'neutral',\n        size: 'large'\n      },\n      style: {\n        background: 'ghostwhite'\n      }\n    }\n  ],\n\n  defaultVariants: {\n    color: 'accent',\n    size: 'medium'\n  }\n});\n```\n\nWith this recipe configured, you can now use it in your templates.\n\n```ts\n// app.ts\nimport { button } from './button.css.ts';\n\ndocument.write(`\n  <button class=\"${button({\n    color: 'accent',\n    size: 'large',\n    rounded: true\n  })}\">\n    Hello world\n  </button>\n`);\n```\n\nYour recipe configuration can also make use of existing variables, classes and styles.\n\nFor example, you can pass in the result of your [`sprinkles`](/documentation/packages/sprinkles) function directly.\n\n```ts\n// button.css.ts\nimport { recipe } from '@vanilla-extract/recipes';\nimport { reset } from './reset.css.ts';\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const button = recipe({\n  base: [reset, sprinkles({ borderRadius: 'round' })],\n\n  variants: {\n    color: {\n      neutral: sprinkles({ background: 'neutral' }),\n      brand: sprinkles({ background: 'brand' }),\n      accent: sprinkles({ background: 'accent' })\n    },\n    size: {\n      small: sprinkles({ padding: 'small' }),\n      medium: sprinkles({ padding: 'medium' }),\n      large: sprinkles({ padding: 'large' })\n    }\n  },\n\n  defaultVariants: {\n    color: 'accent',\n    size: 'medium'\n  }\n});\n```\n\nThe recipes function also exposes an array property `variants` that includes all the variants from your recipe.\n\n```ts\nbutton.variants();\n// -> ['color', 'size']\n```\n\n## Recipe class name selection\n\nRecipes function exposes internal class names in `classNames` property.\nThe property has two predefined props: `base` and `variants`. The `base` prop includes base class name. It is always defined even if you do not have any base styles. The `variants` prop includes class names for each defined variant.\n\n```ts\n// app.css.ts\nconsole.log(button.classNames.base);\n// -> app_button__129pj250\nconsole.log(button.classNames.variants.color.neutral);\n// -> app_button_color_neutral__129pj251\nconsole.log(button.classNames.variants.size.small);\n// -> app_button_size_small__129pj254\n```\n\n## RecipeVariants\n\nA utility to make use of the recipe’s type interface. This can be useful when typing functions or component props that need to accept recipe values as part of their interface.\n\n```ts\n// button.css.ts\nimport {\n  recipe,\n  RecipeVariants\n} from '@vanilla-extract/recipes';\n\nexport const button = recipe({\n  variants: {\n    color: {\n      neutral: { background: 'whitesmoke' },\n      brand: { background: 'blueviolet' },\n      accent: { background: 'slateblue' }\n    },\n    size: {\n      small: { padding: 12 },\n      medium: { padding: 16 },\n      large: { padding: 24 }\n    }\n  }\n});\n\n// Get the type\nexport type ButtonVariants = RecipeVariants<typeof button>;\n\n// the above will result in a type equivalent to:\nexport type ButtonVariants = {\n  color?: 'neutral' | 'brand' | 'accent';\n  size?: 'small' | 'medium' | 'large';\n};\n```\n","site/docs/packages/sprinkles.md":"---\ntitle: Sprinkles\nparent: packages\n---\n\n# Sprinkles\n\nA zero-runtime atomic CSS framework for vanilla-extract.\n\nGenerate a static set of custom utility classes and compose them either statically at build time, or dynamically at runtime, without the usual style generation overhead of CSS-in-JS.\n\nBasically, it’s like building your own zero-runtime, type-safe version of [Tailwind], [Styled System], etc.\n\n> 💡 Sprinkles is an optional package built on top of vanilla-extract using its [function serialization API.](/documentation/api/add-function-serializer) It doesn't have privileged access to vanilla-extract internals so you're also free to build alternative implementations, e.g. [Rainbow Sprinkles.](https://github.com/wayfair/rainbow-sprinkles)\n\n## Setup\n\n```bash\nnpm install @vanilla-extract/sprinkles\n```\n\nCreate a `sprinkles.css.ts` file, then configure and export your `sprinkles` function.\n\n> 💡 This is just an example! Feel free to customise properties, values and conditions to match your requirements.\n\n```ts compiled\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  createSprinkles\n} from '@vanilla-extract/sprinkles';\n\nconst space = {\n  none: 0,\n  small: '4px',\n  medium: '8px',\n  large: '16px'\n  // etc.\n};\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  properties: {\n    display: ['none', 'flex', 'block', 'inline'],\n    flexDirection: ['row', 'column'],\n    justifyContent: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end',\n      'space-around',\n      'space-between'\n    ],\n    alignItems: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end'\n    ],\n    paddingTop: space,\n    paddingBottom: space,\n    paddingLeft: space,\n    paddingRight: space\n    // etc.\n  },\n  shorthands: {\n    padding: [\n      'paddingTop',\n      'paddingBottom',\n      'paddingLeft',\n      'paddingRight'\n    ],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom'],\n    placeItems: ['justifyContent', 'alignItems']\n  }\n});\n\nconst colors = {\n  'blue-50': '#eff6ff',\n  'blue-100': '#dbeafe',\n  'blue-200': '#bfdbfe',\n  'gray-700': '#374151',\n  'gray-800': '#1f2937',\n  'gray-900': '#111827'\n  // etc.\n};\n\nconst colorProperties = defineProperties({\n  conditions: {\n    lightMode: {},\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: 'lightMode',\n  properties: {\n    color: colors,\n    background: colors\n    // etc.\n  }\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  colorProperties\n);\n\n// It's a good idea to export the Sprinkles type too\nexport type Sprinkles = Parameters<typeof sprinkles>[0];\n```\n\n## Usage\n\nYou can use your `sprinkles` function in `.css.ts` files for zero-runtime usage.\n\n```ts\n// styles.css.ts\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = sprinkles({\n  display: 'flex',\n  paddingX: 'small',\n\n  // Conditional sprinkles:\n  flexDirection: {\n    mobile: 'column',\n    desktop: 'row'\n  },\n  background: {\n    lightMode: 'blue-50',\n    darkMode: 'gray-700'\n  }\n});\n```\n\nIf you want, you can even use your `sprinkles` function at runtime! 🏃‍♂️\n\n```tsx\n// app.ts\nimport { sprinkles } from './sprinkles.css.ts';\n\nconst flexDirection =\n  Math.random() > 0.5 ? 'column' : 'row';\n\ndocument.write(`\n  <section class=\"${sprinkles({\n    display: 'flex',\n    flexDirection\n  })}\">\n    ...\n  </section>\n`);\n```\n\n> 💡 Although you don’t need to use this library at runtime, it’s designed to be as small and performant as possible. The runtime is only used to look up pre-existing class names. All styles are still generated at build time!\n\nWithin `.css.ts` files, combine with any custom styles by providing an array to vanilla-extract’s [style](/documentation/api/style) function.\n\n```ts\n// styles.css.ts\nimport { style } from '@vanilla-extract/css';\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = style([\n  sprinkles({\n    display: 'flex',\n    padding: 'small'\n  }),\n  {\n    ':hover': {\n      outline: '2px solid currentColor'\n    }\n  }\n]);\n```\n\nSprinkles uses this internally, which means that a class list returned by `sprinkles` can be treated as if it were a single class within vanilla-extract selectors.\n\n```ts\n// styles.css.ts\nimport { globalStyle } from '@vanilla-extract/css';\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = sprinkles({\n  padding: 'small'\n});\n\nglobalStyle(`${container} *`, {\n  boxSizing: 'border-box'\n});\n```\n\n## defineProperties\n\nDefines a collection of utility classes with [properties](#properties), [conditions](#conditions) and [shorthands.](#shorthands)\n\nIf you need to scope different conditions to different properties (e.g. some properties support breakpoints, some support light mode and dark mode, some are unconditional), you can provide as many collections of properties to [createSprinkles](#createsprinkles) as you like.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  createSprinkles\n} from '@vanilla-extract/sprinkles';\n\nconst space = {\n  none: 0,\n  small: '4px',\n  medium: '8px',\n  large: '16px'\n};\n\nconst colors = {\n  blue50: '#eff6ff',\n  blue100: '#dbeafe',\n  blue200: '#bfdbfe'\n  // etc.\n};\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  properties: {\n    display: ['none', 'block', 'flex'],\n    flexDirection: ['row', 'column'],\n    padding: space\n    // etc.\n  }\n});\n\nconst colorProperties = defineProperties({\n  conditions: {\n    lightMode: {\n      '@media': '(prefers-color-scheme: light)'\n    },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: false,\n  properties: {\n    color: colors,\n    background: colors\n  }\n  // etc.\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  colorProperties\n);\n```\n\n> 💡 If you want a good color palette to work with, you might want to consider importing [tailwindcss/colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).\n\n### properties\n\nDefine which CSS properties and values should be available.\n\nFor simple mappings (i.e. valid CSS values), values can be provided as an array.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    display: ['none', 'block', 'flex'],\n    flexDirection: ['row', 'column'],\n    alignItems: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end'\n    ],\n    justifyContent: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end'\n    ]\n    // etc.\n  }\n});\n```\n\nFor semantic mappings (e.g. space scales, color palettes), values can be provided as an object.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    gap: {\n      none: 0,\n      small: 4,\n      medium: 8,\n      large: 16\n    }\n    // etc.\n  }\n});\n```\n\nYou can also use [vanilla-extract themes](/documentation/theming) to configure themed values.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\nimport { vars } from './vars.css.ts';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    gap: vars.space\n    // etc.\n  }\n});\n```\n\nFor more complicated scenarios, values can even be entire style objects. This works especially well when combined with CSS Variables.\n\n> 💡 Styles are created in the order that they were defined in your config. Properties that are less specific should be higher in the list.\n\n```ts\n// sprinkles.css.ts\nimport { createVar } from '@vanilla-extract/css';\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst alpha = createVar();\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    background: {\n      red: {\n        vars: { [alpha]: '1' },\n        background: `rgba(255, 0, 0, ${alpha})`\n      }\n    },\n    backgroundOpacity: {\n      1: { vars: { [alpha]: '1' } },\n      0.1: { vars: { [alpha]: '0.1' } }\n    }\n    // etc.\n  }\n});\n```\n\n### shorthands\n\nMaps custom shorthand properties to multiple underlying CSS properties. This is useful for mapping values like `padding`/`paddingX`/`paddingY` to their underlying longhand values.\n\n> 💡 Shorthands are evaluated in the order that they were defined in your configuration. Shorthands that are less specific should be higher in the list, e.g. `padding` should come before `paddingX`/`paddingY`.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\nimport { vars } from './vars.css.ts';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    paddingTop: vars.space,\n    paddingBottom: vars.space,\n    paddingLeft: vars.space,\n    paddingRight: vars.space\n  },\n  shorthands: {\n    padding: [\n      'paddingTop',\n      'paddingBottom',\n      'paddingLeft',\n      'paddingRight'\n    ],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom']\n  }\n});\n```\n\n### conditions\n\nDefine a set of media/feature/container queries for the provided properties.\n\nFor example, properties can be scoped to media queries.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile'\n  // etc.\n});\n```\n\nProperties can also be scoped to selectors.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst properties = defineProperties({\n  conditions: {\n    default: {},\n    hover: { selector: '&:hover' },\n    focus: { selector: '&:focus' }\n  },\n  defaultCondition: 'default'\n  // etc.\n});\n```\n\nProperties can also be scoped to container queries.\n\n> 🚧&nbsp;&nbsp;Ensure your target browsers [support container queries]. Vanilla-extract supports the [container query syntax] but does not polyfill the feature in unsupported browsers.\n\n```ts\n// sprinkles.css.ts\nimport {\n  createContainer,\n  style\n} from '@vanilla-extract/css';\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst containerName = createContainer();\n\nexport const container = style({\n  containerName,\n  containerType: 'size'\n});\n\nconst containerProperties = defineProperties({\n  conditions: {\n    small: {},\n    medium: {\n      '@container': `${containerName} (min-width: 768px)`\n    },\n    large: {\n      '@container': `${containerName} (min-width: 1024px)`\n    }\n  },\n  defaultCondition: 'small'\n  // etc.\n});\n```\n\n### defaultCondition\n\nDefines which condition(s) should be used when a non-conditional value is requested, e.g. `sprinkles({ display: 'flex' })`.\n\nIf you're using mobile-first responsive conditions, this should be your lowest breakpoint.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile'\n  // etc.\n});\n```\n\nIf your conditions are mutually exclusive (e.g. light mode and dark mode), you can provide an array of default conditions. For example, the following configuration would automatically expand `sprinkles({ background: 'white' })` to the equivalent of `sprinkles({ background: { lightMode: 'white', darkMode: 'white' }})`.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    lightMode: {\n      '@media': '(prefers-color-scheme: light)'\n    },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: ['lightMode', 'darkMode']\n  // etc.\n});\n```\n\nYou can also set `defaultCondition` to `false`, which forces you to be explicit about which conditions you’re targeting.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    lightMode: {\n      '@media': '(prefers-color-scheme: light)'\n    },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: false\n  // etc.\n});\n```\n\n### responsiveArray\n\nProviding an array of condition names enables the responsive array notation (e.g. `['column', 'row']`) by defining the order of conditions.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  responsiveArray: ['mobile', 'tablet', 'desktop']\n  // etc.\n});\n```\n\n### @layer\n\nOptionally defines a layer to assign styles to for a given set of properties.\n\n> 🚧&nbsp;&nbsp;Ensure your target browsers [support layers].\n> Vanilla Extract supports the [layers syntax][layer] but does not polyfill the feature in unsupported browsers.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\nimport { layer } from '@vanilla-extract/css';\n\nexport const sprinklesLayer = layer();\n\nconst properties = defineProperties({\n  '@layer': sprinklesLayer\n  // etc.\n});\n```\n\n## createSprinkles\n\nCreates a type-safe function for accessing your [defined properties](#defineProperties). You can provide as many collections of properties as you like.\n\n> 🚧&nbsp;&nbsp;Ensure properties are defined as variables before passing them into `createSprinkles`.\n> Calling `defineProperties` inside a `createSprinkles` call will cause types to be inferred incorrectly, resulting in a type-unsafe sprinkles function.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  createSprinkles\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\nconst unconditionalProperties = defineProperties({\n  /* ... */\n});\nconst colorProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  unconditionalProperties,\n  colorProperties\n);\n```\n\nThe sprinkles function also exposes a static `properties` key that lets you check whether a given property can be handled by the function.\n\n```ts\nsprinkles.properties.has('paddingX');\n// -> boolean\n```\n\n> 💡 This is useful when building a Box component with sprinkles available at the top level (e.g. `<Box padding=\"small\">`) since you’ll need some way to filter sprinkle props from non-sprinkle props.\n\n## createMapValueFn\n\nCreates a function for mapping over conditional values.\n\n> 💡 This is useful for converting high-level prop values to low-level sprinkles, e.g. converting left/right to flex-start/end.\n\nThis function should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\nYou can name the generated function whatever you like, typically based on the name of your conditions.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  createSprinkles,\n  createMapValueFn\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties\n);\nexport const mapResponsiveValue = createMapValueFn(\n  responsiveProperties\n);\n```\n\nYou can then import the generated function in your app code.\n\n```ts\n// app.ts\nimport { mapResponsiveValue } from './sprinkles.css.ts';\n\nconst alignToFlexAlign = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n  stretch: 'stretch'\n} as const;\n\nmapResponsiveValue(\n  'left',\n  (value) => alignToFlexAlign[value]\n);\n// -> 'flex-start'\n\nmapResponsiveValue(\n  {\n    mobile: 'center',\n    desktop: 'left'\n  } as const,\n  (value) => alignToFlexAlign[value]\n);\n// -> { mobile: 'center', desktop: 'flex-start' }\n\nmapResponsiveValue(\n  ['center', null, 'left'] as const,\n  (value) => alignToFlexAlign[value]\n);\n// -> { mobile: 'center', desktop: 'flex-start' }\n```\n\n> 💡 You can generate a custom conditional value type with the [ConditionalValue](#conditionalvalue) type.\n\n## createNormalizeValueFn\n\nCreates a function for normalizing conditional values into a consistent object structure. Any primitive values or responsive arrays will be converted to conditional objects.\n\nThis function should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\n> 💡 You can name the generated function whatever you like, typically based on the name of your conditions.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  createSprinkles,\n  createNormalizeValueFn\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties\n);\nexport const normalizeResponsiveValue =\n  createNormalizeValueFn(responsiveProperties);\n```\n\nYou can then import the generated function in your app code.\n\n```ts\n// app.ts\nimport { normalizeResponsiveValue } from './sprinkles.css.ts';\n\nnormalizeResponsiveValue('block');\n// -> { mobile: 'block' }\n\nnormalizeResponsiveValue(['none', null, 'block']);\n// -> { mobile: 'none', desktop: 'block' }\n\nnormalizeResponsiveValue({\n  mobile: 'none',\n  desktop: 'block'\n});\n// -> { mobile: 'none', desktop: 'block' }\n```\n\n## ConditionalValue\n\nCreates a custom conditional value type.\n\n> 💡 This is useful for typing high-level prop values that are [mapped to low-level sprinkles](#createmapvaluefn), e.g. supporting left/right prop values that map to flex-start/end.\n\nThis type should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\n> 💡 You can name the generated type whatever you like, typically based on the name of your conditions.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  ConditionalValue\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport type ResponsiveValue<Value extends string | number> =\n  ConditionalValue<typeof responsiveProperties, Value>;\n```\n\nYou can then import the generated type in your app code.\n\n```ts\n// app.ts\nimport { ResponsiveValue } from './sprinkles.css.ts';\n\ntype ResponsiveAlign = ResponsiveValue<\n  'left' | 'center' | 'right'\n>;\n\nconst a: ResponsiveAlign = 'left';\nconst b: ResponsiveAlign = {\n  mobile: 'center',\n  desktop: 'left'\n};\nconst c: ResponsiveAlign = ['center', null, 'left'];\n```\n\n## RequiredConditionalValue\n\nSame as [ConditionalValue](#conditionalvalue) except the default condition is required. For example, if your default condition was `'mobile'`, then a conditional value of `{ desktop: '...' }` would be a type error.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  RequiredConditionalValue\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  defaultCondition: 'mobile'\n  // etc.\n});\n\nexport type RequiredResponsiveValue<\n  Value extends string | number\n> = RequiredConditionalValue<\n  typeof responsiveProperties,\n  Value\n>;\n```\n\nYou can then import the generated type in your app code.\n\n```ts\n// app.ts\nimport { RequiredResponsiveValue } from './sprinkles.css.ts';\n\ntype ResponsiveAlign = RequiredResponsiveValue<\n  'left' | 'center' | 'right'\n>;\n\nconst a: ResponsiveAlign = 'left';\nconst b: ResponsiveAlign = {\n  mobile: 'center',\n  desktop: 'left'\n};\nconst c: ResponsiveAlign = ['center', null, 'left'];\n\n// Type errors:\nconst d: ResponsiveAlign = [null, 'center'];\nconst e: ResponsiveAlign = { desktop: 'center' };\n```\n\n[tailwind]: https://tailwindcss.com\n[styled system]: https://github.com/styled-system/styled-system\n[support container queries]: https://caniuse.com/css-container-queries\n[container query syntax]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries\n[layer]: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer\n[support layers]: https://caniuse.com/css-cascade-layers\n"},"files":{"packages/compiler/README.md":"# @vanilla-extract/compiler\n\nThis package is not intended for public consumption.\n","packages/integration/README.md":"# @vanilla-extract/integration\n\nThis package is not intended for public consumption.","packages/sprinkles/README.md":"# 🍨 Sprinkles\n\n**Zero-runtime atomic CSS framework for [vanilla-extract.](https://github.com/vanilla-extract-css/vanilla-extract)**\n\nGenerate a static set of custom utility classes and compose them either statically at build time, or dynamically at runtime, without the usual style generation overhead of CSS-in-JS.\n\nBasically, it’s like building your own zero-runtime, type-safe version of [Tailwind](https://tailwindcss.com), [Styled System](https://styled-system.com), etc.\n\n---\n\n**Compose sprinkles statically at build time.**\n\n```ts\n// styles.css.ts\n\nexport const className = sprinkles({\n  display: 'flex',\n  paddingX: 'small',\n  flexDirection: {\n    mobile: 'column',\n    desktop: 'row'\n  },\n  background: {\n    lightMode: 'blue-50',\n    darkMode: 'gray-700'\n  }\n});\n```\n\n**Or compose them dynamically at runtime! 🏃‍♂️**\n\n```ts\n// app.ts\n\nimport { sprinkles } from './sprinkles.css.ts';\n\nconst flexDirection = Math.random() > 0.5 ? 'column' : 'row';\n\ndocument.write(`\n  <section class=\"${sprinkles({ display: 'flex', flexDirection })}\">\n    ...\n  </section>\n`);\n```\n\n---\n\n🔥 &nbsp; Zero-runtime CSS-in-TypeScript with all styles generated at build time via [vanilla-extract.](https://vanilla-extract.style)\n\n🛠 &nbsp; Create your own custom set of atomic classes with declarative config.\n\n💪 &nbsp; Type-safe functional API for accessing sprinkles.\n\n🏃‍♂️ &nbsp; Compose sprinkles statically in `.css.ts` files, or dynamically at runtime (<0.5KB Gzip)\n\n🎨 &nbsp; Generate theme-based scales with CSS Variables using [vanilla-extract themes.](https://vanilla-extract.style/documentation/api/create-theme)\n\n✍️ &nbsp; Configure shorthands for common property combinations, e.g. `paddingX` / `paddingY`.\n\n🚦 &nbsp; Conditional sprinkles to target media/feature queries and selectors.\n\n✨ &nbsp; Scope conditions to individual properties.\n\n---\n\n🖥 &nbsp; [Try it out for yourself in CodeSandbox.](https://codesandbox.io/s/github/vanilla-extract-css/vanilla-extract/tree/master/examples/webpack-react?file=/src/sprinkles.css.ts)\n\n---\n\n## Setup\n\n> 💡 Before starting, ensure you've set up [vanilla-extract.](https://github.com/vanilla-extract-css/vanilla-extract)\n\nInstall Sprinkles.\n\n```bash\n$ npm install @vanilla-extract/sprinkles\n```\n\nCreate a `sprinkles.css.ts` file, then configure and export your `sprinkles` function.\n\n> 💡 This is just an example! Feel free to customise properties, values and conditions to match your requirements.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';\n\nconst space = {\n  'none': 0,\n  'small': '4px',\n  'medium': '8px',\n  'large': '16px',\n  // etc.\n};\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  properties: {\n    display: ['none', 'flex', 'block', 'inline'],\n    flexDirection: ['row', 'column'],\n    justifyContent: ['stretch', 'flex-start', 'center', 'flex-end', 'space-around', 'space-between'],\n    alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],\n    paddingTop: space,\n    paddingBottom: space,\n    paddingLeft: space,\n    paddingRight: space,\n    // etc.\n  },\n  shorthands: {\n    padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom'],\n    placeItems: ['justifyContent', 'alignItems'],\n  }\n});\n\nconst colors = {\n  'blue-50': '#eff6ff',\n  'blue-100': '#dbeafe',\n  'blue-200': '#bfdbfe',\n  'gray-700': '#374151',\n  'gray-800': '#1f2937',\n  'gray-900': '#111827',\n  // etc.\n};\n\nconst colorProperties = defineProperties({\n  conditions: {\n    lightMode: {},\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: 'lightMode',\n  properties: {\n    color: colors,\n    background: colors,\n    // etc.\n  }\n});\n\nexport const sprinkles = createSprinkles(responsiveProperties, colorProperties);\n\n// It's a good idea to export the Sprinkles type too\nexport type Sprinkles = Parameters<typeof sprinkles>[0];\n```\n\n**🎉 That's it — you’re ready to go!**\n\n## Usage\n\nYou can now use your `sprinkles` function in `.css.ts` files for zero-runtime usage.\n\n```ts\n// styles.css.ts\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = sprinkles({\n  display: 'flex',\n  paddingX: 'small',\n\n  // Conditional sprinkles:\n  flexDirection: {\n    mobile: 'column',\n    desktop: 'row',\n  },\n  background: {\n    lightMode: 'blue-50',\n    darkMode: 'gray-700',\n  }\n});\n```\n\nIf you want, you can even use your `sprinkles` function at runtime! 🏃‍♂️\n\n```tsx\n// app.ts\nimport { sprinkles } from './sprinkles.css.ts';\n\nconst flexDirection = Math.random() > 0.5 ? 'column' : 'row';\n\ndocument.write(`\n  <section class=\"${sprinkles({ display: 'flex', flexDirection })}\">\n    ...\n  </section>\n`);\n```\n\n> 💡 Although you don’t need to use this library at runtime, it’s designed to be as small and performant as possible. The runtime is only used to look up pre-existing class names. All styles are still generated at build time!\n\nWithin `.css.ts` files, combine with any custom styles by providing an array to vanilla-extract’s [`style`](https://vanilla-extract.style/documentation/api/style) function.\n\n```ts\n// styles.css.ts\nimport { style } from '@vanilla-extract/css';\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = style([\n  sprinkles({\n    display: 'flex',\n    padding: 'small'\n  }),\n  {\n    ':hover': {\n      outline: '2px solid currentColor'\n    }\n  }\n]);\n```\n\nSprinkles uses this internally, which means that a class list returned by `sprinkles` can be treated as if it were a single class within vanilla-extract selectors.\n\n```ts\n// styles.css.ts\nimport { globalStyle } from '@vanilla-extract/css';\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = sprinkles({\n  padding: 'small'\n});\n\nglobalStyle(`${container} *`, {\n  boxSizing: 'border-box'\n});\n```\n\n---\n\n⚛️ &nbsp; Using React? Turn your sprinkles into a `<Box>` component with 🍰 [Dessert Box.](https://github.com/TheMightyPenguin/dessert-box)\n\n---\n\n- [API](#api)\n  - [defineProperties](#defineproperties)\n    - [`properties`](#properties)\n    - [`shorthands`](#shorthands)\n    - [`conditions`](#conditions)\n    - [`defaultCondition`](#defaultcondition)\n    - [`responsiveArray`](#responsivearray)\n  - [createSprinkles](#createsprinkles)\n- [Utilities](#utilities)\n  - [createMapValueFn](#createmapvaluefn)\n  - [createNormalizeValueFn](#createnormalizevaluefn)\n- [Types](#types)\n  - [ConditionalValue](#conditionalvalue)\n  - [RequiredConditionalValue](#requiredconditionalvalue)\n- [Thanks](#thanks)\n- [License](#license)\n\n---\n\n## API\n\n### defineProperties\n\nDefines a collection of utility classes with [properties](#properties), [conditions](#conditions) and [shorthands.](#shorthands)\n\nIf you need to scope different conditions to different properties (e.g. some properties support breakpoints, some support light mode and dark mode, some are unconditional), you can provide as many collections of properties to [`createSprinkles`](#createsprinkles) as you like.\n\n```ts\nimport {\n  defineProperties,\n  createSprinkles\n} from '@vanilla-extract/sprinkles';\n\nconst space = {\n  none: 0,\n  small: '4px',\n  medium: '8px',\n  large: '16px'\n};\n\nconst colors = {\n  blue50: '#eff6ff',\n  blue100: '#dbeafe',\n  blue200: '#bfdbfe'\n  // etc.\n};\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  properties: {\n    display: ['none', 'block', 'flex'],\n    flexDirection: ['row', 'column'],\n    padding: space\n    // etc.\n  }\n});\n\nconst colorProperties = defineProperties({\n  conditions: {\n    lightMode: { '@media': '(prefers-color-scheme: light)' },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: false,\n  properties: {\n    color: colors,\n    background: colors\n  }\n  // etc.\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  colorProperties\n);\n```\n\n> 💡 If you want a good color palette to work with, you might want to consider importing [`tailwindcss/colors.`](https://tailwindcss.com/docs/customizing-colors#color-palette-reference)\n\n#### `properties`\n\nDefine which CSS properties and values should be available.\n\nFor simple mappings (i.e. valid CSS values), values can be provided as an array.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    display: ['none', 'block', 'flex'],\n    flexDirection: ['row', 'column'],\n    alignItems: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end'\n    ],\n    justifyContent: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end'\n    ]\n    // etc.\n  }\n});\n```\n\nFor semantic mappings (e.g. space scales, color palettes), values can be provided as an object.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    gap: {\n      none: 0,\n      small: 4,\n      medium: 8,\n      large: 16\n    }\n    // etc.\n  }\n});\n```\n\nYou can also use [vanilla-extract themes](/documentation/api/create-theme) to configure themed values.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\nimport { vars } from './vars.css.ts';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    gap: vars.space\n    // etc.\n  }\n});\n```\n\nFor more complicated scenarios, values can even be entire style objects. This works especially well when combined with CSS Variables.\n\n> 💡 Styles are created in the order that they were defined in your config. Properties that are less specific should be higher in the list.\n\n```ts\nimport { createVar } from '@vanilla-extract/css';\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst alpha = createVar();\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    background: {\n      red: {\n        vars: { [alpha]: '1' },\n        background: `rgba(255, 0, 0, ${alpha})`\n      }\n    },\n    backgroundOpacity: {\n      1: { vars: { [alpha]: '1' } },\n      0.1: { vars: { [alpha]: '0.1' } }\n    }\n    // etc.\n  }\n});\n```\n\n#### `shorthands`\n\nMaps custom shorthand properties to multiple underlying CSS properties. This is useful for mapping values like `padding`/`paddingX`/`paddingY` to their underlying longhand values.\n\n> 💡 Shorthands are evaluated in the order that they were defined in your configuration. Shorthands that are less specific should be higher in the list, e.g. `padding` should come before `paddingX`/`paddingY`.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\nimport { vars } from './vars.css.ts';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    paddingTop: vars.space,\n    paddingBottom: vars.space,\n    paddingLeft: vars.space,\n    paddingRight: vars.space\n  },\n  shorthands: {\n    padding: [\n      'paddingTop',\n      'paddingBottom',\n      'paddingLeft',\n      'paddingRight'\n    ],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom']\n  }\n});\n```\n\n#### `conditions`\n\nDefine a set of media/feature queries for the provided properties.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile'\n  // etc.\n});\n```\n\nProperties can also be scoped to selectors.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst properties = defineProperties({\n  conditions: {\n    default: {},\n    hover: { selector: '&:hover' },\n    focus: { selector: '&:focus' }\n  },\n  defaultCondition: 'default'\n  // etc.\n});\n```\n\n#### `defaultCondition`\n\nDefines which condition(s) should be used when a non-conditional value is requested, e.g. `sprinkles({ display: 'flex' })`.\n\nIf you're using mobile-first responsive conditions, this should be your lowest breakpoint.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile'\n  // etc.\n});\n```\n\nIf your conditions are mutually exclusive (e.g. light mode and dark mode), you can provide an array of default conditions. For example, the following configuration would automatically expand `sprinkles({ background: 'white' })` to the equivalent of `sprinkles({ background: { lightMode: 'white', darkMode: 'white' }})`.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    lightMode: { '@media': '(prefers-color-scheme: light)' },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: ['lightMode', 'darkMode']\n  // etc.\n});\n```\n\nYou can also set `defaultCondition` to `false`, which forces you to be explicit about which conditions you’re targeting.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    lightMode: {\n      '@media': '(prefers-color-scheme: light)'\n    },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: false\n  // etc.\n});\n```\n\n#### `responsiveArray`\n\nProviding an array of condition names enables the responsive array notation (e.g. `['column', 'row']`) by defining the order of conditions.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  responsiveArray: ['mobile', 'tablet', 'desktop']\n  // etc.\n});\n```\n\n### createSprinkles\n\nCreates a type-safe function for accessing your [defined properties](#defineProperties). You can provide as many collections of properties as you like.\n\n```ts\nimport {\n  defineProperties,\n  createSprinkles\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\nconst unconditionalProperties = defineProperties({\n  /* ... */\n});\nconst colorProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  unconditionalProperties,\n  colorProperties\n);\n```\n\nThe sprinkles function also exposes a static `properties` key that lets you check whether a given property can be handled by the function.\n\n```ts\nsprinkles.properties.has('paddingX');\n// -> boolean\n```\n\n> 💡 This is useful when building a Box component with sprinkles available at the top level (e.g. `<Box padding=\"small\">`) since you’ll need some way to filter sprinkle props from non-sprinkle props.\n\n\n## Utilities\n\n### createMapValueFn\n\nCreates a function for mapping over conditional values.\n\n> 💡 This is useful for converting high-level prop values to low-level sprinkles, e.g. converting left/right to flex-start/end.\n\nThis function should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\nYou can name the generated function whatever you like, typically based on the name of your conditions.\n\n```ts\nimport {\n  defineProperties,\n  createSprinkles,\n  createMapValueFn\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties\n);\nexport const mapResponsiveValue = createMapValueFn(\n  responsiveProperties\n);\n```\n\nYou can then import the generated function in your app code.\n\n```ts\nimport { mapResponsiveValue } from './sprinkles.css.ts';\n\nconst alignToFlexAlign = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n  stretch: 'stretch'\n} as const;\n\nmapResponsiveValue(\n  'left',\n  (value) => alignToFlexAlign[value]\n);\n// -> 'flex-start'\n\nmapResponsiveValue(\n  {\n    mobile: 'center',\n    desktop: 'left'\n  } as const,\n  (value) => alignToFlexAlign[value]\n);\n// -> { mobile: 'center', desktop: 'flex-start' }\n\nmapResponsiveValue(\n  ['center', null, 'left'] as const,\n  (value) => alignToFlexAlign[value]\n);\n// -> { mobile: 'center', desktop: 'flex-start' }\n```\n\n> 💡 You can generate a custom conditional value type with the [ConditionalValue](#conditionalvalue) type.\n\n### createNormalizeValueFn\n\nCreates a function for normalizing conditional values into a consistent object structure. Any primitive values or responsive arrays will be converted to conditional objects.\n\nThis function should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\n> 💡 You can name the generated function whatever you like, typically based on the name of your conditions.\n\n```ts\nimport {\n  defineProperties,\n  createSprinkles,\n  createNormalizeValueFn\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties\n);\nexport const normalizeResponsiveValue =\n  createNormalizeValueFn(responsiveProperties);\n```\n\nYou can then import the generated function in your app code.\n\n```ts\nimport { normalizeResponsiveValue } from './sprinkles.css.ts';\n\nnormalizeResponsiveValue('block');\n// -> { mobile: 'block' }\n\nnormalizeResponsiveValue(['none', null, 'block']);\n// -> { mobile: 'block', desktop: 'block' }\n\nnormalizeResponsiveValue({\n  mobile: 'none',\n  desktop: 'block'\n});\n// -> { mobile: 'block', desktop: 'block' }\n```\n\n## Types\n\n### ConditionalValue\n\nCreates a custom conditional value type.\n\n> 💡 This is useful for typing high-level prop values that are [mapped to low-level sprinkles,](#createmapvaluefn) e.g. supporting left/right prop values that map to flex-start/end.\n\nThis type should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\n> 💡 You can name the generated type whatever you like, typically based on the name of your conditions.\n\n```ts\nimport {\n  defineProperties,\n  ConditionalValue\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport type ResponsiveValue<Value extends string | number> =\n  ConditionalValue<typeof responsiveProperties, Value>;\n```\n\nYou can then import the generated type in your app code.\n\n```ts\nimport { ResponsiveValue } from './sprinkles.css.ts';\n\ntype ResponsiveAlign = ResponsiveValue<\n  'left' | 'center' | 'right'\n>;\n\nconst a: ResponsiveAlign = 'left';\nconst b: ResponsiveAlign = {\n  mobile: 'center',\n  desktop: 'left'\n};\nconst c: ResponsiveAlign = ['center', null, 'left'];\n```\n\n### RequiredConditionalValue\n\nSame as [ConditionalValue](#conditionalvalue) except the default condition is required. For example, if your default condition was `'mobile'`, then a conditional value of `{ desktop: '...' }` would be a type error.\n\n```ts\nimport {\n  defineProperties,\n  RequiredConditionalValue\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  defaultCondition: 'mobile'\n  // etc.\n});\n\nexport type RequiredResponsiveValue<\n  Value extends string | number\n> = RequiredConditionalValue<\n  typeof responsiveProperties,\n  Value\n>;\n```\n\nYou can then import the generated type in your app code.\n\n```ts\nimport { RequiredResponsiveValue } from './sprinkles.css.ts';\n\ntype ResponsiveAlign = RequiredResponsiveValue<\n  'left' | 'center' | 'right'\n>;\n\nconst a: ResponsiveAlign = 'left';\nconst b: ResponsiveAlign = {\n  mobile: 'center',\n  desktop: 'left'\n};\nconst c: ResponsiveAlign = ['center', null, 'left'];\n\n// Type errors:\nconst d: ResponsiveAlign = [null, 'center'];\nconst e: ResponsiveAlign = { desktop: 'center' };\n```\n\n---\n\n## Thanks\n\n- [Styled System](https://styled-system.com) for inspiring our approach to responsive props.\n- [Tailwind](https://tailwindcss.com) for teaching us to think utility-first.\n- [SEEK](https://www.seek.com.au) for giving us the space to do interesting work.\n\n## License\n\nMIT.\n","site/docs/packages/css-utils.md":"---\ntitle: CSS Utils\nparent: packages\n---\n\n# CSS Utils\n\nAn optional package providing utility functions that make it easier to work with CSS in TypeScript.\n\n```bash\nnpm install @vanilla-extract/css-utils\n```\n\nThis package is not limited to vanilla-extract—it can be used with any CSS-in-JS library.\n\n## calc\n\nStreamlines the creation of CSS calc expressions.\n\n### Simple expressions\n\n```tsx\nimport { calc } from '@vanilla-extract/css-utils';\n\nconst styles = {\n  height: calc.multiply('var(--grid-unit)', 2)\n};\n```\n\nThe following functions are available.\n\n- `calc.add`\n- `calc.subtract`\n- `calc.multiply`\n- `calc.divide`\n- `calc.negate`\n\n### Chainable expressions\n\nThe `calc` export is also a function, providing a chainable API for complex calc expressions.\n\n> When using expression chains it is necessary to call `toString()` to return the constructed expression as the final value.\n\n```tsx\nimport { calc } from '@vanilla-extract/css-utils';\n\nconst styles = {\n  marginTop: calc('var(--space-large)')\n    .divide(2)\n    .negate()\n    .toString()\n};\n```\n","site/docs/packages/dynamic.md":"---\ntitle: Dynamic\nparent: packages\n---\n\n# Dynamic\n\nA tiny ([< 1kB compressed](https://bundlephobia.com/package/@vanilla-extract/dynamic@2.0.2)) runtime for performing dynamic updates to scoped theme variables.\n\n```bash\nnpm install @vanilla-extract/dynamic\n```\n\n## assignInlineVars\n\nAllows variables to be assigned dynamically that have been created using vanilla-extract APIs, e.g. `createVar`, `createTheme`, etc.\n\nAs these APIs produce variable references that contain the CSS var function, e.g. `var(--brandColor__8uideo0)`, it is necessary to remove the wrapping function when setting its value.\n\nVariables with a value of `null` or `undefined` will be omitted from the resulting inline style.\n\n> 🧠&nbsp;&nbsp;`null` and `undefined` values can only be passed to `assignInlineVars` if a theme contract is not provided\n\n```tsx compiled\n// app.tsx\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport {\n  container,\n  brandColor,\n  textColor\n} from './styles.css.ts';\n\n// If `tone` is `undefined`, the following inline style becomes:\n// { '--brandColor__8uideo0': 'pink' }\n\nconst MyComponent = ({ tone }: { tone?: critical }) => (\n  <section\n    className={container}\n    style={assignInlineVars({\n      [brandColor]: 'pink',\n      [textColor]: tone === 'critical' ? 'red' : null\n    })}\n  >\n    ...\n  </section>\n);\n\n// styles.css.ts\nimport { createVar, style } from '@vanilla-extract/css';\n\nexport const brandColor = createVar();\nexport const textColor = createVar();\n\nexport const container = style({\n  background: brandColor,\n  color: textColor\n});\n```\n\nEven though this function returns an object of inline styles, it implements the `toString` method, returning a valid `style` attribute value so that it can be used in string templates.\n\n```ts\n// app.ts\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { container, brandColor } from './styles.css.ts';\n\n// The following inline style becomes:\n// \"--brandColor__8uideo0: pink;\"\n\ndocument.write(`\n  <section\n    class=\"${container}\"\n    style=\"${assignInlineVars({ [brandColor]: 'pink' })}\"\n  >\n    ...\n  </section>\n`);\n```\n\n### Assigning theme contracts dynamically\n\n[Theme contracts](/documentation/theming/) can also be assigned dynamically by passing one as the first argument.\nAll variables must be assigned or it’s a type error.\n\nThis API makes the concept of dynamic theming much simpler.\n\n```tsx compiled\n// app.tsx\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { container, themeVars } from './theme.css.ts';\n\ninterface ContainerProps {\n  brandColor: string;\n  fontFamily: string;\n}\nconst Container = ({\n  brandColor,\n  fontFamily\n}: ContainerProps) => (\n  <section\n    className={container}\n    style={assignInlineVars(themeVars, {\n      color: { brand: brandColor },\n      font: { body: fontFamily }\n    })}\n  >\n    ...\n  </section>\n);\n\nconst App = () => (\n  <Container brandColor=\"pink\" fontFamily=\"Arial\">\n    ...\n  </Container>\n);\n\n// theme.css.ts\nimport {\n  createThemeContract,\n  style\n} from '@vanilla-extract/css';\n\nexport const themeVars = createThemeContract({\n  color: {\n    brand: null\n  },\n  font: {\n    body: null\n  }\n});\n\nexport const container = style({\n  background: themeVars.color.brand,\n  fontFamily: themeVars.font.body\n});\n```\n\n## setElementVars\n\nAn imperative API, allowing variables created using vanilla-extract APIs, e.g. `createVar`, `createTheme`, etc, to be assigned dynamically on a DOM element.\n\nVariables with a value of `null` or `undefined` will not be assigned a value.\n\n> 🧠&nbsp;&nbsp;`null` and `undefined` values can only be passed to `setElementVars` if a theme contract is not provided\n\n```ts compiled\n// app.ts\n\nimport { setElementVars } from '@vanilla-extract/dynamic';\nimport { brandColor, textColor } from './styles.css.ts';\n\nconst el = document.getElementById('myElement');\n\nsetElementVars(el, {\n  [brandColor]: 'pink',\n  [textColor]: null\n});\n\n// styles.css.ts\nimport { createVar, style } from '@vanilla-extract/css';\n\nexport const brandColor = createVar();\nexport const textColor = createVar();\n```\n\n### Setting theme contracts dynamically\n\n[Theme contracts](/documentation/theming/) can also be set dynamically by passing one as the second argument.\nAll variables must be assigned or it’s a type error.\n\n```ts compiled\n// app.ts\n\nimport { setElementVars } from '@vanilla-extract/dynamic';\nimport { themeVars } from './theme.css.ts';\n\nconst el = document.getElementById('myElement');\n\nsetElementVars(el, themeVars, {\n  color: { brand: 'pink' },\n  font: { body: 'Arial' }\n});\n\n// theme.css.ts\nimport { createThemeContract } from '@vanilla-extract/css';\n\nexport const themeVars = createThemeContract({\n  color: {\n    brand: null\n  },\n  font: {\n    body: null\n  }\n});\n```\n","site/docs/packages/recipes.md":"---\ntitle: Recipes\nparent: packages\n---\n\n# Recipes\n\nCreate multi-variant styles with a type-safe runtime API, heavily inspired by [Stitches](https://stitches.dev).\n\nAs with the rest of vanilla-extract, all styles are generated at build time.\n\n> 💡 Recipes is an optional package built on top of vanilla-extract using its [function serialization API.](/documentation/api/add-function-serializer) It doesn't have privileged access to vanilla-extract internals so you're also free to build alternative implementations.\n\n## Setup\n\n```bash\nnpm install @vanilla-extract/recipes\n```\n\n## recipe\n\nCreates a multi-variant style function that can be used at runtime or statically in `.css.ts` files.\n\nAccepts an optional set of `base` styles, `variants`, `compoundVariants` and `defaultVariants`.\n\n```ts compiled\n// button.css.ts\nimport { recipe } from '@vanilla-extract/recipes';\n\nexport const button = recipe({\n  base: {\n    borderRadius: 6\n  },\n\n  variants: {\n    color: {\n      neutral: { background: 'whitesmoke' },\n      brand: { background: 'blueviolet' },\n      accent: { background: 'slateblue' }\n    },\n    size: {\n      small: { padding: 12 },\n      medium: { padding: 16 },\n      large: { padding: 24 }\n    },\n    rounded: {\n      true: { borderRadius: 999 }\n    }\n  },\n\n  // Applied when multiple variants are set at once\n  compoundVariants: [\n    {\n      variants: {\n        color: 'neutral',\n        size: 'large'\n      },\n      style: {\n        background: 'ghostwhite'\n      }\n    }\n  ],\n\n  defaultVariants: {\n    color: 'accent',\n    size: 'medium'\n  }\n});\n```\n\nWith this recipe configured, you can now use it in your templates.\n\n```ts\n// app.ts\nimport { button } from './button.css.ts';\n\ndocument.write(`\n  <button class=\"${button({\n    color: 'accent',\n    size: 'large',\n    rounded: true\n  })}\">\n    Hello world\n  </button>\n`);\n```\n\nYour recipe configuration can also make use of existing variables, classes and styles.\n\nFor example, you can pass in the result of your [`sprinkles`](/documentation/packages/sprinkles) function directly.\n\n```ts\n// button.css.ts\nimport { recipe } from '@vanilla-extract/recipes';\nimport { reset } from './reset.css.ts';\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const button = recipe({\n  base: [reset, sprinkles({ borderRadius: 'round' })],\n\n  variants: {\n    color: {\n      neutral: sprinkles({ background: 'neutral' }),\n      brand: sprinkles({ background: 'brand' }),\n      accent: sprinkles({ background: 'accent' })\n    },\n    size: {\n      small: sprinkles({ padding: 'small' }),\n      medium: sprinkles({ padding: 'medium' }),\n      large: sprinkles({ padding: 'large' })\n    }\n  },\n\n  defaultVariants: {\n    color: 'accent',\n    size: 'medium'\n  }\n});\n```\n\nThe recipes function also exposes an array property `variants` that includes all the variants from your recipe.\n\n```ts\nbutton.variants();\n// -> ['color', 'size']\n```\n\n## Recipe class name selection\n\nRecipes function exposes internal class names in `classNames` property.\nThe property has two predefined props: `base` and `variants`. The `base` prop includes base class name. It is always defined even if you do not have any base styles. The `variants` prop includes class names for each defined variant.\n\n```ts\n// app.css.ts\nconsole.log(button.classNames.base);\n// -> app_button__129pj250\nconsole.log(button.classNames.variants.color.neutral);\n// -> app_button_color_neutral__129pj251\nconsole.log(button.classNames.variants.size.small);\n// -> app_button_size_small__129pj254\n```\n\n## RecipeVariants\n\nA utility to make use of the recipe’s type interface. This can be useful when typing functions or component props that need to accept recipe values as part of their interface.\n\n```ts\n// button.css.ts\nimport {\n  recipe,\n  RecipeVariants\n} from '@vanilla-extract/recipes';\n\nexport const button = recipe({\n  variants: {\n    color: {\n      neutral: { background: 'whitesmoke' },\n      brand: { background: 'blueviolet' },\n      accent: { background: 'slateblue' }\n    },\n    size: {\n      small: { padding: 12 },\n      medium: { padding: 16 },\n      large: { padding: 24 }\n    }\n  }\n});\n\n// Get the type\nexport type ButtonVariants = RecipeVariants<typeof button>;\n\n// the above will result in a type equivalent to:\nexport type ButtonVariants = {\n  color?: 'neutral' | 'brand' | 'accent';\n  size?: 'small' | 'medium' | 'large';\n};\n```\n","site/docs/packages/sprinkles.md":"---\ntitle: Sprinkles\nparent: packages\n---\n\n# Sprinkles\n\nA zero-runtime atomic CSS framework for vanilla-extract.\n\nGenerate a static set of custom utility classes and compose them either statically at build time, or dynamically at runtime, without the usual style generation overhead of CSS-in-JS.\n\nBasically, it’s like building your own zero-runtime, type-safe version of [Tailwind], [Styled System], etc.\n\n> 💡 Sprinkles is an optional package built on top of vanilla-extract using its [function serialization API.](/documentation/api/add-function-serializer) It doesn't have privileged access to vanilla-extract internals so you're also free to build alternative implementations, e.g. [Rainbow Sprinkles.](https://github.com/wayfair/rainbow-sprinkles)\n\n## Setup\n\n```bash\nnpm install @vanilla-extract/sprinkles\n```\n\nCreate a `sprinkles.css.ts` file, then configure and export your `sprinkles` function.\n\n> 💡 This is just an example! Feel free to customise properties, values and conditions to match your requirements.\n\n```ts compiled\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  createSprinkles\n} from '@vanilla-extract/sprinkles';\n\nconst space = {\n  none: 0,\n  small: '4px',\n  medium: '8px',\n  large: '16px'\n  // etc.\n};\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  properties: {\n    display: ['none', 'flex', 'block', 'inline'],\n    flexDirection: ['row', 'column'],\n    justifyContent: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end',\n      'space-around',\n      'space-between'\n    ],\n    alignItems: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end'\n    ],\n    paddingTop: space,\n    paddingBottom: space,\n    paddingLeft: space,\n    paddingRight: space\n    // etc.\n  },\n  shorthands: {\n    padding: [\n      'paddingTop',\n      'paddingBottom',\n      'paddingLeft',\n      'paddingRight'\n    ],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom'],\n    placeItems: ['justifyContent', 'alignItems']\n  }\n});\n\nconst colors = {\n  'blue-50': '#eff6ff',\n  'blue-100': '#dbeafe',\n  'blue-200': '#bfdbfe',\n  'gray-700': '#374151',\n  'gray-800': '#1f2937',\n  'gray-900': '#111827'\n  // etc.\n};\n\nconst colorProperties = defineProperties({\n  conditions: {\n    lightMode: {},\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: 'lightMode',\n  properties: {\n    color: colors,\n    background: colors\n    // etc.\n  }\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  colorProperties\n);\n\n// It's a good idea to export the Sprinkles type too\nexport type Sprinkles = Parameters<typeof sprinkles>[0];\n```\n\n## Usage\n\nYou can use your `sprinkles` function in `.css.ts` files for zero-runtime usage.\n\n```ts\n// styles.css.ts\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = sprinkles({\n  display: 'flex',\n  paddingX: 'small',\n\n  // Conditional sprinkles:\n  flexDirection: {\n    mobile: 'column',\n    desktop: 'row'\n  },\n  background: {\n    lightMode: 'blue-50',\n    darkMode: 'gray-700'\n  }\n});\n```\n\nIf you want, you can even use your `sprinkles` function at runtime! 🏃‍♂️\n\n```tsx\n// app.ts\nimport { sprinkles } from './sprinkles.css.ts';\n\nconst flexDirection =\n  Math.random() > 0.5 ? 'column' : 'row';\n\ndocument.write(`\n  <section class=\"${sprinkles({\n    display: 'flex',\n    flexDirection\n  })}\">\n    ...\n  </section>\n`);\n```\n\n> 💡 Although you don’t need to use this library at runtime, it’s designed to be as small and performant as possible. The runtime is only used to look up pre-existing class names. All styles are still generated at build time!\n\nWithin `.css.ts` files, combine with any custom styles by providing an array to vanilla-extract’s [style](/documentation/api/style) function.\n\n```ts\n// styles.css.ts\nimport { style } from '@vanilla-extract/css';\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = style([\n  sprinkles({\n    display: 'flex',\n    padding: 'small'\n  }),\n  {\n    ':hover': {\n      outline: '2px solid currentColor'\n    }\n  }\n]);\n```\n\nSprinkles uses this internally, which means that a class list returned by `sprinkles` can be treated as if it were a single class within vanilla-extract selectors.\n\n```ts\n// styles.css.ts\nimport { globalStyle } from '@vanilla-extract/css';\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = sprinkles({\n  padding: 'small'\n});\n\nglobalStyle(`${container} *`, {\n  boxSizing: 'border-box'\n});\n```\n\n## defineProperties\n\nDefines a collection of utility classes with [properties](#properties), [conditions](#conditions) and [shorthands.](#shorthands)\n\nIf you need to scope different conditions to different properties (e.g. some properties support breakpoints, some support light mode and dark mode, some are unconditional), you can provide as many collections of properties to [createSprinkles](#createsprinkles) as you like.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  createSprinkles\n} from '@vanilla-extract/sprinkles';\n\nconst space = {\n  none: 0,\n  small: '4px',\n  medium: '8px',\n  large: '16px'\n};\n\nconst colors = {\n  blue50: '#eff6ff',\n  blue100: '#dbeafe',\n  blue200: '#bfdbfe'\n  // etc.\n};\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  properties: {\n    display: ['none', 'block', 'flex'],\n    flexDirection: ['row', 'column'],\n    padding: space\n    // etc.\n  }\n});\n\nconst colorProperties = defineProperties({\n  conditions: {\n    lightMode: {\n      '@media': '(prefers-color-scheme: light)'\n    },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: false,\n  properties: {\n    color: colors,\n    background: colors\n  }\n  // etc.\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  colorProperties\n);\n```\n\n> 💡 If you want a good color palette to work with, you might want to consider importing [tailwindcss/colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).\n\n### properties\n\nDefine which CSS properties and values should be available.\n\nFor simple mappings (i.e. valid CSS values), values can be provided as an array.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    display: ['none', 'block', 'flex'],\n    flexDirection: ['row', 'column'],\n    alignItems: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end'\n    ],\n    justifyContent: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end'\n    ]\n    // etc.\n  }\n});\n```\n\nFor semantic mappings (e.g. space scales, color palettes), values can be provided as an object.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    gap: {\n      none: 0,\n      small: 4,\n      medium: 8,\n      large: 16\n    }\n    // etc.\n  }\n});\n```\n\nYou can also use [vanilla-extract themes](/documentation/theming) to configure themed values.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\nimport { vars } from './vars.css.ts';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    gap: vars.space\n    // etc.\n  }\n});\n```\n\nFor more complicated scenarios, values can even be entire style objects. This works especially well when combined with CSS Variables.\n\n> 💡 Styles are created in the order that they were defined in your config. Properties that are less specific should be higher in the list.\n\n```ts\n// sprinkles.css.ts\nimport { createVar } from '@vanilla-extract/css';\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst alpha = createVar();\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    background: {\n      red: {\n        vars: { [alpha]: '1' },\n        background: `rgba(255, 0, 0, ${alpha})`\n      }\n    },\n    backgroundOpacity: {\n      1: { vars: { [alpha]: '1' } },\n      0.1: { vars: { [alpha]: '0.1' } }\n    }\n    // etc.\n  }\n});\n```\n\n### shorthands\n\nMaps custom shorthand properties to multiple underlying CSS properties. This is useful for mapping values like `padding`/`paddingX`/`paddingY` to their underlying longhand values.\n\n> 💡 Shorthands are evaluated in the order that they were defined in your configuration. Shorthands that are less specific should be higher in the list, e.g. `padding` should come before `paddingX`/`paddingY`.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\nimport { vars } from './vars.css.ts';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    paddingTop: vars.space,\n    paddingBottom: vars.space,\n    paddingLeft: vars.space,\n    paddingRight: vars.space\n  },\n  shorthands: {\n    padding: [\n      'paddingTop',\n      'paddingBottom',\n      'paddingLeft',\n      'paddingRight'\n    ],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom']\n  }\n});\n```\n\n### conditions\n\nDefine a set of media/feature/container queries for the provided properties.\n\nFor example, properties can be scoped to media queries.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile'\n  // etc.\n});\n```\n\nProperties can also be scoped to selectors.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst properties = defineProperties({\n  conditions: {\n    default: {},\n    hover: { selector: '&:hover' },\n    focus: { selector: '&:focus' }\n  },\n  defaultCondition: 'default'\n  // etc.\n});\n```\n\nProperties can also be scoped to container queries.\n\n> 🚧&nbsp;&nbsp;Ensure your target browsers [support container queries]. Vanilla-extract supports the [container query syntax] but does not polyfill the feature in unsupported browsers.\n\n```ts\n// sprinkles.css.ts\nimport {\n  createContainer,\n  style\n} from '@vanilla-extract/css';\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst containerName = createContainer();\n\nexport const container = style({\n  containerName,\n  containerType: 'size'\n});\n\nconst containerProperties = defineProperties({\n  conditions: {\n    small: {},\n    medium: {\n      '@container': `${containerName} (min-width: 768px)`\n    },\n    large: {\n      '@container': `${containerName} (min-width: 1024px)`\n    }\n  },\n  defaultCondition: 'small'\n  // etc.\n});\n```\n\n### defaultCondition\n\nDefines which condition(s) should be used when a non-conditional value is requested, e.g. `sprinkles({ display: 'flex' })`.\n\nIf you're using mobile-first responsive conditions, this should be your lowest breakpoint.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile'\n  // etc.\n});\n```\n\nIf your conditions are mutually exclusive (e.g. light mode and dark mode), you can provide an array of default conditions. For example, the following configuration would automatically expand `sprinkles({ background: 'white' })` to the equivalent of `sprinkles({ background: { lightMode: 'white', darkMode: 'white' }})`.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    lightMode: {\n      '@media': '(prefers-color-scheme: light)'\n    },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: ['lightMode', 'darkMode']\n  // etc.\n});\n```\n\nYou can also set `defaultCondition` to `false`, which forces you to be explicit about which conditions you’re targeting.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    lightMode: {\n      '@media': '(prefers-color-scheme: light)'\n    },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: false\n  // etc.\n});\n```\n\n### responsiveArray\n\nProviding an array of condition names enables the responsive array notation (e.g. `['column', 'row']`) by defining the order of conditions.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  responsiveArray: ['mobile', 'tablet', 'desktop']\n  // etc.\n});\n```\n\n### @layer\n\nOptionally defines a layer to assign styles to for a given set of properties.\n\n> 🚧&nbsp;&nbsp;Ensure your target browsers [support layers].\n> Vanilla Extract supports the [layers syntax][layer] but does not polyfill the feature in unsupported browsers.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\nimport { layer } from '@vanilla-extract/css';\n\nexport const sprinklesLayer = layer();\n\nconst properties = defineProperties({\n  '@layer': sprinklesLayer\n  // etc.\n});\n```\n\n## createSprinkles\n\nCreates a type-safe function for accessing your [defined properties](#defineProperties). You can provide as many collections of properties as you like.\n\n> 🚧&nbsp;&nbsp;Ensure properties are defined as variables before passing them into `createSprinkles`.\n> Calling `defineProperties` inside a `createSprinkles` call will cause types to be inferred incorrectly, resulting in a type-unsafe sprinkles function.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  createSprinkles\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\nconst unconditionalProperties = defineProperties({\n  /* ... */\n});\nconst colorProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  unconditionalProperties,\n  colorProperties\n);\n```\n\nThe sprinkles function also exposes a static `properties` key that lets you check whether a given property can be handled by the function.\n\n```ts\nsprinkles.properties.has('paddingX');\n// -> boolean\n```\n\n> 💡 This is useful when building a Box component with sprinkles available at the top level (e.g. `<Box padding=\"small\">`) since you’ll need some way to filter sprinkle props from non-sprinkle props.\n\n## createMapValueFn\n\nCreates a function for mapping over conditional values.\n\n> 💡 This is useful for converting high-level prop values to low-level sprinkles, e.g. converting left/right to flex-start/end.\n\nThis function should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\nYou can name the generated function whatever you like, typically based on the name of your conditions.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  createSprinkles,\n  createMapValueFn\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties\n);\nexport const mapResponsiveValue = createMapValueFn(\n  responsiveProperties\n);\n```\n\nYou can then import the generated function in your app code.\n\n```ts\n// app.ts\nimport { mapResponsiveValue } from './sprinkles.css.ts';\n\nconst alignToFlexAlign = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n  stretch: 'stretch'\n} as const;\n\nmapResponsiveValue(\n  'left',\n  (value) => alignToFlexAlign[value]\n);\n// -> 'flex-start'\n\nmapResponsiveValue(\n  {\n    mobile: 'center',\n    desktop: 'left'\n  } as const,\n  (value) => alignToFlexAlign[value]\n);\n// -> { mobile: 'center', desktop: 'flex-start' }\n\nmapResponsiveValue(\n  ['center', null, 'left'] as const,\n  (value) => alignToFlexAlign[value]\n);\n// -> { mobile: 'center', desktop: 'flex-start' }\n```\n\n> 💡 You can generate a custom conditional value type with the [ConditionalValue](#conditionalvalue) type.\n\n## createNormalizeValueFn\n\nCreates a function for normalizing conditional values into a consistent object structure. Any primitive values or responsive arrays will be converted to conditional objects.\n\nThis function should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\n> 💡 You can name the generated function whatever you like, typically based on the name of your conditions.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  createSprinkles,\n  createNormalizeValueFn\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties\n);\nexport const normalizeResponsiveValue =\n  createNormalizeValueFn(responsiveProperties);\n```\n\nYou can then import the generated function in your app code.\n\n```ts\n// app.ts\nimport { normalizeResponsiveValue } from './sprinkles.css.ts';\n\nnormalizeResponsiveValue('block');\n// -> { mobile: 'block' }\n\nnormalizeResponsiveValue(['none', null, 'block']);\n// -> { mobile: 'none', desktop: 'block' }\n\nnormalizeResponsiveValue({\n  mobile: 'none',\n  desktop: 'block'\n});\n// -> { mobile: 'none', desktop: 'block' }\n```\n\n## ConditionalValue\n\nCreates a custom conditional value type.\n\n> 💡 This is useful for typing high-level prop values that are [mapped to low-level sprinkles](#createmapvaluefn), e.g. supporting left/right prop values that map to flex-start/end.\n\nThis type should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\n> 💡 You can name the generated type whatever you like, typically based on the name of your conditions.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  ConditionalValue\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport type ResponsiveValue<Value extends string | number> =\n  ConditionalValue<typeof responsiveProperties, Value>;\n```\n\nYou can then import the generated type in your app code.\n\n```ts\n// app.ts\nimport { ResponsiveValue } from './sprinkles.css.ts';\n\ntype ResponsiveAlign = ResponsiveValue<\n  'left' | 'center' | 'right'\n>;\n\nconst a: ResponsiveAlign = 'left';\nconst b: ResponsiveAlign = {\n  mobile: 'center',\n  desktop: 'left'\n};\nconst c: ResponsiveAlign = ['center', null, 'left'];\n```\n\n## RequiredConditionalValue\n\nSame as [ConditionalValue](#conditionalvalue) except the default condition is required. For example, if your default condition was `'mobile'`, then a conditional value of `{ desktop: '...' }` would be a type error.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  RequiredConditionalValue\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  defaultCondition: 'mobile'\n  // etc.\n});\n\nexport type RequiredResponsiveValue<\n  Value extends string | number\n> = RequiredConditionalValue<\n  typeof responsiveProperties,\n  Value\n>;\n```\n\nYou can then import the generated type in your app code.\n\n```ts\n// app.ts\nimport { RequiredResponsiveValue } from './sprinkles.css.ts';\n\ntype ResponsiveAlign = RequiredResponsiveValue<\n  'left' | 'center' | 'right'\n>;\n\nconst a: ResponsiveAlign = 'left';\nconst b: ResponsiveAlign = {\n  mobile: 'center',\n  desktop: 'left'\n};\nconst c: ResponsiveAlign = ['center', null, 'left'];\n\n// Type errors:\nconst d: ResponsiveAlign = [null, 'center'];\nconst e: ResponsiveAlign = { desktop: 'center' };\n```\n\n[tailwind]: https://tailwindcss.com\n[styled system]: https://github.com/styled-system/styled-system\n[support container queries]: https://caniuse.com/css-container-queries\n[container query syntax]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries\n[layer]: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer\n[support layers]: https://caniuse.com/css-cascade-layers\n"},"items":[{"name":"css-utils.md","path":"site/docs/packages/css-utils.md","rawUrl":"https://raw.githubusercontent.com/vanilla-extract-css/vanilla-extract/HEAD/site/docs/packages/css-utils.md","title":"Packages Skill","category":"anthropic-skill","format":"markdown","content":"---\ntitle: CSS Utils\nparent: packages\n---\n\n# CSS Utils\n\nAn optional package providing utility functions that make it easier to work with CSS in TypeScript.\n\n```bash\nnpm install @vanilla-extract/css-utils\n```\n\nThis package is not limited to vanilla-extract—it can be used with any CSS-in-JS library.\n\n## calc\n\nStreamlines the creation of CSS calc expressions.\n\n### Simple expressions\n\n```tsx\nimport { calc } from '@vanilla-extract/css-utils';\n\nconst styles = {\n  height: calc.multiply('var(--grid-unit)', 2)\n};\n```\n\nThe following functions are available.\n\n- `calc.add`\n- `calc.subtract`\n- `calc.multiply`\n- `calc.divide`\n- `calc.negate`\n\n### Chainable expressions\n\nThe `calc` export is also a function, providing a chainable API for complex calc expressions.\n\n> When using expression chains it is necessary to call `toString()` to return the constructed expression as the final value.\n\n```tsx\nimport { calc } from '@vanilla-extract/css-utils';\n\nconst styles = {\n  marginTop: calc('var(--space-large)')\n    .divide(2)\n    .negate()\n    .toString()\n};\n```\n","frontmatter":{"title":"CSS Utils","parent":"packages"},"isInternal":false,"tokens":264,"sizeBytes":1055},{"name":"dynamic.md","path":"site/docs/packages/dynamic.md","rawUrl":"https://raw.githubusercontent.com/vanilla-extract-css/vanilla-extract/HEAD/site/docs/packages/dynamic.md","title":"Packages Skill","category":"anthropic-skill","format":"markdown","content":"---\ntitle: Dynamic\nparent: packages\n---\n\n# Dynamic\n\nA tiny ([< 1kB compressed](https://bundlephobia.com/package/@vanilla-extract/dynamic@2.0.2)) runtime for performing dynamic updates to scoped theme variables.\n\n```bash\nnpm install @vanilla-extract/dynamic\n```\n\n## assignInlineVars\n\nAllows variables to be assigned dynamically that have been created using vanilla-extract APIs, e.g. `createVar`, `createTheme`, etc.\n\nAs these APIs produce variable references that contain the CSS var function, e.g. `var(--brandColor__8uideo0)`, it is necessary to remove the wrapping function when setting its value.\n\nVariables with a value of `null` or `undefined` will be omitted from the resulting inline style.\n\n> 🧠&nbsp;&nbsp;`null` and `undefined` values can only be passed to `assignInlineVars` if a theme contract is not provided\n\n```tsx compiled\n// app.tsx\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport {\n  container,\n  brandColor,\n  textColor\n} from './styles.css.ts';\n\n// If `tone` is `undefined`, the following inline style becomes:\n// { '--brandColor__8uideo0': 'pink' }\n\nconst MyComponent = ({ tone }: { tone?: critical }) => (\n  <section\n    className={container}\n    style={assignInlineVars({\n      [brandColor]: 'pink',\n      [textColor]: tone === 'critical' ? 'red' : null\n    })}\n  >\n    ...\n  </section>\n);\n\n// styles.css.ts\nimport { createVar, style } from '@vanilla-extract/css';\n\nexport const brandColor = createVar();\nexport const textColor = createVar();\n\nexport const container = style({\n  background: brandColor,\n  color: textColor\n});\n```\n\nEven though this function returns an object of inline styles, it implements the `toString` method, returning a valid `style` attribute value so that it can be used in string templates.\n\n```ts\n// app.ts\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { container, brandColor } from './styles.css.ts';\n\n// The following inline style becomes:\n// \"--brandColor__8uideo0: pink;\"\n\ndocument.write(`\n  <section\n    class=\"${container}\"\n    style=\"${assignInlineVars({ [brandColor]: 'pink' })}\"\n  >\n    ...\n  </section>\n`);\n```\n\n### Assigning theme contracts dynamically\n\n[Theme contracts](/documentation/theming/) can also be assigned dynamically by passing one as the first argument.\nAll variables must be assigned or it’s a type error.\n\nThis API makes the concept of dynamic theming much simpler.\n\n```tsx compiled\n// app.tsx\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { container, themeVars } from './theme.css.ts';\n\ninterface ContainerProps {\n  brandColor: string;\n  fontFamily: string;\n}\nconst Container = ({\n  brandColor,\n  fontFamily\n}: ContainerProps) => (\n  <section\n    className={container}\n    style={assignInlineVars(themeVars, {\n      color: { brand: brandColor },\n      font: { body: fontFamily }\n    })}\n  >\n    ...\n  </section>\n);\n\nconst App = () => (\n  <Container brandColor=\"pink\" fontFamily=\"Arial\">\n    ...\n  </Container>\n);\n\n// theme.css.ts\nimport {\n  createThemeContract,\n  style\n} from '@vanilla-extract/css';\n\nexport const themeVars = createThemeContract({\n  color: {\n    brand: null\n  },\n  font: {\n    body: null\n  }\n});\n\nexport const container = style({\n  background: themeVars.color.brand,\n  fontFamily: themeVars.font.body\n});\n```\n\n## setElementVars\n\nAn imperative API, allowing variables created using vanilla-extract APIs, e.g. `createVar`, `createTheme`, etc, to be assigned dynamically on a DOM element.\n\nVariables with a value of `null` or `undefined` will not be assigned a value.\n\n> 🧠&nbsp;&nbsp;`null` and `undefined` values can only be passed to `setElementVars` if a theme contract is not provided\n\n```ts compiled\n// app.ts\n\nimport { setElementVars } from '@vanilla-extract/dynamic';\nimport { brandColor, textColor } from './styles.css.ts';\n\nconst el = document.getElementById('myElement');\n\nsetElementVars(el, {\n  [brandColor]: 'pink',\n  [textColor]: null\n});\n\n// styles.css.ts\nimport { createVar, style } from '@vanilla-extract/css';\n\nexport const brandColor = createVar();\nexport const textColor = createVar();\n```\n\n### Setting theme contracts dynamically\n\n[Theme contracts](/documentation/theming/) can also be set dynamically by passing one as the second argument.\nAll variables must be assigned or it’s a type error.\n\n```ts compiled\n// app.ts\n\nimport { setElementVars } from '@vanilla-extract/dynamic';\nimport { themeVars } from './theme.css.ts';\n\nconst el = document.getElementById('myElement');\n\nsetElementVars(el, themeVars, {\n  color: { brand: 'pink' },\n  font: { body: 'Arial' }\n});\n\n// theme.css.ts\nimport { createThemeContract } from '@vanilla-extract/css';\n\nexport const themeVars = createThemeContract({\n  color: {\n    brand: null\n  },\n  font: {\n    body: null\n  }\n});\n```\n","frontmatter":{"title":"Dynamic","parent":"packages"},"isInternal":false,"tokens":1185,"sizeBytes":4748},{"name":"recipes.md","path":"site/docs/packages/recipes.md","rawUrl":"https://raw.githubusercontent.com/vanilla-extract-css/vanilla-extract/HEAD/site/docs/packages/recipes.md","title":"Packages Skill","category":"anthropic-skill","format":"markdown","content":"---\ntitle: Recipes\nparent: packages\n---\n\n# Recipes\n\nCreate multi-variant styles with a type-safe runtime API, heavily inspired by [Stitches](https://stitches.dev).\n\nAs with the rest of vanilla-extract, all styles are generated at build time.\n\n> 💡 Recipes is an optional package built on top of vanilla-extract using its [function serialization API.](/documentation/api/add-function-serializer) It doesn't have privileged access to vanilla-extract internals so you're also free to build alternative implementations.\n\n## Setup\n\n```bash\nnpm install @vanilla-extract/recipes\n```\n\n## recipe\n\nCreates a multi-variant style function that can be used at runtime or statically in `.css.ts` files.\n\nAccepts an optional set of `base` styles, `variants`, `compoundVariants` and `defaultVariants`.\n\n```ts compiled\n// button.css.ts\nimport { recipe } from '@vanilla-extract/recipes';\n\nexport const button = recipe({\n  base: {\n    borderRadius: 6\n  },\n\n  variants: {\n    color: {\n      neutral: { background: 'whitesmoke' },\n      brand: { background: 'blueviolet' },\n      accent: { background: 'slateblue' }\n    },\n    size: {\n      small: { padding: 12 },\n      medium: { padding: 16 },\n      large: { padding: 24 }\n    },\n    rounded: {\n      true: { borderRadius: 999 }\n    }\n  },\n\n  // Applied when multiple variants are set at once\n  compoundVariants: [\n    {\n      variants: {\n        color: 'neutral',\n        size: 'large'\n      },\n      style: {\n        background: 'ghostwhite'\n      }\n    }\n  ],\n\n  defaultVariants: {\n    color: 'accent',\n    size: 'medium'\n  }\n});\n```\n\nWith this recipe configured, you can now use it in your templates.\n\n```ts\n// app.ts\nimport { button } from './button.css.ts';\n\ndocument.write(`\n  <button class=\"${button({\n    color: 'accent',\n    size: 'large',\n    rounded: true\n  })}\">\n    Hello world\n  </button>\n`);\n```\n\nYour recipe configuration can also make use of existing variables, classes and styles.\n\nFor example, you can pass in the result of your [`sprinkles`](/documentation/packages/sprinkles) function directly.\n\n```ts\n// button.css.ts\nimport { recipe } from '@vanilla-extract/recipes';\nimport { reset } from './reset.css.ts';\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const button = recipe({\n  base: [reset, sprinkles({ borderRadius: 'round' })],\n\n  variants: {\n    color: {\n      neutral: sprinkles({ background: 'neutral' }),\n      brand: sprinkles({ background: 'brand' }),\n      accent: sprinkles({ background: 'accent' })\n    },\n    size: {\n      small: sprinkles({ padding: 'small' }),\n      medium: sprinkles({ padding: 'medium' }),\n      large: sprinkles({ padding: 'large' })\n    }\n  },\n\n  defaultVariants: {\n    color: 'accent',\n    size: 'medium'\n  }\n});\n```\n\nThe recipes function also exposes an array property `variants` that includes all the variants from your recipe.\n\n```ts\nbutton.variants();\n// -> ['color', 'size']\n```\n\n## Recipe class name selection\n\nRecipes function exposes internal class names in `classNames` property.\nThe property has two predefined props: `base` and `variants`. The `base` prop includes base class name. It is always defined even if you do not have any base styles. The `variants` prop includes class names for each defined variant.\n\n```ts\n// app.css.ts\nconsole.log(button.classNames.base);\n// -> app_button__129pj250\nconsole.log(button.classNames.variants.color.neutral);\n// -> app_button_color_neutral__129pj251\nconsole.log(button.classNames.variants.size.small);\n// -> app_button_size_small__129pj254\n```\n\n## RecipeVariants\n\nA utility to make use of the recipe’s type interface. This can be useful when typing functions or component props that need to accept recipe values as part of their interface.\n\n```ts\n// button.css.ts\nimport {\n  recipe,\n  RecipeVariants\n} from '@vanilla-extract/recipes';\n\nexport const button = recipe({\n  variants: {\n    color: {\n      neutral: { background: 'whitesmoke' },\n      brand: { background: 'blueviolet' },\n      accent: { background: 'slateblue' }\n    },\n    size: {\n      small: { padding: 12 },\n      medium: { padding: 16 },\n      large: { padding: 24 }\n    }\n  }\n});\n\n// Get the type\nexport type ButtonVariants = RecipeVariants<typeof button>;\n\n// the above will result in a type equivalent to:\nexport type ButtonVariants = {\n  color?: 'neutral' | 'brand' | 'accent';\n  size?: 'small' | 'medium' | 'large';\n};\n```\n","frontmatter":{"title":"Recipes","parent":"packages"},"isInternal":false,"tokens":1088,"sizeBytes":4355},{"name":"sprinkles.md","path":"site/docs/packages/sprinkles.md","rawUrl":"https://raw.githubusercontent.com/vanilla-extract-css/vanilla-extract/HEAD/site/docs/packages/sprinkles.md","title":"Packages Skill","category":"anthropic-skill","format":"markdown","content":"---\ntitle: Sprinkles\nparent: packages\n---\n\n# Sprinkles\n\nA zero-runtime atomic CSS framework for vanilla-extract.\n\nGenerate a static set of custom utility classes and compose them either statically at build time, or dynamically at runtime, without the usual style generation overhead of CSS-in-JS.\n\nBasically, it’s like building your own zero-runtime, type-safe version of [Tailwind], [Styled System], etc.\n\n> 💡 Sprinkles is an optional package built on top of vanilla-extract using its [function serialization API.](/documentation/api/add-function-serializer) It doesn't have privileged access to vanilla-extract internals so you're also free to build alternative implementations, e.g. [Rainbow Sprinkles.](https://github.com/wayfair/rainbow-sprinkles)\n\n## Setup\n\n```bash\nnpm install @vanilla-extract/sprinkles\n```\n\nCreate a `sprinkles.css.ts` file, then configure and export your `sprinkles` function.\n\n> 💡 This is just an example! Feel free to customise properties, values and conditions to match your requirements.\n\n```ts compiled\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  createSprinkles\n} from '@vanilla-extract/sprinkles';\n\nconst space = {\n  none: 0,\n  small: '4px',\n  medium: '8px',\n  large: '16px'\n  // etc.\n};\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  properties: {\n    display: ['none', 'flex', 'block', 'inline'],\n    flexDirection: ['row', 'column'],\n    justifyContent: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end',\n      'space-around',\n      'space-between'\n    ],\n    alignItems: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end'\n    ],\n    paddingTop: space,\n    paddingBottom: space,\n    paddingLeft: space,\n    paddingRight: space\n    // etc.\n  },\n  shorthands: {\n    padding: [\n      'paddingTop',\n      'paddingBottom',\n      'paddingLeft',\n      'paddingRight'\n    ],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom'],\n    placeItems: ['justifyContent', 'alignItems']\n  }\n});\n\nconst colors = {\n  'blue-50': '#eff6ff',\n  'blue-100': '#dbeafe',\n  'blue-200': '#bfdbfe',\n  'gray-700': '#374151',\n  'gray-800': '#1f2937',\n  'gray-900': '#111827'\n  // etc.\n};\n\nconst colorProperties = defineProperties({\n  conditions: {\n    lightMode: {},\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: 'lightMode',\n  properties: {\n    color: colors,\n    background: colors\n    // etc.\n  }\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  colorProperties\n);\n\n// It's a good idea to export the Sprinkles type too\nexport type Sprinkles = Parameters<typeof sprinkles>[0];\n```\n\n## Usage\n\nYou can use your `sprinkles` function in `.css.ts` files for zero-runtime usage.\n\n```ts\n// styles.css.ts\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = sprinkles({\n  display: 'flex',\n  paddingX: 'small',\n\n  // Conditional sprinkles:\n  flexDirection: {\n    mobile: 'column',\n    desktop: 'row'\n  },\n  background: {\n    lightMode: 'blue-50',\n    darkMode: 'gray-700'\n  }\n});\n```\n\nIf you want, you can even use your `sprinkles` function at runtime! 🏃‍♂️\n\n```tsx\n// app.ts\nimport { sprinkles } from './sprinkles.css.ts';\n\nconst flexDirection =\n  Math.random() > 0.5 ? 'column' : 'row';\n\ndocument.write(`\n  <section class=\"${sprinkles({\n    display: 'flex',\n    flexDirection\n  })}\">\n    ...\n  </section>\n`);\n```\n\n> 💡 Although you don’t need to use this library at runtime, it’s designed to be as small and performant as possible. The runtime is only used to look up pre-existing class names. All styles are still generated at build time!\n\nWithin `.css.ts` files, combine with any custom styles by providing an array to vanilla-extract’s [style](/documentation/api/style) function.\n\n```ts\n// styles.css.ts\nimport { style } from '@vanilla-extract/css';\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = style([\n  sprinkles({\n    display: 'flex',\n    padding: 'small'\n  }),\n  {\n    ':hover': {\n      outline: '2px solid currentColor'\n    }\n  }\n]);\n```\n\nSprinkles uses this internally, which means that a class list returned by `sprinkles` can be treated as if it were a single class within vanilla-extract selectors.\n\n```ts\n// styles.css.ts\nimport { globalStyle } from '@vanilla-extract/css';\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = sprinkles({\n  padding: 'small'\n});\n\nglobalStyle(`${container} *`, {\n  boxSizing: 'border-box'\n});\n```\n\n## defineProperties\n\nDefines a collection of utility classes with [properties](#properties), [conditions](#conditions) and [shorthands.](#shorthands)\n\nIf you need to scope different conditions to different properties (e.g. some properties support breakpoints, some support light mode and dark mode, some are unconditional), you can provide as many collections of properties to [createSprinkles](#createsprinkles) as you like.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  createSprinkles\n} from '@vanilla-extract/sprinkles';\n\nconst space = {\n  none: 0,\n  small: '4px',\n  medium: '8px',\n  large: '16px'\n};\n\nconst colors = {\n  blue50: '#eff6ff',\n  blue100: '#dbeafe',\n  blue200: '#bfdbfe'\n  // etc.\n};\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  properties: {\n    display: ['none', 'block', 'flex'],\n    flexDirection: ['row', 'column'],\n    padding: space\n    // etc.\n  }\n});\n\nconst colorProperties = defineProperties({\n  conditions: {\n    lightMode: {\n      '@media': '(prefers-color-scheme: light)'\n    },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: false,\n  properties: {\n    color: colors,\n    background: colors\n  }\n  // etc.\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  colorProperties\n);\n```\n\n> 💡 If you want a good color palette to work with, you might want to consider importing [tailwindcss/colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).\n\n### properties\n\nDefine which CSS properties and values should be available.\n\nFor simple mappings (i.e. valid CSS values), values can be provided as an array.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    display: ['none', 'block', 'flex'],\n    flexDirection: ['row', 'column'],\n    alignItems: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end'\n    ],\n    justifyContent: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end'\n    ]\n    // etc.\n  }\n});\n```\n\nFor semantic mappings (e.g. space scales, color palettes), values can be provided as an object.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    gap: {\n      none: 0,\n      small: 4,\n      medium: 8,\n      large: 16\n    }\n    // etc.\n  }\n});\n```\n\nYou can also use [vanilla-extract themes](/documentation/theming) to configure themed values.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\nimport { vars } from './vars.css.ts';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    gap: vars.space\n    // etc.\n  }\n});\n```\n\nFor more complicated scenarios, values can even be entire style objects. This works especially well when combined with CSS Variables.\n\n> 💡 Styles are created in the order that they were defined in your config. Properties that are less specific should be higher in the list.\n\n```ts\n// sprinkles.css.ts\nimport { createVar } from '@vanilla-extract/css';\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst alpha = createVar();\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    background: {\n      red: {\n        vars: { [alpha]: '1' },\n        background: `rgba(255, 0, 0, ${alpha})`\n      }\n    },\n    backgroundOpacity: {\n      1: { vars: { [alpha]: '1' } },\n      0.1: { vars: { [alpha]: '0.1' } }\n    }\n    // etc.\n  }\n});\n```\n\n### shorthands\n\nMaps custom shorthand properties to multiple underlying CSS properties. This is useful for mapping values like `padding`/`paddingX`/`paddingY` to their underlying longhand values.\n\n> 💡 Shorthands are evaluated in the order that they were defined in your configuration. Shorthands that are less specific should be higher in the list, e.g. `padding` should come before `paddingX`/`paddingY`.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\nimport { vars } from './vars.css.ts';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    paddingTop: vars.space,\n    paddingBottom: vars.space,\n    paddingLeft: vars.space,\n    paddingRight: vars.space\n  },\n  shorthands: {\n    padding: [\n      'paddingTop',\n      'paddingBottom',\n      'paddingLeft',\n      'paddingRight'\n    ],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom']\n  }\n});\n```\n\n### conditions\n\nDefine a set of media/feature/container queries for the provided properties.\n\nFor example, properties can be scoped to media queries.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile'\n  // etc.\n});\n```\n\nProperties can also be scoped to selectors.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst properties = defineProperties({\n  conditions: {\n    default: {},\n    hover: { selector: '&:hover' },\n    focus: { selector: '&:focus' }\n  },\n  defaultCondition: 'default'\n  // etc.\n});\n```\n\nProperties can also be scoped to container queries.\n\n> 🚧&nbsp;&nbsp;Ensure your target browsers [support container queries]. Vanilla-extract supports the [container query syntax] but does not polyfill the feature in unsupported browsers.\n\n```ts\n// sprinkles.css.ts\nimport {\n  createContainer,\n  style\n} from '@vanilla-extract/css';\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst containerName = createContainer();\n\nexport const container = style({\n  containerName,\n  containerType: 'size'\n});\n\nconst containerProperties = defineProperties({\n  conditions: {\n    small: {},\n    medium: {\n      '@container': `${containerName} (min-width: 768px)`\n    },\n    large: {\n      '@container': `${containerName} (min-width: 1024px)`\n    }\n  },\n  defaultCondition: 'small'\n  // etc.\n});\n```\n\n### defaultCondition\n\nDefines which condition(s) should be used when a non-conditional value is requested, e.g. `sprinkles({ display: 'flex' })`.\n\nIf you're using mobile-first responsive conditions, this should be your lowest breakpoint.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile'\n  // etc.\n});\n```\n\nIf your conditions are mutually exclusive (e.g. light mode and dark mode), you can provide an array of default conditions. For example, the following configuration would automatically expand `sprinkles({ background: 'white' })` to the equivalent of `sprinkles({ background: { lightMode: 'white', darkMode: 'white' }})`.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    lightMode: {\n      '@media': '(prefers-color-scheme: light)'\n    },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: ['lightMode', 'darkMode']\n  // etc.\n});\n```\n\nYou can also set `defaultCondition` to `false`, which forces you to be explicit about which conditions you’re targeting.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    lightMode: {\n      '@media': '(prefers-color-scheme: light)'\n    },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: false\n  // etc.\n});\n```\n\n### responsiveArray\n\nProviding an array of condition names enables the responsive array notation (e.g. `['column', 'row']`) by defining the order of conditions.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  responsiveArray: ['mobile', 'tablet', 'desktop']\n  // etc.\n});\n```\n\n### @layer\n\nOptionally defines a layer to assign styles to for a given set of properties.\n\n> 🚧&nbsp;&nbsp;Ensure your target browsers [support layers].\n> Vanilla Extract supports the [layers syntax][layer] but does not polyfill the feature in unsupported browsers.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\nimport { layer } from '@vanilla-extract/css';\n\nexport const sprinklesLayer = layer();\n\nconst properties = defineProperties({\n  '@layer': sprinklesLayer\n  // etc.\n});\n```\n\n## createSprinkles\n\nCreates a type-safe function for accessing your [defined properties](#defineProperties). You can provide as many collections of properties as you like.\n\n> 🚧&nbsp;&nbsp;Ensure properties are defined as variables before passing them into `createSprinkles`.\n> Calling `defineProperties` inside a `createSprinkles` call will cause types to be inferred incorrectly, resulting in a type-unsafe sprinkles function.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  createSprinkles\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\nconst unconditionalProperties = defineProperties({\n  /* ... */\n});\nconst colorProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  unconditionalProperties,\n  colorProperties\n);\n```\n\nThe sprinkles function also exposes a static `properties` key that lets you check whether a given property can be handled by the function.\n\n```ts\nsprinkles.properties.has('paddingX');\n// -> boolean\n```\n\n> 💡 This is useful when building a Box component with sprinkles available at the top level (e.g. `<Box padding=\"small\">`) since you’ll need some way to filter sprinkle props from non-sprinkle props.\n\n## createMapValueFn\n\nCreates a function for mapping over conditional values.\n\n> 💡 This is useful for converting high-level prop values to low-level sprinkles, e.g. converting left/right to flex-start/end.\n\nThis function should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\nYou can name the generated function whatever you like, typically based on the name of your conditions.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  createSprinkles,\n  createMapValueFn\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties\n);\nexport const mapResponsiveValue = createMapValueFn(\n  responsiveProperties\n);\n```\n\nYou can then import the generated function in your app code.\n\n```ts\n// app.ts\nimport { mapResponsiveValue } from './sprinkles.css.ts';\n\nconst alignToFlexAlign = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n  stretch: 'stretch'\n} as const;\n\nmapResponsiveValue(\n  'left',\n  (value) => alignToFlexAlign[value]\n);\n// -> 'flex-start'\n\nmapResponsiveValue(\n  {\n    mobile: 'center',\n    desktop: 'left'\n  } as const,\n  (value) => alignToFlexAlign[value]\n);\n// -> { mobile: 'center', desktop: 'flex-start' }\n\nmapResponsiveValue(\n  ['center', null, 'left'] as const,\n  (value) => alignToFlexAlign[value]\n);\n// -> { mobile: 'center', desktop: 'flex-start' }\n```\n\n> 💡 You can generate a custom conditional value type with the [ConditionalValue](#conditionalvalue) type.\n\n## createNormalizeValueFn\n\nCreates a function for normalizing conditional values into a consistent object structure. Any primitive values or responsive arrays will be converted to conditional objects.\n\nThis function should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\n> 💡 You can name the generated function whatever you like, typically based on the name of your conditions.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  createSprinkles,\n  createNormalizeValueFn\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties\n);\nexport const normalizeResponsiveValue =\n  createNormalizeValueFn(responsiveProperties);\n```\n\nYou can then import the generated function in your app code.\n\n```ts\n// app.ts\nimport { normalizeResponsiveValue } from './sprinkles.css.ts';\n\nnormalizeResponsiveValue('block');\n// -> { mobile: 'block' }\n\nnormalizeResponsiveValue(['none', null, 'block']);\n// -> { mobile: 'none', desktop: 'block' }\n\nnormalizeResponsiveValue({\n  mobile: 'none',\n  desktop: 'block'\n});\n// -> { mobile: 'none', desktop: 'block' }\n```\n\n## ConditionalValue\n\nCreates a custom conditional value type.\n\n> 💡 This is useful for typing high-level prop values that are [mapped to low-level sprinkles](#createmapvaluefn), e.g. supporting left/right prop values that map to flex-start/end.\n\nThis type should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\n> 💡 You can name the generated type whatever you like, typically based on the name of your conditions.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  ConditionalValue\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport type ResponsiveValue<Value extends string | number> =\n  ConditionalValue<typeof responsiveProperties, Value>;\n```\n\nYou can then import the generated type in your app code.\n\n```ts\n// app.ts\nimport { ResponsiveValue } from './sprinkles.css.ts';\n\ntype ResponsiveAlign = ResponsiveValue<\n  'left' | 'center' | 'right'\n>;\n\nconst a: ResponsiveAlign = 'left';\nconst b: ResponsiveAlign = {\n  mobile: 'center',\n  desktop: 'left'\n};\nconst c: ResponsiveAlign = ['center', null, 'left'];\n```\n\n## RequiredConditionalValue\n\nSame as [ConditionalValue](#conditionalvalue) except the default condition is required. For example, if your default condition was `'mobile'`, then a conditional value of `{ desktop: '...' }` would be a type error.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  RequiredConditionalValue\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  defaultCondition: 'mobile'\n  // etc.\n});\n\nexport type RequiredResponsiveValue<\n  Value extends string | number\n> = RequiredConditionalValue<\n  typeof responsiveProperties,\n  Value\n>;\n```\n\nYou can then import the generated type in your app code.\n\n```ts\n// app.ts\nimport { RequiredResponsiveValue } from './sprinkles.css.ts';\n\ntype ResponsiveAlign = RequiredResponsiveValue<\n  'left' | 'center' | 'right'\n>;\n\nconst a: ResponsiveAlign = 'left';\nconst b: ResponsiveAlign = {\n  mobile: 'center',\n  desktop: 'left'\n};\nconst c: ResponsiveAlign = ['center', null, 'left'];\n\n// Type errors:\nconst d: ResponsiveAlign = [null, 'center'];\nconst e: ResponsiveAlign = { desktop: 'center' };\n```\n\n[tailwind]: https://tailwindcss.com\n[styled system]: https://github.com/styled-system/styled-system\n[support container queries]: https://caniuse.com/css-container-queries\n[container query syntax]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries\n[layer]: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer\n[support layers]: https://caniuse.com/css-cascade-layers\n","frontmatter":{"title":"Sprinkles","parent":"packages"},"isInternal":false,"tokens":5109,"sizeBytes":20483},{"name":"README.md","path":"packages/compiler/README.md","rawUrl":"https://raw.githubusercontent.com/vanilla-extract-css/vanilla-extract/HEAD/packages/compiler/README.md","title":"compiler Documentation","category":"plugin-manifest","format":"markdown","content":"# @vanilla-extract/compiler\n\nThis package is not intended for public consumption.\n","isInternal":false,"tokens":21,"sizeBytes":82},{"name":"README.md","path":"packages/integration/README.md","rawUrl":"https://raw.githubusercontent.com/vanilla-extract-css/vanilla-extract/HEAD/packages/integration/README.md","title":"integration Documentation","category":"plugin-manifest","format":"markdown","content":"# @vanilla-extract/integration\n\nThis package is not intended for public consumption.","isInternal":false,"tokens":21,"sizeBytes":84},{"name":"README.md","path":"packages/sprinkles/README.md","rawUrl":"https://raw.githubusercontent.com/vanilla-extract-css/vanilla-extract/HEAD/packages/sprinkles/README.md","title":"sprinkles Documentation","category":"plugin-manifest","format":"markdown","content":"# 🍨 Sprinkles\n\n**Zero-runtime atomic CSS framework for [vanilla-extract.](https://github.com/vanilla-extract-css/vanilla-extract)**\n\nGenerate a static set of custom utility classes and compose them either statically at build time, or dynamically at runtime, without the usual style generation overhead of CSS-in-JS.\n\nBasically, it’s like building your own zero-runtime, type-safe version of [Tailwind](https://tailwindcss.com), [Styled System](https://styled-system.com), etc.\n\n---\n\n**Compose sprinkles statically at build time.**\n\n```ts\n// styles.css.ts\n\nexport const className = sprinkles({\n  display: 'flex',\n  paddingX: 'small',\n  flexDirection: {\n    mobile: 'column',\n    desktop: 'row'\n  },\n  background: {\n    lightMode: 'blue-50',\n    darkMode: 'gray-700'\n  }\n});\n```\n\n**Or compose them dynamically at runtime! 🏃‍♂️**\n\n```ts\n// app.ts\n\nimport { sprinkles } from './sprinkles.css.ts';\n\nconst flexDirection = Math.random() > 0.5 ? 'column' : 'row';\n\ndocument.write(`\n  <section class=\"${sprinkles({ display: 'flex', flexDirection })}\">\n    ...\n  </section>\n`);\n```\n\n---\n\n🔥 &nbsp; Zero-runtime CSS-in-TypeScript with all styles generated at build time via [vanilla-extract.](https://vanilla-extract.style)\n\n🛠 &nbsp; Create your own custom set of atomic classes with declarative config.\n\n💪 &nbsp; Type-safe functional API for accessing sprinkles.\n\n🏃‍♂️ &nbsp; Compose sprinkles statically in `.css.ts` files, or dynamically at runtime (<0.5KB Gzip)\n\n🎨 &nbsp; Generate theme-based scales with CSS Variables using [vanilla-extract themes.](https://vanilla-extract.style/documentation/api/create-theme)\n\n✍️ &nbsp; Configure shorthands for common property combinations, e.g. `paddingX` / `paddingY`.\n\n🚦 &nbsp; Conditional sprinkles to target media/feature queries and selectors.\n\n✨ &nbsp; Scope conditions to individual properties.\n\n---\n\n🖥 &nbsp; [Try it out for yourself in CodeSandbox.](https://codesandbox.io/s/github/vanilla-extract-css/vanilla-extract/tree/master/examples/webpack-react?file=/src/sprinkles.css.ts)\n\n---\n\n## Setup\n\n> 💡 Before starting, ensure you've set up [vanilla-extract.](https://github.com/vanilla-extract-css/vanilla-extract)\n\nInstall Sprinkles.\n\n```bash\n$ npm install @vanilla-extract/sprinkles\n```\n\nCreate a `sprinkles.css.ts` file, then configure and export your `sprinkles` function.\n\n> 💡 This is just an example! Feel free to customise properties, values and conditions to match your requirements.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';\n\nconst space = {\n  'none': 0,\n  'small': '4px',\n  'medium': '8px',\n  'large': '16px',\n  // etc.\n};\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  properties: {\n    display: ['none', 'flex', 'block', 'inline'],\n    flexDirection: ['row', 'column'],\n    justifyContent: ['stretch', 'flex-start', 'center', 'flex-end', 'space-around', 'space-between'],\n    alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],\n    paddingTop: space,\n    paddingBottom: space,\n    paddingLeft: space,\n    paddingRight: space,\n    // etc.\n  },\n  shorthands: {\n    padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom'],\n    placeItems: ['justifyContent', 'alignItems'],\n  }\n});\n\nconst colors = {\n  'blue-50': '#eff6ff',\n  'blue-100': '#dbeafe',\n  'blue-200': '#bfdbfe',\n  'gray-700': '#374151',\n  'gray-800': '#1f2937',\n  'gray-900': '#111827',\n  // etc.\n};\n\nconst colorProperties = defineProperties({\n  conditions: {\n    lightMode: {},\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: 'lightMode',\n  properties: {\n    color: colors,\n    background: colors,\n    // etc.\n  }\n});\n\nexport const sprinkles = createSprinkles(responsiveProperties, colorProperties);\n\n// It's a good idea to export the Sprinkles type too\nexport type Sprinkles = Parameters<typeof sprinkles>[0];\n```\n\n**🎉 That's it — you’re ready to go!**\n\n## Usage\n\nYou can now use your `sprinkles` function in `.css.ts` files for zero-runtime usage.\n\n```ts\n// styles.css.ts\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = sprinkles({\n  display: 'flex',\n  paddingX: 'small',\n\n  // Conditional sprinkles:\n  flexDirection: {\n    mobile: 'column',\n    desktop: 'row',\n  },\n  background: {\n    lightMode: 'blue-50',\n    darkMode: 'gray-700',\n  }\n});\n```\n\nIf you want, you can even use your `sprinkles` function at runtime! 🏃‍♂️\n\n```tsx\n// app.ts\nimport { sprinkles } from './sprinkles.css.ts';\n\nconst flexDirection = Math.random() > 0.5 ? 'column' : 'row';\n\ndocument.write(`\n  <section class=\"${sprinkles({ display: 'flex', flexDirection })}\">\n    ...\n  </section>\n`);\n```\n\n> 💡 Although you don’t need to use this library at runtime, it’s designed to be as small and performant as possible. The runtime is only used to look up pre-existing class names. All styles are still generated at build time!\n\nWithin `.css.ts` files, combine with any custom styles by providing an array to vanilla-extract’s [`style`](https://vanilla-extract.style/documentation/api/style) function.\n\n```ts\n// styles.css.ts\nimport { style } from '@vanilla-extract/css';\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = style([\n  sprinkles({\n    display: 'flex',\n    padding: 'small'\n  }),\n  {\n    ':hover': {\n      outline: '2px solid currentColor'\n    }\n  }\n]);\n```\n\nSprinkles uses this internally, which means that a class list returned by `sprinkles` can be treated as if it were a single class within vanilla-extract selectors.\n\n```ts\n// styles.css.ts\nimport { globalStyle } from '@vanilla-extract/css';\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = sprinkles({\n  padding: 'small'\n});\n\nglobalStyle(`${container} *`, {\n  boxSizing: 'border-box'\n});\n```\n\n---\n\n⚛️ &nbsp; Using React? Turn your sprinkles into a `<Box>` component with 🍰 [Dessert Box.](https://github.com/TheMightyPenguin/dessert-box)\n\n---\n\n- [API](#api)\n  - [defineProperties](#defineproperties)\n    - [`properties`](#properties)\n    - [`shorthands`](#shorthands)\n    - [`conditions`](#conditions)\n    - [`defaultCondition`](#defaultcondition)\n    - [`responsiveArray`](#responsivearray)\n  - [createSprinkles](#createsprinkles)\n- [Utilities](#utilities)\n  - [createMapValueFn](#createmapvaluefn)\n  - [createNormalizeValueFn](#createnormalizevaluefn)\n- [Types](#types)\n  - [ConditionalValue](#conditionalvalue)\n  - [RequiredConditionalValue](#requiredconditionalvalue)\n- [Thanks](#thanks)\n- [License](#license)\n\n---\n\n## API\n\n### defineProperties\n\nDefines a collection of utility classes with [properties](#properties), [conditions](#conditions) and [shorthands.](#shorthands)\n\nIf you need to scope different conditions to different properties (e.g. some properties support breakpoints, some support light mode and dark mode, some are unconditional), you can provide as many collections of properties to [`createSprinkles`](#createsprinkles) as you like.\n\n```ts\nimport {\n  defineProperties,\n  createSprinkles\n} from '@vanilla-extract/sprinkles';\n\nconst space = {\n  none: 0,\n  small: '4px',\n  medium: '8px',\n  large: '16px'\n};\n\nconst colors = {\n  blue50: '#eff6ff',\n  blue100: '#dbeafe',\n  blue200: '#bfdbfe'\n  // etc.\n};\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  properties: {\n    display: ['none', 'block', 'flex'],\n    flexDirection: ['row', 'column'],\n    padding: space\n    // etc.\n  }\n});\n\nconst colorProperties = defineProperties({\n  conditions: {\n    lightMode: { '@media': '(prefers-color-scheme: light)' },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: false,\n  properties: {\n    color: colors,\n    background: colors\n  }\n  // etc.\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  colorProperties\n);\n```\n\n> 💡 If you want a good color palette to work with, you might want to consider importing [`tailwindcss/colors.`](https://tailwindcss.com/docs/customizing-colors#color-palette-reference)\n\n#### `properties`\n\nDefine which CSS properties and values should be available.\n\nFor simple mappings (i.e. valid CSS values), values can be provided as an array.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    display: ['none', 'block', 'flex'],\n    flexDirection: ['row', 'column'],\n    alignItems: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end'\n    ],\n    justifyContent: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end'\n    ]\n    // etc.\n  }\n});\n```\n\nFor semantic mappings (e.g. space scales, color palettes), values can be provided as an object.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    gap: {\n      none: 0,\n      small: 4,\n      medium: 8,\n      large: 16\n    }\n    // etc.\n  }\n});\n```\n\nYou can also use [vanilla-extract themes](/documentation/api/create-theme) to configure themed values.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\nimport { vars } from './vars.css.ts';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    gap: vars.space\n    // etc.\n  }\n});\n```\n\nFor more complicated scenarios, values can even be entire style objects. This works especially well when combined with CSS Variables.\n\n> 💡 Styles are created in the order that they were defined in your config. Properties that are less specific should be higher in the list.\n\n```ts\nimport { createVar } from '@vanilla-extract/css';\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst alpha = createVar();\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    background: {\n      red: {\n        vars: { [alpha]: '1' },\n        background: `rgba(255, 0, 0, ${alpha})`\n      }\n    },\n    backgroundOpacity: {\n      1: { vars: { [alpha]: '1' } },\n      0.1: { vars: { [alpha]: '0.1' } }\n    }\n    // etc.\n  }\n});\n```\n\n#### `shorthands`\n\nMaps custom shorthand properties to multiple underlying CSS properties. This is useful for mapping values like `padding`/`paddingX`/`paddingY` to their underlying longhand values.\n\n> 💡 Shorthands are evaluated in the order that they were defined in your configuration. Shorthands that are less specific should be higher in the list, e.g. `padding` should come before `paddingX`/`paddingY`.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\nimport { vars } from './vars.css.ts';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    paddingTop: vars.space,\n    paddingBottom: vars.space,\n    paddingLeft: vars.space,\n    paddingRight: vars.space\n  },\n  shorthands: {\n    padding: [\n      'paddingTop',\n      'paddingBottom',\n      'paddingLeft',\n      'paddingRight'\n    ],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom']\n  }\n});\n```\n\n#### `conditions`\n\nDefine a set of media/feature queries for the provided properties.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile'\n  // etc.\n});\n```\n\nProperties can also be scoped to selectors.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst properties = defineProperties({\n  conditions: {\n    default: {},\n    hover: { selector: '&:hover' },\n    focus: { selector: '&:focus' }\n  },\n  defaultCondition: 'default'\n  // etc.\n});\n```\n\n#### `defaultCondition`\n\nDefines which condition(s) should be used when a non-conditional value is requested, e.g. `sprinkles({ display: 'flex' })`.\n\nIf you're using mobile-first responsive conditions, this should be your lowest breakpoint.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile'\n  // etc.\n});\n```\n\nIf your conditions are mutually exclusive (e.g. light mode and dark mode), you can provide an array of default conditions. For example, the following configuration would automatically expand `sprinkles({ background: 'white' })` to the equivalent of `sprinkles({ background: { lightMode: 'white', darkMode: 'white' }})`.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    lightMode: { '@media': '(prefers-color-scheme: light)' },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: ['lightMode', 'darkMode']\n  // etc.\n});\n```\n\nYou can also set `defaultCondition` to `false`, which forces you to be explicit about which conditions you’re targeting.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    lightMode: {\n      '@media': '(prefers-color-scheme: light)'\n    },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: false\n  // etc.\n});\n```\n\n#### `responsiveArray`\n\nProviding an array of condition names enables the responsive array notation (e.g. `['column', 'row']`) by defining the order of conditions.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  responsiveArray: ['mobile', 'tablet', 'desktop']\n  // etc.\n});\n```\n\n### createSprinkles\n\nCreates a type-safe function for accessing your [defined properties](#defineProperties). You can provide as many collections of properties as you like.\n\n```ts\nimport {\n  defineProperties,\n  createSprinkles\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\nconst unconditionalProperties = defineProperties({\n  /* ... */\n});\nconst colorProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  unconditionalProperties,\n  colorProperties\n);\n```\n\nThe sprinkles function also exposes a static `properties` key that lets you check whether a given property can be handled by the function.\n\n```ts\nsprinkles.properties.has('paddingX');\n// -> boolean\n```\n\n> 💡 This is useful when building a Box component with sprinkles available at the top level (e.g. `<Box padding=\"small\">`) since you’ll need some way to filter sprinkle props from non-sprinkle props.\n\n\n## Utilities\n\n### createMapValueFn\n\nCreates a function for mapping over conditional values.\n\n> 💡 This is useful for converting high-level prop values to low-level sprinkles, e.g. converting left/right to flex-start/end.\n\nThis function should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\nYou can name the generated function whatever you like, typically based on the name of your conditions.\n\n```ts\nimport {\n  defineProperties,\n  createSprinkles,\n  createMapValueFn\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties\n);\nexport const mapResponsiveValue = createMapValueFn(\n  responsiveProperties\n);\n```\n\nYou can then import the generated function in your app code.\n\n```ts\nimport { mapResponsiveValue } from './sprinkles.css.ts';\n\nconst alignToFlexAlign = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n  stretch: 'stretch'\n} as const;\n\nmapResponsiveValue(\n  'left',\n  (value) => alignToFlexAlign[value]\n);\n// -> 'flex-start'\n\nmapResponsiveValue(\n  {\n    mobile: 'center',\n    desktop: 'left'\n  } as const,\n  (value) => alignToFlexAlign[value]\n);\n// -> { mobile: 'center', desktop: 'flex-start' }\n\nmapResponsiveValue(\n  ['center', null, 'left'] as const,\n  (value) => alignToFlexAlign[value]\n);\n// -> { mobile: 'center', desktop: 'flex-start' }\n```\n\n> 💡 You can generate a custom conditional value type with the [ConditionalValue](#conditionalvalue) type.\n\n### createNormalizeValueFn\n\nCreates a function for normalizing conditional values into a consistent object structure. Any primitive values or responsive arrays will be converted to conditional objects.\n\nThis function should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\n> 💡 You can name the generated function whatever you like, typically based on the name of your conditions.\n\n```ts\nimport {\n  defineProperties,\n  createSprinkles,\n  createNormalizeValueFn\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties\n);\nexport const normalizeResponsiveValue =\n  createNormalizeValueFn(responsiveProperties);\n```\n\nYou can then import the generated function in your app code.\n\n```ts\nimport { normalizeResponsiveValue } from './sprinkles.css.ts';\n\nnormalizeResponsiveValue('block');\n// -> { mobile: 'block' }\n\nnormalizeResponsiveValue(['none', null, 'block']);\n// -> { mobile: 'block', desktop: 'block' }\n\nnormalizeResponsiveValue({\n  mobile: 'none',\n  desktop: 'block'\n});\n// -> { mobile: 'block', desktop: 'block' }\n```\n\n## Types\n\n### ConditionalValue\n\nCreates a custom conditional value type.\n\n> 💡 This is useful for typing high-level prop values that are [mapped to low-level sprinkles,](#createmapvaluefn) e.g. supporting left/right prop values that map to flex-start/end.\n\nThis type should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\n> 💡 You can name the generated type whatever you like, typically based on the name of your conditions.\n\n```ts\nimport {\n  defineProperties,\n  ConditionalValue\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport type ResponsiveValue<Value extends string | number> =\n  ConditionalValue<typeof responsiveProperties, Value>;\n```\n\nYou can then import the generated type in your app code.\n\n```ts\nimport { ResponsiveValue } from './sprinkles.css.ts';\n\ntype ResponsiveAlign = ResponsiveValue<\n  'left' | 'center' | 'right'\n>;\n\nconst a: ResponsiveAlign = 'left';\nconst b: ResponsiveAlign = {\n  mobile: 'center',\n  desktop: 'left'\n};\nconst c: ResponsiveAlign = ['center', null, 'left'];\n```\n\n### RequiredConditionalValue\n\nSame as [ConditionalValue](#conditionalvalue) except the default condition is required. For example, if your default condition was `'mobile'`, then a conditional value of `{ desktop: '...' }` would be a type error.\n\n```ts\nimport {\n  defineProperties,\n  RequiredConditionalValue\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  defaultCondition: 'mobile'\n  // etc.\n});\n\nexport type RequiredResponsiveValue<\n  Value extends string | number\n> = RequiredConditionalValue<\n  typeof responsiveProperties,\n  Value\n>;\n```\n\nYou can then import the generated type in your app code.\n\n```ts\nimport { RequiredResponsiveValue } from './sprinkles.css.ts';\n\ntype ResponsiveAlign = RequiredResponsiveValue<\n  'left' | 'center' | 'right'\n>;\n\nconst a: ResponsiveAlign = 'left';\nconst b: ResponsiveAlign = {\n  mobile: 'center',\n  desktop: 'left'\n};\nconst c: ResponsiveAlign = ['center', null, 'left'];\n\n// Type errors:\nconst d: ResponsiveAlign = [null, 'center'];\nconst e: ResponsiveAlign = { desktop: 'center' };\n```\n\n---\n\n## Thanks\n\n- [Styled System](https://styled-system.com) for inspiring our approach to responsive props.\n- [Tailwind](https://tailwindcss.com) for teaching us to think utility-first.\n- [SEEK](https://www.seek.com.au) for giving us the space to do interesting work.\n\n## License\n\nMIT.\n","isInternal":false,"tokens":5113,"sizeBytes":20541}],"systemPromptSnippet":"<agent_rules repository=\"vanilla-extract-css/vanilla-extract\">\n\n<!-- Skill/Rule: Packages Skill (site/docs/packages/css-utils.md) -->\n---\ntitle: CSS Utils\nparent: packages\n---\n\n# CSS Utils\n\nAn optional package providing utility functions that make it easier to work with CSS in TypeScript.\n\n```bash\nnpm install @vanilla-extract/css-utils\n```\n\nThis package is not limited to vanilla-extract—it can be used with any CSS-in-JS library.\n\n## calc\n\nStreamlines the creation of CSS calc expressions.\n\n### Simple expressions\n\n```tsx\nimport { calc } from '@vanilla-extract/css-utils';\n\nconst styles = {\n  height: calc.multiply('var(--grid-unit)', 2)\n};\n```\n\nThe following functions are available.\n\n- `calc.add`\n- `calc.subtract`\n- `calc.multiply`\n- `calc.divide`\n- `calc.negate`\n\n### Chainable expressions\n\nThe `calc` export is also a function, providing a chainable API for complex calc expressions.\n\n> When using expression chains it is necessary to call `toString()` to return the constructed expression as the final value.\n\n```tsx\nimport { calc } from '@vanilla-extract/css-utils';\n\nconst styles = {\n  marginTop: calc('var(--space-large)')\n    .divide(2)\n    .negate()\n    .toString()\n};\n```\n\n\n<!-- Skill/Rule: Packages Skill (site/docs/packages/dynamic.md) -->\n---\ntitle: Dynamic\nparent: packages\n---\n\n# Dynamic\n\nA tiny ([< 1kB compressed](https://bundlephobia.com/package/@vanilla-extract/dynamic@2.0.2)) runtime for performing dynamic updates to scoped theme variables.\n\n```bash\nnpm install @vanilla-extract/dynamic\n```\n\n## assignInlineVars\n\nAllows variables to be assigned dynamically that have been created using vanilla-extract APIs, e.g. `createVar`, `createTheme`, etc.\n\nAs these APIs produce variable references that contain the CSS var function, e.g. `var(--brandColor__8uideo0)`, it is necessary to remove the wrapping function when setting its value.\n\nVariables with a value of `null` or `undefined` will be omitted from the resulting inline style.\n\n> 🧠&nbsp;&nbsp;`null` and `undefined` values can only be passed to `assignInlineVars` if a theme contract is not provided\n\n```tsx compiled\n// app.tsx\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport {\n  container,\n  brandColor,\n  textColor\n} from './styles.css.ts';\n\n// If `tone` is `undefined`, the following inline style becomes:\n// { '--brandColor__8uideo0': 'pink' }\n\nconst MyComponent = ({ tone }: { tone?: critical }) => (\n  <section\n    className={container}\n    style={assignInlineVars({\n      [brandColor]: 'pink',\n      [textColor]: tone === 'critical' ? 'red' : null\n    })}\n  >\n    ...\n  </section>\n);\n\n// styles.css.ts\nimport { createVar, style } from '@vanilla-extract/css';\n\nexport const brandColor = createVar();\nexport const textColor = createVar();\n\nexport const container = style({\n  background: brandColor,\n  color: textColor\n});\n```\n\nEven though this function returns an object of inline styles, it implements the `toString` method, returning a valid `style` attribute value so that it can be used in string templates.\n\n```ts\n// app.ts\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { container, brandColor } from './styles.css.ts';\n\n// The following inline style becomes:\n// \"--brandColor__8uideo0: pink;\"\n\ndocument.write(`\n  <section\n    class=\"${container}\"\n    style=\"${assignInlineVars({ [brandColor]: 'pink' })}\"\n  >\n    ...\n  </section>\n`);\n```\n\n### Assigning theme contracts dynamically\n\n[Theme contracts](/documentation/theming/) can also be assigned dynamically by passing one as the first argument.\nAll variables must be assigned or it’s a type error.\n\nThis API makes the concept of dynamic theming much simpler.\n\n```tsx compiled\n// app.tsx\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { container, themeVars } from './theme.css.ts';\n\ninterface ContainerProps {\n  brandColor: string;\n  fontFamily: string;\n}\nconst Container = ({\n  brandColor,\n  fontFamily\n}: ContainerProps) => (\n  <section\n    className={container}\n    style={assignInlineVars(themeVars, {\n      color: { brand: brandColor },\n      font: { body: fontFamily }\n    })}\n  >\n    ...\n  </section>\n);\n\nconst App = () => (\n  <Container brandColor=\"pink\" fontFamily=\"Arial\">\n    ...\n  </Container>\n);\n\n// theme.css.ts\nimport {\n  createThemeContract,\n  style\n} from '@vanilla-extract/css';\n\nexport const themeVars = createThemeContract({\n  color: {\n    brand: null\n  },\n  font: {\n    body: null\n  }\n});\n\nexport const container = style({\n  background: themeVars.color.brand,\n  fontFamily: themeVars.font.body\n});\n```\n\n## setElementVars\n\nAn imperative API, allowing variables created using vanilla-extract APIs, e.g. `createVar`, `createTheme`, etc, to be assigned dynamically on a DOM element.\n\nVariables with a value of `null` or `undefined` will not be assigned a value.\n\n> 🧠&nbsp;&nbsp;`null` and `undefined` values can only be passed to `setElementVars` if a theme contract is not provided\n\n```ts compiled\n// app.ts\n\nimport { setElementVars } from '@vanilla-extract/dynamic';\nimport { brandColor, textColor } from './styles.css.ts';\n\nconst el = document.getElementById('myElement');\n\nsetElementVars(el, {\n  [brandColor]: 'pink',\n  [textColor]: null\n});\n\n// styles.css.ts\nimport { createVar, style } from '@vanilla-extract/css';\n\nexport const brandColor = createVar();\nexport const textColor = createVar();\n```\n\n### Setting theme contracts dynamically\n\n[Theme contracts](/documentation/theming/) can also be set dynamically by passing one as the second argument.\nAll variables must be assigned or it’s a type error.\n\n```ts compiled\n// app.ts\n\nimport { setElementVars } from '@vanilla-extract/dynamic';\nimport { themeVars } from './theme.css.ts';\n\nconst el = document.getElementById('myElement');\n\nsetElementVars(el, themeVars, {\n  color: { brand: 'pink' },\n  font: { body: 'Arial' }\n});\n\n// theme.css.ts\nimport { createThemeContract } from '@vanilla-extract/css';\n\nexport const themeVars = createThemeContract({\n  color: {\n    brand: null\n  },\n  font: {\n    body: null\n  }\n});\n```\n\n\n<!-- Skill/Rule: Packages Skill (site/docs/packages/recipes.md) -->\n---\ntitle: Recipes\nparent: packages\n---\n\n# Recipes\n\nCreate multi-variant styles with a type-safe runtime API, heavily inspired by [Stitches](https://stitches.dev).\n\nAs with the rest of vanilla-extract, all styles are generated at build time.\n\n> 💡 Recipes is an optional package built on top of vanilla-extract using its [function serialization API.](/documentation/api/add-function-serializer) It doesn't have privileged access to vanilla-extract internals so you're also free to build alternative implementations.\n\n## Setup\n\n```bash\nnpm install @vanilla-extract/recipes\n```\n\n## recipe\n\nCreates a multi-variant style function that can be used at runtime or statically in `.css.ts` files.\n\nAccepts an optional set of `base` styles, `variants`, `compoundVariants` and `defaultVariants`.\n\n```ts compiled\n// button.css.ts\nimport { recipe } from '@vanilla-extract/recipes';\n\nexport const button = recipe({\n  base: {\n    borderRadius: 6\n  },\n\n  variants: {\n    color: {\n      neutral: { background: 'whitesmoke' },\n      brand: { background: 'blueviolet' },\n      accent: { background: 'slateblue' }\n    },\n    size: {\n      small: { padding: 12 },\n      medium: { padding: 16 },\n      large: { padding: 24 }\n    },\n    rounded: {\n      true: { borderRadius: 999 }\n    }\n  },\n\n  // Applied when multiple variants are set at once\n  compoundVariants: [\n    {\n      variants: {\n        color: 'neutral',\n        size: 'large'\n      },\n      style: {\n        background: 'ghostwhite'\n      }\n    }\n  ],\n\n  defaultVariants: {\n    color: 'accent',\n    size: 'medium'\n  }\n});\n```\n\nWith this recipe configured, you can now use it in your templates.\n\n```ts\n// app.ts\nimport { button } from './button.css.ts';\n\ndocument.write(`\n  <button class=\"${button({\n    color: 'accent',\n    size: 'large',\n    rounded: true\n  })}\">\n    Hello world\n  </button>\n`);\n```\n\nYour recipe configuration can also make use of existing variables, classes and styles.\n\nFor example, you can pass in the result of your [`sprinkles`](/documentation/packages/sprinkles) function directly.\n\n```ts\n// button.css.ts\nimport { recipe } from '@vanilla-extract/recipes';\nimport { reset } from './reset.css.ts';\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const button = recipe({\n  base: [reset, sprinkles({ borderRadius: 'round' })],\n\n  variants: {\n    color: {\n      neutral: sprinkles({ background: 'neutral' }),\n      brand: sprinkles({ background: 'brand' }),\n      accent: sprinkles({ background: 'accent' })\n    },\n    size: {\n      small: sprinkles({ padding: 'small' }),\n      medium: sprinkles({ padding: 'medium' }),\n      large: sprinkles({ padding: 'large' })\n    }\n  },\n\n  defaultVariants: {\n    color: 'accent',\n    size: 'medium'\n  }\n});\n```\n\nThe recipes function also exposes an array property `variants` that includes all the variants from your recipe.\n\n```ts\nbutton.variants();\n// -> ['color', 'size']\n```\n\n## Recipe class name selection\n\nRecipes function exposes internal class names in `classNames` property.\nThe property has two predefined props: `base` and `variants`. The `base` prop includes base class name. It is always defined even if you do not have any base styles. The `variants` prop includes class names for each defined variant.\n\n```ts\n// app.css.ts\nconsole.log(button.classNames.base);\n// -> app_button__129pj250\nconsole.log(button.classNames.variants.color.neutral);\n// -> app_button_color_neutral__129pj251\nconsole.log(button.classNames.variants.size.small);\n// -> app_button_size_small__129pj254\n```\n\n## RecipeVariants\n\nA utility to make use of the recipe’s type interface. This can be useful when typing functions or component props that need to accept recipe values as part of their interface.\n\n```ts\n// button.css.ts\nimport {\n  recipe,\n  RecipeVariants\n} from '@vanilla-extract/recipes';\n\nexport const button = recipe({\n  variants: {\n    color: {\n      neutral: { background: 'whitesmoke' },\n      brand: { background: 'blueviolet' },\n      accent: { background: 'slateblue' }\n    },\n    size: {\n      small: { padding: 12 },\n      medium: { padding: 16 },\n      large: { padding: 24 }\n    }\n  }\n});\n\n// Get the type\nexport type ButtonVariants = RecipeVariants<typeof button>;\n\n// the above will result in a type equivalent to:\nexport type ButtonVariants = {\n  color?: 'neutral' | 'brand' | 'accent';\n  size?: 'small' | 'medium' | 'large';\n};\n```\n\n\n<!-- Skill/Rule: Packages Skill (site/docs/packages/sprinkles.md) -->\n---\ntitle: Sprinkles\nparent: packages\n---\n\n# Sprinkles\n\nA zero-runtime atomic CSS framework for vanilla-extract.\n\nGenerate a static set of custom utility classes and compose them either statically at build time, or dynamically at runtime, without the usual style generation overhead of CSS-in-JS.\n\nBasically, it’s like building your own zero-runtime, type-safe version of [Tailwind], [Styled System], etc.\n\n> 💡 Sprinkles is an optional package built on top of vanilla-extract using its [function serialization API.](/documentation/api/add-function-serializer) It doesn't have privileged access to vanilla-extract internals so you're also free to build alternative implementations, e.g. [Rainbow Sprinkles.](https://github.com/wayfair/rainbow-sprinkles)\n\n## Setup\n\n```bash\nnpm install @vanilla-extract/sprinkles\n```\n\nCreate a `sprinkles.css.ts` file, then configure and export your `sprinkles` function.\n\n> 💡 This is just an example! Feel free to customise properties, values and conditions to match your requirements.\n\n```ts compiled\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  createSprinkles\n} from '@vanilla-extract/sprinkles';\n\nconst space = {\n  none: 0,\n  small: '4px',\n  medium: '8px',\n  large: '16px'\n  // etc.\n};\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  properties: {\n    display: ['none', 'flex', 'block', 'inline'],\n    flexDirection: ['row', 'column'],\n    justifyContent: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end',\n      'space-around',\n      'space-between'\n    ],\n    alignItems: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end'\n    ],\n    paddingTop: space,\n    paddingBottom: space,\n    paddingLeft: space,\n    paddingRight: space\n    // etc.\n  },\n  shorthands: {\n    padding: [\n      'paddingTop',\n      'paddingBottom',\n      'paddingLeft',\n      'paddingRight'\n    ],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom'],\n    placeItems: ['justifyContent', 'alignItems']\n  }\n});\n\nconst colors = {\n  'blue-50': '#eff6ff',\n  'blue-100': '#dbeafe',\n  'blue-200': '#bfdbfe',\n  'gray-700': '#374151',\n  'gray-800': '#1f2937',\n  'gray-900': '#111827'\n  // etc.\n};\n\nconst colorProperties = defineProperties({\n  conditions: {\n    lightMode: {},\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: 'lightMode',\n  properties: {\n    color: colors,\n    background: colors\n    // etc.\n  }\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  colorProperties\n);\n\n// It's a good idea to export the Sprinkles type too\nexport type Sprinkles = Parameters<typeof sprinkles>[0];\n```\n\n## Usage\n\nYou can use your `sprinkles` function in `.css.ts` files for zero-runtime usage.\n\n```ts\n// styles.css.ts\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = sprinkles({\n  display: 'flex',\n  paddingX: 'small',\n\n  // Conditional sprinkles:\n  flexDirection: {\n    mobile: 'column',\n    desktop: 'row'\n  },\n  background: {\n    lightMode: 'blue-50',\n    darkMode: 'gray-700'\n  }\n});\n```\n\nIf you want, you can even use your `sprinkles` function at runtime! 🏃‍♂️\n\n```tsx\n// app.ts\nimport { sprinkles } from './sprinkles.css.ts';\n\nconst flexDirection =\n  Math.random() > 0.5 ? 'column' : 'row';\n\ndocument.write(`\n  <section class=\"${sprinkles({\n    display: 'flex',\n    flexDirection\n  })}\">\n    ...\n  </section>\n`);\n```\n\n> 💡 Although you don’t need to use this library at runtime, it’s designed to be as small and performant as possible. The runtime is only used to look up pre-existing class names. All styles are still generated at build time!\n\nWithin `.css.ts` files, combine with any custom styles by providing an array to vanilla-extract’s [style](/documentation/api/style) function.\n\n```ts\n// styles.css.ts\nimport { style } from '@vanilla-extract/css';\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = style([\n  sprinkles({\n    display: 'flex',\n    padding: 'small'\n  }),\n  {\n    ':hover': {\n      outline: '2px solid currentColor'\n    }\n  }\n]);\n```\n\nSprinkles uses this internally, which means that a class list returned by `sprinkles` can be treated as if it were a single class within vanilla-extract selectors.\n\n```ts\n// styles.css.ts\nimport { globalStyle } from '@vanilla-extract/css';\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = sprinkles({\n  padding: 'small'\n});\n\nglobalStyle(`${container} *`, {\n  boxSizing: 'border-box'\n});\n```\n\n## defineProperties\n\nDefines a collection of utility classes with [properties](#properties), [conditions](#conditions) and [shorthands.](#shorthands)\n\nIf you need to scope different conditions to different properties (e.g. some properties support breakpoints, some support light mode and dark mode, some are unconditional), you can provide as many collections of properties to [createSprinkles](#createsprinkles) as you like.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  createSprinkles\n} from '@vanilla-extract/sprinkles';\n\nconst space = {\n  none: 0,\n  small: '4px',\n  medium: '8px',\n  large: '16px'\n};\n\nconst colors = {\n  blue50: '#eff6ff',\n  blue100: '#dbeafe',\n  blue200: '#bfdbfe'\n  // etc.\n};\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  properties: {\n    display: ['none', 'block', 'flex'],\n    flexDirection: ['row', 'column'],\n    padding: space\n    // etc.\n  }\n});\n\nconst colorProperties = defineProperties({\n  conditions: {\n    lightMode: {\n      '@media': '(prefers-color-scheme: light)'\n    },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: false,\n  properties: {\n    color: colors,\n    background: colors\n  }\n  // etc.\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  colorProperties\n);\n```\n\n> 💡 If you want a good color palette to work with, you might want to consider importing [tailwindcss/colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).\n\n### properties\n\nDefine which CSS properties and values should be available.\n\nFor simple mappings (i.e. valid CSS values), values can be provided as an array.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    display: ['none', 'block', 'flex'],\n    flexDirection: ['row', 'column'],\n    alignItems: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end'\n    ],\n    justifyContent: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end'\n    ]\n    // etc.\n  }\n});\n```\n\nFor semantic mappings (e.g. space scales, color palettes), values can be provided as an object.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    gap: {\n      none: 0,\n      small: 4,\n      medium: 8,\n      large: 16\n    }\n    // etc.\n  }\n});\n```\n\nYou can also use [vanilla-extract themes](/documentation/theming) to configure themed values.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\nimport { vars } from './vars.css.ts';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    gap: vars.space\n    // etc.\n  }\n});\n```\n\nFor more complicated scenarios, values can even be entire style objects. This works especially well when combined with CSS Variables.\n\n> 💡 Styles are created in the order that they were defined in your config. Properties that are less specific should be higher in the list.\n\n```ts\n// sprinkles.css.ts\nimport { createVar } from '@vanilla-extract/css';\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst alpha = createVar();\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    background: {\n      red: {\n        vars: { [alpha]: '1' },\n        background: `rgba(255, 0, 0, ${alpha})`\n      }\n    },\n    backgroundOpacity: {\n      1: { vars: { [alpha]: '1' } },\n      0.1: { vars: { [alpha]: '0.1' } }\n    }\n    // etc.\n  }\n});\n```\n\n### shorthands\n\nMaps custom shorthand properties to multiple underlying CSS properties. This is useful for mapping values like `padding`/`paddingX`/`paddingY` to their underlying longhand values.\n\n> 💡 Shorthands are evaluated in the order that they were defined in your configuration. Shorthands that are less specific should be higher in the list, e.g. `padding` should come before `paddingX`/`paddingY`.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\nimport { vars } from './vars.css.ts';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    paddingTop: vars.space,\n    paddingBottom: vars.space,\n    paddingLeft: vars.space,\n    paddingRight: vars.space\n  },\n  shorthands: {\n    padding: [\n      'paddingTop',\n      'paddingBottom',\n      'paddingLeft',\n      'paddingRight'\n    ],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom']\n  }\n});\n```\n\n### conditions\n\nDefine a set of media/feature/container queries for the provided properties.\n\nFor example, properties can be scoped to media queries.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile'\n  // etc.\n});\n```\n\nProperties can also be scoped to selectors.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst properties = defineProperties({\n  conditions: {\n    default: {},\n    hover: { selector: '&:hover' },\n    focus: { selector: '&:focus' }\n  },\n  defaultCondition: 'default'\n  // etc.\n});\n```\n\nProperties can also be scoped to container queries.\n\n> 🚧&nbsp;&nbsp;Ensure your target browsers [support container queries]. Vanilla-extract supports the [container query syntax] but does not polyfill the feature in unsupported browsers.\n\n```ts\n// sprinkles.css.ts\nimport {\n  createContainer,\n  style\n} from '@vanilla-extract/css';\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst containerName = createContainer();\n\nexport const container = style({\n  containerName,\n  containerType: 'size'\n});\n\nconst containerProperties = defineProperties({\n  conditions: {\n    small: {},\n    medium: {\n      '@container': `${containerName} (min-width: 768px)`\n    },\n    large: {\n      '@container': `${containerName} (min-width: 1024px)`\n    }\n  },\n  defaultCondition: 'small'\n  // etc.\n});\n```\n\n### defaultCondition\n\nDefines which condition(s) should be used when a non-conditional value is requested, e.g. `sprinkles({ display: 'flex' })`.\n\nIf you're using mobile-first responsive conditions, this should be your lowest breakpoint.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile'\n  // etc.\n});\n```\n\nIf your conditions are mutually exclusive (e.g. light mode and dark mode), you can provide an array of default conditions. For example, the following configuration would automatically expand `sprinkles({ background: 'white' })` to the equivalent of `sprinkles({ background: { lightMode: 'white', darkMode: 'white' }})`.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    lightMode: {\n      '@media': '(prefers-color-scheme: light)'\n    },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: ['lightMode', 'darkMode']\n  // etc.\n});\n```\n\nYou can also set `defaultCondition` to `false`, which forces you to be explicit about which conditions you’re targeting.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    lightMode: {\n      '@media': '(prefers-color-scheme: light)'\n    },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: false\n  // etc.\n});\n```\n\n### responsiveArray\n\nProviding an array of condition names enables the responsive array notation (e.g. `['column', 'row']`) by defining the order of conditions.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  responsiveArray: ['mobile', 'tablet', 'desktop']\n  // etc.\n});\n```\n\n### @layer\n\nOptionally defines a layer to assign styles to for a given set of properties.\n\n> 🚧&nbsp;&nbsp;Ensure your target browsers [support layers].\n> Vanilla Extract supports the [layers syntax][layer] but does not polyfill the feature in unsupported browsers.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\nimport { layer } from '@vanilla-extract/css';\n\nexport const sprinklesLayer = layer();\n\nconst properties = defineProperties({\n  '@layer': sprinklesLayer\n  // etc.\n});\n```\n\n## createSprinkles\n\nCreates a type-safe function for accessing your [defined properties](#defineProperties). You can provide as many collections of properties as you like.\n\n> 🚧&nbsp;&nbsp;Ensure properties are defined as variables before passing them into `createSprinkles`.\n> Calling `defineProperties` inside a `createSprinkles` call will cause types to be inferred incorrectly, resulting in a type-unsafe sprinkles function.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  createSprinkles\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\nconst unconditionalProperties = defineProperties({\n  /* ... */\n});\nconst colorProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  unconditionalProperties,\n  colorProperties\n);\n```\n\nThe sprinkles function also exposes a static `properties` key that lets you check whether a given property can be handled by the function.\n\n```ts\nsprinkles.properties.has('paddingX');\n// -> boolean\n```\n\n> 💡 This is useful when building a Box component with sprinkles available at the top level (e.g. `<Box padding=\"small\">`) since you’ll need some way to filter sprinkle props from non-sprinkle props.\n\n## createMapValueFn\n\nCreates a function for mapping over conditional values.\n\n> 💡 This is useful for converting high-level prop values to low-level sprinkles, e.g. converting left/right to flex-start/end.\n\nThis function should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\nYou can name the generated function whatever you like, typically based on the name of your conditions.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  createSprinkles,\n  createMapValueFn\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties\n);\nexport const mapResponsiveValue = createMapValueFn(\n  responsiveProperties\n);\n```\n\nYou can then import the generated function in your app code.\n\n```ts\n// app.ts\nimport { mapResponsiveValue } from './sprinkles.css.ts';\n\nconst alignToFlexAlign = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n  stretch: 'stretch'\n} as const;\n\nmapResponsiveValue(\n  'left',\n  (value) => alignToFlexAlign[value]\n);\n// -> 'flex-start'\n\nmapResponsiveValue(\n  {\n    mobile: 'center',\n    desktop: 'left'\n  } as const,\n  (value) => alignToFlexAlign[value]\n);\n// -> { mobile: 'center', desktop: 'flex-start' }\n\nmapResponsiveValue(\n  ['center', null, 'left'] as const,\n  (value) => alignToFlexAlign[value]\n);\n// -> { mobile: 'center', desktop: 'flex-start' }\n```\n\n> 💡 You can generate a custom conditional value type with the [ConditionalValue](#conditionalvalue) type.\n\n## createNormalizeValueFn\n\nCreates a function for normalizing conditional values into a consistent object structure. Any primitive values or responsive arrays will be converted to conditional objects.\n\nThis function should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\n> 💡 You can name the generated function whatever you like, typically based on the name of your conditions.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  createSprinkles,\n  createNormalizeValueFn\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties\n);\nexport const normalizeResponsiveValue =\n  createNormalizeValueFn(responsiveProperties);\n```\n\nYou can then import the generated function in your app code.\n\n```ts\n// app.ts\nimport { normalizeResponsiveValue } from './sprinkles.css.ts';\n\nnormalizeResponsiveValue('block');\n// -> { mobile: 'block' }\n\nnormalizeResponsiveValue(['none', null, 'block']);\n// -> { mobile: 'none', desktop: 'block' }\n\nnormalizeResponsiveValue({\n  mobile: 'none',\n  desktop: 'block'\n});\n// -> { mobile: 'none', desktop: 'block' }\n```\n\n## ConditionalValue\n\nCreates a custom conditional value type.\n\n> 💡 This is useful for typing high-level prop values that are [mapped to low-level sprinkles](#createmapvaluefn), e.g. supporting left/right prop values that map to flex-start/end.\n\nThis type should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\n> 💡 You can name the generated type whatever you like, typically based on the name of your conditions.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  ConditionalValue\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport type ResponsiveValue<Value extends string | number> =\n  ConditionalValue<typeof responsiveProperties, Value>;\n```\n\nYou can then import the generated type in your app code.\n\n```ts\n// app.ts\nimport { ResponsiveValue } from './sprinkles.css.ts';\n\ntype ResponsiveAlign = ResponsiveValue<\n  'left' | 'center' | 'right'\n>;\n\nconst a: ResponsiveAlign = 'left';\nconst b: ResponsiveAlign = {\n  mobile: 'center',\n  desktop: 'left'\n};\nconst c: ResponsiveAlign = ['center', null, 'left'];\n```\n\n## RequiredConditionalValue\n\nSame as [ConditionalValue](#conditionalvalue) except the default condition is required. For example, if your default condition was `'mobile'`, then a conditional value of `{ desktop: '...' }` would be a type error.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  RequiredConditionalValue\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  defaultCondition: 'mobile'\n  // etc.\n});\n\nexport type RequiredResponsiveValue<\n  Value extends string | number\n> = RequiredConditionalValue<\n  typeof responsiveProperties,\n  Value\n>;\n```\n\nYou can then import the generated type in your app code.\n\n```ts\n// app.ts\nimport { RequiredResponsiveValue } from './sprinkles.css.ts';\n\ntype ResponsiveAlign = RequiredResponsiveValue<\n  'left' | 'center' | 'right'\n>;\n\nconst a: ResponsiveAlign = 'left';\nconst b: ResponsiveAlign = {\n  mobile: 'center',\n  desktop: 'left'\n};\nconst c: ResponsiveAlign = ['center', null, 'left'];\n\n// Type errors:\nconst d: ResponsiveAlign = [null, 'center'];\nconst e: ResponsiveAlign = { desktop: 'center' };\n```\n\n[tailwind]: https://tailwindcss.com\n[styled system]: https://github.com/styled-system/styled-system\n[support container queries]: https://caniuse.com/css-container-queries\n[container query syntax]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries\n[layer]: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer\n[support layers]: https://caniuse.com/css-cascade-layers\n\n\n<!-- Skill/Rule: compiler Documentation (packages/compiler/README.md) -->\n# @vanilla-extract/compiler\n\nThis package is not intended for public consumption.\n\n\n<!-- Skill/Rule: integration Documentation (packages/integration/README.md) -->\n# @vanilla-extract/integration\n\nThis package is not intended for public consumption.\n\n<!-- Skill/Rule: sprinkles Documentation (packages/sprinkles/README.md) -->\n# 🍨 Sprinkles\n\n**Zero-runtime atomic CSS framework for [vanilla-extract.](https://github.com/vanilla-extract-css/vanilla-extract)**\n\nGenerate a static set of custom utility classes and compose them either statically at build time, or dynamically at runtime, without the usual style generation overhead of CSS-in-JS.\n\nBasically, it’s like building your own zero-runtime, type-safe version of [Tailwind](https://tailwindcss.com), [Styled System](https://styled-system.com), etc.\n\n---\n\n**Compose sprinkles statically at build time.**\n\n```ts\n// styles.css.ts\n\nexport const className = sprinkles({\n  display: 'flex',\n  paddingX: 'small',\n  flexDirection: {\n    mobile: 'column',\n    desktop: 'row'\n  },\n  background: {\n    lightMode: 'blue-50',\n    darkMode: 'gray-700'\n  }\n});\n```\n\n**Or compose them dynamically at runtime! 🏃‍♂️**\n\n```ts\n// app.ts\n\nimport { sprinkles } from './sprinkles.css.ts';\n\nconst flexDirection = Math.random() > 0.5 ? 'column' : 'row';\n\ndocument.write(`\n  <section class=\"${sprinkles({ display: 'flex', flexDirection })}\">\n    ...\n  </section>\n`);\n```\n\n---\n\n🔥 &nbsp; Zero-runtime CSS-in-TypeScript with all styles generated at build time via [vanilla-extract.](https://vanilla-extract.style)\n\n🛠 &nbsp; Create your own custom set of atomic classes with declarative config.\n\n💪 &nbsp; Type-safe functional API for accessing sprinkles.\n\n🏃‍♂️ &nbsp; Compose sprinkles statically in `.css.ts` files, or dynamically at runtime (<0.5KB Gzip)\n\n🎨 &nbsp; Generate theme-based scales with CSS Variables using [vanilla-extract themes.](https://vanilla-extract.style/documentation/api/create-theme)\n\n✍️ &nbsp; Configure shorthands for common property combinations, e.g. `paddingX` / `paddingY`.\n\n🚦 &nbsp; Conditional sprinkles to target media/feature queries and selectors.\n\n✨ &nbsp; Scope conditions to individual properties.\n\n---\n\n🖥 &nbsp; [Try it out for yourself in CodeSandbox.](https://codesandbox.io/s/github/vanilla-extract-css/vanilla-extract/tree/master/examples/webpack-react?file=/src/sprinkles.css.ts)\n\n---\n\n## Setup\n\n> 💡 Before starting, ensure you've set up [vanilla-extract.](https://github.com/vanilla-extract-css/vanilla-extract)\n\nInstall Sprinkles.\n\n```bash\n$ npm install @vanilla-extract/sprinkles\n```\n\nCreate a `sprinkles.css.ts` file, then configure and export your `sprinkles` function.\n\n> 💡 This is just an example! Feel free to customise properties, values and conditions to match your requirements.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';\n\nconst space = {\n  'none': 0,\n  'small': '4px',\n  'medium': '8px',\n  'large': '16px',\n  // etc.\n};\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  properties: {\n    display: ['none', 'flex', 'block', 'inline'],\n    flexDirection: ['row', 'column'],\n    justifyContent: ['stretch', 'flex-start', 'center', 'flex-end', 'space-around', 'space-between'],\n    alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],\n    paddingTop: space,\n    paddingBottom: space,\n    paddingLeft: space,\n    paddingRight: space,\n    // etc.\n  },\n  shorthands: {\n    padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom'],\n    placeItems: ['justifyContent', 'alignItems'],\n  }\n});\n\nconst colors = {\n  'blue-50': '#eff6ff',\n  'blue-100': '#dbeafe',\n  'blue-200': '#bfdbfe',\n  'gray-700': '#374151',\n  'gray-800': '#1f2937',\n  'gray-900': '#111827',\n  // etc.\n};\n\nconst colorProperties = defineProperties({\n  conditions: {\n    lightMode: {},\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: 'lightMode',\n  properties: {\n    color: colors,\n    background: colors,\n    // etc.\n  }\n});\n\nexport const sprinkles = createSprinkles(responsiveProperties, colorProperties);\n\n// It's a good idea to export the Sprinkles type too\nexport type Sprinkles = Parameters<typeof sprinkles>[0];\n```\n\n**🎉 That's it — you’re ready to go!**\n\n## Usage\n\nYou can now use your `sprinkles` function in `.css.ts` files for zero-runtime usage.\n\n```ts\n// styles.css.ts\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = sprinkles({\n  display: 'flex',\n  paddingX: 'small',\n\n  // Conditional sprinkles:\n  flexDirection: {\n    mobile: 'column',\n    desktop: 'row',\n  },\n  background: {\n    lightMode: 'blue-50',\n    darkMode: 'gray-700',\n  }\n});\n```\n\nIf you want, you can even use your `sprinkles` function at runtime! 🏃‍♂️\n\n```tsx\n// app.ts\nimport { sprinkles } from './sprinkles.css.ts';\n\nconst flexDirection = Math.random() > 0.5 ? 'column' : 'row';\n\ndocument.write(`\n  <section class=\"${sprinkles({ display: 'flex', flexDirection })}\">\n    ...\n  </section>\n`);\n```\n\n> 💡 Although you don’t need to use this library at runtime, it’s designed to be as small and performant as possible. The runtime is only used to look up pre-existing class names. All styles are still generated at build time!\n\nWithin `.css.ts` files, combine with any custom styles by providing an array to vanilla-extract’s [`style`](https://vanilla-extract.style/documentation/api/style) function.\n\n```ts\n// styles.css.ts\nimport { style } from '@vanilla-extract/css';\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = style([\n  sprinkles({\n    display: 'flex',\n    padding: 'small'\n  }),\n  {\n    ':hover': {\n      outline: '2px solid currentColor'\n    }\n  }\n]);\n```\n\nSprinkles uses this internally, which means that a class list returned by `sprinkles` can be treated as if it were a single class within vanilla-extract selectors.\n\n```ts\n// styles.css.ts\nimport { globalStyle } from '@vanilla-extract/css';\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = sprinkles({\n  padding: 'small'\n});\n\nglobalStyle(`${container} *`, {\n  boxSizing: 'border-box'\n});\n```\n\n---\n\n⚛️ &nbsp; Using React? Turn your sprinkles into a `<Box>` component with 🍰 [Dessert Box.](https://github.com/TheMightyPenguin/dessert-box)\n\n---\n\n- [API](#api)\n  - [defineProperties](#defineproperties)\n    - [`properties`](#properties)\n    - [`shorthands`](#shorthands)\n    - [`conditions`](#conditions)\n    - [`defaultCondition`](#defaultcondition)\n    - [`responsiveArray`](#responsivearray)\n  - [createSprinkles](#createsprinkles)\n- [Utilities](#utilities)\n  - [createMapValueFn](#createmapvaluefn)\n  - [createNormalizeValueFn](#createnormalizevaluefn)\n- [Types](#types)\n  - [ConditionalValue](#conditionalvalue)\n  - [RequiredConditionalValue](#requiredconditionalvalue)\n- [Thanks](#thanks)\n- [License](#license)\n\n---\n\n## API\n\n### defineProperties\n\nDefines a collection of utility classes with [properties](#properties), [conditions](#conditions) and [shorthands.](#shorthands)\n\nIf you need to scope different conditions to different properties (e.g. some properties support breakpoints, some support light mode and dark mode, some are unconditional), you can provide as many collections of properties to [`createSprinkles`](#createsprinkles) as you like.\n\n```ts\nimport {\n  defineProperties,\n  createSprinkles\n} from '@vanilla-extract/sprinkles';\n\nconst space = {\n  none: 0,\n  small: '4px',\n  medium: '8px',\n  large: '16px'\n};\n\nconst colors = {\n  blue50: '#eff6ff',\n  blue100: '#dbeafe',\n  blue200: '#bfdbfe'\n  // etc.\n};\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  properties: {\n    display: ['none', 'block', 'flex'],\n    flexDirection: ['row', 'column'],\n    padding: space\n    // etc.\n  }\n});\n\nconst colorProperties = defineProperties({\n  conditions: {\n    lightMode: { '@media': '(prefers-color-scheme: light)' },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: false,\n  properties: {\n    color: colors,\n    background: colors\n  }\n  // etc.\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  colorProperties\n);\n```\n\n> 💡 If you want a good color palette to work with, you might want to consider importing [`tailwindcss/colors.`](https://tailwindcss.com/docs/customizing-colors#color-palette-reference)\n\n#### `properties`\n\nDefine which CSS properties and values should be available.\n\nFor simple mappings (i.e. valid CSS values), values can be provided as an array.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    display: ['none', 'block', 'flex'],\n    flexDirection: ['row', 'column'],\n    alignItems: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end'\n    ],\n    justifyContent: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end'\n    ]\n    // etc.\n  }\n});\n```\n\nFor semantic mappings (e.g. space scales, color palettes), values can be provided as an object.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    gap: {\n      none: 0,\n      small: 4,\n      medium: 8,\n      large: 16\n    }\n    // etc.\n  }\n});\n```\n\nYou can also use [vanilla-extract themes](/documentation/api/create-theme) to configure themed values.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\nimport { vars } from './vars.css.ts';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    gap: vars.space\n    // etc.\n  }\n});\n```\n\nFor more complicated scenarios, values can even be entire style objects. This works especially well when combined with CSS Variables.\n\n> 💡 Styles are created in the order that they were defined in your config. Properties that are less specific should be higher in the list.\n\n```ts\nimport { createVar } from '@vanilla-extract/css';\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst alpha = createVar();\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    background: {\n      red: {\n        vars: { [alpha]: '1' },\n        background: `rgba(255, 0, 0, ${alpha})`\n      }\n    },\n    backgroundOpacity: {\n      1: { vars: { [alpha]: '1' } },\n      0.1: { vars: { [alpha]: '0.1' } }\n    }\n    // etc.\n  }\n});\n```\n\n#### `shorthands`\n\nMaps custom shorthand properties to multiple underlying CSS properties. This is useful for mapping values like `padding`/`paddingX`/`paddingY` to their underlying longhand values.\n\n> 💡 Shorthands are evaluated in the order that they were defined in your configuration. Shorthands that are less specific should be higher in the list, e.g. `padding` should come before `paddingX`/`paddingY`.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\nimport { vars } from './vars.css.ts';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    paddingTop: vars.space,\n    paddingBottom: vars.space,\n    paddingLeft: vars.space,\n    paddingRight: vars.space\n  },\n  shorthands: {\n    padding: [\n      'paddingTop',\n      'paddingBottom',\n      'paddingLeft',\n      'paddingRight'\n    ],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom']\n  }\n});\n```\n\n#### `conditions`\n\nDefine a set of media/feature queries for the provided properties.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile'\n  // etc.\n});\n```\n\nProperties can also be scoped to selectors.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst properties = defineProperties({\n  conditions: {\n    default: {},\n    hover: { selector: '&:hover' },\n    focus: { selector: '&:focus' }\n  },\n  defaultCondition: 'default'\n  // etc.\n});\n```\n\n#### `defaultCondition`\n\nDefines which condition(s) should be used when a non-conditional value is requested, e.g. `sprinkles({ display: 'flex' })`.\n\nIf you're using mobile-first responsive conditions, this should be your lowest breakpoint.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile'\n  // etc.\n});\n```\n\nIf your conditions are mutually exclusive (e.g. light mode and dark mode), you can provide an array of default conditions. For example, the following configuration would automatically expand `sprinkles({ background: 'white' })` to the equivalent of `sprinkles({ background: { lightMode: 'white', darkMode: 'white' }})`.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    lightMode: { '@media': '(prefers-color-scheme: light)' },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: ['lightMode', 'darkMode']\n  // etc.\n});\n```\n\nYou can also set `defaultCondition` to `false`, which forces you to be explicit about which conditions you’re targeting.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    lightMode: {\n      '@media': '(prefers-color-scheme: light)'\n    },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: false\n  // etc.\n});\n```\n\n#### `responsiveArray`\n\nProviding an array of condition names enables the responsive array notation (e.g. `['column', 'row']`) by defining the order of conditions.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  responsiveArray: ['mobile', 'tablet', 'desktop']\n  // etc.\n});\n```\n\n### createSprinkles\n\nCreates a type-safe function for accessing your [defined properties](#defineProperties). You can provide as many collections of properties as you like.\n\n```ts\nimport {\n  defineProperties,\n  createSprinkles\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\nconst unconditionalProperties = defineProperties({\n  /* ... */\n});\nconst colorProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  unconditionalProperties,\n  colorProperties\n);\n```\n\nThe sprinkles function also exposes a static `properties` key that lets you check whether a given property can be handled by the function.\n\n```ts\nsprinkles.properties.has('paddingX');\n// -> boolean\n```\n\n> 💡 This is useful when building a Box component with sprinkles available at the top level (e.g. `<Box padding=\"small\">`) since you’ll need some way to filter sprinkle props from non-sprinkle props.\n\n\n## Utilities\n\n### createMapValueFn\n\nCreates a function for mapping over conditional values.\n\n> 💡 This is useful for converting high-level prop values to low-level sprinkles, e.g. converting left/right to flex-start/end.\n\nThis function should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\nYou can name the generated function whatever you like, typically based on the name of your conditions.\n\n```ts\nimport {\n  defineProperties,\n  createSprinkles,\n  createMapValueFn\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties\n);\nexport const mapResponsiveValue = createMapValueFn(\n  responsiveProperties\n);\n```\n\nYou can then import the generated function in your app code.\n\n```ts\nimport { mapResponsiveValue } from './sprinkles.css.ts';\n\nconst alignToFlexAlign = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n  stretch: 'stretch'\n} as const;\n\nmapResponsiveValue(\n  'left',\n  (value) => alignToFlexAlign[value]\n);\n// -> 'flex-start'\n\nmapResponsiveValue(\n  {\n    mobile: 'center',\n    desktop: 'left'\n  } as const,\n  (value) => alignToFlexAlign[value]\n);\n// -> { mobile: 'center', desktop: 'flex-start' }\n\nmapResponsiveValue(\n  ['center', null, 'left'] as const,\n  (value) => alignToFlexAlign[value]\n);\n// -> { mobile: 'center', desktop: 'flex-start' }\n```\n\n> 💡 You can generate a custom conditional value type with the [ConditionalValue](#conditionalvalue) type.\n\n### createNormalizeValueFn\n\nCreates a function for normalizing conditional values into a consistent object structure. Any primitive values or responsive arrays will be converted to conditional objects.\n\nThis function should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\n> 💡 You can name the generated function whatever you like, typically based on the name of your conditions.\n\n```ts\nimport {\n  defineProperties,\n  createSprinkles,\n  createNormalizeValueFn\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties\n);\nexport const normalizeResponsiveValue =\n  createNormalizeValueFn(responsiveProperties);\n```\n\nYou can then import the generated function in your app code.\n\n```ts\nimport { normalizeResponsiveValue } from './sprinkles.css.ts';\n\nnormalizeResponsiveValue('block');\n// -> { mobile: 'block' }\n\nnormalizeResponsiveValue(['none', null, 'block']);\n// -> { mobile: 'block', desktop: 'block' }\n\nnormalizeResponsiveValue({\n  mobile: 'none',\n  desktop: 'block'\n});\n// -> { mobile: 'block', desktop: 'block' }\n```\n\n## Types\n\n### ConditionalValue\n\nCreates a custom conditional value type.\n\n> 💡 This is useful for typing high-level prop values that are [mapped to low-level sprinkles,](#createmapvaluefn) e.g. supporting left/right prop values that map to flex-start/end.\n\nThis type should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\n> 💡 You can name the generated type whatever you like, typically based on the name of your conditions.\n\n```ts\nimport {\n  defineProperties,\n  ConditionalValue\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport type ResponsiveValue<Value extends string | number> =\n  ConditionalValue<typeof responsiveProperties, Value>;\n```\n\nYou can then import the generated type in your app code.\n\n```ts\nimport { ResponsiveValue } from './sprinkles.css.ts';\n\ntype ResponsiveAlign = ResponsiveValue<\n  'left' | 'center' | 'right'\n>;\n\nconst a: ResponsiveAlign = 'left';\nconst b: ResponsiveAlign = {\n  mobile: 'center',\n  desktop: 'left'\n};\nconst c: ResponsiveAlign = ['center', null, 'left'];\n```\n\n### RequiredConditionalValue\n\nSame as [ConditionalValue](#conditionalvalue) except the default condition is required. For example, if your default condition was `'mobile'`, then a conditional value of `{ desktop: '...' }` would be a type error.\n\n```ts\nimport {\n  defineProperties,\n  RequiredConditionalValue\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  defaultCondition: 'mobile'\n  // etc.\n});\n\nexport type RequiredResponsiveValue<\n  Value extends string | number\n> = RequiredConditionalValue<\n  typeof responsiveProperties,\n  Value\n>;\n```\n\nYou can then import the generated type in your app code.\n\n```ts\nimport { RequiredResponsiveValue } from './sprinkles.css.ts';\n\ntype ResponsiveAlign = RequiredResponsiveValue<\n  'left' | 'center' | 'right'\n>;\n\nconst a: ResponsiveAlign = 'left';\nconst b: ResponsiveAlign = {\n  mobile: 'center',\n  desktop: 'left'\n};\nconst c: ResponsiveAlign = ['center', null, 'left'];\n\n// Type errors:\nconst d: ResponsiveAlign = [null, 'center'];\nconst e: ResponsiveAlign = { desktop: 'center' };\n```\n\n---\n\n## Thanks\n\n- [Styled System](https://styled-system.com) for inspiring our approach to responsive props.\n- [Tailwind](https://tailwindcss.com) for teaching us to think utility-first.\n- [SEEK](https://www.seek.com.au) for giving us the space to do interesting work.\n\n## License\n\nMIT.\n\n\n</agent_rules>"}