rizzo-css 0.0.40 → 0.0.41

package/scaffold/vanilla/components/settings.html

@@ -25,6 +25,20 @@
         if (savedFontScale) {
           document.documentElement.style.setProperty('--font-size-scale', savedFontScale);
         }
+        var savedFontPair = localStorage.getItem('fontPair') || 'geist';
+        if (savedFontPair === 'geist') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-geist-sans)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-geist-mono)');
+        } else if (savedFontPair === 'inter-jetbrains') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-inter)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-jetbrains-mono)');
+        } else if (savedFontPair === 'ibm-plex') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-ibm-plex-sans)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-ibm-plex-mono)');
+        } else if (savedFontPair === 'source') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-source-sans-3)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-source-code-pro)');
+        }
         if (localStorage.getItem('reducedMotion') === 'true') {
           document.documentElement.classList.add('reduced-motion');
         }
@@ -162,6 +176,19 @@
             <div class="settings__slider-labels"><span>Small</span><span>Default</span><span>Large</span></div>
           </div>
         </section>
+        <section class="settings__section">
+          <h3 class="settings__section-title">Font</h3>
+          <div class="settings__control">
+            <label for="font-pair-select" class="settings__label"><span class="settings__label-text">Font pair (sans + mono)</span></label>
+            <select id="font-pair-select" class="form-control" aria-label="Font pair" data-font-pair style="width: 100%;">
+              <option value="geist" data-sans="var(--font-family-geist-sans)" data-mono="var(--font-family-geist-mono)">Geist (Sans + Mono)</option>
+              <option value="inter-jetbrains" data-sans="var(--font-family-inter)" data-mono="var(--font-family-jetbrains-mono)">Inter + JetBrains Mono</option>
+              <option value="ibm-plex" data-sans="var(--font-family-ibm-plex-sans)" data-mono="var(--font-family-ibm-plex-mono)">IBM Plex Sans + Mono</option>
+              <option value="source" data-sans="var(--font-family-source-sans-3)" data-mono="var(--font-family-source-code-pro)">Source Sans 3 + Source Code Pro</option>
+            </select>
+            <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
+          </div>
+        </section>
         <section class="settings__section">
           <h3 class="settings__section-title">Accessibility</h3>
           <div class="settings__control">
@@ -309,6 +336,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -432,6 +466,13 @@
 
 
 
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/spinner.html

@@ -25,6 +25,20 @@
         if (savedFontScale) {
           document.documentElement.style.setProperty('--font-size-scale', savedFontScale);
         }
+        var savedFontPair = localStorage.getItem('fontPair') || 'geist';
+        if (savedFontPair === 'geist') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-geist-sans)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-geist-mono)');
+        } else if (savedFontPair === 'inter-jetbrains') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-inter)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-jetbrains-mono)');
+        } else if (savedFontPair === 'ibm-plex') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-ibm-plex-sans)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-ibm-plex-mono)');
+        } else if (savedFontPair === 'source') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-source-sans-3)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-source-code-pro)');
+        }
         if (localStorage.getItem('reducedMotion') === 'true') {
           document.documentElement.classList.add('reduced-motion');
         }
@@ -162,6 +176,19 @@
             <div class="settings__slider-labels"><span>Small</span><span>Default</span><span>Large</span></div>
           </div>
         </section>
+        <section class="settings__section">
+          <h3 class="settings__section-title">Font</h3>
+          <div class="settings__control">
+            <label for="font-pair-select" class="settings__label"><span class="settings__label-text">Font pair (sans + mono)</span></label>
+            <select id="font-pair-select" class="form-control" aria-label="Font pair" data-font-pair style="width: 100%;">
+              <option value="geist" data-sans="var(--font-family-geist-sans)" data-mono="var(--font-family-geist-mono)">Geist (Sans + Mono)</option>
+              <option value="inter-jetbrains" data-sans="var(--font-family-inter)" data-mono="var(--font-family-jetbrains-mono)">Inter + JetBrains Mono</option>
+              <option value="ibm-plex" data-sans="var(--font-family-ibm-plex-sans)" data-mono="var(--font-family-ibm-plex-mono)">IBM Plex Sans + Mono</option>
+              <option value="source" data-sans="var(--font-family-source-sans-3)" data-mono="var(--font-family-source-code-pro)">Source Sans 3 + Source Code Pro</option>
+            </select>
+            <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
+          </div>
+        </section>
         <section class="settings__section">
           <h3 class="settings__section-title">Accessibility</h3>
           <div class="settings__control">
