import { defineConfig, presetUno, transformerDirectives } from 'unocss'

/**
 * UnoCSS 配置：仅使用 presetUno（类 Tailwind 原子类）。
 *
 * 颜色一律走设计令牌 CSS 变量（--tk-* / --td-*），不要写死色值，
 * 这样昼夜主题切换与品牌改色都只需改 tokens.scss 一处。
 * 颜色写法用 arbitrary value，例如：bg-[var(--tk-surface)]
 *
 * 尺寸同理：字号用 text-13px / text-16px 这种「与令牌同一档位」的值，
 * 不要在这里写回 12px，那是上一版「字太小」的根因。
 */
export default defineConfig({
  presets: [presetUno()],
  transformers: [transformerDirectives()],
  shortcuts: {
    // 工具页通用容器（内容型页面统一版心）
    'page-wrap': 'mx-auto w-full max-w-[var(--tk-content-max)]',
    // 表单行：标签 + 控件 的通用栅格（响应式，移动端自动竖排）
    'form-row': 'flex flex-col gap-2 md:flex-row md:items-center md:gap-4',
    // 结果代码块：等宽字体 + 面板块底色
    'code-block':
      'rounded-[var(--tk-radius-md)] bg-[var(--tk-surface-sunken)] px-4 py-3.5 font-mono text-14px leading-relaxed break-all whitespace-pre-wrap',
    // 通用面板（自定义区块的轻量容器）
    // 自带内边距，直接写 class="panel tool-section" 即可，不必每处再补 padding。
    // 本版容器重新「有形」：白底 + 实描边，与页面底（--tk-bg）拉开层次。
    // 注意：页面 scoped 样式（如 .block[data-v-*]）权重高于本类，需要单独覆盖时照常写即可。
    'panel':
      'rounded-[var(--tk-radius-xl)] border border-[var(--tk-border)] bg-[var(--tk-surface)] p-5 md:p-7',
    // 说明性小字
    'hint-text': 'text-13px text-[var(--tk-text-placeholder)]',
  },
})