It would be useful to have some utility to merge configs, so we could create common colors, roundness, padding configs for UI-kit and then combine them in components:
Example:
// ./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' }
})
It would be useful to have some utility to merge configs, so we could create common
colors,roundness,paddingconfigs for UI-kit and then combine them in components:Example: