Props Presets

[christianwiedemann]

From my point of view, some components have more configuration states than just variant. According to #8 multiple variants makes it too difficult to maintenance the classesList which I total agree.

Maybe a solution could be presets for each prop. I try to explain the idea based on this configuration example, and I created a small repository to demonstrate it as a working demo. Here is the link: https://github.com/christianwiedemann/variantjs-samples

Example:

export const theme: VariantJSConfiguration = {
  'TButton': {
    preset: {
      size: {
        large: 'p-20',
        default: 'p-10'
      },
      color: {
        primary: 'bg-blue-500',
        secondary: 'bg-yellow-500'
      },
    },
    variants: {
      outline: {
        preset: {
          color: {
            primary: 'border-blue-500',
            secondary: 'border-yellow-500'
          },
        },
        classes: {
          default: 'border border-solid'
        }
      }
    },
    fixedClasses: {
      default: 'btn'
    },
  }
}

What do you think?