docs(theming): some styling and content updates (#1953)

* docs(theming): some styling and content updates * docs: update 11ty support for css and js in all docs subfolders * docs: move lightdom file linked to the styles layers * style: update lightdom.css * fix: remove accidental duplicate code-block-lightdom.css import --------- Co-authored-by: Benny Powers <[email protected]> Co-authored-by: Steven Spriggs <[email protected]> Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>
RedHat-UX · Nov 1, 2024 · ece12c1 · ece12c1
1 parent 9b4ad74
commit ece12c1
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 11 deletions.
diff --git a/docs/styles/lightdom.css b/docs/styles/lightdom.css
@@ -1,4 +1,4 @@
-@layer masthead, sidenav, code-block, permalink, repo-status-list, footer;
+@layer masthead, sidenav, permalink, repo-status-list, footer, code-block;
 
 @import url('/assets/packages/@uxdot/elements/uxdot-masthead-lightdom.css') layer(masthead);
 @import url('/assets/packages/@uxdot/elements/uxdot-sidenav-lightdom.css') layer(sidenav);

diff --git a/docs/theming/color-palettes.css b/docs/theming/color-palettes.css
@@ -13,22 +13,33 @@
 }
 
 .surface-grid,
-.tile-grid {
+.color-palette-grid {
   display: grid;
   padding: 0;
   list-style-type: none;
   gap: var(--rh-space-sm);
   grid-template-columns: 1fr 1fr 1fr;
+  text-align: center;
 }
 
 .surface-grid {
   grid-template-columns: 1fr 1fr;
+
+  ::part(header) {
+    margin-block-end: 1rem;
+  }
 }
 
 .icon-card {
   --rh-icon-size: var(--rh-size-icon-07);
 }
 
+.color-palette-grid rh-surface {
+  padding: 2rem;
+  border-radius: var(--rh-border-radius-default);
+  border: var(--rh-border-width-sm) solid var(--rh-color-border-subtle);
+}
+
 .pullquote-card {
   min-width: 360px;
   margin: var(--rh-space-2xl);

diff --git a/docs/theming/color-palettes.md b/docs/theming/color-palettes.md
@@ -104,13 +104,13 @@ creating themeable, responsive graphics.
 **Providers** define the **color palette** for themselves and their child
 elements. There are six color palettes in RHDS:
 
-<ol class="tile-grid">
-  <li><rh-tile color-palette="lightest">Lightest</rh-tile></li>
-  <li><rh-tile color-palette="lighter">Lighter</rh-tile></li>
-  <li><rh-tile color-palette="light">Light</rh-tile></li>
-  <li><rh-tile color-palette="dark">Dark</rh-tile></li>
-  <li><rh-tile color-palette="darker">Darker</rh-tile></li>
-  <li><rh-tile color-palette="darkest">Darkest</rh-tile></li>
+<ol class="color-palette-grid">
+  <li><rh-surface color-palette="lightest">Lightest</rh-surface></li>
+  <li><rh-surface color-palette="lighter">Lighter</rh-surface></li>
+  <li><rh-surface color-palette="light">Light</rh-surface></li>
+  <li><rh-surface color-palette="dark">Dark</rh-surface></li>
+  <li><rh-surface color-palette="darker">Darker</rh-surface></li>
+  <li><rh-surface color-palette="darkest">Darkest</rh-surface></li>
 </ol>
 
 Context providers typically use the `lightest` color palette as the default.
@@ -143,7 +143,7 @@ the color palette of it's containing surface. There are two backgrounds in RHDS:
 
   <li>
     <rh-card class="icon-card" color-palette="darkest">
-      <rh-icon slot="header" icon="umbrella"></rh-icon>
+      <rh-icon slot="header" icon="lighthouse"></rh-icon>
       <span slot="header">Dark</span>
     </rh-card></li>
 </ul>

diff --git a/eleventy.config.ts b/eleventy.config.ts
@@ -77,7 +77,7 @@ export default async function(eleventyConfig: UserConfig) {
   eleventyConfig.addPassthroughCopy('docs/robots.txt');
   eleventyConfig.addPassthroughCopy('docs/assets/**/*');
   eleventyConfig.addPassthroughCopy('docs/styles/**/*');
-  eleventyConfig.addPassthroughCopy('docs/foundations/**/*.{css,js}');
+  eleventyConfig.addPassthroughCopy('docs/**/*.{css,js}');
 
   if (isLocal) {
     eleventyConfig.addPassthroughCopy({