web/styles: switch to upstream RedHat variable fonts and brighten orange palette (#21509)

web/styles: drop modified RedHat fonts and brighten the orange palette

Swap the custom "Modified" RedHat variable fonts for the upstream
variable files (`RedHatDisplayVF.woff2`, `RedHatTextVF.woff2`, plus
italics). The Safari font stack was rendering artifacts on the
modified faces, and the upstream files render identically on the
engines where the modified copies used to be needed.

Also refresh the `--pf-global--palette--orange-*` ramp in
`base/colors.css` with a more saturated oklab curve. The old values
leaned muted and washed out against the new dialog backdrops; the
new values match the branding guide and have enough chroma to be
distinguishable from the tan/gold palette.
This commit is contained in:
Teffen Ellis
2026-04-10 17:13:23 +02:00
committed by GitHub
parent e4934681e9
commit 4a417ba904
10 changed files with 12 additions and 12 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@@ -1,6 +1,6 @@
@font-face {
font-family: "RedHatDisplay";
src: url("./RedHatDisplayVFModified.woff2") format("woff2-variations");
src: url("./RedHatDisplayVF.woff2") format("woff2-variations");
font-weight: 300 900;
font-style: normal;
font-display: fallback;
@@ -8,7 +8,7 @@
@font-face {
font-family: "RedHatDisplay";
src: url("./RedHatDisplayVF-ItalicModified.woff2") format("woff2-variations");
src: url("./RedHatDisplayVF-Italic.woff2") format("woff2-variations");
font-weight: 300 900;
font-style: italic;
font-display: fallback;
@@ -16,7 +16,7 @@
@font-face {
font-family: "RedHatText";
src: url("./RedHatTextVFModified.woff2") format("woff2-variations");
src: url("./RedHatTextVF.woff2") format("woff2-variations");
font-weight: 400 500;
font-style: normal;
font-display: fallback;
@@ -24,7 +24,7 @@
@font-face {
font-family: "RedHatText";
src: url("./RedHatTextVF-ItalicModified.woff2") format("woff2-variations");
src: url("./RedHatTextVF-Italic.woff2") format("woff2-variations");
font-weight: 400 500;
font-style: italic;
font-display: fallback;

View File

@@ -110,14 +110,14 @@
/* #region Orange */
:root {
--pf-global--palette--orange-50: oklab(0.9774 0.0055 0.0155);
--pf-global--palette--orange-100: oklab(0.8203 0.0444 0.097);
--pf-global--palette--orange-200: oklab(0.742 0.0735 0.1332);
--pf-global--palette--orange-300: oklab(0.6966 0.1001 0.1398);
--pf-global--palette--orange-400: oklab(0.6006 0.0915 0.1218);
--pf-global--palette--orange-500: oklab(0.4794 0.0692 0.0972);
--pf-global--palette--orange-600: oklab(0.4252 0.0555 0.0863);
--pf-global--palette--orange-700: oklab(0.2713 0.0269 0.0552);
--pf-global--palette--orange-50: oklab(0.977 0.005 0.015);
--pf-global--palette--orange-100: oklab(77.986% 0.109 0.063);
--pf-global--palette--orange-200: oklab(71.363% 0.145 0.092);
--pf-global--palette--orange-300: oklab(69.487% 0.163 0.1);
--pf-global--palette--orange-400: oklab(66.428% 0.185 0.116);
--pf-global--palette--orange-500: oklab(64.248% 0.203 0.125);
--pf-global--palette--orange-600: oklab(63.164% 0.209 0.126);
--pf-global--palette--orange-700: oklab(54.716% 0.179 0.109);
}
/* #endregion */