import { createComponent } from '@graphprotocol/gds-css';
export const ButtonMeta = createComponent('Button', {
    cssProps: {
        /** @default 'secondary' */
        variant: {
            type: 'values',
            values: ['primary', 'secondary', 'tertiary', 'inverse', 'danger', 'naked'],
            defaultValue: 'secondary',
        },
        /** @default 'medium' */
        size: {
            type: 'values',
            values: ['xsmall', 'small', 'medium', 'large'],
            defaultValue: 'medium',
        },
        /** @default false */
        hideLabel: {
            type: 'values',
            values: [false, true],
            defaultValue: false,
        },
    },
    vars: {
        fg: {
            '@variant @prop-variant-primary/button': 'var(--text-color-button-primary)',
            '@variant @prop-variant-secondary/button': 'var(--text-color-button-secondary)',
            '@variant @prop-variant-tertiary/button': 'var(--text-color-button-tertiary)',
            '@variant @prop-variant-inverse/button': 'var(--text-color-button-inverse)',
            '@variant @prop-variant-danger/button': 'var(--text-color-button-danger)',
            '@variant @prop-variant-naked/button': {
                '@variant @state-idle/button': 'var(--text-color-button-naked-idle)',
                '@variant @state-hover/button': 'var(--text-color-button-naked-hover)',
                '@variant @state-active/button': 'var(--text-color-button-naked-active)',
            },
        },
        bg: {
            '': 'transparent',
            '@variant @prop-variant-primary/button': {
                '@variant @state-idle/button': 'var(--background-color-button-primary-idle)',
                '@variant @state-hover/button': 'var(--background-color-button-primary-hover)',
                '@variant @state-active/button': 'var(--background-color-button-primary-active)',
                '@variant @state-disabled/button': 'var(--background-color-button-primary-disabled)',
            },
            '@variant @prop-variant-secondary/button': {
                '@variant @state-idle/button': 'var(--background-color-button-secondary-idle)',
                '@variant @state-hover/button': 'var(--background-color-button-secondary-hover)',
                '@variant @state-active/button': 'var(--background-color-button-secondary-active)',
                '@variant @state-disabled/button': 'var(--background-color-button-secondary-disabled)',
            },
            '@variant @prop-variant-tertiary/button': {
                '@variant @state-idle/button': 'var(--background-color-button-tertiary-idle)',
                '@variant @state-hover/button': 'var(--background-color-button-tertiary-hover)',
                '@variant @state-active/button': 'var(--background-color-button-tertiary-active)',
                '@variant @state-disabled/button': 'var(--background-color-button-tertiary-disabled)',
            },
            '@variant @prop-variant-inverse/button': {
                '@variant @state-idle/button': 'var(--background-color-button-inverse-idle)',
                '@variant @state-hover/button': 'var(--background-color-button-inverse-hover)',
                '@variant @state-active/button': 'var(--background-color-button-inverse-active)',
                '@variant @state-disabled/button': 'var(--background-color-button-inverse-disabled)',
            },
            '@variant @prop-variant-danger/button': {
                '@variant @state-idle/button': 'var(--background-color-button-danger-idle)',
                '@variant @state-hover/button': 'var(--background-color-button-danger-hover)',
                '@variant @state-active/button': 'var(--background-color-button-danger-active)',
                '@variant @state-disabled/button': 'var(--background-color-button-danger-disabled)',
            },
        },
        border: {
            '': 'transparent',
            '@variant @prop-variant-primary/button': {
                '@variant @state-idle/button': 'var(--border-color-button-primary-idle)',
                '@variant @state-hover/button': 'var(--border-color-button-primary-hover)',
                '@variant @state-active/button': 'var(--border-color-button-primary-active)',
                '@variant @state-disabled/button': 'var(--border-color-button-primary-disabled)',
            },
            '@variant @prop-variant-secondary/button': {
                '@variant @state-idle/button': 'var(--border-color-button-secondary-idle)',
                '@variant @state-hover/button': 'var(--border-color-button-secondary-hover)',
                '@variant @state-active/button': 'var(--border-color-button-secondary-active)',
                '@variant @state-disabled/button': 'var(--border-color-button-secondary-disabled)',
            },
            '@variant @prop-variant-tertiary/button': {
                '@variant @state-idle/button': 'var(--border-color-button-tertiary-idle)',
                '@variant @state-hover/button': 'var(--border-color-button-tertiary-hover)',
                '@variant @state-active/button': 'var(--border-color-button-tertiary-active)',
                '@variant @state-disabled/button': 'var(--border-color-button-tertiary-disabled)',
            },
            '@variant @prop-variant-inverse/button': {
                '@variant @state-idle/button': 'var(--border-color-button-inverse-idle)',
                '@variant @state-hover/button': 'var(--border-color-button-inverse-hover)',
                '@variant @state-active/button': 'var(--border-color-button-inverse-active)',
                '@variant @state-disabled/button': 'var(--border-color-button-inverse-disabled)',
            },
            '@variant @prop-variant-danger/button': {
                '@variant @state-idle/button': 'var(--border-color-button-danger-idle)',
                '@variant @state-hover/button': 'var(--border-color-button-danger-hover)',
                '@variant @state-active/button': 'var(--border-color-button-danger-active)',
                '@variant @state-disabled/button': 'var(--border-color-button-danger-disabled)',
            },
        },
        radius: {
            '@variant @prop-size-xsmall/button': 'var(--radius-6)',
            '@variant @prop-size-small/button': 'var(--radius-6)',
            '@variant @prop-size-medium/button': 'var(--radius-8)',
            '@variant @prop-size-large/button': 'var(--radius-8)',
            '@variant @prop-variant-naked/button': 'var(--radius-6)',
        },
    },
});
//# sourceMappingURL=Button.meta.js.map