fix: 修订主题变量 #2911
fix: 修订主题变量 #2911
Conversation
变更概览演练这个拉取请求主要修改了 变更
可能相关的 PR
建议标签
建议审阅者
诗歌
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #2911 +/- ##
==========================================
Coverage 85.97% 85.97%
==========================================
Files 277 277
Lines 18692 18692
Branches 2769 2769
==========================================
Hits 16070 16070
Misses 2617 2617
Partials 5 5 ☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (7)
src/packages/configprovider/types.ts (5)
26-29: 细化成功色彩层次
新增更细分的成功色变量（light、background、text），有利于在不同组件场景中丰富样式。可在文档中明确每个变量的典型用法。
40-40: 危险色文本
“nutuiColorDangerText” 传递强烈警示信息，建议在文档或示例中强调其用途。
44-48: 检测拼写错误
“nutuiColorMaskFaultToleran” 可能存在拼写问题，建议改为 “nutuiColorMaskFaultTolerant” 或与设计文档对齐，避免歧义。- | 'nutuiColorMaskFaultToleran' + | 'nutuiColorMaskFaultTolerant'
274-274: 新增灰度层级
“nutuiGray7” 帮助进一步丰富灰度层级，注意与现有灰度变量区分度，避免过多近似值。
854-854: 补充黑色系
“nutuiBlack3” 与 “nutuiBlack7” 搭配使用能完善深色变量体系，但需规划好在不同场景下的对应关系。src/styles/variables.scss (2)
94-94: 危险色文本
$color-danger-text便于在成功色或警告色之外呈现更加明显的危险提示。
115-118: 拼写检查
$color-mask-fault-toleran可能存在拼写或命名不完整问题，建议改为$color-mask-fault-tolerant以保证可读性和一致性。-$color-mask-fault-toleran: var( - --nutui-color-mask-fault-toleran, - rgba(0, 0, 0, 0.02) -) !default; +$color-mask-fault-tolerant: var( + --nutui-color-mask-fault-tolerant, + rgba(0, 0, 0, 0.02) +) !default;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/packages/configprovider/types.ts(7 hunks)src/styles/variables.scss(2 hunks)
🔇 Additional comments (28)
src/packages/configprovider/types.ts (10)
2-8: 确保命名与使用场景一致
这些新增的主题变量与 Primary 色系相关，命名统一且易于理解。请注意检查 “nutuiColorPrimaryDisabledSpecial” 等命名是否与使用场景相符，避免歧义。
23-24: 新增成功色系
新增了 “nutuiColorSuccess” 与 “nutuiColorSuccessPressed”，与其他色系保持统一的前缀和命名方式，便于维护。
30-34: 警告色系命名规范
为警告色添加可按压、禁用、浅色背景等多个状态变量，命名规范清晰，后续若新增更多状态可继续沿用此模式。
35-35: 新增危险色
添加 “nutuiColorDanger” 以统一管理错误或危险提示场景，增强主题一致性。
38-38: 危险色浅色背景
“nutuiColorDangerLight” 便于在浅色背景下呈现轻量级的提示，场景更灵活。
41-42: 扩展背景变量
新增 “nutuiColorBackground” 与 “nutuiColorBackgroundOverlay”，能更好地区分普通背景与叠层背景，提升可维护性。
49-54: 完善文本色系
新增标题、正文、帮助、禁用、深色及链接文本变量，极大增强了主题的灵活度与可扩展性。
186-186: 新增黑色系变量
“nutuiBlack7” 在深色或辅助色场景中更具层次感，建议在设计文档中说明使用范围。是否需要在文档内提供更多示例以说明此变量的适用场景？
199-199: 新增白色系变量
“nutuiWhite12” 可在暗色背景下提供更高透明度的前景色，建议在深色模式场景中验证可读性。
727-727: 最低灰度变量
“nutuiGray1” 一般代表极浅灰度，可用作背景或分隔线，运用时需评估对比度。src/styles/variables.scss (18)
3-11: 替换品牌色为标准变量
$color-primary改为var(--nutui-color-primary, #ff0f23)，与新版命名保持一致，可在后续文档中补充说明该主色的典型用法。
12-15: 添加浅按压状态色
$color-primary-light-pressed为轻量化按压态或悬浮态提供了额外选择，适用于较柔和的交互效果。
49-53: 更新成功色定制
使用统一布局，如$color-success、$color-success-pressed，在视觉上更具一致性，也更方便后续扩展。
55-58: 成功色浅色背景
$color-success-light能使成功提示在浅色背景下更柔和，适任提示组件的局部高亮。
59-63: 成功色文本
$color-success-text帮助快速识别成功状态下的文字信息，可在文档示例中补充用法。
66-70: 警告色命名调整
$color-warning和$color-warning-pressed均使用新命名，更易于记忆维护。
72-75: 浅色警告色补充
$color-warning-light等变量可让警告信息在多种场景下具备一致的色彩风格，减少手动定义色值。
76-80: 警告色文本变量
$color-warning-text进一步拆分警告文本色，能有效增强主题细化程度。
83-84: 危险色变量切换
$color-danger与$color-danger-pressed全面转用新命名，利于跨组件统一管理。
89-89: 危险色浅色背景
$color-danger-light在浅色场景中仍能保持适度可视性，用途更灵活。
90-93: 危险色背景
$color-danger-background专注深色背景场景，防止警示信息在复杂环境中失焦。
97-97: 全局背景设置
$color-background改用 #f2f3f5，更适合现代浅色风格，减少阅读疲劳。
99-102: 覆盖层背景
$color-background-overlay适用于卡片内层或悬浮层背景，进一步强化内容分层。
106-106: 卡片内嵌背景
默认 #f7f8fc 色调更浅，适配浅背景下的信息呈现。
111-111: 全局蒙层
$color-mask采用透明度为 0.7 的黑色，适合弹窗或交互遮罩，用户注意力集中效果佳。
113-113: 局部蒙层
$color-mask-part透明度为 0.4，更轻薄，适合局部遮罩或弱化背景时使用。
121-122: 边框色配置
修改$color-border和$color-border-disabled可统一组件的边框视觉效果，减少维护成本。
125-133: 文本色层级覆盖
标题、正文、帮助、禁用、深色与链接等文本变量更加细化，建议与设计师核对每种文本场景的对应关系，确保全局一致性。
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
nutuiColorPrimary、nutuiColorSuccess、nutuiColorWarning等样式更新
重构