import type {Config} from 'tailwindcss'

export default {
  content: [
    './app/**/*.{vue,js,ts}',
    './app/**/*.story.{vue,js,ts}',
    './histoire.setup.ts',
    './histoire.config.ts',
  ],
  safelist: [
    {
      pattern: /(sm:|md:|lg:|xl:|2xl:)?(text|rounded|w|min-w|max-w)-.+/,
    },
  ],
  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>)',
        },
      },
      fontFamily: {
        sans: ['"Helvetica Neue"', 'Helvetica', 'Arial', 'sans-serif'],
      },
    },
  },
} satisfies Partial<Config>