@@ -309,6 +336,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -432,6 +466,13 @@
 
 
 
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/table.html

@@ -25,6 +25,20 @@
         if (savedFontScale) {
           document.documentElement.style.setProperty('--font-size-scale', savedFontScale);
         }
+        var savedFontPair = localStorage.getItem('fontPair') || 'geist';
+        if (savedFontPair === 'geist') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-geist-sans)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-geist-mono)');
+        } else if (savedFontPair === 'inter-jetbrains') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-inter)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-jetbrains-mono)');
+        } else if (savedFontPair === 'ibm-plex') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-ibm-plex-sans)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-ibm-plex-mono)');
+        } else if (savedFontPair === 'source') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-source-sans-3)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-source-code-pro)');
+        }
         if (localStorage.getItem('reducedMotion') === 'true') {
           document.documentElement.classList.add('reduced-motion');
         }
@@ -162,6 +176,19 @@
             <div class="settings__slider-labels"><span>Small</span><span>Default</span><span>Large</span></div>
           </div>
         </section>
+        <section class="settings__section">
+          <h3 class="settings__section-title">Font</h3>
+          <div class="settings__control">
+            <label for="font-pair-select" class="settings__label"><span class="settings__label-text">Font pair (sans + mono)</span></label>
+            <select id="font-pair-select" class="form-control" aria-label="Font pair" data-font-pair style="width: 100%;">
+              <option value="geist" data-sans="var(--font-family-geist-sans)" data-mono="var(--font-family-geist-mono)">Geist (Sans + Mono)</option>
+              <option value="inter-jetbrains" data-sans="var(--font-family-inter)" data-mono="var(--font-family-jetbrains-mono)">Inter + JetBrains Mono</option>
+              <option value="ibm-plex" data-sans="var(--font-family-ibm-plex-sans)" data-mono="var(--font-family-ibm-plex-mono)">IBM Plex Sans + Mono</option>
+              <option value="source" data-sans="var(--font-family-source-sans-3)" data-mono="var(--font-family-source-code-pro)">Source Sans 3 + Source Code Pro</option>
+            </select>
+            <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
+          </div>
+        </section>
         <section class="settings__section">
           <h3 class="settings__section-title">Accessibility</h3>
           <div class="settings__control">
@@ -309,6 +336,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -432,6 +466,13 @@
 
 
 
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/tabs.html

@@ -25,6 +25,20 @@
         if (savedFontScale) {
           document.documentElement.style.setProperty('--font-size-scale', savedFontScale);
         }
+        var savedFontPair = localStorage.getItem('fontPair') || 'geist';
+        if (savedFontPair === 'geist') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-geist-sans)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-geist-mono)');
+        } else if (savedFontPair === 'inter-jetbrains') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-inter)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-jetbrains-mono)');
+        } else if (savedFontPair === 'ibm-plex') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-ibm-plex-sans)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-ibm-plex-mono)');
+        } else if (savedFontPair === 'source') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-source-sans-3)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-source-code-pro)');
+        }
         if (localStorage.getItem('reducedMotion') === 'true') {
           document.documentElement.classList.add('reduced-motion');
         }
@@ -162,6 +176,19 @@
             <div class="settings__slider-labels"><span>Small</span><span>Default</span><span>Large</span></div>
           </div>
         </section>
+        <section class="settings__section">
+          <h3 class="settings__section-title">Font</h3>
+          <div class="settings__control">
+            <label for="font-pair-select" class="settings__label"><span class="settings__label-text">Font pair (sans + mono)</span></label>
+            <select id="font-pair-select" class="form-control" aria-label="Font pair" data-font-pair style="width: 100%;">
+              <option value="geist" data-sans="var(--font-family-geist-sans)" data-mono="var(--font-family-geist-mono)">Geist (Sans + Mono)</option>
+              <option value="inter-jetbrains" data-sans="var(--font-family-inter)" data-mono="var(--font-family-jetbrains-mono)">Inter + JetBrains Mono</option>
+              <option value="ibm-plex" data-sans="var(--font-family-ibm-plex-sans)" data-mono="var(--font-family-ibm-plex-mono)">IBM Plex Sans + Mono</option>
+              <option value="source" data-sans="var(--font-family-source-sans-3)" data-mono="var(--font-family-source-code-pro)">Source Sans 3 + Source Code Pro</option>
+            </select>
+            <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
+          </div>
+        </section>
         <section class="settings__section">
           <h3 class="settings__section-title">Accessibility</h3>
           <div class="settings__control">
