How to use sprinkles with padding with different side spaces

[farebord]

Hi! I'm wondering if there is a way to use padding as a property in Sprinkles to allow things like this:

      export const spaces = {
        "0": "0px",
        "1": "8px",
        "2": "16px",
      ...
      });
      
      sprinkles({
        padding: "0 1 2 1",
      }),    

But unfortunately, I haven't been able to make it work so far. Is there a way to allow setting properties to be different sizes spacing like the above without using paddingTop, paddingBottom...?

[askoufis]

You could theoretically generate a set of all combinations of your spaces properties, and then map them to their resulting strings after resolving the values. E.g:

const paddingMap = {
  '0 0 0 0': '0px 0px 0px 0px',
  '0 0 0 1': '0px 0px 0px 8px',
  '0 0 0 2': '0px 0px 0px 16px',
  ...
}

const paddingSprinkles = defineProperties({
  padding: paddingMap,
})

However, that would get very large very quickly, and would generate a bunch of classnames that will likely never be used. Sprinkles is great for quick and easy access to common atomic styles, but the tradeoff is that the classnames for those styles need to be generated ahead of time.

IMO if you define your padding sprinkles using theme vars, and create shorthands, the sprinkles API can be almost just as expressive as the CSS padding property while being only a bit more verbose, and fully type-safe.