rizzo-css 0.0.80 → 0.0.82

package/scaffold/react/variants/full/src/views/Home.tsx

@@ -0,0 +1,104 @@
+import { Link } from 'react-router-dom';
+import CopyToClipboard from '@/components/rizzo/CopyToClipboard';
+
+const ADD_COMMAND = 'npx rizzo-css add <ComponentName>';
+
+export default function Home() {
+  return (
+    <main id="main-content" className="home">
+      <div className="home__container">
+        <header className="home__hero">
+          <h1 className="home__title">Rizzo CSS</h1>
+          <p className="home__subtitle">
+            A modern CSS design system with semantic theming, accessibility-first components, and one CLI for Vanilla, Astro, Svelte, React, and Vue. Start here then make it your own.
+          </p>
+          <div className="home__hero-ctas">
+            <Link to="/docs/getting-started" className="btn btn-primary home__hero-cta">Get Started</Link>
+            <Link to="/docs/components" className="btn btn-outline home__hero-cta">View Components</Link>
+          </div>
+        </header>
+
+        <section className="home__features" aria-labelledby="home-features-heading">
+          <h2 id="home-features-heading" className="home__section-title">Features</h2>
+          <p className="home__features-intro">A complete design system that works across Vanilla, Astro, Svelte, React, and Vue — same CSS, same components, zero lock-in.</p>
+          <div className="home__features-featured">
+            <div className="home__card home__card--featured">
+              <span className="home__card-icon" aria-hidden="true">Themes</span>
+              <h3>14 beautiful themes</h3>
+              <p>7 dark and 7 light with OKLCH for perceptual uniformity. System preference, persistence, and a unique icon per theme.</p>
+            </div>
+            <div className="home__card home__card--featured">
+              <span className="home__card-icon" aria-hidden="true">A11y</span>
+              <h3>Accessibility first</h3>
+              <p>WCAG AA compliant with full keyboard navigation, ARIA, focus management, and screen reader support.</p>
+            </div>
+            <div className="home__card home__card--featured">
+              <span className="home__card-icon" aria-hidden="true">Components</span>
+              <h3>All components</h3>
+              <p>Navbar, Settings, Theme Switcher, Font Switcher, Modal, Dropdown, Tabs, Forms, and more — all accessible and themeable.</p>
+            </div>
+          </div>
+          <h3 className="home__features-supporting-label">And more</h3>
+          <div className="home__grid home__grid--supporting">
+            <div className="home__card home__card--supporting">
+              <h3>Semantic variables</h3>
+              <p>CSS variables that adapt to themes. No hardcoded colors; override once, update everywhere.</p>
+            </div>
+            <div className="home__card home__card--supporting">
+              <h3>PostCSS powered</h3>
+              <p>Imports, autoprefixing, and production minification. Fits into any build pipeline.</p>
+            </div>
+            <div className="home__card home__card--supporting">
+              <h3>Typography & spacing</h3>
+              <p>Scaling font sizes, weights, line heights, and a consistent spacing scale (0–24).</p>
+            </div>
+            <div className="home__card home__card--supporting">
+              <h3>Responsive & utilities</h3>
+              <p>Mobile-first breakpoints and utility classes for layout, display, and flexbox.</p>
+            </div>
+          </div>
+        </section>
+
+        <section className="home__add-command" aria-labelledby="home-add-command-heading">
+          <h2 id="home-add-command-heading" className="home__section-title">Add a component</h2>
+          <p className="home__features-intro" style={{ marginBottom: 'var(--spacing-4)' }}>Add any component from the CLI:</p>
+          <div className="home__add-command-block">
+            <pre><code>npx rizzo-css add &lt;ComponentName&gt;</code></pre>
+            <CopyToClipboard value={ADD_COMMAND} iconOnly buttonLabel="Copy" format="command" label="Copy command" className="home__add-command-copy" />
+          </div>
+        </section>
+
+        <section className="home__docs">
+          <h2 className="home__section-title">Documentation</h2>
+          <div className="home__docs-grid">
+            <Link to="/docs/getting-started" className="home__doc-card">
+              <h3>Getting Started</h3>
+              <p>Installation, project structure, and quick start guide</p>
+            </Link>
+            <Link to="/docs/components" className="home__doc-card">
+              <h3>Components</h3>
+              <p>Component library with usage examples and live demos</p>
+            </Link>
+            <Link to="/themes" className="home__doc-card">
+              <h3>Themes</h3>
+              <p>Theme system, 14 themes, and live preview</p>
+            </Link>
+            <Link to="/blocks" className="home__doc-card">
+              <h3>Blocks</h3>
+              <p>Pre-built layouts: landing, pricing, dashboard, docs, login, signup</p>
+            </Link>
+            <Link to="/docs" className="home__doc-card">
+              <h3>Docs Overview</h3>
+              <p>Condensed index of documentation and links</p>
+            </Link>
+            <a href="https://rizzo-css.vercel.app/docs/theming" className="home__doc-card" target="_blank" rel="noopener noreferrer">
+              <h3>Theming (full docs)</h3>
+              <p>Custom themes, persistence, color format — on main site</p>
+              <span className="sr-only"> (opens in new tab)</span>
+            </a>
+          </div>
+        </section>
+      </div>
+    </main>
+  );
+}