@@ -309,6 +336,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -432,6 +466,13 @@
 
 
 
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/theme-switcher.html

@@ -25,6 +25,20 @@
         if (savedFontScale) {
           document.documentElement.style.setProperty('--font-size-scale', savedFontScale);
         }
+        var savedFontPair = localStorage.getItem('fontPair') || 'geist';
+        if (savedFontPair === 'geist') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-geist-sans)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-geist-mono)');
+        } else if (savedFontPair === 'inter-jetbrains') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-inter)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-jetbrains-mono)');
+        } else if (savedFontPair === 'ibm-plex') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-ibm-plex-sans)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-ibm-plex-mono)');
+        } else if (savedFontPair === 'source') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-source-sans-3)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-source-code-pro)');
+        }
         if (localStorage.getItem('reducedMotion') === 'true') {
           document.documentElement.classList.add('reduced-motion');
         }
@@ -162,6 +176,19 @@
             <div class="settings__slider-labels"><span>Small</span><span>Default</span><span>Large</span></div>
           </div>
         </section>
+        <section class="settings__section">
+          <h3 class="settings__section-title">Font</h3>
+          <div class="settings__control">
+            <label for="font-pair-select" class="settings__label"><span class="settings__label-text">Font pair (sans + mono)</span></label>
+            <select id="font-pair-select" class="form-control" aria-label="Font pair" data-font-pair style="width: 100%;">
+              <option value="geist" data-sans="var(--font-family-geist-sans)" data-mono="var(--font-family-geist-mono)">Geist (Sans + Mono)</option>
+              <option value="inter-jetbrains" data-sans="var(--font-family-inter)" data-mono="var(--font-family-jetbrains-mono)">Inter + JetBrains Mono</option>
+              <option value="ibm-plex" data-sans="var(--font-family-ibm-plex-sans)" data-mono="var(--font-family-ibm-plex-mono)">IBM Plex Sans + Mono</option>
+              <option value="source" data-sans="var(--font-family-source-sans-3)" data-mono="var(--font-family-source-code-pro)">Source Sans 3 + Source Code Pro</option>
+            </select>
+            <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
+          </div>
+        </section>
         <section class="settings__section">
           <h3 class="settings__section-title">Accessibility</h3>
           <div class="settings__control">
@@ -309,6 +336,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -432,6 +466,13 @@
 
 
 
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/toast.html

@@ -25,6 +25,20 @@
         if (savedFontScale) {
           document.documentElement.style.setProperty('--font-size-scale', savedFontScale);
         }
+        var savedFontPair = localStorage.getItem('fontPair') || 'geist';
+        if (savedFontPair === 'geist') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-geist-sans)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-geist-mono)');
+        } else if (savedFontPair === 'inter-jetbrains') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-inter)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-jetbrains-mono)');
+        } else if (savedFontPair === 'ibm-plex') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-ibm-plex-sans)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-ibm-plex-mono)');
+        } else if (savedFontPair === 'source') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-source-sans-3)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-source-code-pro)');
+        }
         if (localStorage.getItem('reducedMotion') === 'true') {
           document.documentElement.classList.add('reduced-motion');
         }
@@ -162,6 +176,19 @@
             <div class="settings__slider-labels"><span>Small</span><span>Default</span><span>Large</span></div>
           </div>
         </section>
+        <section class="settings__section">
+          <h3 class="settings__section-title">Font</h3>
+          <div class="settings__control">
+            <label for="font-pair-select" class="settings__label"><span class="settings__label-text">Font pair (sans + mono)</span></label>
+            <select id="font-pair-select" class="form-control" aria-label="Font pair" data-font-pair style="width: 100%;">
+              <option value="geist" data-sans="var(--font-family-geist-sans)" data-mono="var(--font-family-geist-mono)">Geist (Sans + Mono)</option>
+              <option value="inter-jetbrains" data-sans="var(--font-family-inter)" data-mono="var(--font-family-jetbrains-mono)">Inter + JetBrains Mono</option>
+              <option value="ibm-plex" data-sans="var(--font-family-ibm-plex-sans)" data-mono="var(--font-family-ibm-plex-mono)">IBM Plex Sans + Mono</option>
+              <option value="source" data-sans="var(--font-family-source-sans-3)" data-mono="var(--font-family-source-code-pro)">Source Sans 3 + Source Code Pro</option>
+            </select>
+            <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
+          </div>
+        </section>
         <section class="settings__section">
           <h3 class="settings__section-title">Accessibility</h3>
           <div class="settings__control">
