From 6aee3ee806fd1942f79dd5d738b46f0df04d0e24 Mon Sep 17 00:00:00 2001
From: Mark Caron <mark.caron@gmail.com>
Date: Thu, 5 Dec 2024 09:48:59 -0500
Subject: [PATCH 1/3] docs(tokens): Rearranging the Tokens docs by moving Token
 types up and making them rh-cards

---
 docs/tokens/index.md | 56 ++++++++++++++++++++++----------------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/docs/tokens/index.md b/docs/tokens/index.md
index 8dae4cfac6..24801c0cd2 100644
--- a/docs/tokens/index.md
+++ b/docs/tokens/index.md
@@ -49,6 +49,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 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: <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: <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: <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 +155,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

From 4d5db77c8b3106a39667da8b6ade5aa4af2a4764 Mon Sep 17 00:00:00 2001
From: Mark Caron <mark.caron@gmail.com>
Date: Thu, 5 Dec 2024 09:57:24 -0500
Subject: [PATCH 2/3] docs(tokens): import r-card

---
 docs/tokens/index.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/tokens/index.md b/docs/tokens/index.md
index 24801c0cd2..ac7285191d 100644
--- a/docs/tokens/index.md
+++ b/docs/tokens/index.md
@@ -10,6 +10,7 @@ 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>
 

From 2ab94ced58c50749ca4a93cbfb11fc7179c656f8 Mon Sep 17 00:00:00 2001
From: Mark Caron <mark.caron@gmail.com>
Date: Thu, 5 Dec 2024 10:08:05 -0500
Subject: [PATCH 3/3] docs(tokens): fix card height alignment

---
 docs/tokens/index.md | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/docs/tokens/index.md b/docs/tokens/index.md
index ac7285191d..d29dfdda48 100644
--- a/docs/tokens/index.md
+++ b/docs/tokens/index.md
@@ -15,7 +15,7 @@ tokenSearch: true
 </script>
 
 <style data-helmet>
-.page-overvie .container .grid {
+  .page-overvie .container .grid {
     margin-block: var(--rh-space--2xl, 32px);
   }
 
@@ -27,6 +27,10 @@ tokenSearch: true
   rh-tile [slot="image"] {
      margin-block: 0 !important;
   }
+
+  rh-card {
+    height: auto;
+  }
 </style>
 
 ## Introduction
@@ -52,13 +56,13 @@ To install design tokens, please visit our dedicated repo for instructions.
 
 ## Types of tokens
 
-<div class="grid xs-two-columns sm-three-columns">
+<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: <code>--rh-brand-red-500</code></p>
+    <p>Example:<br><code>--rh-brand-red-500</code></p>
   </rh-card>
 
   <rh-card>
@@ -66,7 +70,7 @@ To install design tokens, please visit our dedicated repo for instructions.
     <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: <code>--rh-color-surface-lightest</code></p>
+    <p>Example:<br><code>--rh-color-surface-lightest</code></p>
   </rh-card>
 
   <rh-card>
@@ -74,7 +78,7 @@ To install design tokens, please visit our dedicated repo for instructions.
     <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: <code>--rh-cta-color-primary</code></p>
+    <p>Example:<br><code>--rh-cta-color-primary</code></p>
   </rh-card>
 </div>