Merge branch 'main' into docs/dark-mode

.changeset/lazy-ants-cough.md

@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-accordion>`: restore missing hover colors

.changeset/purple-drinks-double.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-accordion>`: corrected accordion header text font weight

docs/elements/index.njk

@@ -24,6 +24,14 @@ summaries:
   rh-tile h3 {
     margin: 0 !important;
   }
+  rh-tile p {
+    margin-block: 0 0 !important;
+  }
+  uxdot-example {
+    height: 216px;
+    display: flex;
+    justify-content: center;
+  }
 </style>
 
 {# NOTE: all images in this view need to be 340 by 200 px in order to maintain same ratio. #}
@@ -49,7 +57,7 @@ summaries:
       {%- set summary = summaries[slug] -%}
     {% endif %}
     {% if not hiddenComponent %}
-      <rh-tile compact bleed {% if comingSoon %}disabled{% endif %}>
+      <rh-tile id="tile-{{ tagName }}" compact bleed {% if comingSoon %}disabled{% endif %}>
         <uxdot-example slot="image" no-border transparent><img src="{{ doc.screenshotPath }}" alt="{{ title }}"></uxdot-example>
         <h3 slot="headline"><a href="{{ doc.overviewHref | url }}">{{ title }}</a></h3>
         <p>{{ summary }}</p>
@@ -62,7 +70,7 @@ summaries:
 
 <section aria-labelledby="aria__heading-make-a-request">
   <h2 id="aria__heading-make-a-request">Make a request</h2>
-  To request a new element or if updates need to be made to an existing element, <a href="https://github.com/RedHat-UX/red-hat-design-system/issues/new/choose" target="_blank">create a GitHub issue</a>.
+  <p>To request a new element or if updates need to be made to an existing element, <a href="https://github.com/RedHat-UX/red-hat-design-system/issues/new/choose">create a GitHub issue</a> or <a href="/support">contact us</a>.</p>
 </section>
 
 <uxdot-feedback>

docs/patterns/card/guidelines.md

@@ -9,56 +9,41 @@ tags:
 subnav:
   collection: cardPatterns
   order: 2
-importElements:
-  - rh-card
-  - rh-cta
-  - rh-surface
-  - rh-avatar
-  - rh-accordion
 ---
 
 <script type="module" data-helmet>
+  import '@rhds/elements/rh-accordion/rh-accordion.js';
+  import '@rhds/elements/rh-avatar/rh-avatar.js';
+  import '@rhds/elements/rh-card/rh-card.js';
+  import '@rhds/elements/rh-cta/rh-cta.js';
+  import '@rhds/elements/rh-surface/rh-surface.js';
   import '@rhds/elements/lib/elements/rh-context-picker/rh-context-picker.js';
 </script>
 
-<link rel="stylesheet" data-helmet href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">
-<link rel="stylesheet" data-helmet href="/styles/samp.css">
+<link rel="stylesheet"
+      data-helmet
+      href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">
 
+<link rel="stylesheet"
+      data-helmet
+      href="/styles/samp.css">
 
 ## Usage
 
 ### Character count
-The recommended maximum character count for the elements of a card are listed below and include spaces.
+
+The recommended maximum character count for the elements of a card are listed 
+below and include spaces.
 
 <rh-table>
-  <table>
-    <thead>
-      <tr>
-        <th scope="col" data-label="Element">Element</th>
-        <th scope="col" data-label="Character count">Character count</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td data-label="Element">Title</td>
-        <td data-label="Character count">20</td>
-      </tr>
-      <tr>
-        <td data-label="Element">Headline</td>
-        <td data-label="Character count">50</td>
-      </tr>
-      <tr>
-        <td data-label="Element">Body text</td>
-        <td data-label="Character count">165</td>
-      </tr>
-      <tr>
-        <td data-label="Element">Footer</td>
-        <td data-label="Character count">55</td>
-      </tr>
-    </tbody>
-  </table>
-</rh-table>
 
+  Element     Character count
+  ----------- -----------------
+  Title       20
+  Headline    50
+  Body text   165
+  Footer      55
 
+</rh-table>
 
 {% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %}

docs/tokens/index.md

@@ -10,11 +10,12 @@ tokenSearch: true
 
 <script type="module" data-helmet>
   import '@rhds/elements/rh-tile/rh-tile.js';
+  import '@rhds/elements/rh-card/rh-card.js';
   import '@rhds/elements/rh-code-block/rh-code-block.js';
 </script>
 
 <style data-helmet>
-.page-overvie .container .grid {
+  .page-overvie .container .grid {
     margin-block: var(--rh-space--2xl, 32px);
   }
 
@@ -26,6 +27,10 @@ tokenSearch: true
   rh-tile [slot="image"] {
      margin-block: 0 !important;
   }
+
+  rh-card {
+    height: auto;
+  }
 </style>
 
 ## Introduction
@@ -49,6 +54,34 @@ To install design tokens, please visit our dedicated repo for instructions.
 
 <rh-cta href="https://github.com/redhat-ux/red-hat-design-tokens">Install our design tokens</rh-cta>
 
+## Types of tokens
+
+<div id="token-types" class="grid xs-two-columns sm-three-columns">
+  <rh-card>
+    <h3 slot="header">Global tokens</h3>
+    <p>Global tokens represent the foundations of our design language and should
+    have context-agnostic names. These can be used and are inherited by other
+    token types.</p>
+    <p>Example:<br><code>--rh-brand-red-500</code></p>
+  </rh-card>
+
+  <rh-card>
+    <h3 slot="header">Semantic tokens</h3>
+    <p>Semantic tokens represent context or abstraction. They communicate the purpose
+    of a token and are effective when a value with a single intent is used
+    multiple times.</p>
+    <p>Example:<br><code>--rh-color-surface-lightest</code></p>
+  </rh-card>
+
+  <rh-card>
+    <h3 slot="header">Element tokens</h3>
+    <p>Element tokens link semantic tokens to specific elements. They are
+    prefixed with the element name and ship in the @rhds/elements package,
+    rather than @rhds/tokens.</p>
+    <p>Example:<br><code>--rh-cta-color-primary</code></p>
+  </rh-card>
+</div>
+
 ## Token categories
 
 We want your feedback on our tokens. [Contact us][contact] if there are missing
@@ -127,34 +160,6 @@ values or if you have an idea for an output format or tool integration.
   </rh-tile>
 </nav>
 
-## Types of tokens
-
-<div class="grid">
-  <div>
-    <h3>Global tokens</h3>
-    <p>Global tokens represent the foundations of our design language and should
-    have context-agnostic names. These can be used and are inherited by other
-    token types.</p>
-    <code>--rh-brand-red-500</code>
-  </div>
-
-  <div>
-    <h3>Semantic tokens</h3>
-    <p>Semantic tokens represent context or abstraction. They communicate the purpose
-    of a token and are effective when a value with a single intent is used
-    multiple times.</p>
-    <code>--rh-color-surface-lightest</code>
-  </div>
-
-  <div>
-    <h3>Element tokens</h3>
-    <p>Element tokens link semantic tokens to specific elements. They are
-    prefixed with the element name and ship in the @rhds/elements package,
-    rather than @rhds/tokens.</p>
-    <code>--rh-cta-color-primary</code>
-  </div>
-</div>
-
 ## Why we need tokens
 
 In addition to being the source of truth of our design decisions, design tokens