[WIP] [For Feedback] Update Dark theme with official Actual brand colors

packages/component-library/src/theme.ts

@@ -1,4 +1,5 @@
 export const theme = {
+  brand: 'var(--color-brand)',
   pageBackground: 'var(--color-pageBackground)',
   pageBackgroundModalActive: 'var(--color-pageBackgroundModalActive)',
   pageBackgroundTopLeft: 'var(--color-pageBackgroundTopLeft)',
@@ -17,6 +18,9 @@ export const theme = {
   cardBorder: 'var(--color-cardBorder)',
   cardShadow: 'var(--color-cardShadow)',
   tableBackground: 'var(--color-tableBackground)',
+  tableRowBorder: 'var(--color-tableRowBorder)',
+  tableRowBackground: 'var(--color-tableRowBackground)',
+  tableRowBackgroundLight: 'var(--color-tableRowBackgroundLight)',
   tableRowBackgroundHover: 'var(--color-tableRowBackgroundHover)',
   tableText: 'var(--color-tableText)',
   tableTextLight: 'var(--color-tableTextLight)',

packages/desktop-client/src/components/autocomplete/Autocomplete.tsx

@@ -688,7 +688,7 @@ function MultiAutocomplete<T extends Item>({
             flexWrap: 'wrap',
             flexDirection: 'row',
             alignItems: 'center',
-            backgroundColor: theme.tableBackground,
+            backgroundColor: theme.formInputBackground,
             borderRadius: 4,
             border: '1px solid ' + theme.formInputBorder,
             ...(focused && {

packages/desktop-client/src/components/banksync/AccountRow.tsx

@@ -39,7 +39,7 @@ export const AccountRow = memo(
           fontSize: 13,
           backgroundColor: backgroundFocus
             ? theme.tableRowBackgroundHover
-            : theme.tableBackground,
+            : theme.tableRowBackground,
         }}
         collapsed={true}
         onMouseEnter={() => onHover && onHover(account.id)}

packages/desktop-client/src/components/mobile/MobileForms.tsx

@@ -65,7 +65,7 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
           color: disabled ? theme.tableTextInactive : theme.tableText,
           backgroundColor: disabled
             ? theme.formInputTextReadOnlySelection
-            : theme.tableBackground,
+            : theme.formInputBackground,
         }}
         {...props}
       />
@@ -104,7 +104,7 @@ export const TapField = forwardRef<HTMLButtonElement, TapFieldProps>(
           alignItems: 'center',
           ...style,
           ...valueStyle,
-          backgroundColor: theme.tableBackground,
+          backgroundColor: theme.formInputBackground,
           ...(disabled && {
             backgroundColor: theme.formInputTextReadOnlySelection,
           }),

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

@@ -128,6 +128,7 @@ function AccountCard({
         borderRadius: 6,
         boxShadow: `0 1px 1px ${theme.mobileAccountShadow}`,
         marginTop: 10,
+        backgroundColor: theme.tableRowBackground,
       }}
       data-testid="account-list-item"
     >

packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx

@@ -193,7 +193,7 @@ function Footer({
         paddingRight: styles.mobileEditingPadding,
         paddingTop: 10,
         paddingBottom: 10,
-        backgroundColor: theme.tableHeaderBackground,
+        backgroundColor: theme.mobileHeaderBackground,
         borderTopWidth: 1,
         borderColor: theme.tableBorder,
       }}

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

@@ -161,7 +161,7 @@ export function TransactionList({
             <Header
               style={{
                 ...styles.smallText,
-                backgroundColor: theme.pageBackground,
+                backgroundColor: theme.tableRowHeaderBackground,
                 color: theme.tableHeaderText,
                 display: 'flex',
                 justifyContent: 'center',

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

@@ -158,15 +158,15 @@ export function TransactionListItem({
                   }
                 : {
                     borderWidth: '0 0 1px 0',
-                    borderColor: theme.tableBorder,
+                    borderColor: theme.tableRowBorder,
                     borderStyle: 'solid',
                   }),
               ...(isPreview
                 ? {
-                    backgroundColor: theme.tableRowHeaderBackground,
+                    backgroundColor: theme.tableRowBackgroundLight,
                   }
                 : {
-                    backgroundColor: theme.tableBackground,
+                    backgroundColor: theme.tableRowBackground,
                   }),
             }}
           >

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

@@ -34,7 +34,6 @@ function TransactionSearchInput({
       style={{
         flexDirection: 'row',
         alignItems: 'center',
-        backgroundColor: theme.mobilePageBackground,
         padding: 10,
         width: '100%',
       }}
@@ -59,7 +58,7 @@ function TransactionSearchInput({
         }}
         placeholder={placeholder}
         style={{
-          backgroundColor: theme.tableBackground,
+          backgroundColor: theme.formInputBackground,
           border: `1px solid ${theme.formInputBorder}`,
           flex: 1,
           height: styles.mobileMinHeight,

packages/desktop-client/src/components/modals/AccountMenuModal.tsx

@@ -96,7 +96,6 @@ export function AccountMenuModal({
   const buttonStyle: CSSProperties = {
     ...styles.mediumText,
     height: styles.mobileMinHeight,
-    color: theme.formLabelText,
     // Adjust based on desired number of buttons per row.
     flexBasis: '100%',
   };

packages/desktop-client/src/components/modals/CategoryGroupMenuModal.tsx

@@ -81,7 +81,6 @@ export function CategoryGroupMenuModal({
   const buttonStyle: CSSProperties = {
     ...styles.mediumText,
     height: styles.mobileMinHeight,
-    color: theme.formLabelText,
     // Adjust based on desired number of buttons per row.
     flexBasis: '48%',
     marginLeft: '1%',

packages/desktop-client/src/components/modals/CategoryMenuModal.tsx

@@ -70,7 +70,6 @@ export function CategoryMenuModal({
   const buttonStyle: CSSProperties = {
     ...styles.mediumText,
     height: styles.mobileMinHeight,
-    color: theme.formLabelText,
     // Adjust based on desired number of buttons per row.
     flexBasis: '100%',
   };

packages/desktop-client/src/components/modals/EnvelopeBudgetMonthMenuModal.tsx

@@ -46,7 +46,6 @@ export function EnvelopeBudgetMonthMenuModal({
   const buttonStyle: CSSProperties = {
     ...styles.mediumText,
     height: styles.mobileMinHeight,
-    color: theme.formLabelText,
     // Adjust based on desired number of buttons per row.
     flexBasis: '100%',
   };

packages/desktop-client/src/components/modals/TrackingBudgetMonthMenuModal.tsx

@@ -47,7 +47,6 @@ export function TrackingBudgetMonthMenuModal({
   const buttonStyle: CSSProperties = {
     ...styles.mediumText,
     height: styles.mobileMinHeight,
-    color: theme.formLabelText,
     // Adjust based on desired number of buttons per row.
     flexBasis: '100%',
   };

packages/desktop-client/src/components/schedules/ScheduleDetails.tsx

@@ -717,6 +717,10 @@ export function ScheduleDetails({ id, transaction }: ScheduleDetailsProps) {
                   onChange={value =>
                     dispatch({ type: 'set-field', field: 'date', value })
                   }
+                  buttonStyle={{
+                    backgroundColor: theme.tableBackground,
+                    borderColor: theme.formInputBorder,
+                  }}
                 />
               ) : (
                 <DateSelect

packages/desktop-client/src/components/util/GenericInput.jsx

@@ -9,6 +9,7 @@ import { integerToAmount, amountToInteger } from 'loot-core/shared/util';
 import { useCategories } from '../../hooks/useCategories';
 import { useDateFormat } from '../../hooks/useDateFormat';
 import { useSelector } from '../../redux';
+import { theme } from '../../style';
 import { AccountAutocomplete } from '../autocomplete/AccountAutocomplete';
 import { Autocomplete } from '../autocomplete/Autocomplete';
 import { CategoryAutocomplete } from '../autocomplete/CategoryAutocomplete';
@@ -213,7 +214,11 @@ export function GenericInput({
             content = (
               <RecurringSchedulePicker
                 value={value}
-                buttonStyle={{ justifyContent: 'flex-start' }}
+                buttonStyle={{
+                  justifyContent: 'flex-start',
+                  backgroundColor: theme.tableBackground,
+                  borderColor: theme.formInputBorder,
+                }}
                 onChange={onChange}
               />
             );

packages/desktop-client/src/style/palette.ts

@@ -1,5 +1,7 @@
 import * as oldColors from './colors';
 
+export const brand = '#8812E1';
+
 // Only for use in contextual color definitions
 export const gray50 = '#f6f8fa';
 export const gray80 = '#f0f4f6';

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

@@ -1,39 +1,44 @@
 import * as colorPalette from '../palette';
 
+export const brand = colorPalette.brand;
+
 export const pageBackground = colorPalette.gray900;
 export const pageBackgroundModalActive = colorPalette.gray800;
 export const pageBackgroundTopLeft = colorPalette.navy800;
 export const pageBackgroundBottomRight = colorPalette.gray700;
-export const pageBackgroundLineTop = colorPalette.purple400;
+export const pageBackgroundLineTop = brand;
 export const pageBackgroundLineMid = colorPalette.navy900;
 export const pageBackgroundLineBottom = colorPalette.navy150;
 export const pageText = colorPalette.navy150;
 export const pageTextLight = colorPalette.navy300;
-export const pageTextSubdued = colorPalette.navy500;
+export const pageTextSubdued = colorPalette.navy400;
 export const pageTextDark = colorPalette.navy100;
-export const pageTextPositive = colorPalette.purple200;
-export const pageTextLink = colorPalette.purple400;
+export const pageTextPositive = brand;
+export const pageTextLink = brand;
 export const pageTextLinkLight = colorPalette.purple200;
 
 export const cardBackground = colorPalette.gray800;
 export const cardBorder = colorPalette.purple400;
 export const cardShadow = colorPalette.navy700;
 
-export const tableBackground = colorPalette.navy800;
+export const tableBackground = colorPalette.navy900;
+export const tableRowBorder = colorPalette.navy600;
+export const tableRowBackground = colorPalette.navy900;
+export const tableRowBackgroundLight = colorPalette.navy800;
 export const tableRowBackgroundHover = colorPalette.navy700;
 export const tableText = colorPalette.navy150;
 export const tableTextLight = tableText;
 export const tableTextSubdued = colorPalette.navy500;
 export const tableTextSelected = colorPalette.navy150;
 export const tableTextHover = colorPalette.navy400;
 export const tableTextInactive = colorPalette.navy500;
-export const tableHeaderText = colorPalette.navy300;
-export const tableHeaderBackground = colorPalette.navy700;
+export const tableHeaderText = colorPalette.navy150;
+export const tableHeaderBackground = colorPalette.navy900;
 export const tableBorder = colorPalette.navy600;
 export const tableBorderSelected = colorPalette.purple400;
-export const tableBorderHover = colorPalette.purple300;
+export const tableBorderHover = brand;
 export const tableBorderSeparator = colorPalette.navy400;
-export const tableRowBackgroundHighlight = colorPalette.purple800;
+export const tableRowBackgroundHighlight = brand;
 export const tableRowBackgroundHighlightText = colorPalette.navy150;
 export const tableRowHeaderBackground = colorPalette.navy700;
 export const tableRowHeaderText = colorPalette.navy150;
@@ -42,37 +47,37 @@ export const sidebarBackground = colorPalette.navy900;
 export const sidebarItemBackgroundPending = colorPalette.orange200;
 export const sidebarItemBackgroundPositive = colorPalette.green500;
 export const sidebarItemBackgroundFailed = colorPalette.red300;
-export const sidebarItemAccentSelected = colorPalette.purple200;
+export const sidebarItemAccentSelected = brand;
 export const sidebarItemBackgroundHover = colorPalette.navy700;
 export const sidebarItemText = colorPalette.navy150;
-export const sidebarItemTextSelected = colorPalette.purple200;
+export const sidebarItemTextSelected = brand;
 
 export const menuBackground = colorPalette.navy800;
 export const menuItemBackground = colorPalette.navy800;
 export const menuItemBackgroundHover = colorPalette.navy500;
 export const menuItemText = colorPalette.navy100;
 export const menuItemTextHover = colorPalette.navy50;
 export const menuItemTextSelected = colorPalette.purple400;
-export const menuItemTextHeader = colorPalette.purple200;
+export const menuItemTextHeader = brand;
 export const menuBorder = colorPalette.navy900;
 export const menuBorderHover = colorPalette.purple400;
-export const menuKeybindingText = colorPalette.purple200;
+export const menuKeybindingText = brand;
 export const menuAutoCompleteBackground = colorPalette.navy900;
 export const menuAutoCompleteBackgroundHover = colorPalette.navy600;
 export const menuAutoCompleteText = colorPalette.navy200;
-export const menuAutoCompleteTextHeader = colorPalette.purple200;
+export const menuAutoCompleteTextHeader = brand;
 export const menuAutoCompleteItemText = menuItemText;
 
 export const modalBackground = colorPalette.gray800;
 export const modalBorder = colorPalette.navy600;
-export const mobileHeaderBackground = colorPalette.purple800;
+export const mobileHeaderBackground = colorPalette.navy800;
 export const mobileHeaderText = colorPalette.navy150;
 export const mobileHeaderTextSubdued = colorPalette.gray200;
 export const mobileHeaderTextHover = 'rgba(200, 200, 200, .15)';
-export const mobilePageBackground = colorPalette.navy700;
+export const mobilePageBackground = colorPalette.navy900;
 export const mobileNavBackground = colorPalette.navy800;
 export const mobileNavItem = colorPalette.navy150;
-export const mobileNavItemSelected = colorPalette.purple400;
+export const mobileNavItemSelected = brand;
 export const mobileAccountShadow = cardShadow;
 export const mobileAccountText = colorPalette.blue800;
 export const mobileTransactionSelected = colorPalette.purple400;
@@ -99,7 +104,7 @@ export const buttonMenuSelectedBorder = buttonMenuSelectedBackground;
 
 export const buttonPrimaryText = colorPalette.white;
 export const buttonPrimaryTextHover = buttonPrimaryText;
-export const buttonPrimaryBackground = colorPalette.purple400;
+export const buttonPrimaryBackground = brand;
 export const buttonPrimaryBackgroundHover = colorPalette.purple600;
 export const buttonPrimaryBorder = buttonPrimaryBackground;
 export const buttonPrimaryShadow = 'rgba(0, 0, 0, 0.6)';
@@ -114,12 +119,12 @@ export const buttonNormalBackgroundHover = colorPalette.navy600;
 export const buttonNormalBorder = colorPalette.navy300;
 export const buttonNormalShadow = 'rgba(0, 0, 0, 0.4)';
 export const buttonNormalSelectedText = colorPalette.white;
-export const buttonNormalSelectedBackground = colorPalette.purple600;
+export const buttonNormalSelectedBackground = brand;
 export const buttonNormalDisabledText = colorPalette.navy500;
 export const buttonNormalDisabledBackground = colorPalette.navy800;
 export const buttonNormalDisabledBorder = colorPalette.navy500;
 
-export const calendarText = colorPalette.navy50;
+export const calendarText = colorPalette.navy150;
 export const calendarBackground = colorPalette.navy900;
 export const calendarItemText = colorPalette.navy150;
 export const calendarItemBackground = colorPalette.navy800;
@@ -152,40 +157,40 @@ export const errorTextDark = colorPalette.red150;
 export const errorTextDarker = errorTextDark;
 export const errorTextMenu = colorPalette.red200;
 export const errorBorder = colorPalette.red500;
-export const upcomingBackground = colorPalette.purple700;
+export const upcomingBackground = brand;
 export const upcomingText = colorPalette.purple100;
 export const upcomingBorder = tableBorder;
 
-export const formLabelText = colorPalette.purple150;
+export const formLabelText = brand;
 export const formLabelBackground = colorPalette.blue900;
 export const formInputBackground = colorPalette.navy800;
 export const formInputBackgroundSelected = colorPalette.navy700;
 export const formInputBackgroundSelection = colorPalette.purple400;
 export const formInputBorder = colorPalette.navy600;
 export const formInputTextReadOnlySelection = colorPalette.navy800;
-export const formInputBorderSelected = colorPalette.purple400;
+export const formInputBorderSelected = brand;
 export const formInputText = colorPalette.navy150;
 export const formInputTextSelected = colorPalette.black;
 export const formInputTextPlaceholder = colorPalette.navy150;
 export const formInputTextPlaceholderSelected = colorPalette.navy100;
 export const formInputTextSelection = colorPalette.navy800;
-export const formInputShadowSelected = colorPalette.purple200;
-export const formInputTextHighlight = colorPalette.purple400;
+export const formInputShadowSelected = brand;
+export const formInputTextHighlight = brand;
 export const checkboxText = tableText;
-export const checkboxBackgroundSelected = colorPalette.purple300;
+export const checkboxBackgroundSelected = brand;
 export const checkboxBorderSelected = colorPalette.purple300;
 export const checkboxShadowSelected = colorPalette.purple500;
 export const checkboxToggleBackground = colorPalette.gray700;
-export const checkboxToggleBackgroundSelected = colorPalette.purple300;
+export const checkboxToggleBackgroundSelected = brand;
 export const checkboxToggleDisabled = colorPalette.gray400;
 
-export const pillBackground = colorPalette.navy800;
+export const pillBackground = colorPalette.navy900;
 export const pillBackgroundLight = colorPalette.navy900;
-export const pillText = colorPalette.navy200;
-export const pillTextHighlighted = colorPalette.purple200;
+export const pillText = colorPalette.navy150;
+export const pillTextHighlighted = brand;
 export const pillBorder = colorPalette.navy700;
 export const pillBorderDark = pillBorder;
-export const pillBackgroundSelected = colorPalette.purple600;
+export const pillBackgroundSelected = brand;
 export const pillTextSelected = colorPalette.navy150;
 export const pillBorderSelected = colorPalette.purple400;
 export const pillTextSubdued = colorPalette.navy500;
@@ -201,10 +206,10 @@ export const noteTagBackground = colorPalette.purple700;
 export const noteTagBackgroundHover = colorPalette.purple500;
 export const noteTagText = colorPalette.purple100;
 
-export const budgetOtherMonth = colorPalette.navy900;
-export const budgetCurrentMonth = tableBackground;
+export const budgetOtherMonth = colorPalette.navy700;
+export const budgetCurrentMonth = colorPalette.navy800;
 export const budgetHeaderOtherMonth = colorPalette.navy800;
-export const budgetHeaderCurrentMonth = tableHeaderBackground;
+export const budgetHeaderCurrentMonth = colorPalette.navy700;
 
 export const floatingActionBarBackground = colorPalette.purple800;
 export const floatingActionBarBorder = floatingActionBarBackground;