rizzo-css 0.0.76 → 0.0.78

package/README.md

@@ -72,7 +72,7 @@ import 'rizzo-css';
 **Without a bundler (plain HTML):** Use a CDN. Both unpkg and jsDelivr resolve the package root to the built CSS (via the `unpkg` / `jsdelivr` fields in this package). For reliability or to pin a version, use the explicit path:
 
 ```html
-<!-- unpkg (pin version: replace @latest with @0.0.76 or any version) -->
+<!-- unpkg (pin version: replace @latest with @0.0.78 or any version) -->
 <link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
 
 <!-- or jsDelivr -->

package/bin/rizzo-css.js

@@ -1855,8 +1855,8 @@ function copySvelteComponents(projectDir, selectedNames, opts) {
       if (existsSync(join(scaffoldDir, 'themes.ts'))) plan.wouldWrite.push(pathRelative(projectDir, join(targetDir, 'themes.ts')));
       if (existsSync(join(scaffoldDir, 'theme.ts'))) plan.wouldWrite.push(pathRelative(projectDir, join(targetDir, 'theme.ts')));
     }
-    if (toCopy.includes('Settings') && existsSync(join(getScaffoldConfigDir(), 'fonts.ts')))
-      plan.wouldWrite.push(pathRelative(projectDir, join(projectDir, 'src', 'lib', 'config', 'fonts.ts')));
+    if ((toCopy.includes('Settings') || toCopy.includes('FontSwitcher')) && existsSync(join(scaffoldDir, 'config', 'fonts.ts')))
+      plan.wouldWrite.push(pathRelative(projectDir, join(targetDir, 'config', 'fonts.ts')));
     if (toCopy.length > 0) plan.wouldWrite.push(pathRelative(projectDir, join(targetDir, 'index.ts')));
     return;
   }
@@ -1879,13 +1879,17 @@ function copySvelteComponents(projectDir, selectedNames, opts) {
     if (existsSync(themesSrc)) copyFileSync(themesSrc, join(targetDir, 'themes.ts'));
     if (existsSync(themeSrc)) copyFileSync(themeSrc, join(targetDir, 'theme.ts'));
   }
-  if (toCopy.includes('Settings')) {
-    const configDir = getScaffoldConfigDir();
-    const fontsSrc = join(configDir, 'fonts.ts');
-    if (existsSync(fontsSrc)) {
-      const projectConfigDir = join(projectDir, 'src', 'lib', 'config');
-      mkdirSync(projectConfigDir, { recursive: true });
-      copyFileSync(fontsSrc, join(projectConfigDir, 'fonts.ts'));
+  if (toCopy.includes('Settings') || toCopy.includes('FontSwitcher')) {
+    const svelteConfigSrc = join(scaffoldDir, 'config');
+    if (existsSync(svelteConfigSrc)) {
+      const projectRizzoConfigDir = join(targetDir, 'config');
+      mkdirSync(projectRizzoConfigDir, { recursive: true });
+      const configEntries = readdirSync(svelteConfigSrc, { withFileTypes: true });
+      for (const entry of configEntries) {
+        if (entry.isFile()) {
+          copyFileSync(join(svelteConfigSrc, entry.name), join(projectRizzoConfigDir, entry.name));
+        }
+      }
     }
   }
   if (exports.length > 0 || copyIconsOnly) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.76",
+  "version": "0.0.78",
   "engines": {
     "node": ">=18"
   },

package/scaffold/react/base/package.json

@@ -16,7 +16,7 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
-    "rizzo-css": "^0.0.76",
+    "rizzo-css": "^0.0.78",
     "typescript": "~5.6.2",
     "vite": "^6.0.1"
   }

package/scaffold/svelte/Button.svelte

@@ -2,8 +2,10 @@
   import type { Snippet } from 'svelte';
 
   type Variant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'outline' | 'ghost';
+  type Size = 'sm' | 'md' | 'lg';
   interface Props {
     variant?: Variant;
+    size?: Size;
     disabled?: boolean;
     type?: 'button' | 'submit' | 'reset';
     class?: string;
@@ -11,6 +13,7 @@
   }
   let {
     variant = 'default',
+    size = 'md',
     disabled = false,
     type = 'button',
     class: className = '',
@@ -19,7 +22,8 @@
   }: Props = $props();
 
   const variantClass = $derived(variant === 'default' ? '' : `btn-${variant}`);
-  const classes = $derived(['btn', variantClass, className].filter(Boolean).join(' '));
+  const sizeClass = $derived(size !== 'md' ? `btn--${size}` : '');
+  const classes = $derived(['btn', variantClass, sizeClass, className].filter(Boolean).join(' '));
 </script>
 
 <button {type} {disabled} class={classes} {...rest}>

package/scaffold/svelte/FontSwitcher.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import ChevronDown from './icons/ChevronDown.svelte';
-  import { FONT_PAIRS, FONT_PAIR_DEFAULT } from '../../config/fonts';
+  import { FONT_PAIRS, FONT_PAIR_DEFAULT } from './config/fonts';
 
   interface Props {
     /** Optional prefix for trigger/menu IDs when multiple FontSwitchers exist. */

package/scaffold/svelte/Navbar.svelte

@@ -3,19 +3,27 @@
   import Gear from './icons/Gear.svelte';
   import Search from './Search.svelte';
 
+  export interface NavbarLink {
+    href: string;
+    label: string;
+  }
+
   interface Props {
     siteName?: string;
     logo?: string;
+    /** Override default nav links (e.g. for portfolio: About, Skills, Projects, Contact) */
+    menuLinks?: NavbarLink[];
   }
-  let { siteName = 'Site', logo }: Props = $props();
+  let { siteName = 'Site', logo, menuLinks: menuLinksProp }: Props = $props();
   let menuOpen = $state(false);
 
-  const menuLinks = [
+  const defaultMenuLinks: NavbarLink[] = [
     { href: '/docs', label: 'Docs' },
     { href: '/docs/components', label: 'Components' },
     { href: '/blocks', label: 'Blocks' },
     { href: '/themes', label: 'Themes' },
   ];
+  const menuLinks = $derived(menuLinksProp ?? defaultMenuLinks);
 
   // Click outside and Escape to close mobile menu
   $effect(() => {

package/scaffold/svelte/Settings.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { FONT_PAIRS, FONT_PAIR_DEFAULT } from '../../config/fonts';
+  import { FONT_PAIRS, FONT_PAIR_DEFAULT } from './config/fonts';
 
   interface Props {
     open?: boolean;

package/scaffold/svelte/base/src/routes/+layout.svelte

@@ -1 +1,19 @@
+<script lang="ts">
+  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';
+
+  const menuLinks = [
+    { href: '/#about', label: 'About' },
+    { href: '/#skills', label: 'Skills' },
+    { href: '/#projects', label: 'Projects' },
+    { href: '/#contact', label: 'Contact' },
+  ];
+</script>
+
+<Navbar siteName="Site" {menuLinks} />
 <slot />
+<Footer siteName="Site" links={[{ href: 'https://github.com', label: 'GitHub' }, { href: 'https://linkedin.com', label: 'LinkedIn' }]} />
+<BackToTop />
+<Settings />

package/scaffold/svelte/base/src/routes/+page.svelte

@@ -1,105 +1,176 @@
 <script lang="ts">
-  import CopyToClipboard from '$lib/rizzo/CopyToClipboard.svelte';
-  const DOCS_BASE = 'https://rizzo-css.vercel.app';
-  const ADD_COMMAND = 'npx rizzo-css add <ComponentName>';
+  import Card from '$lib/rizzo/Card.svelte';
+  import Badge from '$lib/rizzo/Badge.svelte';
+  import Button from '$lib/rizzo/Button.svelte';
+
+  const skills = [
+    { name: 'Skill one' },
+    { name: 'Skill two' },
+    { name: 'Skill three' },
+    { name: 'Skill four' },
+    { name: 'Skill five' },
+  ];
+
+  const projects = [
+    {
+      title: 'Project one',
+      description: 'Short description placeholder. Replace with your project summary and tech stack.',
+      tags: ['Tag A', 'Tag B', 'Tag C'],
+      href: '#',
+    },
+    {
+      title: 'Project two',
+      description: 'Short description placeholder. Replace with your project summary and tech stack.',
+      tags: ['Tag A', 'Tag B'],
+      href: '#',
+    },
+    {
+      title: 'Project three',
+      description: 'Short description placeholder. Replace with your project summary and tech stack.',
+      tags: ['Tag A', 'Tag B', 'Tag C'],
+      href: '#',
+    },
+  ];
 </script>
 
 <a href="#main-content" class="skip-link">Skip to main content</a>
-<main id="main-content" class="home">
+<main id="main-content" class="home portfolio">
   <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={DOCS_BASE + '/docs/getting-started'} class="btn btn-primary home__hero-cta" target="_blank" rel="noopener noreferrer">Get Started<span class="sr-only"> (opens in new tab)</span></a>
-        <a href={DOCS_BASE + '/docs/components'} class="btn btn-outline home__hero-cta" target="_blank" rel="noopener noreferrer">View Components<span class="sr-only"> (opens in new tab)</span></a>
+    <header class="home__hero portfolio__hero" id="top">
+      <h1 class="home__title portfolio__title">Your name</h1>
+      <p class="home__subtitle portfolio__subtitle">
+        Short tagline here. Replace with your role or focus (e.g. full stack developer, designer).
+      </p>
+      <div class="home__hero-ctas portfolio__ctas">
+        <a href="#projects" class="btn btn-primary home__hero-cta">View projects</a>
+        <a href="#contact" class="btn btn-outline home__hero-cta">Get in touch</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>
+    <section class="portfolio__section" id="about">
+      <h2 class="home__section-title">About</h2>
+      <p class="portfolio__about-text">
+        Replace with a short bio: what you do, your focus areas, and what you enjoy. Keep it to one or two
+        paragraphs so visitors can quickly understand your background.
+      </p>
+    </section>
+
+    <section class="portfolio__section" id="skills">
+      <h2 class="home__section-title">Skills & tools</h2>
+      <div class="portfolio__skills">
+        {#each skills as skill}
+          <div class="portfolio__skill">
+            <span class="portfolio__skill-name">{skill.name}</span>
+          </div>
+        {/each}
       </div>
+      <p class="portfolio__skills-note">Plus: add more tools or categories as needed.</p>
     </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>
-        <CopyToClipboard value={ADD_COMMAND} iconOnly buttonLabel="Copy" format="command" label="Copy command" class="home__add-command-copy" />
+    <section class="portfolio__section" id="projects">
+      <h2 class="home__section-title">Selected projects</h2>
+      <div class="home__docs-grid portfolio__projects-grid">
+        {#each projects as project}
+          <Card variant="elevated" class="portfolio__project-card">
+            <div class="card__header">
+              <h3 class="card__title">{project.title}</h3>
+            </div>
+            <div class="card__body">
+              <p>{project.description}</p>
+              <div class="portfolio__tags">
+                {#each project.tags as tag}
+                  <Badge variant="primary" size="sm">{tag}</Badge>
+                {/each}
+              </div>
+            </div>
+            <div class="card__footer">
+              <a href={project.href} class="btn btn-outline btn--sm" target="_blank" rel="noopener noreferrer">
+                View project
+              </a>
+            </div>
+          </Card>
+        {/each}
       </div>
     </section>
 
-    <section class="home__docs">
-      <h2 class="home__section-title">Documentation</h2>
-      <div class="home__docs-grid">
-        <a href={DOCS_BASE + '/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>
-          <span class="sr-only"> (opens in new tab)</span>
-        </a>
-        <a href={DOCS_BASE + '/docs/components'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
-          <h3>Components</h3>
-          <p>Component library with usage examples and live demos</p>
-          <span class="sr-only"> (opens in new tab)</span>
-        </a>
-        <a href={DOCS_BASE + '/docs/theming'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
-          <h3>Theming</h3>
-          <p>Theme system, custom themes, and color format guide</p>
-          <span class="sr-only"> (opens in new tab)</span>
-        </a>
-        <a href={DOCS_BASE + '/docs/design-system'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
-          <h3>Design System</h3>
-          <p>Semantic variables, typography, and design principles</p>
-          <span class="sr-only"> (opens in new tab)</span>
-        </a>
-        <a href={DOCS_BASE + '/docs/accessibility'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
-          <h3>Accessibility</h3>
-          <p>Accessibility guidelines, utilities, and best practices</p>
-          <span class="sr-only"> (opens in new tab)</span>
-        </a>
-        <a href={DOCS_BASE + '/docs/colors'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
-          <h3>Colors</h3>
-          <p>Interactive color reference with multiple format options</p>
-          <span class="sr-only"> (opens in new tab)</span>
-        </a>
+    <section class="portfolio__section portfolio__contact" id="contact">
+      <h2 class="home__section-title">Contact</h2>
+      <p class="portfolio__contact-text">
+        Interested in working together? Replace with your own message and add your email and social links below.
+      </p>
+      <div class="portfolio__contact-ctas">
+        <a href="mailto:you@example.com" class="btn btn-primary">Email me</a>
+        <a href="https://linkedin.com" class="btn btn-outline" target="_blank" rel="noopener noreferrer">LinkedIn</a>
+        <a href="https://github.com" class="btn btn-outline" target="_blank" rel="noopener noreferrer">GitHub</a>
       </div>
     </section>
   </div>
 </main>
+
+<style>
+  .portfolio__hero {
+    margin-bottom: var(--spacing-8);
+  }
+  .portfolio__title {
+    margin-bottom: var(--spacing-2);
+  }
+  .portfolio__subtitle {
+    margin-bottom: var(--spacing-6);
+  }
+  .portfolio__ctas {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-3);
+  }
+  .portfolio__section {
+    margin-bottom: var(--spacing-10);
+  }
+  .portfolio__about-text {
+    max-width: 65ch;
+    margin: 0;
+    color: var(--text);
+  }
+  .portfolio__skills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-3);
+    margin-bottom: var(--spacing-2);
+  }
+  .portfolio__skill {
+    display: inline-flex;
+    align-items: center;
+    padding: var(--spacing-2) var(--spacing-3);
+    background: var(--surface);
+    border-radius: var(--radius-md);
+    font-size: var(--text-sm);
+  }
+  .portfolio__skills-note {
+    margin: 0;
+    font-size: var(--text-sm);
+    color: var(--text-dim);
+  }
+  .portfolio__projects-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+    gap: var(--spacing-6);
+  }
+  .portfolio__project-card :global(.card__body) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-3);
+  }
+  .portfolio__tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-2);
+  }
+  .portfolio__contact-text {
+    margin: 0 0 var(--spacing-4);
+    color: var(--text);
+  }
+  .portfolio__contact-ctas {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-3);
+  }
+</style>

package/scaffold/svelte/config/fonts.ts

@@ -0,0 +1,59 @@
+/**
+ * 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.
+ */
+
+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)',
+  },
+  {
+    value: 'dm',
+    label: 'DM Sans + DM Mono',
+    sans: 'var(--font-family-dm-sans)',
+    mono: 'var(--font-family-dm-mono)',
+  },
+  {
+    value: 'outfit-jetbrains',
+    label: 'Outfit + JetBrains Mono',
+    sans: 'var(--font-family-outfit)',
+    mono: 'var(--font-family-jetbrains-mono)',
+  },
+];
+
+export function getFontPairById(id: string): FontPairEntry | undefined {
+  return FONT_PAIRS.find((p) => p.value === id);
+}

package/scaffold/svelte/index.ts

@@ -43,6 +43,7 @@ export { default as FontSwitcher } from './FontSwitcher.svelte';
 export { default as SoundEffects } from './SoundEffects.svelte';
 export { default as DocsSidebar } from './DocsSidebar.svelte';
 export { default as Navbar } from './Navbar.svelte';
+export type { NavbarLink } from './Navbar.svelte';
 export { default as Settings } from './Settings.svelte';
 export { default as Search } from './Search.svelte';
 export { default as Skeleton } from './Skeleton.svelte';

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

@@ -2,9 +2,11 @@
   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';
 </script>
 
 <Navbar siteName="Rizzo CSS" />
 <slot />
 <Footer />
+<BackToTop />
 <Settings />

package/scaffold/vanilla/README-RIZZO.md

@@ -28,7 +28,7 @@ If you prefer to load CSS from a CDN instead of the local file, replace the `<li
 - `<link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />`  
 - Or jsDelivr: `https://cdn.jsdelivr.net/npm/rizzo-css@latest/dist/rizzo.min.css`  
 
-(Replace `@latest` with a specific version, e.g. `@0.0.76`, in production.)
+(Replace `@latest` with a specific version, e.g. `@0.0.78`, in production.)
 
 The CLI replaces placeholders in `index.html` (e.g. `{{DATA_THEME}}`, `{{TITLE}}`) when you run `rizzo-css init`. The theme selected during init is used on first load when you have no saved preference in the browser.
 

package/scaffold/vanilla/components/accordion.html

@@ -509,6 +509,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -856,6 +859,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/alert-dialog.html

@@ -509,6 +509,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -856,6 +859,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/alert.html

@@ -509,6 +509,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -856,6 +859,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/aspect-ratio.html

@@ -509,6 +509,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -856,6 +859,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/avatar.html

@@ -509,6 +509,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -856,6 +859,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/back-to-top.html

@@ -509,6 +509,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -856,6 +859,9 @@
 
 
 
+
+
+