From a93f037df0c2e49c09f63de2f27860984e4649f3 Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam@adamkudrna.cz>
Date: Wed, 20 Dec 2023 21:20:32 +0100
Subject: [PATCH] Use development CSS and JS in docs to improve code
 readability

Also, previously used production builds do not exist until `npm run build`
is run for the first time.
---
 mkdocs.yml                             | 4 ++--
 src/docs/_assets/stylesheets/extra.css | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/mkdocs.yml b/mkdocs.yml
index b9aa3477..32d14358 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -49,7 +49,7 @@ theme:
 extra_css:
   - https://unpkg.com/prismjs@1.29.0/themes/prism-twilight.min.css # Prism JS syntax highlighting
   - docs/_assets/stylesheets/extra.css # mkDocs theme tweaks
-  - docs/_assets/generated/docs-custom-properties.css # Load React UI CSS custom properties to make them accessible in the document root (outside shadowDOM) so we can preview colors etc.
+  - docs/_assets/generated/docs-custom-properties.development.css # Load React UI CSS custom properties to make them accessible in the document root (outside shadowDOM) so we can preview colors etc.
 
 # Additional JS. Mind the order!
 extra_javascript:
@@ -60,7 +60,7 @@ extra_javascript:
   - https://unpkg.com/@floating-ui/core@1.0.0/dist/floating-ui.core.umd.min.js
   - https://unpkg.com/@floating-ui/dom@1.0.0/dist/floating-ui.dom.umd.min.js
   - https://unpkg.com/@floating-ui/react-dom@1.0.0/dist/floating-ui.react-dom.umd.min.js
-  - docs/_assets/generated/react-ui.js
+  - docs/_assets/generated/react-ui.development.js
   - docs/_assets/js/ruiIcon.js
   - docs/_assets/js/ruiSwatch.js
 
diff --git a/src/docs/_assets/stylesheets/extra.css b/src/docs/_assets/stylesheets/extra.css
index 1b5e3710..8bd87351 100644
--- a/src/docs/_assets/stylesheets/extra.css
+++ b/src/docs/_assets/stylesheets/extra.css
@@ -15,7 +15,7 @@
   /* 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/react-ui.css;
+  --docoff-preview-css: /docs/_assets/generated/react-ui.development.css;
 
   /* Visual configuration of the `<docoff-placeholder>` element */
   --docoff-placeholder-background-dark: #4d4d4d;