@@ -309,6 +336,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -432,6 +466,13 @@
 
 
 
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/tooltip.html

@@ -25,6 +25,20 @@
         if (savedFontScale) {
           document.documentElement.style.setProperty('--font-size-scale', savedFontScale);
         }
+        var savedFontPair = localStorage.getItem('fontPair') || 'geist';
+        if (savedFontPair === 'geist') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-geist-sans)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-geist-mono)');
+        } else if (savedFontPair === 'inter-jetbrains') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-inter)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-jetbrains-mono)');
+        } else if (savedFontPair === 'ibm-plex') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-ibm-plex-sans)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-ibm-plex-mono)');
+        } else if (savedFontPair === 'source') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-source-sans-3)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-source-code-pro)');
+        }
         if (localStorage.getItem('reducedMotion') === 'true') {
           document.documentElement.classList.add('reduced-motion');
         }
@@ -162,6 +176,19 @@
             <div class="settings__slider-labels"><span>Small</span><span>Default</span><span>Large</span></div>
           </div>
         </section>
+        <section class="settings__section">
+          <h3 class="settings__section-title">Font</h3>
+          <div class="settings__control">
+            <label for="font-pair-select" class="settings__label"><span class="settings__label-text">Font pair (sans + mono)</span></label>
+            <select id="font-pair-select" class="form-control" aria-label="Font pair" data-font-pair style="width: 100%;">
+              <option value="geist" data-sans="var(--font-family-geist-sans)" data-mono="var(--font-family-geist-mono)">Geist (Sans + Mono)</option>
+              <option value="inter-jetbrains" data-sans="var(--font-family-inter)" data-mono="var(--font-family-jetbrains-mono)">Inter + JetBrains Mono</option>
+              <option value="ibm-plex" data-sans="var(--font-family-ibm-plex-sans)" data-mono="var(--font-family-ibm-plex-mono)">IBM Plex Sans + Mono</option>
+              <option value="source" data-sans="var(--font-family-source-sans-3)" data-mono="var(--font-family-source-code-pro)">Source Sans 3 + Source Code Pro</option>
+            </select>
+            <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
+          </div>
+        </section>
         <section class="settings__section">
           <h3 class="settings__section-title">Accessibility</h3>
           <div class="settings__control">
@@ -309,6 +336,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -432,6 +466,13 @@
 
 
 
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/index.html

@@ -25,6 +25,20 @@
         if (savedFontScale) {
           document.documentElement.style.setProperty('--font-size-scale', savedFontScale);
         }
+        var savedFontPair = localStorage.getItem('fontPair') || 'geist';
+        if (savedFontPair === 'geist') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-geist-sans)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-geist-mono)');
+        } else if (savedFontPair === 'inter-jetbrains') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-inter)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-jetbrains-mono)');
+        } else if (savedFontPair === 'ibm-plex') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-ibm-plex-sans)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-ibm-plex-mono)');
+        } else if (savedFontPair === 'source') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-source-sans-3)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-source-code-pro)');
+        }
         if (localStorage.getItem('reducedMotion') === 'true') {
           document.documentElement.classList.add('reduced-motion');
         }
@@ -162,6 +176,19 @@
             <div class="settings__slider-labels"><span>Small</span><span>Default</span><span>Large</span></div>
           </div>
         </section>
