rizzo-css 0.0.39 → 0.0.41

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">
@@ -303,6 +330,16 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -423,6 +460,16 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
 
 
 

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">
@@ -303,6 +330,16 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -423,6 +460,16 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
 
 
 

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">
@@ -303,6 +330,16 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -423,6 +460,16 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/icons/devicons/Bun.svg

@@ -0,0 +1,19 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+  viewBox="0 0 128 128"
+  aria-hidden="true"
+>
+  <path d="M113.744 41.999a19 19 0 0 0-.8-.772c-.272-.246-.528-.524-.8-.771s-.528-.525-.8-.771c-.272-.247-.528-.525-.8-.772s-.528-.524-.8-.771s-.528-.525-.8-.772s-.528-.524-.8-.771c7.936 7.52 12.483 17.752 12.656 28.481c0 25.565-26.912 46.363-60 46.363c-18.528 0-35.104-6.526-46.128-16.756l.8.772l.8.771l.8.772l.8.771l.8.772l.8.771l.8.771c11.008 10.662 27.952 17.527 46.928 17.527c33.088 0 60-20.797 60-46.285c0-10.893-4.864-21.215-13.456-29.33"/>
+  <path fill="#fbf0df" d="M116.8 65.08c0 23.467-25.072 42.49-56 42.49s-56-19.023-56-42.49c0-14.55 9.6-27.401 24.352-35.023S53.088 14.628 60.8 14.628S75.104 21 92.448 30.058C107.2 37.677 116.8 50.53 116.8 65.08"/>
+  <path fill="#f6dece" d="M116.8 65.08a32.3 32.3 0 0 0-1.28-8.918c-4.368 51.377-69.36 53.846-94.912 38.48c11.486 8.584 25.66 13.144 40.192 12.928c30.88 0 56-19.054 56-42.49"/>
+  <path fill="#fffefc" d="M39.248 27.234c7.152-4.135 16.656-11.896 26-11.911a15.4 15.4 0 0 0-4.448-.695c-3.872 0-8 1.93-13.2 4.83c-1.808 1.018-3.68 2.144-5.664 3.317c-3.728 2.222-8 4.736-12.8 7.251C13.904 37.972 4.8 51.071 4.8 65.08v1.836c9.696-33.033 27.312-35.547 34.448-39.682"/>
+  <path fill="#ccbea7" d="M56.192 18.532A24.55 24.55 0 0 1 53.867 29.1a25.4 25.4 0 0 1-6.683 8.671c-.448.386-.096 1.127.48.91c5.392-2.02 12.672-8.068 9.6-20.272c-.128-.695-1.072-.51-1.072.123m3.632 0a24.5 24.5 0 0 1 3.646 10.12c.445 3.587.08 7.224-1.07 10.662c-.192.54.496 1.003.88.556c3.504-4.32 6.56-12.899-2.592-22.156c-.464-.4-1.184.216-.864.756zm4.416-.262a25.7 25.7 0 0 1 7.521 7.925A24.7 24.7 0 0 1 75.2 36.414c-.016.13.02.26.101.365a.543.543 0 0 0 .718.117a.5.5 0 0 0 .221-.313c1.472-5.384.64-14.564-11.472-19.332c-.64-.246-1.056.587-.528.957zM34.704 34.315a27.4 27.4 0 0 0 9.91-5.222a26.3 26.3 0 0 0 6.842-8.663c.288-.556 1.2-.34 1.056.277c-2.768 12.343-12.032 14.92-17.792 14.58c-.608.016-.592-.802-.016-.972"/>
+  <path d="M60.8 111.443c-33.088 0-60-20.798-60-46.363c0-15.429 9.888-29.823 26.448-38.448c4.8-2.469 8.912-4.953 12.576-7.128c2.016-1.203 3.92-2.33 5.76-3.379C51.2 12.916 56 10.771 60.8 10.771s8.992 1.852 14.24 4.845c1.6.88 3.2 1.836 4.912 2.885c3.984 2.376 8.48 5.06 14.4 8.131c16.56 8.625 26.448 23.004 26.448 38.448c0 25.565-26.912 46.363-60 46.363m0-96.814c-3.872 0-8 1.928-13.2 4.829c-1.808 1.018-3.68 2.144-5.664 3.317c-3.728 2.222-8 4.736-12.8 7.251C13.904 37.972 4.8 51.071 4.8 65.08c0 23.436 25.12 42.506 56 42.506s56-19.07 56-42.506c0-14.01-9.104-27.108-24.352-35.023c-6.048-3.086-10.768-5.986-14.592-8.27c-1.744-1.033-3.344-1.99-4.8-2.838c-4.848-2.778-8.384-4.32-12.256-4.32"/>
+  <path fill="#b71422" d="M72.08 76.343c-.719 2.839-2.355 5.383-4.672 7.267a11.07 11.07 0 0 1-6.4 2.9a11.13 11.13 0 0 1-6.608-2.9c-2.293-1.892-3.906-4.436-4.608-7.267a1.1 1.1 0 0 1 .05-.5a1.1 1.1 0 0 1 .272-.428a1.19 1.19 0 0 1 .958-.322h19.744a1.19 1.19 0 0 1 .947.33a1.07 1.07 0 0 1 .317.92"/>
+  <path fill="#ff6164" d="M54.4 83.733a11.24 11.24 0 0 0 6.592 2.932a11.24 11.24 0 0 0 6.576-2.932a17 17 0 0 0 1.6-1.65a10.9 10.9 0 0 0-3.538-2.564a11.3 11.3 0 0 0-4.302-1a10.1 10.1 0 0 0-4.549 1.192a9.7 9.7 0 0 0-3.451 3.097c.368.323.688.632 1.072.925"/>
+  <path d="M54.656 82.514a8.5 8.5 0 0 1 2.97-2.347a8.8 8.8 0 0 1 3.734-.862a9.78 9.78 0 0 1 6.4 2.608c.368-.386.72-.787 1.056-1.188c-2.035-1.87-4.726-2.933-7.536-2.978a10.5 10.5 0 0 0-4.335.975a10.1 10.1 0 0 0-3.489 2.666q.568.595 1.2 1.126"/>
+  <path d="M60.944 87.436a12.08 12.08 0 0 1-7.12-3.086c-2.477-2.02-4.22-4.75-4.976-7.791c-.054-.27-.045-.55.027-.817a1.8 1.8 0 0 1 .389-.726a2.25 2.25 0 0 1 .81-.595a2.3 2.3 0 0 1 .998-.192h19.744c.343-.007.683.06.996.196a2.3 2.3 0 0 1 .812.591c.182.212.313.46.382.728c.07.267.076.545.018.815c-.756 3.042-2.5 5.771-4.976 7.791a12.08 12.08 0 0 1-7.104 3.086m-9.872-11.417c-.256 0-.32.108-.336.139c.676 2.638 2.206 4.999 4.368 6.742a10.12 10.12 0 0 0 5.84 2.7a10.2 10.2 0 0 0 5.84-2.67c2.155-1.745 3.679-4.106 4.352-6.741a.33.33 0 0 0-.14-.113a.35.35 0 0 0-.18-.026z"/>
+  <path fill="#febbd0" d="M85.152 77.3c5.17 0 9.36-2.377 9.36-5.308s-4.19-5.307-9.36-5.307s-9.36 2.376-9.36 5.307s4.19 5.307 9.36 5.307zm-48.432 0c5.17 0 9.36-2.377 9.36-5.308s-4.19-5.307-9.36-5.307s-9.36 2.376-9.36 5.307s4.19 5.307 9.36 5.307z"/>
+  <path d="M41.12 69.863a9.05 9.05 0 0 0 4.902-1.425a8.6 8.6 0 0 0 3.254-3.812a8.2 8.2 0 0 0 .508-4.913a8.4 8.4 0 0 0-2.408-4.357a8.9 8.9 0 0 0-4.514-2.33a9.1 9.1 0 0 0-5.096.48a8.76 8.76 0 0 0-3.96 3.131a8.3 8.3 0 0 0-1.486 4.725c0 2.252.927 4.412 2.577 6.005c1.65 1.594 3.888 2.492 6.223 2.496m39.632 0a9.05 9.05 0 0 0 4.915-1.403a8.6 8.6 0 0 0 3.275-3.802a8.2 8.2 0 0 0 .528-4.917a8.4 8.4 0 0 0-2.398-4.368a8.9 8.9 0 0 0-4.512-2.344a9.1 9.1 0 0 0-5.103.473a8.76 8.76 0 0 0-3.967 3.13a8.3 8.3 0 0 0-1.49 4.73c-.004 2.245.914 4.4 2.555 5.994c1.64 1.593 3.869 2.495 6.197 2.507"/>
+  <path fill="#fff" d="M38.4 61.902a3.4 3.4 0 0 0 1.844-.531c.547-.35.974-.847 1.227-1.43a3.1 3.1 0 0 0 .195-1.847a3.16 3.16 0 0 0-.902-1.639a3.35 3.35 0 0 0-1.696-.878a3.43 3.43 0 0 0-1.916.179a3.3 3.3 0 0 0-1.489 1.176a3.1 3.1 0 0 0-.559 1.776c0 .844.347 1.654.964 2.253a3.37 3.37 0 0 0 2.332.94zm39.632 0a3.4 3.4 0 0 0 1.844-.531c.547-.35.974-.847 1.227-1.43a3.1 3.1 0 0 0 .195-1.847a3.16 3.16 0 0 0-.902-1.639a3.35 3.35 0 0 0-1.696-.878a3.43 3.43 0 0 0-1.916.179a3.3 3.3 0 0 0-1.489 1.176a3.1 3.1 0 0 0-.559 1.776c0 .84.342 1.644.953 2.242c.61.598 1.44.94 2.311.952z"/>
+</svg>

