quine-global-labs/mirror-cockpit-project-cockpit
1
0
Fork 0
mirror of https://github.com/cockpit-project/cockpit.git synced 2026-11-03 21:49:50 -09:00
Code Issues Projects Releases Packages Wiki Activity

pkg: Change to variable font

Browse source 
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
This commit is contained in:
Freya Gustavsson 2025-03-26 12:59:57 +01:00 committed by Martin Pitt
parent 92e4db565a
commit 7cab667c1b
11 changed files with 55 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
files.js
View file

@ -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;

38
pkg/lib/patternfly/_fonts.scss
View file

@ -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");

16
pkg/lib/patternfly/patternfly-6-cockpit.scss
View file

@ -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";

5
pkg/lib/patternfly/patternfly-6-overrides.scss
View file

@ -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 {

8
pkg/networkmanager/networking.scss
View file

@ -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);
}
}

2
pkg/packagekit/updates.scss
View file

@ -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 {

9
pkg/shell/nav.scss
View file

@ -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 */

3
pkg/storaged/storage.scss
View file

@ -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;

4
pkg/systemd/overview-cards/lastLogin.scss
View file

@ -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 {

2
pkg/systemd/services.scss
View file

@ -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);
}
}

2
test/reference

@ -1 +1 @@
Subproject commit 17839ffe1816f379f798b688061507b7beb8e84c
Subproject commit c18a1004349590e86d20d64a24204e879cdfe366