foliage-ui / foliage

🍃 Style your components with performance
https://foliage.sova.dev
28 stars 2 forks source link

Add presets #24

Open sergeysova opened 2 years ago

sergeysova commented 2 years ago
export const Button = component('button', baseStyles, {
  variants: {
    color: {
      gray: css`
        background-color: gainsboro;
      `,
      blue: css`
        background-color: dodgerblue;
      `,
    },
    size: {
      md: css`
        height: 26px;
      `,
      lg: css`
        height: 36px;
      `,
    },
  },
  compound: [
    {
      color: 'blue',
      size: 'lg',
      css: css`
        background-color: purple;
      `,
    },
  ],
  defaults: {
    color: 'gray',
    size: 'md',
  },
  presets: {
    primary: {
      color: "blue",
      css: css` @apply p-4;`
    },
  },
});
  1. Preset applies via preset prop.
  2. Preset can apply just css or just variants
  3. Variants passed as props applied over preset
  4. Compound applied after all variants is calculated