Color Fixes / Regression fixes

actualbudget · Sep 13, 2023 · 2f5914f · 2f5914f
1 parent 03a3925
commit 2f5914f
Show file tree

Hide file tree

Showing 18 changed files with 78 additions and 58 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -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,