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

@@ -49,7 +49,7 @@ theme:
 extra_css:
   - https://unpkg.com/[email protected]/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/[email protected]/dist/floating-ui.core.umd.min.js
   - https://unpkg.com/@floating-ui/[email protected]/dist/floating-ui.dom.umd.min.js
   - https://unpkg.com/@floating-ui/[email protected]/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
 

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;