docs: typos

RedHat-UX · Aug 29, 2024 · 6416c2b · 6416c2b
1 parent 4e83795
commit 6416c2b
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 28 deletions.
diff --git a/.changeset/khaki-sheep-tan.md b/.changeset/khaki-sheep-tan.md
@@ -6,11 +6,11 @@ such as `<rh-card>` to style themable content that responds to the color palette
 
 ```html
 <rh-surface color-palette="lighter">
+  <p>Use <a href="#">theme tokens</a> for best results.<p>
   <rh-card color-palette="darkest">
     <p>That way, colours respond to their parents' <code>color-palette</code>
        Without requiring <a href="#">custom CSS</a></p>
   </rh-card>
-  <p>Use <a href="#">theme tokens</a> for best results.
 </rh-surface>
 ```
 

diff --git a/docs/index.html b/docs/index.html
@@ -112,6 +112,35 @@ <h2>Overview<a href="#overview">#</a></h2>
 
       </section>
 
+      <section id="theme-tokens">
+
+        <rh-surface id="theme-link-demo" color-palette="lighter">
+          <p>Use <a href="#">theme tokens</a> for best results.<p>
+          <rh-card color-palette="darkest">
+            <p>That way, colours respond to their parents' <code>color-palette</code>
+               Without requiring <a href="#">custom CSS</a></p>
+          </rh-card>
+        </rh-surface>
+
+        <style>
+        #theme-link-demo {
+          & a {
+            color: var(--rh-color-interactive-blue-normal);
+            &:hover,
+            &:focus-within,
+            &:active { color: var(--rh-color-interactive-blue-emphasized); }
+            &:visited {
+              color: var(--rh-color-interactive-purple-normal);
+              &:hover,
+              &:focus-within,
+              &:active { color: var(--rh-color-interactive-purple-emphasized); }
+            }
+          }
+        }
+        </style>
+
+      </section>
+
       {% category path = 'color',
                   exclude = ['border', 'text', 'icon'] %}
       {% category path = 'box-shadow' %}
@@ -128,32 +157,8 @@ <h2>Overview<a href="#overview">#</a></h2>
       {% category path = 'breakpoint' %}
       {% category path = 'media' %}
 
-      <rh-surface id="theme-link-demo" color-palette="lighter">
-        <rh-card color-palette="darkest">
-          <p>That way, colours respond to their parents' <code>color-palette</code>
-             Without requiring <a href="#">custom CSS</a></p>
-        </rh-card>
-        <p>Use <a href="#">theme tokens</a> for best results.
-      </rh-surface>
-
-      <style>
-      #theme-link-demo {
-        & a {
-          color: var(--rh-color-interactive-blue-normal);
-          &:hover,
-          &:focus-within,
-          &:active { color: var(--rh-color-interactive-blue-emphasized); }
-          &:visited {
-            color: var(--rh-color-interactive-purple-normal);
-            &:hover,
-            &:focus-within,
-            &:active { color: var(--rh-color-interactive-purple-emphasized); }
-          }
-        }
-      }
-      </style>
     </main>
-    <rh-global-footer>
+    <rh-footer-universal>
       <h3 slot="links-primary" hidden>Red Hat legal and privacy links</h3>
       <ul slot="links-primary">
         <li><a href="#">About Red Hat</a></li>
@@ -178,7 +183,7 @@ <h3 slot="links-secondary" hidden>Red Hat legal and privacy links</h3>
         <img src="https://access.redhat.com/chrome_themes/nimbus/img/rh-summit-red-a.svg" alt="Red Hat Summit"
           width="73px" loading="lazy">
       </a>
-    </rh-global-footer>
+    </rh-footer-universal>
   </body>
 </html>
 
diff --git a/eleventy.config.cjs b/eleventy.config.cjs
@@ -18,6 +18,8 @@ module.exports = function(eleventyConfig) {
       '@rhds/elements',
       '@rhds/elements/rh-footer/rh-footer-universal.js',
       '@rhds/elements/rh-tooltip/rh-tooltip.js',
+      '@rhds/elements/rh-card/rh-card.js',
+      '@rhds/elements/rh-surface/rh-surface.js',
     ]);
     return generator.getMap();
   });

diff --git a/tokens/color/interactive.md b/tokens/color/interactive.md
@@ -4,11 +4,11 @@ tokens in order to style content of themable containers like `<rh-surface>`
 
 ```html
 <rh-surface color-palette="lighter">
+  <p>Use <a href="#">theme tokens</a> for best results.<p>
   <rh-card color-palette="darkest">
     <p>That way, colours respond to their parents' <code>color-palette</code>
        Without requiring <a href="#">custom CSS</a></p>
   </rh-card>
-  <p>Use <a href="#">theme tokens</a> for best results.
 </rh-surface>
 ```