import { createComponent } from '@graphprotocol/gds-css'

export const TagMeta = createComponent('Tag', {
  addonCompatible: true,
  cssProps: {
    /** @default 'brand' */
    variant: {
      type: 'values',
      values: ['brand', 'galactic', 'starfield', 'solar', 'sonja', 'elevated', 'muted'],
      defaultValue: 'brand',
    },
    /** @default 'medium' */
    size: {
      type: 'values',
      values: ['xsmall', 'small', 'medium'],
      defaultValue: 'medium',
    },
  },
  vars: {
    padding: {
      '@variant @prop-size-xsmall/tag': '--spacing(1)',
      '@variant @prop-size-small/tag': '--spacing(1.5)',
      '@variant @prop-size-medium/tag': '--spacing(2)',
    },
  },
})
