From 2f246f4a4094ae50a3e59271ee4d8c016846342e Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Fri, 11 Aug 2023 13:35:50 +0100
Subject: [PATCH 01/10] Notes file Co-Authored-By: biohzrddd
 <10577752+biohzrddd@users.noreply.github.com>

---
 upcoming-release-notes/placeholder.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 upcoming-release-notes/placeholder.md

diff --git a/upcoming-release-notes/placeholder.md b/upcoming-release-notes/placeholder.md
new file mode 100644
index 00000000000..4731ee4093a
--- /dev/null
+++ b/upcoming-release-notes/placeholder.md
@@ -0,0 +1,5 @@
+---
+category: Enhancements
+authors: [biohzrddd, carkom]
+---
+Last phase of dark theme, to include budget and global files
\ No newline at end of file

From 30cf1d914edd34c77741934458d232cb17abfa94 Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Fri, 11 Aug 2023 23:07:28 +0100
Subject: [PATCH 02/10] Main Import of preivous code. Co-Authored-By: biohzrddd
 <10577752+biohzrddd@users.noreply.github.com>

---
 .eslintrc.js                                  |  19 ----
 .../src/components/LoggedInUser.js            |   4 +-
 .../src/components/MobileWebMessage.js        |   6 +-
 .../src/components/NotesButton.tsx            |   8 +-
 .../src/components/Notifications.tsx          |  34 ++++--
 .../desktop-client/src/components/Page.tsx    |   6 +-
 .../desktop-client/src/components/Titlebar.js |  16 +--
 .../src/components/UpdateNotification.js      |  17 +--
 .../src/components/budget/MobileBudget.js     |   6 +-
 .../components/budget/MobileBudgetTable.js    |  61 ++++++----
 .../src/components/budget/MobileTable.js      |   4 +-
 .../components/budget/MonthCountSelector.js   |   4 +-
 .../src/components/budget/MonthPicker.js      |  14 ++-
 .../src/components/budget/constants.js        |   1 -
 .../src/components/budget/misc.js             |  65 ++++++-----
 .../budget/rollover/BudgetSummary.tsx         |  29 ++---
 .../budget/rollover/rollover-components.tsx   |  59 +++++-----
 .../src/components/budget/util.js             |  13 ++-
 .../src/components/mobile/MobileForms.js      |   9 +-
 .../src/components/modals/BudgetSummary.js    |   6 +-
 .../transactions/MobileTransaction.js         | 104 ++++++++++--------
 packages/desktop-client/src/style/styles.ts   |   1 +
 .../{placeholder.md => 1513.md}               |   0
 23 files changed, 264 insertions(+), 222 deletions(-)
 rename upcoming-release-notes/{placeholder.md => 1513.md} (100%)

