import type {Config} from 'tailwindcss'

export default {
  content: [
    './app/**/*.{vue,js,ts}',
    './app/**/*.story.{vue,js,ts}',
    './histoire.setup.ts',
    './histoire.config.ts',
  ],
  theme: {
    extend: {
      borderRadius: {
        malio: 'var(--m-radius)',
      },
      colors: {
        m: {
          primary: 'rgb(var(--m-primary) / <alpha-value>)',
          secondary: 'rgb(var(--m-secondary) / <alpha-value>)',
          tertiary: 'rgb(var(--m-tertiary) / <alpha-value>)',
          border: 'rgb(var(--m-border) / <alpha-value>)',
          text: 'rgb(var(--m-text) / <alpha-value>)',
          muted: 'rgb(var(--m-muted) / <alpha-value>)',
          bg: 'rgb(var(--m-bg) / <alpha-value>)',
          error: 'rgb(var(--m-error) / <alpha-value>)',
          success: 'rgb(var(--m-success) / <alpha-value>)',
          'btn-default': 'rgb(var(--m-btn-default) / <alpha-value>)',
          'btn-hover': 'rgb(var(--m-btn-hover) / <alpha-value>)',
          'btn-active': 'rgb(var(--m-btn-active) / <alpha-value>)',
          'btn-disabled': 'rgb(var(--m-btn-disabled) / <alpha-value>)',
        },
      },
      fontFamily: {
        sans: ['"Inter"', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
      },
    },
  },
} satisfies Partial<Config>