[PR #6754] add "To budget" color variables #6716

New Issue

2026-02-28T21:31:48-06:00

GiteaMirror commented

2026-02-28 21:31:48 -06:00

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

State: closed
Merged: Yes

Add "To Budget" color variables for toBudgetPositive, toBudgetNegative 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).

@matt-fidd 👀

Envelope Budget, with colors as defined in #6747

Example Use Case described above:

or, perhaps that purple 0.00 means GOAL!

Bundle Stats

Bundle	Files count	Total bundle size	% Changed
desktop-client	28	14.41 MB → 14.41 MB (+781 B)	+0.01%
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 (+781 B)	+0.01%

Changeset

File	Δ	Size
`src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx`	📈 +94 B (+2.18%)	4.22 kB → 4.31 kB
`src/style/themes/development.ts`	📈 +137 B (+1.58%)	8.46 kB → 8.59 kB
`src/style/themes/dark.ts`	📈 +137 B (+1.58%)	8.49 kB → 8.62 kB
`src/style/themes/light.ts`	📈 +137 B (+1.57%)	8.55 kB → 8.68 kB
`src/style/themes/midnight.ts`	📈 +125 B (+1.50%)	8.13 kB → 8.25 kB
`home/runner/work/actual/actual/packages/component-library/src/theme.ts`	📈 +151 B (+1.21%)	12.18 kB → 12.32 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 (+781 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.97 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%

**Original Pull Request:** https://github.com/actualbudget/actual/pull/6754 **State:** closed **Merged:** Yes --- Add "To Budget" color variables for toBudgetPositive, toBudgetNegative 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). @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" />  <hr />  ### Bundle Stats Bundle | Files count | Total bundle size | % Changed ------ | ----------- | ----------------- | --------- desktop-client | 28 | 14.41 MB → 14.41 MB (+781 B) | +0.01% 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 (+781 B) | +0.01% <details> <summary>Changeset</summary> File | Δ | Size ---- | - | ---- `src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx` | 📈 +94 B (+2.18%) | 4.22 kB → 4.31 kB `src/style/themes/development.ts` | 📈 +137 B (+1.58%) | 8.46 kB → 8.59 kB `src/style/themes/dark.ts` | 📈 +137 B (+1.58%) | 8.49 kB → 8.62 kB `src/style/themes/light.ts` | 📈 +137 B (+1.57%) | 8.55 kB → 8.68 kB `src/style/themes/midnight.ts` | 📈 +125 B (+1.50%) | 8.13 kB → 8.25 kB `home/runner/work/actual/actual/packages/component-library/src/theme.ts` | 📈 +151 B (+1.21%) | 12.18 kB → 12.32 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 (+781 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.97 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>

GiteaMirror added the pull-request label 2026-02-28 21:31:48 -06:00

GiteaMirror closed this issue