[PR #6750] [CLOSED] Add "To Budget" color variables #13767

Closed
opened 2026-04-10 22:02:30 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/6750
Author: @Juulz
Created: 1/22/2026
Status: Closed

Base: masterHead: toBudgetPositive


📝 Commits (10+)

  • 2c79f64 Update theme colors for To Budget amount display
  • 9183d60 Update color themes for budget summary text Tracking Budget
  • 1bd0c35 Add toBudgetPositive color variable to theme
  • e58d63d Add toBudgetPositive constant for styling
  • f611a1a Add toBudgetPositive constant for positive numbers
  • 5ad0fd9 Add toBudgetPositive constant for positive numbers
  • 52bfb5a Add toBudgetPositive constant for styling
  • 41ae40b Add positive number handling in ToBudgetAmount component
  • 5d72380 Add toBudgetZero color variable to theme
  • b69ff35 Add toBudgetZero constant for zero budget state

📊 Changes

8 files changed (+32 additions, -6 deletions)

View changed files

📝 packages/component-library/src/theme.ts (+3 -0)
📝 packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx (+11 -6)
📝 packages/desktop-client/src/components/budget/tracking/budgetsummary/saved.tsx (+0 -0)
📝 packages/desktop-client/src/style/themes/dark.ts (+3 -0)
📝 packages/desktop-client/src/style/themes/development.ts (+3 -0)
📝 packages/desktop-client/src/style/themes/light.ts (+3 -0)
📝 packages/desktop-client/src/style/themes/midnight.ts (+3 -0)
upcoming-release-notes/6750.md (+6 -0)

📄 Description

Add "To Budget" color variables for both toBudgetPositive and toBudgetZero.

A good use example is when using strict zero-sum budgeting: To Budget > 0.00 can be yellow, To Budget = 0.00 can be green (or another GOAL color changeable by custom theme) and To Budget < 0.00 can be red. As the To Budget number is our touchstone, it would be great to change it's look thematically.

I did not change the default colors as set in pr #6747 (green, green, red). If you prefer yellow, green, red, I can do it before approval.

@matt-fidd 👀

Envelope Budget, with colors as defined in #6747

Screenshot 2026-01-22 112807

Example Use Case described above:

Screenshot 2026-01-22 112656

or, perhaps that purple 0.00 means GOAL!

Screenshot 2026-01-22 113230

Bundle Stats

Bundle Files count Total bundle size % Changed
desktop-client 28 14.41 MB → 14.41 MB (+524 B) +0.00%
loot-core 1 5.84 MB 0%
api 1 4.38 MB 0%
View detailed bundle stats

desktop-client

Total

Files count Total bundle size % Changed
28 14.41 MB → 14.41 MB (+524 B) +0.00%
Changeset
File Δ Size
src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx 📈 +102 B (+2.36%) 4.22 kB → 4.32 kB
src/style/themes/development.ts 📈 +86 B (+0.99%) 8.46 kB → 8.54 kB
src/style/themes/dark.ts 📈 +86 B (+0.99%) 8.49 kB → 8.57 kB
src/style/themes/light.ts 📈 +86 B (+0.98%) 8.55 kB → 8.63 kB
src/style/themes/midnight.ts 📈 +78 B (+0.94%) 8.13 kB → 8.21 kB
home/runner/work/actual/actual/packages/component-library/src/theme.ts 📈 +98 B (+0.79%) 12.18 kB → 12.27 kB
src/components/budget/tracking/budgetsummary/Saved.tsx 📉 -12 B (-0.23%) 5.06 kB → 5.05 kB
View detailed bundle breakdown

Added
No assets were added

Removed
No assets were removed

Bigger

Asset File Size % Changed
static/js/index.js 9.24 MB → 9.24 MB (+524 B) +0.01%

Smaller
No assets were smaller

Unchanged

Asset File Size % Changed
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/da.js 106.62 kB 0%
static/js/de.js 176.28 kB 0%
static/js/en-GB.js 7.18 kB 0%
static/js/en.js 159.4 kB 0%
static/js/es.js 171.98 kB 0%
static/js/fr.js 180.63 kB 0%
static/js/it.js 172.42 kB 0%
static/js/nb-NO.js 158.09 kB 0%
static/js/nl.js 103.35 kB 0%
static/js/pl.js 88.64 kB 0%
static/js/pt-BR.js 146.32 kB 0%
static/js/ru.js 106.97 kB 0%
static/js/sv.js 78.28 kB 0%
static/js/th.js 182.35 kB 0%
static/js/uk.js 216.34 kB 0%
static/js/resize-observer.js 18.37 kB 0%
static/js/BackgroundImage.js 120.54 kB 0%
static/js/ReportRouter.js 1.05 MB 0%
static/js/narrow.js 640.99 kB 0%
static/js/TransactionList.js 101.58 kB 0%
static/js/wide.js 159.96 kB 0%
static/js/AppliedFilters.js 9.71 kB 0%
static/js/usePayeeRuleCounts.js 11.79 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.84 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.BInehE-N.js 5.84 MB 0%

api

Total

Files count Total bundle size % Changed
1 4.38 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.38 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/6750 **Author:** [@Juulz](https://github.com/Juulz) **Created:** 1/22/2026 **Status:** ❌ Closed **Base:** `master` ← **Head:** `toBudgetPositive` --- ### 📝 Commits (10+) - [`2c79f64`](https://github.com/actualbudget/actual/commit/2c79f64dd1890ec4d7c72014346e3005cc56496b) Update theme colors for To Budget amount display - [`9183d60`](https://github.com/actualbudget/actual/commit/9183d602dd0edb5286d1bf1206836e26e7b07bf2) Update color themes for budget summary text Tracking Budget - [`1bd0c35`](https://github.com/actualbudget/actual/commit/1bd0c35297832937678dc4d2fd29a15c07830506) Add toBudgetPositive color variable to theme - [`e58d63d`](https://github.com/actualbudget/actual/commit/e58d63d3daad8386b33d61f21aed8520b3a7c3ce) Add toBudgetPositive constant for styling - [`f611a1a`](https://github.com/actualbudget/actual/commit/f611a1a2cf20ef83393e1561383dcb9c7c99a6da) Add toBudgetPositive constant for positive numbers - [`5ad0fd9`](https://github.com/actualbudget/actual/commit/5ad0fd91d96e791933213d49a64a9275858cf4ce) Add toBudgetPositive constant for positive numbers - [`52bfb5a`](https://github.com/actualbudget/actual/commit/52bfb5a5a60bed1e2499b371a74b6391452ef1f7) Add toBudgetPositive constant for styling - [`41ae40b`](https://github.com/actualbudget/actual/commit/41ae40b333bdeeca57bbfd14bc954e048362d5d7) Add positive number handling in ToBudgetAmount component - [`5d72380`](https://github.com/actualbudget/actual/commit/5d72380d26ec7f553a8978e540b251a3781cae5b) Add toBudgetZero color variable to theme - [`b69ff35`](https://github.com/actualbudget/actual/commit/b69ff35763722ad9d58310b52b9ade02b698f8d5) Add toBudgetZero constant for zero budget state ### 📊 Changes **8 files changed** (+32 additions, -6 deletions) <details> <summary>View changed files</summary> 📝 `packages/component-library/src/theme.ts` (+3 -0) 📝 `packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx` (+11 -6) 📝 `packages/desktop-client/src/components/budget/tracking/budgetsummary/saved.tsx` (+0 -0) 📝 `packages/desktop-client/src/style/themes/dark.ts` (+3 -0) 📝 `packages/desktop-client/src/style/themes/development.ts` (+3 -0) 📝 `packages/desktop-client/src/style/themes/light.ts` (+3 -0) 📝 `packages/desktop-client/src/style/themes/midnight.ts` (+3 -0) ➕ `upcoming-release-notes/6750.md` (+6 -0) </details> ### 📄 Description Add "To Budget" color variables for both toBudgetPositive and toBudgetZero. A good use example is when using strict zero-sum budgeting: To Budget > 0.00 can be yellow, To Budget = 0.00 can be green (or another GOAL color changeable by custom theme) and To Budget < 0.00 can be red. As the To Budget number is our touchstone, it would be great to change it's look thematically. I did not change the default colors as set in pr #6747 (green, green, red). If you prefer yellow, green, red, I can do it before approval. @matt-fidd 👀 Envelope Budget, with colors as defined in #6747 <img width="1371" height="292" alt="Screenshot 2026-01-22 112807" src="https://github.com/user-attachments/assets/33e39a1e-4fc7-407d-ac7b-0a63ef8dc9f2" /> Example Use Case described above: <img width="1369" height="301" alt="Screenshot 2026-01-22 112656" src="https://github.com/user-attachments/assets/4e5e1ed8-2c4d-4577-ba9f-3df657c5e407" /> or, perhaps that purple 0.00 means GOAL! <img width="1372" height="295" alt="Screenshot 2026-01-22 113230" src="https://github.com/user-attachments/assets/667cf3d5-2769-43de-9669-87fb6b2d4dea" /> <!--- actual-bot-sections ---> <hr /> <!--- bundlestats-action-comment key:combined start ---> ### Bundle Stats Bundle | Files count | Total bundle size | % Changed ------ | ----------- | ----------------- | --------- desktop-client | 28 | 14.41 MB → 14.41 MB (+524 B) | +0.00% loot-core | 1 | 5.84 MB | 0% api | 1 | 4.38 MB | 0% <details> <summary>View detailed bundle stats</summary> #### desktop-client **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 28 | 14.41 MB → 14.41 MB (+524 B) | +0.00% <details> <summary>Changeset</summary> File | Δ | Size ---- | - | ---- `src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx` | 📈 +102 B (+2.36%) | 4.22 kB → 4.32 kB `src/style/themes/development.ts` | 📈 +86 B (+0.99%) | 8.46 kB → 8.54 kB `src/style/themes/dark.ts` | 📈 +86 B (+0.99%) | 8.49 kB → 8.57 kB `src/style/themes/light.ts` | 📈 +86 B (+0.98%) | 8.55 kB → 8.63 kB `src/style/themes/midnight.ts` | 📈 +78 B (+0.94%) | 8.13 kB → 8.21 kB `home/runner/work/actual/actual/packages/component-library/src/theme.ts` | 📈 +98 B (+0.79%) | 12.18 kB → 12.27 kB `src/components/budget/tracking/budgetsummary/Saved.tsx` | 📉 -12 B (-0.23%) | 5.06 kB → 5.05 kB </details> <details> <summary>View detailed bundle breakdown</summary> <div> **Added** No assets were added **Removed** No assets were removed **Bigger** Asset | File Size | % Changed ----- | --------- | --------- static/js/index.js | 9.24 MB → 9.24 MB (+524 B) | +0.01% **Smaller** No assets were smaller **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- 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/da.js | 106.62 kB | 0% static/js/de.js | 176.28 kB | 0% static/js/en-GB.js | 7.18 kB | 0% static/js/en.js | 159.4 kB | 0% static/js/es.js | 171.98 kB | 0% static/js/fr.js | 180.63 kB | 0% static/js/it.js | 172.42 kB | 0% static/js/nb-NO.js | 158.09 kB | 0% static/js/nl.js | 103.35 kB | 0% static/js/pl.js | 88.64 kB | 0% static/js/pt-BR.js | 146.32 kB | 0% static/js/ru.js | 106.97 kB | 0% static/js/sv.js | 78.28 kB | 0% static/js/th.js | 182.35 kB | 0% static/js/uk.js | 216.34 kB | 0% static/js/resize-observer.js | 18.37 kB | 0% static/js/BackgroundImage.js | 120.54 kB | 0% static/js/ReportRouter.js | 1.05 MB | 0% static/js/narrow.js | 640.99 kB | 0% static/js/TransactionList.js | 101.58 kB | 0% static/js/wide.js | 159.96 kB | 0% static/js/AppliedFilters.js | 9.71 kB | 0% static/js/usePayeeRuleCounts.js | 11.79 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.84 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.BInehE-N.js | 5.84 MB | 0% </div> </details> --- #### api **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 1 | 4.38 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.38 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-04-10 22:02:30 -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#13767