foliage-ui / foliage Goto Github PK

const Button = styled('button', { data: { enabled: $enabled, theme: $theme } })`
  color: red;
`

Button({
  data: { enabled: $another }
})

const Button = component('div', baseStyles)

<Button as="button" />

<Button as={MyButton} myProp={1} />

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;`
    },
  },
});

// ./config/index,ts
export const colors = {
  variants: {
    color: {
      primary: css`
        background: white;
        color: black;
      `,
      default: css`
        background: transparent;
        color: white;
      `,
    },
  },
}

export const sizes = {
  variants: {
    size: {
      large: css`
        padding: 20px 30px;
      `,
      normal: css`
        padding: 10px 20px;
      `
    }
  }
}

// ./components/Button.tsx
import { merge } from 'foliage'
import { component } from 'foliage-react'

import { colors, sizes } from '../config'

export const Button = component("button", merge(colors, sizes), {
  defaults: { color: 'primary', size: 'normal' }
})

import { tw } from 'foliage-tailwind'
import { component } from 'foliage-react'

const Button = component("button", {
  defaults: { size: "normal" },
  variants: {
    size: {
      large: tw`px-4 py-2`,
      normal: tw`px-2 py-1`
    }
  }
})