+        <section class="settings__section">
+          <h3 class="settings__section-title">Font</h3>
+          <div class="settings__control">
+            <label for="font-pair-select" class="settings__label"><span class="settings__label-text">Font pair (sans + mono)</span></label>
+            <select id="font-pair-select" class="form-control" aria-label="Font pair" data-font-pair style="width: 100%;">
+              <option value="geist" data-sans="var(--font-family-geist-sans)" data-mono="var(--font-family-geist-mono)">Geist (Sans + Mono)</option>
+              <option value="inter-jetbrains" data-sans="var(--font-family-inter)" data-mono="var(--font-family-jetbrains-mono)">Inter + JetBrains Mono</option>
+              <option value="ibm-plex" data-sans="var(--font-family-ibm-plex-sans)" data-mono="var(--font-family-ibm-plex-mono)">IBM Plex Sans + Mono</option>
+              <option value="source" data-sans="var(--font-family-source-sans-3)" data-mono="var(--font-family-source-code-pro)">Source Sans 3 + Source Code Pro</option>
+            </select>
+            <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
+          </div>
+        </section>
         <section class="settings__section">
           <h3 class="settings__section-title">Accessibility</h3>
           <div class="settings__control">
@@ -309,6 +336,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -467,6 +501,13 @@
 
 
 
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/js/main.js

@@ -165,6 +165,7 @@
     var closeBtn = settings.querySelector('[data-settings-close]');
     var fontSizeSlider = settings.querySelector('[data-font-size-slider]');
     var fontSizeValue = settings.querySelector('[data-font-size-value]');
+    var fontPairSelect = settings.querySelector('[data-font-pair]');
     var reducedMotion = settings.querySelector('[data-reduced-motion]');
     var highContrast = settings.querySelector('[data-high-contrast]');
     var scrollbarStyleRadios = settings.querySelectorAll('[data-scrollbar-style]');
@@ -190,6 +191,15 @@
         applyFontSize(parseFloat(saved));
       }
       if (fontSizeSlider) updateSliderProgress(fontSizeSlider);
+      var savedFontPair = localStorage.getItem('fontPair') || 'geist';
+      if (fontPairSelect) {
+        fontPairSelect.value = savedFontPair;
+        var opt = fontPairSelect.options[fontPairSelect.selectedIndex];
+        if (opt && opt.dataset.sans && opt.dataset.mono) {
+          html.style.setProperty('--font-family', opt.dataset.sans);
+          html.style.setProperty('--font-family-mono', opt.dataset.mono);
+        }
+      }
       if (reducedMotion) {
         reducedMotion.checked = localStorage.getItem('reducedMotion') === 'true';
         html.classList.toggle('reduced-motion', reducedMotion.checked);
@@ -260,6 +270,16 @@
         localStorage.setItem('fontSizeScale', scale);
       });
     }
+    if (fontPairSelect) {
+      fontPairSelect.addEventListener('change', function () {
+        var opt = this.options[this.selectedIndex];
+        if (opt && opt.dataset.sans && opt.dataset.mono) {
+          html.style.setProperty('--font-family', opt.dataset.sans);
+          html.style.setProperty('--font-family-mono', opt.dataset.mono);
+          localStorage.setItem('fontPair', opt.value);
+        }
+      });
+    }
     if (reducedMotion) {
       reducedMotion.addEventListener('change', function () {
         html.classList.toggle('reduced-motion', this.checked);

package/scaffold/astro-minimal/src/layouts/Layout.astro

@@ -1,29 +0,0 @@
----
-/* Placeholders replaced by rizzo-css CLI when scaffolding */
-/* {{THEME_LIST_COMMENT}} */
-const DATA_THEME = '{{DATA_THEME}}';
-/** @type {{ title?: string }} */
-const { title = '{{TITLE}}' } = Astro.props;
-{{RIZZO_LAYOUT_IMPORTS}}
----
-<!doctype html>
-<html lang="en" data-theme={DATA_THEME}>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <script is:inline>
-      (function(){try{var s=localStorage.getItem('theme');var d='{{DEFAULT_DARK}}';var l='{{DEFAULT_LIGHT}}';var initial=document.documentElement.getAttribute('data-theme');var r=!s?((initial&&initial!=='system')?initial:(matchMedia('(prefers-color-scheme: dark)').matches?d:l)):s==='system'?(matchMedia('(prefers-color-scheme: dark)').matches?d:l):s;document.documentElement.setAttribute('data-theme',r);}catch(e){}})();
-    </script>
-    <link rel="stylesheet" href="/css/rizzo.min.css" />
-    <title>{title}</title>
-  </head>
-  <body>
-    <a href="#main-content" class="skip-link">Skip to main content</a>
-    {{RIZZO_LAYOUT_BODY_TOP}}
-    <main id="main-content">
-      <slot />
-    </main>
-    {{RIZZO_LAYOUT_BODY_BOTTOM}}
-  </body>
-</html>