diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
index 05641edfa81..267b657ca1a 100644
--- a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
+++ b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
@@ -77,7 +77,7 @@ function CategoryList({
style={{
backgroundColor:
highlightedIndex === idx
- ? theme.alt2MenuItemBackgroundHover
+ ? theme.menuAutoCompleteBackgroundHover
: 'transparent',
borderRadius: embedded ? 4 : 0,
flexShrink: 0,
@@ -108,7 +108,7 @@ function CategoryList({
{showGroup && (
+
{dragState && !dragState.preview && dragState.type === 'group' && (
diff --git a/packages/desktop-client/src/components/budget/IncomeGroup.tsx b/packages/desktop-client/src/components/budget/IncomeGroup.tsx
index 8ee4faa73b7..e3bd787f83e 100644
--- a/packages/desktop-client/src/components/budget/IncomeGroup.tsx
+++ b/packages/desktop-client/src/components/budget/IncomeGroup.tsx
@@ -38,7 +38,10 @@ function IncomeGroup({
return (
0 ? 1 : 0,
@@ -1359,7 +1359,7 @@ function IncomeGroup({
: rolloverBudget.groupSumAmount(group.id)
}
style={{
- backgroundColor: theme.altTableBackground,
+ backgroundColor: theme.tableRowHeaderBackground,
}}
onAddCategory={onAddCategory}
onSave={onSave}
diff --git a/packages/desktop-client/src/components/budget/SidebarGroup.tsx b/packages/desktop-client/src/components/budget/SidebarGroup.tsx
index e9586d5ebc4..afb8090def4 100644
--- a/packages/desktop-client/src/components/budget/SidebarGroup.tsx
+++ b/packages/desktop-client/src/components/budget/SidebarGroup.tsx
@@ -148,7 +148,7 @@ function SidebarGroup({
style={{
...style,
width: 200,
- backgroundColor: theme.altTableBackground,
+ backgroundColor: theme.tableRowHeaderBackground,
'& button': { display: 'none' },
'&:hover button': { display: 'flex', color: theme.tableTextHover },
...(dragPreview && {
diff --git a/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
index 9959da029f5..dde6177cc07 100644
--- a/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
@@ -332,7 +332,7 @@ export function BudgetSummary({
width={13}
height={13}
// The margin is to make it the exact same size as the dots button
- style={{ color: theme.altTableText, margin: 1 }}
+ style={{ color: theme.tableTextLight, margin: 1 }}
/>
@@ -367,7 +367,7 @@ export function BudgetSummary({
width={15}
height={15}
tooltipPosition="bottom-right"
- defaultColor={theme.altTableText}
+ defaultColor={theme.tableTextLight}
/>
diff --git a/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx b/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx
index 8be56b0bbf8..fe6b6144002 100644
--- a/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx
@@ -41,30 +41,30 @@ export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() {
}}
>
- Budgeted
+ Budgeted
{
return format(-parseFloat(value || '0'), 'financial');
}}
/>
- Spent
+ Spent
- Balance
+ Balance
@@ -75,7 +75,7 @@ export function IncomeHeaderMonth() {
return (
dispatch({ type: 'close' })}
data-testid="filters-menu-tooltip"
diff --git a/packages/desktop-client/src/components/modals/EditField.js b/packages/desktop-client/src/components/modals/EditField.js
index 1e9f09af25e..7cf99000416 100644
--- a/packages/desktop-client/src/components/modals/EditField.js
+++ b/packages/desktop-client/src/components/modals/EditField.js
@@ -86,7 +86,7 @@ export default function EditField({ modalProps, name, onSubmit }) {
groupHeaderStyle={
isNarrowWidth
? {
- color: theme.altTableText,
+ color: theme.tableTextLight,
}
: undefined
}
@@ -118,7 +118,7 @@ export default function EditField({ modalProps, name, onSubmit }) {
groupHeaderStyle={
isNarrowWidth
? {
- color: theme.altTableText,
+ color: theme.tableTextLight,
}
: undefined
}
@@ -155,7 +155,7 @@ export default function EditField({ modalProps, name, onSubmit }) {
groupHeaderStyle={
isNarrowWidth
? {
- color: theme.altTableText,
+ color: theme.tableTextLight,
}
: undefined
}
diff --git a/packages/desktop-client/src/components/modals/LoadBackup.js b/packages/desktop-client/src/components/modals/LoadBackup.js
index 92b12199c5c..6e0f3d98e66 100644
--- a/packages/desktop-client/src/components/modals/LoadBackup.js
+++ b/packages/desktop-client/src/components/modals/LoadBackup.js
@@ -119,7 +119,7 @@ function LoadBackup({
)}
{previousBackups.length === 0 ? (
-
+
No backups available
) : (
diff --git a/packages/desktop-client/src/components/reports/Overview.js b/packages/desktop-client/src/components/reports/Overview.js
index dbe0f6ba36c..10e6aad5edc 100644
--- a/packages/desktop-client/src/components/reports/Overview.js
+++ b/packages/desktop-client/src/components/reports/Overview.js
@@ -125,7 +125,7 @@ function NetWorthCard({ accounts }) {
@@ -184,7 +184,7 @@ function CashFlowCard() {
diff --git a/packages/desktop-client/src/components/reports/Tooltip.js b/packages/desktop-client/src/components/reports/Tooltip.js
index 4ee6b07e744..090be01f71f 100644
--- a/packages/desktop-client/src/components/reports/Tooltip.js
+++ b/packages/desktop-client/src/components/reports/Tooltip.js
@@ -57,8 +57,10 @@ class Tooltip extends Component {
borderRadius: 2,
boxShadow: light ? 'none' : '0 1px 6px rgba(0, 0, 0, .20)',
// TODO: Transparent background
- backgroundColor: light ? 'transparent' : theme.alt2MenuBackground,
- color: light ? 'inherit' : theme.alt2MenuItemText,
+ backgroundColor: light
+ ? 'transparent'
+ : theme.menuAutoCompleteBackground,
+ color: light ? 'inherit' : theme.menuAutoCompleteText,
padding: 10,
},
!light &&
@@ -68,7 +70,7 @@ class Tooltip extends Component {
borderTop: '7px solid transparent',
borderBottom: '7px solid transparent',
[position === 'right' ? 'borderRight' : 'borderLeft']:
- '7px solid ' + theme.alt2MenuBackground,
+ '7px solid ' + theme.menuAutoCompleteBackground,
[position === 'right' ? 'left' : 'right']: -6,
top: 'calc(50% - 7px)',
// eslint-disable-next-line rulesdir/typography
diff --git a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
index 5ef62d35914..724f9f325ed 100644
--- a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
@@ -85,8 +85,8 @@ function NetWorthGraph({
pointerEvents: 'none',
borderRadius: 2,
boxShadow: '0 1px 6px rgba(0, 0, 0, .20)',
- backgroundColor: theme.alt2MenuBackground,
- color: theme.alt2MenuItemText,
+ backgroundColor: theme.menuAutoCompleteBackground,
+ color: theme.menuAutoCompleteText,
padding: 10,
},
style,
diff --git a/packages/desktop-client/src/components/schedules/DiscoverSchedules.js b/packages/desktop-client/src/components/schedules/DiscoverSchedules.js
index ebc3568418a..e145776a57d 100644
--- a/packages/desktop-client/src/components/schedules/DiscoverSchedules.js
+++ b/packages/desktop-client/src/components/schedules/DiscoverSchedules.js
@@ -40,9 +40,7 @@ function DiscoverSchedulesTable({ schedules, loading }) {
dispatchSelected({ type: 'select', id: item.id, event: e });
}}
style={{
- borderColor: selected
- ? theme.alttableBorderSelected
- : theme.tableBorder,
+ borderColor: selected ? theme.tableBorderSelected : theme.tableBorder,
cursor: 'pointer',
color: selected
? theme.tableRowBackgroundHighlightText
diff --git a/packages/desktop-client/src/components/schedules/StatusBadge.tsx b/packages/desktop-client/src/components/schedules/StatusBadge.tsx
index 16a514d0b8f..e7c91568f67 100644
--- a/packages/desktop-client/src/components/schedules/StatusBadge.tsx
+++ b/packages/desktop-client/src/components/schedules/StatusBadge.tsx
@@ -44,8 +44,8 @@ export function getStatusProps(status: StatusTypes) {
};
case 'completed':
return {
- color: theme.alt2TableText,
- backgroundColor: theme.altTableBackground,
+ color: theme.tableHeaderText,
+ backgroundColor: theme.tableRowHeaderBackground,
Icon: FavoriteStar,
};
case 'pending':
@@ -56,20 +56,20 @@ export function getStatusProps(status: StatusTypes) {
};
case 'scheduled':
return {
- color: theme.menuItemText,
- backgroundColor: theme.altTableBackground,
+ color: theme.tableRowHeaderText,
+ backgroundColor: theme.tableRowHeaderBackground,
Icon: CalendarIcon,
};
case 'cleared':
return {
color: theme.noticeTextLight,
- backgroundColor: theme.altTableBackground,
+ backgroundColor: theme.tableRowHeaderBackground,
Icon: CheckCircle1,
};
default:
return {
color: theme.buttonNormalDisabledText,
- backgroundColor: theme.altTableBackground,
+ backgroundColor: theme.tableRowHeaderBackground,
Icon: CheckCircleHollow,
};
}
diff --git a/packages/desktop-client/src/components/transactions/MobileTransaction.js b/packages/desktop-client/src/components/transactions/MobileTransaction.js
index 322678f6bae..6880a6d9e77 100644
--- a/packages/desktop-client/src/components/transactions/MobileTransaction.js
+++ b/packages/desktop-client/src/components/transactions/MobileTransaction.js
@@ -144,7 +144,7 @@ export function DateHeader({ date }) {
}}
>
{monthUtils.format(date, 'MMMM dd, yyyy')}
@@ -163,7 +163,7 @@ function Status({ status }) {
color = theme.warningText;
break;
case 'upcoming':
- color = theme.alt2TableText;
+ color = theme.tableHeaderText;
break;
default:
}
@@ -987,7 +987,7 @@ class Transaction extends PureComponent {
fontSize: 14,
fontWeight: added ? '600' : '400',
...(prettyDescription === '' && {
- color: theme.altTableText,
+ color: theme.tableTextLight,
fontStyle: 'italic',
}),
}}
@@ -1023,7 +1023,7 @@ class Transaction extends PureComponent {
fontWeight: '400',
color: prettyCategory
? theme.tableTextSelected
- : theme.altMenuItemTextSelected,
+ : theme.menuItemTextSelected,
fontStyle: prettyCategory ? null : 'italic',
textAlign: 'left',
}}
@@ -1218,7 +1218,7 @@ function ListBoxSection({ section, state }) {
backgroundColor: theme.mobileDateBackground,
borderBottom: `1px solid ${theme.tableBorder}`,
borderTop: `1px solid ${theme.tableBorder}`,
- color: theme.alt2TableText,
+ color: theme.tableHeaderText,
display: 'flex',
justifyContent: 'center',
paddingBottom: 4,
diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.js b/packages/desktop-client/src/components/transactions/TransactionsTable.js
index 472fdd389d9..ee49899adc8 100644
--- a/packages/desktop-client/src/components/transactions/TransactionsTable.js
+++ b/packages/desktop-client/src/components/transactions/TransactionsTable.js
@@ -843,7 +843,7 @@ const Transaction = memo(function Transaction(props) {
...style,
...(isPreview && {
color: theme.tableTextInactive,
- backgroundColor: !selected ? '#fcfcfc' : undefined,
+ backgroundColor: !selected ? theme.tableBackground : undefined,
fontStyle: 'italic',
}),
...(_unmatched && { opacity: 0.5 }),
@@ -1048,7 +1048,7 @@ const Transaction = memo(function Transaction(props) {
? theme.warningText
: selected
? theme.formLabelText
- : theme.altTableText,
+ : theme.tableTextLight,
backgroundColor:
notes === 'missed'
? theme.errorBackground
@@ -1056,7 +1056,7 @@ const Transaction = memo(function Transaction(props) {
? theme.warningBackground
: selected
? theme.formLabelBackground
- : theme.alt2TableBackground,
+ : theme.pageBackground,
margin: '0 5px',
padding: '3px 7px',
borderRadius: 4,
diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts
index 7e8cc8b2649..68e475657ab 100644
--- a/packages/desktop-client/src/style/themes/dark.ts
+++ b/packages/desktop-client/src/style/themes/dark.ts
@@ -20,23 +20,19 @@ export const cardBorder = colorPalette.purple400;
export const cardShadow = colorPalette.navy700;
export const tableBackground = colorPalette.navy800;
-export const altTableBackground = colorPalette.navy700;
-export const alt2TableBackground = tableBackground;
export const tableRowBackgroundHover = colorPalette.navy700;
export const tableText = colorPalette.navy150;
-export const altTableText = tableText;
-export const alt2TableText = tableText;
+export const tableTextLight = tableText;
+export const tableTextSubdued = colorPalette.navy150;
export const tableTextSelected = colorPalette.navy150;
export const tableTextHover = colorPalette.navy400;
export const tableTextEditing = colorPalette.black;
-export const altTableTextEditing = tableTextEditing;
export const tableTextEditingBackground = colorPalette.purple400;
export const tableTextInactive = colorPalette.navy500;
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;
@@ -62,26 +58,15 @@ export const menuItemBackground = colorPalette.navy600;
export const menuItemBackgroundHover = colorPalette.navy500;
export const menuItemText = colorPalette.navy100;
export const menuItemTextHover = colorPalette.navy50;
-export const menuItemTextSelected = colorPalette.navy200;
-export const menuItemTextHeader = colorPalette.purple300;
+export const menuItemTextSelected = colorPalette.purple400;
+export const menuItemTextHeader = colorPalette.purple500;
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 = colorPalette.navy300;
-export const altMenuItemText = colorPalette.navy150;
-export const alt2MenuItemText = altMenuItemText;
-export const altMenuItemTextHover = colorPalette.navy150;
-export const altMenuItemTextSelected = colorPalette.purple400;
-export const altMenuItemTextHeader = colorPalette.purple500;
-export const alt2MenuItemTextHeader = altMenuItemTextHeader;
-export const altMenuBorder = colorPalette.navy200;
-export const altMenuBorderHover = colorPalette.purple400;
export const menuAutoCompleteBackground = colorPalette.navy400;
+export const menuAutoCompleteBackgroundHover = colorPalette.navy300;
export const menuAutoCompleteText = colorPalette.navy900;
+export const menuAutoCompleteTextHeader = menuItemTextHeader;
export const modalBackground = colorPalette.gray800;
export const modalBorder = colorPalette.navy600;
diff --git a/packages/desktop-client/src/style/themes/development.ts b/packages/desktop-client/src/style/themes/development.ts
index 7d84e5ee7d0..463f7abf060 100644
--- a/packages/desktop-client/src/style/themes/development.ts
+++ b/packages/desktop-client/src/style/themes/development.ts
@@ -1,16 +1,17 @@
import * as colorPalette from '../palette';
-export const pageBackground = colorPalette.blue600;
-export const pageBackgroundModalActive = colorPalette.blue700;
-export const pageBackgroundTopLeft = colorPalette.green300;
-export const pageBackgroundBottomRight = colorPalette.red600;
-export const pageBackgroundLineTop = colorPalette.navy50;
-export const pageBackgroundLineMid = colorPalette.green500;
-export const pageBackgroundLineBottom = colorPalette.orange200;
-export const pageText = colorPalette.blue300;
+export const pageBackground = colorPalette.navy100;
+export const pageBackgroundModalActive = colorPalette.navy200;
+export const pageBackgroundTopLeft = colorPalette.navy100;
+export const pageBackgroundBottomRight = colorPalette.blue150;
+export const pageBackgroundLineTop = colorPalette.white;
+export const pageBackgroundLineMid = colorPalette.navy100;
+export const pageBackgroundLineBottom = colorPalette.blue150;
+export const pageText = '#272630';
export const pageTextLight = colorPalette.navy500;
-export const pageTextSubdued = colorPalette.blue500;
-export const pageTextPositive = colorPalette.blue50;
+export const pageTextSubdued = colorPalette.navy300;
+export const pageTextDark = colorPalette.navy800;
+export const pageTextPositive = colorPalette.purple600;
export const pageTextLink = colorPalette.blue600;
export const pageTextLinkLight = colorPalette.blue300;
@@ -18,66 +19,54 @@ export const cardBackground = colorPalette.purple700;
export const cardBorder = colorPalette.purple400;
export const cardShadow = colorPalette.purple100;
-export const tableBackground = colorPalette.red900;
-export const altTableBackground = tableBackground;
-export const alt2TableBackground = 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;
-export const altTableTextEditing = tableTextEditing;
-export const tableTextEditingBackground = colorPalette.red200;
-export const tableTextInactive = colorPalette.red500;
-export const tableHeaderText = colorPalette.red700;
-export const tableHeaderBackground = colorPalette.red300;
-export const tableBorder = colorPalette.red200;
-export const tableBorderSelected = colorPalette.purple400;
-export const tableBorderHover = colorPalette.purple300;
+export const tableBackground = colorPalette.white;
+export const tableRowBackgroundHover = colorPalette.navy50;
+export const tableText = pageText;
+export const tableTextLight = colorPalette.navy400;
+export const tableTextSubdued = colorPalette.navy100;
+export const tableTextSelected = colorPalette.navy700;
+export const tableTextHover = colorPalette.navy900;
+export const tableTextEditing = colorPalette.navy50;
+export const tableTextEditingBackground = colorPalette.blue500;
+export const tableTextInactive = colorPalette.navy500;
+export const tableHeaderText = colorPalette.navy600;
+export const tableHeaderBackground = colorPalette.white;
+export const tableBorder = colorPalette.navy100;
+export const tableBorderSelected = colorPalette.purple500;
+export const tableBorderHover = colorPalette.purple400;
export const tableBorderSeparator = colorPalette.navy400;
-export const tableRowBackgroundHighlight = colorPalette.red700;
-export const tableRowBackgroundHighlightText = colorPalette.red200;
-export const tableRowHeaderBackground = colorPalette.red100;
-export const tableRowHeaderText = colorPalette.red700;
-
-export const sidebarBackground = colorPalette.orange800;
-export const sidebarItemBackground = colorPalette.orange700;
-export const sidebarItemBackgroundSelected = colorPalette.orange900;
-export const sidebarItemBackgroundHover = colorPalette.orange500;
-export const sidebarItemAccent = colorPalette.orange200;
-export const sidebarItemAccentSelected = colorPalette.orange400;
-export const sidebarItemAccentHover = colorPalette.orange200;
-export const sidebarItemText = colorPalette.orange200;
-export const sidebarItemTextSelected = colorPalette.orange400;
-export const sidebarItemTextHover = colorPalette.orange150;
-
-export const menuBackground = colorPalette.green800;
-export const menuItemBackground = colorPalette.green700;
-export const menuItemBackgroundHover = colorPalette.green500;
-export const menuItemText = colorPalette.green200;
-export const menuItemTextHover = colorPalette.green50;
-export const menuItemTextSelected = colorPalette.green500;
-export const menuItemTextHeader = colorPalette.green300;
-export const menuBorder = colorPalette.green500;
-export const menuBorderHover = colorPalette.green900;
+export const tableRowBackgroundHighlight = colorPalette.blue150;
+export const tableRowBackgroundHighlightText = colorPalette.navy700;
+export const tableRowHeaderBackground = colorPalette.navy50;
+export const tableRowHeaderText = colorPalette.navy800;
+
+export const sidebarBackground = colorPalette.navy900;
+export const sidebarItemBackground = colorPalette.blue800;
+export const sidebarItemBackgroundPositive = colorPalette.green500;
+export const sidebarItemBackgroundFailed = colorPalette.red300;
+export const sidebarItemBackgroundSelected = colorPalette.purple200;
+export const sidebarItemBackgroundHover = colorPalette.navy800;
+export const sidebarItemAccent = colorPalette.blue800;
+export const sidebarItemAccentSelected = colorPalette.purple200;
+export const sidebarItemAccentHover = colorPalette.blue700;
+export const sidebarItemText = colorPalette.navy150;
+export const sidebarItemTextSelected = colorPalette.purple200;
+export const sidebarItemTextHover = colorPalette.navy50;
+
+export const menuBackground = colorPalette.white;
+export const menuItemBackground = colorPalette.navy50;
+export const menuItemBackgroundHover = colorPalette.navy100;
+export const menuItemText = colorPalette.navy900;
+export const menuItemTextHover = menuItemText;
+export const menuItemTextSelected = colorPalette.purple300;
+export const menuItemTextHeader = colorPalette.navy400;
+export const menuBorder = colorPalette.navy100;
+export const menuBorderHover = colorPalette.purple100;
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;
-export const alt2MenuItemTextHeader = colorPalette.orange150;
-export const altMenuBorder = colorPalette.navy200;
-export const altMenuBorderHover = colorPalette.purple400;
export const menuAutoCompleteBackground = colorPalette.navy900;
+export const menuAutoCompleteBackgroundHover = colorPalette.navy600;
export const menuAutoCompleteText = colorPalette.white;
+export const menuAutoCompleteTextHeader = colorPalette.orange150;
export const modalBackground = colorPalette.navy900;
export const modalBorder = colorPalette.navy200;
diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts
index 26b4a1825db..e4392062e66 100644
--- a/packages/desktop-client/src/style/themes/light.ts
+++ b/packages/desktop-client/src/style/themes/light.ts
@@ -20,29 +20,26 @@ export const cardBorder = colorPalette.purple700;
export const cardShadow = colorPalette.navy700;
export const tableBackground = colorPalette.white;
-export const altTableBackground = colorPalette.navy50;
-export const alt2TableBackground = colorPalette.navy100;
export const tableRowBackgroundHover = colorPalette.navy50;
export const tableText = pageText;
-export const altTableText = colorPalette.navy400;
-export const alt2TableText = colorPalette.navy600;
+export const tableTextLight = colorPalette.navy400;
+export const tableTextSubdued = colorPalette.navy100;
export const tableTextSelected = colorPalette.navy700;
export const tableTextHover = colorPalette.navy900;
export const tableTextEditing = colorPalette.navy50;
-export const altTableTextEditing = colorPalette.purple50;
export const tableTextEditingBackground = colorPalette.blue500;
export const tableTextInactive = colorPalette.navy500;
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.navy900;
export const sidebarItemBackground = colorPalette.blue800;
export const sidebarItemBackgroundPositive = colorPalette.green500;
@@ -61,26 +58,15 @@ export const menuItemBackground = colorPalette.navy50;
export const menuItemBackgroundHover = colorPalette.navy100;
export const menuItemText = colorPalette.navy900;
export const menuItemTextHover = menuItemText;
-export const menuItemTextSelected = menuItemText;
-export const menuItemTextHeader = colorPalette.purple600;
+export const menuItemTextSelected = colorPalette.purple300;
+export const menuItemTextHeader = colorPalette.navy400;
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;
-export const alt2MenuItemTextHeader = colorPalette.orange150;
-export const altMenuBorder = colorPalette.blue700;
-export const altMenuBorderHover = colorPalette.purple300;
export const menuAutoCompleteBackground = colorPalette.navy900;
+export const menuAutoCompleteBackgroundHover = colorPalette.navy600;
export const menuAutoCompleteText = colorPalette.white;
+export const menuAutoCompleteTextHeader = colorPalette.orange150;
export const modalBackground = colorPalette.white;
export const modalBorder = colorPalette.white;
diff --git a/upcoming-release-notes/1871.md b/upcoming-release-notes/1871.md
new file mode 100644
index 00000000000..d6c13cbb3cd
--- /dev/null
+++ b/upcoming-release-notes/1871.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [carkom]
+---
+
+Consolidating colors so they are more consistent across the app from one page to the next.
\ No newline at end of file