package/scaffold/react/variants/full/src/views/Themes.tsx

@@ -0,0 +1,118 @@
+import { Link } from 'react-router-dom';
+import ThemeIcon from '@/components/rizzo/ThemeIcon';
+import ThemeSwitcher from '@/components/rizzo/ThemeSwitcher';
+import Card from '@/components/rizzo/Card';
+import CopyToClipboard from '@/components/rizzo/CopyToClipboard';
+import { THEMES_DARK, THEMES_LIGHT } from '@/components/rizzo/themes';
+
+const defaultTheme = 'github-dark-classic';
+const snippet = `<html lang="en" data-theme="${defaultTheme}">`;
+
+const themeCardContent: Record<string, { description: string; author: string }> = {
+  'github-dark-classic': { description: 'Official GitHub dark theme for VS Code', author: 'Primer (GitHub)' },
+  'shades-of-purple': { description: 'Professional theme with bold purple shades', author: 'Ahmad Awais' },
+  'sandstorm-classic': { description: 'Dark, red-based theme for late-night coding', author: 'Devan Sisson' },
+  'rocky-blood-orange': { description: 'Dark theme with blood-orange accent', author: 'Luca Heyworth' },
+  'minimal-dark-neon-yellow': { description: 'Minimal dark theme with neon yellow accent', author: 'Gabriel D Sanchez' },
+  'hack-the-box': { description: 'Dark blue with lime green accent, built for hackers', author: 'silofy' },
+  'pink-cat-boo': { description: 'Sweet and cute dark theme with rose pink accents', author: 'Fiona Fan' },
+  'github-light': { description: 'Official GitHub light theme for VS Code', author: 'Primer (GitHub)' },
+  'red-velvet-cupcake': { description: 'Velvet-cupcake light theme with red accent', author: 'Fahad Ashraf Chaudhry' },
+  'orangy-one-light': { description: 'Light theme with orange accent', author: 'maher-cshub' },
+  sunflower: { description: 'Yellow light theme', author: 'Hashirama Naiff' },
+  'green-breeze-light': { description: 'Green and blue focused light theme with good contrast', author: 'icy9ptcl' },
+  'cute-pink': { description: 'Cute pink light theme for VSCode', author: 'WebFreak' },
+  'semi-light-purple': { description: 'Light aesthetic theme with soft purple tones', author: 'Kapil Yadav' },
+};
+
+function applyTheme(value: string) {
+  if (typeof document !== 'undefined') {
+    document.documentElement.setAttribute('data-theme', value);
+  }
+}
+
+export default function Themes() {
+  return (
+    <div className="themes-page">
+      <div className="themes-page__container">
+        <header className="themes-page__hero">
+          <h1 id="available-themes" className="themes-page__title">Available Themes</h1>
+          <p className="themes-page__subtitle">
+            Rizzo CSS includes 14 themes. Switch instantly via the Settings panel (gear icon in the navbar) or try the Theme Switcher below. Each theme uses semantic OKLCH variables.
+          </p>
+          <div className="themes-page__hero-demo example">
+            <div className="example-title">Try Themes</div>
+            <ThemeSwitcher idPrefix="page" />
+          </div>
+          <div className="themes-page__hero-ctas">
+            <a href="https://rizzo-css.vercel.app/docs/theming" className="btn btn-primary themes-page__hero-cta" target="_blank" rel="noopener noreferrer">Theming docs</a>
+            <Link to="/docs/components" className="btn btn-outline themes-page__hero-cta">Components</Link>
+          </div>
+        </header>
+
+        <div className="themes-page__main">
+          <section className="themes-page__section" aria-labelledby="dark-themes">
+            <h2 id="dark-themes" className="themes-page__section-title">Dark Themes</h2>
+            <div className="themes-page__grid">
+              {THEMES_DARK.map((theme) => {
+                const content = themeCardContent[theme.value];
+                return (
+                  <Card key={theme.value} variant="elevated">
+                    <div className="card__body">
+                      <div className="themes-page__card-header">
+                        <ThemeIcon themeId={theme.value} size={24} className="themes-page__card-icon" />
+                        <h3 className="themes-page__card-title">
+                          <button type="button" className="themes-page__card-title-btn" onClick={() => applyTheme(theme.value)}>
+                            {theme.label}
+                          </button>
+                        </h3>
+                      </div>
+                      {content && <p className="themes-page__card-desc">{content.description}</p>}
+                      {content && <p className="themes-page__card-meta"><strong>Author:</strong> {content.author}</p>}
+                      <p className="themes-page__card-meta"><code>{theme.value}</code></p>
+                    </div>
+                  </Card>
+                );
+              })}
+            </div>
+          </section>
+
+          <section className="themes-page__section" aria-labelledby="light-themes">
+            <h2 id="light-themes" className="themes-page__section-title">Light Themes</h2>
+            <div className="themes-page__grid">
+              {THEMES_LIGHT.map((theme) => {
+                const content = themeCardContent[theme.value];
+                return (
+                  <Card key={theme.value} variant="elevated">
+                    <div className="card__body">
+                      <div className="themes-page__card-header">
+                        <ThemeIcon themeId={theme.value} size={24} className="themes-page__card-icon" />
+                        <h3 className="themes-page__card-title">
+                          <button type="button" className="themes-page__card-title-btn" onClick={() => applyTheme(theme.value)}>
+                            {theme.label}
+                          </button>
+                        </h3>
+                      </div>
+                      {content && <p className="themes-page__card-desc">{content.description}</p>}
+                      {content && <p className="themes-page__card-meta"><strong>Author:</strong> {content.author}</p>}
+                      <p className="themes-page__card-meta"><code>{theme.value}</code></p>
+                    </div>
+                  </Card>
+                );
+              })}
+            </div>
+          </section>
+
+          <section id="using-themes" className="themes-page__copy-section" aria-labelledby="copy-heading">
+            <h2 id="copy-heading" className="themes-page__section-title">Use a theme in your app</h2>
+            <p className="themes-page__copy-desc">Set the theme on your HTML root. For persistence and custom themes, see the <a href="https://rizzo-css.vercel.app/docs/theming" target="_blank" rel="noopener noreferrer">theming docs</a>.</p>
+            <div className="themes-page__code-block">
+              <pre><code>{snippet}</code></pre>
+              <CopyToClipboard value={snippet} buttonLabel="Copy" format="code" label="Copy snippet" />
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}

package/scaffold/svelte/Settings.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-  import { FONT_PAIRS, FONT_PAIR_DEFAULT } from './config/fonts';
+  import ThemeSwitcher from './ThemeSwitcher.svelte';
+  import FontSwitcher from './FontSwitcher.svelte';
+  import SoundEffects from './SoundEffects.svelte';
 
   interface Props {
     open?: boolean;
@@ -11,8 +13,6 @@
   const isBrowser = typeof window !== 'undefined' && typeof localStorage?.getItem === 'function';
   let fontSizeLabel = $state('100%');
   let fontSizeSlider = $state(1);
-  let fontPairValue = $state(isBrowser ? localStorage.getItem('fontPair') || FONT_PAIR_DEFAULT : FONT_PAIR_DEFAULT);
-  let soundEffects = $state(isBrowser && localStorage.getItem('soundEffects') === 'true');
   let reducedMotion = $state(isBrowser && localStorage.getItem('reducedMotion') === 'true');
   let highContrast = $state(isBrowser && localStorage.getItem('highContrast') === 'true');
   let scrollbarStyle = $state((isBrowser ? localStorage.getItem('scrollbarStyle') || 'thin' : 'thin') as 'thin' | 'thick' | 'hidden');
@@ -24,16 +24,6 @@
     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(() => {
     if (typeof window === 'undefined') return;
     (window as unknown as { openSettings?: () => void }).openSettings = () => {
@@ -61,21 +51,12 @@
       const scale = saved ? parseFloat(saved) : 1;
       fontSizeSlider = scale;
       fontSizeLabel = `${Math.round(scale * 100)}%`;
-      const savedPair = localStorage?.getItem('fontPair') || FONT_PAIR_DEFAULT;
-      fontPairValue = savedPair;
-      soundEffects = localStorage?.getItem('soundEffects') === 'true';
       reducedMotion = localStorage?.getItem('reducedMotion') === 'true';
       highContrast = localStorage?.getItem('highContrast') === 'true';
       scrollbarStyle = (localStorage?.getItem('scrollbarStyle') || 'thin') as 'thin' | 'thick' | 'hidden';
     }
   });
 
-  function onSoundEffectsChange(e: Event) {
-    const checked = (e.target as HTMLInputElement).checked;
-    soundEffects = checked;
-    localStorage?.setItem('soundEffects', checked ? 'true' : 'false');
-  }
-
   function close() {
     openInternal = false;
   }
@@ -87,13 +68,6 @@
     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;
@@ -133,6 +107,12 @@
       <button type="button" class="settings__close" data-settings-close aria-label="Close settings" onclick={close}>×</button>
     </div>
     <div class="settings__content" tabindex="-1" aria-label="Settings options">
+      <section class="settings__section">
+        <h3 class="settings__section-title">Theme</h3>
+        <div class="settings__control">
+          <ThemeSwitcher idPrefix="settings" />
+        </div>
+      </section>
       <section class="settings__section">
         <h3 class="settings__section-title">Font Size</h3>
         <div class="settings__control">
@@ -159,31 +139,14 @@
       <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>
+          <FontSwitcher idPrefix="settings" />
           <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">Sound</h3>
         <div class="settings__control">
-          <label class="settings__checkbox-label">
-            <input type="checkbox" class="settings__checkbox" aria-label="Play sound on click" checked={soundEffects} onchange={onSoundEffectsChange} />
-            <span>Play sound on click</span>
-          </label>
-          <p class="settings__help-text">Short click sound when you interact with buttons and links. Off by default.</p>
+          <SoundEffects showHelp={true} />
         </div>
       </section>
       <section class="settings__section">

package/scaffold/svelte/variants/full/README-RIZZO.md

@@ -44,6 +44,7 @@ SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you
 - `src/routes/+layout.svelte` — Root layout
 - `src/routes/+page.svelte` — Home page
 - **Navbar** — Flat links (Docs, Components, Blocks, Themes, Colors); Search and Settings in the scaffold
+- **Settings** — Slide-in panel (gear icon): Theme (ThemeSwitcher), Font Size, Font (FontSwitcher), Sound (SoundEffects), Accessibility (reduce motion, high contrast, scrollbar style). Same contents as the docs site.
 - `static/css/rizzo.min.css` — Rizzo CSS bundle (added by CLI; font URLs point to `/assets/fonts/`)
 - `static/assets/fonts/` — Rizzo font files (added by CLI)
 - `README-RIZZO.md` — This file (scaffold docs; does not replace your project README)

package/scaffold/svelte/variants/full/src/config/docsNav.ts

@@ -1,5 +1,5 @@
 /**
- * Minimal docs nav for the full template. Matches DOCS_NAV structure so DocsSidebar works.
+ * Docs nav for the full template. Matches main site structure (Introduction, Components, Blocks, Themes).
  */
 export interface DocsNavSection {
   id: string;
@@ -23,8 +23,28 @@ export const DOCS_NAV: DocsNavGroup[] = [
   {
     label: 'Introduction',
     links: [
-      { href: 'overview', label: 'Overview', frameworkOnly: true },
-      { href: 'getting-started', label: 'Getting Started' },
+      {
+        href: 'overview',
+        label: 'Overview',
+        frameworkOnly: true,
+        sections: [
+          { id: 'overview', label: 'Overview' },
+          { id: 'installation', label: 'Installation' },
+          { id: 'components', label: 'Components' },
+          { id: 'blocks', label: 'Blocks' },
+        ],
+      },
+      {
+        href: 'getting-started',
+        label: 'Getting Started',
+        sections: [
+          { id: 'installation', label: 'Installation' },
+          { id: 'project-structure', label: 'Project Structure' },
+          { id: 'development', label: 'Development' },
+          { id: 'using-components', label: 'Using Components' },
+          { id: 'using-themes', label: 'Using Themes' },
+        ],
+      },
     ],
   },
   {

package/scaffold/svelte/variants/full/src/routes/+layout.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import Navbar from '$lib/rizzo/Navbar.svelte';
   import Footer from '$lib/rizzo/Footer.svelte';
   import Settings from '$lib/rizzo/Settings.svelte';
   import BackToTop from '$lib/rizzo/BackToTop.svelte';
+
+  let { children }: { children: Snippet } = $props();
 </script>
 
 <Navbar siteName="Rizzo CSS" />
-<slot />
+{@render children()}
 <Footer />
 <BackToTop />
 <Settings />

package/scaffold/svelte/variants/full/src/routes/blocks/+layout.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import { onMount } from 'svelte';
   import { page } from '$app/stores';
   import BackToTop from '$lib/rizzo/BackToTop.svelte';
 
+  let { children }: { children: Snippet } = $props();
   const currentPath = $derived($page.url.pathname);
   const BLOCKS_NAV = [
     { href: '/blocks', label: 'Overview' },
@@ -64,7 +66,7 @@
       <span class="docs__sidebar-toggle-text">Blocks</span>
     </button>
     <div class="docs__sidebar-overlay" data-docs-sidebar-overlay aria-hidden="true"></div>
-    <aside id="docs-sidebar" class="docs-sidebar" aria-label="Blocks navigation" tabindex="0">
+    <aside id="docs-sidebar" class="docs-sidebar" aria-label="Blocks navigation">
       <nav class="docs-sidebar__nav">
         <div class="docs-sidebar__group">
           <h2 class="docs-sidebar__group-label">Blocks</h2>
@@ -90,7 +92,7 @@
   <div class="docs__main">
     <div class="docs__container">
       <div class="docs__content">
-        <slot />
+        {@render children()}
       </div>
     </div>
   </div>

package/scaffold/svelte/variants/full/src/routes/docs/+layout.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import { onMount } from 'svelte';
   import { page } from '$app/stores';
   import DocsSidebar from '$lib/rizzo/DocsSidebar.svelte';
   import BackToTop from '$lib/rizzo/BackToTop.svelte';
 
+  let { children }: { children: Snippet } = $props();
   const currentPath = $derived($page.url.pathname);
 
   onMount(() => {
@@ -66,7 +68,7 @@
   <div class="docs__main">
     <div class="docs__container">
       <div class="docs__content">
-        <slot />
+        {@render children()}
       </div>
     </div>
   </div>