package/scaffold/vanilla/icons/devicons/Npm.svg

@@ -0,0 +1,8 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+  viewBox="0 0 128 128"
+  aria-hidden="true"
+>
+  <path fill="#cb3837" d="M0 7.062C0 3.225 3.225 0 7.062 0h113.88c3.838 0 7.063 3.225 7.063 7.062v113.88c0 3.838-3.225 7.063-7.063 7.063H7.062c-3.837 0-7.062-3.225-7.062-7.063zm23.69 97.518h40.395l.05-58.532h19.494l-.05 58.581h19.543l.05-78.075l-78.075-.1l-.1 78.126z"/>
+  <path fill="#fff" d="M25.105 65.52V26.512H40.96c8.72 0 26.274.034 39.008.075l23.153.075v77.866H83.645v-58.54H64.057v58.54H25.105z"/>
+</svg>

package/scaffold/vanilla/icons/devicons/Pnpm.svg

@@ -0,0 +1,8 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+  viewBox="0 0 128 128"
+  aria-hidden="true"
+>
+  <path fill="#f8ab00" d="M0 .004V40h39.996V.004Zm43.996 0V40h40V.004Zm44.008 0V40H128V.004Zm0 43.996v39.996H128V44Z"/>
+  <path fill="#4c4c4c" d="M43.996 44v39.996h40V44ZM0 87.996v40h39.996v-40Zm43.996 0v40h40v-40Zm44.008 0v40H128v-40Z"/>
+</svg>

