github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-03-09 03:32:54 -05:00
Code Issues 250 Packages Projects Releases 53 Wiki Activity

add "To budget" color variables (#6754)

Browse Source 
* Add budget color variables to theme

* Add isPositive check for budget amount styling

* Add budget number constants for positive, zero, and negative

* Add budget status constants for positive, zero, and negative

* Add budget number constants for positive, zero, and negative

* Update midnight.ts

* Create 6754.md
This commit is contained in:
Juulz
2026-01-22 18:10:14 -05:00
committed by GitHub
parent 19ed2423d4
commit 414aa95fd8
7 changed files with 32 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/component-library/src/theme.ts
View File

@@ -198,6 +198,9 @@ export const theme = {
budgetNumberNegative: 'var(--color-budgetNumberNegative)',
budgetNumberNeutral: 'var(--color-budgetNumberNeutral)',
budgetNumberZero: 'var(--color-budgetNumberZero)',
toBudgetPositive: 'var(--color-toBudgetPositive)',
toBudgetZero: 'var(--color-toBudgetZero)',
toBudgetNegative: 'var(--color-toBudgetNegative)',
templateNumberFunded: 'var(--color-templateNumberFunded)',
templateNumberUnderFunded: 'var(--color-templateNumberUnderFunded)',
noteTagBackground: 'var(--color-noteTagBackground)',

17
packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx
View File

@@ -51,6 +51,7 @@ export function ToBudgetAmount({
}
const num = availableValue ?? 0;
const isNegative = num < 0;
const isPositive = num > 0;
return (
<View style={{ alignItems: 'center', ...style }}>
@@ -84,15 +85,19 @@ export function ToBudgetAmount({
fontWeight: 400,
userSelect: 'none',
cursor: 'pointer',
color: isNegative
? theme.budgetNumberNegative
: theme.numberPositive,
color: isPositive
? theme.toBudgetPositive
: isNegative
? theme.toBudgetNegative
: theme.toBudgetZero,
marginBottom: -1,
borderBottom: '1px solid transparent',
':hover': {
borderColor: isNegative
? theme.budgetNumberNegative
: theme.numberPositive,
borderColor: isPositive
? theme.toBudgetPositive
: isNegative
? theme.toBudgetNegative
: theme.toBudgetZero,
},
},
amountStyle,

3
packages/desktop-client/src/style/themes/dark.ts
View File

@@ -48,6 +48,9 @@ export const budgetNumberNeutral = tableText;
export const budgetNumberPositive = budgetNumberNeutral;
export const templateNumberFunded = numberPositive;
export const templateNumberUnderFunded = colorPalette.orange300;
export const toBudgetPositive = numberPositive;
export const toBudgetZero = numberPositive;
export const toBudgetNegative = budgetNumberNegative;
export const sidebarBackground = colorPalette.navy900;
export const sidebarItemBackgroundPending = colorPalette.orange200;

3
packages/desktop-client/src/style/themes/development.ts
View File

@@ -48,6 +48,9 @@ export const budgetNumberNeutral = tableText;
export const budgetNumberPositive = budgetNumberNeutral;
export const templateNumberFunded = numberPositive;
export const templateNumberUnderFunded = colorPalette.orange300;
export const toBudgetPositive = numberPositive;
export const toBudgetZero = numberPositive;
export const toBudgetNegative = budgetNumberNegative;
export const sidebarBackground = colorPalette.navy900;
export const sidebarItemBackgroundPending = colorPalette.orange200;

3
packages/desktop-client/src/style/themes/light.ts
View File

@@ -48,6 +48,9 @@ export const budgetNumberNeutral = tableText;
export const budgetNumberPositive = budgetNumberNeutral;
export const templateNumberFunded = numberPositive;
export const templateNumberUnderFunded = colorPalette.orange700;
export const toBudgetPositive = numberPositive;
export const toBudgetZero = numberPositive;
export const toBudgetNegative = budgetNumberNegative;
export const sidebarBackground = colorPalette.navy900;
export const sidebarItemBackgroundPending = colorPalette.orange200;

3
packages/desktop-client/src/style/themes/midnight.ts
View File

@@ -48,6 +48,9 @@ export const budgetNumberNeutral = tableText;
export const budgetNumberPositive = budgetNumberNeutral;
export const templateNumberFunded = numberPositive;
export const templateNumberUnderFunded = colorPalette.orange300;
export const toBudgetPositive = numberPositive;
export const toBudgetZero = numberPositive;
export const toBudgetNegative = budgetNumberNegative;
export const sidebarBackground = colorPalette.gray900;
export const sidebarItemBackgroundPending = colorPalette.orange200;

6
upcoming-release-notes/6754.md Normal file
View File

@@ -0,0 +1,6 @@
---
category: Enhancements
authors: [Juulz]
---
Add toBudgetPositive, toBudgetZero and toBudgetNegative color variables.