From 7cab667c1bb3db6173026817e5372654dd10a9af Mon Sep 17 00:00:00 2001 From: Freya Gustavsson Date: Wed, 26 Mar 2025 12:59:57 +0100 Subject: [PATCH] pkg: Change to variable font This changes our default font to Red Hat VF as has been the default in Patternfly v5 and now also in v6. Should make all the font-weight stuff a lot better as it is a variable font and not a typical font that has fixed font widths. Relates-to: #21651 --- files.js | 38 ++++++++++++++++++- pkg/lib/patternfly/_fonts.scss | 38 ------------------- pkg/lib/patternfly/patternfly-6-cockpit.scss | 16 ++++---- .../patternfly/patternfly-6-overrides.scss | 5 --- pkg/networkmanager/networking.scss | 8 +--- pkg/packagekit/updates.scss | 2 +- pkg/shell/nav.scss | 9 +---- pkg/storaged/storage.scss | 3 +- pkg/systemd/overview-cards/lastLogin.scss | 4 +- pkg/systemd/services.scss | 2 +- test/reference | 2 +- 11 files changed, 55 insertions(+), 72 deletions(-) delete mode 100644 pkg/lib/patternfly/_fonts.scss diff --git a/files.js b/files.js index c7a2d830af..c076e7d85a 100644 --- a/files.js +++ b/files.js @@ -151,6 +151,15 @@ const nodedir = path.relative(process.cwd(), path.resolve(srcdir, "node_modules" export const all_subdirs = Array.from(new Set(info.entries.map(key => key.split('/')[0]))); +// This are the fonts we used up until migrating to Patternfly v6 +// It is kept here to make sure all dependencies of the fonts works like in +// third-party plugins etc. + +// With the PF6 migration we now want to use Variable Fonts (VF) to ensure better +// Patternfly visuals, and we will use a new directory structure to avoid hardcoding +// @font-face. +// +// This copies all non-VF Red Hat fonts to our `static/fonts/` directory. const redhat_fonts = [ "Text-Bold", "Text-BoldItalic", "Text-Italic", "Text-Medium", "Text-MediumItalic", "Text-Regular", "Display-Black", "Display-BlackItalic", "Display-Bold", "Display-BoldItalic", @@ -166,6 +175,33 @@ const redhat_fonts = [ }; }); +// Different directory structure than our redhat_fonts, which makes it easier +// to use the Patternfly default src and avoid hardcoding our own @font-face. +// +// This copies all variable fonts (VF in the name) to subdirectories: +// static/fonts/ +// ├── RedHatDisplay +// │ └── RedHatDisplayVF.woff2 +// ├── RedHatMono +// │ ├── RedHatMonoVF-Italic.woff2 +// │ └── RedHatMonoVF.woff2 +// ├── RedHatText +// │ ├── RedHatTextVF-Italic.woff2 +// │ └── RedHatTextVF.woff2 +const redhat_fonts_variable_font = [ + "Text", + "Display", + "Mono", +].map(name => { + const subdir = 'RedHat' + name; + const fontsdir = '@patternfly/patternfly/assets/fonts'; + + return { + from: path.resolve(nodedir, fontsdir, subdir) + '/**/*VF*.woff2', + to: `static/fonts/${subdir}` + }; +}); + const pkgfile = suffix => `${srcdir}/pkg/${suffix}`; export const getFiles = subdir => { /* Qualify all the paths in entries */ @@ -193,7 +229,7 @@ export const getFiles = subdir => { }); } - return ({ entryPoints, assetFiles: files, redhat_fonts }); + return ({ entryPoints, assetFiles: files, redhat_fonts: redhat_fonts.concat(redhat_fonts_variable_font) }); }; export const getTestFiles = () => info.tests; diff --git a/pkg/lib/patternfly/_fonts.scss b/pkg/lib/patternfly/_fonts.scss deleted file mode 100644 index 841eee74dc..0000000000 --- a/pkg/lib/patternfly/_fonts.scss +++ /dev/null @@ -1,38 +0,0 @@ -@mixin printRedHatFont( - $weightValue: 400, - $weightName: "Regular", - $familyName: "RedHatText", - $style: "normal", - $relative: true -) { - $filePath: "../../static/fonts" + "/" + $familyName + "-" + $weightName; - - @font-face { - font-family: $familyName; - src: url("#{$filePath}.woff2") format("woff2"); - font-style: #{$style}; - font-weight: $weightValue; - text-rendering: optimizelegibility; - } -} - -@include printRedHatFont(700, "Bold", $familyName: "RedHatDisplay"); -@include printRedHatFont(700, "BoldItalic", $style: "italic", $familyName: "RedHatDisplay"); -@include printRedHatFont(900, "Black", $familyName: "RedHatDisplay"); -@include printRedHatFont(900, "BlackItalic", $style: "italic", $familyName: "RedHatDisplay"); -@include printRedHatFont(300, "Italic", $style: "italic", $familyName: "RedHatDisplay"); -@include printRedHatFont(400, "Medium", $familyName: "RedHatDisplay"); -@include printRedHatFont(400, "MediumItalic", $style: "italic", $familyName: "RedHatDisplay"); -@include printRedHatFont(300, "Regular", $familyName: "RedHatDisplay"); -@include printRedHatFont(700, "Bold"); -@include printRedHatFont(700, "BoldItalic", $style: "italic"); -@include printRedHatFont(400, "Italic", $style: "italic"); -@include printRedHatFont(700, "Medium"); -@include printRedHatFont(700, "MediumItalic", $style: "italic"); -@include printRedHatFont(400, "Regular"); -@include printRedHatFont(700, "Bold", $familyName: "RedHatMono"); -@include printRedHatFont(700, "BoldItalic", $style: "italic", $familyName: "RedHatMono"); -@include printRedHatFont(400, "Italic", $style: "italic", $familyName: "RedHatMono"); -@include printRedHatFont(500, "Medium", $familyName: "RedHatMono"); -@include printRedHatFont(500, "MediumItalic", $style: "italic", $familyName: "RedHatMono"); -@include printRedHatFont(400, "Regular", $familyName: "RedHatMono"); diff --git a/pkg/lib/patternfly/patternfly-6-cockpit.scss b/pkg/lib/patternfly/patternfly-6-cockpit.scss index eab6b791ed..ffe42e9a86 100644 --- a/pkg/lib/patternfly/patternfly-6-cockpit.scss +++ b/pkg/lib/patternfly/patternfly-6-cockpit.scss @@ -1,10 +1,10 @@ -/* Set fake font and icon path variables */ -$pf-v6-global--font-path: "patternfly-fonts-fake-path"; -$pf-v6-global--fonticon-path: "patternfly-icons-fake-path"; +// Disable fontawesome $pf-v6-global--disable-fontawesome: true !default; // Disable Font Awesome 5 Free -@use "@patternfly/patternfly/patternfly-base.scss"; - -// REVIEW @Venefilyn: Is this still true? -/* Import our own fonts since the PF4 font-face rules are filtered out in build.js */ -@use "./fonts"; +@forward "@patternfly/patternfly/sass-utilities" with ( + // We use a different font directory so lets use that instead + $pf-v6-global--font-path: "../../static/fonts", + // Set fake icon path variables + $pf-v6-global--fonticon-path: "patternfly-icons-fake-path" +); +@forward "@patternfly/patternfly/base"; diff --git a/pkg/lib/patternfly/patternfly-6-overrides.scss b/pkg/lib/patternfly/patternfly-6-overrides.scss index 25d4757e76..b130af726d 100644 --- a/pkg/lib/patternfly/patternfly-6-overrides.scss +++ b/pkg/lib/patternfly/patternfly-6-overrides.scss @@ -103,11 +103,6 @@ to wrap around when there isn't enough space. > hr { border-block-start: none; } - - // FIXME @tmatus description list term is not bold when using the default value - .pf-v6-c-description-list__term { - font-weight: var(--pf-t--global--font--weight--400); - } } .pf-v6-c-modal-box.pf-m-align-top { diff --git a/pkg/networkmanager/networking.scss b/pkg/networkmanager/networking.scss index d5c5e03c1c..77fdeb7882 100644 --- a/pkg/networkmanager/networking.scss +++ b/pkg/networkmanager/networking.scss @@ -24,10 +24,6 @@ #network-interface { @at-root { - #network-interface-name { - font-weight: var(--pf-t--global--font--weight--400); - } - .network-interface-status > span { overflow-wrap: anywhere; } @@ -87,8 +83,6 @@ th { #networking-interfaces, #networking-unmanaged-interfaces { th > .pf-m-link { - font-weight: var(--pf-t--global--font--weight--400); - // Preserve the same baseline as other elements, so items align display: inline; // Expand the link to the container, for easier clickability @@ -218,7 +212,7 @@ th { block-size: 100%; .ct-table tbody tr:first-of-type td:nth-child(2) { - font-weight: var(--pf-t--global--font--weight--400); + font-weight: var(--pf-t--global--font--weight--heading--bold); } } diff --git a/pkg/packagekit/updates.scss b/pkg/packagekit/updates.scss index ac40f5b8ed..5ec9a4113a 100644 --- a/pkg/packagekit/updates.scss +++ b/pkg/packagekit/updates.scss @@ -49,7 +49,7 @@ // Make header's content bold .pf-v6-c-table tr:nth-child(1) td:nth-child(2) { - font-weight: var(--pf-t--global--font--weight--heading); + font-weight: var(--pf-t--global--font--weight--body--bold); } .ct-table tr { diff --git a/pkg/shell/nav.scss b/pkg/shell/nav.scss index f8c8f79f2c..5b4052af13 100644 --- a/pkg/shell/nav.scss +++ b/pkg/shell/nav.scss @@ -27,7 +27,7 @@ $desktop: $phone + 1px; } mark { - font-weight: bold; + font-weight: var(--pf-t--global--font--weight--body--bold); background: var(--ct-color-nav-highlight); color: var(--ct-color-nav-highlight-text); } @@ -310,7 +310,7 @@ $desktop: $phone + 1px; .hostname { display: block; - font-weight: 600; + font-weight: var(--pf-t--global--font--weight--heading--bold); overflow: hidden; text-overflow: ellipsis; } @@ -638,11 +638,6 @@ $desktop: $phone + 1px; } } -.pf-v6-c-nav__section-title { - /* FIXME: Font seems different, so weight needs to be adjusted meanwhile */ - --pf-v6-c-nav__section-title--FontWeight: 600; -} - .view-hosts .sidebar-hosts, .nav-system-menu { /* FIXME: We need to change the widgets to PF6 ones; instead of CSS to fake it */ diff --git a/pkg/storaged/storage.scss b/pkg/storaged/storage.scss index d0b5da9d18..ad19d1b406 100644 --- a/pkg/storaged/storage.scss +++ b/pkg/storaged/storage.scss @@ -55,7 +55,8 @@ } } - th {font-weight: bold; + th { + font-weight: var(--pf-t--global--font--weight--body--bold); text-align: start; color: var(--pf-t--global--text--color--regular); padding-block: 0.75em; diff --git a/pkg/systemd/overview-cards/lastLogin.scss b/pkg/systemd/overview-cards/lastLogin.scss index 8bb66f83e8..475a85677f 100644 --- a/pkg/systemd/overview-cards/lastLogin.scss +++ b/pkg/systemd/overview-cards/lastLogin.scss @@ -7,7 +7,7 @@ .system-information-failed-login-warning { color: var(--pf-t--chart--global--warning--color--200); - font-weight: bold; + font-weight: var(--pf-t--global--font--weight--body--bold); } .system-information-failed-login-danger-icon { @@ -16,7 +16,7 @@ .system-information-failed-login-danger { color: var(--pf-t--global--color--status--danger--200); - font-weight: bold; + font-weight: var(--pf-t--global--font--weight--body--bold); } .system-information-last-login-icon { diff --git a/pkg/systemd/services.scss b/pkg/systemd/services.scss index 3668fbaadb..fb96c2e8bb 100644 --- a/pkg/systemd/services.scss +++ b/pkg/systemd/services.scss @@ -58,7 +58,7 @@ grid-gap: var(--pf-t--global--spacer--sm); .service-unit-description { - font-weight: bold; + font-weight: var(--pf-t--global--font--weight--body--bold); } } diff --git a/test/reference b/test/reference index 17839ffe18..c18a100434 160000 --- a/test/reference +++ b/test/reference @@ -1 +1 @@ -Subproject commit 17839ffe1816f379f798b688061507b7beb8e84c +Subproject commit c18a1004349590e86d20d64a24204e879cdfe366