create-wot-ui-theme

# Create Wot-ui Theme Skill 这个 skill 用于在 `wot-ui` 项目中生成“单文件主题 SCSS”方案。它约束主题文件在 `src/themes/styles` 下完成语义变量定义与挂载，`App.vue` 只负责 `@use` 引入，不扩展成 light/dark 双文件结构，也不改造 `uni_modules/wot-ui/styles/theme/index.scss`。 ## 适用场景 - 用户明确要求为 `wot-ui` 生成品牌主题、业务主题或定制语义变量主题。 - 用户希望新增 `src/themes/styles/{主题名}.scss`，并把挂载逻辑也收进主题文件。 - 用户要求 `App.vue` 只保留 `@use './themes/styles/{主题名}.scss' as {主题名};` 这一类引入。 - 用户强调不要生成 dark 主题文件、不要拆成双文件主题结构、不要改内置主题入口。 ## 不适用场景 - 用户只是想知道 `wd-config-provider` 或普通 CSS 变量怎么用，这种情况优先使用 `wot-ui-v2` skill。 - 用户要做 light/dark 双主题、动态换肤系统、运行时 token 注入，这不属于本 skill 的目标结构。 - 当前仓库没有实际业务 `src/App.vue` 或主题目录时，不要臆造文件；应基于用户目标项目路径执行，或先向用户确认目标工程位置。 ## 核心约束 - 只生成一个主题文件：`src/themes/styles/{主题名}.scss`。 - 主题文件内必须同时包含： - 一个 `@mixin {主题名}-theme-vars` - `page`、`.wot-theme-{主题名}`、`.wot-theme-{主题名} .wd-root-portal` 的挂载选择器 - `App.vue` 只负责 `@use` 引入，不重复写挂载选择器。 - 所有语义变量都必须填写固定色值或 `transparent`，不要写成 `var(--wot-xxx)`。 - 不生成 `dark.scss`，不修改 `uni_modules/wot-ui/styles/theme/index.scss`。 - 如果用户没有明确要求接入 `App.vue`，默认只生成主题文件并给出应追加的 `@use` 语句。 ## 执行前确认 生成前优先确认这些信息；缺少时先问清楚再动手： 1. 主题名称，例如 `antd`、`ocean`、`forest` 2. 主题风格描述，例如品牌化、偏中性、偏高对比 3. 主色 10 阶是否全部自定义 4. `danger`、`success`、`warning` 是否沿用默认值 5. 文本、边框、填充、反馈态是否需要整体调性调整 6. 是否需要同步接入 `src/App.vue` ## 推荐流程 1. 先查看项目里是否已存在 `src/themes/styles/*.scss` 与 `src/App.vue`，确认接入位置和现有顺序。 2. 若用户未给足主题信息，先收集主题名、风格和 token 调整范围。 3. 创建 `src/themes/styles/{主题名}.scss`，按本 skill 的完整模板输出全部语义变量。 4. 如用户明确要求接入，再在 `src/App.vue` 的 `<style lang="scss">` 中只追加 `@use './themes/styles/{主题名}.scss' as {主题名};`。 5. 检查变量是否完整、值是否全为固定色值、挂载选择器是否在主题文件内。 ## 主题文件要求 ### 结构要求 - 只保留一个 mixin，命名为 `{主题名}-theme-vars` - 注释风格尽量贴近 `antd.scss` 这种语义分组写法 - 挂载选择器直接写在同一文件末尾 - mixin 调用形式固定为 `@include {主题名}-theme-vars();` ### App.vue 要求 - 只追加 `@use './themes/styles/{主题名}.scss' as {主题名};` - 不在 `App.vue` 里重复写 `page, .wot-theme-{主题名}` 这些挂载块 - 如果已有其他主题 `@use`，保持原有顺序和已有块不被破坏，只追加当前主题 ## 完整变量模板 ```scss @mixin {主题名}-theme-vars { /* {主题描述} semantic tokens */ /* Primary */ --wot-primary-1: #F5F8FFFF; --wot-primary-2: #E5EDFFFF; --wot-primary-3: #B8CFFFFF; --wot-primary-4: #7CA4FFFF; --wot-primary-5: #4480FFFF; --wot-primary-6: #1C64FDFF; --wot-primary-7: #164ED1FF; --wot-primary-8: #1341ADFF; --wot-primary-9: #0F3285FF; --wot-primary-10: #0A235CFF; /* Danger */ --wot-danger-main: #F14646FF; --wot-danger-hover: #FB7C7CFF; --wot-danger-clicked: #DC2C2CFF; --wot-danger-disabled: #FFC9C9FF; --wot-danger-particular: #FFE3E3FF; --wot-danger-surface: #FFF5F5FF; /* Success */ --wot-success-main: #12B886FF; --wot-success-hover: #59CDAAFF; --wot-success-clicked: #0F956CFF; --wot-success-disabled: #B8EADBFF; --wot-success-particular: #E7F8F3FF; --wot-success-surface: #F3FBF9FF; /* Warning */ --wot-warning-main: #F57F00FF; --wot-warning-hover: #FFA94DFF; --wot-warning-clicked: #D05706FF; --wot-warning-disabled: #FFD8A8FF; --wot-warning-particular: #FFE8CCFF; --wot-warning-surface: #FFF6EBFF; /* Text */ --wot-text-main: #1D1F29FF; --wot-text-secondary: #4E5369FF; --wot-text-auxiliary: #868A9CFF; --wot-text-disabled: #C9CBD4FF; --wot-text-placeholder: #A9ACB8FF; --wot-text-white: #FFFFFFFF; /* Icon */ --wot-icon-main: #1D1F29FF; --wot-icon-secondary: #4E5369FF; --wot-icon-auxiliary: #868A9CFF; --wot-icon-disabled: #C9CBD4FF; --wot-icon-placeholder: #A9ACB8FF; --wot-icon-white: #FFFFFFFF; /* Border */ --wot-border-extra-strong: #868A9CFF; --wot-border-strong: #C9CBD4FF; --wot-border-main: #E5E6EBFF; --wot-border-light: #F2F3F5FF; --wot-border-white: #FFFFFFFF; --wot-border-zero: transparent; /* Filled */ --wot-filled-extra-strong: #C9CBD4FF; --wot-filled-strong: #E5E6EBFF; --wot-filled-content: #F2F3F5FF; --wot-filled-bottom: #F7F8FAFF; --wot-filled-oppo: #FFFFFFFF; --wot-filled-zero: transparent; /* Divider */ --wot-divider-main: #00000014; --wot-divider-light: #0000000A; --wot-divider-strong: #00000026; --wot-divider-white: #FFFFFFFF; /* Feedback */ --wot-feedback-hover: #0000000A; --wot-feedback-active: #00000014; --wot-feedback-accent: #1C64FD14; /* Opacity filled */ --wot-opacfilled-tooltip-toast-cover: #000000BF; --wot-opacfilled-main-cover: #0000008C; --wot-opacfilled-light-cover: #0000004D; /* Picker view mask */ --wot-picker-view-mask-start-color: #FFFFFFD9; --wot-picker-view-mask-end-color: #FFFFFF33; /* Classify application */ --wot-classifyapplication-yellow-background: #FFFAF1FF; --wot-classifyapplication-yellow-border: #FDD78CFF; --wot-classifyapplication-yellow-content: #FAAD14FF; --wot-classifyapplication-Cyan-background: #F4FBFDFF; --wot-classifyapplication-Cyan-border: #BDEAF1FF; --wot-classifyapplication-Cyan-content: #22B8CFFF; --wot-classifyapplication-Purple-background: #F9F8FFFF; --wot-classifyapplication-Purple-border: #D0BFFFFF; --wot-classifyapplication-Purple-content: #8059F3FF; --wot-classifyapplication-Grape-background: #FBF6FDFF; --wot-classifyapplication-Grape-border: #EEBEFAFF; --wot-classifyapplication-Grape-content: #AE3EC9FF; --wot-classifyapplication-Pink-background: #FFF0F6FF; --wot-classifyapplication-Pink-border: #FCC2D7FF; --wot-classifyapplication-Pink-content: #FF357CFF; } page, .wot-theme-{主题名}, .wot-theme-{主题名} .wd-root-portal { @include {主题名}-theme-vars(); } ``` ## 输出检查清单 - [ ] 主题文件位于 `src/themes/styles/{主题名}.scss` - [ ] 文件包含一个 `@mixin {主题名}-theme-vars` - [ ] 文件内完成 `page`、`.wot-theme-{主题名}`、`.wot-theme-{主题名} .wd-root-portal` 挂载 - [ ] 包含主色、功能色、文字、图标、边框、填充、分割线、反馈、透明填充、Picker View 遮罩、分类色全部变量 - [ ] 所有值都是固定色值或 `transparent` - [ ] `App.vue` 中若接入，只追加 `@use './themes/styles/{主题名}.scss' as {主题名};` - [ ] mixin 调用形式为 `@include {主题名}-theme-vars();` ## 回答与实现规则 - 用户未明确要求接入时，不要主动改 `App.vue` - 用户未明确要求时，不要顺手生成 dark 主题、变量映射层或额外目录结构 - 生成代码时优先保持最小改动，不破坏现有主题文件顺序、选择器范围和项目风格 - 如果发现项目里已有不同主题体系，先说明差异，再确认是否仍按本单文件结构落地