Skip to content

fix(button): pick the label colour from the fill's luminance (issue #1232) - #1247

Open
lnuxe wants to merge 4 commits into
Tencent:developfrom
lnuxe:fix/button-brand-contrast
Open

lnuxe wants to merge 4 commits into
Tencent:developfrom
lnuxe:fix/button-brand-contrast

Conversation

@lnuxe

@lnuxe lnuxe commented Nov 13, 2026 •

Copy link
Copy Markdown
Contributor

🤔 这个 PR 的性质是?

  • 日常 bug 修复

🔗 相关 Issue

fix #1232

📝 描述

填充按钮的文字颜色固定取 textColorAnti(白),不看填充色是什么:

case TButtonColorPreset.primary:
  bg = tTheme.brandColor;
  fg = tTheme.textColorAnti;

主题生成器提供浅色主色,它的黄色预设是 #f3b814,白字在上面只有 1.8:1,远低于 WCAG 正文要求的 4.5:1。

改成按填充色的相对亮度在深/浅文字之间选。默认主色 #0052d9 是深色,仍然用白字,默认主题下行为不变。

主题 主色 白字对比度 修复后
默认浅色 #0052d9 6.54:1 白字(不变)
默认深色 #4582e6 3.76:1 白字(不变)
生成器黄色浅色 #f3b814 1.80:1 深色文字
生成器黄色深色 #d8a100 2.33:1 深色文字

danger 预设同样处理。

✅ 验证

无修复时测试失败:

浅色主色上主按钮文字不用白色 [E]
  Test failed.

有修复时测试通过:

00:00 +2: All tests passed!

回归:

button: 00:18 +263: All tests passed!

📦 改动文件

  • tdesign-component/lib/src/components/button/t_button_resolve.dart (+13 -2)
  • tdesign-component/test/components/button/t_button_brand_contrast_test.dart (+61)

🚨 注意事项

TThemeBuilder 里的 onPrimary: t.textColorAnti 是同一类问题(Material 侧),这个 PR 只改 TButton。需要的话可以另开一个。


🔧 追加:CI 修复

第一次提交后 CI 的 Analyze 和 Tests / tooling 挂了,两个都是真实问题:

  1. all component and tooling test files have a CI execution path 失败 —— 仓库有个守卫要求 test/ 下每个 *_test.dart 都必须在 component_test_manifest.dart 里注册。新加的测试文件漏注册了,已补上。

  2. flutter analyze 报 unnecessary_import —— 测试文件里 package:flutter/material.dart 是多余的,tdesign_flutter 已经全部 re-export。已删掉。

本地验证:

flutter analyze --no-pub            → No issues found!
flutter test test/components/button/ → 263 tests passed
flutter test test/tool/              → 11 tests passed
dart run tool/check_component_coverage.dart switch
  → switch production LH/LF = 417/434 = 96.08%

Build / Android 的 Gradle 8.14.0 < 9.3.1 报错是仓库环境问题(Flutter latest 的 gradle plugin 要求),与本 PR 无关,#1245 里有同样的修复尝试。

The label on a filled button was always textColorAnti (white), whatever the
fill was. The theme generator ships light brands - its yellow preset is
#f3b814 - and white on that is 1.8:1, well under the 4.5:1 WCAG minimum for
normal text.

Choose between the theme's dark and light label colours by the fill's
relative luminance instead. The default brand #0052d9 is dark, so it keeps
white and nothing changes for the default theme.

Verified:
- new test fails on the previous implementation
  (浅色主色上主按钮文字不用白色)
- new test passes with the fix
- button: 263 tests pass

fix Tencent#1232
@github-actions

github-actions Bot commented Nov 13, 2026 •

Copy link
Copy Markdown
Contributor

完成

Web Demo

APK 下载

The CI guard requires every *_test.dart under test/ to have an execution
path in component_test_manifest.dart. The new file was not registered, so
"all component and tooling test files have a CI execution path" failed.

fix Tencent#1232
flutter analyze reports unnecessary_import because tdesign_flutter
already re-exports everything the test uses, and the CI analyze job fails
on it.

fix Tencent#1232

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Theme] Label colour on brand fills ignores the brand's luminance: white on the generator's yellow preset is 1.8:1

1 participant