add missing theme variable for custom theming (#6665)

* Update BudgetName color to use sidebarBudgetName 

New theme variable sidebarBudgetName

* Update dark.ts to add sidebarBudgetName variable

* Update development.ts to add sidebarBudgetName variable

* Update light.ts to add sidebarBudgetName variable

* Update midnight.ts to add sidebarBudgetName variable

* Update dark.ts

* Update development.ts

* Update light.ts

* Update midnight.ts

* Update theme.ts

* Create 6665.md

Add `sidebarBudgetName` color variable

packages/component-library/src/theme.ts

@@ -43,6 +43,7 @@ export const theme = {
   sidebarItemBackgroundHover: 'var(--color-sidebarItemBackgroundHover)',
   sidebarItemText: 'var(--color-sidebarItemText)',
   sidebarItemTextSelected: 'var(--color-sidebarItemTextSelected)',
+  sidebarBudgetName: 'var(--color-sidebarBudgetName)',
   menuBackground: 'var(--color-menuBackground)',
   menuItemBackground: 'var(--color-menuItemBackground)',
   menuItemBackgroundHover: 'var(--color-menuItemBackgroundHover)',

packages/desktop-client/src/components/sidebar/BudgetName.tsx

@@ -126,7 +126,7 @@ function EditableBudgetName() {
         ref={triggerRef}
         variant="bare"
         style={{
-          color: theme.buttonNormalBorder,
+          color: theme.sidebarBudgetName,
           fontSize: 16,
           fontWeight: 500,
           marginLeft: -5,

packages/desktop-client/src/style/themes/dark.ts

@@ -47,6 +47,7 @@ export const sidebarItemAccentSelected = colorPalette.purple200;
 export const sidebarItemBackgroundHover = colorPalette.navy700;
 export const sidebarItemText = colorPalette.navy150;
 export const sidebarItemTextSelected = colorPalette.purple200;
+export const sidebarBudgetName = colorPalette.navy300;
 
 export const menuBackground = colorPalette.navy800;
 export const menuItemBackground = colorPalette.navy800;

packages/desktop-client/src/style/themes/development.ts

@@ -47,6 +47,7 @@ export const sidebarItemBackgroundHover = colorPalette.navy800;
 export const sidebarItemAccentSelected = colorPalette.purple200;
 export const sidebarItemText = colorPalette.navy150;
 export const sidebarItemTextSelected = colorPalette.purple200;
+export const sidebarBudgetName = colorPalette.navy150;
 
 export const menuBackground = colorPalette.white;
 export const menuItemBackground = colorPalette.navy50;

packages/desktop-client/src/style/themes/light.ts

@@ -47,6 +47,7 @@ export const sidebarItemBackgroundHover = colorPalette.navy800;
 export const sidebarItemAccentSelected = colorPalette.purple200;
 export const sidebarItemText = colorPalette.navy150;
 export const sidebarItemTextSelected = colorPalette.purple200;
+export const sidebarBudgetName = colorPalette.navy150;
 
 export const menuBackground = colorPalette.white;
 export const menuItemBackground = colorPalette.navy50;

packages/desktop-client/src/style/themes/midnight.ts

@@ -47,6 +47,7 @@ export const sidebarItemAccentSelected = colorPalette.purple200;
 export const sidebarItemBackgroundHover = colorPalette.gray700;
 export const sidebarItemText = colorPalette.gray100;
 export const sidebarItemTextSelected = colorPalette.purple200;
+export const sidebarBudgetName = colorPalette.gray300;
 
 export const menuBackground = colorPalette.gray700;
 export const menuItemBackground = colorPalette.gray200;

upcoming-release-notes/6665.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [Juulz]
+---
+
+Add missing theme color variable `sidebarBudgetName`.