From eeb4dd2e095f21512151a2ebe7300cb7f6f13779 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Sun, 5 Jan 2025 09:46:01 +0200 Subject: [PATCH 1/3] chore: bump tokens package --- .changeset/spicy-balloons-attack.md | 5 +++++ package-lock.json | 8 ++++---- package.json | 2 +- 3 files changed, 10 insertions(+), 5 deletions(-) create mode 100644 .changeset/spicy-balloons-attack.md diff --git a/.changeset/spicy-balloons-attack.md b/.changeset/spicy-balloons-attack.md new file mode 100644 index 0000000000..dca6d2b93a --- /dev/null +++ b/.changeset/spicy-balloons-attack.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": patch +--- + +Bump version of `@rhds/tokens` diff --git a/package-lock.json b/package-lock.json index 4a9a7a842c..017d9f5c3a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@lit/context": "^1.1.3", "@patternfly/pfe-core": "^4.0.4", "@rhds/icons": "^1.1.2", - "@rhds/tokens": "^2.1.0", + "@rhds/tokens": "^2.1.1", "lit": "^3.2.1", "prism-esm": "^1.29.0-fix.6", "tslib": "^2.7.0", @@ -5047,9 +5047,9 @@ "license": "MIT" }, "node_modules/@rhds/tokens": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@rhds/tokens/-/tokens-2.1.0.tgz", - "integrity": "sha512-Lgjm1v9x2NB0UoyktA2vn3ijgXo5O3BiX5IQyTt1MpePSn2YWtUHtjSWyo+XmulPvPh/jfDdsoeN6VcZzzLuTA==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@rhds/tokens/-/tokens-2.1.1.tgz", + "integrity": "sha512-37xeoCniZvRgo2YCmA6VU/yhJ+79QIbRHZ87WPI6Rc2HWFdcZjpymFaEfa/LjXPqGU2DYN9G63VIogQ1FDujCQ==", "dependencies": { "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", "highlight.js": "^11.10.0", diff --git a/package.json b/package.json index bd28ce8079..03dd9a2191 100644 --- a/package.json +++ b/package.json @@ -288,7 +288,7 @@ "@lit/context": "^1.1.3", "@patternfly/pfe-core": "^4.0.4", "@rhds/icons": "^1.1.2", - "@rhds/tokens": "^2.1.0", + "@rhds/tokens": "^2.1.1", "lit": "^3.2.1", "prism-esm": "^1.29.0-fix.6", "tslib": "^2.7.0", From bd903da1fd75f9fd940f4d1fce927c7174425f9f Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Sun, 5 Jan 2025 09:47:41 +0200 Subject: [PATCH 2/3] style: use new font stack --- .changeset/rotten-peas-burn.md | 5 +++++ elements/rh-accordion/rh-accordion-header.css | 2 +- elements/rh-alert/rh-alert.css | 4 ++-- elements/rh-audio-player/rh-audio-player-about.css | 4 ++-- elements/rh-audio-player/rh-audio-player-lightdom.css | 6 +++--- elements/rh-audio-player/rh-audio-player-panel.css | 2 +- elements/rh-audio-player/rh-audio-player.css | 10 +++++----- elements/rh-audio-player/rh-cue.css | 2 +- elements/rh-avatar/rh-avatar.css | 4 ++-- elements/rh-blockquote/rh-blockquote.css | 6 +++--- elements/rh-card/rh-card.css | 10 +++++----- elements/rh-code-block/rh-code-block.css | 2 +- elements/rh-cta/rh-cta-lightdom-shim.css | 4 ++-- elements/rh-cta/rh-cta.css | 4 ++-- elements/rh-footer/rh-footer-block.css | 2 +- elements/rh-footer/rh-footer-lightdom.css | 2 +- elements/rh-footer/rh-footer.css | 4 ++-- .../rh-navigation-secondary-lightdom.css | 4 ++-- .../rh-navigation-secondary-menu-section.css | 2 +- .../rh-navigation-secondary.css | 2 +- elements/rh-pagination/rh-pagination-lightdom.css | 2 +- elements/rh-pagination/rh-pagination.css | 2 +- elements/rh-skip-link/rh-skip-link-lightdom-shim.css | 2 +- elements/rh-skip-link/rh-skip-link.css | 2 +- elements/rh-spinner/rh-spinner.css | 2 +- elements/rh-stat/rh-stat.css | 10 +++++----- elements/rh-table/rh-table-lightdom.css | 2 +- elements/rh-table/rh-table.css | 2 +- elements/rh-tag/rh-tag.css | 2 +- elements/rh-tile/rh-tile.css | 4 ++-- elements/rh-video-embed/rh-video-embed.css | 2 +- 31 files changed, 59 insertions(+), 54 deletions(-) create mode 100644 .changeset/rotten-peas-burn.md diff --git a/.changeset/rotten-peas-burn.md b/.changeset/rotten-peas-burn.md new file mode 100644 index 0000000000..ba7b5ce0b8 --- /dev/null +++ b/.changeset/rotten-peas-burn.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": patch +--- + +Use non-localized font stacks (see [`@rhds/tokens` v2.1.1 release notes](https://github.com/RedHat-UX/red-hat-design-tokens/releases/tag/v2.1.1)) diff --git a/elements/rh-accordion/rh-accordion-header.css b/elements/rh-accordion/rh-accordion-header.css index e43992dca9..6acc9ee174 100644 --- a/elements/rh-accordion/rh-accordion-header.css +++ b/elements/rh-accordion/rh-accordion-header.css @@ -66,7 +66,7 @@ span { var(--_padding-inline-end) var(--_padding-block-end) var(--_padding-inline-start); - font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif); font-size: var(--_font-size); color: var(--rh-color-text-primary); diff --git a/elements/rh-alert/rh-alert.css b/elements/rh-alert/rh-alert.css index 1e9d3642ab..357953bb4c 100644 --- a/elements/rh-alert/rh-alert.css +++ b/elements/rh-alert/rh-alert.css @@ -65,13 +65,13 @@ footer ::slotted(rh-button[variant='link' i]) { display: grid; grid-template-columns: min-content 1fr; gap: var(--rh-space-xs, 4px); - font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif); font-weight: var(--rh-font-weight-body-text-regular, 400); font-size: var(--rh-font-size-body-text-sm, 0.875rem); line-height: var(--rh-line-height-body-text, 1.5); & header ::slotted(*) { - font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif) !important; + font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif) !important; font-weight: var(--rh-font-weight-body-text-medium, 500) !important; font-size: var(--rh-font-size-body-text-sm, 0.875rem) !important; line-height: var(--rh-line-height-body-text, 1.5) !important; diff --git a/elements/rh-audio-player/rh-audio-player-about.css b/elements/rh-audio-player/rh-audio-player-about.css index 2cb8a97ea7..432a5b874b 100644 --- a/elements/rh-audio-player/rh-audio-player-about.css +++ b/elements/rh-audio-player/rh-audio-player-about.css @@ -15,7 +15,7 @@ font-size: var(--rh-font-size-body-text-xs, 0.75rem); line-height: var(--rh-line-height-body-text, 1.5); height: 18px; - font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif); font-weight: var(--rh-font-weight-body-text-medium, 500); margin: 0 0 var(--rh-space-md, 8px); } @@ -26,7 +26,7 @@ #mediatitle > * { font-size: var(--rh-font-size-heading-xs, 1.25rem); - font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif); font-weight: var(--rh-font-weight-heading-medium, 500); line-height: var(--rh-line-height-heading, 1.3); margin: 0 0 var(--rh-space-lg, 16px); diff --git a/elements/rh-audio-player/rh-audio-player-lightdom.css b/elements/rh-audio-player/rh-audio-player-lightdom.css index 0e29078898..7a90de921b 100644 --- a/elements/rh-audio-player/rh-audio-player-lightdom.css +++ b/elements/rh-audio-player/rh-audio-player-lightdom.css @@ -6,7 +6,7 @@ rh-audio-player { line-height: var(--rh-line-height-body-text, 1.5); font-weight: var(--rh-font-weight-body-text-regular, 400); font-size: var(--rh-font-size-code-md, 1rem); - font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif); color: var(--rh-audio-player-text-color, var(--rh-color-text-primary)); } @@ -16,7 +16,7 @@ rh-audio-player:not([expanded]) rh-transcript:not(:defined) { rh-cue[start]:not(:defined):before, rh-cue[voice]:not(:defined):before { - font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif); font-size: var(--rh-font-size-body-text-md, 1rem); font-weight: var(--rh-font-weight-heading-bold, 700); } @@ -68,7 +68,7 @@ rh-audio-player > [slot='series'] { rh-audio-player > [slot='title'], rh-audio-player [slot='heading'] { font-size: var(--rh-font-size-heading-xs, 1.25rem); - font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif); font-weight: var(--rh-font-weight-heading-medium, 500); line-height: var(--rh-line-height-heading, 1.3); margin: 0 0 var(--rh-space-lg, 16px); diff --git a/elements/rh-audio-player/rh-audio-player-panel.css b/elements/rh-audio-player/rh-audio-player-panel.css index f898e65262..9bbe9561ff 100644 --- a/elements/rh-audio-player/rh-audio-player-panel.css +++ b/elements/rh-audio-player/rh-audio-player-panel.css @@ -22,7 +22,7 @@ slot[name='heading'] *, slot[name='heading'] *, ::slotted([slot='heading']), ::slotted([slot='title']) { - font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif); font-size: var(--rh-font-size-heading-xs, 1.25rem); font-weight: var(--rh-font-weight-heading-medium, 500); line-height: var(--rh-line-height-heading, 1.3); diff --git a/elements/rh-audio-player/rh-audio-player.css b/elements/rh-audio-player/rh-audio-player.css index 70878fcd54..795344dea0 100644 --- a/elements/rh-audio-player/rh-audio-player.css +++ b/elements/rh-audio-player/rh-audio-player.css @@ -2,7 +2,7 @@ line-height: var(--rh-line-height-body-text, 1.5); font-weight: var(--rh-font-weight-body-text-regular, 400); font-size: var(--rh-font-size-code-md, 1rem); - font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif); } [hidden] { @@ -141,7 +141,7 @@ svg.scrubber { ::slotted([slot='title']) { font-size: var(--rh-font-size-body-text-xl, 1.25rem) !important; - font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif) !important; + font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif) !important; font-weight: var(--rh-font-weight-heading-medium, 500) !important; line-height: var(--rh-line-height-heading, 1.3) !important; margin: 0 0 var(--rh-space-lg, 16px) !important; @@ -149,7 +149,7 @@ svg.scrubber { } #mediatitle { - font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif); font-size: var(--rh-font-size-heading-xs, 1.25rem); font-weight: var(--rh-font-weight-heading-medium, 500); height: 26px; @@ -161,7 +161,7 @@ svg.scrubber { height: 18px; line-height: 1; font-weight: var(--rh-font-weight-body-text-regular, 400); - font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif); letter-spacing: var(--rh-letter-spacing-body-text, 0.0125rem); margin: 0 0 var(--rh-space-md, 8px); color: var(--_secondary-text-color); @@ -425,7 +425,7 @@ rh-menu > button { background-color: var(--_static-overlay-color); font-size: var(--rh-font-size-body-text-md, 1rem); line-height: var(--rh-line-height-body-text, 1.5); - font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif); } rh-menu > button:hover { diff --git a/elements/rh-audio-player/rh-cue.css b/elements/rh-audio-player/rh-cue.css index dff047005d..929087d9a4 100644 --- a/elements/rh-audio-player/rh-cue.css +++ b/elements/rh-audio-player/rh-cue.css @@ -51,7 +51,7 @@ h6 { } #voice { - font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif); } #start { diff --git a/elements/rh-avatar/rh-avatar.css b/elements/rh-avatar/rh-avatar.css index ec547bedc8..34067d8cdd 100644 --- a/elements/rh-avatar/rh-avatar.css +++ b/elements/rh-avatar/rh-avatar.css @@ -31,7 +31,7 @@ #title { grid-area: t; align-self: end; - font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif); font-weight: var(--rh-font-weight-heading-medium, 500); font-size: var(--rh-font-size-body-text-sm, 0.875rem); } @@ -39,7 +39,7 @@ #subtitle { grid-area: s; align-self: start; - font-weight: var(--rh-font-weight-heading-regular, 300); + font-weight: var(--rh-font-weight-heading-regular, 400); font-size: var(--rh-font-size-body-text-sm, 0.875rem); } diff --git a/elements/rh-blockquote/rh-blockquote.css b/elements/rh-blockquote/rh-blockquote.css index 7a93352e12..ff8ab98f09 100644 --- a/elements/rh-blockquote/rh-blockquote.css +++ b/elements/rh-blockquote/rh-blockquote.css @@ -3,9 +3,9 @@ margin: 0 auto; text-align: left; font-size: var(--rh-font-size-body-text-lg, 1.125rem); - font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif); line-height: var(--rh-line-height-body-text, 1.5); - font-weight: var(--rh-font-weight-heading-regular, 300); + font-weight: var(--rh-font-weight-heading-regular, 400); } @media (min-width: 700px) { @@ -25,7 +25,7 @@ blockquote ::slotted(p) { figcaption { color: var(--rh-color-text-secondary); - font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif); font-size: var(--rh-font-size-body-text-sm, 0.875rem); } diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css index 2707dfb2ee..17bc90902a 100644 --- a/elements/rh-card/rh-card.css +++ b/elements/rh-card/rh-card.css @@ -32,7 +32,7 @@ justify-items: flex-start; overflow: hidden; border-radius: var(--_border-radius, var(--rh-border-width-lg, 3px)); - font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif) !important; + font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif) !important; line-height: var(--rh-line-height-body-text, 1.5); border-style: solid; border-width: var(--rh-border-width-sm, 1px); @@ -83,7 +83,7 @@ #header ::slotted(:is(h1, h2, h3, h4, h5, h6)), #body ::slotted(:is(h1, h2, h3, h4, h5, h6)) { - font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif); } #image ::slotted(*) { @@ -96,7 +96,7 @@ flex-direction: column; gap: var(--rh-space-lg, 16px); box-sizing: border-box; - font-family: var(--rh-card-heading-font-family, var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif)) !important; + font-family: var(--rh-card-heading-font-family, var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif)) !important; font-size: var(--rh-card-heading-font-size, var(--rh-font-size-heading-sm, 1.5rem)); font-weight: var(--rh-card-heading-font-weight, @@ -209,7 +209,7 @@ } .promo #header ::slotted(*) { - font-family: var(--rh-card-heading-font-family, var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif)) !important; + font-family: var(--rh-card-heading-font-family, var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif)) !important; font-size: var(--_promo-heading-size) !important; font-weight: var(--_promo-heading-font-weight) !important; margin-block: 0 var(--_promo-heading-margin-block-end) !important; @@ -235,7 +235,7 @@ } .promo.standard #body ::slotted(:not([slot])) { - font-family: var(--rh-card-heading-font-family, var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif)) !important; + font-family: var(--rh-card-heading-font-family, var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif)) !important; font-size: var(--rh-font-size-body-text-xl, 1.25rem) !important; font-weight: var(--rh-font-weight-body-text-medium, 500); line-height: var(--rh-line-height-heading, 1.3) !important; diff --git a/elements/rh-code-block/rh-code-block.css b/elements/rh-code-block/rh-code-block.css index 9127775359..a2bebe8a16 100644 --- a/elements/rh-code-block/rh-code-block.css +++ b/elements/rh-code-block/rh-code-block.css @@ -204,7 +204,7 @@ inset-block-end: var(--_code-secondary-spacer); margin-block: var(--_code-secondary-spacer); color: var(--rh-color-text-primary); - font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif); font-size: var(--rh-font-size-body-text-sm, 0.875rem); font-weight: var(--rh-font-weight-body-text-regular, 400); line-height: var(--rh-line-height-body-text, 1.5); diff --git a/elements/rh-cta/rh-cta-lightdom-shim.css b/elements/rh-cta/rh-cta-lightdom-shim.css index a0f400ceca..cc206f4139 100644 --- a/elements/rh-cta/rh-cta-lightdom-shim.css +++ b/elements/rh-cta/rh-cta-lightdom-shim.css @@ -2,7 +2,7 @@ rh-cta:not(:defined) { width: fit-content !important; display: inline-flex !important; color: var(--rh-cta-color); - font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif); font-size: var(--rh-font-size-body-text-lg, 1.125rem); font-weight: 600; /* WARNING: not a token value */ line-height: var(--rh-line-height-body-text, 1.5); @@ -133,7 +133,7 @@ rh-cta[variant='secondary'][color-palette^='dark']:not(:defined) { rh-cta[variant='brick']:not(:defined) { border-style: solid; - font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif); font-weight: var(--rh-font-weight-body-text-regular, 400); --rh-cta-background-color: transparent; diff --git a/elements/rh-cta/rh-cta.css b/elements/rh-cta/rh-cta.css index 298917e68c..3130f14c66 100644 --- a/elements/rh-cta/rh-cta.css +++ b/elements/rh-cta/rh-cta.css @@ -46,7 +46,7 @@ a:after, position: relative; white-space: nowrap; color: var(--_color); - font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif); font-size: var(--rh-font-size-body-text-lg, 1.125rem); font-weight: 600; /* WARNING: not a token value */ line-height: var(--rh-line-height-body-text, 1.5); @@ -368,7 +368,7 @@ a:focus-within, & #container { border-style: solid; - font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif); font-weight: var(--rh-font-weight-body-text-regular, 400); display: flex; flex-flow: row wrap; diff --git a/elements/rh-footer/rh-footer-block.css b/elements/rh-footer/rh-footer-block.css index 256edf8b2b..b60325d8fa 100644 --- a/elements/rh-footer/rh-footer-block.css +++ b/elements/rh-footer/rh-footer-block.css @@ -35,6 +35,6 @@ .content ::slotted(*) { color: var(--rh-color-text-secondary-on-dark, #c7c7c7); - font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif); font-weight: var(--rh-font-weight-body-text-regular, 400); } diff --git a/elements/rh-footer/rh-footer-lightdom.css b/elements/rh-footer/rh-footer-lightdom.css index bdee8d3875..918d806bb0 100644 --- a/elements/rh-footer/rh-footer-lightdom.css +++ b/elements/rh-footer/rh-footer-lightdom.css @@ -31,7 +31,7 @@ } :is(rh-footer, rh-footer-universal) :is(h1, h2, h3, h4, h5, h6) { - font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif); line-height: var(--rh-line-height-heading, 1.3); } diff --git a/elements/rh-footer/rh-footer.css b/elements/rh-footer/rh-footer.css index 5e364d2811..f61661104f 100644 --- a/elements/rh-footer/rh-footer.css +++ b/elements/rh-footer/rh-footer.css @@ -1,7 +1,7 @@ :host { /* apply sensible defaults based on redhat standards. */ color: var(--rh-color-white, #ffffff); - font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif); line-height: var(--rh-line-height-body-text, 1.5); font-weight: var(--_font-weight); font-size: initial; @@ -26,7 +26,7 @@ footer, } ::slotted(:is(h1,h2,h3,h4,h5,h6)) { - font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif) !important; + font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif) !important; line-height: var(--rh-line-height-heading, 1.3) !important; } diff --git a/elements/rh-navigation-secondary/rh-navigation-secondary-lightdom.css b/elements/rh-navigation-secondary/rh-navigation-secondary-lightdom.css index 2b1903b745..2333e3e5c5 100644 --- a/elements/rh-navigation-secondary/rh-navigation-secondary-lightdom.css +++ b/elements/rh-navigation-secondary/rh-navigation-secondary-lightdom.css @@ -13,7 +13,7 @@ rh-navigation-secondary { box-shadow: var(--rh-box-shadow-sm, 0 2px 4px 0 rgba(21, 21, 21, 0.2)); height: var(--_max-height); min-height: var(--_min-height); - font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif); } rh-navigation-secondary:not(:defined) { @@ -64,7 +64,7 @@ rh-navigation-secondary > [slot='logo'] { font-size: var(--rh-font-size-body-text-md, 1rem); letter-spacing: 0.01125em; margin-inline-start: var(--rh-space-lg, 16px); - font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif); font-weight: var(--rh-font-weight-heading-medium, 500); padding-block: var(--rh-space-lg, 16px); border-block-start: var(--rh-border-width-lg, 3px) solid transparent; diff --git a/elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.css b/elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.css index 730ea6c217..26912c199d 100644 --- a/elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.css +++ b/elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.css @@ -7,7 +7,7 @@ } ::slotted(:is(h1,h2,h3,h4,h5,h6)) { - font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif); } ::slotted([slot='links']:is(ul, ol)) { diff --git a/elements/rh-navigation-secondary/rh-navigation-secondary.css b/elements/rh-navigation-secondary/rh-navigation-secondary.css index 034d906e45..1c4d3fae0d 100644 --- a/elements/rh-navigation-secondary/rh-navigation-secondary.css +++ b/elements/rh-navigation-secondary/rh-navigation-secondary.css @@ -103,7 +103,7 @@ button { display: flex; height: 100%; align-items: center; - font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif); font-size: var(--rh-font-size-body-text-md, 1rem); padding: var(--rh-space-lg, 16px); border-block-start: var(--rh-border-width-lg, 3px) solid transparent; diff --git a/elements/rh-pagination/rh-pagination-lightdom.css b/elements/rh-pagination/rh-pagination-lightdom.css index 9172465520..90740c573e 100644 --- a/elements/rh-pagination/rh-pagination-lightdom.css +++ b/elements/rh-pagination/rh-pagination-lightdom.css @@ -20,7 +20,7 @@ rh-pagination li > a { border: var(--rh-border-width-sm, 1px) solid transparent; color: var(--_list-a-text-color); display: grid; - font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif); font-size: var(--rh-font-size-body-text-xl, 1.25rem); height: var(--_link-size); place-content: center; diff --git a/elements/rh-pagination/rh-pagination.css b/elements/rh-pagination/rh-pagination.css index fc65997365..b8b8d532d5 100644 --- a/elements/rh-pagination/rh-pagination.css +++ b/elements/rh-pagination/rh-pagination.css @@ -110,7 +110,7 @@ svg { border: var(--rh-border-width-sm, 1px) solid transparent; color: var(--rh-pagination-stepper-color, var(--rh-color-gray-50, #707070)); display: grid; - font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif); font-size: var(--rh-font-size-heading-xs, 1.25rem); height: var(--_stepper-size); place-content: center; diff --git a/elements/rh-skip-link/rh-skip-link-lightdom-shim.css b/elements/rh-skip-link/rh-skip-link-lightdom-shim.css index 07bfe509d2..e1e2814a17 100644 --- a/elements/rh-skip-link/rh-skip-link-lightdom-shim.css +++ b/elements/rh-skip-link/rh-skip-link-lightdom-shim.css @@ -22,7 +22,7 @@ rh-skip-link:not(:defined) > a { border-end-end-radius: var(--rh-border-radius-default, 3px); clip: rect(0, 0, 0, 0); color: var(--rh-color-interactive-primary-default-on-light, #0066cc); - font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif); font-size: var(--rh-font-size-body-text-md, 1rem); font-weight: var(--rh-font-weight-heading-bold, 700); height: 1px; diff --git a/elements/rh-skip-link/rh-skip-link.css b/elements/rh-skip-link/rh-skip-link.css index 45e13d208e..3ee369e22a 100644 --- a/elements/rh-skip-link/rh-skip-link.css +++ b/elements/rh-skip-link/rh-skip-link.css @@ -31,7 +31,7 @@ a, border-end-end-radius: var(--rh-border-radius-default, 3px) !important; clip: rect(0, 0, 0, 0) !important; color: var(--rh-color-interactive-primary-default-on-light, #0066cc) !important; - font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif) !important; + font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif) !important; font-size: var(--rh-font-size-body-text-md, 1rem) !important; font-weight: var(--rh-font-weight-heading-bold, 700) !important; height: 1px !important; diff --git a/elements/rh-spinner/rh-spinner.css b/elements/rh-spinner/rh-spinner.css index 7d4a0c85ad..f543ff74d3 100644 --- a/elements/rh-spinner/rh-spinner.css +++ b/elements/rh-spinner/rh-spinner.css @@ -10,7 +10,7 @@ } ::slotted(p) { - font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif); font-weight: var(--rh-font-weight-body-text-regular, 400); line-height: var(--rh-line-height-body-text, 1.5); } diff --git a/elements/rh-stat/rh-stat.css b/elements/rh-stat/rh-stat.css index 317f140586..5fcc48f72a 100644 --- a/elements/rh-stat/rh-stat.css +++ b/elements/rh-stat/rh-stat.css @@ -63,7 +63,7 @@ span, order: 1; color: var(--_accent-color); font-size: var(--rh-font-size-body-text-xl, 1.25rem); - font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif); font-weight: var(--rh-font-weight-body-text-regular, 400); text-transform: uppercase; } @@ -72,21 +72,21 @@ span, order: 2; color: var(--_accent-color); font-size: var(--rh-font-size-heading-lg, 2.25rem); - font-weight: var(--rh-font-weight-heading-regular, 300); - font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-weight: var(--rh-font-weight-heading-regular, 400); + font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif); } #content { order: 3; font-size: var(--rh-font-size-body-text-lg, 1.125rem); - font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif); margin-top: var(--rh-space-sm, 6px); } #cta { order: 4; font-size: var(--rh-font-size-body-text-lg, 1.125rem); - font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif); margin-top: var(--rh-space-lg, 16px); } diff --git a/elements/rh-table/rh-table-lightdom.css b/elements/rh-table/rh-table-lightdom.css index 088078147b..c3ab1c1be8 100644 --- a/elements/rh-table/rh-table-lightdom.css +++ b/elements/rh-table/rh-table-lightdom.css @@ -57,7 +57,7 @@ rh-table { } & caption { - font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif); font-size: var(--rh-font-size-body-text-lg, 1.125rem); font-weight: var(--rh-font-weight-heading-bold, 700); line-height: var(--rh-line-height-body-text, 1.5); diff --git a/elements/rh-table/rh-table.css b/elements/rh-table/rh-table.css index 0b079e412b..d66e951eee 100644 --- a/elements/rh-table/rh-table.css +++ b/elements/rh-table/rh-table.css @@ -58,7 +58,7 @@ display: block; padding: var(--rh-space-xl, 24px) var(--rh-space-lg, 16px) 0 var(--rh-space-lg, 16px); color: var(--rh-color-text-secondary-on-light, #4d4d4d); - font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif); font-size: var(--rh-font-size-body-text-md, 1rem); font-style: italic; font-weight: var(--rh-font-weight-body-text-regular, 400); diff --git a/elements/rh-tag/rh-tag.css b/elements/rh-tag/rh-tag.css index 5db122794c..30533c0545 100644 --- a/elements/rh-tag/rh-tag.css +++ b/elements/rh-tag/rh-tag.css @@ -13,7 +13,7 @@ a { var(--rh-tag-padding-block-end, var(--rh-space-xs, 4px)) var(--rh-tag-padding-inline-start, var(--rh-space-md, 8px)); gap: var(--rh-space-xs, 4px); - font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif); font-weight: var(--rh-font-weight-body-text-regular, 400); font-size: var(--rh-font-size-body-text-sm, 0.875rem); line-height: var(--rh-line-height-body-text, 1.5); diff --git a/elements/rh-tile/rh-tile.css b/elements/rh-tile/rh-tile.css index 59282ecaeb..1c59c6e251 100644 --- a/elements/rh-tile/rh-tile.css +++ b/elements/rh-tile/rh-tile.css @@ -1,7 +1,7 @@ :host { - font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif); font-size: var(--rh-font-size-body-text-md, 1rem); - font-weight: var(--rh-font-weight-heading-regular, 300); + font-weight: var(--rh-font-weight-heading-regular, 400); line-height: var(--rh-line-height-body-text, 1.5); } diff --git a/elements/rh-video-embed/rh-video-embed.css b/elements/rh-video-embed/rh-video-embed.css index 250546088b..c77f323723 100644 --- a/elements/rh-video-embed/rh-video-embed.css +++ b/elements/rh-video-embed/rh-video-embed.css @@ -91,7 +91,7 @@ figcaption ::slotted(p) { #consent-message, ::slotted([slot='consent-message']) { - font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif); font-size: var(--rh-font-size-heading-xs, 1.25rem); line-height: var(--rh-line-height-heading, 1.3); } From e576af5056d5aaa9171f68acb1c5a005c5efd804 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 8 Jan 2025 09:45:48 +0200 Subject: [PATCH 3/3] docs: remove fallbacks from demos Global styles are loaded in those documents --- docs/foundations/typography/index.md | 2 +- docs/get-started/index.md | 6 +++--- elements/rh-card/demo/color-context.html | 18 +++++++++--------- elements/rh-card/demo/sticky-pattern.html | 8 ++++---- elements/rh-card/demo/title-pattern.html | 8 ++++---- elements/rh-card/demo/variants.html | 16 ++++++++-------- 6 files changed, 29 insertions(+), 29 deletions(-) diff --git a/docs/foundations/typography/index.md b/docs/foundations/typography/index.md index 77707e6bcd..4f2c6abcc3 100644 --- a/docs/foundations/typography/index.md +++ b/docs/foundations/typography/index.md @@ -71,7 +71,7 @@ accommodate mixed-language content. For more technical details, go to the | Language | Font family | -|----------|------------------------------| +| -------- | ---------------------------- | | Chinese | Noto Sans Simplified Chinese | | Japanese | Noto Sans Japanese | | Korean | Noto Sans Korean | diff --git a/docs/get-started/index.md b/docs/get-started/index.md index c35489034a..cfcc77ac58 100644 --- a/docs/get-started/index.md +++ b/docs/get-started/index.md @@ -12,12 +12,12 @@ importElements: diff --git a/elements/rh-card/demo/color-context.html b/elements/rh-card/demo/color-context.html index 15b6cb0a11..f7a56ae253 100644 --- a/elements/rh-card/demo/color-context.html +++ b/elements/rh-card/demo/color-context.html @@ -71,14 +71,14 @@

Custom header

rh-context-demo::part(demo) { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); - gap: var(--rh-space-lg, 16px); + gap: var(--rh-space-lg); } rh-card { &.full { &::part(header) { margin: 0; } & :is(h1, h2, h3, h4, h5, h6)[slot="header"] { - padding-inline: var(--rh-space-xl, 24px); + padding-inline: var(--rh-space-xl); } & img { display: block; @@ -87,16 +87,16 @@

Custom header

} } &.bar { - --rh-card-header-background-on-light: var(--rh-color-surface-light, #e0e0e0); - --rh-card-header-background-on-dark: var(--rh-color-surface-dark, #383838); + --rh-card-header-background-on-light: var(--rh-color-surface-light); + --rh-card-header-background-on-dark: var(--rh-color-surface-dark); &::part(header) { margin: 0; - padding: var(--rh-space-lg, 16px) var(--rh-space-2xl, 32px); + padding: var(--rh-space-lg) var(--rh-space-2xl); flex-direction: row; - gap: var(--rh-space-lg, 16px); - font-weight: var(--rh-font-weight-heading-regular, 300); - font-size: var(--rh-font-size-body-text-md, 1rem); - font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + gap: var(--rh-space-lg); + font-weight: var(--rh-font-weight-heading-regular); + font-size: var(--rh-font-size-body-text-md); + font-family: var(--rh-font-family-body-text); text-transform: uppercase; /* deprecated? */ } } diff --git a/elements/rh-card/demo/sticky-pattern.html b/elements/rh-card/demo/sticky-pattern.html index 0a35a74894..e5135d274f 100644 --- a/elements/rh-card/demo/sticky-pattern.html +++ b/elements/rh-card/demo/sticky-pattern.html @@ -25,16 +25,16 @@

Heading, xs