//the preset extends the default tailwind config
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  theme: {
    extend: {
      colors: {
        base: {
          content: 'var(--par-base-content)',
          DEFAULT: 'var(--par-base)',
        },
        primary: {
          300: 'var(--par-primary-300)',
          200: 'var(--par-primary-200)',
          100: 'var(--par-primary-100)',
        },
        subtle: {
          300: 'var(--par-subtle-300)',
          200: 'var(--par-subtle-200)',
          100: 'var(--par-subtle-100)',
          50: 'var(--par-subtle-50)',
        },
        disabled: {
          content: 'var(--par-disabled-content)',
          DEFAULT: 'var(--par-disabled)',
        },
        error: {
          content: 'var(--par-error-content)',
          DEFAULT: 'var(--par-error)',
        },
        success: {
          content: 'var(--par-success-content)',
          DEFAULT: 'var(--par-success)',
        },
        warning: {
          content: 'var(--par-warning-content)',
          DEFAULT: 'var(--par-warning)',
        },
        secondary: {
          300: 'var(--par-secondary-300)',
          200: 'var(--par-secondary-200)',
          100: 'var(--par-secondary-100)',
        },
        tertiary: {
          300: 'var(--par-tertiary-300)',
          200: 'var(--par-tertiary-200)',
          100: 'var(--par-tertiary-100)',
        },
        random: {
          1: 'var(--par-random-1)',
          2: 'var(--par-random-2)',
        },
      },
      boxShadow: {
        input: 'var( --par-shadow-input)',
        button: 'var( --par-shadow-button)',
      },
      spacing: {
        'radio-check': '19px',
        'radio-ring': '4px',
        input: '3.25rem',
        inputButton: '3rem',
        inputPaddingButton: '64px',
      },
      borderWidth: {
        medium: '1.5px',
      },
      borderRadius: {
        checkbox: 'var(--par-border-radius-checkbox)',
        input: 'var(--par-border-radius-input)',
        button: 'var(--par-border-radius-button)',
      },
      scale: {
        98: '98%',
      },
      fontFamily: {
        sans: ['var(--par-font-family)', ...defaultTheme.fontFamily.sans],
      },
    },
  },
};