Add theming from RHDH 1.0 and 1.1

src/rhdh-1.0/README.md

@@ -0,0 +1 @@
+Copied from https://github.com/janus-idp/backstage-showcase/tree/v1.0.0/packages/app/src/themes

src/rhdh-1.0/componentOverrides.ts

@@ -0,0 +1,17 @@
+import { UnifiedThemeOptions } from '@backstage/theme';
+
+const redhatFont = `@font-face {
+  font-family: 'Red Hat Font';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(/fonts/RedHatText-Regular.woff2) format('woff2'),
+    url(/fonts/RedHatText-Regular.otf) format('opentype'),
+    url(/fonts/RedHatText-Regular.ttf) format('truetype');
+}`;
+
+export const components: UnifiedThemeOptions['components'] = {
+  MuiCssBaseline: {
+    styleOverrides: redhatFont,
+  },
+};

src/rhdh-1.0/darkTheme.ts

@@ -0,0 +1,29 @@
+import { createUnifiedTheme, themes } from '@backstage/theme';
+import { components } from './componentOverrides';
+import { pageTheme } from './pageTheme';
+import { ThemeColors } from './types';
+
+export const customDarkTheme = (themeColors: ThemeColors) =>
+  createUnifiedTheme({
+    palette: {
+      ...themes.dark.getTheme('v5')?.palette,
+      ...(themeColors.primaryColor && {
+        primary: {
+          ...themes.light.getTheme('v5')?.palette.primary,
+          main: themeColors.primaryColor,
+        },
+      }),
+      navigation: {
+        background: '#0f1214',
+        indicator: themeColors.navigationIndicatorColor || '#009596',
+        color: '#ffffff',
+        selectedColor: '#ffffff',
+        navItem: {
+          hoverBackground: '#030303',
+        },
+      },
+    },
+    defaultPageTheme: 'home',
+    pageTheme: pageTheme(themeColors),
+    components,
+  });

src/rhdh-1.0/lightTheme.ts

@@ -0,0 +1,29 @@
+import { createUnifiedTheme, themes } from '@backstage/theme';
+import { components } from './componentOverrides';
+import { pageTheme } from './pageTheme';
+import { ThemeColors } from './types';
+
+export const customLightTheme = (themeColors: ThemeColors) =>
+  createUnifiedTheme({
+    palette: {
+      ...themes.light.getTheme('v5')?.palette,
+      ...(themeColors.primaryColor && {
+        primary: {
+          ...themes.light.getTheme('v5')?.palette.primary,
+          main: themeColors.primaryColor,
+        },
+      }),
+      navigation: {
+        background: '#222427',
+        indicator: themeColors.navigationIndicatorColor || '#009596',
+        color: '#ffffff',
+        selectedColor: '#ffffff',
+        navItem: {
+          hoverBackground: '#4f5255',
+        },
+      },
+    },
+    defaultPageTheme: 'home',
+    pageTheme: pageTheme(themeColors),
+    components,
+  });

src/rhdh-1.0/pageTheme.ts

@@ -0,0 +1,37 @@
+import { PageTheme, genPageTheme, shapes } from '@backstage/theme';
+import { ThemeColors } from './types';
+
+export const pageTheme = (input: ThemeColors): Record<string, PageTheme> => {
+  const { headerColor1, headerColor2 } = input;
+  const defaultColors = ['#005f60', '#73c5c5'];
+  const headerColor = [
+    headerColor1 || defaultColors[0],
+    headerColor2 || defaultColors[1],
+  ];
+  return {
+    home: genPageTheme({
+      colors: [headerColor[0], headerColor[1]],
+      shape: shapes.wave,
+    }),
+    app: genPageTheme({
+      colors: [headerColor[0], headerColor[1]],
+      shape: shapes.wave,
+    }),
+    apis: genPageTheme({
+      colors: [headerColor[0], headerColor[1]],
+      shape: shapes.wave,
+    }),
+    documentation: genPageTheme({
+      colors: [headerColor[0], headerColor[1]],
+      shape: shapes.wave,
+    }),
+    tool: genPageTheme({
+      colors: [headerColor[0], headerColor[1]],
+      shape: shapes.round,
+    }),
+    other: genPageTheme({
+      colors: [headerColor[0], headerColor[1]],
+      shape: shapes.wave,
+    }),
+  };
+};

src/rhdh-1.0/types.ts

@@ -0,0 +1,6 @@
+export type ThemeColors = {
+  primaryColor?: string | undefined;
+  headerColor1?: string | undefined;
+  headerColor2?: string | undefined;
+  navigationIndicatorColor?: string | undefined;
+};

src/rhdh-1.1/README.md

@@ -0,0 +1 @@
+Copied from https://github.com/janus-idp/backstage-showcase/tree/v1.1.0/packages/app/src/themes

src/rhdh-1.1/componentOverrides.ts

@@ -0,0 +1,201 @@
+import { UnifiedThemeOptions } from '@backstage/theme';
+import { defaultThemePalette } from './defaultThemePalette';
+import { ThemeColors } from './types';
+
+const redhatFont = `@font-face {
+  font-family: 'Red Hat Font';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(/fonts/RedHatText-Regular.woff2) format('woff2'),
+    url(/fonts/RedHatText-Regular.otf) format('opentype'),
+    url(/fonts/RedHatText-Regular.ttf) format('truetype');
+}`;
+
+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,
+    },
+  };
+};

src/rhdh-1.1/darkTheme.ts

@@ -0,0 +1,29 @@
+import { createUnifiedTheme, themes } from '@backstage/theme';
+import { components } from './componentOverrides';
+import { pageTheme } from './pageTheme';
+import { ThemeColors } from './types';
+
+export const customDarkTheme = (themeColors: ThemeColors) =>
+  createUnifiedTheme({
+    palette: {
+      ...themes.dark.getTheme('v5')?.palette,
+      ...(themeColors.primaryColor && {
+        primary: {
+          ...themes.light.getTheme('v5')?.palette.primary,
+          main: themeColors.primaryColor,
+        },
+      }),
+      navigation: {
+        background: '#0f1214',
+        indicator: themeColors.navigationIndicatorColor || '#0066CC',
+        color: '#ffffff',
+        selectedColor: '#ffffff',
+        navItem: {
+          hoverBackground: '#3c3f42',
+        },
+      },
+    },
+    defaultPageTheme: 'home',
+    pageTheme: pageTheme(themeColors),
+    components: components(themeColors, 'dark'),
+  });