diff --git a/.eslintrc.js b/.eslintrc.js
index b10db2ff9c5717f467918882205d64cf23328a41..8f4181aff90dd72ec6abe0b495aaff7910063a50 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -240,35 +240,15 @@ module.exports = {
'./packages/desktop-client/src/components/budget/SidebarCategory.*',
'./packages/desktop-client/src/components/budget/SidebarGroup.*',
'./packages/desktop-client/src/components/budget/constants.*',
+ './packages/desktop-client/src/components/budget/misc.*',
'./packages/desktop-client/src/components/budget/report/BudgetSummary.*',
'./packages/desktop-client/src/components/budget/report/components.*',
'./packages/desktop-client/src/components/budget/rollover/BudgetSummary.*',
'./packages/desktop-client/src/components/budget/rollover/rollover-components.*',
'./packages/desktop-client/src/components/budget/util.*',
- './packages/desktop-client/src/components/common.*',
- './packages/desktop-client/src/components/common/Card.*',
- './packages/desktop-client/src/components/common/Label.*',
- './packages/desktop-client/src/components/common/View.*',
'./packages/desktop-client/src/components/common/ExternalLink.*',
'./packages/desktop-client/src/components/modals/BudgetSummary.*',
'./packages/desktop-client/src/components/payees/index.*',
- './packages/desktop-client/src/components/reports/CashFlow.*',
- './packages/desktop-client/src/components/reports/Change.*',
- './packages/desktop-client/src/components/reports/DateRange.*',
- './packages/desktop-client/src/components/reports/Header.*',
- './packages/desktop-client/src/components/reports/NetWorth.*',
- './packages/desktop-client/src/components/reports/Overview.*',
- './packages/desktop-client/src/components/reports/Tooltip.*',
- './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/settings/Encryption.*',
- './packages/desktop-client/src/components/settings/Experimental.*',
- './packages/desktop-client/src/components/settings/FixSplits.*',
- './packages/desktop-client/src/components/settings/Format.*',
- './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/transactions/MobileTransaction.*',
'./packages/desktop-client/src/components/transactions/TransactionsTable.*',
'./packages/desktop-client/src/components/util/AmountInput.*',
diff --git a/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx
index 82c5cc0f2fe0b83b339a289dfb39e6e4964a94a9..ebf6d1c782c53c2a0cd4b23857cf83fa93d6b3eb 100644
--- a/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx
@@ -15,7 +15,7 @@ import useFeatureFlag from '../../../hooks/useFeatureFlag';
import DotsHorizontalTriple from '../../../icons/v1/DotsHorizontalTriple';
import ArrowButtonDown1 from '../../../icons/v2/ArrowButtonDown1';
import ArrowButtonUp1 from '../../../icons/v2/ArrowButtonUp1';
-import { colors, type CSSProperties, styles } from '../../../style';
+import { theme, type CSSProperties, styles } from '../../../style';
import AlignedText from '../../common/AlignedText';
import Button from '../../common/Button';
import HoverTarget from '../../common/HoverTarget';
@@ -30,7 +30,6 @@ import NamespaceContext from '../../spreadsheet/NamespaceContext';
import useFormat from '../../spreadsheet/useFormat';
import useSheetValue from '../../spreadsheet/useSheetValue';
import { Tooltip } from '../../tooltips';
-import { MONTH_BOX_SHADOW } from '../constants';
import { makeAmountFullStyle } from '../util';
import { useReport } from './ReportContext';
@@ -100,8 +99,8 @@ function IncomeProgress({ current, target }: IncomeProgressProps) {
return (
<PieProgress
progress={frac}
- color={over ? colors.r7 : colors.g5}
- backgroundColor={over ? colors.r10 : colors.n10}
+ color={over ? theme.errorText : theme.noticeText}
+ backgroundColor={over ? theme.errorBackground : theme.pageBackground}
style={{ width: 20, height: 20 }}
/>
);
@@ -133,8 +132,8 @@ function ExpenseProgress({ current, target }: ExpenseProgressProps) {
return (
<PieProgress
progress={frac}
- color={over ? colors.r7 : colors.g5}
- backgroundColor={over ? colors.r10 : colors.n10}
+ color={over ? theme.errorText : theme.noticeText}
+ backgroundColor={over ? theme.errorBackground : theme.pageBackground}
style={{ width: 20, height: 20 }}
/>
);
@@ -168,12 +167,12 @@ function BudgetTotal({
<View style={{ marginLeft: 10 }}>
<View>
- <Text style={{ color: colors.n4 }}>{title}</Text>
+ <Text style={{ color: theme.pageTextLight }}>{title}</Text>
</View>
<Text>
<CellValue binding={current} type="financial" />
- <Text style={{ color: colors.n6, fontStyle: 'italic' }}>
+ <Text style={{ color: theme.pageTextSubdued, fontStyle: 'italic' }}>
{' of '}
<CellValue
binding={target}
@@ -231,9 +230,9 @@ function Saved({ projected, style }: SavedProps) {
return (
<View style={{ alignItems: 'center', fontSize: 14, ...style }}>
{projected ? (
- <Text style={{ color: colors.n4 }}>Projected Savings:</Text>
+ <Text style={{ color: theme.pageTextLight }}>Projected Savings:</Text>
) : (
- <View style={{ color: colors.n4 }}>
+ <View style={{ color: theme.pageTextLight }}>
{isNegative ? 'Overspent:' : 'Saved:'}
</View>
)}
@@ -280,7 +279,11 @@ function Saved({ projected, style }: SavedProps) {
className={`${css([
{
fontSize: 25,
- color: projected ? colors.y3 : isNegative ? colors.r4 : colors.p5,
+ color: projected
+ ? theme.alt2WarningText
+ : isNegative
+ ? theme.alt2ErrorText
+ : theme.altUpcomingText,
},
])}`}
>
@@ -320,8 +323,8 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
return (
<View
style={{
- backgroundColor: 'white',
- boxShadow: MONTH_BOX_SHADOW,
+ backgroundColor: theme.tableBackground,
+ boxShadow: styles.cardShadow,
borderRadius: 6,
marginLeft: 0,
marginRight: 0,
@@ -362,7 +365,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
width={13}
height={13}
// The margin is to make it the exact same size as the dots button
- style={{ color: colors.n6, margin: 1 }}
+ style={{ color: theme.pageTextSubdued, margin: 1 }}
/>
</Button>
</View>
@@ -397,7 +400,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
width={15}
height={15}
tooltipPosition="bottom-right"
- defaultColor={colors.n6}
+ defaultColor={theme.pageTextSubdued} // notes page color
/>
</View>
<View style={{ userSelect: 'none' }}>
@@ -405,7 +408,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
<DotsHorizontalTriple
width={15}
height={15}
- style={{ color: colors.n5 }}
+ style={{ color: theme.altpageTextSubdued }}
/>
</Button>
{menuOpen && (
@@ -452,7 +455,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
spacing={2}
style={{
alignSelf: 'center',
- backgroundColor: colors.n11,
+ backgroundColor: theme.tableRowHeaderBackground,
borderRadius: 4,
padding: '10px 15px',
marginTop: 13,
@@ -469,8 +472,8 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
alignItems: 'center',
padding: '10px 20px',
justifyContent: 'space-between',
- backgroundColor: colors.n11,
- borderTop: '1px solid ' + colors.n10,
+ backgroundColor: theme.tableRowHeaderBackground,
+ borderTop: '1px solid ' + theme.tableRowHeaderText,
}}
>
<Saved projected={month >= currentMonth} />
diff --git a/packages/desktop-client/src/components/budget/report/components.tsx b/packages/desktop-client/src/components/budget/report/components.tsx
index a4b1de57d66874fd47867a1e0eb40c615c66df66..8255a06d43e8807154ac906c02bad94dacb88706 100644
--- a/packages/desktop-client/src/components/budget/report/components.tsx
+++ b/packages/desktop-client/src/components/budget/report/components.tsx
@@ -6,7 +6,7 @@ import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';
import useFeatureFlag from '../../../hooks/useFeatureFlag';
import CheveronDown from '../../../icons/v1/CheveronDown';
-import { styles, colors, type CSSProperties } from '../../../style';
+import { styles, theme, type CSSProperties } from '../../../style';
import Button from '../../common/Button';
import Menu from '../../common/Menu';
import Text from '../../common/Text';
@@ -17,7 +17,6 @@ import useSheetValue from '../../spreadsheet/useSheetValue';
import { Field, SheetCell } from '../../table';
import { Tooltip, useTooltip } from '../../tooltips';
import BalanceWithCarryover from '../BalanceWithCarryover';
-import { MONTH_RIGHT_PADDING } from '../constants';
import { makeAmountGrey } from '../util';
export { BudgetSummary } from './BudgetSummary';
@@ -27,7 +26,6 @@ let headerLabelStyle: CSSProperties = {
padding: '0 5px',
textAlign: 'right',
};
-
export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() {
const format = useFormat();
return (
@@ -35,36 +33,36 @@ export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() {
style={{
flex: 1,
flexDirection: 'row',
- marginRight: MONTH_RIGHT_PADDING,
+ marginRight: styles.monthRightPadding,
paddingTop: 10,
paddingBottom: 10,
}}
>
<View style={headerLabelStyle}>
- <Text style={{ color: colors.n4 }}>Budgeted</Text>
+ <Text style={{ color: theme.pageTextLight }}>Budgeted</Text>
<CellValue
binding={reportBudget.totalBudgetedExpense}
type="financial"
- style={{ color: colors.n4, fontWeight: 600 }}
+ style={{ color: theme.pageTextLight, fontWeight: 600 }}
formatter={value => {
return format(parseFloat(value || '0'), 'financial');
}}
/>
</View>
<View style={headerLabelStyle}>
- <Text style={{ color: colors.n4 }}>Spent</Text>
+ <Text style={{ color: theme.pageTextLight }}>Spent</Text>
<CellValue
binding={reportBudget.totalSpent}
type="financial"
- style={{ color: colors.n4, fontWeight: 600 }}
+ style={{ color: theme.pageTextLight, fontWeight: 600 }}
/>
</View>
<View style={headerLabelStyle}>
- <Text style={{ color: colors.n4 }}>Balance</Text>
+ <Text style={{ color: theme.pageTextLight }}>Balance</Text>
<CellValue
binding={reportBudget.totalLeftover}
type="financial"
- style={{ color: colors.n4, fontWeight: 600 }}
+ style={{ color: theme.pageTextLight, fontWeight: 600 }}
/>
</View>
</View>
@@ -76,15 +74,15 @@ export function IncomeHeaderMonth() {
<View
style={{
flexDirection: 'row',
- marginRight: MONTH_RIGHT_PADDING,
+ marginRight: styles.monthRightPadding,
paddingBottom: 5,
}}
>
<View style={headerLabelStyle}>
- <Text style={{ color: colors.n4 }}>Budgeted</Text>
+ <Text style={{ color: theme.pageTextLight }}>Budgeted</Text>
</View>
<View style={headerLabelStyle}>
- <Text style={{ color: colors.n4 }}>Received</Text>
+ <Text style={{ color: theme.pageTextLight }}>Received</Text>
</View>
</View>
);
@@ -125,7 +123,7 @@ export const GroupMonth = memo(function GroupMonth({ group }: GroupMonthProps) {
textAlign="right"
style={{
fontWeight: 600,
- paddingRight: MONTH_RIGHT_PADDING,
+ paddingRight: styles.monthRightPadding,
...styles.tnum,
}}
valueProps={{
@@ -133,7 +131,7 @@ export const GroupMonth = memo(function GroupMonth({ group }: GroupMonthProps) {
type: 'financial',
privacyFilter: {
style: {
- paddingRight: MONTH_RIGHT_PADDING,
+ paddingRight: styles.monthRightPadding,
},
},
}}
@@ -309,8 +307,8 @@ export const CategoryMonth = memo(function CategoryMonth({
padding: '0 4px',
borderRadius: 4,
':hover': {
- boxShadow: 'inset 0 0 0 1px ' + colors.n7,
- backgroundColor: 'white',
+ boxShadow: 'inset 0 0 0 1px ' + theme.mobileAccountShadow,
+ backgroundColor: theme.tableBackground,
},
}}
valueProps={{
@@ -363,7 +361,7 @@ export const CategoryMonth = memo(function CategoryMonth({
<Field
name="balance"
width="flex"
- style={{ paddingRight: MONTH_RIGHT_PADDING, textAlign: 'right' }}
+ style={{ paddingRight: styles.monthRightPadding, textAlign: 'right' }}
>
<span {...(category.is_income ? {} : balanceTooltip.getOpenEvents())}>
<BalanceWithCarryover
diff --git a/packages/desktop-client/src/components/common/Card.tsx b/packages/desktop-client/src/components/common/Card.tsx
index 4a6bcf8fb20d60c11f884e2128b2fe4d0fb34be8..5f143cd35536ca53db3bad1efe557c61b4d33ee4 100644
--- a/packages/desktop-client/src/components/common/Card.tsx
+++ b/packages/desktop-client/src/components/common/Card.tsx
@@ -1,6 +1,6 @@
import { type ComponentProps, forwardRef } from 'react';
-import { colors } from '../../style';
+import { theme } from '../../style';
import View from './View';
@@ -17,8 +17,8 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
marginLeft: 5,
marginRight: 5,
borderRadius: 6,
- backgroundColor: 'white',
- borderColor: colors.p3,
+ backgroundColor: theme.cardBackground,
+ borderColor: theme.cardBorder,
boxShadow: '0 1px 2px #9594A8',
...props.style,
}}
diff --git a/packages/desktop-client/src/components/common/Label.tsx b/packages/desktop-client/src/components/common/Label.tsx
index 85ef99ce403e69f0dca4eb09d381290a928e241f..a540214a53ecdc6a622a758a0d923cef014c572a 100644
--- a/packages/desktop-client/src/components/common/Label.tsx
+++ b/packages/desktop-client/src/components/common/Label.tsx
@@ -1,6 +1,6 @@
import { type ReactNode } from 'react';
-import { type CSSProperties, colors, styles } from '../../style';
+import { type CSSProperties, theme, styles } from '../../style';
import Text from './Text';
@@ -14,7 +14,7 @@ export default function Label({ title, style }: LabelProps) {
<Text
style={{
...styles.text,
- color: colors.n2,
+ color: theme.tableRowHeaderText,
textAlign: 'right',
fontSize: 12,
marginBottom: 2,
diff --git a/packages/desktop-client/src/components/reports/CashFlow.js b/packages/desktop-client/src/components/reports/CashFlow.js
index a7f2785e03f20653fe6166c0267d9b356686faef..704d6e99524d11f20041991f1301b6be11d47e44 100644
--- a/packages/desktop-client/src/components/reports/CashFlow.js
+++ b/packages/desktop-client/src/components/reports/CashFlow.js
@@ -7,7 +7,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
import { integerToCurrency } from 'loot-core/src/shared/util';
import useFilters from '../../hooks/useFilters';
-import { colors, styles } from '../../style';
+import { theme, styles } from '../../style';
import AlignedText from '../common/AlignedText';
import Block from '../common/Block';
import Paragraph from '../common/Paragraph';
@@ -113,7 +113,7 @@ function CashFlow() {
<View
style={{
- backgroundColor: 'white',
+ backgroundColor: theme.tableBackground,
padding: 30,
paddingTop: 0,
overflow: 'auto',
@@ -125,7 +125,7 @@ function CashFlow() {
paddingRight: 20,
flexShrink: 0,
alignItems: 'flex-end',
- color: colors.n3,
+ color: theme.pageText,
}}
>
<AlignedText
diff --git a/packages/desktop-client/src/components/reports/Change.js b/packages/desktop-client/src/components/reports/Change.js
index e64064f4d3bfcb3f33fb514ff1e7fc05a39a835f..e4067cbf3ea348d1f1392db7ba5bcf659ebff79d 100644
--- a/packages/desktop-client/src/components/reports/Change.js
+++ b/packages/desktop-client/src/components/reports/Change.js
@@ -2,13 +2,16 @@ import React from 'react';
import { integerToCurrency } from 'loot-core/src/shared/util';
-import { colors, styles } from '../../style';
+import { theme, styles } from '../../style';
import Block from '../common/Block';
function Change({ amount }) {
return (
<Block
- style={{ ...styles.smallText, color: amount < 0 ? colors.r5 : colors.g5 }}
+ style={{
+ ...styles.smallText,
+ color: amount < 0 ? theme.errorText : theme.noticeText,
+ }}
>
{amount >= 0 ? '+' : ''}
{integerToCurrency(amount)}
diff --git a/packages/desktop-client/src/components/reports/DateRange.js b/packages/desktop-client/src/components/reports/DateRange.js
index 927d5784ee47bb5e7c1e076667469b7f93116e50..2e2ba1234e5d7722c6705666bea1a27fa74fafd7 100644
--- a/packages/desktop-client/src/components/reports/DateRange.js
+++ b/packages/desktop-client/src/components/reports/DateRange.js
@@ -2,7 +2,7 @@ import React from 'react';
import * as d from 'date-fns';
-import { colors } from '../../style';
+import { theme } from '../../style';
import Block from '../common/Block';
function DateRange({ start, end }) {
@@ -26,7 +26,7 @@ function DateRange({ start, end }) {
content = d.format(end, 'MMMM yyyy');
}
- return <Block style={{ color: colors.n6 }}>{content}</Block>;
+ return <Block style={{ color: theme.pageTextSubdued }}>{content}</Block>;
}
export default DateRange;
diff --git a/packages/desktop-client/src/components/reports/Header.js b/packages/desktop-client/src/components/reports/Header.js
index 2973e17d40a3de4a02c6c41a3d7416c68887d2bc..dca96e47e9bada1594fd55f3943c133c6a80ac4d 100644
--- a/packages/desktop-client/src/components/reports/Header.js
+++ b/packages/desktop-client/src/components/reports/Header.js
@@ -97,7 +97,6 @@ function Header({
}}
>
<Select
- style={{ backgroundColor: 'white' }}
onChange={newValue =>
onChangeDates(...validateStart(allMonths, newValue, end))
}
@@ -107,7 +106,6 @@ function Header({
/>
<View>to</View>
<Select
- style={{ backgroundColor: 'white' }}
onChange={newValue =>
onChangeDates(...validateEnd(allMonths, start, newValue))
}
diff --git a/packages/desktop-client/src/components/reports/NetWorth.js b/packages/desktop-client/src/components/reports/NetWorth.js
index 294e3b8c08393c126899b4f52f6bc97bf6fee61a..5c9a8acbe6cdcb7c1f99a39585f1c534537a81f9 100644
--- a/packages/desktop-client/src/components/reports/NetWorth.js
+++ b/packages/desktop-client/src/components/reports/NetWorth.js
@@ -8,7 +8,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
import { integerToCurrency } from 'loot-core/src/shared/util';
import useFilters from '../../hooks/useFilters';
-import { styles } from '../../style';
+import { theme, styles } from '../../style';
import Paragraph from '../common/Paragraph';
import View from '../common/View';
import PrivacyFilter from '../PrivacyFilter';
@@ -101,7 +101,7 @@ export default function NetWorth() {
<View
style={{
- backgroundColor: 'white',
+ backgroundColor: theme.tableBackground,
padding: 30,
paddingTop: 0,
overflow: 'auto',
diff --git a/packages/desktop-client/src/components/reports/Overview.js b/packages/desktop-client/src/components/reports/Overview.js
index cc2fceb255c7d5458baed82f34a97279630d2431..d2237ac47047caa247e12e8df3df453188cb4527 100644
--- a/packages/desktop-client/src/components/reports/Overview.js
+++ b/packages/desktop-client/src/components/reports/Overview.js
@@ -9,14 +9,14 @@ import { integerToCurrency } from 'loot-core/src/shared/util';
import useCategories from '../../hooks/useCategories';
import useFeatureFlag from '../../hooks/useFeatureFlag';
import AnimatedLoading from '../../icons/AnimatedLoading';
-import { colors, styles } from '../../style';
+import { theme, styles } from '../../style';
import AnchorLink from '../common/AnchorLink';
import Block from '../common/Block';
import View from '../common/View';
import PrivacyFilter from '../PrivacyFilter';
import Change from './Change';
-import theme from './chart-theme';
+import { chartTheme } from './chart-theme';
import Container from './Container';
import DateRange from './DateRange';
import { simpleCashFlow } from './graphs/cash-flow-spreadsheet';
@@ -33,7 +33,7 @@ function Card({ flex, to, style, children }) {
const content = (
<View
style={{
- backgroundColor: 'white',
+ backgroundColor: theme.tableBackground,
borderRadius: 2,
height: 200,
boxShadow: '0 2px 6px rgba(0, 0, 0, .15)',
@@ -122,7 +122,7 @@ function NetWorthCard({ accounts }) {
<PrivacyFilter activationFilters={[!isCardHovered]}>
<Change
amount={data.totalChange}
- style={{ color: colors.n6, fontWeight: 300 }}
+ style={{ color: theme.altTableText, fontWeight: 300 }}
/>
</PrivacyFilter>
</View>
@@ -181,7 +181,7 @@ function CashFlowCard() {
<PrivacyFilter activationFilters={[!isCardHovered]}>
<Change
amount={income - expense}
- style={{ color: colors.n6, fontWeight: 300 }}
+ style={{ color: theme.altTableText, fontWeight: 300 }}
/>
</PrivacyFilter>
</View>
@@ -192,10 +192,10 @@ function CashFlowCard() {
<Container style={{ height: 'auto', flex: 1 }}>
{(width, height, portalHost) => (
<VictoryGroup
- colorScale={[theme.colors.blue, theme.colors.red]}
+ colorScale={[chartTheme.colors.blue, chartTheme.colors.red]}
width={100}
height={height}
- theme={theme}
+ theme={chartTheme}
domain={{
x: [0, 100],
y: [0, Math.max(income, expense, 100)],
@@ -260,7 +260,6 @@ function CashFlowCard() {
</View>
),
labelPosition: 'right',
- fill: theme.colors.red,
},
]}
labels={d => d.premadeLabel}
diff --git a/packages/desktop-client/src/components/reports/Tooltip.js b/packages/desktop-client/src/components/reports/Tooltip.js
index 966e2233a5115b78be944618d0588b011a4cfac6..4ee6b07e74422580fac5a2dd36b00559ab78ff81 100644
--- a/packages/desktop-client/src/components/reports/Tooltip.js
+++ b/packages/desktop-client/src/components/reports/Tooltip.js
@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
import { css, before } from 'glamor';
import { VictoryTooltip } from 'victory';
-import { colors } from '../../style';
+import { theme } from '../../style';
class Tooltip extends Component {
static defaultEvents = VictoryTooltip.defaultEvents;
@@ -57,8 +57,8 @@ class Tooltip extends Component {
borderRadius: 2,
boxShadow: light ? 'none' : '0 1px 6px rgba(0, 0, 0, .20)',
// TODO: Transparent background
- backgroundColor: light ? 'transparent' : colors.n1,
- color: light ? 'inherit' : 'white',
+ backgroundColor: light ? 'transparent' : theme.alt2MenuBackground,
+ color: light ? 'inherit' : theme.alt2MenuItemText,
padding: 10,
},
!light &&
@@ -68,7 +68,7 @@ class Tooltip extends Component {
borderTop: '7px solid transparent',
borderBottom: '7px solid transparent',
[position === 'right' ? 'borderRight' : 'borderLeft']:
- '7px solid ' + colors.n1,
+ '7px solid ' + theme.alt2MenuBackground,
[position === 'right' ? 'left' : 'right']: -6,
top: 'calc(50% - 7px)',
// eslint-disable-next-line rulesdir/typography
diff --git a/packages/desktop-client/src/components/reports/chart-theme.js b/packages/desktop-client/src/components/reports/chart-theme.js
index fb30df44a4a68d2b75e2171b0eb12ecab7e81db3..b8e1c2bd9ef13d39a5210dfd557f131585c30a17 100644
--- a/packages/desktop-client/src/components/reports/chart-theme.js
+++ b/packages/desktop-client/src/components/reports/chart-theme.js
@@ -1,4 +1,4 @@
-import { colors } from '../../style';
+import { theme } from '../../style';
let colorFades = {
blueFadeStart: 'rgba(229, 245, 255, 1)',
@@ -18,7 +18,7 @@ const baseLabelStyles = {
fontFamily: sansSerif,
fontSize,
letterSpacing,
- fill: colors.n1,
+ fill: theme.reportsLabel,
stroke: 'transparent',
};
@@ -41,17 +41,17 @@ const axisBaseStyles = {
tickLabels: baseLabelStyles,
};
-const theme = {
+export const chartTheme = {
colors: {
...colorFades,
- red: colors.r7,
- blue: colors.b6,
+ red: theme.reportsRed,
+ blue: theme.reportsBlue,
},
area: {
style: {
labels: baseLabelStyles,
data: {
- stroke: colors.b6,
+ stroke: theme.reportsBlue,
strokeWidth: 2,
strokeLinejoin: 'round',
strokeLinecap: 'round',
@@ -82,7 +82,7 @@ const theme = {
bar: {
style: {
labels: baseLabelStyles,
- data: { fill: colors.b6, stroke: 'none' },
+ data: { fill: theme.reportsBlue, stroke: 'none' },
},
},
line: {
@@ -90,7 +90,7 @@ const theme = {
labels: baseLabelStyles,
data: {
fill: 'none',
- stroke: colors.b6,
+ stroke: theme.reportsBlue,
strokeWidth: 2,
strokeLinejoin: 'round',
strokeLinecap: 'round',
@@ -111,4 +111,3 @@ const theme = {
},
},
};
-export default theme;
diff --git a/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx b/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx
index a83abe5252f916b872f6d2aa8eefee8c232f4ac5..51263a18a8ed2cbd033816971640ac79994b2e27 100644
--- a/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx
@@ -10,8 +10,8 @@ import {
VictoryGroup,
} from 'victory';
-import { colors } from '../../../style';
-import theme from '../chart-theme';
+import { theme } from '../../../style';
+import { chartTheme } from '../chart-theme';
import Container from '../Container';
import Tooltip from '../Tooltip';
@@ -26,7 +26,7 @@ function CashFlowGraph({ graphData, isConcise }: CashFlowGraphProps) {
graphData && (
<VictoryChart
scale={{ x: 'time', y: 'linear' }}
- theme={theme}
+ theme={chartTheme}
domainPadding={10}
width={width}
height={height}
@@ -35,10 +35,7 @@ function CashFlowGraph({ graphData, isConcise }: CashFlowGraphProps) {
}
>
<VictoryGroup>
- <VictoryBar
- data={graphData.expenses}
- style={{ data: { fill: theme.colors.red } }}
- />
+ <VictoryBar data={graphData.expenses} />
<VictoryBar data={graphData.income} />
</VictoryGroup>
<VictoryLine
@@ -46,7 +43,7 @@ function CashFlowGraph({ graphData, isConcise }: CashFlowGraphProps) {
labelComponent={<Tooltip portalHost={portalHost} />}
labels={x => x.premadeLabel}
style={{
- data: { stroke: colors.n5 },
+ data: { stroke: theme.altpageTextSubdued },
}}
/>
<VictoryAxis
diff --git a/packages/desktop-client/src/components/reports/graphs/CategorySpendingGraph.tsx b/packages/desktop-client/src/components/reports/graphs/CategorySpendingGraph.tsx
index 675cbde2f8566c51516c08098fb5a28810bc2e78..a74c5ebf7b5be5de0611f5c6774f0dbea2d26f1d 100644
--- a/packages/desktop-client/src/components/reports/graphs/CategorySpendingGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/CategorySpendingGraph.tsx
@@ -3,7 +3,7 @@ import type { CSSProperties } from 'react';
import * as d from 'date-fns';
import { VictoryAxis, VictoryBar, VictoryChart, VictoryStack } from 'victory';
-import theme from '../chart-theme';
+import { chartTheme } from '../chart-theme';
import Container from '../Container';
import Tooltip from '../Tooltip';
@@ -38,7 +38,7 @@ function CategorySpendingGraph({
{(width, height, portalHost) => (
<VictoryChart
scale={{ x: 'time', y: 'linear' }}
- theme={theme}
+ theme={chartTheme}
width={width}
height={height}
>
diff --git a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
index ff8b4687def45f596906249f7262411d62e59ff4..5c58527bd1a93eb3eda7efc26d7687b2f2142fd6 100644
--- a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
@@ -11,7 +11,7 @@ import {
} from 'victory';
import { type CSSProperties } from '../../../style';
-import theme from '../chart-theme';
+import { chartTheme } from '../chart-theme';
import Container from '../Container';
import Tooltip from '../Tooltip';
@@ -36,7 +36,7 @@ function NetWorthGraph({ style, graphData, compact }: NetWorthGraphProps) {
graphData && (
<Chart
scale={{ x: 'time', y: 'linear' }}
- theme={theme}
+ theme={chartTheme}
domainPadding={{ x: 0, y: 10 }}
width={width}
height={height}
@@ -78,7 +78,7 @@ function NetWorthGraph({ style, graphData, compact }: NetWorthGraphProps) {
data: {
clipPath: 'url(#negative)',
fill: 'url(#negative-gradient)',
- stroke: theme.colors.red,
+ stroke: chartTheme.colors.red,
strokeLinejoin: 'round',
},
}}
@@ -93,7 +93,7 @@ function NetWorthGraph({ style, graphData, compact }: NetWorthGraphProps) {
/>
{!compact && (
<VictoryAxis
- style={{ ticks: { stroke: 'red' } }}
+ style={{ ticks: { stroke: chartTheme.colors.red } }}
// eslint-disable-next-line rulesdir/typography
tickFormat={x => d.format(x, "MMM ''yy")}
tickValues={graphData.data.map(item => item.x)}
diff --git a/packages/desktop-client/src/components/reports/graphs/common.tsx b/packages/desktop-client/src/components/reports/graphs/common.tsx
index c88ccd2327b976696a1e00f7d026e1347b3980e7..1c983ebdc5aabbe81603e769ef69f02c4cbce056 100644
--- a/packages/desktop-client/src/components/reports/graphs/common.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/common.tsx
@@ -1,6 +1,6 @@
import * as d from 'date-fns';
-import theme from '../chart-theme';
+import { chartTheme } from '../chart-theme';
type AreaProps = {
start: string;
@@ -47,8 +47,8 @@ export function Area({ start, end, scale, range }: AreaProps) {
x2={0}
y2={zero}
>
- <stop offset="0%" stopColor={theme.colors.blueFadeStart} />
- <stop offset="100%" stopColor={theme.colors.blueFadeEnd} />
+ <stop offset="0%" stopColor={chartTheme.colors.blueFadeStart} />
+ <stop offset="100%" stopColor={chartTheme.colors.blueFadeEnd} />
</linearGradient>
<linearGradient
id="negative-gradient"
@@ -58,8 +58,8 @@ export function Area({ start, end, scale, range }: AreaProps) {
x2={0}
y2={range.y[0]}
>
- <stop offset="0%" stopColor={theme.colors.redFadeEnd} />
- <stop offset="100%" stopColor={theme.colors.redFadeStart} />
+ <stop offset="0%" stopColor={chartTheme.colors.redFadeEnd} />
+ <stop offset="100%" stopColor={chartTheme.colors.redFadeStart} />
</linearGradient>
</defs>
</svg>
diff --git a/packages/desktop-client/src/components/settings/Encryption.tsx b/packages/desktop-client/src/components/settings/Encryption.tsx
index 3eed3bc95481ac37f1cde0d2b21c687cbe0403e3..f67beb4703239caf33df54e5a786b8ac353baed8 100644
--- a/packages/desktop-client/src/components/settings/Encryption.tsx
+++ b/packages/desktop-client/src/components/settings/Encryption.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import { useSelector } from 'react-redux';
import { useActions } from '../../hooks/useActions';
-import { colors } from '../../style';
+import { theme } from '../../style';
import Button from '../common/Button';
import ExternalLink from '../common/ExternalLink';
import Text from '../common/Text';
@@ -26,7 +26,7 @@ export default function EncryptionSettings() {
primaryAction={<Button onClick={onChangeKey}>Generate new key</Button>}
>
<Text>
- <Text style={{ color: colors.g4, fontWeight: 600 }}>
+ <Text style={{ color: theme.noticeText, fontWeight: 600 }}>
End-to-end Encryption is turned on.
</Text>{' '}
Your data is encrypted with a key that only you have before sending it
diff --git a/packages/desktop-client/src/components/settings/Experimental.tsx b/packages/desktop-client/src/components/settings/Experimental.tsx
index a2237ff8fcdc674e72db4e1bd7ef4a5ad6947111..2a4a5646ee303b2c4b6bfe3dbe38922207bebafd 100644
--- a/packages/desktop-client/src/components/settings/Experimental.tsx
+++ b/packages/desktop-client/src/components/settings/Experimental.tsx
@@ -5,7 +5,7 @@ import type { FeatureFlag } from 'loot-core/src/types/prefs';
import { useActions } from '../../hooks/useActions';
import useFeatureFlag from '../../hooks/useFeatureFlag';
-import { colors, useTheme } from '../../style';
+import { theme, useTheme } from '../../style';
import LinkButton from '../common/LinkButton';
import Text from '../common/Text';
import View from '../common/View';
@@ -41,10 +41,19 @@ function FeatureToggle({
}}
disabled={disableToggle}
/>
- <View style={{ color: disableToggle ? colors.n5 : 'inherit' }}>
+ <View
+ style={{ color: disableToggle ? theme.pageTextSubdued : 'inherit' }}
+ >
{children}
{disableToggle && (
- <Text style={{ color: colors.r3, fontWeight: 500 }}>{error}</Text>
+ <Text
+ style={{
+ color: theme.errorText,
+ fontWeight: 500,
+ }}
+ >
+ {error}
+ </Text>
)}
</View>
</label>
@@ -111,7 +120,7 @@ export default function ExperimentalFeatures() {
style={{
flexShrink: 0,
alignSelf: 'flex-start',
- color: colors.p4,
+ color: theme.pageTextPositive,
}}
>
I understand the risks, show experimental features
diff --git a/packages/desktop-client/src/components/settings/FixSplits.tsx b/packages/desktop-client/src/components/settings/FixSplits.tsx
index 936ded3f718792dff2cc2eb9ae36467007cd2121..7b3ca97e2800454e63051c1c39082514b6d27923 100644
--- a/packages/desktop-client/src/components/settings/FixSplits.tsx
+++ b/packages/desktop-client/src/components/settings/FixSplits.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
import { send } from 'loot-core/src/platform/client/fetch';
import { type Handlers } from 'loot-core/src/types/handlers';
-import { colors } from '../../style';
+import { theme } from '../../style';
import { ButtonWithLoading } from '../common/Button';
import Paragraph from '../common/Paragraph';
import Text from '../common/Text';
@@ -39,7 +39,7 @@ function renderResults(results: Results) {
return (
<Paragraph
style={{
- color: colors.g3,
+ color: theme.alt3NoticeText,
marginBottom: 0,
marginLeft: '1em',
textAlign: 'right',
diff --git a/packages/desktop-client/src/components/settings/Global.tsx b/packages/desktop-client/src/components/settings/Global.tsx
index 189ecf24154e992535dad1994bd0dd6c9614d0e6..955a0580bae44c571c01d447a3a718f7b1e376c5 100644
--- a/packages/desktop-client/src/components/settings/Global.tsx
+++ b/packages/desktop-client/src/components/settings/Global.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
import { useSelector } from 'react-redux';
import { useActions } from '../../hooks/useActions';
-import { colors } from '../../style';
+import { theme } from '../../style';
import { Information } from '../alerts';
import Button from '../common/Button';
import Text from '../common/Text';
@@ -53,7 +53,7 @@ export default function GlobalSettings() {
<Text
innerRef={dirScrolled}
style={{
- backgroundColor: colors.n10,
+ backgroundColor: theme.pageBackground,
padding: '7px 10px',
borderRadius: 4,
overflow: 'auto',
diff --git a/packages/desktop-client/src/components/settings/UI.tsx b/packages/desktop-client/src/components/settings/UI.tsx
index aaa205206db06206ba12aa41bbd21a3712f19eff..1a402de8f82be034db782e30c820f9f944bee6c3 100644
--- a/packages/desktop-client/src/components/settings/UI.tsx
+++ b/packages/desktop-client/src/components/settings/UI.tsx
@@ -3,7 +3,7 @@ import { useLocation } from 'react-router';
import { css, media } from 'glamor';
-import { type CSSProperties, colors } from '../../style';
+import { type CSSProperties, theme } from '../../style';
import tokens from '../../tokens';
import LinkButton from '../common/LinkButton';
import View from '../common/View';
@@ -19,12 +19,12 @@ export const Setting = ({ primaryAction, style, children }: SettingProps) => {
<View
className={`${css([
{
- backgroundColor: colors.n9,
+ backgroundColor: theme.pillBackground,
alignSelf: 'flex-start',
alignItems: 'flex-start',
padding: 15,
borderRadius: 4,
- border: '1px solid ' + colors.n8,
+ border: '1px solid ' + theme.altPillBorder,
width: '100%',
},
style,
@@ -83,7 +83,7 @@ export const AdvancedToggle = ({ children }: AdvancedToggleProps) => {
style={{
flexShrink: 0,
alignSelf: 'flex-start',
- color: colors.p4,
+ color: theme.pageTextPositive,
marginBottom: 25,
}}
>
diff --git a/packages/desktop-client/src/components/settings/index.tsx b/packages/desktop-client/src/components/settings/index.tsx
index ab6e8884a53ce9cdc8db9d4ba4aeda24f48362e9..2ac16726a9b80b78f49fc2776b390983136309c5 100644
--- a/packages/desktop-client/src/components/settings/index.tsx
+++ b/packages/desktop-client/src/components/settings/index.tsx
@@ -11,7 +11,7 @@ import useFeatureFlag from '../../hooks/useFeatureFlag';
import useLatestVersion, { useIsOutdated } from '../../hooks/useLatestVersion';
import { useSetThemeColor } from '../../hooks/useSetThemeColor';
import { useResponsive } from '../../ResponsiveProvider';
-import { colors, theme } from '../../style';
+import { theme } from '../../style';
import tokens from '../../tokens';
import Button from '../common/Button';
import ExternalLink from '../common/ExternalLink';
@@ -67,7 +67,7 @@ function About() {
New version available: {latestVersion}
</ExternalLink>
) : (
- <Text style={{ color: colors.g2, fontWeight: 600 }}>
+ <Text style={{ color: theme.alt2NoticeText, fontWeight: 600 }}>
You’re up to date!
</Text>
)}
@@ -100,7 +100,7 @@ function AdvancedAbout() {
<Text>
<IDName>Budget ID:</IDName> {budgetId}
</Text>
- <Text style={{ color: colors.n5 }}>
+ <Text style={{ color: theme.pageText }}>
<IDName>Sync ID:</IDName> {groupId || '(none)'}
</Text>
{/* low priority todo: eliminate some or all of these, or decide when/if to show them */}
@@ -146,8 +146,8 @@ export default function Settings() {
titleStyle={
isNarrowWidth
? {
- backgroundColor: colors.n11,
- color: colors.n1,
+ backgroundColor: theme.menuItemBackground,
+ color: theme.menuItemText,
}
: undefined
}
@@ -160,7 +160,11 @@ export default function Settings() {
{/* The only spot to close a budget on mobile */}
<FormField>
<FormLabel title="Budget Name" />
- <Input value={budgetName} disabled style={{ color: '#999' }} />
+ <Input
+ value={budgetName}
+ disabled
+ style={{ color: theme.buttonNormalDisabledText }}
+ />
</FormField>
<Button onClick={closeBudget}>Close Budget</Button>
</View>
diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts
index 6bb32f067e5ca86a64b37b3cc6198eaa5b3132f7..9da893a4f10fbca445f4127cc0407f4bfcb24937 100644
--- a/packages/desktop-client/src/style/themes/dark.ts
+++ b/packages/desktop-client/src/style/themes/dark.ts
@@ -70,10 +70,12 @@ export const menuBorder = colorPalette.navy800;
export const menuBorderHover = colorPalette.purple400;
export const menuKeybindingText = colorPalette.navy500;
export const altMenuBackground = colorPalette.navy700;
+export const alt2MenuBackground = altMenuBackground;
export const altMenuItemBackground = colorPalette.navy700;
export const altMenuItemBackgroundHover = colorPalette.navy600;
export const alt2MenuItemBackgroundHover = altMenuItemBackgroundHover;
export const altMenuItemText = colorPalette.navy150;
+export const alt2MenuItemText = altMenuItemText;
export const altMenuItemTextHover = colorPalette.navy150;
export const altMenuItemTextSelected = colorPalette.purple400;
export const altMenuItemTextHeader = colorPalette.purple500;
@@ -156,15 +158,19 @@ export const warningBackground = colorPalette.orange800;
export const altWarningBackground = warningBackground;
export const warningText = colorPalette.orange200;
export const altWarningText = warningText;
+export const alt2WarningText = 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 alt2ErrorText = errorText;
export const errorAccent = colorPalette.red500;
export const upcomingBackground = tableBackground;
export const upcomingText = tableTextInactive;
+export const altUpcomingText = upcomingText;
export const upcomingAccent = tableBorder;
+
export const formLabelText = colorPalette.purple150;
export const altFormLabelText = formLabelText;
export const formInputBackground = colorPalette.navy800;
@@ -187,9 +193,14 @@ export const pillBackground = colorPalette.navy600;
export const pillText = colorPalette.navy200;
export const pillTextHighlighted = colorPalette.purple500;
export const pillBorder = colorPalette.navy700;
+export const altPillBorder = pillBorder;
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;
+
+export const reportsRed = colorPalette.red300;
+export const reportsBlue = colorPalette.blue400;
+export const reportsLabel = colorPalette.navy900;
diff --git a/packages/desktop-client/src/style/themes/development.ts b/packages/desktop-client/src/style/themes/development.ts
index e6a3f2aa2cc8305ffc716877246caa78cafa606d..9db0ea23902198be55f158c5c950541c5c02557c 100644
--- a/packages/desktop-client/src/style/themes/development.ts
+++ b/packages/desktop-client/src/style/themes/development.ts
@@ -68,10 +68,12 @@ export const menuBorder = colorPalette.green500;
export const menuBorderHover = colorPalette.green900;
export const menuKeybindingText = colorPalette.navy400;
export const altMenuBackground = colorPalette.navy700;
+export const alt2MenuBackground = altMenuBackground;
export const altMenuItemBackground = colorPalette.navy700;
export const altMenuItemBackgroundHover = colorPalette.navy600;
export const alt2MenuItemBackgroundHover = colorPalette.navy600;
export const altMenuItemText = colorPalette.navy150;
+export const alt2MenuItemText = altMenuItemText;
export const altMenuItemTextHover = colorPalette.navy150;
export const altMenuItemTextSelected = colorPalette.navy150;
export const altMenuItemTextHeader = colorPalette.purple500;
@@ -146,12 +148,18 @@ export const warningBackground = colorPalette.orange800;
export const altWarningBackground = warningBackground;
export const warningText = colorPalette.orange200;
export const altWarningText = warningText;
+export const alt2WarningText = 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 alt2ErrorText = errorText;
export const errorAccent = colorPalette.red500;
+export const upcomingBackground = colorPalette.purple100;
+export const upcomingText = colorPalette.purple900;
+export const altUpcomingText = colorPalette.purple500;
+export const upcomingAccent = colorPalette.purple100;
export const formLabelText = colorPalette.purple200;
export const altFormLabelText = formLabelText;
@@ -175,9 +183,14 @@ export const pillBackground = colorPalette.green800;
export const pillText = colorPalette.green600;
export const pillTextHighlighted = colorPalette.purple600;
export const pillBorder = colorPalette.green200;
+export const altPillBorder = pillBorder;
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;
+
+export const reportsRed = colorPalette.red300;
+export const reportsBlue = colorPalette.blue400;
+export const reportsLabel = colorPalette.navy900;
diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts
index 292d61143e72c00806a78790b99a88f6d129c66e..56f73743b40656181c587780de8f11cb87fb9653 100644
--- a/packages/desktop-client/src/style/themes/light.ts
+++ b/packages/desktop-client/src/style/themes/light.ts
@@ -19,7 +19,7 @@ export const modalBackground = colorPalette.white;
export const modalBorder = colorPalette.white;
export const cardBackground = colorPalette.white;
-export const cardBorder = colorPalette.purple500;
+export const cardBorder = colorPalette.purple700;
export const cardShadow = colorPalette.navy700;
export const tableBackground = colorPalette.white;
@@ -70,10 +70,12 @@ export const menuBorder = colorPalette.navy100;
export const menuBorderHover = colorPalette.purple100;
export const menuKeybindingText = colorPalette.navy400;
export const altMenuBackground = colorPalette.blue800;
+export const alt2MenuBackground = colorPalette.navy900;
export const altMenuItemBackground = colorPalette.blue800;
export const altMenuItemBackgroundHover = colorPalette.blue700;
export const alt2MenuItemBackgroundHover = colorPalette.navy600;
export const altMenuItemText = colorPalette.navy100;
+export const alt2MenuItemText = colorPalette.white;
export const altMenuItemTextHover = colorPalette.navy50;
export const altMenuItemTextSelected = colorPalette.purple300;
export const altMenuItemTextHeader = colorPalette.navy400;
@@ -156,15 +158,19 @@ export const warningBackground = colorPalette.orange200;
export const altWarningBackground = colorPalette.orange150;
export const warningText = colorPalette.orange800;
export const altWarningText = colorPalette.orange900;
+export const alt2WarningText = colorPalette.orange700;
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 alt2ErrorText = colorPalette.red600;
export const errorAccent = colorPalette.red200;
export const upcomingBackground = colorPalette.purple100;
export const upcomingText = colorPalette.purple900;
+export const altUpcomingText = colorPalette.purple500;
export const upcomingAccent = colorPalette.purple100;
+
export const formLabelText = colorPalette.blue500;
export const altFormLabelText = colorPalette.blue700;
export const formInputBackground = colorPalette.navy50;
@@ -187,9 +193,14 @@ export const pillBackground = colorPalette.navy150;
export const pillText = colorPalette.navy800;
export const pillTextHighlighted = colorPalette.purple600;
export const pillBorder = colorPalette.navy150;
+export const altPillBorder = colorPalette.navy200;
export const pillBackgroundSelected = colorPalette.blue150;
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;
+
+export const reportsRed = colorPalette.red300;
+export const reportsBlue = colorPalette.blue400;
+export const reportsLabel = colorPalette.navy900;
diff --git a/upcoming-release-notes/1512.md b/upcoming-release-notes/1512.md
new file mode 100644
index 0000000000000000000000000000000000000000..cc9cbf212bc4c0749ae5cb048db364c180f1529f
--- /dev/null
+++ b/upcoming-release-notes/1512.md
@@ -0,0 +1,5 @@
+---
+category: Enhancements
+authors: [biohzrddd, carkom]
+---
+Phase five of dark theme, to include Reports/settings
\ No newline at end of file