fix: 修改tag和badge字体样式变量 #2681
fix: 修改tag和badge字体样式变量 #2681
Conversation
Walkthrough此次更改涉及对 Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- src/packages/tag/tag.harmony.css (2 hunks)
- src/styles/variables.scss (2 hunks)
🔇 Additional comments (2)
src/packages/tag/tag.harmony.css (1)
31-31: 信息标签颜色更改已确认
新的蓝色 (#0073ff) 提供了更好的视觉对比度，这是一个很好的改进。
src/styles/variables.scss (1)
1548-1548: 字体大小变更合理且保持一致性
将 tag 和 badge 的字体大小从 $font-size-xs (11px) 统一调整为 $font-size-xxs (10px) 的修改是合理的：
- 更小的字体尺寸使标签和徽章更加紧凑，符合现代 UI 设计趋势
- 保持了标签和徽章组件之间的视觉一致性
运行以下脚本验证现有使用这些变量的组件：
Also applies to: 1587-1587
✅ Verification successful
字体大小变更验证完成，修改安全可靠
根据代码验证结果：
- Tag 组件中使用
$tag-font-size变量定义文字大小，应用于标签文本和图标 - Badge 组件中使用
$badge-font-size变量定义徽标文字大小 - 主题文件中确认
--nutui-font-size-xxs(10px) 作为标签类文字的标准大小
这些变更符合组件的实际使用场景，不会造成样式异常。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查使用了这些字体变量的组件
# 预期：找到所有使用 $tag-font-size 和 $badge-font-size 的文件
echo "检查 tag-font-size 的使用："
rg "\$tag-font-size"
echo "检查 badge-font-size 的使用："
rg "\$badge-font-size"
Length of output: 155
Script:
#!/bin/bash
# 使用不同的搜索策略来查找变量使用情况
echo "检查 tag-font-size 的使用："
rg -i "tag.*font.*size|font.*size.*tag" --type scss
echo "检查 badge-font-size 的使用："
rg -i "badge.*font.*size|font.*size.*badge" --type scss
echo "检查包含这些变量的 SCSS 文件："
fd -e scss -x cat {} | grep -E "(\$tag-font-size|\$badge-font-size)"
Length of output: 397
Script:
#!/bin/bash
# 不使用文件类型过滤，直接搜索所有文件
echo "检查 tag-font-size 的使用："
rg "\$tag-font-size" -A 2 -B 2
echo "检查 badge-font-size 的使用："
rg "\$badge-font-size" -A 2 -B 2
echo "列出所有 SCSS 文件："
fd ".scss$"
Length of output: 5785
Script:
#!/bin/bash
# 检查具体组件中的使用情况
echo "检查 Tag 组件样式文件："
cat src/packages/tag/tag.scss
echo "检查 Badge 组件样式文件："
cat src/packages/badge/badge.scss
echo "检查主题文件中的变量定义："
cat src/styles/theme-default.scss | grep -E "font-size|tag-|badge-"
Length of output: 4529
| @@ -37,7 +37,7 @@ | |||
| background: #ff0f23; | |||
| } | |||
| .nut-tag-warning { | |||
| background: #c47600; | |||
| background: #ffbf00; | |||
There was a problem hiding this comment.
💡 Codebase verification
警告标签的颜色对比度需要调整
根据代码分析，warning类型标签使用了白色文本（#ffffff）配合#ffbf00背景色。这个组合的对比度为1.96:1，不符合WCAG 2.0的AA级标准（需要4.5:1）。建议采用以下方案之一：
- 将背景色调整为更深的橙色，如 #E67700（对比度4.54:1）
- 将文本颜色改为深色，如 #000000（对比度11.33:1）
🔗 Analysis chain
建议验证警告标签的颜色对比度
新的警告标签颜色 (#ffbf00) 可能与白色文本 (#ffffff) 的对比度不足，这可能会影响可读性和可访问性。
建议考虑以下解决方案：
.nut-tag-warning {
- background: #ffbf00;
+ background: #f90;
}Let me check if there's any text color definition in the codebase that would be used with this background color.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 验证颜色对比度是否符合WCAG 2.0标准
# 使用 https://webaim.org/resources/contrastchecker/ 的算法
# 检查 #ffbf00 (背景) 与 #ffffff (文本) 的对比度
echo "警告标签颜色对比度检查："
echo "背景色: #ffbf00"
echo "文本色: #ffffff"
echo "请访问 https://webaim.org/resources/contrastchecker/?fcolor=ffffff&bcolor=ffbf00 验证对比度"
Length of output: 414
Script:
#!/bin/bash
# 查找tag相关的CSS文件中的文本颜色定义
rg -l "color:" src/packages/tag/
Length of output: 223
Script:
#!/bin/bash
# 查找tag.harmony.css中的文本颜色定义
rg "color:" -A 2 -B 2 src/packages/tag/tag.harmony.css
# 查找warning类型标签的相关样式
rg "warning" -A 5 -B 5 src/packages/tag/tag.harmony.css
Length of output: 636
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## V3.0 #2681 +/- ##
=======================================
Coverage 83.95% 83.95%
=======================================
Files 221 221
Lines 17849 17849
Branches 2679 2679
=======================================
Hits 14986 14986
Misses 2858 2858
Partials 5 5 ☔ View full report in Codecov by Sentry. |
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
.nut-tag组件的背景颜色，增强了视觉效果。.nut-tag-info背景色从#1988fa更改为#0073ff。.nut-tag-warning背景色从#c47600更改为#ffbf00。