add "To budget" color variables (#6754)

* 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

packages/component-library/src/theme.ts

@@ -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)',

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

@@ -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
+                  color: isPositive
-                    ? theme.budgetNumberNegative
+                    ? theme.toBudgetPositive
-                    : theme.numberPositive,
+                    : isNegative
+                      ? theme.toBudgetNegative
+                      : theme.toBudgetZero,
                   marginBottom: -1,
                   borderBottom: '1px solid transparent',
                   ':hover': {
-                    borderColor: isNegative
+                    borderColor: isPositive
-                      ? theme.budgetNumberNegative
+                      ? theme.toBudgetPositive
-                      : theme.numberPositive,
+                      : isNegative
+                        ? theme.toBudgetNegative
+                        : theme.toBudgetZero,
                   },
                 },
                 amountStyle,

packages/desktop-client/src/style/themes/dark.ts

@@ -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;

packages/desktop-client/src/style/themes/development.ts

@@ -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;

packages/desktop-client/src/style/themes/light.ts

@@ -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;

packages/desktop-client/src/style/themes/midnight.ts

@@ -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;

upcoming-release-notes/6754.md

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