import type {Config} from 'tailwindcss'
import {fileURLToPath} from 'node:url'
import {dirname, join} from 'node:path'

const dir = dirname(fileURLToPath(import.meta.url))

export default {
  content: [
    join(dir, 'app/**/*.{vue,js,ts}'),
    join(dir, 'app/**/*.story.{vue,js,ts}'),
    join(dir, '.playground/**/*.{vue,js,ts}'),
    join(dir, 'histoire.setup.ts'),
    join(dir, '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>