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

Closed
opened 2026-05-01 03:53:22 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/7066
Author: @HadiAyache
Created: 2/24/2026
Status: Closed

Base: masterHead: fix-7029-midnight-create-payee-contrast


📝 Commits (3)

  • ce7b099 fix: improve midnight create-payee highlight contrast
  • d3c19f6 test: use vitest globals in midnight contrast test
  • b433d78 chore: add PR-specific release note 7066

📊 Changes

4 files changed (+58 additions, -1 deletions)

View changed files

packages/desktop-client/src/style/themes/midnight.test.ts (+45 -0)
📝 packages/desktop-client/src/style/themes/midnight.ts (+1 -1)
upcoming-release-notes/7029.md (+6 -0)
upcoming-release-notes/7066.md (+6 -0)

📄 Description

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%

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/actualbudget/actual/pull/7066 **Author:** [@HadiAyache](https://github.com/HadiAyache) **Created:** 2/24/2026 **Status:** ❌ Closed **Base:** `master` ← **Head:** `fix-7029-midnight-create-payee-contrast` --- ### 📝 Commits (3) - [`ce7b099`](https://github.com/actualbudget/actual/commit/ce7b0996a033aa5e65c0f51a0cc3a7e7837ba071) fix: improve midnight create-payee highlight contrast - [`d3c19f6`](https://github.com/actualbudget/actual/commit/d3c19f65f9f0fe04eae1a991f2ae24277c2f77ab) test: use vitest globals in midnight contrast test - [`b433d78`](https://github.com/actualbudget/actual/commit/b433d78a8a7d42e87395bbdc399536c23312cb8f) chore: add PR-specific release note 7066 ### 📊 Changes **4 files changed** (+58 additions, -1 deletions) <details> <summary>View changed files</summary> ➕ `packages/desktop-client/src/style/themes/midnight.test.ts` (+45 -0) 📝 `packages/desktop-client/src/style/themes/midnight.ts` (+1 -1) ➕ `upcoming-release-notes/7029.md` (+6 -0) ➕ `upcoming-release-notes/7066.md` (+6 -0) </details> ### 📄 Description ## 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 ---> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-05-01 03:53:22 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#56218