Rizzo CSS

Settings

Settings panel for theme, font size, and accessibility. Same behavior as Astro and Svelte. The docs layout already includes Settings; open it with the button below or the gear icon in the navbar.

Live example

Open the Settings panel (gear in navbar or button below — same as navbar).

Open Settings

HTML (structure)

Copy the markup below. Ensure Rizzo CSS is loaded. Wire open/close (data-settings-close, overlay click), focus trap, and persistence (theme, fontSizeScale, reducedMotion, highContrast, scrollbarStyle) with your own JS. The Astro Settings component and Vanilla scaffold show full behavior.

<div class="settings" data-settings aria-hidden="true">
  <div class="settings__overlay" data-settings-overlay aria-hidden="true"></div>
  <div class="settings__panel" role="dialog" aria-modal="true" aria-labelledby="settings-title" aria-hidden="true">
    <div class="settings__header">
      <h2 id="settings-title" class="settings__title">Settings</h2>
      <button type="button" class="settings__close" aria-label="Close settings" data-settings-close>×</button>
    </div>
    <div class="settings__content">
      <section class="settings__section">
        <h3 class="settings__section-title">Theme</h3>
        <div class="settings__control"><!-- Theme switcher dropdown --></div>
      </section>
      <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" data-font-size-value>100%</span>
          </label>
          <input type="range" id="font-size-slider" class="settings__slider" min="0.75" max="1.5" step="0.05" value="1" aria-label="Font size" data-font-size-slider style="--slider-progress: 50%;" />
          <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">Accessibility</h3>
        <div class="settings__control"><!-- Reduce motion, high contrast, scrollbar toggles --></div>
      </section>
    </div>
  </div>
</div>

JavaScript (programmatic open/close)

When Settings is in the page (e.g. once in layout), expose:

// Open/close (Settings component in layout registers these)
window.openSettings();
window.closeSettings();

Astro Settings docs — full markup, persistence keys, and behavior.

Astro / Svelte: Astro · Svelte