[Theme] Midnight updates (#2385)

* update colors * remove comments
actualbudget · Feb 21, 2024 · 4a8c692 · 4a8c692
1 parent 0609f47
commit 4a8c692
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 25 deletions.
diff --git a/packages/desktop-client/src/style/themes/midnight.ts b/packages/desktop-client/src/style/themes/midnight.ts
@@ -1,6 +1,6 @@
 import * as colorPalette from '../palette';
 
-export const pageBackground = colorPalette.gray600; //mobile and desktop
+export const pageBackground = colorPalette.gray600;
 export const pageBackgroundModalActive = colorPalette.gray700;
 export const pageBackgroundTopLeft = colorPalette.gray800;
 export const pageBackgroundBottomRight = colorPalette.gray700;
@@ -19,7 +19,7 @@ export const cardBackground = colorPalette.gray800;
 export const cardBorder = colorPalette.purple300;
 export const cardShadow = colorPalette.gray900;
 
-export const tableBackground = colorPalette.gray800; //Desktop and mobile budget background, Mobile New Transaction input box background
+export const tableBackground = colorPalette.gray800;
 export const tableRowBackgroundHover = colorPalette.gray500;
 export const tableText = colorPalette.gray150;
 export const tableTextLight = tableText;
@@ -46,34 +46,34 @@ export const sidebarItemBackgroundHover = colorPalette.gray700;
 export const sidebarItemText = colorPalette.gray100;
 export const sidebarItemTextSelected = colorPalette.purple200;
 
-export const menuBackground = colorPalette.gray700; //700 pop up menu background
+export const menuBackground = colorPalette.gray700;
 export const menuItemBackground = colorPalette.gray200;
 export const menuItemBackgroundHover = colorPalette.gray500;
 export const menuItemText = colorPalette.gray100;
 export const menuItemTextHover = colorPalette.gray50;
 export const menuItemTextSelected = colorPalette.purple400;
-export const menuItemTextHeader = colorPalette.purple200; //mobile autocomplete text
-export const menuBorder = colorPalette.gray800; //
+export const menuItemTextHeader = colorPalette.purple200;
+export const menuBorder = colorPalette.gray800;
 export const menuBorderHover = colorPalette.purple300;
 export const menuKeybindingText = colorPalette.gray500;
-export const menuAutoCompleteBackground = colorPalette.gray600; //desktop autocomplete
-export const menuAutoCompleteBackgroundHover = colorPalette.gray400; //desktop autocomplete
-export const menuAutoCompleteText = colorPalette.gray100; //desktop autocomplete
-export const menuAutoCompleteTextHeader = colorPalette.purple200; //desktop autocomplete
+export const menuAutoCompleteBackground = colorPalette.gray600;
+export const menuAutoCompleteBackgroundHover = colorPalette.gray400;
+export const menuAutoCompleteText = colorPalette.gray100;
+export const menuAutoCompleteTextHeader = colorPalette.purple200;
 
-export const modalBackground = colorPalette.gray600; //controls desktop modals and mobile autocomplete background
-export const modalBorder = colorPalette.gray200; //?? Not used
+export const modalBackground = colorPalette.gray700;
+export const modalBorder = colorPalette.gray200;
 export const mobileHeaderBackground = colorPalette.gray800;
 export const mobileHeaderText = colorPalette.purple200;
 export const mobileHeaderTextSubdued = colorPalette.gray200;
 export const mobileHeaderTextHover = 'rgba(200, 200, 200, .15)';
 export const mobilePageBackground = colorPalette.gray900;
-export const mobileNavBackground = colorPalette.gray600; //Mobile bottom navigation bar
+export const mobileNavBackground = colorPalette.gray600;
 export const mobileNavItem = colorPalette.gray150;
 export const mobileNavItemSelected = colorPalette.purple200;
 export const mobileAccountShadow = cardShadow;
 export const mobileAccountText = colorPalette.blue800;
-export const mobileModalBackground = colorPalette.gray100; //???
+export const mobileModalBackground = colorPalette.gray100;
 export const mobileModalText = colorPalette.white;
 
 // Mobile view themes (for the top bar)
@@ -87,7 +87,7 @@ export const markdownLight = colorPalette.purple800;
 // Button
 export const buttonMenuText = colorPalette.gray200;
 export const buttonMenuTextHover = buttonMenuText;
-export const buttonMenuBackground = colorPalette.gray700; //700
+export const buttonMenuBackground = colorPalette.gray700;
 export const buttonMenuBackgroundHover = 'rgba(200, 200, 200, .25)';
 export const buttonMenuBorder = colorPalette.gray500;
 export const buttonMenuSelectedText = colorPalette.green800;
@@ -102,14 +102,14 @@ export const buttonPrimaryBackground = colorPalette.gray400;
 export const buttonPrimaryBackgroundHover = buttonPrimaryBackground;
 export const buttonPrimaryBorder = buttonPrimaryBackground;
 export const buttonPrimaryShadow = 'rgba(0, 0, 0, 0.6)';
-export const buttonPrimaryDisabledText = colorPalette.gray700;
+export const buttonPrimaryDisabledText = colorPalette.gray400;
 export const buttonPrimaryDisabledBackground = colorPalette.gray700;
 export const buttonPrimaryDisabledBorder = buttonPrimaryDisabledBackground;
 
 export const buttonNormalText = colorPalette.gray150;
 export const buttonNormalTextHover = colorPalette.gray150;
-export const buttonNormalBackground = colorPalette.gray600; //Mobile Account buttons
-export const buttonNormalBackgroundHover = colorPalette.gray400; //Mobile Account buttons
+export const buttonNormalBackground = colorPalette.gray600;
+export const buttonNormalBackgroundHover = colorPalette.gray400;
 export const buttonNormalBorder = colorPalette.gray300;
 export const buttonNormalShadow = 'rgba(0, 0, 0, 0.4)';
 export const buttonNormalSelectedText = colorPalette.white;
@@ -140,19 +140,19 @@ export const noticeTextLight = colorPalette.green400;
 export const noticeTextDark = colorPalette.green150;
 export const noticeTextMenu = colorPalette.green400;
 export const noticeBorder = colorPalette.green800;
-export const warningBackground = colorPalette.orange800; //800
-export const warningText = colorPalette.orange200; //300
+export const warningBackground = colorPalette.orange800;
+export const warningText = colorPalette.orange200;
 export const warningTextLight = colorPalette.orange500;
 export const warningTextDark = colorPalette.orange100;
 export const warningBorder = colorPalette.orange500;
-export const errorBackground = colorPalette.red800; //800
-export const errorText = colorPalette.red200; //200
+export const errorBackground = colorPalette.red800;
+export const errorText = colorPalette.red200;
 export const errorTextDark = colorPalette.red150;
 export const errorTextDarker = errorTextDark;
 export const errorTextMenu = colorPalette.red500;
 export const errorBorder = colorPalette.red500;
-export const upcomingBackground = colorPalette.purple800; //700
-export const upcomingText = colorPalette.purple200; //100
+export const upcomingBackground = colorPalette.purple800;
+export const upcomingText = colorPalette.purple200;
 export const upcomingBorder = tableBorder;
 
 export const formLabelText = colorPalette.purple150;
@@ -176,11 +176,11 @@ export const checkboxBackgroundSelected = colorPalette.purple300;
 export const checkboxBorderSelected = colorPalette.purple300;
 export const checkboxShadowSelected = colorPalette.purple500;
 
-export const pillBackground = colorPalette.gray700; //settings background
+export const pillBackground = colorPalette.gray700;
 export const pillBackgroundLight = colorPalette.gray900;
 export const pillText = colorPalette.gray200;
 export const pillTextHighlighted = colorPalette.purple200;
-export const pillBorder = colorPalette.gray700;
+export const pillBorder = colorPalette.gray500;
 export const pillBorderDark = pillBorder;
 export const pillBackgroundSelected = colorPalette.purple600;
 export const pillTextSelected = colorPalette.gray150;

diff --git a/upcoming-release-notes/2385.md b/upcoming-release-notes/2385.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [shall0pass]
+---
+
+Midnight theme updates