npm - rizzo-css - Versions diffs - 0.0.53 → 0.0.55 - Mend

rizzo-css 0.0.53 → 0.0.55

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (252) hide show

package/scaffold/vanilla/variants/full/index.html ADDED Viewed

@@ -0,0 +1,682 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="{{DATA_THEME}}">{{THEME_LIST_COMMENT}}
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>{{TITLE}}</title>
+  <!-- Theme flash prevention: apply saved theme/settings before first paint (same as main site) -->
+  <script>
+    (function() {
+      try {
+        var savedTheme = localStorage.getItem('theme');
+        var defaultDark = '{{DEFAULT_DARK}}';
+        var defaultLight = '{{DEFAULT_LIGHT}}';
+        var resolvedTheme;
+        if (!savedTheme) {
+          var initialTheme = document.documentElement.getAttribute('data-theme');
+          resolvedTheme = (initialTheme && initialTheme !== 'system') ? initialTheme : (window.matchMedia('(prefers-color-scheme: dark)').matches ? defaultDark : defaultLight);
+        } else if (savedTheme === 'system') {
+          resolvedTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? defaultDark : defaultLight;
+        } else {
+          resolvedTheme = savedTheme;
+        }
+        document.documentElement.setAttribute('data-theme', resolvedTheme);
+        var savedFontScale = localStorage.getItem('fontSizeScale');
+        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)');
+        } else if (savedFontPair === 'dm') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-dm-sans)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-dm-mono)');
+        } else if (savedFontPair === 'outfit-jetbrains') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-outfit)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-jetbrains-mono)');
+        }
+        if (localStorage.getItem('reducedMotion') === 'true') {
+          document.documentElement.classList.add('reduced-motion');
+        }
+        if (localStorage.getItem('highContrast') === 'true') {
+          document.documentElement.classList.add('high-contrast');
+        }
+        var savedScrollbarStyle = localStorage.getItem('scrollbarStyle') || 'thin';
+        if (savedScrollbarStyle === 'thick') {
+          document.documentElement.classList.add('scrollbar-thick');
+        } else if (savedScrollbarStyle === 'hidden') {
+          document.documentElement.classList.add('scrollbar-hidden', 'hide-scrollbars');
+        }
+        if (!savedScrollbarStyle && localStorage.getItem('hideScrollbars') === 'true') {
+          document.documentElement.classList.add('scrollbar-hidden', 'hide-scrollbars');
+          localStorage.setItem('scrollbarStyle', 'hidden');
+        }
+      } catch (e) {}
+    })();
+  </script>
+  <link rel="stylesheet" href="{{LINK_HREF}}" />
+</head>
+<body>
+  <a href="#main-content" class="skip-link">Skip to main content</a>
+  {{NAVBAR_HTML}}
+  <!-- Settings panel (same structure as main site; CSS from Rizzo) -->
+  <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>
+          <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="4" x2="12" y2="12"></line><line x1="12" y1="4" x2="4" y2="12"></line></svg>
+        </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">
+            <label for="settings-theme" class="settings__label">Theme</label>
+            <select id="settings-theme" class="form-control" aria-label="Theme" data-settings-theme style="width: 100%;">
+              <option value="system">System</option>
+              <optgroup label="Dark themes">
+                <option value="github-dark-classic">GitHub Dark Classic</option>
+                <option value="shades-of-purple">Shades of Purple</option>
+                <option value="sandstorm-classic">Sandstorm Classic</option>
+                <option value="rocky-blood-orange">Rocky Blood Orange</option>
+                <option value="minimal-dark-neon-yellow">Minimal Dark Neon Yellow</option>
+                <option value="hack-the-box">Hack The Box</option>
+                <option value="pink-cat-boo">Pink Cat Boo</option>
+              </optgroup>
+              <optgroup label="Light themes">
+                <option value="github-light">GitHub Light</option>
+                <option value="red-velvet-cupcake">Red Velvet Cupcake</option>
+                <option value="orangy-one-light">Orangy One Light</option>
+                <option value="sunflower">Sunflower</option>
+                <option value="green-breeze-light">Green Breeze Light</option>
+                <option value="cute-pink">Cute Pink</option>
+                <option value="semi-light-purple">Semi Light Purple</option>
+              </optgroup>
+            </select>
+          </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">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>
+              <option value="dm" data-sans="var(--font-family-dm-sans)" data-mono="var(--font-family-dm-mono)">DM Sans + DM Mono</option>
+              <option value="outfit-jetbrains" data-sans="var(--font-family-outfit)" data-mono="var(--font-family-jetbrains-mono)">Outfit + JetBrains Mono</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">
+            <label class="settings__checkbox-label">
+              <input type="checkbox" class="settings__checkbox" data-reduced-motion aria-label="Reduce motion" />
+              <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" data-high-contrast aria-label="High contrast" />
+              <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" data-scrollbar-style aria-label="Thin scrollbar" checked />
+                <span>Thin</span>
+              </label>
+              <label class="settings__radio-label">
+                <input type="radio" name="scrollbar-style" value="thick" class="settings__radio" data-scrollbar-style aria-label="Thick scrollbar" />
+                <span>Thick</span>
+              </label>
+              <label class="settings__radio-label">
+                <input type="radio" name="scrollbar-style" value="hidden" class="settings__radio" data-scrollbar-style aria-label="Hidden scrollbars" />
+                <span>Hidden</span>
+              </label>
+            </div>
+            <p class="settings__help-text">Choose your preferred scrollbar appearance</p>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+  <main id="main-content" class="home">
+    <div class="home__container">
+      <header class="home__hero">
+        <h1 class="home__title">Rizzo CSS</h1>
+        <p class="home__subtitle">A modern CSS design system with semantic theming, accessibility-first components, and one CLI for Vanilla, Astro, and Svelte. Start here then make it your own.</p>
+        <div class="home__hero-ctas">
+          <a href="https://rizzo-css.vercel.app/docs/getting-started" class="btn btn-primary home__hero-cta" target="_blank" rel="noopener noreferrer">Get Started</a>
+          <a href="https://rizzo-css.vercel.app/docs/components" class="btn btn-outline home__hero-cta" target="_blank" rel="noopener noreferrer">View Components</a>
+        </div>
+      </header>
+      <section class="home__features" aria-labelledby="home-features-heading">
+        <h2 id="home-features-heading" class="home__section-title">Features</h2>
+        <p class="home__features-intro">A complete design system that works across Vanilla, Astro, and Svelte — same CSS, same components, zero lock-in.</p>
+        <div class="home__features-featured">
+          <div class="home__card home__card--featured">
+            <span class="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 class="home__card home__card--featured">
+            <span class="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 class="home__card home__card--featured">
+            <span class="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 class="home__features-supporting-label">And more</h3>
+        <div class="home__grid home__grid--supporting">
+          <div class="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 class="home__card home__card--supporting">
+            <h3>PostCSS powered</h3>
+            <p>Imports, autoprefixing, and production minification. Fits into any build pipeline.</p>
+          </div>
+          <div class="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 class="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 class="home__add-command" aria-labelledby="home-add-command-heading">
+        <h2 id="home-add-command-heading" class="home__section-title">Add a component</h2>
+        <p class="home__features-intro" style="margin-bottom: var(--spacing-4);">Add any component from the CLI:</p>
+        <div class="home__add-command-block">
+          <pre><code>npx rizzo-css add &lt;ComponentName&gt;</code></pre>
+          <span class="tooltip-host" data-tooltip="Copy command">
+            <button type="button" class="copy-to-clipboard copy-to-clipboard--icon-only home__add-command-copy" data-copy-value="npx rizzo-css add &lt;ComponentName&gt;" data-copy-format="command" data-copy-icon-only="true" data-copy-button-label="Copy" aria-label="Copy command">
+              <span class="copy-to-clipboard__text">Copy</span>
+              <span class="copy-to-clipboard__icon copy-to-clipboard__icon--copy" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2h8c1.1 0 2 .9 2 2"/></svg></span>
+              <span class="copy-to-clipboard__icon copy-to-clipboard__icon--check" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg></span>
+              <span class="copy-to-clipboard__feedback" aria-live="polite"></span>
+            </button>
+          </span>
+        </div>
+      </section>
+      <section class="home__docs">
+        <h2 class="home__section-title">Documentation</h2>
+        <div class="home__docs-grid">
+          <a href="https://rizzo-css.vercel.app/docs/getting-started" class="home__doc-card" target="_blank" rel="noopener noreferrer">
+            <h3>Getting Started</h3>
+            <p>Installation, project structure, and quick start guide</p>
+          </a>
+          <a href="https://rizzo-css.vercel.app/docs/components" class="home__doc-card" target="_blank" rel="noopener noreferrer">
+            <h3>Components</h3>
+            <p>Component library with usage examples and live demos</p>
+          </a>
+          <a href="https://rizzo-css.vercel.app/docs/theming" class="home__doc-card" target="_blank" rel="noopener noreferrer">
+            <h3>Theming</h3>
+            <p>Theme system, custom themes, and color format guide</p>
+          </a>
+          <a href="https://rizzo-css.vercel.app/docs/design-system" class="home__doc-card" target="_blank" rel="noopener noreferrer">
+            <h3>Design System</h3>
+            <p>Semantic variables, typography, and design principles</p>
+          </a>
+          <a href="https://rizzo-css.vercel.app/docs/accessibility" class="home__doc-card" target="_blank" rel="noopener noreferrer">
+            <h3>Accessibility</h3>
+            <p>Accessibility guidelines, utilities, and best practices</p>
+          </a>
+          <a href="https://rizzo-css.vercel.app/docs/colors" class="home__doc-card" target="_blank" rel="noopener noreferrer">
+            <h3>Colors</h3>
+            <p>Interactive color reference with multiple format options</p>
+          </a>
+        </div>
+      </section>
+    </div>
+  </main>
+  <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">
+    <button type="button" class="back-to-top__btn" aria-label="Back to top" data-back-to-top-btn>
+      <span class="back-to-top__icon" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
+      </span>
+    </button>
+  </div>
+  <script src="js/main.js"></script>
+</body>
+</html>