From 40b6c6f9436c1117169392dc00395f9d707b566b Mon Sep 17 00:00:00 2001 From: Christoph Jerolimov Date: Mon, 16 Dec 2024 16:48:55 +0100 Subject: [PATCH] fix(theme): fix font loading after migrating theme Signed-off-by: Christoph Jerolimov --- .../theme/.changeset/nine-taxis-beam.md | 5 + workspaces/theme/.gitignore | 1 + workspaces/theme/Makefile | 57 +++++++++ .../plugins/theme/fix-style-inject-imports.sh | 20 ---- workspaces/theme/plugins/theme/package.json | 8 +- .../{ => src/assets}/fonts/OPEN-FONT-LICENSE | 0 .../theme/{ => src/assets}/fonts/README.md | 0 .../RedHatDisplay/RedHatDisplay-Black.woff2 | Bin .../RedHatDisplay-BlackItalic.woff2 | Bin .../RedHatDisplay/RedHatDisplay-Bold.woff2 | Bin .../RedHatDisplay-BoldItalic.woff2 | Bin .../RedHatDisplay/RedHatDisplay-Italic.woff2 | Bin .../RedHatDisplay/RedHatDisplay-Light.woff2 | Bin .../RedHatDisplay-LightItalic.woff2 | Bin .../RedHatDisplay/RedHatDisplay-Medium.woff2 | Bin .../RedHatDisplay-MediumItalic.woff2 | Bin .../RedHatDisplay/RedHatDisplay-Regular.woff2 | Bin .../RedHatDisplayVF-Italic.woff2 | Bin .../fonts/RedHatDisplay/RedHatDisplayVF.woff2 | Bin .../fonts/RedHatMono/RedHatMono-Bold.woff2 | Bin .../RedHatMono/RedHatMono-BoldItalic.woff2 | Bin .../fonts/RedHatMono/RedHatMono-Italic.woff2 | Bin .../fonts/RedHatMono/RedHatMono-Light.woff2 | Bin .../RedHatMono/RedHatMono-LightItalic.woff2 | Bin .../fonts/RedHatMono/RedHatMono-Medium.woff2 | Bin .../RedHatMono/RedHatMono-MediumItalic.woff2 | Bin .../fonts/RedHatMono/RedHatMono-Regular.woff2 | Bin .../RedHatMono/RedHatMonoVF-Italic.woff2 | Bin .../fonts/RedHatMono/RedHatMonoVF.woff2 | Bin .../fonts/RedHatText/RedHatText-Bold.woff2 | Bin .../RedHatText/RedHatText-BoldItalic.woff2 | Bin .../fonts/RedHatText/RedHatText-Italic.woff2 | Bin .../fonts/RedHatText/RedHatText-Light.woff2 | Bin .../RedHatText/RedHatText-LightItalic.woff2 | Bin .../fonts/RedHatText/RedHatText-Medium.woff2 | Bin .../RedHatText/RedHatText-MediumItalic.woff2 | Bin .../fonts/RedHatText/RedHatText-Regular.woff2 | Bin .../RedHatText/RedHatTextVF-Italic.woff2 | Bin .../fonts/RedHatText/RedHatTextVF.woff2 | Bin .../theme/{ => src/assets}/fonts/font.css | 0 .../theme/{ => src/assets}/fonts/font.min.css | 0 .../theme/{ => src/assets}/fonts/index.html | 0 workspaces/theme/plugins/theme/src/fonts.tsx | 111 ++++++++++++++++++ workspaces/theme/plugins/theme/src/rhdh.ts | 8 +- .../theme/plugins/theme/src/typography.ts | 47 ++------ .../theme/src/utils/createComponents.ts | 33 +++++- 46 files changed, 219 insertions(+), 71 deletions(-) create mode 100644 workspaces/theme/.changeset/nine-taxis-beam.md create mode 100644 workspaces/theme/Makefile delete mode 100755 workspaces/theme/plugins/theme/fix-style-inject-imports.sh rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/OPEN-FONT-LICENSE (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/README.md (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatDisplay/RedHatDisplay-Black.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatDisplay/RedHatDisplay-Bold.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatDisplay/RedHatDisplay-Italic.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatDisplay/RedHatDisplay-Light.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatDisplay/RedHatDisplay-LightItalic.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatDisplay/RedHatDisplay-Medium.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatDisplay/RedHatDisplay-Regular.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatDisplay/RedHatDisplayVF.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatMono/RedHatMono-Bold.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatMono/RedHatMono-BoldItalic.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatMono/RedHatMono-Italic.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatMono/RedHatMono-Light.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatMono/RedHatMono-LightItalic.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatMono/RedHatMono-Medium.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatMono/RedHatMono-MediumItalic.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatMono/RedHatMono-Regular.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatMono/RedHatMonoVF-Italic.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatMono/RedHatMonoVF.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatText/RedHatText-Bold.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatText/RedHatText-BoldItalic.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatText/RedHatText-Italic.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatText/RedHatText-Light.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatText/RedHatText-LightItalic.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatText/RedHatText-Medium.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatText/RedHatText-MediumItalic.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatText/RedHatText-Regular.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatText/RedHatTextVF-Italic.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/RedHatText/RedHatTextVF.woff2 (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/font.css (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/font.min.css (100%) rename workspaces/theme/plugins/theme/{ => src/assets}/fonts/index.html (100%) create mode 100644 workspaces/theme/plugins/theme/src/fonts.tsx diff --git a/workspaces/theme/.changeset/nine-taxis-beam.md b/workspaces/theme/.changeset/nine-taxis-beam.md new file mode 100644 index 000000000..5190f0672 --- /dev/null +++ b/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 diff --git a/workspaces/theme/.gitignore b/workspaces/theme/.gitignore index 77ad56d12..481df3c76 100644 --- a/workspaces/theme/.gitignore +++ b/workspaces/theme/.gitignore @@ -34,6 +34,7 @@ node_modules/ # Build output dist dist-types +plugins/*/*.tgz # Temporary change files created by Vim *.swp diff --git a/workspaces/theme/Makefile b/workspaces/theme/Makefile new file mode 100644 index 000000000..890ce9e6b --- /dev/null +++ b/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 +# +# Or use an absolute path: +# +# make showcase=~/git/backstage-showcase +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" diff --git a/workspaces/theme/plugins/theme/fix-style-inject-imports.sh b/workspaces/theme/plugins/theme/fix-style-inject-imports.sh deleted file mode 100755 index 06003adcc..000000000 --- a/workspaces/theme/plugins/theme/fix-style-inject-imports.sh +++ /dev/null @@ -1,20 +0,0 @@ -#!/bin/sh -# 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. - -glob='*.css.esm.js' -replace="import styleInject from '\.\.\/\.\.\/\.\.\/node_modules\/style-inject\/dist\/style-inject\.es\.esm\.js';" -with="import styleInject from 'style-inject';" - -find dist -name "$glob" -exec sed -i "s/$replace/$with/" {} \; diff --git a/workspaces/theme/plugins/theme/package.json b/workspaces/theme/plugins/theme/package.json index 8d9668e2f..7f06bd58d 100644 --- a/workspaces/theme/plugins/theme/package.json +++ b/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", diff --git a/workspaces/theme/plugins/theme/fonts/OPEN-FONT-LICENSE b/workspaces/theme/plugins/theme/src/assets/fonts/OPEN-FONT-LICENSE similarity index 100% rename from workspaces/theme/plugins/theme/fonts/OPEN-FONT-LICENSE rename to workspaces/theme/plugins/theme/src/assets/fonts/OPEN-FONT-LICENSE diff --git a/workspaces/theme/plugins/theme/fonts/README.md b/workspaces/theme/plugins/theme/src/assets/fonts/README.md similarity index 100% rename from workspaces/theme/plugins/theme/fonts/README.md rename to workspaces/theme/plugins/theme/src/assets/fonts/README.md diff --git a/workspaces/theme/plugins/theme/fonts/RedHatDisplay/RedHatDisplay-Black.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatDisplay/RedHatDisplay-Black.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatDisplay/RedHatDisplay-Bold.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatDisplay/RedHatDisplay-Bold.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatDisplay/RedHatDisplay-Italic.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatDisplay/RedHatDisplay-Italic.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatDisplay/RedHatDisplay-Light.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatDisplay/RedHatDisplay-Light.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatDisplay/RedHatDisplay-Light.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatDisplay/RedHatDisplay-Light.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatDisplay/RedHatDisplay-LightItalic.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatDisplay/RedHatDisplay-LightItalic.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatDisplay/RedHatDisplay-LightItalic.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatDisplay/RedHatDisplay-LightItalic.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatDisplay/RedHatDisplay-Medium.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatDisplay/RedHatDisplay-Medium.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatDisplay/RedHatDisplay-Regular.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatDisplay/RedHatDisplay-Regular.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatDisplay/RedHatDisplayVF.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatDisplay/RedHatDisplayVF.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatMono/RedHatMono-Bold.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatMono/RedHatMono-Bold.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatMono/RedHatMono-Bold.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatMono/RedHatMono-Bold.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatMono/RedHatMono-BoldItalic.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatMono/RedHatMono-BoldItalic.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatMono/RedHatMono-BoldItalic.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatMono/RedHatMono-BoldItalic.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatMono/RedHatMono-Italic.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatMono/RedHatMono-Italic.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatMono/RedHatMono-Italic.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatMono/RedHatMono-Italic.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatMono/RedHatMono-Light.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatMono/RedHatMono-Light.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatMono/RedHatMono-Light.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatMono/RedHatMono-Light.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatMono/RedHatMono-LightItalic.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatMono/RedHatMono-LightItalic.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatMono/RedHatMono-LightItalic.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatMono/RedHatMono-LightItalic.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatMono/RedHatMono-Medium.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatMono/RedHatMono-Medium.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatMono/RedHatMono-Medium.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatMono/RedHatMono-Medium.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatMono/RedHatMono-MediumItalic.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatMono/RedHatMono-MediumItalic.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatMono/RedHatMono-MediumItalic.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatMono/RedHatMono-MediumItalic.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatMono/RedHatMono-Regular.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatMono/RedHatMono-Regular.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatMono/RedHatMono-Regular.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatMono/RedHatMono-Regular.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatMono/RedHatMonoVF-Italic.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatMono/RedHatMonoVF-Italic.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatMono/RedHatMonoVF-Italic.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatMono/RedHatMonoVF-Italic.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatMono/RedHatMonoVF.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatMono/RedHatMonoVF.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatMono/RedHatMonoVF.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatMono/RedHatMonoVF.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatText/RedHatText-Bold.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatText/RedHatText-Bold.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatText/RedHatText-Bold.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatText/RedHatText-Bold.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatText/RedHatText-BoldItalic.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatText/RedHatText-BoldItalic.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatText/RedHatText-BoldItalic.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatText/RedHatText-BoldItalic.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatText/RedHatText-Italic.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatText/RedHatText-Italic.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatText/RedHatText-Italic.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatText/RedHatText-Italic.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatText/RedHatText-Light.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatText/RedHatText-Light.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatText/RedHatText-Light.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatText/RedHatText-Light.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatText/RedHatText-LightItalic.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatText/RedHatText-LightItalic.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatText/RedHatText-LightItalic.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatText/RedHatText-LightItalic.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatText/RedHatText-Medium.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatText/RedHatText-Medium.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatText/RedHatText-Medium.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatText/RedHatText-Medium.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatText/RedHatText-MediumItalic.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatText/RedHatText-MediumItalic.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatText/RedHatText-MediumItalic.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatText/RedHatText-MediumItalic.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatText/RedHatText-Regular.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatText/RedHatText-Regular.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatText/RedHatText-Regular.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatText/RedHatText-Regular.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatText/RedHatTextVF-Italic.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatText/RedHatTextVF-Italic.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatText/RedHatTextVF-Italic.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatText/RedHatTextVF-Italic.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/RedHatText/RedHatTextVF.woff2 b/workspaces/theme/plugins/theme/src/assets/fonts/RedHatText/RedHatTextVF.woff2 similarity index 100% rename from workspaces/theme/plugins/theme/fonts/RedHatText/RedHatTextVF.woff2 rename to workspaces/theme/plugins/theme/src/assets/fonts/RedHatText/RedHatTextVF.woff2 diff --git a/workspaces/theme/plugins/theme/fonts/font.css b/workspaces/theme/plugins/theme/src/assets/fonts/font.css similarity index 100% rename from workspaces/theme/plugins/theme/fonts/font.css rename to workspaces/theme/plugins/theme/src/assets/fonts/font.css diff --git a/workspaces/theme/plugins/theme/fonts/font.min.css b/workspaces/theme/plugins/theme/src/assets/fonts/font.min.css similarity index 100% rename from workspaces/theme/plugins/theme/fonts/font.min.css rename to workspaces/theme/plugins/theme/src/assets/fonts/font.min.css diff --git a/workspaces/theme/plugins/theme/fonts/index.html b/workspaces/theme/plugins/theme/src/assets/fonts/index.html similarity index 100% rename from workspaces/theme/plugins/theme/fonts/index.html rename to workspaces/theme/plugins/theme/src/assets/fonts/index.html diff --git a/workspaces/theme/plugins/theme/src/fonts.tsx b/workspaces/theme/plugins/theme/src/fonts.tsx new file mode 100644 index 000000000..eb0f4eff3 --- /dev/null +++ b/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(', '), +}; diff --git a/workspaces/theme/plugins/theme/src/rhdh.ts b/workspaces/theme/plugins/theme/src/rhdh.ts index 25c6ea1d5..14529af8d 100644 --- a/workspaces/theme/plugins/theme/src/rhdh.ts +++ b/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: { diff --git a/workspaces/theme/plugins/theme/src/typography.ts b/workspaces/theme/plugins/theme/src/typography.ts index 42dd634ad..cfa9da168 100644 --- a/workspaces/theme/plugins/theme/src/typography.ts +++ b/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, diff --git a/workspaces/theme/plugins/theme/src/utils/createComponents.ts b/workspaces/theme/plugins/theme/src/utils/createComponents.ts index 7c85de81d..c68602608 100644 --- a/workspaces/theme/plugins/theme/src/utils/createComponents.ts +++ b/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') {