use consistent colours on the budget page (#6747)

* fix colouring of non-numerical summary cards

* define new colours

* use new colours on budget page

* use colours on account pages

* note

* Update VRT screenshots

Auto-generated by VRT workflow

PR: #6747

* fix mobile colouring

* Update VRT screenshots

Auto-generated by VRT workflow

PR: #6747

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

packages/desktop-client/src/components/accounts/Balance.tsx

@@ -233,9 +233,9 @@ export function Balances({
                 fontWeight: 400,
                 color:
                   props.value < 0
-                    ? theme.errorText
+                    ? theme.numberNegative
                     : props.value > 0
-                      ? theme.noticeTextLight
+                      ? theme.numberPositive
                       : theme.pageTextSubdued,
               }}
             />

packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx

@@ -160,11 +160,11 @@ export function BalanceWithCarryover({
         <>
           <span style={{ fontWeight: 'bold' }}>
             {getDifferenceToGoal(balanceValue) === 0 ? (
-              <span style={{ color: theme.noticeText }}>
+              <span style={{ color: theme.templateNumberFunded }}>
                 <Trans>Fully funded</Trans>
               </span>
             ) : getDifferenceToGoal(balanceValue) > 0 ? (
-              <span style={{ color: theme.noticeText }}>
+              <span style={{ color: theme.templateNumberFunded }}>
                 <Trans>
                   Overfunded (
                   {{
@@ -177,7 +177,7 @@ export function BalanceWithCarryover({
                 </Trans>
               </span>
             ) : (
-              <span style={{ color: theme.errorText }}>
+              <span style={{ color: theme.templateNumberUnderFunded }}>
                 <Trans>
                   Underfunded (
                   {{

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

@@ -84,13 +84,15 @@ export function ToBudgetAmount({
                   fontWeight: 400,
                   userSelect: 'none',
                   cursor: 'pointer',
-                  color: isNegative ? theme.errorText : theme.pageTextPositive,
+                  color: isNegative
+                    ? theme.budgetNumberNegative
+                    : theme.numberPositive,
                   marginBottom: -1,
                   borderBottom: '1px solid transparent',
                   ':hover': {
                     borderColor: isNegative
-                      ? theme.errorBorder
-                      : theme.pageTextPositive,
+                      ? theme.budgetNumberNegative
+                      : theme.numberPositive,
                   },
                 },
                 amountStyle,

packages/desktop-client/src/components/budget/util.ts

@@ -63,7 +63,7 @@ export function separateGroups(categoryGroups: CategoryGroupEntity[]) {
 
 export function makeAmountGrey(value: number | string | null): CSSProperties {
   return value === 0 || value === '0' || value === '' || value == null
-    ? { color: theme.tableTextSubdued }
+    ? { color: theme.budgetNumberZero }
     : null;
 }
 
@@ -82,7 +82,7 @@ export function makeBalanceAmountStyle(
   const currencyValue = normalizeIntegerValue(value);
 
   if (currencyValue < 0) {
-    return { color: theme.errorText };
+    return { color: theme.budgetNumberNegative };
   }
 
   if (goalValue == null) {
@@ -90,14 +90,15 @@ export function makeBalanceAmountStyle(
     if (greyed) {
       return greyed;
     }
+    return { color: theme.budgetNumberPositive };
   } else {
     const budgetedAmount = normalizeIntegerValue(budgetedValue);
     const goalAmount = normalizeIntegerValue(goalValue);
 
     if (budgetedAmount < goalAmount) {
-      return { color: theme.warningText };
+      return { color: theme.templateNumberUnderFunded };
     }
-    return { color: theme.noticeText };
+    return { color: theme.templateNumberFunded };
   }
 }
 
@@ -109,9 +110,11 @@ export function makeAmountFullStyle(
     zeroColor?: string;
   },
 ) {
-  const positiveColorToUse = colors?.positiveColor || theme.noticeText;
-  const negativeColorToUse = colors?.negativeColor || theme.errorText;
-  const zeroColorToUse = colors?.zeroColor || theme.tableTextSubdued;
+  const positiveColorToUse =
+    colors?.positiveColor || theme.budgetNumberPositive;
+  const negativeColorToUse =
+    colors?.negativeColor || theme.budgetNumberNegative;
+  const zeroColorToUse = colors?.zeroColor || theme.budgetNumberZero;
   return {
     color:
       value < 0

packages/desktop-client/src/components/mobile/accounts/AccountsPage.tsx

@@ -225,7 +225,11 @@ function AccountListItem({
                 {...props}
                 style={{
                   fontSize: 16,
-                  ...makeAmountFullStyle(props.value),
+                  ...makeAmountFullStyle(props.value, {
+                    positiveColor: theme.numberPositive,
+                    negativeColor: theme.numberNegative,
+                    zeroColor: theme.numberNeutral,
+                  }),
                 }}
                 data-testid="account-balance"
               />

packages/desktop-client/src/components/mobile/transactions/FocusableAmountInput.tsx

@@ -227,7 +227,9 @@ export const FocusableAmountInput = memo(function FocusableAmountInput({
         focused={focused && !disabled}
         style={{
           ...makeAmountFullStyle(value, {
-            zeroColor: isNegative ? theme.errorText : theme.noticeText,
+            zeroColor: isNegative ? theme.numberNegative : theme.numberNeutral,
+            positiveColor: theme.numberPositive,
+            negativeColor: theme.numberNegative,
           }),
           width: 80,
           justifyContent: 'center',
@@ -277,7 +279,11 @@ export const FocusableAmountInput = memo(function FocusableAmountInput({
           >
             <Text
               style={{
-                ...makeAmountFullStyle(value),
+                ...makeAmountFullStyle(value, {
+                  positiveColor: theme.numberPositive,
+                  negativeColor: theme.numberNegative,
+                  zeroColor: theme.numberNeutral,
+                }),
                 fontSize: 15,
                 userSelect: 'none',
                 ...textStyle,

packages/desktop-client/src/components/reports/SummaryNumber.tsx

@@ -39,6 +39,7 @@ export function SummaryNumber({
   const [fontSize, setFontSize] = useState<number>(initialFontSize);
   const refDiv = useRef<HTMLDivElement>(null);
   const format = useFormat();
+  const isNumericValue = Number.isFinite(value);
 
   let displayAmount =
     contentType === 'percentage'
@@ -76,11 +77,13 @@ export function SummaryNumber({
         <View
           ref={mergedRef as Ref<HTMLDivElement>}
           aria-label={
-            value === 0
-              ? t('Zero amount')
-              : value < 0
-                ? t('Negative amount: {{amount}}', { amount: displayAmount })
-                : t('Positive amount: {{amount}}', { amount: displayAmount })
+            !isNumericValue
+              ? t('Unknown amount')
+              : value === 0
+                ? t('Zero amount')
+                : value < 0
+                  ? t('Negative amount: {{amount}}', { amount: displayAmount })
+                  : t('Positive amount: {{amount}}', { amount: displayAmount })
           }
           style={{
             alignItems: 'center',
@@ -94,8 +97,9 @@ export function SummaryNumber({
             margin: `${CONTAINER_MARGIN}px 0`,
             justifyContent: 'center',
             transition: animate ? 'font-size 0.3s ease' : '',
-            color:
-              value === 0
+            color: !isNumericValue
+              ? theme.reportsNumberNeutral
+              : value === 0
                 ? theme.reportsNumberNeutral
                 : value < 0
                   ? theme.reportsNumberNegative

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

@@ -39,6 +39,16 @@ export const tableRowBackgroundHighlightText = colorPalette.navy150;
 export const tableRowHeaderBackground = colorPalette.navy700;
 export const tableRowHeaderText = colorPalette.navy150;
 
+export const numberPositive = colorPalette.green400;
+export const numberNegative = colorPalette.red300;
+export const numberNeutral = colorPalette.navy500;
+export const budgetNumberNegative = numberNegative;
+export const budgetNumberZero = tableTextSubdued;
+export const budgetNumberNeutral = tableText;
+export const budgetNumberPositive = budgetNumberNeutral;
+export const templateNumberFunded = numberPositive;
+export const templateNumberUnderFunded = colorPalette.orange300;
+
 export const sidebarBackground = colorPalette.navy900;
 export const sidebarItemBackgroundPending = colorPalette.orange200;
 export const sidebarItemBackgroundPositive = colorPalette.green500;
@@ -198,9 +208,9 @@ export const reportsGreen = colorPalette.green400;
 export const reportsGray = colorPalette.gray400;
 export const reportsLabel = pageText;
 export const reportsInnerLabel = colorPalette.navy800;
-export const reportsNumberNegative = reportsRed;
-export const reportsNumberNeutral = pageText;
-export const reportsNumberPositive = reportsGreen;
+export const reportsNumberPositive = numberPositive;
+export const reportsNumberNegative = numberNegative;
+export const reportsNumberNeutral = numberNeutral;
 export const reportsChartFill = reportsNumberPositive;
 
 export const noteTagBackground = colorPalette.purple700;

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

@@ -39,6 +39,16 @@ export const tableRowBackgroundHighlightText = colorPalette.navy700;
 export const tableRowHeaderBackground = colorPalette.navy50;
 export const tableRowHeaderText = colorPalette.navy800;
 
+export const numberPositive = colorPalette.green400;
+export const numberNegative = colorPalette.red300;
+export const numberNeutral = colorPalette.navy100;
+export const budgetNumberNegative = numberNegative;
+export const budgetNumberZero = tableTextSubdued;
+export const budgetNumberNeutral = tableText;
+export const budgetNumberPositive = budgetNumberNeutral;
+export const templateNumberFunded = numberPositive;
+export const templateNumberUnderFunded = colorPalette.orange300;
+
 export const sidebarBackground = colorPalette.navy900;
 export const sidebarItemBackgroundPending = colorPalette.orange200;
 export const sidebarItemBackgroundPositive = colorPalette.green500;
@@ -198,9 +208,9 @@ export const reportsGreen = colorPalette.green400;
 export const reportsGray = colorPalette.gray400;
 export const reportsLabel = colorPalette.navy900;
 export const reportsInnerLabel = colorPalette.navy800;
-export const reportsNumberNegative = reportsRed;
-export const reportsNumberNeutral = pageText;
-export const reportsNumberPositive = reportsGreen;
+export const reportsNumberPositive = numberPositive;
+export const reportsNumberNegative = numberNegative;
+export const reportsNumberNeutral = numberNeutral;
 export const reportsChartFill = reportsNumberPositive;
 
 export const noteTagBackground = colorPalette.purple125;

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

@@ -39,6 +39,16 @@ export const tableRowBackgroundHighlightText = colorPalette.navy700;
 export const tableRowHeaderBackground = colorPalette.navy50;
 export const tableRowHeaderText = colorPalette.navy800;
 
+export const numberPositive = colorPalette.green700;
+export const numberNegative = colorPalette.red500;
+export const numberNeutral = colorPalette.navy100;
+export const budgetNumberZero = tableTextSubdued;
+export const budgetNumberNegative = numberNegative;
+export const budgetNumberNeutral = tableText;
+export const budgetNumberPositive = budgetNumberNeutral;
+export const templateNumberFunded = numberPositive;
+export const templateNumberUnderFunded = colorPalette.orange700;
+
 export const sidebarBackground = colorPalette.navy900;
 export const sidebarItemBackgroundPending = colorPalette.orange200;
 export const sidebarItemBackgroundPositive = colorPalette.green500;
@@ -200,9 +210,9 @@ export const reportsGreen = colorPalette.green400;
 export const reportsGray = colorPalette.gray400;
 export const reportsLabel = colorPalette.navy900;
 export const reportsInnerLabel = colorPalette.navy800;
-export const reportsNumberNegative = reportsRed;
-export const reportsNumberNeutral = pageText;
-export const reportsNumberPositive = reportsGreen;
+export const reportsNumberPositive = numberPositive;
+export const reportsNumberNegative = numberNegative;
+export const reportsNumberNeutral = numberNeutral;
 export const reportsChartFill = reportsNumberPositive;
 
 export const noteTagBackground = colorPalette.purple125;

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

@@ -39,6 +39,16 @@ export const tableRowBackgroundHighlightText = colorPalette.gray800;
 export const tableRowHeaderBackground = colorPalette.gray700;
 export const tableRowHeaderText = colorPalette.gray150;
 
+export const numberPositive = colorPalette.green400;
+export const numberNegative = colorPalette.red300;
+export const numberNeutral = colorPalette.gray500;
+export const budgetNumberNegative = numberNegative;
+export const budgetNumberZero = tableTextSubdued;
+export const budgetNumberNeutral = tableText;
+export const budgetNumberPositive = budgetNumberNeutral;
+export const templateNumberFunded = numberPositive;
+export const templateNumberUnderFunded = colorPalette.orange300;
+
 export const sidebarBackground = colorPalette.gray900;
 export const sidebarItemBackgroundPending = colorPalette.orange200;
 export const sidebarItemBackgroundPositive = colorPalette.green400;
@@ -200,9 +210,9 @@ export const reportsGreen = colorPalette.green400;
 export const reportsGray = colorPalette.gray400;
 export const reportsLabel = pageText;
 export const reportsInnerLabel = colorPalette.navy800;
-export const reportsNumberNegative = reportsRed;
-export const reportsNumberNeutral = pageText;
-export const reportsNumberPositive = reportsGreen;
+export const reportsNumberPositive = numberPositive;
+export const reportsNumberNegative = numberNegative;
+export const reportsNumberNeutral = numberNeutral;
 export const reportsChartFill = reportsNumberPositive;
 
 export const noteTagBackground = colorPalette.purple800;