docs(card): update demos

elements/rh-card/demo/alignment.html

@@ -1,6 +1,3 @@
-<link rel="stylesheet" href="demo.css" />
-<script type="module" src="rh-card.js"></script>
-
 <rh-card>
   <h2 slot="header">Default</h2>
   <p>
@@ -10,6 +7,7 @@ <h2 slot="header">Default</h2>
   </p>
   <rh-cta priority="primary" slot="footer"><a href="#">call to action</a></rh-cta>
 </rh-card>
+
 <rh-card alignment="start">
   <h2 slot="header">Alignment Start</h2>
   <p>
@@ -19,6 +17,7 @@ <h2 slot="header">Alignment Start</h2>
   </p>
   <rh-cta priority="primary" slot="footer"><a href="#">call to action</a></rh-cta>
 </rh-card>
+
 <rh-card alignment="center">
   <h2 slot="header">Alignment Center</h2>
   <p>
@@ -28,6 +27,7 @@ <h2 slot="header">Alignment Center</h2>
   </p>
   <rh-cta priority="primary" slot="footer"><a href="#">call to action</a></rh-cta>
 </rh-card>
+
 <rh-card alignment="end">
   <h2 slot="header">Alignment End</h2>
   <p>
@@ -37,6 +37,7 @@ <h2 slot="header">Alignment End</h2>
   </p>
   <rh-cta priority="primary" slot="footer"><a href="#">call to action</a></rh-cta>
 </rh-card>
+
 <rh-card bar>
   <h2 slot="header">Default</h2>
   <p>
@@ -46,6 +47,7 @@ <h2 slot="header">Default</h2>
   </p>
   <rh-cta priority="primary" slot="footer"><a href="#">call to action</a></rh-cta>
 </rh-card>
+
 <rh-card bar alignment="start">
   <h2 slot="header">Alignment Start</h2>
   <p>
@@ -55,6 +57,7 @@ <h2 slot="header">Alignment Start</h2>
   </p>
   <rh-cta priority="primary" slot="footer"><a href="#">call to action</a></rh-cta>
 </rh-card>
+
 <rh-card bar alignment="center">
   <h2 slot="header">Alignment Center</h2>
   <p>
@@ -64,6 +67,7 @@ <h2 slot="header">Alignment Center</h2>
   </p>
   <rh-cta priority="primary" slot="footer"><a href="#">call to action</a></rh-cta>
 </rh-card>
+
 <rh-card bar alignment="end">
   <h2 slot="header">Alignment End</h2>
   <p>
@@ -73,3 +77,11 @@ <h2 slot="header">Alignment End</h2>
   </p>
   <rh-cta priority="primary" slot="footer"><a href="#">call to action</a></rh-cta>
 </rh-card>
+
+<script type="module">
+  import '@rhds/elements/rh-cta/rh-cta.js';
+  import '@rhds/elements/rh-avatar/rh-avatar.js';
+  import '@rhds/elements/rh-blockquote/rh-blockquote.js';
+  import '@rhds/elements/rh-card/rh-card.js';
+</script>
+

elements/rh-card/demo/color-context.html

@@ -1,12 +1,3 @@
-<link rel="stylesheet" href="demo.css">
-
-<script type="module" src="rh-card.js"></script>
-
-<script type="module">
-  import '@rhds/elements/lib/elements/rh-context-picker/rh-context-picker.js';
-  import '@rhds/elements/lib/elements/rh-context-provider/rh-context-provider.js';
-</script>
-
 <rh-context-picker target="demo-container"></rh-context-picker>
 
 <rh-context-provider id="demo-container">
@@ -134,3 +125,19 @@ <h2 slot="header">Heading, sm</h2>
     </rh-card>
   </figure>
 </rh-context-provider>
+
+<script type="module">
+  import '@rhds/elements/rh-cta/rh-cta.js';
+  import '@rhds/elements/rh-avatar/rh-avatar.js';
+  import '@rhds/elements/rh-blockquote/rh-blockquote.js';
+  import '@rhds/elements/rh-card/rh-card.js';
+  import '@rhds/elements/lib/elements/rh-context-picker/rh-context-picker.js';
+  import '@rhds/elements/lib/elements/rh-context-provider/rh-context-provider.js';
+</script>
+
+<style>
+  [color-palette^="dark"] {
+    --_header-bg: var(--rh-color-surface-dark-alt, #292929);
+    --_alt-bg: #3c3f42;
+  }
+</style>

elements/rh-card/demo/rh-card.html

@@ -1,5 +1,3 @@
-<link rel="stylesheet" href="demo.css">
-<script type="module" src="rh-card.js"></script>
 <rh-card>
   <h2>Headline, sm</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -10,3 +8,8 @@ <h2>Headline, sm</h2>
     <a href="#">Call to action</a>
   </rh-cta>
 </rh-card>
+
+<script type="module">
+  import '@rhds/elements/rh-cta/rh-cta.js';
+  import '@rhds/elements/rh-card/rh-card.js';
+</script>