rizzo-css 0.0.41 → 0.0.43

package/scaffold/vanilla/components/tabs.html

@@ -38,6 +38,12 @@
         } 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');
@@ -185,6 +191,8 @@
               <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>
@@ -333,6 +341,23 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -463,6 +488,23 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/theme-switcher.html

@@ -38,6 +38,12 @@
         } 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');
@@ -185,6 +191,8 @@
               <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>
@@ -333,6 +341,23 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -463,6 +488,23 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/toast.html

@@ -38,6 +38,12 @@
         } 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');
@@ -185,6 +191,8 @@
               <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>
@@ -333,6 +341,23 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -463,6 +488,23 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/tooltip.html

@@ -38,6 +38,12 @@
         } 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');
@@ -185,6 +191,8 @@
               <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>
@@ -333,6 +341,23 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -463,6 +488,23 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/index.html

@@ -38,6 +38,12 @@
         } 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');
@@ -185,6 +191,8 @@
               <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>
@@ -333,6 +341,23 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -355,12 +380,52 @@
     <div class="home__container">
       <header class="home__hero">
         <h1 class="home__title">Rizzo CSS</h1>
-        <p class="home__subtitle">A modern CSS design system built on Astro with semantic theming, accessibility-first components, and PostCSS optimization. Start here then make it your own.</p>
+        <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>31 ready 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__docs">
         <h2 class="home__section-title">Documentation</h2>
         <div class="home__docs-grid">
@@ -498,6 +563,23 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+