New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Can we support multiple variants of this form? #88

Open

SGAMERyu opened this issue Apr 24, 2023 · 0 comments

Contributor

SGAMERyu commented Apr 24, 2023

In a variant system, the variants we set up often contain common components, and we only need to modify a single CSS property, such as size.

<style lang="ts">
css({
  variants: {
    size: {
      sm: {
        padding: '{space.3} {space.6}',
      },
      md: {
        padding: '{space.6} {space.8}'
      },
      lg: {
        padding: '{space.8} {space.12}'
      },
      xl: {
        padding: '{space.12} {space.24}'
      },
      options: {
        default: 'sm',
      },
    },
  },
})
</style>

But when we use a multiple variant system, it may be more concise.

css({
  variants: {
    size: {
      [sm, md, lg, xl]: (val) => {
        padding: `{space.${val}}`
     },
      options: {
        default: 'sm',
      },
    },
  },
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment