chore: align style use between docs and demo (#1862)

* chore: align style use between docs and demo/dev-server use cases * chore: add tokens layer to layer cascade * chore: organize demo/dev-server styles * chore: correct stylesheet name * chore: call individiual layers instead of styles.css as a whole * chore: remove demo layer forgot to remove last commit * fix: ignore tokens loaded from node_modules in litcssOptions --------- Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>
RedHat-UX · Sep 16, 2024 · 8a3a88e · 8a3a88e
1 parent a98a060
commit 8a3a88e
Show file tree

Hide file tree

Showing 9 changed files with 74 additions and 64 deletions.
diff --git a/.pfe.config.json b/.pfe.config.json
@@ -16,7 +16,7 @@
     "description": "Red Hat Design System",
     "componentSubpath": "elements",
     "stylesheets": [
-      "/docs/styles/dev-server/styles.css"
+      "/docs/styles/demo/dev-server.css"
     ]
   }
 }
diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk
@@ -17,7 +17,6 @@
   <head>
     {% include "../partials/meta.html" %}
 
-    <link rel="stylesheet" href="/assets/packages/@rhds/tokens/css/global.css">
     <link rel="stylesheet" href="/styles/styles.css">
 
    {# On browsers that don't yet support native declarative shadow DOM, a

diff --git a/docs/_includes/layouts/demo.njk b/docs/_includes/layouts/demo.njk
@@ -8,8 +8,8 @@
 
     <link rel="preconnect" href="https://ga.jspm.io">
 
-    <link rel="stylesheet" href="/styles/dev-server/styles.css" media="all">
-
+    <link rel="stylesheet" href="/styles/demo/styles.css" media="all">
+   
     <script type="importmap">{{ importMap | dump(2) | safe }}</script>
     <script type="module">
       // dsd polyfill needs to happen before hydration attempts

diff --git a/docs/styles/demo/dev-server.css b/docs/styles/demo/dev-server.css
@@ -0,0 +1,56 @@
+@layer
+  reset,
+  fonts,
+  tokens,
+  typography,
+  base,
+  layout,
+  third-party;
+
+  @import url('../reset.css') layer(reset);
+  @import url('../fonts.css') layer(fonts);
+  @import url('/node_modules/@rhds/tokens/css/global.css') layer(tokens);
+  @import url('../typography.css') layer(typography);
+  @import url('../third-party/prism-rhds.css') layer(third-party);
+
+  @layer base {
+    /**
+     * PFE based styles as we do not have control over the
+     * html layout that is upstream with no current override
+     */
+    #main-header {
+      --pf-theme--color--surface--accent: black;
+      --pf-theme--color--accent: black;
+    }
+  }
+
+  @layer layout {
+    html,
+    body,
+    main { height: 100%; }
+
+    [data-demo] {
+      display: contents;
+    }
+
+    main {
+      display: block;
+      position: relative;
+      max-height: initial;
+    }
+
+    #nav {
+      height: 100%;
+    }
+
+    #main-header a img {
+      margin-right: 0;
+    }
+
+    /* offset the padding on the demo container from above */
+    rh-context-demo {
+      min-height: calc(100% + 2 * var(--rh-space-xl, 24px));
+      height: auto;
+    }
+  }
+
diff --git a/docs/styles/demo/styles.css b/docs/styles/demo/styles.css
@@ -0,0 +1,11 @@
+@layer
+  reset,
+  fonts,
+  tokens,
+  typography;
+
+@import url('../reset.css') layer(reset);
+@import url('../fonts.css') layer(fonts);
+@import url('/assets/packages/@rhds/tokens/css/global.css') layer(tokens);
+@import url('../typography.css') layer(typography);
+
diff --git a/docs/styles/dev-server/styles.css b/docs/styles/dev-server/styles.css
diff --git a/docs/styles/styles.css b/docs/styles/styles.css
@@ -1,6 +1,7 @@
 @layer
   reset,
   fonts,
+  tokens,
   typography,
   base,
   grid,
@@ -16,6 +17,7 @@
 @import url('not-defined.css') layer(not-defined);
 @import url('reset.css') layer(reset);
 @import url('fonts.css') layer(fonts);
+@import url('/assets/packages/@rhds/tokens/css/global.css') layer(tokens);
 @import url('typography.css') layer(typography);
 @import url('grid.css') layer(grid);
 @import url('lightdom.css') layer(lightdom);

diff --git a/scripts/playgrounds.ts b/scripts/playgrounds.ts
@@ -171,12 +171,7 @@ class PlaygroundDemo {
   }
 
   private addCommonCss() {
-    const cssPrefix = this.demo.filePath.match(DEMO_FILEPATH_IS_MAIN_DEMO_RE) ? '' : '../';
-    this.append(this.createStyleLink(`${cssPrefix}reset.css`),
-                Tools.createTextNode('\n'),
-                this.createStyleLink(`${cssPrefix}fonts.css`),
-                Tools.createTextNode('\n'),
-                this.createStyleLink(`${cssPrefix}typography.css`));
+    this.append(this.createStyleLink(`/styles/demo/styles.css`));
   }
 
   private getFinalContent() {

diff --git a/web-dev-server.config.js b/web-dev-server.config.js
@@ -25,7 +25,7 @@ export const litcssOptions = {
     /@rhds\/tokens\/css\/.*\.css$/,
     /lib\/.*\.css$/,
   ]))),
-  exclude: /lightdom/,
+  exclude: [/lightdom/, /node_modules\/@rhds\/tokens\/css\/global\.css/],
 };
 
 export default pfeDevServerConfig({