chore: align style use between docs and demo

.pfe.config.json

@@ -16,7 +16,7 @@
     "description": "Red Hat Design System",
     "componentSubpath": "elements",
     "stylesheets": [
-      "/docs/styles/demo/styles.css"
+      "/docs/styles/demo/dev-server.css"
     ]
   }
 }

docs/styles/demo/dev-server.css

@@ -0,0 +1,50 @@
+@layer
+  demo,
+  base,
+  layout,
+  third-party;
+
+  @import url('demo.css') layer(demo);
+  @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;
+    }
+  }
+

docs/styles/demo/styles.css

@@ -2,54 +2,10 @@
   reset,
   fonts,
   tokens,
-  typography,
-  base,
-  layout,
-  third-party;
+  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);
-@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;
-  }
-}