UnoCSS Preset

@tripo3d/design/config 导出 defineConfig(),一行生成完整的 UnoCSS 配置。它集成:

• 调色板(与组件 CSS 变量保持一致)
• 按钮主题工具类(btn-bg-*、btn-text-*、btn-border-*、btn-shadow-*、btn-glow-*)
• 预设:presetWind4(Tailwind 风格 v4) + presetIcons(按需加载 tripo 私有图标集)
• 转换器:transformerDirectives + transformerVariantGroup + transformerCompileClass

基础用法

// uno.config.ts
import { defineConfig } from '@tripo3d/design/config';

export default defineConfig();

在 main.ts 中引入 virtual:uno.css:

import 'virtual:uno.css';
import '@tripo3d/design/style.css';

在 Vite 中启用 UnoCSS 插件:

// vite.config.ts
import UnoCSS from 'unocss/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [UnoCSS()],
});

Nuxt 项目请参考 Nuxt 集成。

扩展配置

defineConfig(config) 接收一个可选的 UnoCSS UserConfig,内部通过深合并叠加到预设上:

import { defineConfig } from '@tripo3d/design/config';

export default defineConfig({
  theme: {
    colors: {
      brand: {
        500: '#ff6b35',
      },
    },
  },
  rules: [
    // 追加自定义规则
  ],
  shortcuts: {
    'btn-primary': 'btn-bg-purple-1 btn-text-white btn-shadow-purple-1',
  },
});

合并策略

字段	合并方式	说明
theme	lodash merge(presetTheme, yourTheme)	深度合并,颜色/尺寸会叠加而非替换
rules	[...presetRules, ...yourRules]	追加,你的规则后注册(优先级更高)
presets	[...presetPresets, ...yourPresets]	追加:默认包含 presetWind4 + presetIcons
transformers	[...presetTransformers, ...yourTransformers]	追加:默认包含 directives / variantGroup / compileClass
content	merge(content, yourContent)	深度合并,默认扫描 vue/svelte/tsx/mdx/html 等

按钮主题工具类规则

内置工具类由正则驱动,支持 3 种形态:

形态	示例	说明
色系 + 阶数	btn-bg-purple-1	从 preset 调色板取值
色系默认值	btn-bg-red	使用 color.DEFAULT
任意值	btn-bg-[#ff6b35]	转义的任意 CSS 值,直接写入变量

生成的 CSS 形如:

.btn-bg-purple-1 { --btn-bg-color: rgba(80, 59, 227, 1); }
.btn-bg-\[\#ff6b35\] { --btn-bg-color: #ff6b35; }

图标集

presetIcons 注册了 tripo 私有图标集 i-tripo:*,运行时从 CDN 加载 JSON:

• CDN 地址:https://assets.cdn.tripo3d.com/fe-tripo-tools/icon.json
• 首次构建/启动时按需下载(有网络要求)
• 使用方式:<Icon icon="i-tripo:close" /> 或直接 class i-tripo:close

如需引入其他图标集,可在 defineConfig 的 presets 中追加 presetIcons({ collections: { ... } })。

预置转换器

转换器	能力
transformerDirectives	支持 @apply、@screen 等 CSS 指令
transformerVariantGroup	支持 hover:bg-red hover:text-white 分组写法
transformerCompileClass	把长字符串 class 编译成短 hash,减小生成体积

源码

实现细节见 src/config.ts。