import type {Config} from 'tailwindcss'

export default {
  content: [
    './app/**/*.{vue,js,ts}',
    './app/**/*.story.{vue,js,ts}',
    './.playground/**/*.{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>)',
          surface: 'rgb(var(--m-surface) / <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>)',
          disabled: 'rgb(var(--m-disabled) / <alpha-value>)',
          danger: 'rgb(var(--m-danger) / <alpha-value>)',
          success: 'rgb(var(--m-success) / <alpha-value>)',
          'btn-primary': 'rgb(var(--m-btn-primary) / <alpha-value>)',
          'btn-primary-hover': 'rgb(var(--m-btn-primary-hover) / <alpha-value>)',
          'btn-primary-active': 'rgb(var(--m-btn-primary-active) / <alpha-value>)',
          'btn-secondary': 'rgb(var(--m-btn-secondary) / <alpha-value>)',
          'btn-secondary-hover': 'rgb(var(--m-btn-secondary-hover) / <alpha-value>)',
          'btn-secondary-active': 'rgb(var(--m-btn-secondary-active) / <alpha-value>)',
          'btn-danger': 'rgb(var(--m-btn-danger) / <alpha-value>)',
          'btn-danger-hover': 'rgb(var(--m-btn-danger-hover) / <alpha-value>)',
          'btn-danger-active': 'rgb(var(--m-btn-danger-active) / <alpha-value>)',
          'site-blue': 'rgb(var(--m-site-blue) / <alpha-value>)',
          'site-yellow': 'rgb(var(--m-site-yellow) / <alpha-value>)',
          'site-green': 'rgb(var(--m-site-green) / <alpha-value>)',
        },
      },
      fontFamily: {
        sans: ['"Inter"', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
      },
    },
  },
} satisfies Partial<Config>