Skip to content

fix(Checkbox): цвет иконки checked в тёмной теме - #69

Merged
fabulous-unicorn merged 1 commit into
release/2.0.0from
fix/checkbox
Aug 13, 2026
Merged

fabulous-unicorn merged 1 commit into
release/2.0.0from
fix/checkbox

Conversation

@khaliulin

Copy link
Copy Markdown
Collaborator

Проблема

В тёмной теме галочка Checkbox в состоянии checked невидима — белая иконка на белом фоне:

dark токен значение
фон checkbox.root.checkedBackground → color.bg.neutral.strong.default #f0f0f1
иконка checkbox.icon.checkedColor → color.fg.on.fill.default #ffffff

Причина — semantic-роль fg.on.fill.default задана как #ffffff в обеих темах, то есть не инвертируется. Сам fill при этом инвертируется: light #2b2e33 → dark #f0f0f1. В светлой теме пара сходится (белое на тёмном), в тёмной — расходится.

Решение

checkbox.icon.checkedColor переведён на {color.fg.inverse.default} — роль «цвет поверх инвертированной поверхности», которая меняется по темам:

было стало фон под иконкой
light #ffffff #ffffff (без изменений) #2b2e33
dark #ffffff #2b2e33 #f0f0f1

Светлая тема не затрагивается: src/theme/tokens/components/light.json в диффе отсутствует.

Изменения

  • design-tokens/input/tokens.json — components.checkbox.icon.checkedColor: {color.fg.on.fill.default} → {color.fg.inverse.default}
  • src/theme/tokens/components/dark.json — #ffffff → #2b2e33 (сгенерировано)

Проверки

  • yarn tokens:check — сгенерированные токены актуальны
  • yarn jest — 48 suites, 1708 тестов, 1567 снапшотов, всё зелёное (снапшоты Checkbox снимаются в светлой теме и не изменились)
  • prettier --check по затронутым файлам — чисто
  • checkbox.icon.checkedColor используется только в Checkbox.tsx:101

За пределами правки

  • checkbox.icon.checkedHoverColor объявлен той же ролью fg.on.fill.hover и в тёмной теме тоже #ffffff. Не менялся: компонент его не использует (Checkbox.tsx:101 берёт только checkedColor), визуального дефекта сейчас нет.
  • radiobutton.icon.checkedColor объявлен той же ролью — в тёмной теме там тот же дефект. Вне рамок этого MR.
  • Роль fg.on.fill.* используется примерно в 20 местах (togglebutton, selectbutton, menu и др.). Если дефект системный, чинить стоит саму роль в источнике, а не покомпонентно — это решение владельца дизайна.

Не проверено

Визуальная проверка в тёмной теме на устройстве не проводилась — вывод сделан из значений токенов.

@khaliulin
khaliulin requested a review from a team as a code owner August 12, 2026 11:27
@khaliulin
khaliulin requested review from grevtsovna and removed request for a team August 12, 2026 11:27
@Shoshanyaka Shoshanyaka added the release:v2.0.0 Release version v2.0.0 label Aug 12, 2026
@fabulous-unicorn
fabulous-unicorn requested review from fabulous-unicorn and removed request for grevtsovna August 12, 2026 13:13
@fabulous-unicorn
fabulous-unicorn merged commit ba991e0 into release/2.0.0 Aug 13, 2026
6 checks passed
@fabulous-unicorn
fabulous-unicorn deleted the fix/checkbox branch August 13, 2026 10:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

release:v2.0.0 Release version v2.0.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants