feat(global-header): use new theme package (#759)

Author: logonoff

workspaces/global-header/.changeset/old-dots-sparkle.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-global-header': minor
+---
+
+**Breaking change**: Use new theme package. Global header items will now use the `theme.rhdh?.general.appBarForegroundColor` colour if defined, and fall back to `theme.palette.text.primary`. This may cause your global header to not look correct in light mode when using the legacy theme.

workspaces/global-header/packages/app/package.json

@@ -50,7 +50,7 @@
     "@mui/icons-material": "5.16.14",
     "@red-hat-developer-hub/backstage-plugin-global-header": "workspace:^",
     "@red-hat-developer-hub/backstage-plugin-global-header-test": "workspace:^",
-    "@redhat-developer/red-hat-developer-hub-theme": "^0.5.0",
+    "@red-hat-developer-hub/backstage-plugin-theme": "^0.8.1",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
     "react-router": "^6.3.0",

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

@@ -56,7 +56,7 @@ import { SignalsDisplay } from '@backstage/plugin-signals';
 import { NotificationsPage } from '@backstage/plugin-notifications';
 import { githubAuthApiRef } from '@backstage/core-plugin-api';
 
-import { getAllThemes } from '@redhat-developer/red-hat-developer-hub-theme';
+import { getAllThemes } from '@red-hat-developer-hub/backstage-plugin-theme';
 
 const app = createApp({
   apis,

workspaces/global-header/plugins/global-header/dev/index.tsx

@@ -36,7 +36,7 @@ import Button from '@mui/material/Button';
 import { ScalprumContext, ScalprumState } from '@scalprum/react-core';
 import { PluginStore } from '@openshift/dynamic-plugin-sdk';
 
-import { getAllThemes } from '@redhat-developer/red-hat-developer-hub-theme';
+import { getAllThemes } from '@red-hat-developer-hub/backstage-plugin-theme';
 
 import {
   GlobalHeader,

workspaces/global-header/plugins/global-header/package.json

@@ -67,7 +67,7 @@
     "@backstage/plugin-search-common": "^1.2.17",
     "@backstage/test-utils": "^1.7.5",
     "@openshift/dynamic-plugin-sdk": "^5.0.1",
-    "@redhat-developer/red-hat-developer-hub-theme": "^0.5.0",
+    "@red-hat-developer-hub/backstage-plugin-theme": "^0.8.1",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.0.0",

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

@@ -48,7 +48,14 @@ export const GlobalHeaderComponent = ({
 
   return (
     <AppBar position="sticky" component="nav" id="global-header">
-      <Toolbar sx={{ gap: 1 }}>
+      <Toolbar
+        sx={{
+          gap: 1,
+          color: theme =>
+            (theme as any).rhdh?.general.appBarForegroundColor ??
+            theme.palette.text.primary,
+        }}
+      >
         {mountPoints.map((mountPoint, index) => (
           <ErrorBoundary key={`header-component-${index}`}>
             <mountPoint.Component

workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/CreateDropdown.tsx

@@ -70,11 +70,7 @@ export const CreateDropdown = ({ layout }: CreateDropdownProps) => {
       buttonProps={{
         variant: 'outlined',
         sx: {
-          color: '#fff',
-          border: '1px solid rgba(255, 255, 255, 0.5)',
-          '&:hover, &.Mui-focusVisible': {
-            border: '1px solid #fff',
-          },
+          color: 'inherit',
           ...layout,
         },
       }}

workspaces/global-header/plugins/global-header/src/components/SearchComponent/SearchInput.tsx

@@ -41,13 +41,13 @@ export const SearchInput = ({
       disableUnderline: true,
       startAdornment: (
         <InputAdornment position="start">
-          <SearchIcon style={{ color: '#fff' }} />
+          <SearchIcon style={{ color: 'inherit' }} />
         </InputAdornment>
       ),
     }}
     sx={{
-      input: { color: '#fff' },
-      button: { color: '#fff' },
+      input: { color: 'inherit' },
+      button: { color: 'inherit' },
       '& fieldset': { border: 'none' },
     }}
   />

workspaces/global-header/yarn.lock

@@ -9601,6 +9601,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/icons-material@npm:^5.17.1":
+  version: 5.17.1
+  resolution: "@mui/icons-material@npm:5.17.1"
+  dependencies:
+    "@babel/runtime": ^7.23.9
+  peerDependencies:
+    "@mui/material": ^5.0.0
+    "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 015149e65add85ab0c669829fabf2cfb9c0a95e33a527716f05f8bdc48247a1f0db5e4c83406d70e22600f7c8e54c339a7237e5d8223b73caa724d7b87ce2b0a
+  languageName: node
+  linkType: hard
+
 "@mui/material@npm:5.16.14, @mui/material@npm:^5.12.2":
   version: 5.16.14
   resolution: "@mui/material@npm:5.16.14"
@@ -11389,7 +11405,7 @@ __metadata:
     "@mui/material": 5.16.14
     "@mui/styled-engine": 5.16.14
     "@openshift/dynamic-plugin-sdk": ^5.0.1
-    "@redhat-developer/red-hat-developer-hub-theme": ^0.5.0
+    "@red-hat-developer-hub/backstage-plugin-theme": ^0.8.1
     "@scalprum/react-core": 0.9.3
     "@testing-library/jest-dom": ^6.0.0
     "@testing-library/react": ^14.0.0
@@ -11404,18 +11420,19 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@redhat-developer/red-hat-developer-hub-theme@npm:^0.5.0":
-  version: 0.5.0
-  resolution: "@redhat-developer/red-hat-developer-hub-theme@npm:0.5.0"
+"@red-hat-developer-hub/backstage-plugin-theme@npm:^0.8.1":
+  version: 0.8.1
+  resolution: "@red-hat-developer-hub/backstage-plugin-theme@npm:0.8.1"
+  dependencies:
+    "@mui/icons-material": ^5.17.1
   peerDependencies:
-    "@backstage/theme": ^0.5.2
-    "@emotion/react": ^11.11.1
-    "@emotion/styled": ^11.11.0
-    "@material-ui/core": ^4.12.4
+    "@backstage/core-plugin-api": ^1.10.4
+    "@backstage/theme": ^0.6.4
     "@material-ui/icons": ^4.11.3
-    "@mui/icons-material": ^5.14.19
-    "@mui/material": ^5.14.20
-  checksum: 158667ac33e7b926fec2c7ed9d26c3bd81deafe8b0026316ab171e66dd2f3a36474225e42b7ac8527d0e357c1c11432fe767f0cd46b2cd86464e53e4c146a09c
+    "@mui/icons-material": ^5.17.1
+    "@mui/material": ^5.0.0
+    react: ^16.13.1 || ^17.0.0 || ^18.0.0
+  checksum: 0d492e2bc4deb69525687219fd30965bffff84a8a9521323c5b0000302957c1c9f58aa1096ca760a71de282fc36aba1029a8fdd1ce6d1eae33db74e199631a9f
   languageName: node
   linkType: hard
 
@@ -16354,7 +16371,7 @@ __metadata:
     "@playwright/test": 1.50.1
     "@red-hat-developer-hub/backstage-plugin-global-header": "workspace:^"
     "@red-hat-developer-hub/backstage-plugin-global-header-test": "workspace:^"
-    "@redhat-developer/red-hat-developer-hub-theme": ^0.5.0
+    "@red-hat-developer-hub/backstage-plugin-theme": ^0.8.1
     "@testing-library/dom": ^9.0.0
     "@testing-library/jest-dom": ^6.0.0
     "@testing-library/react": ^14.0.0