From 47c9265a286b515c16584628fe2f1c778ddb4f48 Mon Sep 17 00:00:00 2001
From: David Urban <david.urban@hey.com>
Date: Tue, 10 Jan 2023 12:22:38 +0100
Subject: [PATCH] fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup!
 fixup! Change documentation platform from Docz to Docoff

---
 src/docs/_assets/stylesheets/extra.css | 52 ++++++++++++--------------
 1 file changed, 24 insertions(+), 28 deletions(-)

diff --git a/src/docs/_assets/stylesheets/extra.css b/src/docs/_assets/stylesheets/extra.css
index 23baafcf..d6b7241e 100644
--- a/src/docs/_assets/stylesheets/extra.css
+++ b/src/docs/_assets/stylesheets/extra.css
@@ -1,32 +1,37 @@
 @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap');
 
-:root {
-  /* Visual configuration of the `<docoff-react-preview>` and `<docoff-react-base>` code */
-  /* The Prism theme CSS file, for options see: https://unpkg.com/browse/prismjs/themes/ */
-  --docoff-code-prism-css: https://unpkg.com/prismjs@1.29/themes/prism-twilight.min.css;
-  --docoff-code-font-size: 0.7rem;
-  --docoff-code-line-height: 1.5;
-  --docoff-code-font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-
-
-  /* Visual configuration of the `<docoff-react-preview>` live preview */
-  --docoff-preview-border-color: rgb(206, 212, 222);
-  --docoff-preview-border-radius: 0.35em;
+:root > * {
+  --md-primary-fg-color: #00778b;
+  --md-primary-fg-color--light: #fff;
+  --md-primary-fg-color--dark:  #006b7d;
+  --md-typeset-color: #1a1a1a;
+
+  /* Visual configuration */
+  --docoff-border-color: rgb(206, 212, 222);
+  --docoff-border-radius: 0.35em;
+  --docoff-background-color: rgba(179, 179, 179, 0.1);
+
   /* To simplify multiple component presentation we add margin to all top level elements*/
   --docoff-preview-children-margin: 0.25em;
+
   /* To improve component presentation we add padding inside the shadow DOM */
   --docoff-preview-padding: 1em;
-  /*Custom preview CSS file, typically this would be the CSS of your component */
-  --docoff-preview-css: /docs/_assets/generated/reactui.css;
 
+  /*
+    The Prism theme CSS file
+    For options see: https://unpkg.com/browse/prismjs@1.27/themes/
+   */
+  --docoff-prism-css: https://unpkg.com/prismjs@1.27/themes/prism-twilight.min.css;
+
+  /*
+    Custom preview CSS file
+    Typically this would be the CSS of your component
+   */
+  --docoff-preview-css: /docs/_assets/generated/reactui.css;
 
-  /* Visual configuration of the `<docoff-placeholder>` element */
-  --docoff-placeholder-background-dark: #4d4d4d;
-  --docoff-placeholder-background-light: #fff;
-  --docoff-placeholder-border-color: #ccc;
-  --docoff-placeholder-border-width: 2px;
 }
 
+
 [data-md-color-scheme="default"] {
   --md-primary-fg-color: #00778b;
   --md-primary-fg-color--light: #fff;
@@ -67,16 +72,7 @@ body {
   text-decoration: underline;
 }
 
-pre[class*="language-"] {
-  background: rgb(40, 40, 40);
-  border-radius: 0.35em;
-  border: none;
-  overflow: hidden;
-  margin: 0 !important;
-}
-
 code[class*="language-"], pre[class*="language-"] {
-  text-shadow: none;
   font-size: 0.7rem;
 }