From faa4a7c0e28e10432a265fabd12eb4fa7077ae6b Mon Sep 17 00:00:00 2001 From: Matiss Janis Aboltins Date: Sat, 9 Sep 2023 17:54:06 +0100 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=94=A7=20(eslint)=20convert=20rules?= =?UTF-8?q?=20from=20ERROR=20to=20WARN=20to=20improve=20devX=20(#1599)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.js | 40 +++++++++++++++++----------------- upcoming-release-notes/1599.md | 6 +++++ 2 files changed, 26 insertions(+), 20 deletions(-) create mode 100644 upcoming-release-notes/1599.md diff --git a/.eslintrc.js b/.eslintrc.js index fb9d445ee54..89ea002f043 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -44,10 +44,10 @@ module.exports = { parserOptions: { project: [path.join(__dirname, './tsconfig.json')] }, reportUnusedDisableDirectives: true, rules: { - 'prettier/prettier': 'error', + 'prettier/prettier': 'warn', 'no-unused-vars': 'off', '@typescript-eslint/no-unused-vars': [ - 'error', + 'warn', { args: 'none', varsIgnorePattern: '^_', @@ -55,17 +55,17 @@ module.exports = { }, ], - curly: ['error', 'multi-line', 'consistent'], + curly: ['warn', 'multi-line', 'consistent'], - 'no-restricted-globals': ['error'].concat( + 'no-restricted-globals': ['warn'].concat( require('confusing-browser-globals').filter(g => g !== 'self'), ), - 'react/jsx-no-useless-fragment': 'error', - 'react/self-closing-comp': 'error', + 'react/jsx-no-useless-fragment': 'warn', + 'react/self-closing-comp': 'warn', - 'rulesdir/typography': 'error', - 'rulesdir/prefer-if-statement': 'error', + 'rulesdir/typography': 'warn', + 'rulesdir/prefer-if-statement': 'warn', // https://github.com/eslint/eslint/issues/16954 // https://github.com/eslint/eslint/issues/16953 @@ -80,24 +80,24 @@ module.exports = { 'react/display-name': 'off', 'react/react-in-jsx-scope': 'off', // 'react-hooks/exhaustive-deps': [ - // 'error', + // 'warn', // { // additionalHooks: 'useLiveQuery', // }, // ], 'import/extensions': [ - 'error', + 'warn', 'never', { json: 'always', }, ], - 'import/no-useless-path-segments': 'error', - 'import/no-duplicates': ['error', { 'prefer-inline': true }], - 'import/no-unused-modules': ['error', { unusedExports: true }], + 'import/no-useless-path-segments': 'warn', + 'import/no-duplicates': ['warn', { 'prefer-inline': true }], + 'import/no-unused-modules': ['warn', { unusedExports: true }], 'import/order': [ - 'error', + 'warn', { alphabetize: { caseInsensitive: true, @@ -126,7 +126,7 @@ module.exports = { ], 'no-restricted-syntax': [ - 'error', + 'warn', { // forbid React.* as they are legacy https://twitter.com/dan_abramov/status/1308739731551858689 selector: @@ -142,7 +142,7 @@ module.exports = { }, ], 'no-restricted-imports': [ - 'error', + 'warn', { patterns: [...restrictedImportPatterns, ...restrictedImportColors] }, ], @@ -167,14 +167,14 @@ module.exports = { ], rules: { // enforce type over interface - '@typescript-eslint/consistent-type-definitions': ['error', 'type'], + '@typescript-eslint/consistent-type-definitions': ['warn', 'type'], // enforce import type '@typescript-eslint/consistent-type-imports': [ - 'error', + 'warn', { prefer: 'type-imports', fixStyle: 'inline-type-imports' }, ], '@typescript-eslint/ban-types': [ - 'error', + 'warn', { types: { // forbid FC as superflous @@ -190,7 +190,7 @@ module.exports = { files: ['./packages/loot-core/src/**/*'], rules: { 'no-restricted-imports': [ - 'error', + 'warn', { patterns: [ ...restrictedImportPatterns, diff --git a/upcoming-release-notes/1599.md b/upcoming-release-notes/1599.md new file mode 100644 index 00000000000..fb2c2f2c45b --- /dev/null +++ b/upcoming-release-notes/1599.md @@ -0,0 +1,6 @@ +--- +category: Maintenance +authors: [MatissJanis] +--- + +Convert eslint rules from "error" to "warn" to improve dev-experience; CI jobs treat warnings as errors, so we still have the same level of protection, but the local-dev experience is slightly improved From 8ff89a5ab4d626626abe936af46be0622939180e Mon Sep 17 00:00:00 2001 From: Neil <55785687+carkom@users.noreply.github.com> Date: Sat, 9 Sep 2023 10:21:17 -0700 Subject: [PATCH 2/2] DarkTheme Schedules/Payees (#1487) --- .eslintrc.js | 18 +-------- .../manager/subscribe/Bootstrap.tsx | 10 ++--- .../manager/subscribe/ChangePassword.tsx | 8 ++-- .../components/manager/subscribe/Error.tsx | 6 +-- .../components/manager/subscribe/Login.tsx | 10 ++--- .../components/manager/subscribe/common.tsx | 4 +- .../components/modals/MergeUnusedPayees.js | 6 +-- .../src/components/payees/index.js | 38 ++++++++++--------- .../components/schedules/DiscoverSchedules.js | 20 ++++++---- .../schedules/PostsOfflineNotification.js | 4 +- .../components/schedules/SchedulesTable.tsx | 23 ++++++----- .../src/components/schedules/StatusBadge.tsx | 38 +++++++++---------- .../src/components/schedules/index.tsx | 3 +- .../src/components/select/DateSelect.js | 20 ++++++---- .../select/RecurringSchedulePicker.js | 4 +- .../src/components/sidebar/Account.tsx | 17 +++++---- .../src/components/sidebar/Item.tsx | 11 +++--- .../src/components/sidebar/SecondaryItem.tsx | 11 +++--- .../src/components/sidebar/Sidebar.tsx | 9 ++--- .../src/components/util/AmountInput.js | 7 +++- packages/desktop-client/src/style/palette.ts | 1 + .../desktop-client/src/style/themes/dark.ts | 18 ++++++++- .../src/style/themes/development.ts | 15 ++++++++ .../desktop-client/src/style/themes/light.ts | 34 ++++++++++++----- upcoming-release-notes/1487.md | 6 +++ 25 files changed, 199 insertions(+), 142 deletions(-) create mode 100644 upcoming-release-notes/1487.md diff --git a/.eslintrc.js b/.eslintrc.js index 89ea002f043..4a54ca8d79b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -225,7 +225,6 @@ module.exports = { './packages/desktop-client/src/components/NotesButton.*', './packages/desktop-client/src/components/Notifications.*', './packages/desktop-client/src/components/Page.*', - './packages/desktop-client/src/components/SidebarWithData.*', './packages/desktop-client/src/components/Titlebar.*', './packages/desktop-client/src/components/UpdateNotification.*', './packages/desktop-client/src/components/accounts/Header.*', @@ -261,11 +260,6 @@ module.exports = { './packages/desktop-client/src/components/manager/ImportYNAB4.*', './packages/desktop-client/src/components/manager/ImportYNAB5.*', './packages/desktop-client/src/components/manager/WelcomeScreen.*', - './packages/desktop-client/src/components/manager/subscribe/Bootstrap.*', - './packages/desktop-client/src/components/manager/subscribe/ChangePassword.*', - './packages/desktop-client/src/components/manager/subscribe/Error.*', - './packages/desktop-client/src/components/manager/subscribe/Login.*', - './packages/desktop-client/src/components/manager/subscribe/common.*', './packages/desktop-client/src/components/modals/BudgetSummary.*', './packages/desktop-client/src/components/modals/ConfirmCategoryDelete.*', './packages/desktop-client/src/components/modals/CreateEncryptionKey.*', @@ -274,8 +268,8 @@ module.exports = { './packages/desktop-client/src/components/modals/GoCardlessExternalMsg.*', './packages/desktop-client/src/components/modals/ImportTransactions.*', './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.*', @@ -287,15 +281,6 @@ module.exports = { './packages/desktop-client/src/components/reports/chart-theme.*', './packages/desktop-client/src/components/reports/graphs/CashFlowGraph.*', './packages/desktop-client/src/components/reports/graphs/NetWorthGraph.*', - './packages/desktop-client/src/components/schedules/DiscoverSchedules.*', - './packages/desktop-client/src/components/schedules/EditSchedule.*', - './packages/desktop-client/src/components/schedules/LinkSchedule.*', - './packages/desktop-client/src/components/schedules/PostsOfflineNotification.*', - './packages/desktop-client/src/components/schedules/SchedulesTable.*', - './packages/desktop-client/src/components/schedules/StatusBadge.*', - './packages/desktop-client/src/components/schedules/index.*', - './packages/desktop-client/src/components/select/DateSelect.*', - './packages/desktop-client/src/components/select/RecurringSchedulePicker.*', './packages/desktop-client/src/components/settings/Encryption.*', './packages/desktop-client/src/components/settings/Experimental.*', './packages/desktop-client/src/components/settings/FixSplits.*', @@ -303,7 +288,6 @@ module.exports = { './packages/desktop-client/src/components/settings/Global.*', './packages/desktop-client/src/components/settings/UI.*', './packages/desktop-client/src/components/settings/index.*', - './packages/desktop-client/src/components/sidebar.*', './packages/desktop-client/src/components/transactions/MobileTransaction.*', './packages/desktop-client/src/components/transactions/TransactionsTable.*', './packages/desktop-client/src/components/util/AmountInput.*', diff --git a/packages/desktop-client/src/components/manager/subscribe/Bootstrap.tsx b/packages/desktop-client/src/components/manager/subscribe/Bootstrap.tsx index 80d49ef1069..0de5a81dfe8 100644 --- a/packages/desktop-client/src/components/manager/subscribe/Bootstrap.tsx +++ b/packages/desktop-client/src/components/manager/subscribe/Bootstrap.tsx @@ -5,7 +5,7 @@ import { createBudget } from 'loot-core/src/client/actions/budgets'; import { loggedIn } from 'loot-core/src/client/actions/user'; import { send } from 'loot-core/src/platform/client/fetch'; -import { colors } from '../../../style'; +import { theme } from '../../../style'; import Button from '../../common/Button'; import ExternalLink from '../../common/ExternalLink'; import Paragraph from '../../common/Paragraph'; @@ -56,12 +56,12 @@ export default function Bootstrap() { return ( - <Paragraph style={{ fontSize: 16, color: colors.n2 }}> + <Paragraph style={{ fontSize: 16, color: theme.pageTextDark }}> Actual is a super fast privacy-focused app for managing your finances. To secure your data, you’ll need to set a password for your server. </Paragraph> - <Paragraph isLast style={{ fontSize: 16, color: colors.n2 }}> + <Paragraph isLast style={{ fontSize: 16, color: theme.pageTextDark }}> Consider opening{' '} <ExternalLink to="https://actualbudget.org/docs/tour/"> our tour @@ -74,7 +74,7 @@ export default function Bootstrap() { <Text style={{ marginTop: 20, - color: colors.r4, + color: theme.errorText, borderRadius: 4, fontSize: 15, }} @@ -87,7 +87,7 @@ export default function Bootstrap() { buttons={ <Button type="bare" - style={{ fontSize: 15, color: colors.b4, marginRight: 15 }} + style={{ fontSize: 15, color: theme.pageTextLink, marginRight: 15 }} onClick={onDemo} > Try Demo diff --git a/packages/desktop-client/src/components/manager/subscribe/ChangePassword.tsx b/packages/desktop-client/src/components/manager/subscribe/ChangePassword.tsx index bf0f97bcf3c..895c8b2ac1e 100644 --- a/packages/desktop-client/src/components/manager/subscribe/ChangePassword.tsx +++ b/packages/desktop-client/src/components/manager/subscribe/ChangePassword.tsx @@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom'; import { send } from 'loot-core/src/platform/client/fetch'; -import { colors } from '../../../style'; +import { theme } from '../../../style'; import Button from '../../common/Button'; import Text from '../../common/Text'; import View from '../../common/View'; @@ -48,7 +48,7 @@ export default function ChangePassword() { <Text style={{ fontSize: 16, - color: colors.n2, + color: theme.pageTextDark, lineHeight: 1.4, }} > @@ -60,7 +60,7 @@ export default function ChangePassword() { <Text style={{ marginTop: 20, - color: colors.r4, + color: theme.errorText, borderRadius: 4, fontSize: 15, }} @@ -73,7 +73,7 @@ export default function ChangePassword() { <Text style={{ marginTop: 20, - color: colors.g4, + color: theme.noticeText, borderRadius: 4, fontSize: 15, }} diff --git a/packages/desktop-client/src/components/manager/subscribe/Error.tsx b/packages/desktop-client/src/components/manager/subscribe/Error.tsx index a0f6244c3a2..969a0856358 100644 --- a/packages/desktop-client/src/components/manager/subscribe/Error.tsx +++ b/packages/desktop-client/src/components/manager/subscribe/Error.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { useNavigate, useLocation } from 'react-router-dom'; -import { colors } from '../../../style'; +import { theme } from '../../../style'; import Button from '../../common/Button'; import Text from '../../common/Text'; import View from '../../common/View'; @@ -25,11 +25,11 @@ export default function Error() { } return ( - <View style={{ alignItems: 'center' }}> + <View style={{ alignItems: 'center', color: theme.pageText }}> <Text style={{ fontSize: 16, - color: colors.n2, + color: theme.pageTextDark, lineHeight: 1.4, }} > diff --git a/packages/desktop-client/src/components/manager/subscribe/Login.tsx b/packages/desktop-client/src/components/manager/subscribe/Login.tsx index 1571bc06fda..600c809661c 100644 --- a/packages/desktop-client/src/components/manager/subscribe/Login.tsx +++ b/packages/desktop-client/src/components/manager/subscribe/Login.tsx @@ -5,7 +5,7 @@ import { createBudget } from 'loot-core/src/client/actions/budgets'; import { loggedIn } from 'loot-core/src/client/actions/user'; import { send } from 'loot-core/src/platform/client/fetch'; -import { colors } from '../../../style'; +import { theme } from '../../../style'; import Button, { ButtonWithLoading } from '../../common/Button'; import { BigInput } from '../../common/Input'; import Text from '../../common/Text'; @@ -59,12 +59,12 @@ export default function Login() { } return ( - <View style={{ maxWidth: 450, marginTop: -30 }}> + <View style={{ maxWidth: 450, marginTop: -30, color: theme.pageText }}> <Title text="Sign in to this Actual instance" /> <Text style={{ fontSize: 16, - color: colors.n2, + color: theme.pageTextDark, lineHeight: 1.4, }} > @@ -76,7 +76,7 @@ export default function Login() { <Text style={{ marginTop: 20, - color: colors.r4, + color: theme.errorText, borderRadius: 4, fontSize: 15, }} @@ -115,7 +115,7 @@ export default function Login() { > <Button type="bare" - style={{ fontSize: 15, color: colors.b4, marginLeft: 10 }} + style={{ fontSize: 15, color: theme.pageTextLink, marginLeft: 10 }} onClick={onDemo} > Try Demo → diff --git a/packages/desktop-client/src/components/manager/subscribe/common.tsx b/packages/desktop-client/src/components/manager/subscribe/common.tsx index 562ec0e4edf..fdc940f1ba4 100644 --- a/packages/desktop-client/src/components/manager/subscribe/common.tsx +++ b/packages/desktop-client/src/components/manager/subscribe/common.tsx @@ -3,7 +3,7 @@ import { useNavigate, useLocation } from 'react-router-dom'; import { send } from 'loot-core/src/platform/client/fetch'; -import { colors } from '../../../style'; +import { theme } from '../../../style'; import { useSetServerURL } from '../../ServerContext'; // There are two URLs that dance with each other: `/login` and @@ -78,7 +78,7 @@ export function Title({ text }: TitleProps) { style={{ fontSize: 40, fontWeight: 700, - color: colors.p3, + color: theme.pageTextPositive, marginBottom: 20, }} > diff --git a/packages/desktop-client/src/components/modals/MergeUnusedPayees.js b/packages/desktop-client/src/components/modals/MergeUnusedPayees.js index 12932cfdfeb..50d3f36ec9e 100644 --- a/packages/desktop-client/src/components/modals/MergeUnusedPayees.js +++ b/packages/desktop-client/src/components/modals/MergeUnusedPayees.js @@ -4,7 +4,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { replaceModal } from 'loot-core/src/client/actions/modals'; import { send } from 'loot-core/src/platform/client/fetch'; -import { colors } from '../../style'; +import { theme } from '../../style'; import { Information } from '../alerts'; import Button from '../common/Button'; import Modal, { ModalButtons } from '../common/Modal'; @@ -12,7 +12,7 @@ import Paragraph from '../common/Paragraph'; import Text from '../common/Text'; import View from '../common/View'; -let highlightStyle = { color: colors.p5 }; +let highlightStyle = { color: theme.pageTextPositive }; export default function MergeUnusedPayees({ modalProps, @@ -141,7 +141,7 @@ export default function MergeUnusedPayees({ style={{ fontSize: 13, marginTop: 10, - color: colors.n4, + color: theme.pageTextLight, userSelect: 'none', display: 'flex', alignItems: 'center', diff --git a/packages/desktop-client/src/components/payees/index.js b/packages/desktop-client/src/components/payees/index.js index 8adbba2408d..a7ad234e5d4 100644 --- a/packages/desktop-client/src/components/payees/index.js +++ b/packages/desktop-client/src/components/payees/index.js @@ -24,7 +24,7 @@ import Delete from '../../icons/v0/Delete'; import ExpandArrow from '../../icons/v0/ExpandArrow'; import Merge from '../../icons/v0/Merge'; import ArrowThinRight from '../../icons/v1/ArrowThinRight'; -import { colors } from '../../style'; +import { theme } from '../../style'; import Button from '../common/Button'; import Menu from '../common/Menu'; import Search from '../common/Search'; @@ -61,9 +61,9 @@ function RuleButton({ ruleCount, focused, onEdit, onClick }) { style={{ borderRadius: 4, padding: '3px 6px', - backgroundColor: colors.g9, - border: '1px solid ' + colors.g9, - color: colors.g1, + backgroundColor: theme.noticeBackground, + border: '1px solid ' + theme.noticeBackground, + color: theme.altNoticeText, fontSize: 12, }} onEdit={onEdit} @@ -102,7 +102,7 @@ let Payee = memo( }) => { let { id } = payee; let dispatchSelected = useSelectedDispatch(); - let borderColor = selected ? colors.b8 : colors.border; + let borderColor = selected ? theme.tableBorderSelected : theme.tableBorder; let backgroundFocus = hovered || focusedField === 'select'; return ( @@ -112,14 +112,14 @@ let Payee = memo( ...style, borderColor, backgroundColor: hovered - ? colors.hover + ? theme.tableRowBackgroundHover : selected - ? colors.b9 + ? theme.tableRowBackgroundHighlight : backgroundFocus - ? colors.hover - : 'white', + ? theme.tableRowBackgroundHover + : theme.tableBackground, ...(selected && { - backgroundColor: colors.b9, + backgroundColor: theme.tableRowBackgroundHighlight, zIndex: 100, }), }} @@ -138,7 +138,9 @@ let Payee = memo( /> <InputCell value={(payee.transfer_acct ? 'Transfer: ' : '') + payee.name} - valueStyle={!selected && payee.transfer_acct && { color: colors.n7 }} + valueStyle={ + !selected && payee.transfer_acct && { color: theme.pageTextSubdued } + } exposed={focusedField === 'name'} width="flex" onUpdate={value => @@ -220,7 +222,7 @@ const PayeeTable = forwardRef( ); function PayeeTableHeader() { - let borderColor = colors.border; + let borderColor = theme.tableborder; let dispatchSelected = useSelectedDispatch(); let selectedItems = useSelectedItems(); @@ -229,13 +231,12 @@ function PayeeTableHeader() { <TableHeader style={{ borderColor, - backgroundColor: 'white', - color: colors.n4, + backgroundColor: theme.tableBackground, + color: theme.pageTextLight, zIndex: 200, userSelect: 'none', }} collapsed={true} - version="v2" > <SelectCell exposed={true} @@ -254,7 +255,7 @@ function EmptyMessage({ text, style }) { <View style={{ textAlign: 'center', - color: colors.n7, + color: theme.pageTextSubdued, fontStyle: 'italic', fontSize: 13, marginTop: 5, @@ -298,7 +299,7 @@ function PayeeMenu({ payeesById, selectedPayees, onDelete, onMerge, onClose }) { padding: 3, fontSize: 11, fontStyle: 'italic', - color: colors.n7, + color: theme.pageTextSubdued, }} > {[...selectedPayees] @@ -529,6 +530,7 @@ export const ManagePayees = forwardRef( </View> <View style={{ flex: 1 }} /> <Search + id="filter-input" placeholder="Filter payees..." value={filter} onChange={applyFilter} @@ -539,7 +541,7 @@ export const ManagePayees = forwardRef( <View style={{ flex: 1, - border: '1px solid ' + colors.border, + border: '1px solid ' + theme.tableBorder, borderTopLeftRadius: 4, borderTopRightRadius: 4, overflow: 'hidden', diff --git a/packages/desktop-client/src/components/schedules/DiscoverSchedules.js b/packages/desktop-client/src/components/schedules/DiscoverSchedules.js index 56ffebe9aa0..ebc3568418a 100644 --- a/packages/desktop-client/src/components/schedules/DiscoverSchedules.js +++ b/packages/desktop-client/src/components/schedules/DiscoverSchedules.js @@ -10,7 +10,7 @@ import useSelected, { SelectedProvider, } from '../../hooks/useSelected'; import useSendPlatformRequest from '../../hooks/useSendPlatformRequest'; -import { colors } from '../../style'; +import { theme } from '../../style'; import { ButtonWithLoading } from '../common/Button'; import Modal from '../common/Modal'; import Paragraph from '../common/Paragraph'; @@ -40,11 +40,19 @@ function DiscoverSchedulesTable({ schedules, loading }) { dispatchSelected({ type: 'select', id: item.id, event: e }); }} style={{ + borderColor: selected + ? theme.alttableBorderSelected + : theme.tableBorder, cursor: 'pointer', - borderColor: selected ? colors.b8 : colors.border, - backgroundColor: selected ? colors.selected : 'white', + color: selected + ? theme.tableRowBackgroundHighlightText + : theme.tableText, + backgroundColor: selected + ? theme.tableRowBackgroundHighlight + : theme.tableBackground, ':hover': { - backgroundColor: selected ? colors.selected : colors.hover, + backgroundColor: theme.tableRowBackgroundHover, + color: theme.tableText, }, }} > @@ -72,7 +80,7 @@ function DiscoverSchedulesTable({ schedules, loading }) { return ( <View style={{ flex: 1 }}> - <TableHeader height={ROW_HEIGHT} inset={15} version="v2"> + <TableHeader height={ROW_HEIGHT} inset={15}> <SelectCell exposed={!loading} focused={false} @@ -90,8 +98,6 @@ function DiscoverSchedulesTable({ schedules, loading }) { </TableHeader> <Table rowHeight={ROW_HEIGHT} - version="v2" - backgroundColor="transparent" style={{ flex: 1, backgroundColor: 'transparent', diff --git a/packages/desktop-client/src/components/schedules/PostsOfflineNotification.js b/packages/desktop-client/src/components/schedules/PostsOfflineNotification.js index d37a0d409d6..5f991b5d78e 100644 --- a/packages/desktop-client/src/components/schedules/PostsOfflineNotification.js +++ b/packages/desktop-client/src/components/schedules/PostsOfflineNotification.js @@ -3,7 +3,7 @@ import { useLocation } from 'react-router-dom'; import { send } from 'loot-core/src/platform/client/fetch'; -import { colors } from '../../style'; +import { theme } from '../../style'; import Button from '../common/Button'; import Modal from '../common/Modal'; import Paragraph from '../common/Paragraph'; @@ -30,7 +30,7 @@ export default function PostsOfflineNotification({ modalProps, actions }) { The {plural ? 'payees ' : 'payee '} {payees.map((id, idx) => ( <Text key={id}> - <Text style={{ color: colors.p4 }}> + <Text style={{ color: theme.pageTextPositive }}> <DisplayId id={id} type="payees" /> </Text> {idx === payees.length - 1 diff --git a/packages/desktop-client/src/components/schedules/SchedulesTable.tsx b/packages/desktop-client/src/components/schedules/SchedulesTable.tsx index e6b625c2dd7..e95348718ef 100644 --- a/packages/desktop-client/src/components/schedules/SchedulesTable.tsx +++ b/packages/desktop-client/src/components/schedules/SchedulesTable.tsx @@ -9,7 +9,7 @@ import { integerToCurrency } from 'loot-core/src/shared/util'; import DotsHorizontalTriple from '../../icons/v1/DotsHorizontalTriple'; import Check from '../../icons/v2/Check'; -import { colors } from '../../style'; +import { theme } from '../../style'; import Button from '../common/Button'; import Menu from '../common/Menu'; import Text from '../common/Text'; @@ -94,7 +94,7 @@ export function ScheduleAmountCell({ amount, op }) { <View style={{ textAlign: 'left', - color: colors.n7, + color: theme.pageTextSubdued, lineHeight: '1em', marginRight: 10, }} @@ -106,7 +106,7 @@ export function ScheduleAmountCell({ amount, op }) { <Text style={{ flex: 1, - color: num > 0 ? colors.g5 : null, + color: num > 0 ? theme.noticeText : theme.tableText, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', @@ -196,13 +196,18 @@ export function SchedulesTable({ onClick={() => onSelect(item.id)} style={{ cursor: 'pointer', - backgroundColor: 'white', - ':hover': { backgroundColor: colors.hover }, + backgroundColor: theme.tableBackground, + color: theme.tableText, + ':hover': { backgroundColor: theme.tableRowBackgroundHover }, }} > <Field width="flex" name="name"> <Text - style={item.name == null ? { color: colors.n8 } : null} + style={ + item.name == null + ? { color: theme.buttonNormalDisabledText } + : null + } title={item.name ? item.name : ''} > {item.name ? item.name : 'None'} @@ -251,8 +256,8 @@ export function SchedulesTable({ inset={15} style={{ cursor: 'pointer', - backgroundColor: 'white', - ':hover': { backgroundColor: colors.hover }, + backgroundColor: 'transparent', + ':hover': { backgroundColor: theme.tableRowBackgroundHover }, }} onClick={() => setShowCompleted(true)} > @@ -261,7 +266,7 @@ export function SchedulesTable({ style={{ fontStyle: 'italic', textAlign: 'center', - color: colors.n6, + color: theme.tableText, }} > Show completed schedules diff --git a/packages/desktop-client/src/components/schedules/StatusBadge.tsx b/packages/desktop-client/src/components/schedules/StatusBadge.tsx index 3e1c395f2b1..ce52ff4a112 100644 --- a/packages/desktop-client/src/components/schedules/StatusBadge.tsx +++ b/packages/desktop-client/src/components/schedules/StatusBadge.tsx @@ -9,7 +9,7 @@ import CheckCircleHollow from '../../icons/v2/CheckCircleHollow'; import EditSkull1 from '../../icons/v2/EditSkull1'; import FavoriteStar from '../../icons/v2/FavoriteStar'; import ValidationCheck from '../../icons/v2/ValidationCheck'; -import { colors, type CSSProperties } from '../../style'; +import { theme, type CSSProperties } from '../../style'; import Text from '../common/Text'; import View from '../common/View'; @@ -18,48 +18,48 @@ export function getStatusProps(status: Status) { switch (status) { case 'missed': - color = colors.r1; - backgroundColor = colors.r10; + color = theme.altErrorText; + backgroundColor = theme.altErrorBackground; Icon = EditSkull1; break; case 'due': - color = colors.y1; - backgroundColor = colors.y9; + color = theme.altWarningText; + backgroundColor = theme.altWarningBackground; Icon = AlertTriangle; break; case 'upcoming': - color = colors.p1; - backgroundColor = colors.p10; + color = theme.upcomingText; + backgroundColor = theme.upcomingBackground; Icon = CalendarIcon; break; case 'paid': - color = colors.g2; - backgroundColor = colors.g10; + color = theme.alt2NoticeText; + backgroundColor = theme.altNoticeBackground; Icon = ValidationCheck; break; case 'completed': - color = colors.n4; - backgroundColor = colors.n11; + color = theme.alt2TableText; + backgroundColor = theme.altTableBackground; Icon = FavoriteStar; break; case 'pending': - color = colors.g4; - backgroundColor = colors.g11; + color = theme.alt3NoticeText; + backgroundColor = theme.alt2NoticeBackground; Icon = CalendarIcon; break; case 'scheduled': - color = colors.n1; - backgroundColor = colors.n11; + color = theme.menuItemText; + backgroundColor = theme.altTableBackground; Icon = CalendarIcon; break; case 'cleared': - color = colors.g5; - backgroundColor = colors.n11; + color = theme.noticeText; + backgroundColor = theme.altTableBackground; Icon = CheckCircle1; break; default: - color = colors.n7; - backgroundColor = colors.n11; + color = theme.buttonNormalDisabledText; + backgroundColor = theme.altTableBackground; Icon = CheckCircleHollow; break; } diff --git a/packages/desktop-client/src/components/schedules/index.tsx b/packages/desktop-client/src/components/schedules/index.tsx index 87f762df6e5..f72b3937cb5 100644 --- a/packages/desktop-client/src/components/schedules/index.tsx +++ b/packages/desktop-client/src/components/schedules/index.tsx @@ -5,6 +5,7 @@ import { send } from 'loot-core/src/platform/client/fetch'; import { type ScheduleEntity } from 'loot-core/src/types/models'; import { useActions } from '../../hooks/useActions'; +import { theme } from '../../style'; import Button from '../common/Button'; import Search from '../common/Search'; import View from '../common/View'; @@ -86,7 +87,7 @@ export default function Schedules() { allowCompleted={true} onSelect={onEdit} onAction={onAction} - style={{ backgroundColor: 'white' }} + style={{ backgroundColor: theme.tableBackground }} // @todo: Remove following props after typing SchedulesTable minimal={undefined} tableStyle={undefined} diff --git a/packages/desktop-client/src/components/select/DateSelect.js b/packages/desktop-client/src/components/select/DateSelect.js index b47f7626485..4d372e79569 100644 --- a/packages/desktop-client/src/components/select/DateSelect.js +++ b/packages/desktop-client/src/components/select/DateSelect.js @@ -23,7 +23,7 @@ import { } from 'loot-core/src/shared/months'; import { stringToInteger } from 'loot-core/src/shared/util'; -import { colors } from '../../style'; +import { theme } from '../../style'; import Input from '../common/Input'; import View from '../common/View'; import { Tooltip } from '../tooltips'; @@ -33,8 +33,8 @@ import DateSelectRight from './DateSelect.right.png'; let pickerStyles = { '& .pika-single.actual-date-picker': { - color: colors.n11, - background: colors.n1, + color: theme.sidebarItemTextHover, + background: theme.sidebarBackground, border: 'none', boxShadow: '0 0px 4px rgba(0, 0, 0, .25)', borderRadius: 4, @@ -45,28 +45,32 @@ let pickerStyles = { float: 'none', width: 'auto', }, + // month/year '& .pika-label': { - backgroundColor: colors.n1, + backgroundColor: theme.sidebarBackground, }, + // Back/forward buttons '& .pika-prev': { backgroundImage: `url(${DateSelectLeft})`, }, '& .pika-next': { backgroundImage: `url(${DateSelectRight})`, }, + // Day of week '& .pika-table th': { - color: colors.n11, + color: theme.sidebarItemText, '& abbr': { textDecoration: 'none' }, }, + // Numbered days '& .pika-button': { - backgroundColor: colors.n2, - color: colors.n11, + backgroundColor: theme.sidebarItemBackgroundHover, + color: theme.sidebarItemText, }, '& .is-today .pika-button': { textDecoration: 'underline', }, '& .is-selected .pika-button': { - backgroundColor: colors.n5, + backgroundColor: theme.altButtonNormalSelectedBackground, boxShadow: 'none', }, }, diff --git a/packages/desktop-client/src/components/select/RecurringSchedulePicker.js b/packages/desktop-client/src/components/select/RecurringSchedulePicker.js index 330a800fb24..b25da036dcb 100644 --- a/packages/desktop-client/src/components/select/RecurringSchedulePicker.js +++ b/packages/desktop-client/src/components/select/RecurringSchedulePicker.js @@ -7,7 +7,7 @@ import { getRecurringDescription } from 'loot-core/src/shared/schedules'; import AddIcon from '../../icons/v0/Add'; import SubtractIcon from '../../icons/v0/Subtract'; -import { colors, theme } from '../../style'; +import { theme } from '../../style'; import Button from '../common/Button'; import Input from '../common/Input'; import Select from '../common/Select'; @@ -189,7 +189,7 @@ function SchedulePreview({ previewDates }) { <Stack direction="column" spacing={1} - style={{ marginTop: 15, color: colors.n4 }} + style={{ marginTop: 15, color: theme.tableText }} > {content} </Stack> diff --git a/packages/desktop-client/src/components/sidebar/Account.tsx b/packages/desktop-client/src/components/sidebar/Account.tsx index 6e05a4c6f8e..f836dea8301 100644 --- a/packages/desktop-client/src/components/sidebar/Account.tsx +++ b/packages/desktop-client/src/components/sidebar/Account.tsx @@ -4,8 +4,7 @@ import { css } from 'glamor'; import { type AccountEntity } from 'loot-core/src/types/models'; -// eslint-disable-next-line no-restricted-imports -import { styles, colors, type CSSProperties } from '../../style'; +import { styles, theme, type CSSProperties } from '../../style'; import AlignedText from '../common/AlignedText'; import AnchorLink from '../common/AnchorLink'; import View from '../common/View'; @@ -27,8 +26,8 @@ export const accountNameStyle: CSSProperties = { paddingRight: 15, paddingLeft: 10, textDecoration: 'none', - color: colors.n9, - ':hover': { backgroundColor: colors.n2 }, + color: theme.sidebarItemText, + ':hover': { backgroundColor: theme.sidebarItemBackgroundHover }, ...styles.smallText, }; @@ -95,8 +94,8 @@ function Account({ ...(updated && { fontWeight: 700 }), }} activeStyle={{ - borderColor: colors.p8, - color: colors.p8, + borderColor: theme.sidebarItemAccentSelected, + color: theme.sidebarItemTextSelected, // This is kind of a hack, but we don't ever want the account // that the user is looking at to be "bolded" which means it // has unread transactions. The system does mark is read and @@ -104,7 +103,7 @@ function Account({ // ignores it if it's active fontWeight: (style && style.fontWeight) || 'normal', '& .dot': { - backgroundColor: colors.p8, + backgroundColor: theme.sidebarItemBackgroundSelected, transform: 'translateX(-4.5px)', }, }} @@ -125,7 +124,9 @@ function Account({ width: 5, height: 5, borderRadius: 5, - backgroundColor: failed ? colors.r7 : colors.g5, + backgroundColor: failed + ? theme.errorBackground + : theme.sidebarItemBackgroundPositive, marginLeft: 2, transition: 'transform .3s', opacity: connected ? 1 : 0, diff --git a/packages/desktop-client/src/components/sidebar/Item.tsx b/packages/desktop-client/src/components/sidebar/Item.tsx index c3d84b1a7e3..32ec1c87ef6 100644 --- a/packages/desktop-client/src/components/sidebar/Item.tsx +++ b/packages/desktop-client/src/components/sidebar/Item.tsx @@ -5,8 +5,7 @@ import React, { type SVGProps, } from 'react'; -// eslint-disable-next-line no-restricted-imports -import { styles, colors, type CSSProperties } from '../../style'; +import { styles, theme, type CSSProperties } from '../../style'; import Block from '../common/Block'; import View from '../common/View'; @@ -36,7 +35,7 @@ function Item({ forceActive = false, }: ItemProps) { const hoverStyle = { - backgroundColor: colors.n2, + backgroundColor: theme.sidebarItemBackgroundHover, }; const content = ( @@ -63,16 +62,16 @@ function Item({ paddingLeft: 19 + indent, paddingRight: 10, textDecoration: 'none', - color: colors.n9, + color: theme.sidebarItemText, ...(forceHover ? hoverStyle : {}), ':hover': hoverStyle, }} to={to} onClick={onClick} activeStyle={{ - borderLeft: '4px solid ' + colors.p8, + borderLeft: '4px solid ' + theme.sidebarItemTextSelected, paddingLeft: 19 + indent - 4, - color: colors.p8, + color: theme.sidebarItemTextSelected, }} forceActive={forceActive} > diff --git a/packages/desktop-client/src/components/sidebar/SecondaryItem.tsx b/packages/desktop-client/src/components/sidebar/SecondaryItem.tsx index dc870f4f8db..dbe355c35e7 100644 --- a/packages/desktop-client/src/components/sidebar/SecondaryItem.tsx +++ b/packages/desktop-client/src/components/sidebar/SecondaryItem.tsx @@ -4,8 +4,7 @@ import React, { type SVGProps, } from 'react'; -// eslint-disable-next-line no-restricted-imports -import { type CSSProperties, colors } from '../../style'; +import { theme, type CSSProperties } from '../../style'; import Block from '../common/Block'; import View from '../common/View'; @@ -53,17 +52,17 @@ function SecondaryItem({ <ItemContent style={{ ...accountNameStyle, - color: colors.n9, + color: theme.sidebarItemText, paddingLeft: 14 + indent, fontWeight: bold ? fontWeight : null, - ':hover': { backgroundColor: colors.n2 }, + ':hover': { backgroundColor: theme.sidebarItemBackgroundHover }, }} to={to} onClick={onClick} activeStyle={{ - borderLeft: '4px solid ' + colors.p8, + borderLeft: '4px solid ' + theme.sidebarItemTextSelected, paddingLeft: 14 - 4 + indent, - color: colors.p8, + color: theme.sidebarItemTextSelected, fontWeight: bold ? fontWeight : null, }} > diff --git a/packages/desktop-client/src/components/sidebar/Sidebar.tsx b/packages/desktop-client/src/components/sidebar/Sidebar.tsx index 7b995f3a271..7b51e2d7a8f 100644 --- a/packages/desktop-client/src/components/sidebar/Sidebar.tsx +++ b/packages/desktop-client/src/components/sidebar/Sidebar.tsx @@ -6,8 +6,7 @@ import { type AccountEntity } from 'loot-core/src/types/models'; import Reports from '../../icons/v1/Reports'; import Wallet from '../../icons/v1/Wallet'; import CalendarIcon from '../../icons/v2/Calendar'; -// eslint-disable-next-line no-restricted-imports -import { type CSSProperties, colors } from '../../style'; +import { type CSSProperties, theme } from '../../style'; import View from '../common/View'; import { type OnDropCallback } from '../sort'; import { type Binding } from '../spreadsheet'; @@ -70,8 +69,8 @@ function Sidebar({ <View style={{ width: SIDEBAR_WIDTH, - color: colors.n9, - backgroundColor: colors.n1, + color: theme.sidebarItemText, + backgroundColor: theme.sidebarBackground, '& .float': { opacity: isFloating ? 1 : 0, transition: 'opacity .25s, width .25s', @@ -118,7 +117,7 @@ function Sidebar({ <View style={{ height: 1, - backgroundColor: colors.n3, + backgroundColor: theme.sidebarItemBackgroundHover, marginTop: 15, flexShrink: 0, }} diff --git a/packages/desktop-client/src/components/util/AmountInput.js b/packages/desktop-client/src/components/util/AmountInput.js index 5371392dbcc..4cfe9e222bb 100644 --- a/packages/desktop-client/src/components/util/AmountInput.js +++ b/packages/desktop-client/src/components/util/AmountInput.js @@ -7,6 +7,7 @@ import { import Add from '../../icons/v1/Add'; import Subtract from '../../icons/v1/Subtract'; +import { theme } from '../../style'; import Button from '../common/Button'; import InputWithContent from '../common/InputWithContent'; import View from '../common/View'; @@ -33,9 +34,9 @@ export function AmountInput({ id, defaultValue = 0, onChange, style }) { leftContent={ <Button type="bare" style={{ padding: '0 7px' }} onClick={onSwitch}> {negative ? ( - <Subtract style={{ width: 8, height: 8 }} /> + <Subtract style={{ width: 8, height: 8, color: 'inherit' }} /> ) : ( - <Add style={{ width: 8, height: 8 }} /> + <Add style={{ width: 8, height: 8, color: 'inherit' }} /> )} </Button> } @@ -60,6 +61,7 @@ export function BetweenAmountInput({ defaultValue, onChange }) { setNum1(value); onChange({ num1: value, num2 }); }} + style={{ color: theme.formInputText }} /> <View style={{ margin: '0 5px' }}>and</View> <AmountInput @@ -68,6 +70,7 @@ export function BetweenAmountInput({ defaultValue, onChange }) { setNum2(value); onChange({ num1, num2: value }); }} + style={{ color: theme.formInputText }} /> </View> ); diff --git a/packages/desktop-client/src/style/palette.ts b/packages/desktop-client/src/style/palette.ts index 3e6cb7d876a..fa8bbe7f229 100644 --- a/packages/desktop-client/src/style/palette.ts +++ b/packages/desktop-client/src/style/palette.ts @@ -80,3 +80,4 @@ export const purple800 = oldColors.p2; export const purple900 = oldColors.p1; export const white = '#ffffff'; export const black = '#000000'; +export const hover = oldColors.hover; diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts index e2691ec83f1..40a2e829e15 100644 --- a/packages/desktop-client/src/style/themes/dark.ts +++ b/packages/desktop-client/src/style/themes/dark.ts @@ -11,6 +11,7 @@ export const pageText = colorPalette.navy150; export const pageTextLight = pageText; export const pageTextSubdued = colorPalette.navy500; export const altpageTextSubdued = pageTextSubdued; +export const pageTextDark = colorPalette.navy800; export const pageTextPositive = colorPalette.purple200; export const pageTextLink = colorPalette.purple400; @@ -22,9 +23,11 @@ export const cardBorder = colorPalette.purple400; export const cardShadow = colorPalette.navy700; export const tableBackground = colorPalette.navy800; +export const altTableBackground = tableBackground; export const tableRowBackgroundHover = colorPalette.navy700; export const tableText = colorPalette.navy150; export const altTableText = tableText; +export const alt2TableText = tableText; export const tableTextSelected = colorPalette.navy150; export const tableTextHover = colorPalette.navy400; export const tableTextEditing = colorPalette.black; @@ -34,6 +37,7 @@ export const tableHeaderText = colorPalette.navy300; export const tableHeaderBackground = colorPalette.navy700; export const tableBorder = colorPalette.navy600; export const tableBorderSelected = colorPalette.purple400; +export const alttableBorderSelected = tableBorderSelected; export const tableBorderHover = colorPalette.purple300; export const tableBorderSeparator = colorPalette.navy400; export const tableRowBackgroundHighlight = colorPalette.purple800; @@ -123,6 +127,7 @@ export const buttonNormalShadow = 'rgba(0, 0, 0, 0.4)'; export const altbuttonMenuBackground = buttonNormalBackground; export const buttonNormalSelectedText = colorPalette.white; export const buttonNormalSelectedBackground = colorPalette.purple600; +export const altButtonNormalSelectedBackground = buttonNormalSelectedBackground; export const buttonNormalDisabledText = colorPalette.navy500; export const buttonNormalDisabledBackground = colorPalette.navy800; @@ -137,15 +142,26 @@ export const buttonBareDisabledText = buttonNormalDisabledText; export const buttonBareDisabledBackground = buttonBareBackground; export const noticeBackground = colorPalette.green800; +export const altNoticeBackground = noticeBackground; +export const alt2NoticeBackground = noticeBackground; export const noticeText = colorPalette.green300; +export const altNoticeText = noticeText; +export const alt2NoticeText = noticeText; +export const alt3NoticeText = noticeText; export const noticeAccent = colorPalette.green500; export const warningBackground = colorPalette.orange800; +export const altWarningBackground = warningBackground; export const warningText = colorPalette.orange200; +export const altWarningText = warningText; export const warningAccent = colorPalette.orange500; export const errorBackground = colorPalette.red800; +export const altErrorBackground = errorBackground; export const errorText = colorPalette.red200; +export const altErrorText = errorText; export const errorAccent = colorPalette.red500; - +export const upcomingBackground = tableBackground; +export const upcomingText = tableTextInactive; +export const upcomingAccent = tableBorder; export const formLabelText = colorPalette.purple150; export const altFormLabelText = formLabelText; export const formInputBackground = colorPalette.navy800; diff --git a/packages/desktop-client/src/style/themes/development.ts b/packages/desktop-client/src/style/themes/development.ts index 9cae5bfc622..e6a3f2aa2cc 100644 --- a/packages/desktop-client/src/style/themes/development.ts +++ b/packages/desktop-client/src/style/themes/development.ts @@ -22,9 +22,11 @@ export const cardBorder = colorPalette.purple400; export const cardShadow = colorPalette.purple100; export const tableBackground = colorPalette.red900; +export const altTableBackground = tableBackground; export const tableRowBackgroundHover = colorPalette.red800; export const tableText = colorPalette.red200; export const altTableText = colorPalette.navy400; +export const alt2TableText = altTableText; export const tableTextSelected = colorPalette.red150; export const tableTextHover = colorPalette.red400; export const tableTextEditing = colorPalette.black; @@ -82,6 +84,9 @@ export const mobileNavItem = colorPalette.gray300; export const mobileNavItemSelected = colorPalette.purple500; export const mobileAccountShadow = colorPalette.navy300; export const mobileAccountText = colorPalette.blue800; +export const mobileModalBackground = colorPalette.navy900; +export const mobileModalText = colorPalette.white; +export const altMobileModalText = colorPalette.blue100; // Button export const buttonMenuText = colorPalette.navy150; @@ -115,6 +120,7 @@ export const buttonNormalShadow = colorPalette.navy700; export const altbuttonMenuBackground = colorPalette.navy100; export const buttonNormalSelectedText = colorPalette.purple200; export const buttonNormalSelectedBackground = colorPalette.purple400; +export const altButtonNormalSelectedBackground = buttonNormalSelectedBackground; export const buttonNormalDisabledText = colorPalette.navy500; export const buttonNormalDisabledBackground = colorPalette.navy800; @@ -129,13 +135,22 @@ export const buttonBareDisabledText = buttonNormalDisabledText; export const buttonBareDisabledBackground = buttonBareBackground; export const noticeBackground = colorPalette.green800; +export const altNoticeBackground = noticeBackground; +export const alt2NoticeBackground = noticeBackground; export const noticeText = colorPalette.green300; +export const altNoticeText = noticeText; +export const alt2NoticeText = noticeText; +export const alt3NoticeText = noticeText; export const noticeAccent = colorPalette.green500; export const warningBackground = colorPalette.orange800; +export const altWarningBackground = warningBackground; export const warningText = colorPalette.orange200; +export const altWarningText = warningText; export const warningAccent = colorPalette.orange500; export const errorBackground = colorPalette.red800; +export const altErrorBackground = errorBackground; export const errorText = colorPalette.red200; +export const altErrorText = errorText; export const errorAccent = colorPalette.red500; export const formLabelText = colorPalette.purple200; diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts index aded0c44768..a36e26b0a05 100644 --- a/packages/desktop-client/src/style/themes/light.ts +++ b/packages/desktop-client/src/style/themes/light.ts @@ -11,6 +11,7 @@ export const pageText = '#272630'; export const pageTextLight = colorPalette.navy600; export const pageTextSubdued = colorPalette.navy300; export const altpageTextSubdued = colorPalette.navy500; +export const pageTextDark = colorPalette.navy800; export const pageTextPositive = colorPalette.purple600; export const pageTextLink = colorPalette.blue600; @@ -22,9 +23,11 @@ export const cardBorder = colorPalette.purple500; export const cardShadow = colorPalette.navy700; export const tableBackground = colorPalette.white; +export const altTableBackground = colorPalette.navy50; export const tableRowBackgroundHover = colorPalette.navy50; export const tableText = pageText; export const altTableText = colorPalette.navy400; +export const alt2TableText = colorPalette.navy600; export const tableTextSelected = colorPalette.navy700; export const tableTextHover = colorPalette.navy900; export const tableTextEditing = colorPalette.navy50; @@ -34,22 +37,23 @@ export const tableHeaderText = colorPalette.navy600; export const tableHeaderBackground = colorPalette.white; export const tableBorder = colorPalette.navy100; export const tableBorderSelected = colorPalette.purple500; +export const alttableBorderSelected = colorPalette.blue200; export const tableBorderHover = colorPalette.purple400; export const tableBorderSeparator = colorPalette.navy400; 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 sidebarBackground = colorPalette.navy900; export const sidebarItemBackground = colorPalette.blue800; -export const sidebarItemBackgroundSelected = colorPalette.blue800; -export const sidebarItemBackgroundHover = colorPalette.blue700; +export const sidebarItemBackgroundPositive = colorPalette.green500; +export const sidebarItemBackgroundSelected = colorPalette.purple200; +export const sidebarItemBackgroundHover = colorPalette.navy800; export const sidebarItemAccent = colorPalette.blue800; -export const sidebarItemAccentSelected = colorPalette.purple300; +export const sidebarItemAccentSelected = colorPalette.purple200; export const sidebarItemAccentHover = colorPalette.blue700; -export const sidebarItemText = colorPalette.navy100; -export const sidebarItemTextSelected = colorPalette.purple300; +export const sidebarItemText = colorPalette.navy150; +export const sidebarItemTextSelected = colorPalette.purple200; export const sidebarItemTextHover = colorPalette.navy50; export const tooltipBackground = colorPalette.navy50; @@ -123,6 +127,7 @@ export const buttonNormalShadow = 'rgba(0, 0, 0, 0.2)'; export const altbuttonMenuBackground = colorPalette.navy100; export const buttonNormalSelectedText = colorPalette.white; export const buttonNormalSelectedBackground = colorPalette.blue600; +export const altButtonNormalSelectedBackground = colorPalette.navy500; export const buttonNormalDisabledText = colorPalette.navy300; export const buttonNormalDisabledBackground = buttonNormalBackground; @@ -136,16 +141,27 @@ export const buttonBareBackgroundActive = 'rgba(100, 100, 100, .25)'; export const buttonBareDisabledText = buttonNormalDisabledText; export const buttonBareDisabledBackground = buttonBareBackground; -export const noticeBackground = colorPalette.green50; +export const noticeBackground = colorPalette.green150; +export const altNoticeBackground = colorPalette.green100; +export const alt2NoticeBackground = colorPalette.green50; export const noticeText = colorPalette.green500; +export const altNoticeText = colorPalette.green900; +export const alt2NoticeText = colorPalette.green800; +export const alt3NoticeText = colorPalette.green600; export const noticeAccent = colorPalette.green200; export const warningBackground = colorPalette.orange200; +export const altWarningBackground = colorPalette.orange150; export const warningText = colorPalette.orange800; +export const altWarningText = colorPalette.orange900; export const warningAccent = colorPalette.orange400; export const errorBackground = colorPalette.red50; +export const altErrorBackground = colorPalette.red100; export const errorText = colorPalette.red500; +export const altErrorText = colorPalette.red900; export const errorAccent = colorPalette.red200; - +export const upcomingBackground = colorPalette.purple100; +export const upcomingText = colorPalette.purple900; +export const upcomingAccent = colorPalette.purple100; export const formLabelText = colorPalette.blue500; export const altFormLabelText = colorPalette.blue700; export const formInputBackground = colorPalette.navy50; diff --git a/upcoming-release-notes/1487.md b/upcoming-release-notes/1487.md new file mode 100644 index 00000000000..e6135fa7aa0 --- /dev/null +++ b/upcoming-release-notes/1487.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [biohzrddd, carkom] +--- + +Phase three of dark theme, to include schedules/payees/sidebar \ No newline at end of file