automatically update documentation values

templates/partials/bottom-scripts.html

@@ -5,6 +5,42 @@
         document.querySelectorAll("pre code").forEach(block => {
             window.hljs.highlightBlock(block);
         });
+
+        // Get the computed style of the root element (usually :root in CSS)
+        const rootStyle = getComputedStyle(document.documentElement);
+
+        // Function to update the display element with the CSS variable value, preserving inner span
+        function updateDisplayElementPreservingSpan(cssVariable, displayElementId) {
+            const value = rootStyle.getPropertyValue(cssVariable).trim();
+            const displayElement = document.getElementById(displayElementId);
+            if (displayElement) {
+                // Preserve the inner span if it exists
+                const spanElement = displayElement.querySelector('.color-preview');
+                if (spanElement) {
+                    displayElement.innerHTML = `<span class="color-preview" style="background-color: ${value};"></span>${value}`;
+                } else {
+                    displayElement.textContent = value;
+                }
+            }
+        }
+        // Update each display element with its corresponding CSS variable value
+        updateDisplayElementPreservingSpan('--global-font-size', 'css-global-font-size');
+        updateDisplayElementPreservingSpan('--global-line-height', 'css-global-line-height');
+        updateDisplayElementPreservingSpan('--global-space', 'css-global-space');
+        updateDisplayElementPreservingSpan('--font-stack', 'css-font-stack');
+        updateDisplayElementPreservingSpan('--mono-font-stack', 'css-mono-font-stack');
+        updateDisplayElementPreservingSpan('--background-color', 'css-background-color');
+        updateDisplayElementPreservingSpan('--font-color', 'css-font-color');
+        updateDisplayElementPreservingSpan('--invert-font-color', 'css-invert-font-color');
+        updateDisplayElementPreservingSpan('--primary-color', 'css-primary-color');
+        updateDisplayElementPreservingSpan('--secondary-color', 'css-secondary-color');
+        updateDisplayElementPreservingSpan('--error-color', 'css-error-color');
+        updateDisplayElementPreservingSpan('--progress-bar-background', 'css-progress-bar-background');
+        updateDisplayElementPreservingSpan('--progress-bar-fill', 'css-progress-bar-fill');
+        updateDisplayElementPreservingSpan('--code-bg-color', 'css-code-bg-color');
+        updateDisplayElementPreservingSpan('--block-background-color', 'css-block-background-color');
+        updateDisplayElementPreservingSpan('--input-style', 'css-input-style');
+        updateDisplayElementPreservingSpan('--display-h1-decoration', 'css-display-h1-decoration');
     });
 </script>
 <!-- Fathom - beautiful, simple website analytics -->

templates/partials/documentation.html

@@ -25,57 +25,66 @@
                     margin-right: 4px;
                 }
             </style>
+
             <dt>--global-font-size</dt>
             <dd>The Base font size</dd>
-            <dd class="italic">(Default: <code>15px</code>)</dd>
+            <dd class="italic">(Default: <code id="css-global-font-size">15px</code>)</dd>
+
             <dt>--global-line-height</dt>
             <dd>The baseline height. Modify this to achieve the best readability.</dd>
-            <dd class="italic">(Default: <code>1.4em</code>)</dd>
+            <dd class="italic">(Default: <code id="css-global-line-height">1.4em</code>)</dd>
+
+            <dt>--global-space</dt>
+            <dd>A global spacer used to consistently space things</dd>
+            <dd class="italic">(Default: <code id="css-global-space">10px</code>)</dd>
+
             <dt>--font-stack</dt>
             <dd>The fonts for the website.</dd>
             <dd>Use <code>@font-face</code> or any other font provider to include your custom fonts.</dd>
