From b208294185b193b3347b06814763b91bca04f998 Mon Sep 17 00:00:00 2001
From: Neil <55785687+carkom@users.noreply.github.com>
Date: Wed, 9 Aug 2023 19:16:46 +0100
Subject: [PATCH] DarkTheme Accounts files (#1480)
---
.eslintrc.js | 17 ----
.../src/components/accounts/Account.js | 12 ++-
.../components/accounts/AccountSyncCheck.js | 8 +-
.../src/components/accounts/Balance.js | 15 ++-
.../src/components/accounts/Header.js | 9 +-
.../src/components/accounts/MobileAccount.js | 4 +-
.../accounts/MobileAccountDetails.js | 17 ++--
.../src/components/accounts/MobileAccounts.js | 26 ++---
.../src/components/accounts/Reconcile.js | 10 +-
.../autocomplete/AccountAutocomplete.js | 21 ++--
.../components/autocomplete/Autocomplete.tsx | 21 ++--
.../autocomplete/CategorySelect.tsx | 18 +---
.../autocomplete/PayeeAutocomplete.js | 21 ++--
.../autocomplete/SavedFilterAutocomplete.js | 6 +-
.../desktop-client/src/components/forms.tsx | 4 +-
.../src/components/modals/CloseAccount.js | 4 +-
.../src/components/modals/CreateAccount.js | 3 +-
.../components/modals/CreateLocalAccount.js | 4 +-
.../components/modals/SelectLinkedAccounts.js | 8 +-
.../desktop-client/src/components/table.tsx | 6 +-
.../desktop-client/src/style/themes/dark.ts | 22 ++++-
.../src/style/themes/development.ts | 95 +++++++++++++++----
.../desktop-client/src/style/themes/light.ts | 21 +++-
upcoming-release-notes/1480.md | 6 ++
24 files changed, 224 insertions(+), 154 deletions(-)
create mode 100644 upcoming-release-notes/1480.md
diff --git a/.eslintrc.js b/.eslintrc.js
index 778ed2904..7cc4060eb 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -218,20 +218,7 @@ module.exports = {
'./packages/desktop-client/src/components/SidebarWithData.*',
'./packages/desktop-client/src/components/Titlebar.*',
'./packages/desktop-client/src/components/UpdateNotification.*',
- './packages/desktop-client/src/components/accounts/Account.*',
- './packages/desktop-client/src/components/accounts/AccountSyncCheck.*',
- './packages/desktop-client/src/components/accounts/Balance.*',
- './packages/desktop-client/src/components/accounts/Header.*',
- './packages/desktop-client/src/components/accounts/MobileAccount.*',
- './packages/desktop-client/src/components/accounts/MobileAccountDetails.*',
- './packages/desktop-client/src/components/accounts/MobileAccounts.*',
- './packages/desktop-client/src/components/accounts/Reconcile.*',
'./packages/desktop-client/src/components/alerts.*',
- './packages/desktop-client/src/components/autocomplete/AccountAutocomplete.*',
- './packages/desktop-client/src/components/autocomplete/Autocomplete.*',
- './packages/desktop-client/src/components/autocomplete/CategorySelect.*',
- './packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.*',
- './packages/desktop-client/src/components/autocomplete/SavedFilterAutocomplete.*',
'./packages/desktop-client/src/components/budget/MobileBudget.*',
'./packages/desktop-client/src/components/budget/MobileBudgetTable.*',
'./packages/desktop-client/src/components/budget/MobileTable.*',
@@ -263,11 +250,8 @@ module.exports = {
'./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/CloseAccount.*',
'./packages/desktop-client/src/components/modals/ConfirmCategoryDelete.*',
- './packages/desktop-client/src/components/modals/CreateAccount.*',
'./packages/desktop-client/src/components/modals/CreateEncryptionKey.*',
- './packages/desktop-client/src/components/modals/CreateLocalAccount.*',
'./packages/desktop-client/src/components/modals/EditField.*',
'./packages/desktop-client/src/components/modals/FixEncryptionKey.*',
'./packages/desktop-client/src/components/modals/GoCardlessExternalMsg.*',
@@ -275,7 +259,6 @@ module.exports = {
'./packages/desktop-client/src/components/modals/LoadBackup.*',
'./packages/desktop-client/src/components/modals/MergeUnusedPayees.*',
'./packages/desktop-client/src/components/modals/PlaidExternalMsg.*',
- './packages/desktop-client/src/components/modals/SelectLinkedAccounts.*',
'./packages/desktop-client/src/components/payees/index.*',
'./packages/desktop-client/src/components/reports/CashFlow.*',
'./packages/desktop-client/src/components/reports/Change.*',
diff --git a/packages/desktop-client/src/components/accounts/Account.js b/packages/desktop-client/src/components/accounts/Account.js
index 53bbe6761..2829cdbd7 100644
--- a/packages/desktop-client/src/components/accounts/Account.js
+++ b/packages/desktop-client/src/components/accounts/Account.js
@@ -27,7 +27,7 @@ import { applyChanges, groupById } from 'loot-core/src/shared/util';
import { authorizeBank } from '../../gocardless';
import { SelectedProviderWithItems } from '../../hooks/useSelected';
-import { styles, colors } from '../../style';
+import { styles, theme } from '../../style';
import Button from '../common/Button';
import Text from '../common/Text';
import View from '../common/View';
@@ -43,11 +43,12 @@ function EmptyMessage({ onAdd }) {
return (
<View
style={{
- backgroundColor: 'white',
+ color: theme.tableText,
+ backgroundColor: theme.tableBackground,
flex: 1,
alignItems: 'center',
borderTopWidth: 1,
- borderColor: colors.n9,
+ borderColor: theme.tableBorder,
}}
>
<View
@@ -68,7 +69,9 @@ function EmptyMessage({ onAdd }) {
Add account
</Button>
- <View style={{ marginTop: 20, fontSize: 13, color: colors.n5 }}>
+ <View
+ style={{ marginTop: 20, fontSize: 13, color: theme.alttableText }}
+ >
In the future, you can add accounts from the sidebar.
</View>
</View>
@@ -1293,6 +1296,7 @@ class AccountInternal extends PureComponent {
) : !loading ? (
<View
style={{
+ color: theme.tableText,
marginTop: 20,
textAlign: 'center',
fontStyle: 'italic',
diff --git a/packages/desktop-client/src/components/accounts/AccountSyncCheck.js b/packages/desktop-client/src/components/accounts/AccountSyncCheck.js
index 05f58c7cf..c6e2e4e44 100644
--- a/packages/desktop-client/src/components/accounts/AccountSyncCheck.js
+++ b/packages/desktop-client/src/components/accounts/AccountSyncCheck.js
@@ -5,7 +5,7 @@ import { useParams } from 'react-router-dom';
import { authorizeBank } from '../../gocardless';
import { useActions } from '../../hooks/useActions';
import ExclamationOutline from '../../icons/v1/ExclamationOutline';
-import { colors } from '../../style';
+import { theme } from '../../style';
import Button from '../common/Button';
import ExternalLink from '../common/ExternalLink';
import View from '../common/View';
@@ -88,8 +88,8 @@ export default function AccountSyncCheck() {
style={{
flexDirection: 'row',
alignItems: 'center',
- color: colors.r5,
- backgroundColor: colors.r10,
+ color: theme.errorText,
+ backgroundColor: theme.errorBackground,
padding: '4px 8px',
borderRadius: 4,
}}
@@ -109,7 +109,7 @@ export default function AccountSyncCheck() {
The server returned the following error:
</div>
- <div style={{ marginBottom: '1.25em', color: colors.r5 }}>
+ <div style={{ marginBottom: '1.25em', color: theme.errorText }}>
{getErrorMessage(error.type, error.code)}
</div>
diff --git a/packages/desktop-client/src/components/accounts/Balance.js b/packages/desktop-client/src/components/accounts/Balance.js
index 700e2683d..04a7a4b35 100644
--- a/packages/desktop-client/src/components/accounts/Balance.js
+++ b/packages/desktop-client/src/components/accounts/Balance.js
@@ -6,7 +6,7 @@ import { getScheduledAmount } from 'loot-core/src/shared/schedules';
import { useSelectedItems } from '../../hooks/useSelected';
import ArrowButtonRight1 from '../../icons/v2/ArrowButtonRight1';
-import { colors } from '../../style';
+import { theme } from '../../style';
import Button from '../common/Button';
import Text from '../common/Text';
import View from '../common/View';
@@ -21,10 +21,10 @@ function DetailedBalance({ name, balance, isExactBalance = true }) {
<Text
style={{
marginLeft: 15,
- backgroundColor: colors.n9,
borderRadius: 4,
padding: '4px 6px',
- color: colors.n5,
+ color: theme.alt2PillText,
+ backgroundColor: theme.pillBackground,
}}
>
{name}{' '}
@@ -154,7 +154,12 @@ export function Balances({
type="financial"
style={{ fontSize: 22, fontWeight: 400 }}
getStyle={value => ({
- color: value < 0 ? colors.r5 : value > 0 ? colors.g5 : colors.n8,
+ color:
+ value < 0
+ ? theme.errorText
+ : value > 0
+ ? theme.noticeText
+ : theme.tableTextInactive,
})}
privacyFilter={{
blurIntensity: 5,
@@ -166,7 +171,7 @@ export function Balances({
width: 10,
height: 10,
marginLeft: 10,
- color: colors.n5,
+ color: 'inherit',
transform: showExtraBalances ? 'rotateZ(180deg)' : 'rotateZ(0)',
}}
/>
diff --git a/packages/desktop-client/src/components/accounts/Header.js b/packages/desktop-client/src/components/accounts/Header.js
index b58ec8f4f..e1062f770 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 { styles, colors } from '../../style';
+import { 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: 'inherit',
}}
/>
</Button>
@@ -245,10 +245,7 @@ export function AccountHeader({
/>
{workingHard ? (
<View>
- <AnimatedLoading
- color={colors.n1}
- style={{ width: 16, height: 16 }}
- />
+ <AnimatedLoading style={{ width: 16, height: 16 }} />
</View>
) : (
<SelectedTransactionsButton
diff --git a/packages/desktop-client/src/components/accounts/MobileAccount.js b/packages/desktop-client/src/components/accounts/MobileAccount.js
index 4a11fd30d..875c74a4a 100644
--- a/packages/desktop-client/src/components/accounts/MobileAccount.js
+++ b/packages/desktop-client/src/components/accounts/MobileAccount.js
@@ -22,7 +22,7 @@ import {
import { useActions } from '../../hooks/useActions';
import useCategories from '../../hooks/useCategories';
import { useSetThemeColor } from '../../hooks/useSetThemeColor';
-import { colors } from '../../style';
+import { theme } from '../../style';
import SyncRefresh from '../SyncRefresh';
import AccountDetails from './MobileAccountDetails';
@@ -167,7 +167,7 @@ export default function Account(props) {
useEffect(updateSearchQuery, [searchText, currentQuery, state.dateFormat]);
- useSetThemeColor(colors.n11);
+ useSetThemeColor(theme.altMenuItemTextHover);
if (!accounts || !accounts.length) {
return null;
diff --git a/packages/desktop-client/src/components/accounts/MobileAccountDetails.js b/packages/desktop-client/src/components/accounts/MobileAccountDetails.js
index 4d95e5c4f..6def3b6ba 100644
--- a/packages/desktop-client/src/components/accounts/MobileAccountDetails.js
+++ b/packages/desktop-client/src/components/accounts/MobileAccountDetails.js
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
import Add from '../../icons/v1/Add';
import CheveronLeft from '../../icons/v1/CheveronLeft';
import SearchAlternate from '../../icons/v2/SearchAlternate';
-import { colors, styles } from '../../style';
+import { theme, styles } from '../../style';
import Button from '../common/Button';
import InputWithContent from '../common/InputWithContent';
import Label from '../common/Label';
@@ -21,7 +21,7 @@ function TransactionSearchInput({ accountName, onSearch }) {
style={{
flexDirection: 'row',
alignItems: 'center',
- backgroundColor: colors.n11,
+ backgroundColor: theme.tableHeaderBackground,
margin: '11px auto 4px',
borderRadius: 4,
padding: 10,
@@ -35,7 +35,7 @@ function TransactionSearchInput({ accountName, onSearch }) {
width: 13,
height: 13,
flexShrink: 0,
- color: text ? colors.p7 : 'inherit',
+ color: text ? theme.formInputTextHighlight : 'inherit',
margin: 5,
marginRight: 0,
}}
@@ -48,8 +48,8 @@ function TransactionSearchInput({ accountName, onSearch }) {
}}
placeholder={`Search ${accountName}`}
style={{
- backgroundColor: colors.n11,
- border: `1px solid ${colors.n9}`,
+ backgroundColor: theme.formInputBackground,
+ border: `1px solid ${theme.formInputBorder}`,
fontSize: 15,
flex: 1,
height: 32,
@@ -85,7 +85,7 @@ export default function AccountDetails({
<View
style={{
flex: 1,
- backgroundColor: colors.n11,
+ backgroundColor: theme.tableHeaderBackground,
overflowY: 'hidden',
width: '100%',
}}
@@ -93,7 +93,6 @@ export default function AccountDetails({
<View
style={{
alignItems: 'center',
- backgroundColor: colors.n11,
flexShrink: 0,
overflowY: 'hidden',
paddingTop: 20,
@@ -112,7 +111,7 @@ export default function AccountDetails({
<Link
to="/accounts"
style={{
- color: colors.b5,
+ color: theme.formLabelText,
alignItems: 'center',
display: 'flex',
textDecoration: 'none',
@@ -153,7 +152,7 @@ export default function AccountDetails({
fontWeight: '500',
}}
getStyle={value => ({
- color: value < 0 ? colors.r4 : colors.p5,
+ color: value < 0 ? theme.errorText : theme.pillTextHighlighted,
})}
/>
<TransactionSearchInput
diff --git a/packages/desktop-client/src/components/accounts/MobileAccounts.js b/packages/desktop-client/src/components/accounts/MobileAccounts.js
index 4ce0c313a..20b01341d 100644
--- a/packages/desktop-client/src/components/accounts/MobileAccounts.js
+++ b/packages/desktop-client/src/components/accounts/MobileAccounts.js
@@ -7,7 +7,7 @@ import * as queries from 'loot-core/src/client/queries';
import { useActions } from '../../hooks/useActions';
import useCategories from '../../hooks/useCategories';
import { useSetThemeColor } from '../../hooks/useSetThemeColor';
-import { colors, styles } from '../../style';
+import { theme, styles } from '../../style';
import Button from '../common/Button';
import Text from '../common/Text';
import TextOneLine from '../common/TextOneLine';
@@ -22,13 +22,17 @@ function AccountHeader({ name, amount }) {
flexDirection: 'row',
marginTop: 28,
marginBottom: 10,
+ color: theme.altpageTextSubdued,
}}
>
<View style={{ flex: 1 }}>
<Text
style={[
styles.text,
- { textTransform: 'uppercase', color: colors.n5, fontSize: 13 },
+ {
+ textTransform: 'uppercase',
+ fontSize: 13,
+ },
]}
data-testid="name"
>
@@ -37,7 +41,7 @@ function AccountHeader({ name, amount }) {
</View>
<CellValue
binding={amount}
- style={[styles.text, { color: colors.n5, fontSize: 13 }]}
+ style={[styles.text, { fontSize: 13 }]}
type="financial"
/>
</View>
@@ -50,8 +54,8 @@ function AccountCard({ account, updated, getBalanceQuery, onSelect }) {
style={{
flex: '1 0 auto',
flexDirection: 'row',
- backgroundColor: 'white',
- boxShadow: `0 1px 1px ${colors.n7}`,
+ backgroundColor: theme.tableBackground,
+ boxShadow: `0 1px 1px ${theme.mobileAccountShadow}`,
borderRadius: 6,
marginTop: 10,
}}
@@ -86,7 +90,7 @@ function AccountCard({ account, updated, getBalanceQuery, onSelect }) {
{
fontSize: 17,
fontWeight: 600,
- color: updated ? colors.b2 : colors.n2,
+ color: updated ? theme.mobileAccountText : theme.pillText,
paddingRight: 30,
},
]}
@@ -96,7 +100,7 @@ function AccountCard({ account, updated, getBalanceQuery, onSelect }) {
{account.bankId && (
<View
style={{
- backgroundColor: colors.g5,
+ backgroundColor: theme.noticeText,
marginLeft: '-23px',
width: 8,
height: 8,
@@ -109,8 +113,8 @@ function AccountCard({ account, updated, getBalanceQuery, onSelect }) {
<CellValue
binding={getBalanceQuery(account)}
type="financial"
- style={{ fontSize: 16, color: colors.n3 }}
- getStyle={value => value < 0 && { color: colors.r4 }}
+ style={{ fontSize: 16, color: 'inherit' }}
+ getStyle={value => value < 0 && { color: 'inherit' }}
/>
</Button>
</View>
@@ -138,7 +142,7 @@ function EmptyMessage({ onAdd }) {
Add Account
</Button>
- <Text style={{ marginTop: 20, color: colors.n5 }}>
+ <Text style={{ marginTop: 20, color: theme.altpageTextSubdued }}>
In the future, you can add accounts using the add button in the header.
</Text>
</View>
@@ -263,7 +267,7 @@ export default function Accounts() {
navigate(`/transaction/${transaction}`);
};
- useSetThemeColor(colors.b2);
+ useSetThemeColor(theme.altMenuBackground);
return (
<View style={{ flex: 1 }}>
diff --git a/packages/desktop-client/src/components/accounts/Reconcile.js b/packages/desktop-client/src/components/accounts/Reconcile.js
index 1591f5fff..1a8516019 100644
--- a/packages/desktop-client/src/components/accounts/Reconcile.js
+++ b/packages/desktop-client/src/components/accounts/Reconcile.js
@@ -4,7 +4,7 @@ import * as queries from 'loot-core/src/client/queries';
import { currencyToInteger } from 'loot-core/src/shared/util';
import CheckCircle1 from '../../icons/v2/CheckCircle1';
-import { styles, colors } from '../../style';
+import { styles, theme } from '../../style';
import Button from '../common/Button';
import InitialFocus from '../common/InitialFocus';
import Input from '../common/Input';
@@ -32,7 +32,7 @@ export function ReconcilingMessage({
style={{
flexDirection: 'row',
alignSelf: 'center',
- backgroundColor: 'white',
+ backgroundColor: theme.tableBackground,
...styles.shadow,
borderRadius: 4,
marginTop: 5,
@@ -44,7 +44,7 @@ export function ReconcilingMessage({
{targetDiff === 0 ? (
<View
style={{
- color: colors.g4,
+ color: theme.noticeText,
flex: 1,
flexDirection: 'row',
alignItems: 'center',
@@ -55,14 +55,14 @@ export function ReconcilingMessage({
style={{
width: 13,
height: 13,
- color: colors.g5,
+ color: 'inherit',
marginRight: 3,
}}
/>
All reconciled!
</View>
) : (
- <View style={{ color: colors.n3 }}>
+ <View style={{ color: theme.tableText }}>
<Text style={{ fontStyle: 'italic', textAlign: 'center' }}>
Your cleared balance{' '}
<strong>{format(cleared, 'financial')}</strong> needs{' '}
diff --git a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.js b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.js
index f1918eda8..3f842851d 100644
--- a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.js
+++ b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.js
@@ -4,8 +4,7 @@ import { css } from 'glamor';
import { useCachedAccounts } from 'loot-core/src/client/data-hooks/accounts';
-import { useResponsive } from '../../ResponsiveProvider';
-import { colors } from '../../style';
+import { theme } from '../../style';
import View from '../common/View';
import Autocomplete from './Autocomplete';
@@ -18,16 +17,16 @@ function AccountList({
groupHeaderStyle,
}) {
let lastItem = null;
- const { isNarrowWidth } = useResponsive();
- const highlightedIndexColor = isNarrowWidth
- ? 'rgba(100, 100, 100, .15)'
- : colors.n4;
return (
<View>
<View
style={[
- { overflow: 'auto', padding: '5px 0' },
+ {
+ overflow: 'auto',
+ padding: '5px 0',
+ color: theme.altMenuItemText,
+ },
!embedded && { maxHeight: 175 },
]}
>
@@ -52,7 +51,7 @@ function AccountList({
<div
key={group}
style={{
- color: colors.y9,
+ color: theme.alt2MenuItemTextHeader,
padding: '4px 9px',
...groupHeaderStyle,
}}
@@ -62,6 +61,7 @@ function AccountList({
</div>
) : null,
<div
+ // List each account up to a max
{...(getItemProps ? getItemProps({ item }) : null)}
// Downshift calls `setTimeout(..., 250)` in the `onMouseMove`
// event handler they set on this element. When this code runs
@@ -90,14 +90,11 @@ function AccountList({
{
backgroundColor:
highlightedIndex === idx
- ? highlightedIndexColor
+ ? theme.alt2MenuItemBackgroundHover
: 'transparent',
padding: 4,
paddingLeft: 20,
borderRadius: embedded ? 4 : 0,
- ':active': {
- backgroundColor: 'rgba(100, 100, 100, .25)',
- },
},
])}`}
data-testid={
diff --git a/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx b/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx
index 600db987c..48e184018 100644
--- a/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx
+++ b/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx
@@ -14,7 +14,7 @@ import Downshift from 'downshift';
import { type CSSProperties, css } from 'glamor';
import Remove from '../../icons/v2/Remove';
-import { colors } from '../../style';
+import { theme } from '../../style';
import Button from '../common/Button';
import Input from '../common/Input';
import View from '../common/View';
@@ -120,7 +120,10 @@ function defaultRenderItems(items, getItemProps, highlightedIndex) {
{...css({
padding: 5,
cursor: 'default',
- backgroundColor: highlightedIndex === index ? colors.n4 : null,
+ backgroundColor:
+ highlightedIndex === index
+ ? theme.alt2MenuItemBackgroundHover
+ : null,
})}
>
{name}
@@ -504,8 +507,8 @@ function SingleAutocomplete({
offset={2}
style={{
padding: 0,
- backgroundColor: colors.n1,
- color: 'white',
+ backgroundColor: theme.menuItemText,
+ color: theme.tableBackground,
minWidth: 200,
...tooltipStyle,
}}
@@ -532,7 +535,7 @@ function MultiItem({ name, onRemove }) {
style={{
alignItems: 'center',
flexDirection: 'row',
- backgroundColor: colors.b9,
+ backgroundColor: theme.pillBackgroundSelected,
padding: '2px 4px',
margin: '2px',
borderRadius: 4,
@@ -609,13 +612,13 @@ function MultiAutocomplete({
flexWrap: 'wrap',
flexDirection: 'row',
alignItems: 'center',
- backgroundColor: 'white',
+ backgroundColor: theme.tableBackground,
borderRadius: 4,
- border: '1px solid #d0d0d0',
+ border: '1px solid ' + theme.formInputBorder,
},
focused && {
- border: '1px solid ' + colors.b5,
- boxShadow: '0 1px 1px ' + colors.b7,
+ border: '1px solid ' + theme.formInputBorderSelected,
+ boxShadow: '0 1px 1px ' + theme.formInputShadowSelected,
},
]}
>
diff --git a/packages/desktop-client/src/components/autocomplete/CategorySelect.tsx b/packages/desktop-client/src/components/autocomplete/CategorySelect.tsx
index 2fddd52ed..def84522c 100644
--- a/packages/desktop-client/src/components/autocomplete/CategorySelect.tsx
+++ b/packages/desktop-client/src/components/autocomplete/CategorySelect.tsx
@@ -8,8 +8,7 @@ import React, {
import { css } from 'glamor';
import Split from '../../icons/v0/Split';
-import { useResponsive } from '../../ResponsiveProvider';
-import { colors } from '../../style';
+import { theme } from '../../style';
import Text from '../common/Text';
import View from '../common/View';
@@ -45,10 +44,6 @@ function CategoryList({
groupHeaderStyle,
}: CategoryListProps) {
let lastGroup = null;
- const { isNarrowWidth } = useResponsive();
- const highlightedIndexColor = isNarrowWidth
- ? 'rgba(100, 100, 100, .15)'
- : colors.n4;
return (
<View>
@@ -92,7 +87,7 @@ function CategoryList({
style={{
backgroundColor:
highlightedIndex === idx
- ? highlightedIndexColor
+ ? theme.alt2MenuItemBackgroundHover
: 'transparent',
borderRadius: embedded ? 4 : 0,
flexShrink: 0,
@@ -100,7 +95,7 @@ function CategoryList({
alignItems: 'center',
fontSize: 11,
fontWeight: 500,
- color: colors.g8,
+ color: theme.noticeAccent,
padding: '6px 8px',
':active': {
backgroundColor: 'rgba(100, 100, 100, .25)',
@@ -123,7 +118,7 @@ function CategoryList({
{showGroup && (
<div
style={{
- color: colors.y9,
+ color: theme.alt2MenuItemTextHeader,
padding: '4px 9px',
...groupHeaderStyle,
}}
@@ -140,14 +135,11 @@ function CategoryList({
{
backgroundColor:
highlightedIndex === idx
- ? highlightedIndexColor
+ ? theme.alt2MenuItemBackgroundHover
: 'transparent',
padding: 4,
paddingLeft: 20,
borderRadius: embedded ? 4 : 0,
- ':active': {
- backgroundColor: 'rgba(100, 100, 100, .25)',
- },
},
])}`}
data-testid={
diff --git a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.js b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.js
index 147be825b..c74d915b1 100644
--- a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.js
+++ b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.js
@@ -10,7 +10,7 @@ import { getActivePayees } from 'loot-core/src/client/reducers/queries';
import Add from '../../icons/v1/Add';
import { useResponsive } from '../../ResponsiveProvider';
-import { colors } from '../../style';
+import { theme } from '../../style';
import Button from '../common/Button';
import View from '../common/View';
@@ -55,10 +55,6 @@ function PayeeList({
footer,
}) {
const { isNarrowWidth } = useResponsive();
- const highlightedIndexColor = isNarrowWidth
- ? 'rgba(100, 100, 100, .15)'
- : colors.n4;
- const createNewColor = isNarrowWidth ? colors.g5 : colors.g8;
let isFiltered = items.filtered;
let createNew = null;
items = [...items];
@@ -90,7 +86,9 @@ function PayeeList({
flexShrink: 0,
padding: '6px 9px',
backgroundColor:
- highlightedIndex === 0 ? highlightedIndexColor : 'transparent',
+ highlightedIndex === 0
+ ? theme.alt2MenuItemBackgroundHover
+ : 'transparent',
borderRadius: embedded ? 4 : 0,
':active': {
backgroundColor: 'rgba(100, 100, 100, .25)',
@@ -100,7 +98,7 @@ function PayeeList({
<View
style={{
display: 'block',
- color: createNewColor,
+ color: theme.noticeAccent,
borderRadius: 4,
fontSize: isNarrowWidth ? 'inherit' : 11,
fontWeight: 500,
@@ -133,7 +131,7 @@ function PayeeList({
<div
key={'title-' + idx}
style={{
- color: colors.y9,
+ color: theme.alt2MenuItemTextHeader,
padding: '4px 9px',
...groupHeaderStyle,
}}
@@ -171,14 +169,11 @@ function PayeeList({
{
backgroundColor:
highlightedIndex === idx + offset
- ? highlightedIndexColor
+ ? theme.alt2MenuItemBackgroundHover
: 'transparent',
borderRadius: embedded ? 4 : 0,
padding: 4,
paddingLeft: 20,
- ':active': {
- backgroundColor: 'rgba(100, 100, 100, .25)',
- },
},
])}`}
>
@@ -190,7 +185,7 @@ function PayeeList({
style={{
fontSize: isNarrowWidth ? 'inherit' : 11,
padding: 5,
- color: colors.n5,
+ color: theme.altpageTextSubdued,
textAlign: 'center',
}}
>
diff --git a/packages/desktop-client/src/components/autocomplete/SavedFilterAutocomplete.js b/packages/desktop-client/src/components/autocomplete/SavedFilterAutocomplete.js
index 46293a00b..5c9abd1ff 100644
--- a/packages/desktop-client/src/components/autocomplete/SavedFilterAutocomplete.js
+++ b/packages/desktop-client/src/components/autocomplete/SavedFilterAutocomplete.js
@@ -2,7 +2,7 @@ import React from 'react';
import { useFilters } from 'loot-core/src/client/data-hooks/filters';
-import { colors } from '../../style';
+import { theme } from '../../style';
import View from '../common/View';
import Autocomplete from './Autocomplete';
@@ -23,7 +23,9 @@ function FilterList({ items, getItemProps, highlightedIndex, embedded }) {
key={item.id}
style={{
backgroundColor:
- highlightedIndex === idx ? colors.n4 : 'transparent',
+ highlightedIndex === idx
+ ? theme.alt2MenuItemBackgroundHover
+ : 'transparent',
padding: 4,
paddingLeft: 20,
borderRadius: embedded ? 4 : 0,
diff --git a/packages/desktop-client/src/components/forms.tsx b/packages/desktop-client/src/components/forms.tsx
index 8bcf15610..15685ad39 100644
--- a/packages/desktop-client/src/components/forms.tsx
+++ b/packages/desktop-client/src/components/forms.tsx
@@ -88,7 +88,7 @@ export const Checkbox = (props: CheckboxProps) => {
color: theme.tableBackground,
backgroundColor: theme.tableBackground,
':checked': {
- border: '1px solid ' + theme.altformInputBorderSelected,
+ border: '1px solid ' + theme.altFormInputBorderSelected,
backgroundColor: theme.tableTextEditingBackground,
'::after': {
display: 'block',
@@ -108,7 +108,7 @@ export const Checkbox = (props: CheckboxProps) => {
bottom: -5,
left: -5,
right: -5,
- border: '2px solid ' + theme.altformInputBorderSelected,
+ border: '2px solid ' + theme.altFormInputBorderSelected,
borderRadius: 6,
content: ' ',
},
diff --git a/packages/desktop-client/src/components/modals/CloseAccount.js b/packages/desktop-client/src/components/modals/CloseAccount.js
index 524e78b0f..811382a0f 100644
--- a/packages/desktop-client/src/components/modals/CloseAccount.js
+++ b/packages/desktop-client/src/components/modals/CloseAccount.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
import { integerToCurrency } from 'loot-core/src/shared/util';
-import { colors } from '../../style';
+import { theme } from '../../style';
import AccountAutocomplete from '../autocomplete/AccountAutocomplete';
import CategoryAutocomplete from '../autocomplete/CategorySelect';
import Button from '../common/Button';
@@ -156,7 +156,7 @@ function CloseAccount({
.forceCloseAccount(account.id)
.then(() => modalProps.onClose());
}}
- style={{ color: colors.r6 }}
+ style={{ color: theme.errorText }}
>
force close
</LinkButton>{' '}
diff --git a/packages/desktop-client/src/components/modals/CreateAccount.js b/packages/desktop-client/src/components/modals/CreateAccount.js
index 751cd30f3..9ae80ecdc 100644
--- a/packages/desktop-client/src/components/modals/CreateAccount.js
+++ b/packages/desktop-client/src/components/modals/CreateAccount.js
@@ -5,6 +5,7 @@ import { pushModal } from 'loot-core/src/client/actions/modals';
import { authorizeBank } from '../../gocardless';
import useGoCardlessStatus from '../../hooks/useGoCardlessStatus';
+import { theme } from '../../style';
import Button, { ButtonWithLoading } from '../common/Button';
import ExternalLink from '../common/ExternalLink';
import Modal from '../common/Modal';
@@ -46,7 +47,7 @@ export default function CreateAccount({ modalProps, syncServerStatus }) {
return (
<Modal title="Add Account" {...modalProps}>
{() => (
- <View style={{ maxWidth: 500, gap: 30 }}>
+ <View style={{ maxWidth: 500, gap: 30, color: theme.pageText }}>
<View style={{ gap: 10 }}>
<Button
type="primary"
diff --git a/packages/desktop-client/src/components/modals/CreateLocalAccount.js b/packages/desktop-client/src/components/modals/CreateLocalAccount.js
index 7a15bd7cd..3a5e6d844 100644
--- a/packages/desktop-client/src/components/modals/CreateLocalAccount.js
+++ b/packages/desktop-client/src/components/modals/CreateLocalAccount.js
@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
import { toRelaxedNumber } from 'loot-core/src/shared/util';
-import { colors } from '../../style';
+import { theme } from '../../style';
import Button from '../common/Button';
import ExternalLink from '../common/ExternalLink';
import FormError from '../common/FormError';
@@ -103,7 +103,7 @@ function CreateLocalAccount({ modalProps, actions }) {
style={{
textAlign: 'right',
fontSize: '0.7em',
- color: colors.n5,
+ color: theme.altpageTextSubdued,
marginTop: 3,
}}
>
diff --git a/packages/desktop-client/src/components/modals/SelectLinkedAccounts.js b/packages/desktop-client/src/components/modals/SelectLinkedAccounts.js
index 4220a0c5a..132f34668 100644
--- a/packages/desktop-client/src/components/modals/SelectLinkedAccounts.js
+++ b/packages/desktop-client/src/components/modals/SelectLinkedAccounts.js
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
-import { colors } from '../../style';
+import { theme } from '../../style';
import Autocomplete from '../autocomplete/Autocomplete';
import Button from '../common/Button';
import Modal from '../common/Modal';
@@ -91,7 +91,7 @@ export default function SelectLinkedAccounts({
style={{
flex: 'unset',
height: 300,
- border: '1px solid ' + colors.border,
+ border: '1px solid ' + theme.tableBorder,
}}
>
<TableHeader
@@ -104,7 +104,7 @@ export default function SelectLinkedAccounts({
<Table
items={externalAccounts}
- style={{ backgroundColor: colors.n11 }}
+ style={{ backgroundColor: theme.tableHeaderBackground }}
getItemKey={index => index}
renderItem={({ key, item }) => (
<View key={key}>
@@ -161,7 +161,7 @@ function TableRow({
].filter(Boolean);
return (
- <Row style={{ backgroundColor: 'white' }}>
+ <Row style={{ backgroundColor: theme.tableBackground }}>
<Field width={200}>{externalAccount.name}</Field>
<Field
width="flex"
diff --git a/packages/desktop-client/src/components/table.tsx b/packages/desktop-client/src/components/table.tsx
index 1df7b8317..13dc2cae4 100644
--- a/packages/desktop-client/src/components/table.tsx
+++ b/packages/desktop-client/src/components/table.tsx
@@ -730,15 +730,15 @@ export function SelectCell({
alignItems: 'center',
borderRadius: 3,
border: selected
- ? '1px solid ' + theme.altformInputBorderSelected
+ ? '1px solid ' + theme.altFormInputBorderSelected
: '1px solid ' + theme.formInputBorder,
color: theme.tableBackground,
backgroundColor: selected
? theme.tableTextEditingBackground
: theme.tableBackground,
':focus': {
- border: '1px solid ' + theme.altformInputBorderSelected,
- boxShadow: '0 1px 2px ' + theme.altformInputShadowSelected,
+ border: '1px solid ' + theme.altFormInputBorderSelected,
+ boxShadow: '0 1px 2px ' + theme.altFormInputShadowSelected,
},
}}
onEdit={onEdit}
diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts
index 426b63f0c..964a67da1 100644
--- a/packages/desktop-client/src/style/themes/dark.ts
+++ b/packages/desktop-client/src/style/themes/dark.ts
@@ -10,16 +10,21 @@ export const pageBackgroundLineBottom = colorPalette.navy150;
export const pageText = colorPalette.navy150;
export const pageTextLight = pageText;
export const pageTextSubdued = colorPalette.navy500;
+export const altpageTextSubdued = pageTextSubdued;
export const pageTextPositive = colorPalette.purple200;
export const pageTextLink = colorPalette.purple400;
+
export const modalBackground = colorPalette.gray800;
export const modalBorder = colorPalette.navy600;
+
export const cardBackground = colorPalette.gray800;
export const cardBorder = colorPalette.purple400;
export const cardShadow = colorPalette.navy700;
+
export const tableBackground = colorPalette.navy800;
export const tableRowBackgroundHover = colorPalette.navy700;
export const tableText = colorPalette.navy150;
+export const altTableText = tableText;
export const tableTextSelected = colorPalette.navy150;
export const tableTextHover = colorPalette.navy400;
export const tableTextEditing = colorPalette.black;
@@ -35,6 +40,7 @@ export const tableRowBackgroundHighlight = colorPalette.purple800;
export const tableRowBackgroundHighlightText = colorPalette.navy150;
export const tableRowHeaderBackground = colorPalette.navy700;
export const tableRowHeaderText = colorPalette.navy150;
+
export const sidebarBackground = colorPalette.navy800;
export const sidebarItemBackground = colorPalette.navy800;
export const sidebarItemBackgroundSelected = colorPalette.navy800;
@@ -45,8 +51,10 @@ export const sidebarItemAccentHover = colorPalette.navy700;
export const sidebarItemText = colorPalette.navy150;
export const sidebarItemTextSelected = colorPalette.purple400;
export const sidebarItemTextHover = colorPalette.navy150;
+
export const tooltipBackground = colorPalette.navy600;
export const tooltipBorder = colorPalette.navy500;
+
export const menuBackground = colorPalette.navy600;
export const menuItemBackground = colorPalette.navy600;
export const menuItemBackgroundHover = colorPalette.navy500;
@@ -60,15 +68,20 @@ export const menuKeybindingText = colorPalette.navy500;
export const altMenuBackground = colorPalette.navy700;
export const altMenuItemBackground = colorPalette.navy700;
export const altMenuItemBackgroundHover = colorPalette.navy600;
+export const alt2MenuItemBackgroundHover = altMenuItemBackgroundHover;
export const altMenuItemText = colorPalette.navy150;
export const altMenuItemTextHover = colorPalette.navy150;
export const altMenuItemTextSelected = colorPalette.purple400;
export const altMenuItemTextHeader = colorPalette.purple500;
+export const alt2MenuItemTextHeader = altMenuItemTextHeader;
export const altMenuBorder = colorPalette.navy200;
export const altMenuBorderHover = colorPalette.purple400;
+
export const mobileNavBackground = colorPalette.navy800;
export const mobileNavItem = colorPalette.navy150;
export const mobileNavItemSelected = colorPalette.purple400;
+export const mobileAccountShadow = cardShadow;
+export const mobileAccountText = colorPalette.blue800;
// Button
export const buttonMenuText = colorPalette.navy100;
@@ -76,7 +89,6 @@ export const buttonMenuTextHover = colorPalette.navy50;
export const buttonMenuBackground = 'transparent';
export const buttonMenuBackgroundHover = 'rgba(200, 200, 200, .25)';
export const buttonMenuBorder = colorPalette.navy500;
-
export const buttonMenuSelectedText = colorPalette.green800;
export const buttonMenuSelectedTextHover = colorPalette.orange800;
export const buttonMenuSelectedBackground = colorPalette.orange200;
@@ -89,7 +101,6 @@ export const buttonPrimaryBackground = colorPalette.purple400;
export const buttonPrimaryBackgroundHover = buttonPrimaryBackground;
export const buttonPrimaryBorder = buttonPrimaryBackground;
export const buttonPrimaryShadow = 'rgba(0, 0, 0, 0.6)';
-
export const buttonPrimaryDisabledText = colorPalette.navy700;
export const buttonPrimaryDisabledBackground = colorPalette.navy400;
export const buttonPrimaryDisabledBorder = buttonPrimaryDisabledBackground;
@@ -126,19 +137,23 @@ export const warningAccent = colorPalette.orange500;
export const errorBackground = colorPalette.red800;
export const errorText = colorPalette.red200;
export const errorAccent = colorPalette.red500;
+
export const formLabelText = colorPalette.purple150;
+export const altFormLabelText = formLabelText;
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 altFormInputBorderSelected = formInputBorderSelected;
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 altFormInputShadowSelected = formInputShadowSelected;
export const formInputTextHighlight = colorPalette.purple400;
export const pillBackground = colorPalette.navy600;
@@ -148,3 +163,6 @@ export const pillBorder = colorPalette.navy700;
export const pillBackgroundSelected = colorPalette.purple600;
export const pillTextSelected = colorPalette.navy150;
export const pillBorderSelected = colorPalette.purple400;
+export const altPillBackground = pillBackground;
+export const altPillText = pillText;
+export const alt2PillText = pillText;
diff --git a/packages/desktop-client/src/style/themes/development.ts b/packages/desktop-client/src/style/themes/development.ts
index 1e8f39d40..9cae5bfc6 100644
--- a/packages/desktop-client/src/style/themes/development.ts
+++ b/packages/desktop-client/src/style/themes/development.ts
@@ -8,17 +8,23 @@ export const pageBackgroundLineTop = colorPalette.navy50;
export const pageBackgroundLineMid = colorPalette.green500;
export const pageBackgroundLineBottom = colorPalette.orange200;
export const pageText = colorPalette.blue300;
+export const pageTextLight = colorPalette.navy600;
export const pageTextSubdued = colorPalette.blue500;
+export const altpageTextSubdued = colorPalette.navy500;
export const pageTextPositive = colorPalette.blue50;
export const pageTextLink = colorPalette.blue400;
+
export const modalBackground = colorPalette.navy900;
export const modalBorder = colorPalette.navy200;
+
export const cardBackground = colorPalette.purple700;
export const cardBorder = colorPalette.purple400;
export const cardShadow = colorPalette.purple100;
+
export const tableBackground = colorPalette.red900;
export const tableRowBackgroundHover = colorPalette.red800;
export const tableText = colorPalette.red200;
+export const altTableText = colorPalette.navy400;
export const tableTextSelected = colorPalette.red150;
export const tableTextHover = colorPalette.red400;
export const tableTextEditing = colorPalette.black;
@@ -34,6 +40,7 @@ export const tableRowBackgroundHighlight = colorPalette.red700;
export const tableRowBackgroundHighlightText = colorPalette.red200;
export const tableRowHeaderBackground = colorPalette.red100;
export const tableRowHeaderText = colorPalette.red700;
+
export const sidebarBackground = colorPalette.orange800;
export const sidebarItemBackground = colorPalette.orange700;
export const sidebarItemBackgroundSelected = colorPalette.orange900;
@@ -44,8 +51,10 @@ export const sidebarItemAccentHover = colorPalette.orange200;
export const sidebarItemText = colorPalette.orange200;
export const sidebarItemTextSelected = colorPalette.orange400;
export const sidebarItemTextHover = colorPalette.orange150;
+
export const tooltipBackground = colorPalette.white;
export const tooltipBorder = colorPalette.black;
+
export const menuBackground = colorPalette.green800;
export const menuItemBackground = colorPalette.green700;
export const menuItemBackgroundHover = colorPalette.green500;
@@ -55,36 +64,70 @@ export const menuItemTextSelected = colorPalette.green500;
export const menuItemTextHeader = colorPalette.green300;
export const menuBorder = colorPalette.green500;
export const menuBorderHover = colorPalette.green900;
+export const menuKeybindingText = colorPalette.navy400;
export const altMenuBackground = colorPalette.navy700;
export const altMenuItemBackground = colorPalette.navy700;
export const altMenuItemBackgroundHover = colorPalette.navy600;
+export const alt2MenuItemBackgroundHover = colorPalette.navy600;
export const altMenuItemText = colorPalette.navy150;
export const altMenuItemTextHover = colorPalette.navy150;
export const altMenuItemTextSelected = colorPalette.navy150;
export const altMenuItemTextHeader = colorPalette.purple500;
+export const alt2MenuItemTextHeader = colorPalette.orange150;
export const altMenuBorder = colorPalette.navy200;
export const altMenuBorderHover = colorPalette.purple400;
-export const buttonAltMenuText = colorPalette.navy150;
-export const buttonAltMenuTextHover = colorPalette.navy100;
-export const buttonAltMenuTextSelected = colorPalette.navy100;
-export const buttonAltMenuBackground = colorPalette.navy800;
-export const buttonAltMenuBackgroundHover = colorPalette.navy600;
-export const buttonAltMenuBorder = colorPalette.navy600;
-export const buttonPositiveText = colorPalette.purple200;
-export const buttonPositiveTextHover = colorPalette.purple50;
-export const buttonPositiveTextSelected = colorPalette.purple600;
-export const buttonPositiveBackground = colorPalette.purple400;
-export const buttonPositiveBackgroundHover = colorPalette.purple800;
-export const buttonPositiveBorder = colorPalette.purple700;
-export const buttonNeutralText = colorPalette.navy50;
-export const buttonNeutralTextHover = colorPalette.navy200;
-export const buttonNeutralBackground = colorPalette.navy400;
-export const buttonNeutralBackgroundHover = colorPalette.navy500;
-export const buttonNeutralBorder = colorPalette.navy800;
-export const buttonDisabledText = colorPalette.navy500;
-export const buttonDisabledBackground = colorPalette.navy800;
-export const buttonDisabledBorder = colorPalette.navy500;
-export const buttonShadow = colorPalette.navy700;
+
+export const mobileNavBackground = colorPalette.white;
+export const mobileNavItem = colorPalette.gray300;
+export const mobileNavItemSelected = colorPalette.purple500;
+export const mobileAccountShadow = colorPalette.navy300;
+export const mobileAccountText = colorPalette.blue800;
+
+// Button
+export const buttonMenuText = colorPalette.navy150;
+export const buttonMenuTextHover = colorPalette.navy100;
+export const buttonMenuBackground = colorPalette.navy800;
+export const buttonMenuBackgroundHover = colorPalette.navy600;
+export const buttonMenuBorder = colorPalette.navy600;
+export const buttonMenuSelectedText = colorPalette.navy100;
+export const buttonMenuSelectedTextHover = colorPalette.orange800;
+export const buttonMenuSelectedBackground = colorPalette.orange200;
+export const buttonMenuSelectedBackgroundHover = colorPalette.orange300;
+export const buttonMenuSelectedBorder = buttonMenuSelectedBackground;
+
+export const buttonPrimaryText = colorPalette.white;
+export const buttonPrimaryTextHover = buttonPrimaryText;
+export const buttonPrimaryBackground = colorPalette.purple500;
+export const buttonPrimaryBackgroundHover = buttonPrimaryBackground;
+export const buttonPrimaryBorder = buttonPrimaryBackground;
+export const buttonPrimaryShadow = 'rgba(0, 0, 0, 0.3)';
+export const buttonPrimaryDisabledText = colorPalette.white;
+export const buttonPrimaryDisabledBackground = colorPalette.navy300;
+export const buttonPrimaryDisabledBorder = buttonPrimaryDisabledBackground;
+
+export const buttonNormalText = colorPalette.navy50;
+export const buttonNormalTextHover = colorPalette.navy200;
+export const buttonNormalBackground = colorPalette.navy400;
+export const buttonNormalBackgroundHover = colorPalette.navy500;
+export const buttonNormalBorder = colorPalette.navy800;
+export const buttonNormalShadow = colorPalette.navy700;
+
+export const altbuttonMenuBackground = colorPalette.navy100;
+export const buttonNormalSelectedText = colorPalette.purple200;
+export const buttonNormalSelectedBackground = colorPalette.purple400;
+
+export const buttonNormalDisabledText = colorPalette.navy500;
+export const buttonNormalDisabledBackground = colorPalette.navy800;
+export const buttonNormalDisabledBorder = colorPalette.navy500;
+
+export const buttonBareText = colorPalette.navy50;
+export const buttonBareTextHover = colorPalette.navy200;
+export const buttonBareBackground = colorPalette.navy400;
+export const buttonBareBackgroundHover = colorPalette.purple800;
+export const buttonBareBackgroundActive = 'rgba(100, 100, 100, .25)';
+export const buttonBareDisabledText = buttonNormalDisabledText;
+export const buttonBareDisabledBackground = buttonBareBackground;
+
export const noticeBackground = colorPalette.green800;
export const noticeText = colorPalette.green300;
export const noticeAccent = colorPalette.green500;
@@ -94,22 +137,32 @@ export const warningAccent = colorPalette.orange500;
export const errorBackground = colorPalette.red800;
export const errorText = colorPalette.red200;
export const errorAccent = colorPalette.red500;
+
export const formLabelText = colorPalette.purple200;
+export const altFormLabelText = formLabelText;
export const formInputBackground = colorPalette.purple700;
export const formInputBackgroundSelected = colorPalette.purple400;
export const formInputBackgroundSelection = colorPalette.purple400;
export const formInputBorder = colorPalette.purple600;
export const formInputTextReadOnlySelection = colorPalette.purple800;
export const formInputBorderSelected = colorPalette.purple100;
+export const altFormInputBorderSelected = formInputBorderSelected;
export const formInputText = colorPalette.purple150;
export const formInputTextSelected = colorPalette.purple800;
export const formInputTextPlaceholder = colorPalette.navy150;
+export const formInputTextPlaceholderSelected = formInputTextPlaceholder;
export const formInputTextSelection = colorPalette.navy800;
export const formInputShadowSelected = colorPalette.purple400;
+export const altFormInputShadowSelected = formInputShadowSelected;
export const formInputTextHighlight = colorPalette.purple400;
+
export const pillBackground = colorPalette.green800;
export const pillText = colorPalette.green600;
+export const pillTextHighlighted = colorPalette.purple600;
export const pillBorder = colorPalette.green200;
export const pillBackgroundSelected = colorPalette.green100;
export const pillTextSelected = colorPalette.green700;
export const pillBorderSelected = colorPalette.green900;
+export const altPillBackground = pillBackground;
+export const altPillText = pillText;
+export const alt2PillText = pillText;
diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts
index ae839db16..860f97b7d 100644
--- a/packages/desktop-client/src/style/themes/light.ts
+++ b/packages/desktop-client/src/style/themes/light.ts
@@ -13,11 +13,14 @@ export const pageTextSubdued = colorPalette.navy300;
export const altpageTextSubdued = colorPalette.navy500;
export const pageTextPositive = colorPalette.purple600;
export const pageTextLink = colorPalette.blue600;
+
export const modalBackground = colorPalette.white;
export const modalBorder = colorPalette.white;
+
export const cardBackground = colorPalette.white;
export const cardBorder = colorPalette.purple500;
export const cardShadow = colorPalette.navy700;
+
export const tableBackground = colorPalette.white;
export const tableRowBackgroundHover = colorPalette.navy50;
export const tableText = colorPalette.navy700;
@@ -37,6 +40,7 @@ export const tableRowBackgroundHighlight = colorPalette.blue150;
export const tableRowBackgroundHighlightText = colorPalette.navy700;
export const tableRowHeaderBackground = colorPalette.navy50;
export const tableRowHeaderText = colorPalette.navy800;
+
export const sidebarBackground = colorPalette.blue800;
export const sidebarItemBackground = colorPalette.blue800;
export const sidebarItemBackgroundSelected = colorPalette.blue800;
@@ -47,8 +51,10 @@ export const sidebarItemAccentHover = colorPalette.blue700;
export const sidebarItemText = colorPalette.navy100;
export const sidebarItemTextSelected = colorPalette.purple300;
export const sidebarItemTextHover = colorPalette.navy50;
+
export const tooltipBackground = colorPalette.navy50;
export const tooltipBorder = colorPalette.navy50;
+
export const menuBackground = colorPalette.white;
export const menuItemBackground = colorPalette.navy50;
export const menuItemBackgroundHover = colorPalette.navy100;
@@ -62,15 +68,20 @@ export const menuKeybindingText = colorPalette.navy400;
export const altMenuBackground = colorPalette.blue800;
export const altMenuItemBackground = colorPalette.blue800;
export const altMenuItemBackgroundHover = colorPalette.blue700;
+export const alt2MenuItemBackgroundHover = colorPalette.navy600;
export const altMenuItemText = colorPalette.navy100;
export const altMenuItemTextHover = colorPalette.navy50;
export const altMenuItemTextSelected = colorPalette.purple300;
export const altMenuItemTextHeader = colorPalette.navy400;
+export const alt2MenuItemTextHeader = colorPalette.orange150;
export const altMenuBorder = colorPalette.blue700;
export const altMenuBorderHover = colorPalette.purple300;
+
export const mobileNavBackground = colorPalette.white;
-export const mobileNavItem = 'rgb(142, 142, 143)';
+export const mobileNavItem = colorPalette.gray300;
export const mobileNavItemSelected = colorPalette.purple500;
+export const mobileAccountShadow = colorPalette.navy300;
+export const mobileAccountText = colorPalette.blue800;
// Button
export const buttonMenuText = colorPalette.navy100;
@@ -78,7 +89,6 @@ export const buttonMenuTextHover = colorPalette.navy50;
export const buttonMenuBackground = 'transparent';
export const buttonMenuBackgroundHover = 'rgba(200, 200, 200, .25)';
export const buttonMenuBorder = colorPalette.navy500;
-
export const buttonMenuSelectedText = colorPalette.green800;
export const buttonMenuSelectedTextHover = colorPalette.orange800;
export const buttonMenuSelectedBackground = colorPalette.orange200;
@@ -91,7 +101,6 @@ export const buttonPrimaryBackground = colorPalette.purple500;
export const buttonPrimaryBackgroundHover = buttonPrimaryBackground;
export const buttonPrimaryBorder = buttonPrimaryBackground;
export const buttonPrimaryShadow = 'rgba(0, 0, 0, 0.3)';
-
export const buttonPrimaryDisabledText = colorPalette.white;
export const buttonPrimaryDisabledBackground = colorPalette.navy300;
export const buttonPrimaryDisabledBorder = buttonPrimaryDisabledBackground;
@@ -128,6 +137,7 @@ export const warningAccent = colorPalette.orange400;
export const errorBackground = colorPalette.red50;
export const errorText = colorPalette.red500;
export const errorAccent = colorPalette.red200;
+
export const formLabelText = colorPalette.blue500;
export const altFormLabelText = colorPalette.blue700;
export const formInputBackground = colorPalette.navy50;
@@ -136,14 +146,14 @@ export const formInputBackgroundSelection = colorPalette.purple500;
export const formInputBorder = colorPalette.navy150;
export const formInputTextReadOnlySelection = colorPalette.navy50;
export const formInputBorderSelected = colorPalette.purple500;
-export const altformInputBorderSelected = colorPalette.blue500;
+export const altFormInputBorderSelected = colorPalette.blue500;
export const formInputText = colorPalette.navy900;
export const formInputTextSelected = colorPalette.navy50;
export const formInputTextPlaceholder = colorPalette.navy300;
export const formInputTextPlaceholderSelected = colorPalette.navy200;
export const formInputTextSelection = colorPalette.navy100;
export const formInputShadowSelected = colorPalette.purple300;
-export const altformInputShadowSelected = colorPalette.blue300;
+export const altFormInputShadowSelected = colorPalette.blue300;
export const formInputTextHighlight = colorPalette.purple200;
export const pillBackground = colorPalette.navy150;
@@ -155,3 +165,4 @@ export const pillTextSelected = colorPalette.blue900;
export const pillBorderSelected = colorPalette.purple500;
export const altPillBackground = colorPalette.navy100;
export const altPillText = colorPalette.navy900;
+export const alt2PillText = colorPalette.navy500;
diff --git a/upcoming-release-notes/1480.md b/upcoming-release-notes/1480.md
new file mode 100644
index 000000000..6cdd6e45d
--- /dev/null
+++ b/upcoming-release-notes/1480.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [biohzrddd, carkom]
+---
+
+Update Accounts files with dark theme changes
--
GitLab