feat(theme): migrate and release rhdh-theme 0.1.0 (RHDH 1.1)

Signed-off-by: Christoph Jerolimov <[email protected]>

workspaces/theme/.changeset/fast-dolphins-act.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-theme': minor
+---
+
+This version contains the initial theme from RHDH 1.1 https://github.com/janus-idp/backstage-showcase/tree/v1.1.0/packages/app/src/themes

workspaces/theme/plugins/theme/src/componentOverrides.ts

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 import { UnifiedThemeOptions } from '@backstage/theme';
+import { defaultThemePalette } from './defaultThemePalette';
+import { ThemeColors } from './types';
 
 const redhatFont = `@font-face {
   font-family: 'Red Hat Font';
@@ -25,8 +27,190 @@ const redhatFont = `@font-face {
     url(/fonts/RedHatText-Regular.ttf) format('truetype');
 }`;
 
-export const components: UnifiedThemeOptions['components'] = {
-  MuiCssBaseline: {
-    styleOverrides: redhatFont,
-  },
+export const components = (
+  themeColors: ThemeColors,
+  mode: string,
+): UnifiedThemeOptions['components'] => {
+  const themePalette = defaultThemePalette(mode);
+  return {
+    BackstageHeaderTabs: {
+      styleOverrides: {
+        tabsWrapper: {
+          paddingLeft: '0',
+        },
+        defaultTab: {
+          textTransform: 'none',
+          fontSize: '0.875rem',
+          '&:hover': {
+            boxShadow: '0 -3px #b8bbbe inset',
+          },
+        },
+      },
+    },
+    MuiTabs: {
+      defaultProps: {
+        TabIndicatorProps: {
+          style: {
+            height: '3px',
+            background: themeColors.navigationIndicatorColor || '#0066CC',
+          },
+        },
+      },
+      styleOverrides: {
+        root: {
+          borderBottom: '1px solid #d2d2d2',
+        },
+      },
+    },
+    MuiTab: {
+      defaultProps: {
+        disableRipple: true,
+      },
+      styleOverrides: {
+        root: {
+          textTransform: 'none',
+          minWidth: 'initial !important',
+          '&.Mui-disabled': {
+            backgroundColor: '#d2d2d2',
+          },
+        },
+      },
+    },
+    MuiButton: {
+      defaultProps: {
+        disableRipple: true,
+      },
+      styleOverrides: {
+        root: {
+          textTransform: 'none',
+          border: '0',
+          borderRadius: '3px',
+        },
+        contained: {
+          boxShadow: 'none',
+          '&:hover': {
+            border: '0',
+            boxShadow: 'none',
+          },
+          '&:-webkit-any-link:focus-visible': {
+            outlineOffset: '0',
+          },
+        },
+        containedPrimary: {
+          backgroundColor: themePalette.primary.containedButtonBackground,
+          color: themePalette.primary.contrastText,
+          '&:hover': {
+            backgroundColor: themePalette.primary.dark,
+            color: themePalette.primary.contrastText,
+          },
+          '&:focus-visible': {
+            boxShadow: `inset 0 0 0 1px ${themePalette.primary.focusVisibleBorder}`,
+            outline: `${themePalette.primary.focusVisibleBorder} solid 1px`,
+            backgroundColor: themePalette.primary.dark,
+            color: themePalette.primary.contrastText,
+          },
+          '&:disabled': {
+            color: themePalette.primary.disabled,
+            backgroundColor: themePalette.primary.disabledBackground,
+          },
+        },
+        containedSecondary: {
+          backgroundColor: themePalette.secondary.containedButtonBackground,
+          color: themePalette.secondary.contrastText,
+          '&:hover': {
+            backgroundColor: themePalette.secondary.dark,
+            color: themePalette.secondary.contrastText,
+          },
+          '&:focus-visible': {
+            boxShadow: `inset 0 0 0 1px ${themePalette.secondary.focusVisibleBorder}`,
+            outline: `${themePalette.secondary.focusVisibleBorder} solid 1px`,
+            backgroundColor: themePalette.secondary.dark,
+            color: themePalette.secondary.contrastText,
+          },
+          '&:disabled': {
+            color: themePalette.secondary.disabled,
+            backgroundColor: themePalette.secondary.disabledBackground,
+          },
+        },
+        outlined: {
+          border: '0',
+          boxShadow: `inset 0 0 0 1px ${themePalette.primary.main}`,
+          '&:hover': {
+            border: '0',
+            boxShadow: `inset 0 0 0 2px ${themePalette.primary.main}`,
+            backgroundColor: 'transparent',
+          },
+          '&:focus-visible': {
+            boxShadow: `inset 0 0 0 2px ${themePalette.primary.main}`,
+            outline: `${themePalette.primary.focusVisibleBorder} solid 1px`,
+          },
+        },
+        outlinedPrimary: {
+          color: themePalette.primary.main,
+          boxShadow: `inset 0 0 0 1px ${themePalette.primary.main}`,
+          border: '0',
+          '&:hover': {
+            border: '0',
+            boxShadow: `inset 0 0 0 2px ${themePalette.primary.main}`,
+            backgroundColor: 'transparent',
+          },
+          '&:focus-visible': {
+            boxShadow: `inset 0 0 0 2px ${themePalette.primary.main}`,
+            outline: `${themePalette.primary.focusVisibleBorder} solid 1px`,
+          },
+        },
+        outlinedSecondary: {
+          color: themePalette.secondary.main,
+          boxShadow: `inset 0 0 0 1px ${themePalette.secondary.main}`,
+          border: '0',
+          '&:hover': {
+            border: '0',
+            boxShadow: `inset 0 0 0 2px ${themePalette.secondary.main}`,
+            backgroundColor: 'transparent',
+          },
+          '&:focus-visible': {
+            boxShadow: `inset 0 0 0 2px ${themePalette.secondary.main}`,
+            outline: `${themePalette.secondary.focusVisibleBorder} solid 1px`,
+          },
+        },
+        text: {
+          color: themePalette.primary.main,
+          '&:hover': {
+            color: themePalette.primary.textHover,
+            backgroundColor: 'transparent',
+          },
+          '&:focus-visible': {
+            boxShadow: `inset 0 0 0 2px ${themePalette.primary.main}`,
+            outline: `${themePalette.primary.focusVisibleBorder} solid 1px`,
+          },
+        },
+        textPrimary: {
+          color: themePalette.primary.main,
+          '&:hover': {
+            color: themePalette.primary.textHover,
+            backgroundColor: 'transparent',
+          },
+        },
+        textSecondary: {
+          color: themePalette.secondary.main,
+          '&:hover': {
+            color: themePalette.secondary.textHover,
+            backgroundColor: 'transparent',
+          },
+        },
+      },
+    },
+    MuiLink: {
+      styleOverrides: {
+        underlineHover: {
+          '&:hover': {
+            textDecoration: 'none',
+          },
+        },
+      },
+    },
+    MuiCssBaseline: {
+      styleOverrides: redhatFont,
+    },
+  };
 };

workspaces/theme/plugins/theme/src/darkTheme.ts

@@ -30,15 +30,15 @@ export const customDarkTheme = (themeColors: ThemeColors) =>
       }),
       navigation: {
         background: '#0f1214',
-        indicator: themeColors.navigationIndicatorColor || '#009596',
+        indicator: themeColors.navigationIndicatorColor || '#0066CC',
         color: '#ffffff',
         selectedColor: '#ffffff',
         navItem: {
-          hoverBackground: '#030303',
+          hoverBackground: '#3c3f42',
         },
       },
     },
     defaultPageTheme: 'home',
     pageTheme: pageTheme(themeColors),
-    components,
+    components: components(themeColors, 'dark'),
   });

workspaces/theme/plugins/theme/src/defaultThemePalette.ts

@@ -0,0 +1,63 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const defaultThemePalette = (mode: string) => {
+  if (mode === 'dark') {
+    return {
+      primary: {
+        main: '#1FA7F8', // text button color, button background color
+        containedButtonBackground: '#0066CC', // contained button background color
+        textHover: '#73BCF7', // text button hover color
+        contrastText: '#FFF', // contained button text color
+        dark: '#004080', // contained button hover background color
+        disabledBackground: '#444548', // contained button disabled background color
+        disabled: '#AAABAC', // contained button disabled text color
+        focusVisibleBorder: '#ADD6FF', // contained button focus color
+      },
+      secondary: {
+        main: '#B2A3FF',
+        containedButtonBackground: '#8476D1',
+        textHover: '#CBC1FF',
+        contrastText: '#FFF',
+        dark: '#6753AC',
+        disabledBackground: '#444548',
+        disabled: '#AAABAC',
+        focusVisibleBorder: '#ADD6FF',
+      },
+    };
+  }
+  return {
+    primary: {
+      main: '#0066CC',
+      containedButtonBackground: '#0066CC',
+      mainHover: '#004080',
+      contrastText: '#FFF',
+      dark: '#004080',
+      disabledBackground: '#D2D2D2',
+      disabled: '#6A6E73',
+      focusVisibleBorder: '#0066CC',
+    },
+    secondary: {
+      main: '#8476D1',
+      containedButtonBackground: '#8476D1',
+      mainHover: '#6753AC',
+      contrastText: '#FFF',
+      dark: '#6753AC',
+      disabledBackground: '#D2D2D2',
+      disabled: '#6A6E73',
+      focusVisibleBorder: '#0066CC',
+    },
+  };
+};

workspaces/theme/plugins/theme/src/lightTheme.ts

@@ -30,15 +30,19 @@ export const customLightTheme = (themeColors: ThemeColors) =>
       }),
       navigation: {
         background: '#222427',
-        indicator: themeColors.navigationIndicatorColor || '#009596',
+        indicator: themeColors.navigationIndicatorColor || '#0066CC',
         color: '#ffffff',
         selectedColor: '#ffffff',
         navItem: {
-          hoverBackground: '#4f5255',
+          hoverBackground: '#3c3f42',
         },
       },
+      text: {
+        primary: '#151515',
+        secondary: '#757575',
+      },
     },
     defaultPageTheme: 'home',
     pageTheme: pageTheme(themeColors),
-    components,
+    components: components(themeColors, 'light'),
   });