import { presetWeapp } from 'unocss-preset-weapp';
import { extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer';

const { presetWeappAttributify, transformerAttributify } = extractorAttributify();

export default {
  content: {
    filesystem: ['src/**/*.{vue,js,ts,jsx,tsx}'],
  },
  presets: [
    presetWeapp({
      whRpx: true,
    }),
    presetWeappAttributify(),
  ],
  shortcuts: [
    {
      'border-base': 'border border-gray-500_10',
      'flex-col-center': 'flex flex-col justify-center items-center',
      'flex-row-center': 'flex flex-row justify-center items-center',
      'flex-col': 'flex flex-col',
      'flex-row': 'flex flex-row',
    },
  ],
  theme: {
    colors: {
      blue: {
        DEFAULT: '#0094ff',
      },
      red: {
        DEFAULT: '#f63a36',
      },
      yellow: {
        DEFAULT: '#F2A817',
      },
    },
  },
  rules: [
    [
      'bg-color-theme',
      {
        'background-color': '#ffcd32',
      },
    ],
    [
      'bg-color-theme-dark',
      {
        'background-color': 'rgba(255, 205, 49, 0.5)',
      },
    ],
    [
      'text-color-theme',
      {
        color: '#ffcd32',
      },
    ],
    [
      'text-color-theme-dark',
      {
        color: 'rgba(255, 205, 49, 0.8)',
      },
    ],
    [
      'bg-color',
      {
        'background-color': '#222222',
      },
    ],
    [
      'bg-color-dark',
      {
        'background-color': 'rgba(0, 0, 0, 0.3)',
      },
    ],
    [
      'bg-color-light',
      {
        'background-color': '#333333',
      },
    ],
    [
      'card',
      {
        'background-color': 'rgba(0, 0, 0, 0.3)',
        'box-shadow': '0rpx 8rpx 26rpx -4rpx rgba(210,210,210,0.5)',
        'border-radius': '16rpx',
      },
    ],
  ],

  transformers: [transformerAttributify(), transformerClass()],
};