rizzo-css 0.0.39 → 0.0.41

package/scaffold/config/fonts.ts

@@ -0,0 +1,51 @@
+/**
+ * Font pairs (sans + mono) for the Settings font changer.
+ * Each option sets both --font-family (body/UI) and --font-family-mono (code blocks, pre, kbd).
+ * Used by Settings components and layout flash scripts to apply and persist the chosen pair.
+ *
+ * Optional future pairs (add @font-face + vars in variables.css, then add to FONT_PAIRS):
+ * - dm: DM Sans + DM Mono (OFL; Google Fonts; geometric, friendly)
+ * - outfit-jetbrains: Outfit + JetBrains Mono (OFL; geometric sans + coding mono)
+ */
+
+export interface FontPairEntry {
+  value: string;
+  label: string;
+  /** CSS value for --font-family (sans stack) */
+  sans: string;
+  /** CSS value for --font-family-mono */
+  mono: string;
+}
+
+export const FONT_PAIR_DEFAULT = 'geist' as const;
+
+export const FONT_PAIRS: FontPairEntry[] = [
+  {
+    value: 'geist',
+    label: 'Geist (Sans + Mono)',
+    sans: 'var(--font-family-geist-sans)',
+    mono: 'var(--font-family-geist-mono)',
+  },
+  {
+    value: 'inter-jetbrains',
+    label: 'Inter + JetBrains Mono',
+    sans: 'var(--font-family-inter)',
+    mono: 'var(--font-family-jetbrains-mono)',
+  },
+  {
+    value: 'ibm-plex',
+    label: 'IBM Plex Sans + Mono',
+    sans: 'var(--font-family-ibm-plex-sans)',
+    mono: 'var(--font-family-ibm-plex-mono)',
+  },
+  {
+    value: 'source',
+    label: 'Source Sans 3 + Source Code Pro',
+    sans: 'var(--font-family-source-sans-3)',
+    mono: 'var(--font-family-source-code-pro)',
+  },
+];
+
+export function getFontPairById(id: string): FontPairEntry | undefined {
+  return FONT_PAIRS.find((p) => p.value === id);
+}

package/scaffold/svelte/Settings.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { FONT_PAIRS, FONT_PAIR_DEFAULT } from '../../config/fonts';
+
   interface Props {
     open?: boolean;
   }
@@ -6,6 +8,30 @@
   let openInternal = $state(false);
   const open = $derived(openProp !== undefined ? openProp : openInternal);
 
