merge utility

[Kelin2025]

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' }
})