refactor: 重构和简化 design token#1673
Draft
Seeridia wants to merge 4 commits into
Draft
Conversation
|
commit: |
Collaborator
【预览链接】
|
Contributor
There was a problem hiding this comment.
Pull request overview
该 PR 主要在 cherry-markdown 的 Sass 体系中重构/简化 design tokens：引入更清晰的“新语义命名层”，把部分组件变量拆分到独立文件，并将大量 @import 迁移到 Sass module 体系（@forward + sass:meta.load-css），同时更新各主题对新语义变量的覆盖方式。
Changes:
- 在
variables/semantic.scss中新增“新语义命名层”token，并提供部分旧变量兼容映射 - 将 table/accordion/panel/shortcut-panel 等组件变量拆分到
variables/components/*并统一转发 - 将样式入口与主题/Prism 引入方式从
@import迁移到@forward+meta.load-css，并调整 Rollup 样式构建方式
Reviewed changes
Copilot reviewed 26 out of 26 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/cherry-markdown/src/sass/variables/semantic.scss | 新增新语义 token 层 + 旧变量兼容映射，并替换多处引用到新 token |
| packages/cherry-markdown/src/sass/variables/index.scss | 使用 @forward 统一导出 base/semantic/open-color 与组件变量集合 |
| packages/cherry-markdown/src/sass/variables/base.scss | 新增 --radius-xs 等基础 token |
| packages/cherry-markdown/src/sass/variables/components/index.scss | 聚合转发组件级变量文件 |
| packages/cherry-markdown/src/sass/variables/components/table.scss | 新增 table 相关变量定义 |
| packages/cherry-markdown/src/sass/variables/components/accordion.scss | 新增 accordion 相关变量定义（从 semantic 中拆出） |
| packages/cherry-markdown/src/sass/variables/components/panel.scss | 新增 panel 语义变量定义（支撑新的 panel token 结构） |
| packages/cherry-markdown/src/sass/variables/components/shortcut-panel.scss | 新增快捷键面板相关变量定义（从组件样式中拆出） |
| packages/cherry-markdown/src/sass/themes/index.scss | 以 @forward 聚合各主题文件 |
| packages/cherry-markdown/src/sass/themes/default.scss | 主题改为覆盖新语义变量，并保留旧变量别名 |
| packages/cherry-markdown/src/sass/themes/dark.scss | 同上：覆盖新语义变量 + 旧变量别名；同步更新部分 token 使用 |
| packages/cherry-markdown/src/sass/themes/abyss.scss | 同上：覆盖新语义变量 + 旧变量别名；同步更新注释/命名 |
| packages/cherry-markdown/src/sass/themes/green.scss | 同上：覆盖新语义变量 + 旧变量别名；补充 TOC/Accordion 变量块 |
| packages/cherry-markdown/src/sass/themes/red.scss | 同上：覆盖新语义变量 + 旧变量别名；补充 TOC/Accordion 变量块 |
| packages/cherry-markdown/src/sass/themes/gray.scss | 同上：覆盖新语义变量 + 旧变量别名；整理变量分区 |
| packages/cherry-markdown/src/sass/themes/violet.scss | 同上：覆盖新语义变量 + 旧变量别名；补充 TOC/Accordion 变量块 |
| packages/cherry-markdown/src/sass/themes/blue.scss | 同上：覆盖新语义变量 + 旧变量别名；补充 TOC/Accordion 变量块与 panel token 结构 |
| packages/cherry-markdown/src/sass/index.scss | 样式入口改用 meta.load-css 引入 cherry 样式 |
| packages/cherry-markdown/src/sass/cherry.scss | 用 meta.load-css 统一加载各子样式，并将多处旧 token 引用替换为新 token |
| packages/cherry-markdown/src/sass/markdown.scss | 使用新语义背景/边框/文字 token；Prism 引入改用 meta.load-css；panel token 结构重构 |
| packages/cherry-markdown/src/sass/markdown_pure.scss | 纯 markdown 入口改用 meta.load-css 引入 variables/markdown/themes 聚合 |
| packages/cherry-markdown/src/sass/previewer.scss | 多处 token 引用替换为新语义 token；图片工具气泡样式由 @extend 改为显式声明 |
| packages/cherry-markdown/src/sass/components/shortcut_key_config.scss | 移除变量定义（改由 variables/components/shortcut-panel 提供）；更新 hover/active token |
| packages/cherry-markdown/src/sass/codemirror-v6-fixes.scss | gutter 样式改用新语义边框/背景 token |
| packages/cherry-markdown/src/sass/bubble_formula.scss | 多处边框/文字/背景 token 更新为新语义 token |
| packages/cherry-markdown/build/rollup.styles.config.js | 样式构建改为自定义 Sass 编译并输出 asset（替代 rollup-plugin-scss 用法） |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+39
to
+40
| --color-brand-primary: var(--primary-color); | ||
| --color-brand-primary-hover: var(--color-primary-hover); |
There was a problem hiding this comment.
--color-brand-primary-hover is set up as a new semantic token (and is overridden per-theme), but hover behaviors in this variables layer are still driven by --color-primary-hover/--color-link-hover, which currently resolve to --primary-color (non-hover). As a result, theme-specific hover colors won’t propagate to things like link hover (via --color-text-link-hover). Consider making --color-link-hover / --color-primary-hover derive from --color-brand-primary-hover (or removing the extra indirection) so theme overrides are actually consumed.
|
|
||
| --accordion-summary-bg: var(--primary-color); | ||
| --accordion-summary-color: var(--oc-white); | ||
| --accordion-summary-hover-bg: var(--color-primary-hover); |
There was a problem hiding this comment.
--accordion-summary-hover-bg is wired to --color-primary-hover, but that token isn’t overridden by the themes in this PR (themes override --color-brand-primary-hover instead). This means accordion hover colors won’t follow the theme’s intended hover color. Prefer referencing --color-brand-primary-hover here, or update the semantic mapping so --color-primary-hover always tracks the theme hover token.
Suggested change
| --accordion-summary-hover-bg: var(--color-primary-hover); | |
| --accordion-summary-hover-bg: var(--color-brand-primary-hover); |
Contributor
|
Size Change: -4.32 kB (-0.06%) Total Size: 7.83 MB 📦 View Changed
ℹ️ View Unchanged
|
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 34 out of 34 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+48
to
+52
| buildStart() { | ||
| if (watch) { | ||
| const files = Array.isArray(watch) ? watch : [watch]; | ||
| files.forEach((file) => this.addWatchFile(file)); | ||
| } |
There was a problem hiding this comment.
createSassAssetPlugin only registers the optional watch list, but it doesn’t add watch entries for the actual Sass dependency graph (partials loaded via @use/@forward/meta.load-css). In rollup --watch, edits to imported SCSS may not trigger a rebuild unless they’re manually listed. Consider collecting dependencies from the Sass compile result (e.g., loaded URLs/files) and calling this.addWatchFile for each of them (or expanding the provided watch to all .scss files).
Open
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
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.
Draft
正在推进 design token 的简化和整理