chore: tokens 2.1.1 (#2106)

* chore: bump tokens package * style: use new font stack * docs: remove fallbacks from demos Global styles are loaded in those documents
RedHat-UX · Jan 15, 2025 · 8d51411 · 8d51411
1 parent 0287ce1
commit 8d51411
Show file tree

Hide file tree

Showing 40 changed files with 98 additions and 88 deletions.
diff --git a/.changeset/rotten-peas-burn.md 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/.changeset/spicy-balloons-attack.md b/.changeset/spicy-balloons-attack.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+Bump version of `@rhds/tokens`
diff --git 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
 <rh-table>
 
 | 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
@@ -14,12 +14,12 @@ tags:
 
 <style data-helmet>
   #get-started-nav {
-    margin-block-start: var(--rh-space-2xl, 32px);
+    margin-block-start: var(--rh-space-2xl);
   }
 
   #get-started-nav figcaption {
-    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-size: var(--rh-font-size-heading-sm, 1.5rem);
+    font-family: var(--rh-font-family-heading);
+    font-size: var(--rh-font-size-heading-sm);
   }
 </style>
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,15 +141,15 @@ 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;
   padding: 0 !important;
 }
 
 #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
@@ -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
@@ -31,15 +31,15 @@
 #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);
 }
 
 #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
@@ -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/demo/color-context.html b/elements/rh-card/demo/color-context.html
@@ -71,14 +71,14 @@ <h2 slot="header">Custom header</h2>
   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 @@ <h2 slot="header">Custom header</h2>
       }
     }
     &.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
@@ -25,16 +25,16 @@ <h2 slot="header">Heading, xs</h2>
 <style>
   #card-pattern-sticky {
     display: grid;
-    gap: var(--rh-space-md, 16px);
+    gap: var(--rh-space-md);
     grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
     & rh-card {
       &::part(header) {
-        gap: var(--rh-space-xl, 24px);
+        gap: var(--rh-space-xl);
         flex-flow: column;
       }
       & .title {
-        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-size: var(--rh-font-size-body-text-md, 1rem);
+        font-family: var(--rh-font-family-body-text);
+        font-size: var(--rh-font-size-body-text-md);
         text-transform: uppercase;
       }
       & > p {

diff --git a/elements/rh-card/demo/title-pattern.html b/elements/rh-card/demo/title-pattern.html
@@ -61,13 +61,13 @@ <h2 slot="header">Title, lg</h2>
       }
       & h2 {
         text-transform: uppercase;
-        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-size: var(--rh-font-size-body-text-md, 1rem);
-        font-weight: var(--rh-font-weight-body-text-regular, 400);
+        font-family: var(--rh-font-family-body-text);
+        font-size: var(--rh-font-size-body-text-md);
+        font-weight: var(--rh-font-weight-body-text-regular);
       }
       & svg {
         align-self: center;
-        margin-block-end: var(--rh-space-2xl, 32px);
+        margin-block-end: var(--rh-space-2xl);
       }
     }
   }

diff --git a/elements/rh-card/demo/variants.html b/elements/rh-card/demo/variants.html
@@ -145,20 +145,20 @@ <h2>Card with slotted image header. Full width image.</h2>
   }
 
   rh-card.bar {
-    --rh-card-heading-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);
-    --rh-card-heading-font-weight: var(--rh-font-weight-body-text-regular, 400);
-    --rh-card-heading-font-size: var(--rh-font-size-body-text-md, 1rem);
+    --rh-card-heading-font-family: var(--rh-font-family-body-text);
+    --rh-card-heading-font-weight: var(--rh-font-weight-body-text-regular);
+    --rh-card-heading-font-size: var(--rh-font-size-body-text-md);
     &::part(header) {
       margin: 0;
-      padding: var(--rh-space-lg, 16px) var(--rh-space-xl, 24px);
-      background-color: var(--_header-bg, var(--rh-color-surface-light, #e0e0e0));
+      padding: var(--rh-space-lg) var(--rh-space-xl);
+      background-color: var(--_header-bg, var(--rh-color-surface-light));
       text-transform: uppercase;
     }
   }
 
   rh-card.image {
-    --rh-card-heading-font-weight: var(--rh-font-weight-heading-medium, 500);
-    --rh-card-heading-font-size: var(--rh-font-size-heading-md, 1.75rem);
+    --rh-card-heading-font-weight: var(--rh-font-weight-heading-medium);
+    --rh-card-heading-font-size: var(--rh-font-size-heading-md);
     &::part(header) {
       margin: 0;
     }
@@ -172,7 +172,7 @@ <h2>Card with slotted image header. Full width image.</h2>
     &.heading {
       & h2 {
         margin-block-start: 0;
-        margin-block-end: var(--rh-space-lg, 16px);
+        margin-block-end: var(--rh-space-lg);
       }
     }
   }