-            <dd class="italic">(Default: <code>"Menlo", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", serif</code>)</dd>
+            <dd class="italic">(Default: <code id="css-font-stack">"Menlo", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", serif</code>)</dd>
+
             <dt>--mono-font-stack</dt>
             <dd>Same as above but for <code>code</code>.</dd>
-            <dd class="italic">(Default: <code>"Menlo", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", serif</code>)</dd>
+            <dd class="italic">(Default: <code id="css-mono-font-stack">"Menlo", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", serif</code>)</dd>
+
             <dt>--background-color</dt>
             <dd>The page background color</dd>
-            <dd class="italic">(Default: <code><span class="color-preview" style="background-color: var(--background-color);"></span>#fff</code>)</dd>
+            <dd class="italic">(Default: <code id="css-background-color"><span class="color-preview" style="background-color: var(--background-color);"></span>#fff</code>)</dd>
+
             <dt>--font-color</dt>
             <dd>The base font color for text, headlines, blockquotes, lists, etc.</dd>
-            <dd class="italic">(Default: <code><span class="color-preview" style="background-color: var(--font-color);"></span>#151515</code>)</dd>
+            <dd class="italic">(Default: <code id="css-font-color"><span class="color-preview" style="background-color: var(--font-color);"></span>#151515</code>)</dd>
+
             <dt>--invert-font-color</dt>
             <dd>Sometimes text appears on a colored background. Adjust this color to improve readability.</dd>
-            <dd class="italic">(Default: <code><span class="color-preview" style="background-color: var(--invert-font-color);"></span>#fff</code>)</dd>
+            <dd class="italic">(Default: <code id="css-invert-font-color"><span class="color-preview" style="background-color: var(--invert-font-color);"></span>#fff</code>)</dd>
+
             <dt>--primary-color</dt>
             <dd>The primary color is used for links and buttons.</dd>
-            <dd class="italic">(Default: <code><span class="color-preview" style="background-color: var(--primary-color);"></span>#1a95e0</code>)</dd>
+            <dd class="italic">(Default: <code id="css-primary-color"><span class="color-preview" style="background-color: var(--primary-color);"></span>#1a95e0</code>)</dd>
+
             <dt>--secondary-color</dt>
             <dd>The secondary color is more subtle than the primary color. It's used for code highlighting and image captions.</dd>
-            <dd class="italic">(Default: <code><span class="color-preview" style="background-color: var(--secondary-color);"></span>#727578</code>)</dd>
+            <dd class="italic">(Default: <code id="css-secondary-color"><span class="color-preview" style="background-color: var(--secondary-color);"></span>#727578</code>)</dd>
+
             <dt>--error-color</dt>
             <dd>Used for error alerts and form validation.</dd>
-            <dd class="italic">(Default: <code><span class="color-preview" style="background-color: var(--error-color);"></span>#d20962</code>)</dd>
+            <dd class="italic">(Default: <code id="css-error-color"><span class="color-preview" style="background-color: var(--error-color);"></span>#d20962</code>)</dd>
+
             <dt>--progress-bar-background</dt>
             <dd>The background color of progress bars.</dd>
-            <dd class="italic">(Default: <code><span class="color-preview" style="background-color: var(--progress-bar-background);"></span>#727578</code>)</dd>
+            <dd class="italic">(Default: <code id="css-progress-bar-background"><span class="color-preview" style="background-color: var(--progress-bar-background);"></span>#727578</code>)</dd>
+
             <dt>--progress-bar-fill</dt>
             <dd>The fill color, indicating the progress in progress bars.</dd>
-            <dd class="italic">(Default: <code><span class="color-preview" style="background-color: var(--progress-bar-fill);"></span>#151515</code>)</dd>
+            <dd class="italic">(Default: <code id="css-progress-bar-fill"><span class="color-preview" style="background-color: var(--progress-bar-fill);"></span>#151515</code>)</dd>
+
             <dt>--code-bg-color</dt>
             <dd>The background color of <code>&lt;code&gt;</code> elements.</dd>
-            <dd class="italic">(Default: <code><span class="color-preview" style="background-color: var(--code-bg-color);"></span>#e8eff2</code>)</dd>
+            <dd class="italic">(Default: <code id="css-code-bg-color"><span class="color-preview" style="background-color: var(--code-bg-color);"></span>#e8eff2</code>)</dd>
+
             <dt>--block-background-color</dt>
-            <dd>The background color of <code>&lt;pre&gt;</code> elements. Also applies to <code>&lt;code&gt;</code> elements inside a <code>&lt;pre&gt;</code> element.</dd>
+            <dd>The background color of <code>&lt;pre&gt;</code> elements. Also applies to <code>&lt;code&gt;</code> elements inside a <code>&lt;pre&gt;</code
-            <dd class="italic">(Default: <code><span class="color-preview" style="background-color: var(--block-background-color);"></span>#fff</code>)</dd>
-            <dt>--input-style</dt>
-            <dd>The style of input element borders. Possible values are:</dd>
-            <dd class="italic">none, solid, dotted, dashed, double, groove, ridge, inset, outset, hidden, inherit, initial, unset</dd>
-            <dd class="italic">(Default: <code>solid</code>)</dd>
-            <dt>--display-h1-decoration</dt>
-            <dd>Show a double dash below <code>h1</code> elements. Possible values are:</dd>
-            <dd class="italic">block, none</dd>
-            <dd class="italic">(Default: <code>none</code>)</dd>
         </dl>
     </section>
     <hr>