[PR #7066] Fix midnight theme contrast for highlighted create-payee text #6914

Closed
opened 2026-02-28 21:34:24 -06:00 by GiteaMirror · 0 comments
Owner

Original Pull Request: https://github.com/actualbudget/actual/pull/7066

State: closed
Merged: No


Summary

Fix low-contrast highlighted "Create payee" text in the midnight theme mobile autocomplete state.

Problem

In midnight theme, highlighted create-payee text was barely legible when selected on mobile due to poor foreground/background contrast.

Repro

  • Open payee autocomplete on mobile layout in midnight theme
  • Highlight the create-payee option
  • Text contrast is too low to read clearly

Test (failing first)

Added regression test in packages/desktop-client/src/style/themes/midnight.test.ts:

  • keeps highlighted create-payee text readable on its hover background

Pre-fix this test fails with contrast ratio ~1.347 (< 4.5).

Fix

Updated menuAutoCompleteTextHover in packages/desktop-client/src/style/themes/midnight.ts:

  • colorPalette.green900 -> colorPalette.green200

No behavior logic changed; only the affected theme token for this highlighted state.

Validation

  • corepack yarn workspace @actual-app/web test src/style/themes/midnight.test.ts
  • corepack yarn workspace @actual-app/web test src/components/autocomplete/PayeeAutocomplete.test.tsx src/style/themes/midnight.test.ts
  • corepack yarn oxlint packages/desktop-client/src/style/themes/midnight.ts packages/desktop-client/src/style/themes/midnight.test.ts

Closes #7029


Bundle Stats

Bundle Files count Total bundle size % Changed
desktop-client 27 14.85 MB 0%
loot-core 1 5.82 MB 0%
api 1 4.43 MB 0%
View detailed bundle stats

desktop-client

Total

Files count Total bundle size % Changed
27 14.85 MB 0%
View detailed bundle breakdown

Added
No assets were added

Removed
No assets were removed

Bigger
No assets were bigger

Smaller
No assets were smaller

Unchanged

Asset File Size % Changed
static/js/index.js 9.54 MB 0%
static/js/indexeddb-main-thread-worker-e59fee74.js 12.94 kB 0%
static/js/workbox-window.prod.es5.js 5.64 kB 0%
static/js/ca.js 188.15 kB 0%
static/js/da.js 106.35 kB 0%
static/js/de.js 180.07 kB 0%
static/js/en-GB.js 7.18 kB 0%
static/js/en.js 170.37 kB 0%
static/js/es.js 174.55 kB 0%
static/js/fr.js 179.6 kB 0%
static/js/it.js 171.16 kB 0%
static/js/nb-NO.js 156.96 kB 0%
static/js/nl.js 106.37 kB 0%
static/js/pl.js 88.37 kB 0%
static/js/pt-BR.js 154.22 kB 0%
static/js/th.js 181.87 kB 0%
static/js/uk.js 214.74 kB 0%
static/js/resize-observer.js 18.37 kB 0%
static/js/BackgroundImage.js 120.54 kB 0%
static/js/ReportRouter.js 1.16 MB 0%
static/js/narrow.js 637.68 kB 0%
static/js/TransactionList.js 106.22 kB 0%
static/js/wide.js 164.15 kB 0%
static/js/AppliedFilters.js 9.71 kB 0%
static/js/usePayeeRuleCounts.js 10.04 kB 0%
static/js/useTransactionBatchActions.js 13.23 kB 0%
static/js/FormulaEditor.js 1.04 MB 0%

loot-core

Total

Files count Total bundle size % Changed
1 5.82 MB 0%
View detailed bundle breakdown

Added
No assets were added

Removed
No assets were removed

Bigger
No assets were bigger

Smaller
No assets were smaller

Unchanged

Asset File Size % Changed
kcab.worker.BwrdDDMW.js 5.82 MB 0%

api

Total

Files count Total bundle size % Changed
1 4.43 MB 0%
View detailed bundle breakdown

Added
No assets were added

Removed
No assets were removed

Bigger
No assets were bigger

Smaller
No assets were smaller

Unchanged

Asset File Size % Changed
bundle.api.js 4.43 MB 0%
**Original Pull Request:** https://github.com/actualbudget/actual/pull/7066 **State:** closed **Merged:** No --- ## Summary Fix low-contrast highlighted "Create payee" text in the midnight theme mobile autocomplete state. ## Problem In midnight theme, highlighted create-payee text was barely legible when selected on mobile due to poor foreground/background contrast. ## Repro - Open payee autocomplete on mobile layout in midnight theme - Highlight the create-payee option - Text contrast is too low to read clearly ## Test (failing first) Added regression test in `packages/desktop-client/src/style/themes/midnight.test.ts`: - `keeps highlighted create-payee text readable on its hover background` Pre-fix this test fails with contrast ratio ~1.347 (< 4.5). ## Fix Updated `menuAutoCompleteTextHover` in `packages/desktop-client/src/style/themes/midnight.ts`: - `colorPalette.green900` -> `colorPalette.green200` No behavior logic changed; only the affected theme token for this highlighted state. ## Validation - `corepack yarn workspace @actual-app/web test src/style/themes/midnight.test.ts` - `corepack yarn workspace @actual-app/web test src/components/autocomplete/PayeeAutocomplete.test.tsx src/style/themes/midnight.test.ts` - `corepack yarn oxlint packages/desktop-client/src/style/themes/midnight.ts packages/desktop-client/src/style/themes/midnight.test.ts` Closes #7029 <!--- actual-bot-sections ---> <hr /> <!--- bundlestats-action-comment key:combined start ---> ### Bundle Stats Bundle | Files count | Total bundle size | % Changed ------ | ----------- | ----------------- | --------- desktop-client | 27 | 14.85 MB | 0% loot-core | 1 | 5.82 MB | 0% api | 1 | 4.43 MB | 0% <details> <summary>View detailed bundle stats</summary> #### desktop-client **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 27 | 14.85 MB | 0% <details> <summary>View detailed bundle breakdown</summary> <div> **Added** No assets were added **Removed** No assets were removed **Bigger** No assets were bigger **Smaller** No assets were smaller **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- static/js/index.js | 9.54 MB | 0% static/js/indexeddb-main-thread-worker-e59fee74.js | 12.94 kB | 0% static/js/workbox-window.prod.es5.js | 5.64 kB | 0% static/js/ca.js | 188.15 kB | 0% static/js/da.js | 106.35 kB | 0% static/js/de.js | 180.07 kB | 0% static/js/en-GB.js | 7.18 kB | 0% static/js/en.js | 170.37 kB | 0% static/js/es.js | 174.55 kB | 0% static/js/fr.js | 179.6 kB | 0% static/js/it.js | 171.16 kB | 0% static/js/nb-NO.js | 156.96 kB | 0% static/js/nl.js | 106.37 kB | 0% static/js/pl.js | 88.37 kB | 0% static/js/pt-BR.js | 154.22 kB | 0% static/js/th.js | 181.87 kB | 0% static/js/uk.js | 214.74 kB | 0% static/js/resize-observer.js | 18.37 kB | 0% static/js/BackgroundImage.js | 120.54 kB | 0% static/js/ReportRouter.js | 1.16 MB | 0% static/js/narrow.js | 637.68 kB | 0% static/js/TransactionList.js | 106.22 kB | 0% static/js/wide.js | 164.15 kB | 0% static/js/AppliedFilters.js | 9.71 kB | 0% static/js/usePayeeRuleCounts.js | 10.04 kB | 0% static/js/useTransactionBatchActions.js | 13.23 kB | 0% static/js/FormulaEditor.js | 1.04 MB | 0% </div> </details> --- #### loot-core **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 1 | 5.82 MB | 0% <details> <summary>View detailed bundle breakdown</summary> <div> **Added** No assets were added **Removed** No assets were removed **Bigger** No assets were bigger **Smaller** No assets were smaller **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- kcab.worker.BwrdDDMW.js | 5.82 MB | 0% </div> </details> --- #### api **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 1 | 4.43 MB | 0% <details> <summary>View detailed bundle breakdown</summary> <div> **Added** No assets were added **Removed** No assets were removed **Bigger** No assets were bigger **Smaller** No assets were smaller **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- bundle.api.js | 4.43 MB | 0% </div> </details> </details> <!--- bundlestats-action-comment key:combined end --->
GiteaMirror added the pull-request label 2026-02-28 21:34:24 -06:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#6914