Use theme or raw values

[ZarkoPernar]

In our existing design system we have a Box component that can accept theme tokens, or raw css values for most props. This is because we need a more flexible system due to the variety of apps supported. So we could have something like this in our codebase <Box padding={["small", "34px", 24]} />. If a prop value is not found in the theme object , the prop value itself is used for the css property value. Is something like this possible with vanilla-extract/sprinkles? I can imagine it would be doable with css vars Im just still not 100% clear on how the entirety of the api works together. My main question is how to make sure it is doable in combination with conditional media queries. So how could something like the following work?

sprinkles({
  padding: {
    mobile: "small",
    tablet: "32px",
    desktop: 22,
  }
})