package/scaffold/vanilla/icons/devicons/Yarn.svg

@@ -0,0 +1,7 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+  viewBox="0 0 128 128"
+  aria-hidden="true"
+>
+  <path fill="#2c8ebb" d="M64 0a64 64 0 1 0 64 64A64 64 0 0 0 64 0m4.685 21.948a5.04 5.04 0 0 1 2.21.802c.671.444 1.528 1.032 4.026 6.194a4.84 4.84 0 0 1 2.942-.103a3.93 3.93 0 0 1 2.468 2.004c2.55 4.893 2.889 13.614 1.774 19.22a34.9 34.9 0 0 1-6.028 13.74a26.6 26.6 0 0 1 5.957 9.733a26.2 26.2 0 0 1 1.456 10.746a30 30 0 0 0 3.22-1.796c3.158-1.951 7.927-4.894 13.615-4.966a6.834 6.834 0 0 1 7.225 5.885a6.555 6.555 0 0 1-5.046 7.256c-3.458.836-5.069 1.486-9.714 4.5a69.2 69.2 0 0 1-16.062 7.412a9 9 0 0 1-3.758 1.828c-3.933.96-17.425 1.682-18.488 1.682h-.248c-4.13 0-6.47-1.28-7.73-2.621c-3.51 1.755-8.052 1.03-11.355-.714a5.73 5.73 0 0 1-3.097-4.024a6.2 6.2 0 0 1 0-2.127a7 7 0 0 1-.816-1.032a16.9 16.9 0 0 1-2.333-10.386c.3-3.85 2.964-7.287 4.698-9.114A29.5 29.5 0 0 1 35.726 64a27.7 27.7 0 0 1 7.04-9.29c-1.703-2.87-3.436-7.288-1.754-11.789c1.208-3.21 2.199-4.996 4.377-5.76a7.1 7.1 0 0 0 2.59-1.383a18.22 18.22 0 0 1 12.243-5.843c.196-.495.423-1.033.671-1.508c1.652-3.51 3.406-5.48 5.46-6.193a5.04 5.04 0 0 1 2.332-.286m-.558 3.697c-2.703.089-5.355 8.099-5.355 8.099a14.45 14.45 0 0 0-12.089 4.645a9.95 9.95 0 0 1-3.973 2.345c-.424.144-.94.122-2.22 3.58c-1.961 5.234 3.345 11.16 3.345 11.16s-6.328 4.47-8.672 10.034a25.6 25.6 0 0 0-1.806 12.057s-4.5 3.901-4.788 7.927a13.3 13.3 0 0 0 1.826 8.083a2.003 2.003 0 0 0 2.714.94s-2.993 3.487-.196 4.963c2.55 1.331 6.844 2.065 9.115-.196c1.652-1.651 1.982-5.335 2.591-6.842c.144-.351.64.588 1.115 1.032a10.3 10.3 0 0 0 1.403 1.032s-4.024 1.734-2.373 5.688c.547 1.31 2.498 2.145 5.688 2.125c1.187 0 14.203-.743 17.671-1.58a4.47 4.47 0 0 0 2.696-1.505a65 65 0 0 0 15.99-7.226c4.892-3.19 6.895-4.059 10.848-4.998c3.262-.774 3.045-5.83-1.28-5.758c-4.48.052-8.402 2.363-11.716 4.427c-6.193 3.83-9.29 3.583-9.29 3.583l-.105-.175c-.423-.692 1.983-6.896-.712-14.287c-2.91-8.082-7.534-10.033-7.163-10.653c1.58-2.673 5.534-6.917 7.113-14.824c.94-4.79.691-12.676-1.435-16.805c-.393-.764-3.902 1.28-3.902 1.28s-3.283-7.319-4.201-7.907a1.44 1.44 0 0 0-.839-.244"/>
+</svg>

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">
@@ -303,6 +330,16 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -458,6 +495,16 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
 
 
 

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>