Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: 修改tag和badge字体样式变量 #2681

Merged
merged 4 commits into from
Oct 31, 2024
Merged

fix: 修改tag和badge字体样式变量 #2681

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
86cb179
fix(tag): 解决taro-h5图文demo不展示图标问题+harmonycpp适配问题修改
irisSong Oct 29, 2024
9d07daf
fix: 修改 tag 标签字体为10px
irisSong Oct 30, 2024
eac72af
Merge branch '3.0' into 3.0-tag
irisSong Oct 30, 2024
1de5f44
Merge branch 'V3.0' into 3.0-tag
xiaoyatong Oct 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/packages/tag/tag.harmony.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
background: #fa2c19;
}
.nut-tag-info {
background: #1988fa;
background: #0073ff;
}
.nut-tag-success {
background: #4fc08d;
Expand All @@ -37,7 +37,7 @@
background: #ff0f23;
}
.nut-tag-warning {
background: #c47600;
background: #ffbf00;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

⚠️ Potential issue

警告标签的颜色对比度需要调整

根据代码分析，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

}
.nut-tag-round {
border-radius: 8px;
Expand Down
4 changes: 2 additions & 2 deletions src/styles/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1545,7 +1545,7 @@ $timeselect-time-background: var(

//tag（✅）
$tag-padding: var(--nutui-tag-padding, 0px 2px) !default;
$tag-font-size: var(--nutui-tag-font-size, $font-size-xs) !default;
$tag-font-size: var(--nutui-tag-font-size, $font-size-xxs) !default;
$tag-border-radius: var(--nutui-tag-border-radius, 2px) !default;
$tag-height: var(--nutui-tag-height, 14px) !default;
$tag-color: var(--nutui-tag-color, #ffffff) !default;
Expand Down Expand Up @@ -1584,7 +1584,7 @@ $badge-background-color: var(
$color-primary-gradient-1
) !default;
$badge-color: var(--nutui-badge-color, #fff) !default;
$badge-font-size: var(--nutui-badge-font-size, $font-size-xs) !default;
$badge-font-size: var(--nutui-badge-font-size, $font-size-xxs) !default;
$badge-border: var(
--nutui-badge-border,
0px solid $color-primary-text
Expand Down
Loading