feat: 完善深色模式——组件 token 化、移除 cssVar 死接口、主题文档 - #19
Merged
Merged
Conversation
深色基础设施（ConfigProvider algorithm:'dark'、token 体系、.dark 级联）此前已就绪， 本次补齐使其在组件、API、文档三层完整： - 组件：auto-complete / button / button-3d / color-picker / mentions / popover / tooltip / transfer / upload 的硬编码灰阶与白色表面填充改为 $ccui-* token， 深色下随主题级联；保留恒为白的元素（彩色按钮白字、滑块手柄描边、 SV/hue 渐变停靠色、alpha 棋盘格、switch 旋钮） - token：themes/light.ts + dark.ts 新增 button-info* 与 color-picker-alpha-checker （均带 light/dark 双值） - API：移除 ThemeConfig.cssVar 死接口（ccui 全程 CSS 变量驱动，该标志为 no-op） - 文档：新增「主题定制 / 深色模式」指南页（主推根元素 .dark 类切换），登记侧边栏入口 - 文档站：每个 demo 注入浅/深就地预览开关，仅切容器自身 .dark，不影响全站 appearance - 修复：tooltip / popover 原本纯硬编码、缺 style-var 引入，换 token 后真实构建报 Undefined variable，补 @use '../../style-var/index.scss' as *; Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
docs-notes 是面向贡献者的内部维护笔记（含 README.md 等非 kebab 命名）， 与 docs-notes 已是 Ant 提及 / 格式 debt 的豁免区一致，显式加入 .ls-lint.yml ignore，使命名检查跳过该目录。 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
content-background-color="#fff7e6" 钉死了浅米色底，但未设 content-color， 文字跟随主题 → 深色模式下变白，白字落在米色底上糊成一片。补一个深暖色 content-color="#874d00"，浅/深两模式均可读；说明里同步补上「钉死浅底时 须一并钉死文字色」的配对原则。 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
旧实现只 toggle demo 容器自身的 .dark，但 .dark 会从任意祖先级联。全站深色
（html.dark）时容器即便不带 .dark 也继承深色，单纯增删容器的 .dark 切不回浅色，
按钮状态也读错（恒显示 ☾）。
- generate-theme.js：darkTheme.css 在 .dark{} 外再产出对称的 .light{}（light 全集）。
CSS 自定义属性按元素就近解析，子树容器上挂 .light 即可覆盖外层 html.dark 下传值。
- demoDarkToggle.ts：改为给容器挂【显式】互斥的 .dark / .light，并以容器当前实际
渲染态（含全站继承）为基准取反，首次点击在浅/深任一全站模式下都正确翻转；
另监听 html.class 变化，跟随全站的未显式选择容器同步按钮图标。
darkTheme.css 是 gitignored 生成产物，随 postinstall/bootstrap 重生成。
pnpm docs:build 通过（exit 0，无 Undefined variable）。
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
实际意义不大，整体撤掉 Track D：
- 删 demoDarkToggle.ts 及 theme/index.ts 中的注入调用
- 删 styles/index.css 中 .ccui-demo-dark-toggle 按钮样式
- 撤 generate-theme.js 中专为该功能加的 .light{} 生成（darkTheme.css 复原为仅 .dark{}）
- 删主题文档末尾「文档站内试试开关」提示段
全站深色仍由 html.dark / ConfigProvider algorithm:'dark' 提供，组件 token 化与
主题指南页保留。pnpm docs:build 通过（exit 0）。
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
WalkthroughThis PR systematizes the ccui design token architecture by introducing shared theme tokens and migrating component stylesheets to use them, while simplifying the ConfigProvider API and documenting the complete theming system for end users. ChangesDesign System Token Adoption
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/ccui/ui/upload/src/upload.scss (1)
195-195: ⚡ Quick winAlign primary token usage in
upload.scss($ccui-primaryvs$ccui-color-primary)
packages/ccui/ui/upload/src/upload.scssuses$ccui-primaryonly here:border-color: $ccui-primary;(line 195), while the rest of the file consistently uses$ccui-color-primary*.$ccui-primaryis also used across other components, and neither token is defined within this repo (tokens likely come from@vaebe/ccui-theme). If$ccui-primaryis intended to match$ccui-color-primary, replace line 195 to keep token naming consistent withinupload.scss.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/ccui/ui/upload/src/upload.scss` at line 195, The border-color declaration in upload.scss uses the inconsistent token $ccui-primary; update it to the consistent token family used elsewhere in this file by replacing that occurrence with $ccui-color-primary so the border-color property aligns with the other $ccui-color-primary* tokens (locate the border-color: $ccui-primary; line in packages/ccui/ui/upload/src/upload.scss and change the token).
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@packages/ccui/ui/upload/src/upload.scss`:
- Line 195: The border-color declaration in upload.scss uses the inconsistent
token $ccui-primary; update it to the consistent token family used elsewhere in
this file by replacing that occurrence with $ccui-color-primary so the
border-color property aligns with the other $ccui-color-primary* tokens (locate
the border-color: $ccui-primary; line in packages/ccui/ui/upload/src/upload.scss
and change the token).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: de546481-fcbf-426b-a86f-b2b7bb1c8e0f
📒 Files selected for processing (17)
.ls-lint.ymlpackages/ccui/ui/auto-complete/src/auto-complete.scsspackages/ccui/ui/button-3d/src/button-3d.scsspackages/ccui/ui/button/src/button.scsspackages/ccui/ui/color-picker/src/color-picker.scsspackages/ccui/ui/config-provider/src/config-provider-types.tspackages/ccui/ui/mentions/src/mentions.scsspackages/ccui/ui/popover/src/popover.scsspackages/ccui/ui/tooltip/src/tooltip.scsspackages/ccui/ui/transfer/src/transfer.scsspackages/ccui/ui/upload/src/upload.scsspackages/cli/templates/vitepress-sidebar.jspackages/docs/components/config-provider/index.mdpackages/docs/components/divider/index.mdpackages/docs/components/theme/index.mdpackages/theme/themes/dark.tspackages/theme/themes/light.ts
💤 Files with no reviewable changes (1)
- packages/ccui/ui/config-provider/src/config-provider-types.ts
This was referenced Jun 8, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
正文
深色基础设施（ConfigProvider algorithm:'dark'、token 体系、.dark 级联）此前已就绪，本次补齐组件、API、文档三层。
改动
$ccui-*token，深色下随主题级联；保留恒为白的元素（彩色按钮白字、滑块手柄描边、渐变停靠色、alpha 棋盘格、switch 旋钮）themes/light.ts+dark.ts新增button-info*与color-picker-alpha-checker（均带 light/dark 双值）ThemeConfig.cssVar死接口（ccui 全程 CSS 变量驱动，该标志为 no-op）.dark类切换）.ls-lint.yml忽略docs-notes目录（内部笔记不受 kebab-case 约束）验证
cd packages/ccui && pnpm test→ 对基线零增减pnpm docs:build→ exit 0，无Undefined variableSummary by CodeRabbit
Documentation
Style
Refactor
ThemeConfigAPI by removing thecssVaroption; now supports onlytokenandalgorithm.