Dark Theme Final (#1513)

actualbudget · Sep 16, 2023 · f6f496f · f6f496f
1 parent 68147d6
commit f6f496f
Show file tree

Hide file tree

Showing 35 changed files with 312 additions and 250 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -216,43 +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/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/Titlebar.*',
-        './packages/desktop-client/src/components/UpdateNotification.*',
-        './packages/desktop-client/src/components/accounts/Header.*',
-        './packages/desktop-client/src/components/alerts.*',
-        './packages/desktop-client/src/components/budget/BudgetCategories.*',
-        './packages/desktop-client/src/components/budget/BudgetTotals.*',
-        './packages/desktop-client/src/components/budget/ExpenseGroup.*',
-        './packages/desktop-client/src/components/budget/IncomeGroup.*',
-        './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/RenderMonths.*',
-        './packages/desktop-client/src/components/budget/SidebarCategory.*',
-        './packages/desktop-client/src/components/budget/SidebarGroup.*',
-        './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/ExternalLink.*',
-        './packages/desktop-client/src/components/modals/BudgetSummary.*',
-        './packages/desktop-client/src/components/payees/index.*',
-        './packages/desktop-client/src/components/transactions/MobileTransaction.*',
-        './packages/desktop-client/src/components/transactions/TransactionsTable.*',
-        './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/LoggedInUser.tsx b/packages/desktop-client/src/components/LoggedInUser.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 
 import { useActions } from '../hooks/useActions';
-import { colors, styles, type CSSProperties } from '../style';
+import { theme, styles, type CSSProperties } from '../style';
 
 import Button from './common/Button';
 import Menu from './common/Menu';
@@ -78,7 +78,7 @@ export default function LoggedInUser({
     return (
       <Text
         style={{
-          color: colors.n5,
+          color: theme.altpageTextSubdued,
           fontStyle: 'italic',
           ...styles.delayedFadeIn,
           ...style,

diff --git a/packages/desktop-client/src/components/MobileWebMessage.tsx b/packages/desktop-client/src/components/MobileWebMessage.tsx
@@ -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
@@ -9,7 +9,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 { type CSSProperties, colors } from '../style';
+import { type CSSProperties, theme } from '../style';
 import { remarkBreaks, sequentialNewlinesPlugin } from '../util/markdown';
 
 import Button from './common/Button';
@@ -43,23 +43,23 @@ const markdownStyles = css({
   },
   '& blockquote': {
     paddingLeft: '0.75rem',
-    borderLeft: '3px solid ' + colors.p6,
+    borderLeft: '3px solid ' + theme.markdownDark,
     margin: 0,
   },
   '& hr': {
     borderTop: 'none',
     borderLeft: 'none',
     borderRight: 'none',
-    borderBottom: '1px solid ' + colors.p9,
+    borderBottom: '1px solid ' + theme.markdownNormal,
   },
   '& code': {
-    backgroundColor: colors.p10,
+    backgroundColor: theme.markdownLight,
     padding: '0.1rem 0.5rem',
     borderRadius: '0.25rem',
   },
   '& pre': {
     padding: '0.5rem',
-    backgroundColor: colors.p10,
+    backgroundColor: theme.markdownLight,
     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.markdownNormal,
   },
   '& table': {
     borderCollapse: 'collapse',
@@ -110,7 +110,7 @@ function NotesTooltip({
         <textarea
           ref={inputRef}
           className={`${css({
-            border: '1px solid ' + colors.border,
+            border: '1px solid ' + theme.buttonNormalBorder,
             padding: 7,
             minWidth: 350,
             minHeight: 120,
@@ -145,7 +145,7 @@ export default function NotesButton({
   id,
   width = 12,
   height = 12,
-  defaultColor = colors.n8,
+  defaultColor = theme.pageBackgroundModalActive,
   tooltipPosition,
   style,
 }: NotesButtonProps) {
@@ -191,7 +191,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
@@ -11,7 +11,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, type CSSProperties } from '../style';
+import { styles, theme, type CSSProperties } from '../style';
 
 import Button, { ButtonWithLoading } from './common/Button';
 import ExternalLink from './common/ExternalLink';
@@ -107,7 +107,11 @@ function Notification({
     <View
       style={{
         marginTop: 10,
-        color: positive ? colors.g3 : error ? colors.r3 : colors.y2,
+        color: positive
+          ? theme.alt4NoticeText
+          : error
+          ? theme.alt3ErrorText
+          : theme.alt4WarningText,
       }}
     >
       <Stack
@@ -117,12 +121,16 @@ function Notification({
           padding: '14px 14px',
           fontSize: 14,
           backgroundColor: positive
-            ? colors.g11
+            ? theme.alt2NoticeBackground
             : error
-            ? colors.r11
-            : colors.y10,
+            ? theme.errorBackground
+            : theme.alt2WarningBackground,
           borderTop: `3px solid ${
-            positive ? colors.g5 : error ? colors.r5 : colors.y4
+            positive
+              ? theme.altNoticeAccent
+              : error
+              ? theme.altErrorAccent
+              : theme.altWarningAccent
           }`,
           ...styles.shadowLarge,
           maxWidth: 550,
@@ -164,17 +172,21 @@ function Notification({
               style={{
                 backgroundColor: 'transparent',
                 border: `1px solid ${
-                  positive ? colors.g5 : error ? colors.r4 : colors.y3
+                  positive
+                    ? theme.altNoticeAccent
+                    : error
+                    ? theme.altErrorAccent
+                    : theme.altWarningAccent
                 }`,
                 color: 'currentColor',
                 fontSize: 14,
                 flexShrink: 0,
                 '&:hover, &:active': {
                   backgroundColor: positive
-                    ? colors.g9
+                    ? theme.noticeBackground
                     : error
-                    ? colors.r10
-                    : colors.y9,
+                    ? theme.altErrorBackground
+                    : theme.altWarningBackground,
                 },
               }}
             >
@@ -200,7 +212,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
@@ -1,7 +1,7 @@
 import React, { type ReactNode } from 'react';
 
 import { useResponsive } from '../ResponsiveProvider';
-import { colors, styles, type CSSProperties } from '../style';
+import { theme, styles, type CSSProperties } from '../style';
 
 import Text from './common/Text';
 import View from './common/View';
@@ -20,8 +20,8 @@ function PageTitle({
       <View
         style={{
           alignItems: 'center',
-          backgroundColor: colors.b2,
-          color: 'white',
+          backgroundColor: theme.sidebarItemBackground,
+          color: theme.mobileModalText,
           flexDirection: 'row',
           flex: '1 0 auto',
           fontSize: 18,

diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx
@@ -21,7 +21,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, type CSSProperties } from '../style';
+import { theme, type CSSProperties } from '../style';
 
 import AccountSyncCheck from './accounts/AccountSyncCheck';
 import AnimatedRefresh from './AnimatedRefresh';
@@ -72,7 +72,9 @@ function UncategorizedButton() {
       <ButtonLink
         type="bare"
         to="/accounts/uncategorized"
-        style={{ color: colors.r5 }}
+        style={{
+          color: theme.errorText,
+        }}
       >
         {count} uncategorized {count === 1 ? 'transaction' : 'transactions'}
       </ButtonLink>
@@ -148,19 +150,19 @@ export function SyncButton({ style, isMobile = false }: SyncButtonProps) {
 
   const mobileColor =
     syncState === 'error'
-      ? colors.r7
+      ? theme.alt4ErrorText
       : 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
@@ -337,7 +339,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.tsx b/packages/desktop-client/src/components/UpdateNotification.tsx
@@ -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.altPageTextPositive,
+          color: theme.tableBackground,
           padding: '7px 10px',
           borderRadius: 4,
           zIndex: 10000,
@@ -53,13 +53,19 @@ export default function UpdateNotification() {
             <Text>
               <LinkButton
                 onClick={updateApp}
-                style={{ color: 'white', textDecoration: 'underline' }}
+                style={{
+                  color: theme.buttonPrimaryText,
+                  textDecoration: 'underline',
+                }}
               >
                 Restart
               </LinkButton>{' '}
               (
               <LinkButton
-                style={{ color: 'white', textDecoration: 'underline' }}
+                style={{
+                  color: theme.buttonPrimaryText,
+                  textDecoration: 'underline',
+                }}
                 onClick={() =>
                   window.Actual.openURLInBrowser(
                     'https://actualbudget.org/docs/releases',
@@ -74,7 +80,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.buttonPrimaryText }} />
               </Button>
             </Text>
           </View>

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>