import { presetWind4 } from "@unocss/preset-wind4";
import {
  defineConfig,
  presetIcons,
  transformerDirectives,
  transformerVariantGroup,
} from "unocss";

export default defineConfig({
  presets: [
    presetWind4(),
    presetIcons(),
  ],
  transformers: [
    transformerDirectives({
      applyVariable: ["--at-apply", "--uno-apply", "--uno"],
    }),
    transformerVariantGroup(),
  ],
  shortcuts: {
    "flex-center": "flex items-center justify-center",
    "flex-col-center": "flex flex-col items-center justify-center",
  },
  // 为 Ionic 添加 CSS 变量支持
  theme: {
    colors: {
      primary: "var(--ion-color-primary)",
      secondary: "var(--ion-color-secondary)",
      tertiary: "var(--ion-color-tertiary)",
      success: "var(--ion-color-success)",
      warning: "var(--ion-color-warning)",
      danger: "var(--ion-color-danger)",
      light: "var(--ion-color-light)",
      medium: "var(--ion-color-medium)",
      dark: "var(--ion-color-dark)",
      text: {
        50: "var(--ion-text-color-step-50)",
        100: "var(--ion-text-color-step-100)",
        150: "var(--ion-text-color-step-150)",
        200: "var(--ion-text-color-step-200)",
        250: "var(--ion-text-color-step-250)",
        300: "var(--ion-text-color-step-300)",
        350: "var(--ion-text-color-step-350)",
        400: "var(--ion-text-color-step-400)",
        450: "var(--ion-text-color-step-450)",
        500: "var(--ion-text-color-step-500)",
        550: "var(--ion-text-color-step-550)",
        600: "var(--ion-text-color-step-600)",
        650: "var(--ion-text-color-step-650)",
        700: "var(--ion-text-color-step-700)",
        750: "var(--ion-text-color-step-750)",
        800: "var(--ion-text-color-step-800)",
        850: "var(--ion-text-color-step-850)",
        900: "var(--ion-text-color-step-900)",
      },
    },
  },
});