/** @type {import('tailwindcss').Config} */

const formColors = {
  border: {
    normal: 'var(--border-form-normal)',
    hover: 'var(--border-form-hover)',
    focused: 'var(--border-form-focused)',
  },
};
const buttonColors = {
  primary: {
    text: {
      default: 'var(--text-primary-default)',
      disable: 'var(--text-primary-disabled)',
    },
    backgroundColor: {
      normal: 'var(--background-primary-normal)',
      hover: 'var(--background-primary-hover)',
      active: 'var(--background-primary-active)',
      focused: 'var(--background-primary-focused)',
      disable: 'var(--background-primary-disabled)',
    },
    border: {
      normal: 'var(--border-primary-normal)',
      hover: 'var(--border-primary-hover)',
      active: 'var(--border-primary-active)',
      focused: 'var(--border-primary-focused)',
      disable: 'var(--border-primary-disable)',
    },
    // icon: {
    // },
  },
  secondary: {
    text: {
      normal: 'var(--text-secondary-normal)',
      hover: 'var(--text-secondary-hover)',
      active: 'var(--text-secondary-active)',
      disable: 'var(--text-secondary-disabled)',
    },
    backgroundColor: {
      normal: 'var(--background-secondary-normal)',
      hover: 'var(--background-secondary-hover)',
      active: 'var(--background-secondary-active)',
      focused: 'var(--background-secondary-focused)',
      disable: 'var(--background-secondary-disable)',
    },
    border: {
      normal: 'var(--border-secondary-normal)',
      hover: 'var(--border-secondary-hover)',
      active: 'var(--border-secondary-active)',
      focused: 'var(--border-secondary-focused)',
      disable: 'var(--border-secondary-disable)',
    },
    icon: {},
  },
  tertiary: {
    text: {
      normal: 'var(--text-tertiary-normal)',
      hover: 'var(--text-tertiary-hover)',
      focused: 'var(--text-tertiary-focused)',
      active: 'var(--text-tertiary-active)',
      disable: 'var(--text-tertiary-disable)',
    },
    backgroundColor: {
      default: 'var(-background-tertiary-default)',
      active: 'var(--background-tertiary-active)',
      focused: 'var(--background-tertiary-focused)',
      disable: 'var(--background-tertiary-disable)',
    },
    border: {
      default: 'var(--border-tertiary-default)',
      disabled: 'var(--border-tertiary-disabled)',
    },
    // icon: {
    // },
  },
  negative: {
    text: {
      default: 'var(--text-negative-default)',
      disable: 'var(--text-negative-disabled)',
    },
    backgroundColor: {
      normal: 'var(--background-negative-normal)',
      hover: 'var(--background-negative-hover)',
      active: 'var(--background-negative-active)',
      focused: 'var(--background-negative-focused)',
      disable: 'var(--background-negative-disabled)',
    },
    border: {
      normal: 'var(--border-negative-normal)',
      hover: 'var(--border-negative-hover)',
      active: 'var(--border-negative-active)',
      focused: 'var(--border-negative-focused)',
      disable: 'var(--border-negative-disable)',
    },
    // icon: {
    // },
  },
  others: {
    backgroundColor: {
      red: 'var(--background-others-active)',
    },
  },
};
const fontSizes = {
  // xs: [
  //   '.625rem',
  //   {
  //     lineHeight: '1rem',
  //     letterSpacing: '.03em',
  //   },
  // ],
  s: [
    '.75rem',
    {
      lineHeight: '1.25rem',
      letterSpacing: '.03em',
    },
  ],
  r: [
    '.875rem',
    {
      lineHeight: '1.5rem',
      letterSpacing: '0',
    },
  ],
  xr: [
    '1rem',
    {
      lineHeight: '1.75rem',
      letterSpacing: '0',
    },
  ],
  l: [
    '1.25rem',
    {
      lineHeight: '2rem',
      letterSpacing: '0',
    },
  ],
  xl: [
    '1.5rem',
    {
      lineHeight: '2.5rem',
      letterSpacing: '0',
    },
  ],
};
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    textColor: {
      body: 'var(--text-body)',
      description: 'var(--text-description)',
      subdescription: 'var(--text-sub-description)',
      link: 'var(--text-link)',
      alert: 'var(--text-alert)',
      onfill: 'var(--text-on-fill)',
      primary: buttonColors.primary.text,
      secondary: buttonColors.secondary.text,
      tertiary: buttonColors.tertiary.text,
      negative: buttonColors.negative.text,
    },
    backgroundColor: {
      base: 'var(--background-base)',
      main: 'var(--background-main)',
      sub: 'var(--background-sub)',
      sidenav: 'var(--background-side-nav)',
      statusOk: 'var(--background-status-review-ok)',
      statusNg: 'var(--background-status-review-ng)',
      primary: buttonColors.primary.backgroundColor,
      secondary: buttonColors.secondary.backgroundColor,
      tertiary: buttonColors.tertiary.backgroundColor,
      negative: buttonColors.negative.backgroundColor,
      others: buttonColors.others.backgroundColor,
    },
    borderColor: {
      field: 'var(--border-field)',
      fieldsub: 'var(--border-field-sub)',
      form: formColors.border,
      primary: buttonColors.primary.border,
      secondary: buttonColors.secondary.border,
      negative: buttonColors.negative.border,
    },
    iconColor: {
      active: 'var(---icon-active)',
      alert: 'var(--icon-alert)',
      disabled: 'var(--icon-disabled)',
      label: 'var(--icon-label)',
      sidenav: 'var(--icon-side-nav)',
    },
    fontSize: {
      xs: fontSizes.s,
      sm: fontSizes.s,
      base: fontSizes.r,
      lg: fontSizes.xr,
      '2xl': fontSizes.l,
      '3xl': fontSizes.xl,
      '4xl': fontSizes.xl,
      '5xl': fontSizes.xl,
      '6xl': fontSizes.xl,
      '7xl': fontSizes.xl,
      '8xl': fontSizes.xl,
      '9xl': fontSizes.xl,
      ...fontSizes,
    },
    extend: {
      fontFamily: {
        sans: [
          '-apple-system',
          'system-ui',
          'Helvetica Neue',
          'Segoe UI',
          'Hiragino Kaku Gothic ProN',
          'Hiragino Sans',
          'Arial',
          'Meiryo',
          'sans-serif',
        ],
        serif: ['NewSerifFont'],
      },
      borderRadius: {
        4: '1rem',
        8: '2rem',
        12: '3rem',
        16: '4rem',
        24: '6rem',
      },
      fontSize: {
        'icon-18': '18px !important',
        'icon-20': '20px !important',
        'icon-24': '24px !important',
        'icon-36': '36px !important',
        'icon-48': '48px !important',
        'icon-64': '64px !important',
        'icon-92': '92px !important',
      },
    },
  },
  plugins: [],
};