import { vars, createComponentTheme } from '../../css';
import { buttonContract } from './button.contract';

export const buttonTheme = createComponentTheme(buttonContract, {
  sizes: {
    // 120 / 16
    'width-sm': '7.5rem',
    // 160 / 16
    'width-md': '10rem',
    // 220 / 16
    'width-lg': '13.75rem',
    // 280 / 16
    'width-xl': '17.5rem',
    // 320 / 16
    'width-2xl': '20rem',
  },
  fontSizes: {
    subtle: vars.fontSizes['sm'],
    base: vars.fontSizes['md'],
  },
  fontWeights: {
    base: vars.fontWeights['bold'],
  },
});