/**
 * unocss defineConfig
 * @link unocss: https://github.com/unocss/unocss
 * @link unocss-preset-weapp: https://github.com/MellowCo/unocss-preset-weapp
 */
import presetWeapp from 'unocss-preset-weapp';
import { extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer';
import { presetIcons } from 'unocss';

import transformerDirectives from '@unocss/transformer-directives';

const { presetWeappAttributify, transformerAttributify } = extractorAttributify();

export default {
  presets: [
    // https://github.com/MellowCo/unocss-preset-weapp
    presetWeapp(),
    // attributify autocomplete
    presetWeappAttributify(),
    presetIcons(),
  ],
  shortcuts: [
    {
      'border-base': 'border border-gray-500_10',
      'center': 'flex justify-center items-center',
    },
  ],
  transformers: [
    transformerDirectives({
      enforce: 'pre',
    }),

    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
    transformerAttributify(),

    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
    transformerClass(),
  ],
  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)',
    },
  },
};