fix(theme): fix/remove different paper background colors/shades in MU…

…I v5 Signed-off-by: Christoph Jerolimov <[email protected]>
redhat-developer · Dec 5, 2024 · 7dfb6f4 · 7dfb6f4
1 parent a262f66
commit 7dfb6f4
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 38 deletions.
diff --git a/workspaces/theme/.changeset/rare-pears-tap.md b/workspaces/theme/.changeset/rare-pears-tap.md
@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-theme': patch
+---
+
+fix/remove different paper background colors/shades in MUI v5
diff --git a/workspaces/theme/plugins/theme/report.api.md b/workspaces/theme/plugins/theme/report.api.md
@@ -42,16 +42,18 @@ export interface RHDHThemePalette {
   };
   // (undocumented)
   general: {
-    disabledBackground: string;
     disabled: string;
-    formControlBackgroundColor: string;
-    mainSectionBackgroundColor: string;
-    headerBottomBorderColor: string;
+    disabledBackground: string;
+    paperBackgroundImage: string;
+    paperBorderColor: string;
     cardBackgroundColor: string;
+    cardBorderColor: string;
+    headerBottomBorderColor: string;
+    mainSectionBackgroundColor: string;
+    formControlBackgroundColor: string;
     sideBarBackgroundColor?: string;
     sidebarBackgroundColor: string;
     sidebarItemSelectedBackgroundColor: string;
-    cardBorderColor: string;
     tableTitleColor: string;
     tableSubtitleColor: string;
     tableColumnTitleColor: string;

diff --git a/workspaces/theme/plugins/theme/src/darkTheme.test.ts b/workspaces/theme/plugins/theme/src/darkTheme.test.ts
@@ -20,7 +20,7 @@ describe('customDarkTheme', () => {
     expect(customDarkTheme()).toEqual({
       background: {
         default: '#333333',
-        paper: '#424242',
+        paper: '#1b1d21',
       },
       banner: {
         closeButtonColor: '#FFFFFF',
@@ -92,22 +92,30 @@ describe('customDarkTheme', () => {
 
       rhdh: {
         general: {
-          disabledBackground: '#444548',
           disabled: '#AAABAC',
-          formControlBackgroundColor: '#36373A',
-          mainSectionBackgroundColor: '#0f1214',
-          headerBottomBorderColor: '#A3A3A3',
+          disabledBackground: '#444548',
+
+          paperBackgroundImage: 'none',
+          paperBorderColor: '#A3A3A3',
+
           cardBackgroundColor: '#1b1d21',
+          cardBorderColor: '#A3A3A3',
+
+          headerBottomBorderColor: '#A3A3A3',
+          mainSectionBackgroundColor: '#0f1214',
+          formControlBackgroundColor: '#36373A',
+
           sidebarBackgroundColor: '#1b1d21',
           sidebarItemSelectedBackgroundColor: '#4F5255',
-          cardBorderColor: '#A3A3A3',
+
           tableTitleColor: '#E0E0E0',
           tableSubtitleColor: '#E0E0E0',
           tableColumnTitleColor: '#E0E0E0',
           tableRowHover: '#0f1214',
           tableBorderColor: '#515151',
           tableBackgroundColor: '#1b1d21',
           tabsBottomBorderColor: '#444548',
+
           contrastText: '#FFF',
         },
         primary: {

diff --git a/workspaces/theme/plugins/theme/src/darkTheme.ts b/workspaces/theme/plugins/theme/src/darkTheme.ts
@@ -40,24 +40,36 @@ export const customDarkTheme = (): ThemeConfigPalette => {
         background: '#0f1214',
       },
     },
+    background: {
+      default: '#333333',
+      paper: '#1b1d21',
+    },
     rhdh: {
       general: {
-        disabledBackground: '#444548',
         disabled: '#AAABAC',
-        formControlBackgroundColor: '#36373A',
-        mainSectionBackgroundColor: '#0f1214',
-        headerBottomBorderColor: '#A3A3A3',
+        disabledBackground: '#444548',
+
+        paperBackgroundImage: 'none',
+        paperBorderColor: '#A3A3A3',
+
         cardBackgroundColor: '#1b1d21',
+        cardBorderColor: '#A3A3A3',
+
+        headerBottomBorderColor: '#A3A3A3',
+        mainSectionBackgroundColor: '#0f1214',
+        formControlBackgroundColor: '#36373A',
+
         sidebarBackgroundColor: '#1b1d21',
         sidebarItemSelectedBackgroundColor: '#4F5255',
-        cardBorderColor: '#A3A3A3',
+
         tableTitleColor: '#E0E0E0',
         tableSubtitleColor: '#E0E0E0',
         tableColumnTitleColor: '#E0E0E0',
         tableRowHover: '#0f1214',
         tableBorderColor: '#515151',
         tableBackgroundColor: '#1b1d21',
         tabsBottomBorderColor: '#444548',
+
         contrastText: '#FFF',
       },
       primary: {

diff --git a/workspaces/theme/plugins/theme/src/lightTheme.test.ts b/workspaces/theme/plugins/theme/src/lightTheme.test.ts
@@ -96,22 +96,30 @@ describe('customLightTheme', () => {
       },
       rhdh: {
         general: {
-          disabledBackground: '#D2D2D2',
           disabled: '#6A6E73',
-          formControlBackgroundColor: '#FFF',
-          mainSectionBackgroundColor: '#FFF',
-          headerBottomBorderColor: '#C7C7C7',
+          disabledBackground: '#D2D2D2',
+
+          paperBackgroundImage: 'none',
+          paperBorderColor: '#C7C7C7',
+
           cardBackgroundColor: '#FFF',
+          cardBorderColor: '#C7C7C7',
+
+          headerBottomBorderColor: '#C7C7C7',
+          mainSectionBackgroundColor: '#FFF',
+          formControlBackgroundColor: '#FFF',
+
           sidebarBackgroundColor: '#212427',
           sidebarItemSelectedBackgroundColor: '#4F5255',
-          cardBorderColor: '#C7C7C7',
+
           tableTitleColor: '#181818',
           tableSubtitleColor: '#616161',
           tableColumnTitleColor: '#151515',
           tableRowHover: '#F5F5F5',
           tableBorderColor: '#E0E0E0',
           tableBackgroundColor: '#FFF',
           tabsBottomBorderColor: '#D2D2D2',
+
           contrastText: '#FFF',
         },
         primary: {

diff --git a/workspaces/theme/plugins/theme/src/lightTheme.ts b/workspaces/theme/plugins/theme/src/lightTheme.ts
@@ -44,24 +44,36 @@ export const customLightTheme = (): ThemeConfigPalette => {
       primary: '#151515',
       secondary: '#757575',
     },
+    background: {
+      default: '#F8F8F8',
+      paper: '#FFFFFF',
+    },
     rhdh: {
       general: {
-        disabledBackground: '#D2D2D2',
         disabled: '#6A6E73',
-        formControlBackgroundColor: '#FFF',
-        mainSectionBackgroundColor: '#FFF',
-        headerBottomBorderColor: '#C7C7C7',
+        disabledBackground: '#D2D2D2',
+
+        paperBackgroundImage: 'none',
+        paperBorderColor: '#C7C7C7',
+
         cardBackgroundColor: '#FFF',
+        cardBorderColor: '#C7C7C7',
+
+        headerBottomBorderColor: '#C7C7C7',
+        mainSectionBackgroundColor: '#FFF',
+        formControlBackgroundColor: '#FFF',
+
         sidebarBackgroundColor: '#212427',
         sidebarItemSelectedBackgroundColor: '#4F5255',
-        cardBorderColor: '#C7C7C7',
+
         tableTitleColor: '#181818',
         tableSubtitleColor: '#616161',
         tableColumnTitleColor: '#151515',
         tableRowHover: '#F5F5F5',
         tableBorderColor: '#E0E0E0',
         tableBackgroundColor: '#FFF',
         tabsBottomBorderColor: '#D2D2D2',
+
         contrastText: '#FFF',
       },
       primary: {

diff --git a/workspaces/theme/plugins/theme/src/types.ts b/workspaces/theme/plugins/theme/src/types.ts
@@ -19,24 +19,32 @@ export type BackstageThemePalette = UnifiedThemeOptions['palette'];
 
 export interface RHDHThemePalette {
   general: {
-    disabledBackground: string;
     disabled: string;
-    formControlBackgroundColor: string;
-    mainSectionBackgroundColor: string;
-    headerBottomBorderColor: string;
+    disabledBackground: string;
+
+    paperBackgroundImage: string;
+    paperBorderColor: string;
+
     cardBackgroundColor: string;
+    cardBorderColor: string;
+
+    headerBottomBorderColor: string;
+    mainSectionBackgroundColor: string;
+    formControlBackgroundColor: string;
+
     /** @deprecated please use `sidebarBackgroundColor` instead */
     sideBarBackgroundColor?: string;
     sidebarBackgroundColor: string;
     sidebarItemSelectedBackgroundColor: string;
-    cardBorderColor: string;
+
     tableTitleColor: string;
     tableSubtitleColor: string;
     tableColumnTitleColor: string;
     tableRowHover: string;
     tableBorderColor: string;
     tableBackgroundColor: string;
     tabsBottomBorderColor: string;
+
     contrastText: string;
   };
 

diff --git a/workspaces/theme/plugins/theme/src/utils/createComponents.ts b/workspaces/theme/plugins/theme/src/utils/createComponents.ts
@@ -77,7 +77,7 @@ export const createComponents = (themeConfig: ThemeConfig): Components => {
       styleOverrides: {
         root: {
           boxShadow: 'none',
-          backgroundColor: general.cardBackgroundColor,
+          backgroundImage: general.paperBackgroundImage,
           // hide the first child element which is a divider with MuiDivider-root classname in MuiPaper
           '& > hr:first-child[class|="MuiDivider-root"]': {
             height: 0,
@@ -96,17 +96,14 @@ export const createComponents = (themeConfig: ThemeConfig): Components => {
         },
         elevation1: {
           boxShadow: 'none',
-          borderRadius: '0',
-          outline: `1px solid ${general.cardBorderColor}`,
+          outline: `1px solid ${general.paperBorderColor}`,
           '& > hr[class|="MuiDivider-root"]': {
-            backgroundColor: general.cardBorderColor,
+            backgroundColor: general.paperBorderColor,
           },
         },
         elevation2: {
-          backgroundColor: general.tableBackgroundColor,
           boxShadow: 'none',
-          outline: `1px solid ${general.cardBorderColor}`,
-          padding: '1rem',
+          outline: `1px solid ${general.paperBorderColor}`,
         },
       },
     };