import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons';
import { isMp } from './build/platform';

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./public/index.html', './src/**/**.{html,js,ts,jsx,tsx,vue}'],
  corePlugins: {
    // 小程序去使用 h5 的 preflight 和响应式 container 没有意义
    preflight: !isMp,
    container: !isMp,
  },
  plugins: [iconsPlugin({
    collections: getIconCollections(['mdi', 'svg-spinners']),
  })],
  theme: {
    extend: {
      opacity: {
        disabled: 'var(--opacity-disabled)',
      },
    },
    colors: {
      primary: 'var(--colors-primary)',
      secondary: 'var(--colors-secondary)',
      accent: 'var(--colors-accent)',
      success: 'var(--colors-success)',
      warning: 'var(--colors-warning)',
      error: 'var(--colors-error)',
      disable: 'var(--colors-disable)',
      danger: 'var(--colors-danger)',
      mark: 'var(--colors-mark)',
      title: 'var(--colors-title)',
      subtitle: 'var(--colors-subtitle)',
      paragraph: 'var(--colors-paragraph)',
      fontColorblack: 'var(--colors-fontColorblack)',
      fontColorPrimary: 'var(--colors-fontColorPrimary)',
      fontColorInverse: 'var(--colors-fontColorInverse)',
      fontColorGrey: 'var(--colors-fontColorGrey)',
      fontColorPlaceholder: 'var(--colors-fontColorPlaceholder)',
      fontColorDisable: 'var(--colors-fontColorDisable)',
      fontColorBottomText: 'var(--colors-fontColorBottomText)',
      container: 'var(--colors-container)',
      page: 'var(--colors-page)',
      containerInverse: 'var(--colors-containerInverse)',
      containerHover: 'var(--colors-containerHover)',
      secondaryHover: 'var(--colors-secondaryHover)',
      containerMask: 'var(--colors-containerMask)',
      iconButton: 'var(--colors-iconButton)',
      borderColor: 'var(--colors-borderColor)',
    },
    fontSize: {
      sm: 'var(--fontSize-sm)',
      base: 'var(--fontSize-base)',
      lg: 'var(--fontSize-lg)',
      title: 'var(--fontSize-title)',
      subtitle: 'var(--fontSize-subtitle)',
      paragraph: 'var(--fontSize-paragraph)',
    },
    borderRadius: {
      sm: 'var(--borderRadius-sm)',
      base: 'var(--borderRadius-base)',
      lg: 'var(--borderRadius-lg)',
      circle: 'var(--borderRadius-circle)',
    },
    spacing: {
      rowSm: 'var(--spacing-rowSm)',
      rowBase: 'var(--spacing-rowBase)',
      rowLg: 'var(--spacing-rowLg)',
      colSm: 'var(--spacing-colSm)',
      colBase: 'var(--spacing-colBase)',
      colLg: 'var(--spacing-colLg)',
    },
  },
};