fix(theme): fix font loading after migrating theme

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

workspaces/theme/.changeset/nine-taxis-beam.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-theme': patch
+---
+
+fix font loading after migrating theme

workspaces/theme/.gitignore

@@ -34,6 +34,7 @@ node_modules/
 # Build output
 dist
 dist-types
+plugins/*/*.tgz
 
 # Temporary change files created by Vim
 *.swp

workspaces/theme/Makefile

@@ -0,0 +1,57 @@
+# This variables defines the showcase and dynamic-plugins-root paths.
+#
+# The default expects that you have this redhat-developer/rhdh-plugins
+# repo and janus-idp/backstage-showcase repo side by side incl. the
+# org structure.
+#
+# If you don't have the org structure locally you can override this
+# with make arguments like this:
+#
+#   make showcase=../../../backstage-showcase <command like copy>
+#
+# Or use an absolute path:
+#
+#   make showcase=~/git/backstage-showcase <command like copy>
+showcase=../../../../janus-idp/backstage-showcase
+
+# The dynamic-plugins-root has two more ../.. because it's relative
+# to the plugins/* folders
+dproot=../../${showcase}/dynamic-plugins-root
+
+clean=true
+
+dev=true
+
+fix:
+	@echo
+	@echo fix and format theme workspace
+	@echo
+	yarn tsc:full
+	yarn build:api-reports:only
+
+add-to-showcase: add-theme-to-showcase add-tests-to-showcase
+
+add-theme-to-showcase:
+	@echo
+	@echo Will build and install theme plugin into ${showcase}
+	@echo
+	cd plugins/theme && yarn build && yarn pack
+	test plugins/theme/package.tgz
+	test -d "${showcase}/node_modules/@red-hat-developer-hub/backstage-plugin-theme"
+	tar -xzf plugins/theme/package.tgz -C "${showcase}/node_modules/@red-hat-developer-hub/backstage-plugin-theme" --strip-components=1
+
+add-tests-to-showcase:
+	@echo
+	@echo Will build and install test plugins into ${showcase}
+	@echo
+	cd plugins/bc-test && npx --yes @janus-idp/cli package export-dynamic-plugin --dynamic-plugins-root "${dproot}" --clean "${clean}" --dev "${dev}"
+	cd plugins/mui4-test && npx --yes @janus-idp/cli package export-dynamic-plugin --dynamic-plugins-root "${dproot}" --clean "${clean}" --dev "${dev}"
+	cd plugins/mui5-test && npx --yes @janus-idp/cli package export-dynamic-plugin --dynamic-plugins-root "${dproot}" --clean "${clean}" --dev "${dev}"
+
+remove-from-showcase:
+	@echo
+	@echo Remove theme and test plugins from ${showcase}
+	@echo
+	rm -rf "${dproot}/red-hat-developer-hub-backstage-plugin-bc-test"
+	rm -rf "${dproot}/red-hat-developer-hub-backstage-plugin-mui4-test"
+	rm -rf "${dproot}/red-hat-developer-hub-backstage-plugin-mui5-test"

workspaces/theme/plugins/theme/package.json

@@ -18,12 +18,9 @@
   "backstage": {
     "role": "web-library"
   },
-  "sideEffects": [
-    "./fonts/*.css"
-  ],
   "scripts": {
     "start": "backstage-cli package start",
-    "build": "backstage-cli package build && ./fix-style-inject-imports.sh",
+    "build": "backstage-cli package build",
     "lint": "backstage-cli package lint",
     "test": "backstage-cli package test",
     "clean": "backstage-cli package clean",
@@ -61,8 +58,7 @@
   "configSchema": "config.d.ts",
   "files": [
     "config.d.ts",
-    "dist",
-    "fonts"
+    "dist"
   ],
   "author": "Red Hat",
   "homepage": "https://red.ht/rhdh",

workspaces/theme/plugins/theme/src/fonts.tsx

@@ -0,0 +1,111 @@
+/*
+ * 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.
+ */
+import RedHatDisplay from './assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2';
+import RedHatDisplayItalic from './assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2';
+import RedHatText from './assets/fonts/RedHatText/RedHatTextVF.woff2';
+import RedHatTextItalic from './assets/fonts/RedHatText/RedHatTextVF-Italic.woff2';
+import RedHatMono from './assets/fonts/RedHatMono/RedHatMonoVF.woff2';
+import RedHatMonoItalic from './assets/fonts/RedHatMono/RedHatMonoVF-Italic.woff2';
+
+const RedHatDisplayFontFace = {
+  fontFamily: 'RedHatDisplay',
+  src: `url(${RedHatDisplay}) format('woff2-variations')`,
+  fontWeight: '300 900',
+  fontStyle: 'normal',
+  fontDisplay: 'fallback',
+};
+
+const RedHatDisplayItalicFontFace = {
+  fontFamily: 'RedHatDisplay',
+  src: `url(${RedHatDisplayItalic}) format('woff2-variations')`,
+  fontWeight: '300 900',
+  fontStyle: 'italic',
+  fontDisplay: 'fallback',
+};
+
+export const RedHatTextFontFace = {
+  fontFamily: 'RedHatText',
+  src: `url(${RedHatText}) format('woff2-variations')`,
+  fontWeight: '300 700',
+  fontStyle: 'normal',
+  fontDisplay: 'fallback',
+};
+
+const RedHatTextItalicFontFace = {
+  fontFamily: 'RedHatText',
+  src: `url(${RedHatTextItalic}) format('woff2-variations')`,
+  fontWeight: '300 700',
+  fontStyle: 'italic',
+  fontDisplay: 'fallback',
+};
+
+const RedHatMonoFontFace = {
+  fontFamily: 'RedHatMono',
+  src: `url(${RedHatMono}) format('woff2-variations')`,
+  fontWeight: '300 700',
+  fontStyle: 'normal',
+  fontDisplay: 'fallback',
+};
+
+const RedHatMonoItalicFontFace = {
+  fontFamily: 'RedHatMono',
+  src: `url(${RedHatMonoItalic}) format('woff2-variations')`,
+  fontWeight: '300 700',
+  fontStyle: 'italic',
+  fontDisplay: 'fallback',
+};
+
+export const redHatFontFaces = [
+  RedHatDisplayFontFace,
+  RedHatDisplayItalicFontFace,
+  RedHatTextFontFace,
+  RedHatTextItalicFontFace,
+  RedHatMonoFontFace,
+  RedHatMonoItalicFontFace,
+];
+
+export const redHatFonts = {
+  text: [
+    'RedHatText',
+    '"Helvetica Neue"',
+    '-apple-system',
+    '"Segoe UI"',
+    'Roboto',
+    'Helvetica',
+    'Arial',
+    'sans-serif',
+  ].join(', '),
+  heading: [
+    'RedHatDisplay',
+    '"Helvetica Neue"',
+    '-apple-system',
+    '"Segoe UI"',
+    'Roboto',
+    'Helvetica',
+    'Arial',
+    'sans-serif',
+  ].join(', '),
+  monospace: [
+    'RedHatMono',
+    '"Liberation Mono"',
+    'consolas',
+    '"SFMono-Regular"',
+    'menlo',
+    'monaco',
+    '"Courier New"',
+    'monospace',
+  ].join(', '),
+};

