Add box shadow

docs/_react/bulma-customizer/src/App.css

@@ -24,129 +24,3 @@
   "pink": ["#ffeef8", "#fedbf0", "#f9b3dd", "#f692ce", "#ec6cb9", "#ea4aaa", "#d03592", "#b93a86", "#99306f", "#6d224f"]
   */
 }
-
-.prismjs {
-  color: var(--gh-text);
-  font-size: 0.875em;
-  position: relative;
-
-  > code {
-    --lang: "Code";
-    --language: var(--brand);
-    background-color: var(--gh-dark);
-    border-radius: 0;
-    display: block;
-    font-size: 1rem;
-    overflow: auto;
-    padding: 1em 1.25em;
-    margin: 0.5rem -0.5rem -0.5rem;
-  }
-
-  & > .language-css {
-    --lang: "CSS";
-    --language: var(--gh-blue);
-  }
-
-  & > .language-html {
-    --lang: "HTML";
-    --language: var(--gh-orange);
-  }
-
-  .token {
-    /* CSS */
-    &.color {
-      &.hexcode {
-        color: var(--gh-pink);
-      }
-    }
-
-    &.comment {
-      color: var(--gh-dimmed);
-    }
-
-    &.function {
-      color: var(--gh-yellow);
-    }
-
-    &.number {
-      color: var(--gh-green);
-    }
-
-    &.property {
-      color: var(--gh-blue);
-    }
-
-    &.punctuation {
-      color: var(--gh-dimmed);
-    }
-
-    &.selector {
-      color: var(--gh-green);
-
-      &.attribute {
-        color: var(--gh-pink);
-
-        &.attr-name {
-          color: var(--gh-orange);
-        }
-
-        &.punctuation {
-          color: var(--gh-dimmed);
-        }
-      }
-
-      &.class {
-        color: var(--gh-purple);
-      }
-
-      &.combinator {
-        color: var(--gh-pink);
-      }
-
-      &.pseudo-class {
-        color: var(--gh-purple);
-      }
-
-      &.punctuation {
-        color: var(--gh-dimmed);
-      }
-    }
-
-    &.atrule {
-      color: var(--gh-purple);
-    }
-
-    &.string {
-      color: var(--gh-blue);
-    }
-
-    &.unit {
-      color: var(--gh-red);
-    }
-
-    &.variable {
-      color: var(--gh-orange);
-    }
-
-    /* HTML */
-    &.tag {
-      color: var(--gh-green);
-
-      &.attr-name {
-        color: var(--gh-blue);
-      }
-
-      &.attr-value {
-        color: var(--gh-purple);
-      }
-
-      &.punctuation {
-        color: var(--gh-dimmed);
-
-        &.attr-equals {
-          color: var(--gh-pink);
-        }
-      }
-    }
-  }
-}

docs/_react/bulma-customizer/src/App.module.css

@@ -12,7 +12,8 @@
 }
 
 .customizer {
-  background: var(--bulma-background);
+  background: var(--bulma-scheme-main);
+  box-shadow: var(--bulma-shadow);
   border-radius: 0.5rem;
   transform-origin: bottom right;
   transition-duration: 300ms;

docs/_react/bulma-customizer/src/components/Export.jsx

@@ -1,8 +1,6 @@
 import { useContext, useEffect, useState } from "react";
 import { CustomizerContext } from "../App";
 
-import Highlighter from "components/Highlighter";
-
 import cn from "./Export.module.css";
 
 function Export() {
@@ -114,11 +112,7 @@ function Export() {
         )}
       </div>
 
-      {css && (
-        <Highlighter PreTag="div" language="css">
-          {css.trim()}
-        </Highlighter>
-      )}
+      {css && <pre className={cn.pre}>{css.trim()}</pre>}
     </div>
   );
 }

docs/_react/bulma-customizer/src/components/Export.module.css

@@ -27,3 +27,10 @@
 .go {
   margin-top: 0.5rem;
 }
+
+.pre {
+  background-color: var(--gh-dark);
+  margin: 0.5rem -0.5rem;
+  color: var(--gh-text);
+  font-size: 1rem;
+}