+  let fontSizeLabel = $state('100%');
+  let fontSizeSlider = $state(1);
+  let fontPairValue = $state(typeof localStorage !== 'undefined' ? localStorage.getItem('fontPair') || FONT_PAIR_DEFAULT : FONT_PAIR_DEFAULT);
+  let reducedMotion = $state(typeof localStorage !== 'undefined' && localStorage.getItem('reducedMotion') === 'true');
+  let highContrast = $state(typeof localStorage !== 'undefined' && localStorage.getItem('highContrast') === 'true');
+  let scrollbarStyle = $state((typeof localStorage !== 'undefined' ? localStorage.getItem('scrollbarStyle') || 'thin' : 'thin') as 'thin' | 'thick' | 'hidden');
+
+  function applyFontSize(scale: number) {
+    if (typeof document === 'undefined') return;
+    document.documentElement.style.setProperty('--font-size-scale', String(scale));
+    localStorage?.setItem('fontSizeScale', String(scale));
+    fontSizeLabel = `${Math.round(scale * 100)}%`;
+  }
+
+  function applyFontPair(value: string) {
+    if (typeof document === 'undefined') return;
+    const pair = FONT_PAIRS.find((p) => p.value === value);
+    if (pair) {
+      document.documentElement.style.setProperty('--font-family', pair.sans);
+      document.documentElement.style.setProperty('--font-family-mono', pair.mono);
+      localStorage?.setItem('fontPair', value);
+    }
+  }
+
   $effect(() => {
     (window as unknown as { openSettings?: () => void }).openSettings = () => {
       openInternal = true;
@@ -26,9 +52,60 @@
     return () => document.removeEventListener('keydown', onEscape);
   });
 
+  $effect(() => {
+    if (open && typeof document !== 'undefined') {
+      const saved = localStorage?.getItem('fontSizeScale');
+      const scale = saved ? parseFloat(saved) : 1;
+      fontSizeSlider = scale;
+      fontSizeLabel = `${Math.round(scale * 100)}%`;
+      const savedPair = localStorage?.getItem('fontPair') || FONT_PAIR_DEFAULT;
+      fontPairValue = savedPair;
+      reducedMotion = localStorage?.getItem('reducedMotion') === 'true';
+      highContrast = localStorage?.getItem('highContrast') === 'true';
+      scrollbarStyle = (localStorage?.getItem('scrollbarStyle') || 'thin') as 'thin' | 'thick' | 'hidden';
+    }
+  });
+
   function close() {
     openInternal = false;
   }
+
+  function onFontSizeInput(e: Event) {
+    const target = e.target as HTMLInputElement;
+    const scale = parseFloat(target.value);
+    fontSizeSlider = scale;
+    applyFontSize(scale);
+  }
+
+  function onFontPairChange(e: Event) {
+    const target = e.target as HTMLSelectElement;
+    const value = target.value;
+    fontPairValue = value;
+    applyFontPair(value);
+  }
+
+  function onReducedMotionChange(e: Event) {
+    const checked = (e.target as HTMLInputElement).checked;
+    reducedMotion = checked;
+    localStorage?.setItem('reducedMotion', checked ? 'true' : '');
+    document.documentElement.classList.toggle('reduced-motion', checked);
+  }
+
+  function onHighContrastChange(e: Event) {
+    const checked = (e.target as HTMLInputElement).checked;
+    highContrast = checked;
+    localStorage?.setItem('highContrast', checked ? 'true' : '');
+    document.documentElement.classList.toggle('high-contrast', checked);
+  }
+
+  function onScrollbarStyleChange(e: Event) {
+    const value = (e.target as HTMLInputElement).value as 'thin' | 'thick' | 'hidden';
+    scrollbarStyle = value;
+    localStorage?.setItem('scrollbarStyle', value);
+    document.documentElement.classList.remove('scrollbar-thick', 'scrollbar-hidden', 'hide-scrollbars');
+    if (value === 'thick') document.documentElement.classList.add('scrollbar-thick');
+    else if (value === 'hidden') document.documentElement.classList.add('scrollbar-hidden', 'hide-scrollbars');
+  }
 </script>
 
 <div class="settings" data-settings aria-hidden={!open}>
@@ -46,7 +123,84 @@
       <button type="button" class="settings__close" data-settings-close aria-label="Close settings" onclick={close}>×</button>
     </div>
     <div class="settings__content">
-      <p>Theme, font size, and accessibility options. Wire to your state or use <code>window.openSettings</code>.</p>
+      <section class="settings__section">
+        <h3 class="settings__section-title">Font Size</h3>
+        <div class="settings__control">
+          <label for="font-size-slider" class="settings__label">
+            <span class="settings__label-text">Adjust text size</span>
+            <span class="settings__label-value">{fontSizeLabel}</span>
+          </label>
+          <input
+            type="range"
+            id="font-size-slider"
+            class="settings__slider"
+            min="0.75"
+            max="1.5"
+            step="0.05"
+            value={fontSizeSlider}
+            oninput={onFontSizeInput}
+            aria-label="Font size"
+            data-font-size-slider
+            style="--slider-progress: {((fontSizeSlider - 0.75) / 0.75) * 100}%;"
+          />
+          <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%;"
+            value={fontPairValue}
+            onchange={onFontPairChange}
+          >
+            {#each FONT_PAIRS as pair}
+              <option value={pair.value} data-sans={pair.sans} data-mono={pair.mono}>{pair.label}</option>
+            {/each}
+          </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">
+          <label class="settings__checkbox-label">
+            <input type="checkbox" class="settings__checkbox" aria-label="Reduce motion" checked={reducedMotion} onchange={onReducedMotionChange} />
+            <span>Reduce motion</span>
+          </label>
+          <p class="settings__help-text">Minimize animations and transitions</p>
+        </div>
+        <div class="settings__control">
+          <label class="settings__checkbox-label">
+            <input type="checkbox" class="settings__checkbox" aria-label="High contrast" checked={highContrast} onchange={onHighContrastChange} />
+            <span>High contrast</span>
+          </label>
+          <p class="settings__help-text">Increase contrast for better visibility</p>
+        </div>
+        <div class="settings__control">
+          <div class="settings__label"><span class="settings__label-text">Scrollbar style</span></div>
+          <div class="settings__radio-group" role="radiogroup" aria-label="Scrollbar style">
+            <label class="settings__radio-label">
+              <input type="radio" name="scrollbar-style" value="thin" class="settings__radio" aria-label="Thin scrollbar" checked={scrollbarStyle === 'thin'} onchange={onScrollbarStyleChange} />
+              <span>Thin</span>
+            </label>
+            <label class="settings__radio-label">
+              <input type="radio" name="scrollbar-style" value="thick" class="settings__radio" aria-label="Thick scrollbar" checked={scrollbarStyle === 'thick'} onchange={onScrollbarStyleChange} />
+              <span>Thick</span>
+            </label>
+            <label class="settings__radio-label">
+              <input type="radio" name="scrollbar-style" value="hidden" class="settings__radio" aria-label="Hidden scrollbars" checked={scrollbarStyle === 'hidden'} onchange={onScrollbarStyleChange} />
+              <span>Hidden</span>
+            </label>
+          </div>
+          <p class="settings__help-text">Choose your preferred scrollbar appearance</p>
+        </div>
+      </section>
     </div>
   </div>
 </div>

package/scaffold/svelte/icons/devicons/Bun.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  interface Props {
+    width?: number;
+    height?: number;
+    class?: string;
+  }
+  let { width = 16, height = 16, class: className = '' }: Props = $props();
+</script>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  {width}
+  {height}
+  viewBox="0 0 128 128"
+  class={className}
+  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/svelte/icons/devicons/Npm.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  interface Props {
+    width?: number;
+    height?: number;
+    class?: string;
+  }
+  let { width = 16, height = 16, class: className = '' }: Props = $props();
+</script>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  {width}
+  {height}
+  viewBox="0 0 128 128"
+  class={className}
+  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/svelte/icons/devicons/Pnpm.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  interface Props {
+    width?: number;
+    height?: number;
+    class?: string;
+  }
+  let { width = 16, height = 16, class: className = '' }: Props = $props();
+</script>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  {width}
+  {height}
+  viewBox="0 0 128 128"
+  class={className}
+  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/svelte/icons/devicons/Yarn.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  interface Props {
+    width?: number;
+    height?: number;
+    class?: string;
+  }
+  let { width = 16, height = 16, class: className = '' }: Props = $props();
+</script>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  {width}
+  {height}
+  viewBox="0 0 128 128"
+  class={className}
+  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/{svelte-minimal → svelte-core}/README-RIZZO.md

@@ -14,7 +14,7 @@
       Design system · Vanilla · Astro · Svelte
 ```
 
-SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init --framework svelte --template full`, **minimal**, or **manual**. When you choose **Full** or **Minimal**, the CLI copies all interactive Rizzo components (Button, Modal, Navbar, Search, Settings, ThemeSwitcher, etc.) into this project so they work together; **Manual** lets you pick which of those to include (all are pre-selected by default).
+SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init --framework svelte --template full` or **manual**. When you choose **Full**, the CLI copies all 29 Rizzo components (Button, Modal, Navbar, Search, Settings, ThemeSwitcher, etc.) into this project so they work together; **Manual** lets you pick which of those to include (all are pre-selected by default).
 
 ## Setup
 

package/scaffold/vanilla/README-RIZZO.md

@@ -66,7 +66,7 @@ pnpm dlx serve .
 
 ## Other scaffolds
 
-- **Astro:** `scaffold/astro-minimal/` — Astro app (Full or Minimal template); optional components from `scaffold/astro/` (see README-RIZZO.md).
-- **Svelte:** `scaffold/svelte-minimal/` — SvelteKit app (Full or Minimal template); optional components from `scaffold/svelte/` (see README-RIZZO.md).
+- **Astro:** `scaffold/astro-core/` — Astro app (Full or Manual template); optional components from `scaffold/astro/` (see README-RIZZO.md).
+- **Svelte:** `scaffold/svelte-core/` — SvelteKit app (Full or Manual template); optional components from `scaffold/svelte/` (see README-RIZZO.md).
 
 Docs: [rizzo-css.vercel.app](https://rizzo-css.vercel.app)

package/scaffold/vanilla/components/accordion.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/alert.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/avatar.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/badge.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 @@
 
 
 
+
+
+
+
+
+
+
+
+
+