专为 wot-ui 打造的 UnoCSS 预设，内置主题变量、语义色、间距、圆角、字重、透明度、描边和排版相关原子类规则。
@wot-ui/unocss-preset 是一个给 UnoCSS 使用的预设包，目标是把 wot-ui 的设计 token 和主题变量映射成可直接使用的原子类。
它主要解决两件事：
| 作用 |
说明 |
| 统一设计 token |
把 wot-ui 里的颜色、间距、圆角、字重、排版、透明度、描边等 token 暴露为统一的 UnoCSS 类名 |
| 降低样式接入成本 |
业务项目不需要手写大量 CSS 变量映射，直接使用 wot- 前缀原子类即可完成样式编排 |
接入后，你可以直接在模板里写出类似下面的类名：
<view class="wot-bg-filled-oppo wot-rounded-xl wot-p-loose">
<text class="wot-text-title-large wot-text-text-main wot-font-semibold">
Wot UI UnoCSS Preset
</text>
</view>
- 已经在项目里使用
UnoCSS
- 希望直接复用
wot-ui 的设计 token 和主题变量
- 希望通过原子类快速完成 uni-app / Vue 页面样式搭建
这个预设在运行时主要提供三部分能力：
| 能力 |
说明 |
theme |
把 wot-ui 语义色和基础色映射到 UnoCSS theme，供颜色类规则使用 |
rules |
生成 wot-text-*、wot-bg-*、wot-m-*、wot-p-*、wot-rounded-* 等原子类规则 |
preflights |
自动注入 wot-ui 的 CSS 变量，确保这些原子类能拿到正确的变量值 |
默认情况下，类名前缀是 wot-，例如：
wot-text-primarywot-bg-danger-surfacewot-m-mainwot-rounded-mdwot-text-body-main
使用方式分三步：
| 步骤 |
说明 |
| 1. 安装依赖 |
安装 unocss 和 @wot-ui/unocss-preset |
| 2. 注册 preset |
在 unocss.config.ts 中引入并启用 presetWot() |
| 3. 在模板中使用类名 |
直接写 wot- 前缀原子类，不再手动维护大量样式映射 |
pnpm add -D unocss
pnpm add @wot-ui/unocss-preset
import { presetWot } from '@wot-ui/unocss-preset'
import { defineConfig } from 'unocss'
export default defineConfig({
presets: [
presetWot(),
],
})presetWot({
prefix: 'wot',
preflight: true,
baseTokens: false,
})
| 配置项 |
默认值 |
说明 |
示例 |
prefix |
wot |
工具类前缀 |
wot-text-primary、wot-m-main |
preflight |
true |
是否自动注入 wot-ui CSS 变量 |
presetWot({ preflight: true }) |
baseTokens |
false |
是否开放基础色板和原始 token 类名 |
presetWot({ baseTokens: true }) |
| 规则类型 |
前缀模式 |
示例 |
| 颜色 |
wot-text-* / wot-bg-* / wot-border-* |
wot-text-primary、wot-bg-danger-surface、wot-border-border-main |
| 间距 |
wot-m-* / wot-gap-* |
wot-m-main、wot-gap-tight、wot-gap-x-loose |
| 内边距 |
wot-p-* |
wot-p-main、wot-px-tight、wot-pb-loose |
| 圆角 |
wot-rounded-* |
wot-rounded-md、wot-rounded-full |
| 字重 |
wot-font-* |
wot-font-medium、wot-font-semibold |
| 排版 |
wot-text-* |
wot-text-body-main、wot-text-title-large |
| 透明度 |
wot-opacity-* |
wot-opacity-disabled |
| 描边 |
wot-border-stroke-* |
wot-border-stroke-main |
以下为各类原子类支持的主要变量值，使用时将它们拼接到对应规则后即可。
| 项目 |
内容 |
| 适用前缀 |
wot-text-*、wot-bg-*、wot-border-* |
| 主色 |
primary、primary-1 ~ primary-10 |
| 危险色 |
danger、danger-main、danger-hover、danger-clicked、danger-disabled、danger-particular、danger-surface |
| 成功色 |
success、success-main、success-hover、success-clicked、success-disabled、success-particular、success-surface |
| 警告色 |
warning、warning-main、warning-hover、warning-clicked、warning-disabled、warning-particular、warning-surface |
| 文字色 |
text-main、text-secondary、text-auxiliary、text-disabled、text-placeholder、text-white |
| 图标色 |
icon-main、icon-secondary、icon-auxiliary、icon-disabled、icon-placeholder、icon-white |
| 边框色 |
border-extra-strong、border-strong、border-main、border-light、border-white、border-zero |
| 填充色 |
filled-extra-strong、filled-strong、filled-content、filled-bottom、filled-oppo、filled-zero |
| 分割线 |
divider-main、divider-light、divider-strong、divider-white |
| 反馈色 |
feedback-hover、feedback-active、feedback-accent |
| 半透明填充 |
opacfilled-tooltip-toast-cover、opacfilled-main-cover、opacfilled-light-cover |
| Picker View Mask |
picker-view-mask-start、picker-view-mask-end |
| 分类色 |
classify-yellow-bg、classify-yellow-border、classify-yellow-content、classify-cyan-bg、classify-cyan-border、classify-cyan-content、classify-purple-bg、classify-purple-border、classify-purple-content、classify-grape-bg、classify-grape-border、classify-grape-content、classify-pink-bg、classify-pink-border、classify-pink-content |
| 示例 |
wot-text-primary、wot-bg-filled-oppo、wot-border-border-main、wot-bg-classify-purple-content |
| 项目 |
内容 |
| 适用前缀 |
wot-m-*、wot-mx-*、wot-my-*、wot-mt-*、wot-mr-*、wot-mb-*、wot-ml-*、wot-gap-*、wot-gap-x-*、wot-gap-y-* |
| 可用值 |
zero、ultra-tight、super-tight、extra-tight、tight、main、loose、extra-loose、super-loose、ultra-loose、spacious、extra-spacious、super-spacious、ultra-spacious |
| 示例 |
wot-m-main、wot-mt-tight、wot-gap-x-loose |
| 项目 |
内容 |
| 适用前缀 |
wot-p-*、wot-px-*、wot-py-*、wot-pt-*、wot-pr-*、wot-pb-*、wot-pl-* |
| 可用值 |
zero、ultra-tight、super-tight、extra-tight、tight、main、loose、extra-loose、super-loose、ultra-loose、spacious、extra-spacious、super-spacious、ultra-spacious |
| 示例 |
wot-p-main、wot-px-tight、wot-pb-loose |
| 项目 |
内容 |
| 适用前缀 |
wot-rounded-* |
| 可用值 |
zero、sm、md、lg、xl、2xl、3xl、full |
| 示例 |
wot-rounded-md、wot-rounded-full |
| 项目 |
内容 |
| 适用前缀 |
wot-font-* |
| 可用值 |
ultra-light、thin、light、regular、medium、semibold、bold |
| 示例 |
wot-font-medium、wot-font-semibold |
| 项目 |
内容 |
| 适用前缀 |
wot-text-* |
| Title |
title-main、title-large、title-extra-large |
| Body |
body-main、body-large、body-extra-large、body-super-large、body-ultra-large |
| Label |
label-super-small、label-extra-small、label-small、label-main、label-large |
| 示例 |
wot-text-body-main、wot-text-title-large、wot-text-label-large |
| 项目 |
内容 |
| 适用前缀 |
wot-opacity-* |
| 可用值 |
disabled、dimmer、overlay、main、backdrop |
| 示例 |
wot-opacity-disabled、wot-opacity-main |
| 项目 |
内容 |
| 适用前缀 |
wot-border-stroke-* |
| 可用值 |
zero、light、main、bold |
| 示例 |
wot-border-stroke-main、wot-border-stroke-bold |
当 baseTokens: true 时，会额外开放基础色板与原始 token。
| 项目 |
内容 |
| 基础色 |
base-black、base-white、base-transparent |
| 色阶家族 |
blue-*、lightblue-*、pink-*、red-*、volcano-*、orange-*、yellow-*、green-*、cyan-*、purple-*、grape-*、coolgrey-*、neutralgrey-*、warmgrey-* |
| 色阶范围 |
每个家族支持 1 ~ 10 |
| 额外透明色 |
非 grey 家族额外支持 *-opac |
| 透明阶 |
opac-1_02、opac-2_04、opac-3_08、opac-4_15、opac-5_20、opac-6_30、opac-7_45、opac-7_55、opac-8_65、opac-9_75、opac-10_85 |
| 白色透明阶 |
opacwhite-1_02、opacwhite-2_04、opacwhite-3_08、opacwhite-4_15、opacwhite-5_20、opacwhite-6_30、opacwhite-7_45、opacwhite-7_55、opacwhite-8_65、opacwhite-9_75、opacwhite-10_85 |
| 示例 |
wot-bg-base-black、wot-text-blue-6、wot-border-opac-3_08 |
包默认导出 presetWot，并额外导出以下 token maps，便于业务侧复用：
SEMANTIC_COLOR_MAPBASE_COLOR_MAPSPACING_MAPPADDING_MAPRADIUS_MAPFONT_WEIGHT_MAPTYPOGRAPHY_MAPOPACITY_MAPSTROKE_MAP
pnpm build
pnpm test
pnpm typecheck
MIT