diff --git a/.eslintrc.js b/.eslintrc.js
index 7cc4060ebb2..9b156974f18 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -210,27 +210,10 @@ module.exports = {
       files: [
         './packages/desktop-client/public/index.html',
         './packages/desktop-client/src/components/BankSyncStatus.*',
-        './packages/desktop-client/src/components/LoggedInUser.*',
-        './packages/desktop-client/src/components/MobileWebMessage.*',
-        './packages/desktop-client/src/components/NotesButton.*',
-        './packages/desktop-client/src/components/Notifications.*',
-        './packages/desktop-client/src/components/Page.*',
         './packages/desktop-client/src/components/SidebarWithData.*',
-        './packages/desktop-client/src/components/Titlebar.*',
-        './packages/desktop-client/src/components/UpdateNotification.*',
         './packages/desktop-client/src/components/alerts.*',
-        './packages/desktop-client/src/components/budget/MobileBudget.*',
-        './packages/desktop-client/src/components/budget/MobileBudgetTable.*',
-        './packages/desktop-client/src/components/budget/MobileTable.*',
-        './packages/desktop-client/src/components/budget/MonthCountSelector.*',
-        './packages/desktop-client/src/components/budget/MonthPicker.*',
-        './packages/desktop-client/src/components/budget/constants.*',
-        './packages/desktop-client/src/components/budget/misc.*',
         './packages/desktop-client/src/components/budget/report/BudgetSummary.*',
         './packages/desktop-client/src/components/budget/report/components.*',
-        './packages/desktop-client/src/components/budget/rollover/BudgetSummary.*',
-        './packages/desktop-client/src/components/budget/rollover/rollover-components.*',
-        './packages/desktop-client/src/components/budget/util.*',
         './packages/desktop-client/src/components/common.*',
         './packages/desktop-client/src/components/common/Card.*',
         './packages/desktop-client/src/components/common/Label.*',
@@ -249,7 +232,6 @@ module.exports = {
         './packages/desktop-client/src/components/manager/subscribe/Error.*',
         './packages/desktop-client/src/components/manager/subscribe/Login.*',
         './packages/desktop-client/src/components/manager/subscribe/common.*',
-        './packages/desktop-client/src/components/modals/BudgetSummary.*',
         './packages/desktop-client/src/components/modals/ConfirmCategoryDelete.*',
         './packages/desktop-client/src/components/modals/CreateEncryptionKey.*',
         './packages/desktop-client/src/components/modals/EditField.*',
@@ -287,7 +269,6 @@ module.exports = {
         './packages/desktop-client/src/components/settings/UI.*',
         './packages/desktop-client/src/components/settings/index.*',
         './packages/desktop-client/src/components/sidebar.*',
-        './packages/desktop-client/src/components/transactions/MobileTransaction.*',
         './packages/desktop-client/src/components/util/AmountInput.*',
         './packages/desktop-client/src/components/util/DisplayId.*',
         './packages/desktop-client/src/components/util/LoadComponent.*',
diff --git a/packages/desktop-client/src/components/LoggedInUser.js b/packages/desktop-client/src/components/LoggedInUser.js
index 65e5460e1a4..89f7a647bcf 100644
--- a/packages/desktop-client/src/components/LoggedInUser.js
+++ b/packages/desktop-client/src/components/LoggedInUser.js
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 
 import { useActions } from '../hooks/useActions';
-import { colors, styles } from '../style';
+import { theme, styles } from '../style';
 
 import Button from './common/Button';
 import Menu from './common/Menu';
@@ -70,7 +70,7 @@ export default function LoggedInUser({ hideIfNoServer, style, color }) {
       <Text
         style={[
           {
-            color: colors.n5,
+            color: theme.pageText,
             fontStyle: 'italic',
           },
           styles.delayedFadeIn,
diff --git a/packages/desktop-client/src/components/MobileWebMessage.js b/packages/desktop-client/src/components/MobileWebMessage.js
index d8ce0cd51d9..64eb7b44213 100644
--- a/packages/desktop-client/src/components/MobileWebMessage.js
+++ b/packages/desktop-client/src/components/MobileWebMessage.js
@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { savePrefs } from 'loot-core/src/client/actions';
 
 import { useResponsive } from '../ResponsiveProvider';
-import { colors, styles } from '../style';
+import { theme, styles } from '../style';
 
 import Button from './common/Button';
 import Text from './common/Text';
@@ -55,8 +55,8 @@ export default function MobileWebMessage() {
         bottom: 0,
         left: 0,
         right: 0,
-        backgroundColor: colors.n1,
-        color: 'white',
+        backgroundColor: theme.mobileModalBackground,
+        color: theme.mobileModalText,
         padding: 10,
         margin: 10,
         borderRadius: 6,
diff --git a/packages/desktop-client/src/components/NotesButton.tsx b/packages/desktop-client/src/components/NotesButton.tsx
index 3b46eb879d7..5c1587dc817 100644
--- a/packages/desktop-client/src/components/NotesButton.tsx
+++ b/packages/desktop-client/src/components/NotesButton.tsx
@@ -7,7 +7,7 @@ import { useLiveQuery } from 'loot-core/src/client/query-hooks';
 import { send } from 'loot-core/src/platform/client/fetch';
 
 import CustomNotesPaper from '../icons/v2/CustomNotesPaper';
-import { colors } from '../style';
+import { theme } from '../style';
 
 import Button from './common/Button';
 import Text from './common/Text';
@@ -41,7 +41,7 @@ function NotesTooltip({
         <textarea
           ref={inputRef}
           {...css({
-            border: '1px solid ' + colors.border,
+            border: '1px solid ' + theme.buttonNormalBorder,
             padding: 7,
             minWidth: 300,
             minHeight: 120,
@@ -79,7 +79,7 @@ export default function NotesButton({
   id,
   width = 12,
   height = 12,
-  defaultColor = colors.n8,
+  defaultColor = theme.buttonNormalText,
   tooltipPosition,
   style,
 }: NotesButtonProps) {
@@ -125,7 +125,7 @@ export default function NotesButton({
           { color: defaultColor },
           style,
           hasNotes && { display: 'flex !important' },
-          tooltipOpen && { color: colors.n1 },
+          tooltipOpen && { color: theme.buttonNormalText },
         ]}
         {...tooltip.getOpenEvents()}
       >
diff --git a/packages/desktop-client/src/components/Notifications.tsx b/packages/desktop-client/src/components/Notifications.tsx
index 02ff9c8fad2..3e7d55948f9 100644
--- a/packages/desktop-client/src/components/Notifications.tsx
+++ b/packages/desktop-client/src/components/Notifications.tsx
@@ -13,7 +13,7 @@ import type { NotificationWithId } from 'loot-core/src/client/state-types/notifi
 import { useActions } from '../hooks/useActions';
 import AnimatedLoading from '../icons/AnimatedLoading';
 import Delete from '../icons/v0/Delete';
-import { styles, colors } from '../style';
+import { styles, theme } from '../style';
 
 import Button, { ButtonWithLoading } from './common/Button';
 import ExternalLink from './common/ExternalLink';
@@ -108,7 +108,11 @@ function Notification({
     <View
       style={{
         marginTop: 10,
-        color: positive ? colors.g3 : error ? colors.r3 : colors.y2,
+        color: positive
+          ? theme.noticeText
+          : error
+          ? theme.errorText
+          : theme.warningText,
       }}
     >
       <Stack
@@ -118,12 +122,16 @@ function Notification({
           padding: '14px 14px',
           fontSize: 14,
           backgroundColor: positive
-            ? colors.g11
+            ? theme.noticeBackground
             : error
-            ? colors.r11
-            : colors.y10,
+            ? theme.errorBackground
+            : theme.warningBackground,
           borderTop: `3px solid ${
-            positive ? colors.g5 : error ? colors.r5 : colors.y4
+            positive
+              ? theme.noticeAccent
+              : error
+              ? theme.errorAccent
+              : theme.warningAccent
           }`,
           ...styles.shadowLarge,
           maxWidth: 550,
@@ -166,17 +174,21 @@ function Notification({
               style={{
                 backgroundColor: 'transparent',
                 border: `1px solid ${
-                  positive ? colors.g5 : error ? colors.r4 : colors.y3
+                  positive
+                    ? theme.noticeAccent
+                    : error
+                    ? theme.errorAccent
+                    : theme.warningAccent
                 }`,
                 color: 'currentColor',
                 fontSize: 14,
                 flexShrink: 0,
                 '&:hover, &:active': {
                   backgroundColor: positive
-                    ? colors.g9
+                    ? theme.noticeBackground
                     : error
-                    ? colors.r10
-                    : colors.y9,
+                    ? theme.errorBackground
+                    : theme.warningBackground,
                 },
               }}
             >
@@ -202,7 +214,7 @@ function Notification({
             left: 0,
             right: 0,
             bottom: 0,
-            backgroundColor: 'rgba(250, 250, 250, .75)',
+            backgroundColor: theme.tableBackground,
             alignItems: 'center',
             justifyContent: 'center',
           }}
diff --git a/packages/desktop-client/src/components/Page.tsx b/packages/desktop-client/src/components/Page.tsx
index 8a2068bfc9a..d7d5ea81e9d 100644
--- a/packages/desktop-client/src/components/Page.tsx
+++ b/packages/desktop-client/src/components/Page.tsx
@@ -3,7 +3,7 @@ import React, { type ReactNode } from 'react';
 import { type CSSProperties } from 'glamor';
 
 import { useResponsive } from '../ResponsiveProvider';
-import { colors, styles } from '../style';
+import { theme, styles } from '../style';
 
 import Text from './common/Text';
 import View from './common/View';
@@ -23,8 +23,8 @@ function PageTitle({
         style={[
           {
             alignItems: 'center',
-            backgroundColor: colors.b2,
-            color: 'white',
+            backgroundColor: theme.sidebarBackground,
+            color: theme.mobileModalText,
             flexDirection: 'row',
             flex: '1 0 auto',
             fontSize: 18,
diff --git a/packages/desktop-client/src/components/Titlebar.js b/packages/desktop-client/src/components/Titlebar.js
index 779e8ee669e..29c91f132ff 100644
--- a/packages/desktop-client/src/components/Titlebar.js
+++ b/packages/desktop-client/src/components/Titlebar.js
@@ -22,7 +22,7 @@ import SvgEye from '../icons/v2/Eye';
 import SvgEyeSlashed from '../icons/v2/EyeSlashed';
 import NavigationMenu from '../icons/v2/NavigationMenu';
 import { useResponsive } from '../ResponsiveProvider';
-import { colors } from '../style';
+import { theme } from '../style';
 import tokens from '../tokens';
 
 import AccountSyncCheck from './accounts/AccountSyncCheck';
@@ -71,7 +71,9 @@ function UncategorizedButton() {
       <ButtonLink
         type="bare"
         to="/accounts/uncategorized"
-        style={{ color: colors.r5 }}
+        style={{
+          color: theme.errorText,
+        }}
       >
         {count} uncategorized {count === 1 ? 'transaction' : 'transactions'}
       </ButtonLink>
@@ -150,21 +152,21 @@ export function SyncButton({ style }) {
           WebkitAppRegion: 'none',
           color:
             syncState === 'error'
-              ? colors.r7
+              ? theme.errorText
               : syncState === 'disabled' ||
                 syncState === 'offline' ||
                 syncState === 'local'
-              ? colors.n9
+              ? theme.tableTextInactive
               : null,
         },
         media(`(min-width: ${tokens.breakpoint_small})`, {
           color:
             syncState === 'error'
-              ? colors.r4
+              ? theme.errorText
               : syncState === 'disabled' ||
                 syncState === 'offline' ||
                 syncState === 'local'
-              ? colors.n6
+              ? theme.pageTextSubdued
               : null,
         }),
       )}
@@ -329,7 +331,7 @@ export default function Titlebar({ style }) {
         >
           <NavigationMenu
             className="menu"
-            style={{ width: 15, height: 15, color: colors.n5, left: 0 }}
+            style={{ width: 15, height: 15, color: theme.pageText, left: 0 }}
           />
         </Button>
       )}
diff --git a/packages/desktop-client/src/components/UpdateNotification.js b/packages/desktop-client/src/components/UpdateNotification.js
index df42cc420b5..5c286817565 100644
--- a/packages/desktop-client/src/components/UpdateNotification.js
+++ b/packages/desktop-client/src/components/UpdateNotification.js
@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 
 import { useActions } from '../hooks/useActions';
 import Close from '../icons/v1/Close';
-import { colors } from '../style';
+import { theme } from '../style';
 
 import Button from './common/Button';
 import LinkButton from './common/LinkButton';
@@ -36,8 +36,8 @@ export default function UpdateNotification() {
           bottom: 0,
           right: 0,
           margin: '15px 17px',
-          backgroundColor: colors.p6,
-          color: 'white',
+          backgroundColor: theme.pageTextPositive,
+          color: theme.tableBackground,
           padding: '7px 10px',
           borderRadius: 4,
           zIndex: 10000,
@@ -51,15 +51,8 @@ export default function UpdateNotification() {
           <View style={{ flex: 1 }} />
           <View style={{ marginTop: -1 }}>
             <Text>
+              <LinkButton onClick={updateApp}>Restart</LinkButton> (
               <LinkButton
-                onClick={updateApp}
-                style={{ color: 'white', textDecoration: 'underline' }}
-              >
-                Restart
-              </LinkButton>{' '}
-              (
-              <LinkButton
-                style={{ color: 'white', textDecoration: 'underline' }}
                 onClick={() =>
                   window.Actual.openURLInBrowser(
                     'https://actualbudget.org/docs/releases',
@@ -74,7 +67,7 @@ export default function UpdateNotification() {
                 style={{ display: 'inline', padding: '1px 7px 2px 7px' }}
                 onClick={() => closeNotification(setAppState)}
               >
-                <Close width={9} style={{ color: 'white' }} />
+                <Close width={9} style={{ color: theme.pageText }} />
               </Button>
             </Text>
           </View>
diff --git a/packages/desktop-client/src/components/budget/MobileBudget.js b/packages/desktop-client/src/components/budget/MobileBudget.js
index 52b2912bef2..75d21fa9217 100644
--- a/packages/desktop-client/src/components/budget/MobileBudget.js
+++ b/packages/desktop-client/src/components/budget/MobileBudget.js
@@ -13,7 +13,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
 import { useActions } from '../../hooks/useActions';
 import { useSetThemeColor } from '../../hooks/useSetThemeColor';
 import AnimatedLoading from '../../icons/AnimatedLoading';
-import { colors } from '../../style';
+import { theme } from '../../style';
 import View from '../common/View';
 import SyncRefresh from '../SyncRefresh';
 
@@ -248,7 +248,7 @@ class Budget extends Component {
         <View
           style={{
             flex: 1,
-            backgroundColor: 'white',
+            backgroundColor: theme.pageBackgroundLineTop,
             alignItems: 'center',
             justifyContent: 'center',
             marginBottom: 25,
@@ -303,7 +303,7 @@ export default function BudgetWrapper() {
   let actions = useActions();
   let spreadsheet = useSpreadsheet();
 
-  useSetThemeColor(colors.p5);
+  useSetThemeColor(theme.pageTextPositive);
   return (
     <Budget
       categoryGroups={categoryGroups}
diff --git a/packages/desktop-client/src/components/budget/MobileBudgetTable.js b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
index 6f27e80396c..f1ba5abfb7f 100644
--- a/packages/desktop-client/src/components/budget/MobileBudgetTable.js
+++ b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
@@ -16,7 +16,7 @@ import { amountToInteger, integerToAmount } from 'loot-core/src/shared/util';
 import Add from '../../icons/v1/Add';
 import ArrowThinLeft from '../../icons/v1/ArrowThinLeft';
 import ArrowThinRight from '../../icons/v1/ArrowThinRight';
-import { colors, styles } from '../../style';
+import { theme, styles } from '../../style';
 import Button from '../common/Button';
 import Card from '../common/Card';
 import Label from '../common/Label';
@@ -46,14 +46,14 @@ function ToBudget({ toBudget, onClick }) {
     >
       <Label
         title={amount < 0 ? 'OVERBUDGETED' : 'TO BUDGET'}
-        style={{ color: colors.n1, flexShrink: 0 }}
+        style={{ color: theme.tableText, flexShrink: 0 }}
       />
       <Text
         style={[
           styles.smallText,
           {
             fontWeight: '500',
-            color: amount < 0 ? colors.r4 : colors.n1,
+            color: amount < 0 ? theme.errorText : theme.tableText,
           },
         ]}
       >
@@ -72,11 +72,11 @@ function Saved({ projected }) {
   return (
     <View style={{ flexDirection: 'column', alignItems: 'flex-start' }}>
       {projected ? (
-        <Label title="PROJECTED SAVINGS" style={{ color: colors.n1 }} />
+        <Label title="PROJECTED SAVINGS" style={{ color: theme.tableText }} />
       ) : (
         <Label
           title={isNegative ? 'OVERSPENT' : 'SAVED'}
-          style={{ color: colors.n1 }}
+          style={{ color: theme.tableText }}
         />
       )}
 
@@ -85,7 +85,11 @@ function Saved({ projected }) {
           styles.smallText,
           {
             fontWeight: '500',
-            color: projected ? colors.y3 : isNegative ? colors.r4 : colors.n1,
+            color: projected
+              ? theme.warningText
+              : isNegative
+              ? theme.errorText
+              : theme.tableText,
           },
         ]}
       >
@@ -273,7 +277,9 @@ class BudgetCategory extends PureComponent {
         // ref={el => (this.container = el)}
         style={[
           {
-            backgroundColor: editing ? colors.p11 : 'transparent',
+            backgroundColor: editing
+              ? theme.formInputBackground
+              : 'transparent',
             borderBottomWidth: 0,
             borderTopWidth: index > 0 ? 1 : 0,
           },
@@ -312,7 +318,7 @@ class BudgetCategory extends PureComponent {
             name="balance"
             binding={balance}
             style={[styles.smallText, { width: 90, textAlign: 'right' }]}
-            getStyle={value => value < 0 && { color: colors.r4 }}
+            getStyle={value => value < 0 && { color: theme.errorText }}
             type="financial"
           />
         </View>
@@ -381,7 +387,8 @@ class TotalsRow extends PureComponent {
         style={{
           flexDirection: 'row',
           alignItems: 'center',
-          backgroundColor: colors.n11,
+          color: theme.tableHeaderText,
+          backgroundColor: theme.tableHeaderBackground,
         }}
         data-testid="totals"
       >
@@ -529,7 +536,7 @@ class IncomeCategory extends PureComponent {
 //           flexDirection: 'row',
 //           justifyContent: 'flex-end',
 //           alignItems: 'stretch',
-//           backgroundColor: colors.n10,
+//           backgroundColor: colorsm.tableBackground,
 //           padding: 5,
 //           height: 45
 //         }}
@@ -674,7 +681,10 @@ class IncomeBudgetGroup extends Component {
             }
             nameTextStyle={{ fontWeight: '500' }}
             amountTextStyle={{ fontWeight: '500' }}
-            style={{ backgroundColor: colors.n11 }}
+            style={{
+              backgroundColor: theme.tableHeaderBackground,
+              color: theme.tableHeaderText,
+            }}
           />
 
           {group.categories.map((category, index) => {
@@ -892,9 +902,10 @@ export class BudgetTable extends Component {
               flex: '1 0 auto',
               padding: 10,
               paddingRight: 14,
-              backgroundColor: 'white',
+              backgroundColor: theme.tableBackground,
               borderBottomWidth: 1,
-              borderColor: colors.n9,
+              borderColor: theme.tableBorder,
+              color: theme.tableText,
             }}
           >
             {type === 'report' ? (
@@ -908,13 +919,16 @@ export class BudgetTable extends Component {
             <View style={{ flex: 1 }} />
 
             <View style={{ width: 90 }}>
-              <Label title="BUDGETED" style={{ color: colors.n1 }} />
+              <Label title="BUDGETED" style={{ color: theme.tableText }} />
               <CellValue
                 binding={reportBudget.totalBudgetedExpense}
                 type="financial"
                 style={[
                   styles.smallText,
-                  { color: colors.n1, textAlign: 'right', fontWeight: '500' },
+                  {
+                    textAlign: 'right',
+                    fontWeight: '500',
+                  },
                 ]}
                 formatter={value => {
                   return format(-parseFloat(value || '0'), 'financial');
@@ -922,13 +936,13 @@ export class BudgetTable extends Component {
               />
             </View>
             <View style={{ width: 90 }}>
-              <Label title="BALANCE" style={{ color: colors.n1 }} />
+              <Label title="BALANCE" style={{ color: theme.tableText }} />
               <CellValue
                 binding={rolloverBudget.totalBalance}
                 type="financial"
                 style={[
                   styles.smallText,
-                  { color: colors.n1, textAlign: 'right', fontWeight: '500' },
+                  { textAlign: 'right', fontWeight: '500' },
                 ]}
               />
             </View>
@@ -941,7 +955,7 @@ export class BudgetTable extends Component {
               //   ref={el => (this.list = el)}
               //   keyboardShouldPersistTaps="always"
               //   refreshControl={refreshControl}
-              //   style={{ backgroundColor: colors.n10 }}
+              //   style={{ backgroundColor: colorsm.tableBackground }}
               //   automaticallyAdjustContentInsets={false}
               // >
               <View>
@@ -1034,7 +1048,8 @@ function BudgetHeader({
         flexShrink: 0,
         height: 50,
         justifyContent: 'center',
-        backgroundColor: colors.p5,
+        backgroundColor: theme.buttonPrimaryBackground,
+        color: theme.buttonPrimaryText,
       }}
     >
       {!editMode && (
@@ -1052,7 +1067,7 @@ function BudgetHeader({
             },
           ]}
         >
-          <ArrowThinLeft style={{ color: colors.n11 }} width="15" height="15" />
+          <ArrowThinLeft style={{ color: 'inherit' }} width="15" height="15" />
         </Button>
       )}
       <Text
@@ -1061,7 +1076,6 @@ function BudgetHeader({
           {
             marginTop: 12,
             marginBottom: 12,
-            color: colors.n11,
             textAlign: 'center',
             // zIndex: -1
           },
@@ -1079,7 +1093,6 @@ function BudgetHeader({
             { position: 'absolute', top: 0, bottom: 0, right: 0 },
           ]}
           textStyle={{
-            color: colors.n11,
             fontSize: 15,
             fontWeight: '500',
           }}
@@ -1095,7 +1108,7 @@ function BudgetHeader({
             style={[buttonStyle, { opacity: nextEnabled ? 1 : 0.6 }]}
           >
             <ArrowThinRight
-              style={{ color: colors.n11 }}
+              style={{ color: 'inherit' }}
               width="15"
               height="15"
             />
@@ -1103,7 +1116,7 @@ function BudgetHeader({
 
           <SyncButton
             style={{
-              color: 'white',
+              color: theme.buttonPrimaryText,
               position: 'absolute',
               top: 0,
               bottom: 0,
diff --git a/packages/desktop-client/src/components/budget/MobileTable.js b/packages/desktop-client/src/components/budget/MobileTable.js
index 2123cfe155c..83a79bd0a5b 100644
--- a/packages/desktop-client/src/components/budget/MobileTable.js
+++ b/packages/desktop-client/src/components/budget/MobileTable.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { colors } from '../../style';
+import { theme } from '../../style';
 import View from '../common/View';
 
 export const ROW_HEIGHT = 50;
@@ -12,7 +12,7 @@ export const ListItem = ({ children, style, ...props }) => {
         {
           height: ROW_HEIGHT,
           borderBottomWidth: 1,
-          borderColor: colors.border,
+          borderColor: theme.tableBorder,
           flexDirection: 'row',
           alignItems: 'center',
           paddingLeft: 10,
diff --git a/packages/desktop-client/src/components/budget/MonthCountSelector.js b/packages/desktop-client/src/components/budget/MonthCountSelector.js
index d34dbf7a7f7..3a00a60b428 100644
--- a/packages/desktop-client/src/components/budget/MonthCountSelector.js
+++ b/packages/desktop-client/src/components/budget/MonthCountSelector.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import CalendarIcon from '../../icons/v2/Calendar';
-import { colors } from '../../style';
+import { theme } from '../../style';
 import View from '../common/View';
 
 import { useBudgetMonthCount } from './BudgetMonthCountContext';
@@ -29,7 +29,7 @@ export function MonthCountSelector({ maxMonths, onChange }) {
     calendars.push(
       <Calendar
         key={i}
-        color={maxMonths >= i ? colors.n5 : colors.n8}
+        color={maxMonths >= i ? theme.pageText : theme.pageTextSubdued}
         onClick={() => onChange(i)}
       />,
     );
diff --git a/packages/desktop-client/src/components/budget/MonthPicker.js b/packages/desktop-client/src/components/budget/MonthPicker.js
index c9520fadbb7..325569ce44b 100644
--- a/packages/desktop-client/src/components/budget/MonthPicker.js
+++ b/packages/desktop-client/src/components/budget/MonthPicker.js
@@ -3,7 +3,7 @@ import { useState } from 'react';
 import * as monthUtils from 'loot-core/src/shared/months';
 
 import useResizeObserver from '../../hooks/useResizeObserver';
-import { styles, colors } from '../../style';
+import { styles, theme } from '../../style';
 import View from '../common/View';
 
 export const MonthPicker = ({
@@ -106,12 +106,12 @@ export const MonthPicker = ({
                 },
                 !isMonthBudgeted && {
                   textDecoration: 'line-through',
-                  color: colors.n7,
+                  color: theme.pageTextSubdued,
                 },
                 styles.smallText,
                 selected && {
-                  backgroundColor: colors.p6,
-                  color: 'white',
+                  backgroundColor: theme.tableBorderHover,
+                  color: theme.buttonPrimaryText,
                 },
                 (hovered || selected) && {
                   borderRadius: 0,
@@ -123,7 +123,7 @@ export const MonthPicker = ({
                   },
                 hovered &&
                   selected && {
-                    backgroundColor: colors.p7,
+                    backgroundColor: theme.tableBorderHover,
                   },
                 (idx === firstSelectedIndex ||
                   (idx === hoverId && !selected)) && {
@@ -151,7 +151,9 @@ export const MonthPicker = ({
                       left: 0,
                       fontSize: 10,
                       fontWeight: 'bold',
-                      color: isMonthBudgeted ? '#272630' : colors.n7,
+                      color: isMonthBudgeted
+                        ? theme.pageText
+                        : theme.pageTextSubdued,
                     },
                   ]}
                 >
diff --git a/packages/desktop-client/src/components/budget/constants.js b/packages/desktop-client/src/components/budget/constants.js
index d0ac62ba30e..0752281de2a 100644
--- a/packages/desktop-client/src/components/budget/constants.js
+++ b/packages/desktop-client/src/components/budget/constants.js
@@ -1,4 +1,3 @@
-export const INCOME_HEADER_HEIGHT = 70;
 export const MONTH_BOX_SHADOW =
   '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)';
 export const MONTH_RIGHT_PADDING = 5;
diff --git a/packages/desktop-client/src/components/budget/misc.js b/packages/desktop-client/src/components/budget/misc.js
index 376ac186fd1..5c1595e3e0a 100644
--- a/packages/desktop-client/src/components/budget/misc.js
+++ b/packages/desktop-client/src/components/budget/misc.js
@@ -12,7 +12,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
 import ExpandArrow from '../../icons/v0/ExpandArrow';
 import CheveronDown from '../../icons/v1/CheveronDown';
 import DotsHorizontalTriple from '../../icons/v1/DotsHorizontalTriple';
-import { styles, colors } from '../../style';
+import { styles, theme } from '../../style';
 import Button from '../common/Button';
 import Menu from '../common/Menu';
 import Text from '../common/Text';
@@ -29,7 +29,6 @@ import { Row, InputCell, ROW_HEIGHT } from '../table';
 import { Tooltip, IntersectionBoundary } from '../tooltips';
 
 import BudgetSummaries from './BudgetSummaries';
-import { INCOME_HEADER_HEIGHT, MONTH_BOX_SHADOW } from './constants';
 import { MonthPicker } from './MonthPicker';
 import { MonthsProvider, MonthsContext } from './MonthsContext';
 import { separateGroups, findSortDown, findSortUp } from './util';
@@ -215,7 +214,7 @@ export class BudgetTable extends Component {
               backgroundColor: 'transparent',
             },
             '& ::-webkit-scrollbar-thumb:vertical': {
-              backgroundColor: 'white',
+              backgroundColor: theme.tableBackground,
             },
           },
         ]}
@@ -315,7 +314,7 @@ function SidebarCategory({
   dragging,
   editing,
   style,
-  borderColor = colors.border,
+  borderColor = theme.tableBorder,
   isLast,
   onDragChange,
   onEditMonth,
@@ -355,12 +354,12 @@ function SidebarCategory({
             e.stopPropagation();
             setMenuOpen(true);
           }}
-          style={{ color: 'currentColor', padding: 3 }}
+          style={{ color: theme.tableText, padding: 3 }}
         >
           <CheveronDown
             width={14}
             height={14}
-            style={{ color: 'currentColor' }}
+            style={{ color: theme.tableText }}
           />
         </Button>
         {menuOpen && (
@@ -396,7 +395,7 @@ function SidebarCategory({
       <View style={{ flex: 1 }} />
       <NotesButton
         id={category.id}
-        style={dragging && { color: 'currentColor' }}
+        style={dragging && { color: theme.tableText }}
       />
     </View>
   );
@@ -411,14 +410,17 @@ function SidebarCategory({
         },
         !dragging &&
           !dragPreview && {
-            '&:hover button': { display: 'flex', color: colors.n1 },
+            '&:hover button': {
+              display: 'flex',
+              color: theme.tableText,
+            },
           },
-        dragging && { color: colors.n8 },
+        dragging && { color: theme.tableTextHover },
 
         // The zIndex here forces the the view on top of a row below
         // it that may be "collapsed" and show a border on top
         dragPreview && {
-          backgroundColor: 'white',
+          backgroundColor: theme.tableBackground,
           zIndex: 10000,
           borderRadius: 6,
           overflow: 'hidden',
@@ -468,7 +470,7 @@ function SidebarGroup({
   dragPreview,
   innerRef,
   style,
-  borderColor = colors.border,
+  borderColor = theme.tableBorder,
   onEdit,
   onSave,
   onDelete,
@@ -575,9 +577,9 @@ function SidebarGroup({
         style,
         {
           width: 200,
-          backgroundColor: colors.n11,
+          backgroundColor: theme.tableHeaderBackground,
           '& button': { display: 'none' },
-          '&:hover button': { display: 'flex', color: colors.n1 },
+          '&:hover button': { display: 'flex', color: theme.tableTextHover },
         },
         dragPreview && {
           paddingLeft: 10,
@@ -598,7 +600,7 @@ function SidebarGroup({
         formatter={value => displayed}
         width="flex"
         exposed={editing}
-        borderColor={colors.border}
+        borderColor={theme.tableBorder}
         onUpdate={value => {
           if (temporary) {
             if (value === '') {
@@ -635,7 +637,7 @@ function RenderMonths({ component: Component, editingIndex, args, style }) {
         <View
           style={[
             { flex: 1 },
-            { borderLeft: '1px solid ' + colors.border },
+            { borderLeft: '1px solid ' + theme.tableBorder },
             style,
           ]}
         >
@@ -657,20 +659,20 @@ const BudgetTotals = memo(function BudgetTotals({
     <View
       data-testid="budget-totals"
       style={{
-        backgroundColor: 'white',
+        color: theme.tableHeaderText,
+        backgroundColor: theme.tableBackground,
         flexDirection: 'row',
         flexShrink: 0,
-        boxShadow: MONTH_BOX_SHADOW,
+        boxShadow: styles.cardShadow,
         marginLeft: 5,
         marginRight: 5 + getScrollbarWidth(),
         borderRadius: '4px 4px 0 0',
-        borderBottom: '1px solid ' + colors.border,
+        borderBottom: '1px solid ' + theme.tableBorder,
       }}
     >
       <View
         style={{
           width: 200,
-          color: colors.n4,
           justifyContent: 'center',
           paddingLeft: 15,
           paddingRight: 5,
@@ -692,7 +694,7 @@ const BudgetTotals = memo(function BudgetTotals({
           <DotsHorizontalTriple
             width={15}
             height={15}
-            style={{ color: colors.n5 }}
+            style={{ color: 'inherit' }}
           />
           {menuOpen && (
             <Tooltip
@@ -783,8 +785,9 @@ function ExpenseGroup({
   return (
     <Row
       collapsed={true}
-      backgroundColor={colors.n11}
       style={{
+        backgroundColor: theme.tableRowHeaderBackground,
+        color: theme.tableRowHeaderText,
         fontWeight: 600,
         opacity: group.hidden ? 0.33 : undefined,
       }}
@@ -937,8 +940,11 @@ function IncomeGroup({
   return (
     <Row
       collapsed={true}
-      backgroundColor={colors.n11}
-      style={{ fontWeight: 600 }}
+      style={{
+        fontWeight: 600,
+        color: theme.tableHeaderText,
+        backgroundColor: theme.tableRowHeaderBackground,
+      }}
     >
       <SidebarGroup
         group={group}
@@ -1154,9 +1160,9 @@ const BudgetCategories = memo(
       <View
         style={{
           marginBottom: 10,
-          backgroundColor: 'white',
+          backgroundColor: theme.tableBackground,
           overflow: 'hidden',
-          boxShadow: MONTH_BOX_SHADOW,
+          boxShadow: styles.cardShadow,
           borderRadius: '0 0 4px 4px',
           flex: 1,
         }}
@@ -1166,7 +1172,7 @@ const BudgetCategories = memo(
           switch (item.type) {
             case 'new-group':
               content = (
-                <Row style={{ backgroundColor: colors.n11 }}>
+                <Row style={{ backgroundColor: theme.tableHeaderBackground }}>
                   <SidebarGroup
                     group={{ id: 'new', name: '' }}
                     editing={true}
@@ -1239,8 +1245,7 @@ const BudgetCategories = memo(
               content = (
                 <View
                   style={{
-                    height: INCOME_HEADER_HEIGHT,
-                    backgroundColor: 'white',
+                    height: styles.incomeHeaderHeight,
                   }}
                 >
                   <IncomeHeader
@@ -1303,7 +1308,9 @@ const BudgetCategories = memo(
               <View
                 style={
                   !dragState && {
-                    ':hover': { backgroundColor: '#fcfcfc' },
+                    ':hover': {
+                      backgroundColor: theme.tableRowBackgroundHover,
+                    },
                   }
                 }
               >
diff --git a/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
index c67b4fa8ebc..2e4408dfcc6 100644
--- a/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
@@ -8,7 +8,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
 import DotsHorizontalTriple from '../../../icons/v1/DotsHorizontalTriple';
 import ArrowButtonDown1 from '../../../icons/v2/ArrowButtonDown1';
 import ArrowButtonUp1 from '../../../icons/v2/ArrowButtonUp1';
-import { colors, styles } from '../../../style';
+import { theme, styles } from '../../../style';
 import AlignedText from '../../common/AlignedText';
 import Block from '../../common/Block';
 import Button from '../../common/Button';
@@ -23,7 +23,6 @@ import NamespaceContext from '../../spreadsheet/NamespaceContext';
 import useSheetName from '../../spreadsheet/useSheetName';
 import useSheetValue from '../../spreadsheet/useSheetValue';
 import { Tooltip } from '../../tooltips';
-import { MONTH_BOX_SHADOW } from '../constants';
 
 import HoldTooltip from './HoldTooltip';
 import { useRollover } from './RolloverContext';
@@ -45,10 +44,11 @@ function TotalsList({ prevMonthName, collapsed }: TotalsListProps) {
         !collapsed && {
           padding: '5px 0',
           marginTop: 17,
-          backgroundColor: colors.n11,
+          backgroundColor: theme.tableRowHeaderBackground,
+          color: theme.tableRowHeaderText,
           borderTopWidth: 1,
           borderBottomWidth: 1,
-          borderColor: colors.n9,
+          borderColor: theme.tableBorder,
         },
         collapsed && {
           padding: 7,
@@ -186,11 +186,13 @@ function ToBudget({
                   fontWeight: 400,
                   userSelect: 'none',
                   cursor: 'pointer',
-                  color: isNegative ? colors.r4 : colors.p5,
+                  color: isNegative ? theme.errorText : theme.pageTextPositive,
                   marginBottom: -1,
                   borderBottom: '1px solid transparent',
                   ':hover': {
-                    borderColor: isNegative ? colors.r4 : colors.p5,
+                    borderColor: isNegative
+                      ? theme.errorText
+                      : theme.pageTextPositive,
                   },
                 },
               ])}
@@ -289,8 +291,9 @@ export function BudgetSummary({
     <View
       data-testid="budget-summary"
       style={{
-        backgroundColor: 'white',
-        boxShadow: MONTH_BOX_SHADOW,
+        backgroundColor: theme.tableBackground,
+        color: theme.tableText,
+        boxShadow: styles.cardShadow,
         borderRadius: 6,
         marginLeft: 0,
         marginRight: 0,
@@ -331,7 +334,7 @@ export function BudgetSummary({
                 width={13}
                 height={13}
                 // The margin is to make it the exact same size as the dots button
-                style={{ color: colors.n6, margin: 1 }}
+                style={{ color: theme.tableText, margin: 1 }}
               />
             </Button>
           </View>
@@ -366,7 +369,7 @@ export function BudgetSummary({
                 width={15}
                 height={15}
                 tooltipPosition="bottom-right"
-                defaultColor={colors.n6}
+                defaultColor={theme.altMenuItemTextHeader}
               />
             </View>
             <View style={{ userSelect: 'none', marginLeft: 2 }}>
@@ -374,7 +377,7 @@ export function BudgetSummary({
                 <DotsHorizontalTriple
                   width={15}
                   height={15}
-                  style={{ color: colors.n5 }}
+                  style={{ color: theme.alt2PillText }}
                 />
               </Button>
               {menuOpen && (
@@ -426,8 +429,8 @@ export function BudgetSummary({
               alignItems: 'center',
               padding: '10px 20px',
               justifyContent: 'space-between',
-              backgroundColor: colors.n11,
-              borderTop: '1px solid ' + colors.n10,
+              backgroundColor: theme.tableHeaderBackground,
+              borderTop: '1px solid ' + theme.tableBorder,
             }}
           >
             <ToBudget
diff --git a/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx b/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx
index 9ce50237205..899041a5de4 100644
--- a/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx
@@ -6,7 +6,7 @@ import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';
 
 import useFeatureFlag from '../../../hooks/useFeatureFlag';
 import CheveronDown from '../../../icons/v1/CheveronDown';
-import { styles, colors } from '../../../style';
+import { styles, theme } from '../../../style';
 import CategoryAutocomplete from '../../autocomplete/CategorySelect';
 import Button from '../../common/Button';
 import InitialFocus from '../../common/InitialFocus';
@@ -19,7 +19,6 @@ import useSheetValue from '../../spreadsheet/useSheetValue';
 import { Row, Field, SheetCell } from '../../table';
 import { Tooltip, useTooltip } from '../../tooltips';
 import BalanceWithCarryover from '../BalanceWithCarryover';
-import { MONTH_RIGHT_PADDING } from '../constants';
 import {
   makeAmountGrey,
   addToBeBudgetedGroup,
@@ -188,43 +187,44 @@ function BalanceTooltip({
 }
 
 let headerLabelStyle = { flex: 1, padding: '0 5px', textAlign: 'right' };
-
+let valueStyle = { fontWeight: 600 };
 export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() {
   return (
     <View
       style={{
+        color: theme.tableHeaderText,
         flex: 1,
         flexDirection: 'row',
-        marginRight: MONTH_RIGHT_PADDING,
+        marginRight: styles.monthRightPadding,
         paddingTop: 10,
         paddingBottom: 10,
       }}
     >
       <View style={headerLabelStyle}>
-        <Text style={{ color: colors.n4 }}>Budgeted</Text>
+        <Text>Budgeted</Text>
         <CellValue
           binding={rolloverBudget.totalBudgeted}
           type="financial"
-          style={{ color: colors.n4, fontWeight: 600 }}
+          style={valueStyle}
           formatter={value => {
             return format(-parseFloat(value || '0'), 'financial');
           }}
         />
       </View>
       <View style={headerLabelStyle}>
-        <Text style={{ color: colors.n4 }}>Spent</Text>
+        <Text>Spent</Text>
         <CellValue
           binding={rolloverBudget.totalSpent}
           type="financial"
-          style={{ color: colors.n4, fontWeight: 600 }}
+          style={valueStyle}
         />
       </View>
       <View style={headerLabelStyle}>
-        <Text style={{ color: colors.n4 }}>Balance</Text>
+        <Text>Balance</Text>
         <CellValue
           binding={rolloverBudget.totalBalance}
           type="financial"
-          style={{ color: colors.n4, fontWeight: 600 }}
+          style={valueStyle}
         />
       </View>
     </View>
@@ -235,7 +235,7 @@ export function IncomeHeaderMonth() {
   return (
     <Row
       style={{
-        color: colors.n4,
+        color: theme.tableText,
         alignItems: 'center',
         paddingRight: 10,
       }}
@@ -251,7 +251,7 @@ type ExpenseGroupMonthProps = {
 export const ExpenseGroupMonth = memo(function ExpenseGroupMonth({
   group,
 }: ExpenseGroupMonthProps) {
-  let borderColor = colors.border;
+  let borderColor = theme.tableBorder;
   let { id } = group;
 
   return (
@@ -284,7 +284,7 @@ export const ExpenseGroupMonth = memo(function ExpenseGroupMonth({
         borderColor={borderColor}
         textAlign="right"
         style={[
-          { fontWeight: 600, paddingRight: MONTH_RIGHT_PADDING },
+          { fontWeight: 600, paddingRight: styles.monthRightPadding },
           styles.tnum,
         ]}
         valueProps={{
@@ -292,7 +292,7 @@ export const ExpenseGroupMonth = memo(function ExpenseGroupMonth({
           type: 'financial',
           privacyFilter: {
             style: {
-              paddingRight: MONTH_RIGHT_PADDING,
+              paddingRight: styles.monthRightPadding,
             },
           },
         }}
@@ -317,7 +317,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
   onBudgetAction,
   onShowActivity,
 }: ExpenseCategoryMonthProps) {
-  let borderColor = colors.border;
+  let borderColor = theme.tableBorder;
   let balanceTooltip = useTooltip();
   const [menuOpen, setMenuOpen] = useState(false);
   const [hover, setHover] = useState(false);
@@ -344,7 +344,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
           borderTopWidth: 1,
           borderBottomWidth: 1,
           borderColor,
-          backgroundColor: 'white',
+          backgroundColor: theme.tableBackground,
         }}
         onMouseOverCapture={() => setHover(true)}
         onMouseLeave={() => {
@@ -434,8 +434,8 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
             },
             {
               ':hover': {
-                boxShadow: 'inset 0 0 0 1px ' + colors.n7,
-                backgroundColor: 'white',
+                boxShadow: styles.cardShadow,
+                backgroundColor: theme.tableBackground,
               },
             },
           ]}
@@ -466,8 +466,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
       <Field
         name="spent"
         width="flex"
-        borderColor={borderColor}
-        style={{ textAlign: 'right' }}
+        style={{ textAlign: 'right', borderColor: borderColor }}
       >
         <span
           data-testid="category-month-spent"
@@ -487,8 +486,11 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
       <Field
         name="balance"
         width="flex"
-        borderColor={borderColor}
-        style={{ paddingRight: MONTH_RIGHT_PADDING, textAlign: 'right' }}
+        style={{
+          paddingRight: styles.monthRightPadding,
+          textAlign: 'right',
+          borderColor: borderColor,
+        }}
       >
         <span {...balanceTooltip.getOpenEvents()}>
           <BalanceWithCarryover
@@ -515,10 +517,10 @@ export function IncomeGroupMonth() {
       <SheetCell
         name="received"
         width="flex"
-        borderColor={colors.border}
+        borderColor={theme.tableBorder}
         textAlign="right"
         style={[
-          { fontWeight: 600, paddingRight: MONTH_RIGHT_PADDING },
+          { fontWeight: 600, paddingRight: styles.monthRightPadding },
           styles.tnum,
         ]}
         valueProps={{
@@ -526,7 +528,7 @@ export function IncomeGroupMonth() {
           type: 'financial',
           privacyFilter: {
             style: {
-              paddingRight: MONTH_RIGHT_PADDING,
+              paddingRight: styles.monthRightPadding,
             },
           },
         }}
@@ -552,9 +554,12 @@ export function IncomeCategoryMonth({
       <Field
         name="received"
         width="flex"
-        borderColor={colors.border}
         style={[
-          { paddingRight: MONTH_RIGHT_PADDING, textAlign: 'right' },
+          {
+            paddingRight: styles.monthRightPadding,
+            textAlign: 'right',
+            borderColor: theme.tableBorder,
+          },
           isLast && { borderBottomWidth: 0 },
         ]}
       >
diff --git a/packages/desktop-client/src/components/budget/util.js b/packages/desktop-client/src/components/budget/util.js
index a1ae12712d3..6d8b28cdaab 100644
--- a/packages/desktop-client/src/components/budget/util.js
+++ b/packages/desktop-client/src/components/budget/util.js
@@ -1,6 +1,6 @@
 import { createContext } from 'react';
 
-import { colors } from '../../style';
+import { theme } from '../../style';
 
 export let CategoryGroupsContext = createContext([]);
 
@@ -24,7 +24,7 @@ export function separateGroups(categoryGroups) {
 
 export function makeAmountGrey(value) {
   return value === 0 || value === '0' || value === ''
-    ? { color: colors.n10 }
+    ? { color: theme.tableTextInactive }
     : null;
 }
 
@@ -35,13 +35,18 @@ export function makeAmountStyle(value) {
   }
 
   if (value < 0) {
-    return { color: colors.r4 };
+    return { color: theme.errorText };
   }
 }
 
 export function makeAmountFullStyle(value) {
   return {
-    color: value < 0 ? colors.r4 : value === 0 ? colors.n10 : colors.g4,
+    color:
+      value < 0
+        ? theme.errorText
+        : value === 0
+        ? theme.pageTextSubdued
+        : theme.noticeText,
   };
 }
 
diff --git a/packages/desktop-client/src/components/mobile/MobileForms.js b/packages/desktop-client/src/components/mobile/MobileForms.js
index 67757db0436..fdc25c4b1ca 100644
--- a/packages/desktop-client/src/components/mobile/MobileForms.js
+++ b/packages/desktop-client/src/components/mobile/MobileForms.js
@@ -2,13 +2,12 @@ import { forwardRef } from 'react';
 
 import { css } from 'glamor';
 
-import { theme } from '../../style';
+import { theme, styles } from '../../style';
 import Button from '../common/Button';
 import Input from '../common/Input';
 import Text from '../common/Text';
 import View from '../common/View';
 
-export const EDITING_PADDING = 12;
 const FIELD_HEIGHT = 40;
 
 export function FieldLabel({ title, flush, style }) {
@@ -20,7 +19,7 @@ export function FieldLabel({ title, flush, style }) {
           marginTop: flush ? 0 : 25,
           fontSize: 13,
           color: theme.tableRowHeaderText,
-          paddingLeft: EDITING_PADDING,
+          paddingLeft: styles.mobileEditingPadding,
           textTransform: 'uppercase',
           userSelect: 'none',
         },
@@ -38,7 +37,7 @@ const valueStyle = {
   marginLeft: -1,
   marginRight: -1,
   height: FIELD_HEIGHT,
-  paddingHorizontal: EDITING_PADDING,
+  paddingHorizontal: styles.mobileEditingPadding,
 };
 
 export const InputField = forwardRef(function InputField(
@@ -118,7 +117,7 @@ export function BooleanField({ checked, onUpdate, style }) {
       onChange={e => onUpdate(e.target.checked)}
       {...css([
         {
-          marginInline: EDITING_PADDING,
+          marginInline: styles.mobileEditingPadding,
         },
         style,
       ])}
diff --git a/packages/desktop-client/src/components/modals/BudgetSummary.js b/packages/desktop-client/src/components/modals/BudgetSummary.js
index 4e78e8881d4..1fe3739a8a5 100644
--- a/packages/desktop-client/src/components/modals/BudgetSummary.js
+++ b/packages/desktop-client/src/components/modals/BudgetSummary.js
@@ -3,7 +3,7 @@ import React from 'react';
 import { rolloverBudget } from 'loot-core/src/client/queries';
 import * as monthUtils from 'loot-core/src/shared/months';
 
-import { colors, styles } from '../../style';
+import { theme, styles } from '../../style';
 import Button from '../common/Button';
 import Modal from '../common/Modal';
 import Text from '../common/Text';
@@ -33,6 +33,7 @@ function BudgetSummary({ month, modalProps }) {
               style={[
                 styles.text,
                 {
+                  color: theme.tableText,
                   fontWeight: '600',
                   textAlign: 'right',
                   marginRight: 10,
@@ -84,7 +85,8 @@ function BudgetSummary({ month, modalProps }) {
                 {
                   fontWeight: '600',
                   fontSize: 22,
-                  color: budgetAmount < 0 ? colors.r4 : colors.n1,
+                  color:
+                    budgetAmount < 0 ? theme.errorText : theme.tableTextHover,
                 },
               ]}
             >
diff --git a/packages/desktop-client/src/components/transactions/MobileTransaction.js b/packages/desktop-client/src/components/transactions/MobileTransaction.js
index d5d3b66b6c2..9695be5a7d9 100644
--- a/packages/desktop-client/src/components/transactions/MobileTransaction.js
+++ b/packages/desktop-client/src/components/transactions/MobileTransaction.js
@@ -50,7 +50,7 @@ import SvgTrash from '../../icons/v1/Trash';
 import ArrowsSynchronize from '../../icons/v2/ArrowsSynchronize';
 import CheckCircle1 from '../../icons/v2/CheckCircle1';
 import SvgPencilWriteAlternate from '../../icons/v2/PencilWriteAlternate';
-import { styles, colors, theme } from '../../style';
+import { styles, theme } from '../../style';
 import Button from '../common/Button';
 import Text from '../common/Text';
 import TextOneLine from '../common/TextOneLine';
@@ -61,7 +61,6 @@ import {
   TapField,
   InputField,
   BooleanField,
-  EDITING_PADDING,
 } from '../mobile/MobileForms';
 
 const zIndices = { SECTION_HEADING: 10 };
@@ -140,12 +139,12 @@ export function DateHeader({ date }) {
     <ListItem
       style={{
         height: 25,
-        backgroundColor: colors.n10,
-        borderColor: colors.n9,
+        backgroundColor: theme.tableRowHeaderBackground,
+        borderColor: theme.tableBorder,
         justifyContent: 'center',
       }}
     >
-      <Text style={[styles.text, { fontSize: 13, color: colors.n4 }]}>
+      <Text style={[styles.text, { fontSize: 13, color: theme.tableText }]}>
         {monthUtils.format(date, 'MMMM dd, yyyy')}
       </Text>
     </ListItem>
@@ -157,13 +156,13 @@ function Status({ status }) {
 
   switch (status) {
     case 'missed':
-      color = colors.r3;
+      color = theme.errorText;
       break;
     case 'due':
-      color = colors.y3;
+      color = theme.warningText;
       break;
     case 'upcoming':
-      color = colors.n4;
+      color = theme.tableText;
       break;
     default:
   }
@@ -339,13 +338,13 @@ class TransactionEditInner extends PureComponent {
         style={{
           margin: 10,
           marginTop: 3,
-          backgroundColor: colors.n11,
+          backgroundColor: theme.tableHeaderBackground,
           flex: 1,
           borderRadius: 4,
 
           // This shadow make the card "pop" off of the screen below
           // it
-          shadowColor: colors.n3,
+          shadowColor: theme.cardshadow,
           shadowOffset: { width: 0, height: 0 },
           shadowRadius: 4,
           shadowOpacity: 1,
@@ -362,8 +361,8 @@ class TransactionEditInner extends PureComponent {
           <View
             style={{
               borderBottomWidth: 1,
-              borderColor: colors.n9,
-              backgroundColor: 'white',
+              borderColor: theme.tableBorder,
+              backgroundColor: theme.tableBackground,
               alignItems: 'center',
               flexDirection: 'row',
               flexShrink: 0,
@@ -383,13 +382,17 @@ class TransactionEditInner extends PureComponent {
             >
               <CheveronLeft
                 style={{
-                  color: colors.b5,
+                  color: theme.formLabelText,
                   width: 32,
                   height: 32,
                 }}
               />
               <Text
-                style={{ ...styles.text, color: colors.b5, fontWeight: 500 }}
+                style={{
+                  ...styles.text,
+                  color: theme.formLabelText,
+                  fontWeight: 500,
+                }}
               >
                 Back
               </Text>
@@ -421,7 +424,6 @@ class TransactionEditInner extends PureComponent {
             automaticallyAdjustContentInsets={false}
             keyboardShouldPersistTaps="always"
             style={{
-              backgroundColor: colors.n11,
               flexGrow: 1,
               overflow: 'hidden',
             }}
@@ -508,7 +510,7 @@ class TransactionEditInner extends PureComponent {
                   onClick={() => this.onClick(transaction.id, 'category')}
                 />
               ) : (
-                <Text style={{ paddingLeft: EDITING_PADDING }}>
+                <Text style={{ paddingLeft: styles.mobileEditingPadding }}>
                   Split transaction editing is not supported on mobile at this
                   time.
                 </Text>
@@ -582,8 +584,8 @@ class TransactionEditInner extends PureComponent {
                   style={{
                     borderWidth: 0,
                     paddingVertical: 5,
-                    marginLeft: EDITING_PADDING,
-                    marginRight: EDITING_PADDING,
+                    marginLeft: styles.mobileEditingPadding,
+                    marginRight: styles.mobileEditingPadding,
                     marginTop: 20,
                     marginBottom: 15,
                     backgroundColor: 'transparent',
@@ -593,11 +595,11 @@ class TransactionEditInner extends PureComponent {
                   <SvgTrash
                     width={17}
                     height={17}
-                    style={{ color: colors.r4 }}
+                    style={{ color: theme.errorText }}
                   />
                   <Text
                     style={{
-                      color: colors.r4,
+                      color: theme.errorText,
                       marginLeft: 5,
                       userSelect: 'none',
                     }}
@@ -611,22 +613,29 @@ class TransactionEditInner extends PureComponent {
 
           <View
             style={{
-              paddingLeft: EDITING_PADDING,
-              paddingRight: EDITING_PADDING,
+              paddingLeft: styles.mobileEditingPadding,
+              paddingRight: styles.mobileEditingPadding,
               paddingTop: 15,
               paddingBottom: 15,
-              backgroundColor: colors.n11,
+              backgroundColor: theme.tableHeaderBackground,
               borderTopWidth: 1,
-              borderColor: colors.n10,
+              borderColor: theme.tableBorder,
               marginTop: 'auto',
               flexShrink: 0,
             }}
           >
             {adding ? (
               <Button onClick={() => this.onAdd()}>
-                <SvgAdd width={17} height={17} style={{ color: colors.b3 }} />
+                <SvgAdd
+                  width={17}
+                  height={17}
+                  style={{ color: theme.altFormLabelText }}
+                />
                 <Text
-                  style={[styles.text, { color: colors.b3, marginLeft: 5 }]}
+                  style={[
+                    styles.text,
+                    { color: theme.altFormLabelText, marginLeft: 5 },
+                  ]}
                 >
                   Add transaction
                 </Text>
@@ -634,10 +643,13 @@ class TransactionEditInner extends PureComponent {
             ) : (
               <Button onClick={() => this.onSave()}>
                 <SvgPencilWriteAlternate
-                  style={{ width: 16, height: 16, color: colors.n1 }}
+                  style={{ width: 16, height: 16, color: theme.formInputText }}
                 />
                 <Text
-                  style={[styles.text, { marginLeft: 6, color: colors.n1 }]}
+                  style={[
+                    styles.text,
+                    { marginLeft: 6, color: theme.formInputText },
+                  ]}
                 >
                   Save changes
                 </Text>
@@ -694,7 +706,7 @@ function TransactionEditUnconnected(props) {
   let adding = false;
   let deleted = false;
 
-  useSetThemeColor(colors.p5);
+  useSetThemeColor(theme.buttonPrimaryBackground);
 
   useEffect(() => {
     // May as well update categories / accounts when transaction ID changes
@@ -818,7 +830,7 @@ function TransactionEditUnconnected(props) {
     <View
       style={{
         flex: 1,
-        backgroundColor: colors.p5,
+        backgroundColor: theme.buttonPrimaryBackground,
       }}
     >
       <TransactionEditInner
@@ -903,7 +915,7 @@ class Transaction extends PureComponent {
     let isPreview = isPreviewId(id);
     let textStyle = isPreview && {
       fontStyle: 'italic',
-      color: colors.n5,
+      color: theme.tableText,
     };
 
     return (
@@ -919,7 +931,7 @@ class Transaction extends PureComponent {
         <ListItem
           style={[
             { flex: 1, height: 60, padding: '5px 10px' }, // remove padding when Button is back
-            isPreview && { backgroundColor: colors.n11 },
+            isPreview && { backgroundColor: theme.tableHeaderBackground },
             style,
           ]}
         >
@@ -931,7 +943,7 @@ class Transaction extends PureComponent {
                     width: 12,
                     height: 12,
                     marginRight: 5,
-                    color: textStyle.color || colors.n1,
+                    color: textStyle.color || theme.menuItemText,
                   }}
                 />
               )}
@@ -941,7 +953,7 @@ class Transaction extends PureComponent {
                   textStyle,
                   { fontSize: 14, fontWeight: added ? '600' : '400' },
                   prettyDescription === '' && {
-                    color: colors.n6,
+                    color: theme.pageText,
                     fontStyle: 'italic',
                   },
                 ]}
@@ -963,7 +975,9 @@ class Transaction extends PureComponent {
                   style={{
                     width: 11,
                     height: 11,
-                    color: cleared ? colors.g6 : colors.n8,
+                    color: cleared
+                      ? theme.noticeAccent
+                      : theme.tableTextInactive,
                     marginRight: 5,
                   }}
                 />
@@ -973,7 +987,9 @@ class Transaction extends PureComponent {
                       fontSize: 11,
                       marginTop: 1,
                       fontWeight: '400',
-                      color: prettyCategory ? colors.n3 : colors.p7,
+                      color: prettyCategory
+                        ? theme.tableText
+                        : theme.pageTextPositive,
                       fontStyle: prettyCategory ? null : 'italic',
                       textAlign: 'left',
                     }}
@@ -1164,10 +1180,10 @@ function ListBoxSection({ section, state }) {
         <div
           {...headingProps}
           {...css(styles.smallText, {
-            backgroundColor: colors.n10,
-            borderBottom: `1px solid ${colors.n9}`,
-            borderTop: `1px solid ${colors.n9}`,
-            color: colors.n4,
+            backgroundColor: theme.tableRowHeaderBackground,
+            borderBottom: `1px solid ${theme.tableBorder}`,
+            borderTop: `1px solid ${theme.tableBorder}`,
+            color: theme.tableRowHeaderText,
             display: 'flex',
             justifyContent: 'center',
             paddingBottom: 4,
@@ -1215,10 +1231,12 @@ function Option({ isLast, item, state }) {
       {...mergeProps(optionProps, focusProps)}
       ref={ref}
       style={{
-        background: isSelected ? 'blueviolet' : 'transparent',
-        color: isSelected ? 'white' : null,
+        background: isSelected
+          ? theme.tableRowBackgroundHighlight
+          : theme.tableBackground,
+        color: isSelected ? theme.tableText : null,
         outline: isFocusVisible ? '2px solid orange' : 'none',
-        ...(!isLast && { borderBottom: `1px solid ${colors.border}` }),
+        ...(!isLast && { borderBottom: `1px solid ${theme.tableBorder}` }),
       }}
     >
       {item.rendered}
diff --git a/packages/desktop-client/src/style/styles.ts b/packages/desktop-client/src/style/styles.ts
index 0aa951ef22b..0c5c9e92342 100644
--- a/packages/desktop-client/src/style/styles.ts
+++ b/packages/desktop-client/src/style/styles.ts
@@ -10,6 +10,7 @@ export const styles = {
   cardShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
   monthRightPadding: 5,
   menuBorderRadius: 4,
+  mobileEditingPadding: 12,
   altMenuMaxHeight: 250,
   altMenuText: {
     fontSize: 13,
diff --git a/upcoming-release-notes/placeholder.md b/upcoming-release-notes/1513.md
similarity index 100%
rename from upcoming-release-notes/placeholder.md
rename to upcoming-release-notes/1513.md

From 6148e83944fb996663586621887cff03b9c1c4f2 Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Wed, 13 Sep 2023 13:46:53 +0100
Subject: [PATCH 03/10] Fix previous merge errors

---
 .../components/budget/MobileBudgetTable.js    | 35 +++++++++++--------
 .../src/components/budget/MonthPicker.js      |  7 ++--
 .../src/components/modals/BudgetSummary.js    |  2 +-
 .../transactions/MobileTransaction.js         | 12 +++++--
 .../desktop-client/src/style/themes/dark.ts   |  1 +
 .../src/style/themes/development.ts           |  1 +
 .../desktop-client/src/style/themes/light.ts  |  1 +
 7 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/packages/desktop-client/src/components/budget/MobileBudgetTable.js b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
index bae051d01cc..78532f24436 100644
--- a/packages/desktop-client/src/components/budget/MobileBudgetTable.js
+++ b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
@@ -57,7 +57,7 @@ function ToBudget({ toBudget, onClick }) {
         style={{
           ...styles.smallText,
           fontWeight: '500',
-          color: amount < 0 ? colors.r4 : colors.n1,
+          color: amount < 0 ? theme.errorText : theme.formInputText,
         }}
       >
         {format(amount, 'financial')}
@@ -94,7 +94,11 @@ function Saved({ projected }) {
         style={{
           ...styles.smallText,
           fontWeight: '500',
-          color: projected ? colors.y3 : isNegative ? colors.r4 : colors.n1,
+          color: projected
+            ? theme.warningText
+            : isNegative
+            ? theme.errorText
+            : theme.formInputText,
         }}
       >
         {format(saved, 'financial')}
@@ -267,7 +271,7 @@ class BudgetCategory extends PureComponent {
     let content = !category.hidden && (
       <ListItem
         style={{
-          backgroundColor: editing ? colors.p11 : 'transparent',
+          backgroundColor: editing ? theme.altTableTextEditing : 'transparent',
           borderBottomWidth: 0,
           borderTopWidth: index > 0 ? 1 : 0,
           ...style,
@@ -318,7 +322,7 @@ class BudgetCategory extends PureComponent {
               width: 90,
               textAlign: 'right',
             }}
-            getStyle={value => value < 0 && { color: colors.r4 }}
+            getStyle={value => value < 0 && { color: theme.errorText }}
             type="financial"
           />
         </View>
@@ -887,7 +891,7 @@ export function BudgetTable(props) {
             paddingRight: 14,
             backgroundColor: 'white',
             borderBottomWidth: 1,
-            borderColor: colors.n9,
+            borderColor: theme.formInputBorder,
           }}
         >
           {type === 'report' ? (
@@ -909,22 +913,25 @@ export function BudgetTable(props) {
               margin: '0 -8px',
               background:
                 showBudgetedCol && !show3Cols
-                  ? `linear-gradient(-45deg, ${colors.p5} 8px, transparent 0)`
+                  ? `linear-gradient(-45deg, ${theme.formInputBackgroundSelection} 8px, transparent 0)`
                   : !show3Cols
-                  ? `linear-gradient(45deg, ${colors.p5} 8px, transparent 0)`
+                  ? `linear-gradient(45deg, ${theme.formInputBackgroundSelection} 8px, transparent 0)`
                   : null,
               // 45deg to flip it to the lower left corner
             }}
           >
             {show3Cols || showBudgetedCol ? (
               <View style={{ width: 90, justifyContent: 'center' }}>
-                <Label title="BUDGETED" style={{ color: colors.n1 }} />
+                <Label
+                  title="BUDGETED"
+                  style={{ color: theme.buttonNormalText }}
+                />
                 <CellValue
                   binding={reportBudget.totalBudgetedExpense}
                   type="financial"
                   style={{
                     ...styles.smallText,
-                    color: colors.n1,
+                    color: theme.buttonNormalText,
                     textAlign: 'right',
                     fontWeight: '500',
                   }}
@@ -941,13 +948,13 @@ export function BudgetTable(props) {
                   justifyContent: 'center',
                 }}
               >
-                <Label title="SPENT" style={{ color: colors.n1 }} />
+                <Label title="SPENT" style={{ color: theme.formInputText }} />
                 <CellValue
                   binding={rolloverBudget.totalSpent}
                   type="financial"
                   style={{
                     ...styles.smallText,
-                    color: colors.n1,
+                    color: theme.formInputText,
                     textAlign: 'right',
                     fontWeight: '500',
                   }}
@@ -961,13 +968,13 @@ export function BudgetTable(props) {
               justifyContent: 'center',
             }}
           >
-            <Label title="BALANCE" style={{ color: colors.n1 }} />
+            <Label title="BALANCE" style={{ color: theme.formInputText }} />
             <CellValue
               binding={rolloverBudget.totalBalance}
               type="financial"
               style={{
                 ...styles.smallText,
-                color: colors.n1,
+                color: theme.formInputText,
                 textAlign: 'right',
                 fontWeight: '500',
               }}
@@ -1105,7 +1112,7 @@ function BudgetHeader({
           ...styles.mediumText,
           marginTop: 12,
           marginBottom: 12,
-          color: colors.n11,
+          color: theme.formInputTextSelected,
           textAlign: 'center',
           // zIndex: -1
         }}
diff --git a/packages/desktop-client/src/components/budget/MonthPicker.js b/packages/desktop-client/src/components/budget/MonthPicker.js
index e6a59edb9d5..4466edb38df 100644
--- a/packages/desktop-client/src/components/budget/MonthPicker.js
+++ b/packages/desktop-client/src/components/budget/MonthPicker.js
@@ -139,15 +139,16 @@ export const MonthPicker = ({
             >
               {size === 'small' ? monthName[0] : monthName}
               {showYearHeader && (
+                <View
                   style={{
                     position: 'absolute',
                     top: -14,
                     left: 0,
                     fontSize: 10,
                     fontWeight: 'bold',
-                    color: isMonthBudgeted 
-                        ? theme.pageText
-                        : theme.pageTextSubdued,
+                    color: isMonthBudgeted
+                      ? theme.pageText
+                      : theme.pageTextSubdued,
                   }}
                 >
                   {year}
diff --git a/packages/desktop-client/src/components/modals/BudgetSummary.js b/packages/desktop-client/src/components/modals/BudgetSummary.js
index 2f9b5f3819f..d4f3a82cba6 100644
--- a/packages/desktop-client/src/components/modals/BudgetSummary.js
+++ b/packages/desktop-client/src/components/modals/BudgetSummary.js
@@ -26,7 +26,7 @@ function ToBudget({ toBudget }) {
           ...styles.text,
           fontWeight: '600',
           fontSize: 22,
-          color: budgetAmount < 0 ? colors.r4 : colors.n1,
+          color: budgetAmount < 0 ? theme.errorText : theme.formInputText,
         }}
       >
         {format(budgetAmount, 'financial')}
diff --git a/packages/desktop-client/src/components/transactions/MobileTransaction.js b/packages/desktop-client/src/components/transactions/MobileTransaction.js
index 755e41ff34d..178aa539a6b 100644
--- a/packages/desktop-client/src/components/transactions/MobileTransaction.js
+++ b/packages/desktop-client/src/components/transactions/MobileTransaction.js
@@ -642,7 +642,11 @@ class TransactionEditInner extends PureComponent {
                   style={{ color: theme.altFormLabelText }}
                 />
                 <Text
-                  style={{ ...styles.text, color: theme.altFormLabelText, marginLeft: 5 }}
+                  style={{
+                    ...styles.text,
+                    color: theme.altFormLabelText,
+                    marginLeft: 5,
+                  }}
                 >
                   Add transaction
                 </Text>
@@ -653,7 +657,11 @@ class TransactionEditInner extends PureComponent {
                   style={{ width: 16, height: 16, color: theme.formInputText }}
                 />
                 <Text
-                  style={{ ...styles.text, marginLeft: 6, color: theme.formInputText }}
+                  style={{
+                    ...styles.text,
+                    marginLeft: 6,
+                    color: theme.formInputText,
+                  }}
                 >
                   Save changes
                 </Text>
diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts
index 6bb32f067e5..f0562ef0fbf 100644
--- a/packages/desktop-client/src/style/themes/dark.ts
+++ b/packages/desktop-client/src/style/themes/dark.ts
@@ -31,6 +31,7 @@ export const alt2TableText = tableText;
 export const tableTextSelected = colorPalette.navy150;
 export const tableTextHover = colorPalette.navy400;
 export const tableTextEditing = colorPalette.black;
+export const altTableTextEditing = tableTextEditing;
 export const tableTextEditingBackground = colorPalette.purple400;
 export const tableTextInactive = colorPalette.navy500;
 export const tableHeaderText = colorPalette.navy300;
diff --git a/packages/desktop-client/src/style/themes/development.ts b/packages/desktop-client/src/style/themes/development.ts
index e6a3f2aa2cc..5d1cc1235f7 100644
--- a/packages/desktop-client/src/style/themes/development.ts
+++ b/packages/desktop-client/src/style/themes/development.ts
@@ -30,6 +30,7 @@ export const alt2TableText = altTableText;
 export const tableTextSelected = colorPalette.red150;
 export const tableTextHover = colorPalette.red400;
 export const tableTextEditing = colorPalette.black;
+export const altTableTextEditing = tableTextEditing;
 export const tableTextEditingBackground = colorPalette.red200;
 export const tableTextInactive = colorPalette.red500;
 export const tableHeaderText = colorPalette.red700;
diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts
index 292d61143e7..b9aa1c5b432 100644
--- a/packages/desktop-client/src/style/themes/light.ts
+++ b/packages/desktop-client/src/style/themes/light.ts
@@ -31,6 +31,7 @@ export const alt2TableText = colorPalette.navy600;
 export const tableTextSelected = colorPalette.navy700;
 export const tableTextHover = colorPalette.navy900;
 export const tableTextEditing = colorPalette.navy50;
+export const altTableTextEditing = colorPalette.purple50;
 export const tableTextEditingBackground = colorPalette.blue500;
 export const tableTextInactive = colorPalette.navy500;
 export const tableHeaderText = colorPalette.navy600;

From f1566a41528cd47db48fa5f09ed884bdaf9403cb Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Wed, 13 Sep 2023 17:30:59 +0100
Subject: [PATCH 04/10] Consistency updates

---
 .../desktop-client/src/components/NotesButton.tsx  | 12 ++++++------
 .../src/components/Notifications.tsx               |  6 +++---
 .../src/components/UpdateNotification.tsx          | 11 +++++++++--
 .../src/components/budget/MobileBudgetTable.js     | 14 ++++++--------
 .../components/budget/rollover/BudgetSummary.tsx   |  2 --
 .../budget/rollover/rollover-components.tsx        | 13 ++++++-------
 6 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/packages/desktop-client/src/components/NotesButton.tsx b/packages/desktop-client/src/components/NotesButton.tsx
index 826cc937931..8301385bcf9 100644
--- a/packages/desktop-client/src/components/NotesButton.tsx
+++ b/packages/desktop-client/src/components/NotesButton.tsx
@@ -43,23 +43,23 @@ const markdownStyles = css({
   },
   '& blockquote': {
     paddingLeft: '0.75rem',
-    borderLeft: '3px solid ' + colors.p6,
+    borderLeft: '3px solid ' + theme.formInputBorderSelected,
     margin: 0,
   },
   '& hr': {
     borderTop: 'none',
     borderLeft: 'none',
     borderRight: 'none',
-    borderBottom: '1px solid ' + colors.p9,
+    borderBottom: '1px solid ' + theme.menuBorderHover,
   },
   '& code': {
-    backgroundColor: colors.p10,
+    backgroundColor: theme.menuBorderHover,
     padding: '0.1rem 0.5rem',
     borderRadius: '0.25rem',
   },
   '& pre': {
     padding: '0.5rem',
-    backgroundColor: colors.p10,
+    backgroundColor: theme.menuBorderHover,
     borderRadius: '0.5rem',
     margin: 0,
     ':not(:first-child)': {
@@ -72,7 +72,7 @@ const markdownStyles = css({
     },
   },
   '& table, & th, & td': {
-    border: '1px solid ' + colors.p9,
+    border: '1px solid ' + theme.menuBorderHover,
   },
   '& table': {
     borderCollapse: 'collapse',
@@ -145,7 +145,7 @@ export default function NotesButton({
   id,
   width = 12,
   height = 12,
-  defaultColor = theme.buttonNormalText,
+  defaultColor = theme.pageBackgroundModalActive,
   tooltipPosition,
   style,
 }: NotesButtonProps) {
diff --git a/packages/desktop-client/src/components/Notifications.tsx b/packages/desktop-client/src/components/Notifications.tsx
index d4379941586..f9b0c87486b 100644
--- a/packages/desktop-client/src/components/Notifications.tsx
+++ b/packages/desktop-client/src/components/Notifications.tsx
@@ -183,10 +183,10 @@ function Notification({
                 flexShrink: 0,
                 '&:hover, &:active': {
                   backgroundColor: positive
-                    ? theme.noticeBackground
+                    ? theme.altNoticeBackground
                     : error
-                    ? theme.errorBackground
-                    : theme.warningBackground,
+                    ? theme.altErrorBackground
+                    : theme.altWarningBackground,
                 },
               }}
             >
diff --git a/packages/desktop-client/src/components/UpdateNotification.tsx b/packages/desktop-client/src/components/UpdateNotification.tsx
index 5c286817565..358135d5e0d 100644
--- a/packages/desktop-client/src/components/UpdateNotification.tsx
+++ b/packages/desktop-client/src/components/UpdateNotification.tsx
@@ -51,8 +51,15 @@ export default function UpdateNotification() {
           <View style={{ flex: 1 }} />
           <View style={{ marginTop: -1 }}>
             <Text>
-              <LinkButton onClick={updateApp}>Restart</LinkButton> (
               <LinkButton
+                onClick={updateApp}
+                style={{ color: theme.buttonPrimaryText, textDecoration: 'underline' }}
+              >
+                Restart
+              </LinkButton>{' '}
+              (
+              <LinkButton
+                style={{ color: theme.buttonPrimaryText, textDecoration: 'underline' }}
                 onClick={() =>
                   window.Actual.openURLInBrowser(
                     'https://actualbudget.org/docs/releases',
@@ -67,7 +74,7 @@ export default function UpdateNotification() {
                 style={{ display: 'inline', padding: '1px 7px 2px 7px' }}
                 onClick={() => closeNotification(setAppState)}
               >
-                <Close width={9} style={{ color: theme.pageText }} />
+                <Close width={9} style={{ color: theme.buttonPrimaryText }} />
               </Button>
             </Text>
           </View>
diff --git a/packages/desktop-client/src/components/budget/MobileBudgetTable.js b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
index 78532f24436..dca7cce524b 100644
--- a/packages/desktop-client/src/components/budget/MobileBudgetTable.js
+++ b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
@@ -51,7 +51,7 @@ function ToBudget({ toBudget, onClick }) {
     >
       <Label
         title={amount < 0 ? 'OVERBUDGETED' : 'TO BUDGET'}
-        style={{ color: theme.tableText, flexShrink: 0 }}
+        style={{ color: theme.formInputText, flexShrink: 0 }}
       />
       <Text
         style={{
@@ -82,11 +82,11 @@ function Saved({ projected }) {
       }}
     >
       {projected ? (
-        <Label title="PROJECTED SAVINGS" style={{ color: theme.tableText }} />
+        <Label title="PROJECTED SAVINGS" style={{ color: theme.formInputText }} />
       ) : (
         <Label
           title={isNegative ? 'OVERSPENT' : 'SAVED'}
-          style={{ color: theme.tableText }}
+          style={{ color: theme.formInputText }}
         />
       )}
 
@@ -390,7 +390,6 @@ class TotalsRow extends PureComponent {
         style={{
           flexDirection: 'row',
           alignItems: 'center',
-          color: theme.tableHeaderText,
           backgroundColor: theme.tableHeaderBackground,
         }}
         data-testid="totals"
@@ -725,7 +724,6 @@ class IncomeBudgetGroup extends Component {
             amountTextStyle={{ fontWeight: '500' }}
             style={{
               backgroundColor: theme.tableHeaderBackground,
-              color: theme.tableHeaderText,
             }}
           />
 
@@ -1088,7 +1086,6 @@ function BudgetHeader({
         height: 50,
         justifyContent: 'center',
         backgroundColor: theme.buttonPrimaryBackground,
-        color: theme.buttonPrimaryText,
       }}
     >
       {!editMode && (
@@ -1104,7 +1101,7 @@ function BudgetHeader({
             padding: '5px 30px 5px 0',
           }}
         >
-          <ArrowThinLeft style={{ color: 'inherit' }} width="15" height="15" />
+          <ArrowThinLeft style={{ color: theme.formInputTextReadOnlySelection }} width="15" height="15" />
         </Button>
       )}
       <Text
@@ -1132,6 +1129,7 @@ function BudgetHeader({
             right: 0,
           }}
           textStyle={{
+            color: theme.formInputTextReadOnlySelection,
             fontSize: 15,
             fontWeight: '500',
           }}
@@ -1147,7 +1145,7 @@ function BudgetHeader({
             style={{ ...buttonStyle, opacity: nextEnabled ? 1 : 0.6 }}
           >
             <ArrowThinRight
-              style={{ color: 'inherit' }}
+              style={{ color: theme.formInputTextReadOnlySelection }}
               width="15"
               height="15"
             />
diff --git a/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
index 02af4ef9538..54a8f2bc2cf 100644
--- a/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
@@ -44,7 +44,6 @@ function TotalsList({ prevMonthName, collapsed }: TotalsListProps) {
           padding: '5px 0',
           marginTop: 17,
           backgroundColor: theme.tableRowHeaderBackground,
-          color: theme.tableRowHeaderText,
           borderTopWidth: 1,
           borderBottomWidth: 1,
           borderColor: theme.tableBorder,
@@ -292,7 +291,6 @@ export function BudgetSummary({
       data-testid="budget-summary"
       style={{
         backgroundColor: theme.tableBackground,
-        color: theme.tableText,
         boxShadow: styles.cardShadow,
         borderRadius: 6,
         marginLeft: 0,
diff --git a/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx b/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx
index 02598806863..40e30480ff5 100644
--- a/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx
@@ -193,7 +193,6 @@ export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() {
   return (
     <View
       style={{
-        color: theme.tableHeaderText,
         flex: 1,
         flexDirection: 'row',
         marginRight: styles.monthRightPadding,
@@ -206,26 +205,26 @@ export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() {
         <CellValue
           binding={rolloverBudget.totalBudgeted}
           type="financial"
-          style={valueStyle}
+          style={{ color: theme.alt2TableText, fontWeight: 600 }}
           formatter={value => {
             return format(-parseFloat(value || '0'), 'financial');
           }}
         />
       </View>
       <View style={headerLabelStyle}>
-        <Text>Spent</Text>
+        <Text style={{ color: theme.alt2TableText }}>Spent</Text>
         <CellValue
           binding={rolloverBudget.totalSpent}
           type="financial"
-          style={valueStyle}
+          style={{ color: theme.alt2TableText, fontWeight: 600 }}
         />
       </View>
       <View style={headerLabelStyle}>
-        <Text>Balance</Text>
+        <Text style={{ color: theme.alt2TableText }}>Balance</Text>
         <CellValue
           binding={rolloverBudget.totalBalance}
           type="financial"
-          style={valueStyle}
+          style={{ color: theme.alt2TableText, fontWeight: 600 }}
         />
       </View>
     </View>
@@ -423,7 +422,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
             padding: '0 4px',
             borderRadius: 4,
             ':hover': {
-              boxShadow: 'inset 0 0 0 1px ' + colors.n7,
+              boxShadow: 'inset 0 0 0 1px ' + styles.cardShadow,
               backgroundColor: 'white',
             },
           }}

From 2f5914fa627977f3a318f5a810a8dc3b1a5a8a69 Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Wed, 13 Sep 2023 20:20:34 +0100
Subject: [PATCH 05/10] Color Fixes / Regression fixes

---
 .eslintrc.js                                  |  7 ++---
 .../src/components/UpdateNotification.tsx     | 10 +++++--
 .../src/components/accounts/Header.js         |  4 +--
 .../src/components/budget/BudgetCategories.js |  9 +++---
 .../src/components/budget/BudgetTotals.js     | 11 ++++----
 .../src/components/budget/ExpenseGroup.js     |  4 +--
 .../src/components/budget/IncomeGroup.js      |  4 +--
 .../components/budget/MobileBudgetTable.js    | 11 ++++++--
 .../src/components/budget/MobileTable.tsx     |  4 +--
 .../src/components/budget/RenderMonths.js     |  4 +--
 .../src/components/budget/SidebarCategory.js  |  8 +++---
 .../src/components/budget/SidebarGroup.js     |  8 +++---
 .../src/components/budget/constants.js        |  3 --
 .../src/components/common/ExternalLink.tsx    |  6 ++--
 .../transactions/TransactionsTable.js         | 28 +++++++++----------
 .../desktop-client/src/style/themes/dark.ts   |  5 ++++
 .../src/style/themes/development.ts           |  5 ++++
 .../desktop-client/src/style/themes/light.ts  |  5 ++++
 18 files changed, 78 insertions(+), 58 deletions(-)
 delete mode 100644 packages/desktop-client/src/components/budget/constants.js

diff --git a/.eslintrc.js b/.eslintrc.js
index 93492b9586d..ef5d7e4e2a8 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -216,12 +216,9 @@ module.exports = {
       rules: { 'import/no-unused-modules': 'off' },
     },
     {
-      //This is temporary. We will remove these as dark theme gets ported
       files: [
-        './packages/desktop-client/src/components/common/ExternalLink.*',
-        './packages/desktop-client/src/components/payees/index.*',
-        './packages/desktop-client/src/components/util/AmountInput.*',
-        './packages/desktop-client/src/style/*',
+        './packages/desktop-client/src/style/index.*',
+        './packages/desktop-client/src/style/palette.*',
       ],
       rules: {
         'no-restricted-imports': ['off', { patterns: restrictedImportColors }],
diff --git a/packages/desktop-client/src/components/UpdateNotification.tsx b/packages/desktop-client/src/components/UpdateNotification.tsx
index 358135d5e0d..95b4051adee 100644
--- a/packages/desktop-client/src/components/UpdateNotification.tsx
+++ b/packages/desktop-client/src/components/UpdateNotification.tsx
@@ -53,13 +53,19 @@ export default function UpdateNotification() {
             <Text>
               <LinkButton
                 onClick={updateApp}
-                style={{ color: theme.buttonPrimaryText, textDecoration: 'underline' }}
+                style={{
+                  color: theme.buttonPrimaryText,
+                  textDecoration: 'underline',
+                }}
               >
                 Restart
               </LinkButton>{' '}
               (
               <LinkButton
-                style={{ color: theme.buttonPrimaryText, textDecoration: 'underline' }}
+                style={{
+                  color: theme.buttonPrimaryText,
+                  textDecoration: 'underline',
+                }}
                 onClick={() =>
                   window.Actual.openURLInBrowser(
                     'https://actualbudget.org/docs/releases',
diff --git a/packages/desktop-client/src/components/accounts/Header.js b/packages/desktop-client/src/components/accounts/Header.js
index eb180b07adf..e6dcfe54942 100644
--- a/packages/desktop-client/src/components/accounts/Header.js
+++ b/packages/desktop-client/src/components/accounts/Header.js
@@ -7,7 +7,7 @@ import ArrowsExpand3 from '../../icons/v2/ArrowsExpand3';
 import ArrowsShrink3 from '../../icons/v2/ArrowsShrink3';
 import DownloadThickBottom from '../../icons/v2/DownloadThickBottom';
 import Pencil1 from '../../icons/v2/Pencil1';
-import { colors, styles } from '../../style';
+import { theme, styles } from '../../style';
 import AnimatedRefresh from '../AnimatedRefresh';
 import Button from '../common/Button';
 import InitialFocus from '../common/InitialFocus';
@@ -170,7 +170,7 @@ export function AccountHeader({
                     style={{
                       width: 11,
                       height: 11,
-                      color: colors.n8,
+                      color: theme.altButtonBareText,
                     }}
                   />
                 </Button>
diff --git a/packages/desktop-client/src/components/budget/BudgetCategories.js b/packages/desktop-client/src/components/budget/BudgetCategories.js
index cfec40f1c42..bab700c8494 100644
--- a/packages/desktop-client/src/components/budget/BudgetCategories.js
+++ b/packages/desktop-client/src/components/budget/BudgetCategories.js
@@ -1,11 +1,10 @@
 import React, { memo, useState, useMemo } from 'react';
 
-import { colors } from '../../style';
+import { theme, styles } from '../../style';
 import View from '../common/View';
 import { DropHighlightPosContext } from '../sort';
 import { Row } from '../table';
 
-import { INCOME_HEADER_HEIGHT, MONTH_BOX_SHADOW } from './constants';
 import ExpenseCategory from './ExpenseCategory';
 import ExpenseGroup from './ExpenseGroup';
 import IncomeCategory from './IncomeCategory';
@@ -152,7 +151,7 @@ const BudgetCategories = memo(
           marginBottom: 10,
           backgroundColor: 'white',
           overflow: 'hidden',
-          boxShadow: MONTH_BOX_SHADOW,
+          boxShadow: styles.cardShadow,
           borderRadius: '0 0 4px 4px',
           flex: 1,
         }}
@@ -162,7 +161,7 @@ const BudgetCategories = memo(
           switch (item.type) {
             case 'new-group':
               content = (
-                <Row style={{ backgroundColor: colors.n11 }}>
+                <Row style={{ backgroundColor: theme.altTableBackground }}>
                   <SidebarGroup
                     group={{ id: 'new', name: '' }}
                     editing={true}
@@ -235,7 +234,7 @@ const BudgetCategories = memo(
               content = (
                 <View
                   style={{
-                    height: INCOME_HEADER_HEIGHT,
+                    height: styles.incomeHeaderHeight,
                     backgroundColor: 'white',
                   }}
                 >
diff --git a/packages/desktop-client/src/components/budget/BudgetTotals.js b/packages/desktop-client/src/components/budget/BudgetTotals.js
index 2132d0e0bb5..3a811461fec 100644
--- a/packages/desktop-client/src/components/budget/BudgetTotals.js
+++ b/packages/desktop-client/src/components/budget/BudgetTotals.js
@@ -1,13 +1,12 @@
 import React, { memo, useState } from 'react';
 
 import DotsHorizontalTriple from '../../icons/v1/DotsHorizontalTriple';
-import { colors } from '../../style';
+import { theme, styles } from '../../style';
 import Button from '../common/Button';
 import Menu from '../common/Menu';
 import View from '../common/View';
 import { Tooltip } from '../tooltips';
 
-import { MONTH_BOX_SHADOW } from './constants';
 import RenderMonths from './RenderMonths';
 import { getScrollbarWidth } from './util';
 
@@ -25,17 +24,17 @@ const BudgetTotals = memo(function BudgetTotals({
         backgroundColor: 'white',
         flexDirection: 'row',
         flexShrink: 0,
-        boxShadow: MONTH_BOX_SHADOW,
+        boxShadow: styles.cardShadow,
         marginLeft: 5,
         marginRight: 5 + getScrollbarWidth(),
         borderRadius: '4px 4px 0 0',
-        borderBottom: '1px solid ' + colors.border,
+        borderBottom: '1px solid ' + theme.tableBorder,
       }}
     >
       <View
         style={{
           width: 200,
-          color: colors.n4,
+          color: theme.pageTextLight,
           justifyContent: 'center',
           paddingLeft: 15,
           paddingRight: 5,
@@ -57,7 +56,7 @@ const BudgetTotals = memo(function BudgetTotals({
           <DotsHorizontalTriple
             width={15}
             height={15}
-            style={{ color: colors.n5 }}
+            style={{ color: theme.altpageTextSubdued }}
           />
           {menuOpen && (
             <Tooltip
diff --git a/packages/desktop-client/src/components/budget/ExpenseGroup.js b/packages/desktop-client/src/components/budget/ExpenseGroup.js
index b9908b9ad9c..14c7322091a 100644
--- a/packages/desktop-client/src/components/budget/ExpenseGroup.js
+++ b/packages/desktop-client/src/components/budget/ExpenseGroup.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { colors } from '../../style';
+import { theme } from '../../style';
 import View from '../common/View';
 import { useDraggable, useDroppable, DropHighlight } from '../sort';
 import { Row, ROW_HEIGHT } from '../table';
@@ -56,7 +56,7 @@ function ExpenseGroup({
       style={{
         fontWeight: 600,
         opacity: group.hidden ? 0.33 : undefined,
-        backgroundColor: colors.n11,
+        backgroundColor: theme.altTableBackground,
       }}
     >
       {dragState && !dragState.preview && dragState.type === 'group' && (
diff --git a/packages/desktop-client/src/components/budget/IncomeGroup.js b/packages/desktop-client/src/components/budget/IncomeGroup.js
index 38cbd53cbcf..f7d260fff54 100644
--- a/packages/desktop-client/src/components/budget/IncomeGroup.js
+++ b/packages/desktop-client/src/components/budget/IncomeGroup.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { colors } from '../../style';
+import { theme } from '../../style';
 import { Row } from '../table';
 
 import RenderMonths from './RenderMonths';
@@ -19,7 +19,7 @@ function IncomeGroup({
   return (
     <Row
       collapsed={true}
-      style={{ fontWeight: 600, backgroundColor: colors.n11 }}
+      style={{ fontWeight: 600, backgroundColor: theme.altTableBackground }}
     >
       <SidebarGroup
         group={group}
diff --git a/packages/desktop-client/src/components/budget/MobileBudgetTable.js b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
index dca7cce524b..a7b4f1479d7 100644
--- a/packages/desktop-client/src/components/budget/MobileBudgetTable.js
+++ b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
@@ -82,7 +82,10 @@ function Saved({ projected }) {
       }}
     >
       {projected ? (
-        <Label title="PROJECTED SAVINGS" style={{ color: theme.formInputText }} />
+        <Label
+          title="PROJECTED SAVINGS"
+          style={{ color: theme.formInputText }}
+        />
       ) : (
         <Label
           title={isNegative ? 'OVERSPENT' : 'SAVED'}
@@ -1101,7 +1104,11 @@ function BudgetHeader({
             padding: '5px 30px 5px 0',
           }}
         >
-          <ArrowThinLeft style={{ color: theme.formInputTextReadOnlySelection }} width="15" height="15" />
+          <ArrowThinLeft
+            style={{ color: theme.formInputTextReadOnlySelection }}
+            width="15"
+            height="15"
+          />
         </Button>
       )}
       <Text
diff --git a/packages/desktop-client/src/components/budget/MobileTable.tsx b/packages/desktop-client/src/components/budget/MobileTable.tsx
index 0915f01a9f3..a63df9db403 100644
--- a/packages/desktop-client/src/components/budget/MobileTable.tsx
+++ b/packages/desktop-client/src/components/budget/MobileTable.tsx
@@ -1,6 +1,6 @@
 import React, { type ComponentProps, type ReactNode } from 'react';
 
-import { type CSSProperties, colors } from '../../style';
+import { type CSSProperties, theme } from '../../style';
 import View from '../common/View';
 
 export const ROW_HEIGHT = 50;
@@ -16,7 +16,7 @@ export const ListItem = ({ children, style, ...props }: ListItemProps) => {
       style={{
         height: ROW_HEIGHT,
         borderBottomWidth: 1,
-        borderColor: colors.border,
+        borderColor: theme.tableBorder,
         flexDirection: 'row',
         alignItems: 'center',
         paddingLeft: 10,
diff --git a/packages/desktop-client/src/components/budget/RenderMonths.js b/packages/desktop-client/src/components/budget/RenderMonths.js
index f563d859fe5..044f2ca702d 100644
--- a/packages/desktop-client/src/components/budget/RenderMonths.js
+++ b/packages/desktop-client/src/components/budget/RenderMonths.js
@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 
-import { colors } from '../../style';
+import { theme } from '../../style';
 import View from '../common/View';
 import NamespaceContext from '../spreadsheet/NamespaceContext';
 
@@ -22,7 +22,7 @@ function RenderMonths({ component: Component, editingIndex, args, style }) {
         <View
           style={{
             flex: 1,
-            borderLeft: '1px solid ' + colors.border,
+            borderLeft: '1px solid ' + theme.tableBorder,
             ...style,
           }}
         >
diff --git a/packages/desktop-client/src/components/budget/SidebarCategory.js b/packages/desktop-client/src/components/budget/SidebarCategory.js
index 3ccebb13a3b..cee13b3924f 100644
--- a/packages/desktop-client/src/components/budget/SidebarCategory.js
+++ b/packages/desktop-client/src/components/budget/SidebarCategory.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import CheveronDown from '../../icons/v1/CheveronDown';
-import { colors } from '../../style';
+import { theme } from '../../style';
 import Button from '../common/Button';
 import Menu from '../common/Menu';
 import View from '../common/View';
@@ -16,7 +16,7 @@ function SidebarCategory({
   dragging,
   editing,
   style,
-  borderColor = colors.border,
+  borderColor = theme.tableBorder,
   isLast,
   onDragChange,
   onEditMonth,
@@ -110,9 +110,9 @@ function SidebarCategory({
         '& button': { display: 'none' },
         ...(!dragging &&
           !dragPreview && {
-            '&:hover button': { display: 'flex', color: colors.n1 },
+            '&:hover button': { display: 'flex', color: theme.tableTextHover },
           }),
-        ...(dragging && { color: colors.n8 }),
+        ...(dragging && { color: theme.formInputTextPlaceholderSelected }),
         // The zIndex here forces the the view on top of a row below
         // it that may be "collapsed" and show a border on top
         ...(dragPreview && {
diff --git a/packages/desktop-client/src/components/budget/SidebarGroup.js b/packages/desktop-client/src/components/budget/SidebarGroup.js
index 2273dac88a9..f470ebb31ce 100644
--- a/packages/desktop-client/src/components/budget/SidebarGroup.js
+++ b/packages/desktop-client/src/components/budget/SidebarGroup.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import ExpandArrow from '../../icons/v0/ExpandArrow';
 import CheveronDown from '../../icons/v1/CheveronDown';
-import { colors } from '../../style';
+import { theme } from '../../style';
 import Button from '../common/Button';
 import Menu from '../common/Menu';
 import Text from '../common/Text';
@@ -18,7 +18,7 @@ function SidebarGroup({
   dragPreview,
   innerRef,
   style,
-  borderColor = colors.border,
+  borderColor = theme.tableBorder,
   onEdit,
   onSave,
   onDelete,
@@ -124,9 +124,9 @@ function SidebarGroup({
       style={{
         ...style,
         width: 200,
-        backgroundColor: colors.n11,
+        backgroundColor: theme.altTableBackground,
         '& button': { display: 'none' },
-        '&:hover button': { display: 'flex', color: colors.n1 },
+        '&:hover button': { display: 'flex', color: theme.tableTextHover },
         ...(dragPreview && {
           paddingLeft: 10,
           zIndex: 10000,
diff --git a/packages/desktop-client/src/components/budget/constants.js b/packages/desktop-client/src/components/budget/constants.js
deleted file mode 100644
index 0752281de2a..00000000000
--- a/packages/desktop-client/src/components/budget/constants.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export const MONTH_BOX_SHADOW =
-  '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)';
-export const MONTH_RIGHT_PADDING = 5;
diff --git a/packages/desktop-client/src/components/common/ExternalLink.tsx b/packages/desktop-client/src/components/common/ExternalLink.tsx
index e4fa656b5c7..6c37ea5825a 100644
--- a/packages/desktop-client/src/components/common/ExternalLink.tsx
+++ b/packages/desktop-client/src/components/common/ExternalLink.tsx
@@ -1,10 +1,10 @@
 import React, { type ReactNode, forwardRef } from 'react';
 
-import { colors } from '../../style';
+import { theme } from '../../style';
 
 let externalLinkColors = {
-  purple: colors.p4,
-  blue: colors.b4,
+  purple: theme.pageTextPositive,
+  blue: theme.pageTextLink,
   muted: 'inherit',
 };
 type ExternalLinkProps = {
diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.js b/packages/desktop-client/src/components/transactions/TransactionsTable.js
index 6be14aa2af3..8651b799d0f 100644
--- a/packages/desktop-client/src/components/transactions/TransactionsTable.js
+++ b/packages/desktop-client/src/components/transactions/TransactionsTable.js
@@ -53,7 +53,7 @@ import CheveronDown from '../../icons/v1/CheveronDown';
 import ArrowsSynchronize from '../../icons/v2/ArrowsSynchronize';
 import CalendarIcon from '../../icons/v2/Calendar';
 import Hyperlink2 from '../../icons/v2/Hyperlink2';
-import { colors, styles, theme } from '../../style';
+import { styles, theme } from '../../style';
 import AccountAutocomplete from '../autocomplete/AccountAutocomplete';
 import CategoryAutocomplete from '../autocomplete/CategoryAutocomplete';
 import PayeeAutocomplete from '../autocomplete/PayeeAutocomplete';
@@ -416,14 +416,14 @@ function StatusCell({
 
   let statusColor =
     status === 'cleared'
-      ? colors.g5
+      ? theme.noticeText
       : status === 'missed'
-      ? colors.r6
+      ? theme.errorText
       : status === 'due'
-      ? colors.y5
+      ? theme.alt3WarningText
       : selected
-      ? colors.b7
-      : colors.n7;
+      ? theme.altPageTextLink
+      : theme.pageTextSubdued;
 
   function onSelect() {
     if (isClearedField) {
@@ -1043,20 +1043,20 @@ const Transaction = memo(function Transaction(props) {
               style={{
                 color:
                   notes === 'missed'
-                    ? colors.r6
+                    ? theme.errorText
                     : notes === 'due'
-                    ? colors.y4
+                    ? theme.alt3WarningText
                     : selected
-                    ? colors.b5
-                    : colors.n6,
+                    ? theme.formLabelText
+                    : theme.altTableText,
                 backgroundColor:
                   notes === 'missed'
-                    ? colors.r10
+                    ? theme.altErrorBackground
                     : notes === 'due'
-                    ? colors.y9
+                    ? theme.altWarningBackground
                     : selected
-                    ? colors.b8
-                    : colors.n10,
+                    ? theme.formLabelBackground
+                    : theme.alt2TableBackground,
                 margin: '0 5px',
                 padding: '3px 7px',
                 borderRadius: 4,
diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts
index 66e798dbad7..b5aa224e188 100644
--- a/packages/desktop-client/src/style/themes/dark.ts
+++ b/packages/desktop-client/src/style/themes/dark.ts
@@ -14,6 +14,7 @@ export const altpageTextSubdued = pageTextSubdued;
 export const pageTextDark = colorPalette.navy800;
 export const pageTextPositive = colorPalette.purple200;
 export const pageTextLink = colorPalette.purple400;
+export const altPageTextLink = pageTextLink;
 
 export const modalBackground = colorPalette.gray800;
 export const modalBorder = colorPalette.navy600;
@@ -24,6 +25,7 @@ export const cardShadow = colorPalette.navy700;
 
 export const tableBackground = colorPalette.navy800;
 export const altTableBackground = tableBackground;
+export const alt2TableBackground = tableBackground;
 export const tableRowBackgroundHover = colorPalette.navy700;
 export const tableText = colorPalette.navy150;
 export const altTableText = tableText;
@@ -140,6 +142,7 @@ export const buttonNormalDisabledBackground = colorPalette.navy800;
 export const buttonNormalDisabledBorder = colorPalette.navy500;
 
 export const buttonBareText = buttonNormalText;
+export const altButtonBareText = buttonBareText;
 export const buttonBareTextHover = buttonNormalText;
 export const buttonBareBackground = 'transparent';
 export const buttonBareBackgroundHover = 'rgba(200, 200, 200, .3)';
@@ -160,6 +163,7 @@ export const altWarningBackground = warningBackground;
 export const warningText = colorPalette.orange200;
 export const altWarningText = warningText;
 export const alt2WarningText = warningText;
+export const alt3WarningText = warningText;
 export const warningAccent = colorPalette.orange500;
 export const errorBackground = colorPalette.red800;
 export const altErrorBackground = errorBackground;
@@ -174,6 +178,7 @@ export const upcomingAccent = tableBorder;
 
 export const formLabelText = colorPalette.purple150;
 export const altFormLabelText = formLabelText;
+export const formLabelBackground = colorPalette.blue900;
 export const formInputBackground = colorPalette.navy800;
 export const formInputBackgroundSelected = colorPalette.navy700;
 export const formInputBackgroundSelection = colorPalette.purple400;
diff --git a/packages/desktop-client/src/style/themes/development.ts b/packages/desktop-client/src/style/themes/development.ts
index 0ee8cbb92b8..c36869152f9 100644
--- a/packages/desktop-client/src/style/themes/development.ts
+++ b/packages/desktop-client/src/style/themes/development.ts
@@ -13,6 +13,7 @@ export const pageTextSubdued = colorPalette.blue500;
 export const altpageTextSubdued = colorPalette.navy500;
 export const pageTextPositive = colorPalette.blue50;
 export const pageTextLink = colorPalette.blue400;
+export const altPageTextLink = pageTextLink;
 
 export const modalBackground = colorPalette.navy900;
 export const modalBorder = colorPalette.navy200;
@@ -23,6 +24,7 @@ export const cardShadow = colorPalette.purple100;
 
 export const tableBackground = colorPalette.red900;
 export const altTableBackground = tableBackground;
+export const alt2TableBackground = tableBackground;
 export const tableRowBackgroundHover = colorPalette.red800;
 export const tableText = colorPalette.red200;
 export const altTableText = colorPalette.navy400;
@@ -130,6 +132,7 @@ export const buttonNormalDisabledBackground = colorPalette.navy800;
 export const buttonNormalDisabledBorder = colorPalette.navy500;
 
 export const buttonBareText = colorPalette.navy50;
+export const altButtonBareText = buttonBareText;
 export const buttonBareTextHover = colorPalette.navy200;
 export const buttonBareBackground = colorPalette.navy400;
 export const buttonBareBackgroundHover = colorPalette.purple800;
@@ -150,6 +153,7 @@ export const altWarningBackground = warningBackground;
 export const warningText = colorPalette.orange200;
 export const altWarningText = warningText;
 export const alt2WarningText = warningText;
+export const alt3WarningText = warningText;
 export const warningAccent = colorPalette.orange500;
 export const errorBackground = colorPalette.red800;
 export const altErrorBackground = errorBackground;
@@ -164,6 +168,7 @@ export const upcomingAccent = colorPalette.purple100;
 
 export const formLabelText = colorPalette.purple200;
 export const altFormLabelText = formLabelText;
+export const formLabelBackground = colorPalette.blue200;
 export const formInputBackground = colorPalette.purple700;
 export const formInputBackgroundSelected = colorPalette.purple400;
 export const formInputBackgroundSelection = colorPalette.purple400;
diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts
index 9005c2fc53f..dd4384fe6a6 100644
--- a/packages/desktop-client/src/style/themes/light.ts
+++ b/packages/desktop-client/src/style/themes/light.ts
@@ -14,6 +14,7 @@ export const altpageTextSubdued = colorPalette.navy500;
 export const pageTextDark = colorPalette.navy800;
 export const pageTextPositive = colorPalette.purple600;
 export const pageTextLink = colorPalette.blue600;
+export const altPageTextLink = colorPalette.blue300;
 
 export const modalBackground = colorPalette.white;
 export const modalBorder = colorPalette.white;
@@ -24,6 +25,7 @@ export const cardShadow = colorPalette.navy700;
 
 export const tableBackground = colorPalette.white;
 export const altTableBackground = colorPalette.navy50;
+export const alt2TableBackground = colorPalette.navy100;
 export const tableRowBackgroundHover = colorPalette.navy50;
 export const tableText = pageText;
 export const altTableText = colorPalette.navy400;
@@ -140,6 +142,7 @@ export const buttonNormalDisabledBackground = buttonNormalBackground;
 export const buttonNormalDisabledBorder = buttonNormalBorder;
 
 export const buttonBareText = buttonNormalText;
+export const altButtonBareText = colorPalette.navy200;
 export const buttonBareTextHover = buttonNormalText;
 export const buttonBareBackground = 'transparent';
 export const buttonBareBackgroundHover = 'rgba(100, 100, 100, .15)';
@@ -160,6 +163,7 @@ export const altWarningBackground = colorPalette.orange150;
 export const warningText = colorPalette.orange800;
 export const altWarningText = colorPalette.orange900;
 export const alt2WarningText = colorPalette.orange700;
+export const alt3WarningText = colorPalette.orange500;
 export const warningAccent = colorPalette.orange400;
 export const errorBackground = colorPalette.red50;
 export const altErrorBackground = colorPalette.red100;
@@ -174,6 +178,7 @@ export const upcomingAccent = colorPalette.purple100;
 
 export const formLabelText = colorPalette.blue500;
 export const altFormLabelText = colorPalette.blue700;
+export const formLabelBackground = colorPalette.blue200;
 export const formInputBackground = colorPalette.navy50;
 export const formInputBackgroundSelected = colorPalette.white;
 export const formInputBackgroundSelection = colorPalette.purple500;

From 0db05cbc7ac9675727ad231f8621dfce81d6b71b Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Thu, 14 Sep 2023 08:19:41 +0100
Subject: [PATCH 06/10] color fixes

---
 .../src/components/Titlebar.tsx               |  8 ++++----
 .../components/budget/MobileBudgetTable.js    |  4 ++--
 .../budget/rollover/BudgetSummary.tsx         |  4 ++--
 .../transactions/MobileTransaction.js         | 20 ++++++++++---------
 4 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx
index b6774fe2034..ff7bd5af7fb 100644
--- a/packages/desktop-client/src/components/Titlebar.tsx
+++ b/packages/desktop-client/src/components/Titlebar.tsx
@@ -150,19 +150,19 @@ export function SyncButton({ style, isMobile = false }: SyncButtonProps) {
 
   const mobileColor =
     syncState === 'error'
-      ? colors.r7
+      ? theme.alt2ErrorText
       : syncState === 'disabled' ||
         syncState === 'offline' ||
         syncState === 'local'
-      ? colors.n9
+      ? theme.sidebarItemText
       : style.color;
   const desktopColor =
     syncState === 'error'
-      ? colors.r4
+      ? theme.alt2ErrorText
       : syncState === 'disabled' ||
         syncState === 'offline' ||
         syncState === 'local'
-      ? colors.n6
+      ? theme.altTableText
       : null;
 
   const activeStyle = isMobile
diff --git a/packages/desktop-client/src/components/budget/MobileBudgetTable.js b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
index a7b4f1479d7..c7a0cd9868b 100644
--- a/packages/desktop-client/src/components/budget/MobileBudgetTable.js
+++ b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
@@ -726,7 +726,7 @@ class IncomeBudgetGroup extends Component {
             nameTextStyle={{ fontWeight: '500' }}
             amountTextStyle={{ fontWeight: '500' }}
             style={{
-              backgroundColor: theme.tableHeaderBackground,
+              backgroundColor: theme.altTableBackground,
             }}
           />
 
@@ -892,7 +892,7 @@ export function BudgetTable(props) {
             paddingRight: 14,
             backgroundColor: 'white',
             borderBottomWidth: 1,
-            borderColor: theme.formInputBorder,
+            borderColor: theme.tableBorder,
           }}
         >
           {type === 'report' ? (
diff --git a/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
index 54a8f2bc2cf..99e5f7621df 100644
--- a/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
@@ -332,7 +332,7 @@ export function BudgetSummary({
                 width={13}
                 height={13}
                 // The margin is to make it the exact same size as the dots button
-                style={{ color: theme.tableText, margin: 1 }}
+                style={{ color: theme.altTableText, margin: 1 }}
               />
             </Button>
           </View>
@@ -367,7 +367,7 @@ export function BudgetSummary({
                 width={15}
                 height={15}
                 tooltipPosition="bottom-right"
-                defaultColor={theme.altMenuItemTextHeader}
+                defaultColor={theme.altTableText}
               />
             </View>
             <View style={{ userSelect: 'none', marginLeft: 2 }}>
diff --git a/packages/desktop-client/src/components/transactions/MobileTransaction.js b/packages/desktop-client/src/components/transactions/MobileTransaction.js
index 178aa539a6b..a3720f8828d 100644
--- a/packages/desktop-client/src/components/transactions/MobileTransaction.js
+++ b/packages/desktop-client/src/components/transactions/MobileTransaction.js
@@ -142,7 +142,9 @@ export function DateHeader({ date }) {
         justifyContent: 'center',
       }}
     >
-      <Text style={{ ...styles.text, fontSize: 13, color: theme.tableText }}>
+      <Text
+        style={{ ...styles.text, fontSize: 13, color: theme.alt2TableText }}
+      >
         {monthUtils.format(date, 'MMMM dd, yyyy')}
       </Text>
     </ListItem>
@@ -154,13 +156,13 @@ function Status({ status }) {
 
   switch (status) {
     case 'missed':
-      color = theme.errorText;
+      color = theme.alt2ErrorText;
       break;
     case 'due':
-      color = theme.warningText;
+      color = theme.alt2WarningText;
       break;
     case 'upcoming':
-      color = theme.tableText;
+      color = theme.alt2TableText;
       break;
     default:
   }
@@ -935,7 +937,7 @@ class Transaction extends PureComponent {
     let isPreview = isPreviewId(id);
     let textStyle = isPreview && {
       fontStyle: 'italic',
-      color: theme.tableText,
+      color: theme.altpageTextSubdued,
     };
 
     return (
@@ -975,7 +977,7 @@ class Transaction extends PureComponent {
                   fontSize: 14,
                   fontWeight: added ? '600' : '400',
                   ...(prettyDescription === '' && {
-                    color: theme.pageText,
+                    color: theme.alt2TableText,
                     fontStyle: 'italic',
                   }),
                 }}
@@ -1010,8 +1012,8 @@ class Transaction extends PureComponent {
                       marginTop: 1,
                       fontWeight: '400',
                       color: prettyCategory
-                        ? theme.tableText
-                        : theme.pageTextPositive,
+                        ? theme.tableTextSelected
+                        : theme.altMenuItemTextSelected,
                       fontStyle: prettyCategory ? null : 'italic',
                       textAlign: 'left',
                     }}
@@ -1259,7 +1261,7 @@ function Option({ isLast, item, state }) {
         background: isSelected
           ? theme.tableRowBackgroundHighlight
           : theme.tableBackground,
-        color: isSelected ? theme.tableText : null,
+        color: isSelected ? theme.mobileModalText : null,
         outline: isFocusVisible ? '2px solid orange' : 'none',
         ...(!isLast && { borderBottom: `1px solid ${theme.tableBorder}` }),
       }}

From 8f68082e957c8edff5bf474aa71f8f5759f567ce Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Thu, 14 Sep 2023 09:22:17 +0100
Subject: [PATCH 07/10] more color adjustments

---
 .../src/components/budget/rollover/rollover-components.tsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx b/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx
index 40e30480ff5..ff0c26e3392 100644
--- a/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx
@@ -201,7 +201,7 @@ export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() {
       }}
     >
       <View style={headerLabelStyle}>
-        <Text>Budgeted</Text>
+        <Text style={{ color: theme.alt2TableText }}>Budgeted</Text>
         <CellValue
           binding={rolloverBudget.totalBudgeted}
           type="financial"
@@ -235,7 +235,7 @@ export function IncomeHeaderMonth() {
   return (
     <Row
       style={{
-        color: theme.tableText,
+        color: theme.alt2TableText,
         alignItems: 'center',
         paddingRight: 10,
       }}
@@ -422,7 +422,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
             padding: '0 4px',
             borderRadius: 4,
             ':hover': {
-              boxShadow: 'inset 0 0 0 1px ' + styles.cardShadow,
+              boxShadow: 'inset 0 0 0 1px ' + theme.mobileAccountShadow,
               backgroundColor: 'white',
             },
           }}

From d3ab6bc9a656f4b300ee8fd4b443ef7999e22602 Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Thu, 14 Sep 2023 16:54:16 +0100
Subject: [PATCH 08/10] color adjustments

---
 .../src/components/LoggedInUser.tsx              |  2 +-
 packages/desktop-client/src/components/Page.tsx  |  2 +-
 .../src/components/budget/MonthCountSelector.tsx |  4 +++-
 .../desktop-client/src/components/budget/util.js |  4 ++--
 .../components/transactions/MobileTransaction.js | 16 ++++++++--------
 packages/desktop-client/src/style/themes/dark.ts |  1 +
 .../src/style/themes/development.ts              |  1 +
 .../desktop-client/src/style/themes/light.ts     |  1 +
 8 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/packages/desktop-client/src/components/LoggedInUser.tsx b/packages/desktop-client/src/components/LoggedInUser.tsx
index 1044f91dfad..7e81e9a732d 100644
--- a/packages/desktop-client/src/components/LoggedInUser.tsx
+++ b/packages/desktop-client/src/components/LoggedInUser.tsx
@@ -78,7 +78,7 @@ export default function LoggedInUser({
     return (
       <Text
         style={{
-          color: theme.pageText,
+          color: theme.altpageTextSubdued,
           fontStyle: 'italic',
           ...styles.delayedFadeIn,
           ...style,
diff --git a/packages/desktop-client/src/components/Page.tsx b/packages/desktop-client/src/components/Page.tsx
index d2a1828f398..1971861caaf 100644
--- a/packages/desktop-client/src/components/Page.tsx
+++ b/packages/desktop-client/src/components/Page.tsx
@@ -20,7 +20,7 @@ function PageTitle({
       <View
         style={{
           alignItems: 'center',
-          backgroundColor: theme.sidebarBackground,
+          backgroundColor: theme.sidebarItemBackground,
           color: theme.mobileModalText,
           flexDirection: 'row',
           flex: '1 0 auto',
diff --git a/packages/desktop-client/src/components/budget/MonthCountSelector.tsx b/packages/desktop-client/src/components/budget/MonthCountSelector.tsx
index 5b5e37d45ac..d3baecf087b 100644
--- a/packages/desktop-client/src/components/budget/MonthCountSelector.tsx
+++ b/packages/desktop-client/src/components/budget/MonthCountSelector.tsx
@@ -42,7 +42,9 @@ export function MonthCountSelector({
     calendars.push(
       <Calendar
         key={i}
-        color={maxMonths >= i ? theme.pageText : theme.pageTextSubdued}
+        color={
+          maxMonths >= i ? theme.altpageTextSubdued : theme.altButtonBareText
+        }
         onClick={() => onChange(i)}
       />,
     );
diff --git a/packages/desktop-client/src/components/budget/util.js b/packages/desktop-client/src/components/budget/util.js
index eeca5c020ad..db5f7e76895 100644
--- a/packages/desktop-client/src/components/budget/util.js
+++ b/packages/desktop-client/src/components/budget/util.js
@@ -20,7 +20,7 @@ export function separateGroups(categoryGroups) {
 
 export function makeAmountGrey(value) {
   return value === 0 || value === '0' || value === ''
-    ? { color: theme.tableTextInactive }
+    ? { color: theme.altMenuItemText }
     : null;
 }
 
@@ -41,7 +41,7 @@ export function makeAmountFullStyle(value) {
       value < 0
         ? theme.errorText
         : value === 0
-        ? theme.pageTextSubdued
+        ? theme.altMenuItemText
         : theme.noticeText,
   };
 }
diff --git a/packages/desktop-client/src/components/transactions/MobileTransaction.js b/packages/desktop-client/src/components/transactions/MobileTransaction.js
index a3720f8828d..5dda216dcf5 100644
--- a/packages/desktop-client/src/components/transactions/MobileTransaction.js
+++ b/packages/desktop-client/src/components/transactions/MobileTransaction.js
@@ -137,7 +137,7 @@ export function DateHeader({ date }) {
     <ListItem
       style={{
         height: 25,
-        backgroundColor: theme.tableRowHeaderBackground,
+        backgroundColor: theme.mobileDateBackground,
         borderColor: theme.tableBorder,
         justifyContent: 'center',
       }}
@@ -954,7 +954,9 @@ class Transaction extends PureComponent {
             flex: 1,
             height: 60,
             padding: '5px 10px', // remove padding when Button is back
-            ...(isPreview && { backgroundColor: theme.tableHeaderBackground }),
+            ...(isPreview && {
+              backgroundColor: theme.tableRowHeaderBackground,
+            }),
             ...style,
           }}
         >
@@ -977,7 +979,7 @@ class Transaction extends PureComponent {
                   fontSize: 14,
                   fontWeight: added ? '600' : '400',
                   ...(prettyDescription === '' && {
-                    color: theme.alt2TableText,
+                    color: theme.altTableText,
                     fontStyle: 'italic',
                   }),
                 }}
@@ -999,9 +1001,7 @@ class Transaction extends PureComponent {
                   style={{
                     width: 11,
                     height: 11,
-                    color: cleared
-                      ? theme.noticeAccent
-                      : theme.tableTextInactive,
+                    color: cleared ? theme.noticeText : theme.altButtonBareText,
                     marginRight: 5,
                   }}
                 />
@@ -1207,10 +1207,10 @@ function ListBoxSection({ section, state }) {
         <div
           {...headingProps}
           className={`${css(styles.smallText, {
-            backgroundColor: theme.tableRowHeaderBackground,
+            backgroundColor: theme.mobileDateBackground,
             borderBottom: `1px solid ${theme.tableBorder}`,
             borderTop: `1px solid ${theme.tableBorder}`,
-            color: theme.tableRowHeaderText,
+            color: theme.alt2TableText,
             display: 'flex',
             justifyContent: 'center',
             paddingBottom: 4,
diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts
index b5aa224e188..ab4d4c6a77d 100644
--- a/packages/desktop-client/src/style/themes/dark.ts
+++ b/packages/desktop-client/src/style/themes/dark.ts
@@ -94,6 +94,7 @@ export const mobileAccountText = colorPalette.blue800;
 export const mobileModalBackground = colorPalette.navy900;
 export const mobileModalText = colorPalette.white;
 export const altMobileModalText = colorPalette.blue100;
+export const mobileDateBackground = colorPalette.navy100;
 
 // Mobile view themes (for the top bar)
 export const mobileAccountViewTheme = colorPalette.navy50;
diff --git a/packages/desktop-client/src/style/themes/development.ts b/packages/desktop-client/src/style/themes/development.ts
index c36869152f9..8d8cca113c3 100644
--- a/packages/desktop-client/src/style/themes/development.ts
+++ b/packages/desktop-client/src/style/themes/development.ts
@@ -92,6 +92,7 @@ export const mobileAccountText = colorPalette.blue800;
 export const mobileModalBackground = colorPalette.navy900;
 export const mobileModalText = colorPalette.white;
 export const altMobileModalText = colorPalette.blue100;
+export const mobileDateBackground = colorPalette.navy100;
 
 // Button
 export const buttonMenuText = colorPalette.navy150;
diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts
index dd4384fe6a6..d75b7f9f040 100644
--- a/packages/desktop-client/src/style/themes/light.ts
+++ b/packages/desktop-client/src/style/themes/light.ts
@@ -94,6 +94,7 @@ export const mobileAccountText = colorPalette.blue800;
 export const mobileModalBackground = colorPalette.navy900;
 export const mobileModalText = colorPalette.white;
 export const altMobileModalText = colorPalette.blue100;
+export const mobileDateBackground = colorPalette.navy100;
 
 // Mobile view themes (for the top bar)
 export const mobileAccountViewTheme = colorPalette.navy50;

From eb3af5143e1f6f3f62492e0a23ac74143d00f48e Mon Sep 17 00:00:00 2001
From: Neil <55785687+carkom@users.noreply.github.com>
Date: Thu, 14 Sep 2023 14:24:52 -0700
Subject: [PATCH 09/10] Update
 packages/desktop-client/src/components/transactions/MobileTransaction.js

Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv>
---
 .../src/components/transactions/MobileTransaction.js            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/desktop-client/src/components/transactions/MobileTransaction.js b/packages/desktop-client/src/components/transactions/MobileTransaction.js
index 5dda216dcf5..c070e72f076 100644
--- a/packages/desktop-client/src/components/transactions/MobileTransaction.js
+++ b/packages/desktop-client/src/components/transactions/MobileTransaction.js
@@ -352,7 +352,7 @@ class TransactionEditInner extends PureComponent {
 
           // This shadow make the card "pop" off of the screen below
           // it
-          shadowColor: theme.cardshadow,
+          shadowColor: theme.cardShadow,
           shadowOffset: { width: 0, height: 0 },
           shadowRadius: 4,
           shadowOpacity: 1,

From 081da72ff7ad1fc1d6968b0935635594ab6f3fd3 Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Thu, 14 Sep 2023 23:24:46 +0100
Subject: [PATCH 10/10] review fixes

---
 .../src/components/NotesButton.tsx            | 10 ++++----
 .../src/components/Notifications.tsx          | 24 +++++++++----------
 .../src/components/Titlebar.tsx               |  2 +-
 .../src/components/UpdateNotification.tsx     |  2 +-
 .../components/budget/MobileBudgetTable.js    |  4 ++--
 .../transactions/MobileTransaction.js         |  2 +-
 .../transactions/TransactionsTable.js         |  6 ++---
 .../desktop-client/src/style/themes/light.ts  | 15 ++++++++++++
 8 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/packages/desktop-client/src/components/NotesButton.tsx b/packages/desktop-client/src/components/NotesButton.tsx
index 8301385bcf9..7d25feb94c3 100644
--- a/packages/desktop-client/src/components/NotesButton.tsx
+++ b/packages/desktop-client/src/components/NotesButton.tsx
@@ -43,23 +43,23 @@ const markdownStyles = css({
   },
   '& blockquote': {
     paddingLeft: '0.75rem',
-    borderLeft: '3px solid ' + theme.formInputBorderSelected,
+    borderLeft: '3px solid ' + theme.markdownDark,
     margin: 0,
   },
   '& hr': {
     borderTop: 'none',
     borderLeft: 'none',
     borderRight: 'none',
-    borderBottom: '1px solid ' + theme.menuBorderHover,
+    borderBottom: '1px solid ' + theme.markdownNormal,
   },
   '& code': {
-    backgroundColor: theme.menuBorderHover,
+    backgroundColor: theme.markdownLight,
     padding: '0.1rem 0.5rem',
     borderRadius: '0.25rem',
   },
   '& pre': {
     padding: '0.5rem',
-    backgroundColor: theme.menuBorderHover,
+    backgroundColor: theme.markdownLight,
     borderRadius: '0.5rem',
     margin: 0,
     ':not(:first-child)': {
@@ -72,7 +72,7 @@ const markdownStyles = css({
     },
   },
   '& table, & th, & td': {
-    border: '1px solid ' + theme.menuBorderHover,
+    border: '1px solid ' + theme.markdownNormal,
   },
   '& table': {
     borderCollapse: 'collapse',
diff --git a/packages/desktop-client/src/components/Notifications.tsx b/packages/desktop-client/src/components/Notifications.tsx
index f9b0c87486b..f61552521e2 100644
--- a/packages/desktop-client/src/components/Notifications.tsx
+++ b/packages/desktop-client/src/components/Notifications.tsx
@@ -108,10 +108,10 @@ function Notification({
       style={{
         marginTop: 10,
         color: positive
-          ? theme.noticeText
+          ? theme.alt4NoticeText
           : error
-          ? theme.errorText
-          : theme.warningText,
+          ? theme.alt3ErrorText
+          : theme.alt4WarningText,
       }}
     >
       <Stack
@@ -121,16 +121,16 @@ function Notification({
           padding: '14px 14px',
           fontSize: 14,
           backgroundColor: positive
-            ? theme.noticeBackground
+            ? theme.alt2NoticeBackground
             : error
             ? theme.errorBackground
-            : theme.warningBackground,
+            : theme.alt2WarningBackground,
           borderTop: `3px solid ${
             positive
-              ? theme.noticeAccent
+              ? theme.altNoticeAccent
               : error
-              ? theme.errorAccent
-              : theme.warningAccent
+              ? theme.altErrorAccent
+              : theme.altWarningAccent
           }`,
           ...styles.shadowLarge,
           maxWidth: 550,
@@ -173,17 +173,17 @@ function Notification({
                 backgroundColor: 'transparent',
                 border: `1px solid ${
                   positive
-                    ? theme.noticeAccent
+                    ? theme.altNoticeAccent
                     : error
-                    ? theme.errorAccent
-                    : theme.warningAccent
+                    ? theme.altErrorAccent
+                    : theme.altWarningAccent
                 }`,
                 color: 'currentColor',
                 fontSize: 14,
                 flexShrink: 0,
                 '&:hover, &:active': {
                   backgroundColor: positive
-                    ? theme.altNoticeBackground
+                    ? theme.noticeBackground
                     : error
                     ? theme.altErrorBackground
                     : theme.altWarningBackground,
diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx
index ff7bd5af7fb..3e449defd85 100644
--- a/packages/desktop-client/src/components/Titlebar.tsx
+++ b/packages/desktop-client/src/components/Titlebar.tsx
@@ -150,7 +150,7 @@ export function SyncButton({ style, isMobile = false }: SyncButtonProps) {
 
   const mobileColor =
     syncState === 'error'
-      ? theme.alt2ErrorText
+      ? theme.alt4ErrorText
       : syncState === 'disabled' ||
         syncState === 'offline' ||
         syncState === 'local'
diff --git a/packages/desktop-client/src/components/UpdateNotification.tsx b/packages/desktop-client/src/components/UpdateNotification.tsx
index 95b4051adee..7e844e02999 100644
--- a/packages/desktop-client/src/components/UpdateNotification.tsx
+++ b/packages/desktop-client/src/components/UpdateNotification.tsx
@@ -36,7 +36,7 @@ export default function UpdateNotification() {
           bottom: 0,
           right: 0,
           margin: '15px 17px',
-          backgroundColor: theme.pageTextPositive,
+          backgroundColor: theme.altPageTextPositive,
           color: theme.tableBackground,
           padding: '7px 10px',
           borderRadius: 4,
diff --git a/packages/desktop-client/src/components/budget/MobileBudgetTable.js b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
index c7a0cd9868b..0533135d5f7 100644
--- a/packages/desktop-client/src/components/budget/MobileBudgetTable.js
+++ b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
@@ -98,9 +98,9 @@ function Saved({ projected }) {
           ...styles.smallText,
           fontWeight: '500',
           color: projected
-            ? theme.warningText
+            ? theme.alt2WarningText
             : isNegative
-            ? theme.errorText
+            ? theme.alt2ErrorText
             : theme.formInputText,
         }}
       >
diff --git a/packages/desktop-client/src/components/transactions/MobileTransaction.js b/packages/desktop-client/src/components/transactions/MobileTransaction.js
index c070e72f076..374e048f854 100644
--- a/packages/desktop-client/src/components/transactions/MobileTransaction.js
+++ b/packages/desktop-client/src/components/transactions/MobileTransaction.js
@@ -156,7 +156,7 @@ function Status({ status }) {
 
   switch (status) {
     case 'missed':
-      color = theme.alt2ErrorText;
+      color = theme.alt3ErrorText;
       break;
     case 'due':
       color = theme.alt2WarningText;
diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.js b/packages/desktop-client/src/components/transactions/TransactionsTable.js
index 8651b799d0f..22c6918a5dd 100644
--- a/packages/desktop-client/src/components/transactions/TransactionsTable.js
+++ b/packages/desktop-client/src/components/transactions/TransactionsTable.js
@@ -418,7 +418,7 @@ function StatusCell({
     status === 'cleared'
       ? theme.noticeText
       : status === 'missed'
-      ? theme.errorText
+      ? theme.alt5ErrorText
       : status === 'due'
       ? theme.alt3WarningText
       : selected
@@ -1043,9 +1043,9 @@ const Transaction = memo(function Transaction(props) {
               style={{
                 color:
                   notes === 'missed'
-                    ? theme.errorText
+                    ? theme.alt5ErrorText
                     : notes === 'due'
-                    ? theme.alt3WarningText
+                    ? theme.alt5WarningText
                     : selected
                     ? theme.formLabelText
                     : theme.altTableText,
diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts
index d75b7f9f040..8db2bb6ada7 100644
--- a/packages/desktop-client/src/style/themes/light.ts
+++ b/packages/desktop-client/src/style/themes/light.ts
@@ -13,6 +13,7 @@ export const pageTextSubdued = colorPalette.navy300;
 export const altpageTextSubdued = colorPalette.navy500;
 export const pageTextDark = colorPalette.navy800;
 export const pageTextPositive = colorPalette.purple600;
+export const altPageTextPositive = colorPalette.purple400;
 export const pageTextLink = colorPalette.blue600;
 export const altPageTextLink = colorPalette.blue300;
 
@@ -104,6 +105,10 @@ export const mobileConfigServerViewTheme = colorPalette.purple500;
 export const mobileSettingsViewTheme = colorPalette.navy50;
 export const mobileTransactionViewTheme = colorPalette.purple500;
 
+export const markdownNormal = colorPalette.purple150;
+export const markdownDark = colorPalette.purple400;
+export const markdownLight = colorPalette.purple100;
+
 // Button
 export const buttonMenuText = colorPalette.navy100;
 export const buttonMenuTextHover = colorPalette.navy50;
@@ -158,20 +163,30 @@ export const noticeText = colorPalette.green500;
 export const altNoticeText = colorPalette.green900;
 export const alt2NoticeText = colorPalette.green800;
 export const alt3NoticeText = colorPalette.green600;
+export const alt4NoticeText = colorPalette.green700;
 export const noticeAccent = colorPalette.green200;
+export const altNoticeAccent = colorPalette.green500;
 export const warningBackground = colorPalette.orange200;
 export const altWarningBackground = colorPalette.orange150;
+export const alt2WarningBackground = colorPalette.orange100;
 export const warningText = colorPalette.orange800;
 export const altWarningText = colorPalette.orange900;
 export const alt2WarningText = colorPalette.orange700;
 export const alt3WarningText = colorPalette.orange500;
+export const alt4WarningText = colorPalette.orange800;
+export const alt5WarningText = colorPalette.orange600;
 export const warningAccent = colorPalette.orange400;
+export const altWarningAccent = colorPalette.orange600;
 export const errorBackground = colorPalette.red50;
 export const altErrorBackground = colorPalette.red100;
 export const errorText = colorPalette.red500;
 export const altErrorText = colorPalette.red900;
 export const alt2ErrorText = colorPalette.red600;
+export const alt3ErrorText = colorPalette.red700;
+export const alt4ErrorText = colorPalette.red300;
+export const alt5ErrorText = colorPalette.red400;
 export const errorAccent = colorPalette.red200;
+export const altErrorAccent = colorPalette.red500;
 export const upcomingBackground = colorPalette.purple100;
 export const upcomingText = colorPalette.purple900;
 export const altUpcomingText = colorPalette.purple500;