workspaces/theme/plugins/theme/src/rhdh.ts

@@ -13,13 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import '../fonts/font.css';
-
 import { ThemeConfig } from './types';
 import { customDarkTheme } from './darkTheme';
 import { customLightTheme } from './lightTheme';
-import { fonts, typography } from './typography';
+import { redHatFonts } from './fonts';
+import { typography } from './typography';
 
 export const getDefaultThemeConfig = (mode: 'light' | 'dark'): ThemeConfig => {
   const palette = mode === 'dark' ? customDarkTheme() : customLightTheme();
@@ -28,7 +26,7 @@ export const getDefaultThemeConfig = (mode: 'light' | 'dark'): ThemeConfig => {
     variant: 'rhdh',
     mode: mode === 'dark' ? 'dark' : 'light',
     palette,
-    fontFamily: fonts.text,
+    fontFamily: redHatFonts.text,
     typography,
     defaultPageTheme: 'default',
     pageTheme: {

workspaces/theme/plugins/theme/src/typography.ts

@@ -15,75 +15,44 @@
  */
 import { BackstageTypography } from '@backstage/theme';
 
-export const fonts = {
-  text: [
-    'RedHatText',
-    '"Helvetica Neue"',
-    '-apple-system',
-    '"Segoe UI"',
-    'Roboto',
-    'Helvetica',
-    'Arial',
-    'sans-serif',
-  ].join(', '),
-  heading: [
-    'RedHatDisplay',
-    '"Helvetica Neue"',
-    '-apple-system',
-    '"Segoe UI"',
-    'Roboto',
-    'Helvetica',
-    'Arial',
-    'sans-serif',
-  ].join(', '),
-  monospace: [
-    'RedHatMono',
-    '"Liberation Mono"',
-    'consolas',
-    '"SFMono-Regular"',
-    'menlo',
-    'monaco',
-    '"Courier New"',
-    'monospace',
-  ].join(', '),
-};
+import { redHatFonts } from './fonts';
 
 // Font sized based on https://www.patternfly.org/design-foundations/typography
 export const typography: BackstageTypography = {
   htmlFontSize: 16,
-  fontFamily: fonts.text,
+  fontFamily: redHatFonts.text,
   h1: {
-    fontFamily: fonts.heading,
+    fontFamily: redHatFonts.heading,
     fontSize: 36,
     fontWeight: 400,
     marginBottom: 10,
   },
   h2: {
-    fontFamily: fonts.heading,
+    fontFamily: redHatFonts.heading,
     fontSize: 28,
     fontWeight: 400,
     marginBottom: 8,
   },
   h3: {
-    fontFamily: fonts.heading,
+    fontFamily: redHatFonts.heading,
     fontSize: 24,
     fontWeight: 400,
     marginBottom: 6,
   },
   h4: {
-    fontFamily: fonts.heading,
+    fontFamily: redHatFonts.heading,
     fontSize: 20,
     fontWeight: 400,
     marginBottom: 6,
   },
   h5: {
-    fontFamily: fonts.heading,
+    fontFamily: redHatFonts.heading,
     fontSize: 18,
     fontWeight: 500,
     marginBottom: 4,
   },
   h6: {
-    fontFamily: fonts.heading,
+    fontFamily: redHatFonts.heading,
     fontSize: 16,
     fontWeight: 500,
     marginBottom: 2,

workspaces/theme/plugins/theme/src/utils/createComponents.ts

@@ -13,8 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { type UnifiedThemeOptions } from '@backstage/theme';
+import {
+  type UnifiedThemeOptions,
+  defaultComponentThemes as backstageComponents,
+} from '@backstage/theme';
+import { type CSSObject } from '@mui/material/styles';
+
 import { ThemeConfig, ThemeConfigOptions, RHDHThemePalette } from '../types';
+import { redHatFontFaces, redHatFonts } from '../fonts';
 
 export type Component = {
   defaultProps?: unknown;
@@ -58,6 +64,31 @@ export const createComponents = (themeConfig: ThemeConfig): Components => {
   //
   // MUI components
   //
+  components.MuiCssBaseline = {
+    styleOverrides: theme => {
+      const backstageOverrides =
+        backstageComponents!.MuiCssBaseline!.styleOverrides!;
+      const backstageStyles =
+        typeof backstageOverrides === 'function'
+          ? (backstageOverrides(theme) as CSSObject)
+          : (backstageOverrides as CSSObject);
+
+      return {
+        ...backstageStyles,
+        '@font-face': redHatFontFaces,
+        body: {
+          ...(backstageStyles.body as CSSObject),
+          fontFamily: redHatFonts.text,
+        },
+        'h1, h2, h3, h4, h5, h6': {
+          fontFamily: redHatFonts.heading,
+        },
+        'pre, code': {
+          fontFamily: redHatFonts.monospace,
+        },
+      };
+    },
+  };
 
   // MUI base
   if (options.buttons !== 'mui') {