From 4a8c692d06fa193e672393d2b9c9ce06686cd176 Mon Sep 17 00:00:00 2001 From: shall0pass <20625555+shall0pass@users.noreply.github.com> Date: Wed, 21 Feb 2024 13:50:00 -0600 Subject: [PATCH] [Theme] Midnight updates (#2385) * update colors * remove comments --- .../src/style/themes/midnight.ts | 50 +++++++++---------- upcoming-release-notes/2385.md | 6 +++ 2 files changed, 31 insertions(+), 25 deletions(-) create mode 100644 upcoming-release-notes/2385.md diff --git a/packages/desktop-client/src/style/themes/midnight.ts b/packages/desktop-client/src/style/themes/midnight.ts index 163dd0513..02a3b54ad 100644 --- 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 new file mode 100644 index 000000000..f39fbadd2 --- /dev/null +++ b/upcoming-release-notes/2385.md @@ -0,0 +1,6 @@ +--- +category: Maintenance +authors: [shall0pass] +--- + +Midnight theme updates -- GitLab