feat(CompanyLogo): follow logo brand guidelines, support light mode (#981)

* feat(defaultlogo): follow logo brand guidelines

* feat(CompanyLogo): support light theme backgrounds

* feat(CompanyLogo): change the shape of `app.branding.fullLogo` to be consistent with CompanyLogo

* feat: no longer breaking change

it would probably be a useful feature to define one logo for both themes

* fix(theme): use ids instead of classname

* allow the width of `LogoRender` to be explicitly set

Author: logonoff

workspaces/global-header/.changeset/funny-cooks-swim.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-global-header': patch
+---
+
+Update the Red Hat Developer Hub logo to align with the [brand guidelines](https://www.redhat.com/en/about/brand/standards/product-logos)

workspaces/global-header/.changeset/rotten-brooms-flow.md

@@ -0,0 +1,13 @@
+---
+'@red-hat-developer-hub/backstage-plugin-global-header': minor
+---
+
+Updated the `CompanyLogo` component to support global headers either light or dark background colours. The light/dark mode of the logo is determined by the `theme.palette.rhdh.general.appBarBackgroundScheme` field in the theme configuration.
+
+The `logo` prop now also accepts an object with `light` and `dark` properties, each containing a string URL for the logo image. If `logo` is a string, it will be used for both light and dark modes.
+
+The `CompanyLogo` will prefer the `config.props.logo.[light|dark]` mount point configuration when rendering. If not provided, it will fall back to the `app.branding.fullLogo` in the app configuration.
+
+Moreover, `app.branding.fullLogo` is now an object with `light` and `dark` properties, each containing a string URL for the logo image. If `app.branding.fullLogo` is a string, it will be used for both light and dark modes.
+
+If neither `config.props.logo` nor `app.branding.fullLogo` is provided, the `CompanyLogo` will render the Red Hat Developer Hub logo by default.

workspaces/global-header/packages/app/src/App.tsx

@@ -141,10 +141,6 @@ export default app.createRoot(
     <GlobalStyles
       styles={{
         html: { overflowY: 'hidden' },
-        ':root': {
-          '--rhdh-v1-page-inset': '1.5rem',
-          '--global-header-default-height': '64px',
-        },
       }}
     />
     <AlertDisplay />

workspaces/global-header/packages/app/src/components/Root/Root.tsx

@@ -114,7 +114,7 @@ const SidebarLayout = styled(Box, {
 export const Root = ({ children = null }: PropsWithChildren<{}>) => {
   return (
     <PageWithoutFixHeight>
-      <div id="above-sidebar-header-container">
+      <div id="rhdh-above-sidebar-header-container">
         {/* update globalHeaderMountPoints config to test Global header */}
         <GlobalHeaderComponent
           globalHeaderMountPoints={defaultGlobalHeaderComponentsMountPoints}
@@ -125,7 +125,7 @@ export const Root = ({ children = null }: PropsWithChildren<{}>) => {
         aboveSidebarHeaderHeight={64}
       >
         <SidebarPage>
-          <div id="above-main-content-header-container" />
+          <div id="rhdh-above-main-content-header-container" />
           <Sidebar>
             <SidebarGroup label="Menu" icon={<MenuIcon />}>
               {/* Global nav, not org-specific */}

workspaces/global-header/plugins/global-header/report.api.md

@@ -12,15 +12,17 @@ import { JSX as JSX_2 } from 'react/jsx-runtime';
 export const ApplicationLauncherDropdown: () => JSX_2.Element;
 
 // @public
-export const CompanyLogo: ({ logo, to }: CompanyLogoProps) => JSX_2.Element;
+export const CompanyLogo: ({
+  logo,
+  logoWidth,
+  to,
+}: CompanyLogoProps) => JSX_2.Element;
 
 // @public (undocumented)
 export interface CompanyLogoProps {
-  // (undocumented)
   layout?: CSSProperties;
-  // (undocumented)
-  logo?: string;
-  // (undocumented)
+  logo?: LogoURLs;
+  logoWidth?: number;
   to?: string;
 }
 
@@ -169,6 +171,15 @@ export interface HeaderIconProps {
   size?: 'small' | 'medium' | 'large';
 }
 
+// @public
+export type LogoURLs =
+  | {
+      light: string;
+      dark: string;
+    }
+  | string
+  | undefined;
+
 // @public
 export const LogoutButton: ComponentType;
 

workspaces/global-header/plugins/global-header/src/components/CompanyLogo/CompanyLogo.tsx

@@ -18,13 +18,16 @@ import { Link } from '@backstage/core-components';
 import { configApiRef, useApi } from '@backstage/core-plugin-api';
 import DefaultLogo from './DefaultLogo';
 import Box from '@mui/material/Box';
+import { useAppBarBackgroundScheme } from '../../hooks/useAppBarBackgroundScheme';
 
 const LogoRender = ({
   base64Logo,
   defaultLogo,
+  width = 150,
 }: {
   base64Logo: string | undefined;
   defaultLogo: JSX.Element;
+  width?: number;
 }) => {
   return base64Logo ? (
     <img
@@ -36,26 +39,76 @@ const LogoRender = ({
         maxHeight: '40px',
         maxWidth: '150px',
       }}
+      width={width}
     />
   ) : (
     defaultLogo
   );
 };
 
+/**
+ * An interface representing the URLs for light and dark variants of a logo.
+ * @public
+ */
+export type LogoURLs =
+  | {
+      /** The logo that will be used in global headers with a light-coloured background */
+      light: string;
+      /** The logo that will be used in global headers with a dark-coloured background */
+      dark: string;
+    }
+  | string
+  | undefined;
+
 /**
  * @public
  */
 export interface CompanyLogoProps {
-  logo?: string;
+  /** An object containing the logo URLs */
+  logo?: LogoURLs;
+  /** The route to link the logo to */
   to?: string;
+  /**
+   * The width of the logo in pixels (defaults to 150px). This prop fixes an
+   * issue where encoded SVGs without an explicit width would not render.
+   * You likely do not need to set this prop.
+   */
+  logoWidth?: number;
+  /** This prop is not used by this component. */
   layout?: CSSProperties;
 }
 
-export const CompanyLogo = ({ logo, to = '/' }: CompanyLogoProps) => {
+/**
+ * Gets a themed image based on the current theme.
+ */
+const useFullLogo = (logo: LogoURLs): string | undefined => {
+  const appBarBackgroundScheme = useAppBarBackgroundScheme();
+
   const configApi = useApi(configApiRef);
-  const logoFullBase64URI = configApi.getOptionalString(
-    'app.branding.fullLogo',
-  );
+
+  /** The fullLogo config specified by app.branding.fullLogo */
+  const fullLogo = configApi.getOptional<LogoURLs>('app.branding.fullLogo');
+
+  /** The URI of the logo specified by app.branding.fullLogo */
+  const fullLogoURI =
+    typeof fullLogo === 'string'
+      ? fullLogo
+      : fullLogo?.[appBarBackgroundScheme];
+
+  /** The URI of the logo specified by CompanyLogo props */
+  const propsLogoURI =
+    typeof logo === 'string' ? logo : logo?.[appBarBackgroundScheme];
+
+  return propsLogoURI ?? fullLogoURI ?? undefined;
+};
+
+export const CompanyLogo = ({
+  logo,
+  logoWidth,
+  to = '/',
+}: CompanyLogoProps) => {
+  const logoURL = useFullLogo(logo);
+
   return (
     <Box
       sx={{
@@ -76,8 +129,9 @@ export const CompanyLogo = ({ logo, to = '/' }: CompanyLogoProps) => {
         }}
       >
         <LogoRender
-          base64Logo={logo ?? logoFullBase64URI}
+          base64Logo={logoURL}
           defaultLogo={<DefaultLogo />}
+          width={logoWidth}
         />
       </Link>
     </Box>