rizzo-css 0.0.48 → 0.0.49

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 (38) hide show
  1. package/README.md +1 -1
  2. package/bin/rizzo-css.js +3 -3
  3. package/dist/rizzo.min.css +2 -2
  4. package/package.json +1 -1
  5. package/scaffold/astro/FontSwitcher.astro +9 -2
  6. package/scaffold/shared/sound-effects-inline.js +1 -1
  7. package/scaffold/svelte/FontSwitcher.svelte +17 -1
  8. package/scaffold/vanilla/README-RIZZO.md +1 -1
  9. package/scaffold/vanilla/components/accordion.html +10 -0
  10. package/scaffold/vanilla/components/alert.html +10 -0
  11. package/scaffold/vanilla/components/avatar.html +10 -0
  12. package/scaffold/vanilla/components/badge.html +10 -0
  13. package/scaffold/vanilla/components/breadcrumb.html +10 -0
  14. package/scaffold/vanilla/components/button.html +10 -0
  15. package/scaffold/vanilla/components/cards.html +10 -0
  16. package/scaffold/vanilla/components/copy-to-clipboard.html +10 -0
  17. package/scaffold/vanilla/components/divider.html +10 -0
  18. package/scaffold/vanilla/components/docs-sidebar.html +10 -0
  19. package/scaffold/vanilla/components/dropdown.html +10 -0
  20. package/scaffold/vanilla/components/font-switcher.html +10 -0
  21. package/scaffold/vanilla/components/footer.html +10 -0
  22. package/scaffold/vanilla/components/forms.html +10 -0
  23. package/scaffold/vanilla/components/icons.html +10 -0
  24. package/scaffold/vanilla/components/index.html +10 -0
  25. package/scaffold/vanilla/components/modal.html +10 -0
  26. package/scaffold/vanilla/components/navbar.html +10 -0
  27. package/scaffold/vanilla/components/pagination.html +10 -0
  28. package/scaffold/vanilla/components/progress-bar.html +10 -0
  29. package/scaffold/vanilla/components/search.html +10 -0
  30. package/scaffold/vanilla/components/settings.html +10 -0
  31. package/scaffold/vanilla/components/sound-effects.html +10 -0
  32. package/scaffold/vanilla/components/spinner.html +10 -0
  33. package/scaffold/vanilla/components/table.html +10 -0
  34. package/scaffold/vanilla/components/tabs.html +10 -0
  35. package/scaffold/vanilla/components/theme-switcher.html +10 -0
  36. package/scaffold/vanilla/components/toast.html +10 -0
  37. package/scaffold/vanilla/components/tooltip.html +10 -0
  38. package/scaffold/vanilla/index.html +10 -0
package/README.md CHANGED
@@ -63,7 +63,7 @@ import 'rizzo-css';
63
63
  **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:
64
64
 
65
65
  ```html
66
- <!-- unpkg (pin version: replace @latest with @0.0.48 or any version) -->
66
+ <!-- unpkg (pin version: replace @latest with @0.0.49 or any version) -->
67
67
  <link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
68
68
 
69
69
  <!-- or jsDelivr -->
package/bin/rizzo-css.js CHANGED
@@ -233,7 +233,7 @@ function copyRizzoSfx(projectDir) {
233
233
  mkdirSync(dest, { recursive: true });
234
234
  const entries = readdirSync(sfxSrc, { withFileTypes: true });
235
235
  for (const e of entries) {
236
- if (!e.isDirectory() && /\.(mp3|wav|ogg)$/i.test(e.name)) {
236
+ if (!e.isDirectory() && /\.mp3$/i.test(e.name)) {
237
237
  copyFileSync(join(sfxSrc, e.name), join(dest, e.name));
238
238
  }
239
239
  }
@@ -266,7 +266,7 @@ function copyRizzoCssAndFontsForAstro(projectDir, cssSource) {
266
266
  if (existsSync(sfxSrc)) {
267
267
  const entries = readdirSync(sfxSrc, { withFileTypes: true });
268
268
  for (const e of entries) {
269
- if (!e.isDirectory() && /\.(mp3|wav|ogg)$/i.test(e.name)) {
269
+ if (!e.isDirectory() && /\.mp3$/i.test(e.name)) {
270
270
  copyFileSync(join(sfxSrc, e.name), join(sfxDest, e.name));
271
271
  }
272
272
  }
@@ -300,7 +300,7 @@ function copyRizzoCssAndFontsForSvelte(projectDir, cssSource) {
300
300
  if (existsSync(sfxSrc)) {
301
301
  const entries = readdirSync(sfxSrc, { withFileTypes: true });
302
302
  for (const e of entries) {
303
- if (!e.isDirectory() && /\.(mp3|wav|ogg)$/i.test(e.name)) {
303
+ if (!e.isDirectory() && /\.mp3$/i.test(e.name)) {
304
304
  copyFileSync(join(sfxSrc, e.name), join(sfxDest, e.name));
305
305
  }
306
306
  }
@@ -181,8 +181,8 @@ div.navbar__link{background:none;border:none;cursor:pointer;font:inherit;text-al
181
181
  .home__install-or::after,.home__install-or::before{border-left:var(--border-width) solid var(--border);border-top:none;flex:1;min-height:var(--spacing-8);width:0}}.home__install-title{color:var(--text);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-2) 0;text-align:center}.home__install-label{color:var(--text-dim);font-size:var(--font-size-sm);margin:0 0 var(--spacing-4) 0;text-align:center}.home__install-copy{align-items:center;display:flex;justify-content:center;width:100%}.home__install-copy .copy-to-clipboard{justify-content:space-between;width:100%}.home__install-copy .copy-to-clipboard__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.home__cli-tabs{margin-top:var(--spacing-1)}.home__cli-tabs .cli-command-tabs__tabs,
182
182
  .home__cli-tabs .package-install-tabs__tabs{margin-top:0}.home__cli-tabs .tabs__list{margin-bottom:var(--spacing-2);overflow-x:visible;overflow-y:visible;scrollbar-width:none}.home__cli-tabs .tabs__list::-webkit-scrollbar{display:none}.home__cli-tabs .tabs__panel{min-height:0;padding:0}.home__cli-tabs .cli-command-tabs__panel .code-block__header{padding:var(--spacing-1) var(--spacing-2)}.home__cli-tabs .cli-command-tabs__panel .code-block pre{padding:var(--spacing-2)}.home__cli-tabs .cli-command-tabs__panel .code-block,
183
183
  .home__cli-tabs .package-install-tabs__panel .code-block{margin:0;min-width:0;overflow:hidden}.home__features{margin-bottom:var(--spacing-16)}.home__features-intro{color:var(--text-dim);font-size:var(--font-size-lg);line-height:var(--line-height-relaxed);margin:0 auto var(--spacing-10) auto;max-width:var(--spacing-125);text-align:center}.home__features-featured{display:grid;gap:var(--spacing-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--spacing-80)),1fr));margin-bottom:var(--spacing-8)}.home__features-supporting-label{color:var(--text-dim);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wider);margin:0 0 var(--spacing-4) 0;text-align:center;text-transform:uppercase}.home__grid{display:grid;gap:var(--spacing-6);grid-template-columns:repeat(auto-fit,minmax(var(--spacing-75),1fr));margin-bottom:var(--spacing-16)}.home__grid--supporting{gap:var(--spacing-5);margin-bottom:0}.home__card{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);color:var(--text);padding:var(--spacing-6);transition:border-color var(--transition-base),box-shadow var(--transition-base)}.home__card:hover{border-color:var(--border);box-shadow:var(--shadow-sm)}.home__card--featured{border-color:var(--border);border-top:3px solid oklch(from var(--accent) l c h/24%);padding:var(--spacing-8)}.home__card--featured:hover{border-color:oklch(from var(--accent) l c h/28%);border-top-color:oklch(from var(--accent) l c h/40%);box-shadow:var(--shadow-md)}.home__card--supporting{display:flex;flex-direction:column;min-height:var(--spacing-32);padding:var(--spacing-5)}.home__card--supporting h3{font-size:var(--font-size-base);margin-bottom:var(--spacing-2)}.home__card--supporting p{font-size:var(--font-size-sm)}.home__card-icon{background-color:oklch(from var(--accent) l c h/14%);border-radius:var(--radius-md);color:var(--accent-fg);display:inline-block;font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-wider);margin-bottom:var(--spacing-3);padding:var(--spacing-1) var(--spacing-2);text-transform:uppercase}.home__card h3{color:var(--text);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-3) 0}.home__card--featured h3{font-size:var(--font-size-xl);margin-bottom:var(--spacing-4)}.home__card p{color:var(--text-dim);line-height:var(--line-height-relaxed);margin:0}.home__examples{margin-bottom:var(--spacing-16)}.home__example{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);margin-bottom:var(--spacing-8);padding:var(--spacing-8)}.home__example h3{color:var(--text);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-4) 0}.home__example p{color:var(--text-dim);margin-bottom:var(--spacing-4)}.home__button-group{display:flex;flex-wrap:wrap;gap:var(--spacing-3)}.home__theme-demo{max-width:var(--spacing-75)}.home__theme-demo .theme-switcher{position:relative;width:100%;z-index:var(--z-dropdown)}.home__theme-demo .theme-switcher__menu{z-index:var(--z-dropdown)}.home__add-command{margin-bottom:var(--spacing-16)}.home__add-command-block{align-items:stretch;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);display:flex;gap:var(--spacing-2);max-width:100%;min-width:0;overflow:hidden}.home__add-command-block pre{color:var(--text);flex:1;font-family:var(--font-family-mono);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);margin:0;min-width:0;overflow-x:auto;padding:var(--spacing-4)}.home__add-command-block code{white-space:pre}.home__add-command-copy{align-self:center;flex-shrink:0;margin-right:var(--spacing-2)}.home__docs{margin-bottom:var(--spacing-8)}.home__docs-grid{display:grid;gap:var(--spacing-6);grid-template-columns:repeat(auto-fit,minmax(var(--spacing-70),1fr))}.home__doc-card{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);color:var(--text);display:block;padding:var(--spacing-6);text-decoration:none;transition:border-color var(--transition-base),transform var(--transition-base),box-shadow var(--transition-base)}.home__doc-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(calc(var(--spacing-0-125)*-1))}.home__doc-card:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.home__doc-card h3{color:var(--accent-fg);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-2) 0}.home__doc-card p{color:var(--text-dim);line-height:var(--line-height-relaxed);margin:0}@media (width <= 640px){.home__title{font-size:var(--font-size-4xl)}.home__subtitle{font-size:var(--font-size-lg)}.home__install-grid{grid-template-columns:1fr}.home__features-intro{font-size:var(--font-size-base)}.home__features-featured{grid-template-columns:1fr}.home__card--supporting{min-height:0}
184
- .home__docs-grid,.home__grid{grid-template-columns:1fr}}.theming-page .card a{color:var(--text);text-decoration:none;transition:color var(--transition-base)}.theming-page .card a:hover{color:var(--accent-fg)}.theming-page .card:hover{transform:translateY(calc(var(--spacing-0-125)*-1));transition:transform var(--transition-base)}.reduced-motion .theming-page .card:hover{transform:none}.theme-by{color:var(--text-dim);font-size:var(--font-size-sm);margin:0 0 var(--spacing-4) 0}.theme-by a{color:var(--accent-fg);text-decoration:none;transition:color var(--transition-base)}.theme-by a:hover{color:var(--accent-fg-hover);text-decoration:underline}html:has([data-docs]){scroll-behavior:smooth}.docs{align-items:stretch;display:flex;flex-direction:row;min-height:calc(100vh - 4rem);padding:var(--spacing-6) 0;position:relative}.docs__sidebar-toggle{align-items:center;background-color:var(--accent);border:none;border-radius:var(--radius-md);bottom:var(--spacing-6);box-shadow:var(--shadow-lg);color:var(--accent-text);cursor:pointer;display:none;font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-2);left:var(--spacing-6);padding:var(--spacing-3) var(--spacing-4);position:fixed;transition:background-color var(--transition-base),transform var(--transition-base);z-index:calc(var(--z-settings) - 1)}.docs__sidebar-toggle:hover{background-color:var(--accent-hover)}.docs__sidebar-toggle:focus-visible{outline:var(--outline-width) solid var(--accent-text);outline-offset:var(--outline-offset)}.docs__sidebar-toggle-icon{display:flex;flex-direction:column;gap:var(--spacing-0-375)}.docs__sidebar-toggle-icon span{background-color:currentcolor;border-radius:1px;display:block;height:2px;width:var(--spacing-4)}.docs__sidebar-overlay{background-color:oklch(0 0 0deg/40%);display:none;inset:0;opacity:0;position:fixed;transition:opacity var(--transition-base),visibility var(--transition-base);visibility:hidden;z-index:calc(var(--z-settings) - 2)}.docs--sidebar-open .docs__sidebar-overlay{opacity:1;visibility:visible}.docs__main{flex:1 1 0%;min-width:0}@media (width >= 1025px){#docs-sidebar-container{align-items:stretch;display:flex;flex-direction:column;min-height:0}}.docs-sidebar{background-color:var(--background);border-right:var(--border-width) solid var(--border);flex-shrink:0;overflow-y:auto;padding:var(--spacing-6) var(--spacing-4) var(--spacing-8) 0;width:var(--docs-sidebar-width,14rem)}@media (width >= 1025px){.docs-sidebar{align-self:flex-start;max-height:calc(100vh - var(--spacing-16) - var(--spacing-4));position:sticky;top:calc(var(--spacing-16) + var(--spacing-4));z-index:1}}.docs-sidebar__nav{display:flex;flex-direction:column;gap:var(--spacing-6)}.docs-sidebar__group-label{color:var(--text-dim);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wider);margin:0 0 var(--spacing-2) 0;padding:var(--spacing-2) var(--spacing-3) var(--spacing-2);text-transform:uppercase}.docs-sidebar__list{list-style:none;margin:0;padding:0}.docs-sidebar__item{margin:0}.docs-sidebar__link{border-radius:var(--radius-md);color:var(--text-dim);display:block;font-size:var(--font-size-sm);padding:var(--spacing-2) var(--spacing-3);text-decoration:none;transition:color var(--transition-base),background-color var(--transition-base)}.docs-sidebar__link:hover{background-color:var(--background-alt);color:var(--text)}.docs-sidebar__link--active{background-color:oklch(from var(--accent-fg) l c h/12%);color:var(--accent-fg);font-weight:var(--font-weight-medium)}.docs-sidebar__link--active:hover{background-color:oklch(from var(--accent-fg) l c h/16%);color:var(--accent-fg-hover)}.docs-sidebar__sublist{border-left:2px solid var(--border);list-style:none;margin:0 0 0 var(--spacing-2);padding:0}.docs-sidebar__subitem{margin:0}.docs-sidebar__sublink{border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--text-dim);display:block;font-size:var(--font-size-xs);padding:var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-3);text-decoration:none;transition:color var(--transition-base),background-color var(--transition-base)}.docs-sidebar__sublink:hover{background-color:var(--background-alt);color:var(--text)}.docs-sidebar__sublink--active{background-color:oklch(from var(--accent-fg) l c h/12%);color:var(--accent-fg);font-weight:var(--font-weight-medium)}.docs-sidebar__sublink--active:hover{background-color:oklch(from var(--accent-fg) l c h/16%);color:var(--accent-fg-hover)}.docs-sidebar-demo{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);max-height:18rem;overflow:auto;padding:var(--spacing-3)}.docs-sidebar-demo .docs-sidebar{border-right:none;max-height:none;padding:0 var(--spacing-2) var(--spacing-4) 0;position:static;width:11rem}.docs-sidebar-demo .docs-sidebar__nav{gap:var(--spacing-4)}.docs-sidebar-demo .docs-sidebar__group-label,
185
- .docs-sidebar-demo h2.docs-sidebar__group-label{font-size:.625rem;font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-1);padding:var(--spacing-1) var(--spacing-2) var(--spacing-1)}.docs-sidebar-demo .docs-sidebar__link{font-size:.75rem;padding:var(--spacing-1) var(--spacing-2)}.docs-sidebar-demo .docs-sidebar__sublist{margin-left:var(--spacing-1)}.docs-sidebar-demo .docs-sidebar__sublink{font-size:.625rem;padding:var(--spacing-0-5) var(--spacing-1) var(--spacing-0-5) var(--spacing-2)}.theme-page__header{align-items:center;display:flex;gap:var(--spacing-3);margin-bottom:var(--spacing-2)}.theme-page__header h2{margin:0}html.docs-sidebar-mobile #docs-sidebar-container{display:none!important}@media (width <= 1024px){#docs-sidebar-container,
184
+ .home__docs-grid,.home__grid{grid-template-columns:1fr}}.theming-page .card a{color:var(--text);text-decoration:none;transition:color var(--transition-base)}.theming-page .card a:hover{color:var(--accent-fg)}.theming-page .card:hover{transform:translateY(calc(var(--spacing-0-125)*-1));transition:transform var(--transition-base)}.reduced-motion .theming-page .card:hover{transform:none}.theme-by{color:var(--text-dim);font-size:var(--font-size-sm);margin:0 0 var(--spacing-4) 0}.theme-by a{color:var(--accent-fg);text-decoration:none;transition:color var(--transition-base)}.theme-by a:hover{color:var(--accent-fg-hover);text-decoration:underline}html:has([data-docs]){scroll-behavior:smooth}.docs{align-items:stretch;display:flex;flex-direction:row;min-height:calc(100vh - 4rem);padding:var(--spacing-6) 0;position:relative}.docs__sidebar-toggle{align-items:center;background-color:var(--accent);border:none;border-radius:var(--radius-md);bottom:var(--spacing-6);box-shadow:var(--shadow-lg);color:var(--accent-text);cursor:pointer;display:none;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);gap:var(--spacing-2);left:var(--spacing-6);padding:var(--spacing-3) var(--spacing-4);position:fixed;transition:background-color var(--transition-base),transform var(--transition-base);z-index:calc(var(--z-settings) - 1)}.docs__sidebar-toggle:hover{background-color:var(--accent-hover)}.docs__sidebar-toggle:focus-visible{outline:var(--outline-width) solid var(--accent-text);outline-offset:var(--outline-offset)}.docs__sidebar-toggle-icon{display:flex;flex-direction:column;gap:var(--spacing-0-375)}.docs__sidebar-toggle-icon span{background-color:currentcolor;border-radius:1px;display:block;height:2px;width:var(--spacing-4)}.docs__sidebar-overlay{background-color:oklch(0 0 0deg/40%);display:none;inset:0;opacity:0;position:fixed;transition:opacity var(--transition-base),visibility var(--transition-base);visibility:hidden;z-index:calc(var(--z-settings) - 2)}.docs--sidebar-open .docs__sidebar-overlay{opacity:1;visibility:visible}.docs__main{flex:1 1 0%;min-width:0}@media (width >= 1025px){#docs-sidebar-container{align-items:stretch;display:flex;flex-direction:column;min-height:0}}.docs-sidebar{background-color:var(--background);border-right:var(--border-width) solid var(--border);flex-shrink:0;overflow-y:auto;padding:var(--spacing-6) var(--spacing-4) var(--spacing-8) 0;width:var(--docs-sidebar-width,14rem)}@media (width >= 1025px){.docs-sidebar{align-self:flex-start;max-height:calc(100vh - var(--spacing-16) - var(--spacing-4));position:sticky;top:calc(var(--spacing-16) + var(--spacing-4));z-index:1}}.docs-sidebar__nav{display:flex;flex-direction:column;gap:var(--spacing-6)}.docs-sidebar__group-label{color:var(--text-dim);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wider);margin:0 0 var(--spacing-2) 0;padding:var(--spacing-2) var(--spacing-3) var(--spacing-2);text-transform:uppercase}.docs-sidebar__list{list-style:none;margin:0;padding:0}.docs-sidebar__item{margin:0}.docs-sidebar__link{border-radius:var(--radius-md);color:var(--text-dim);display:block;font-size:var(--font-size-base);padding:var(--spacing-2) var(--spacing-3);text-decoration:none;transition:color var(--transition-base),background-color var(--transition-base)}.docs-sidebar__link:hover{background-color:var(--background-alt);color:var(--text)}.docs-sidebar__link--active{background-color:oklch(from var(--accent-fg) l c h/12%);color:var(--accent-fg);font-weight:var(--font-weight-medium)}.docs-sidebar__link--active:hover{background-color:oklch(from var(--accent-fg) l c h/16%);color:var(--accent-fg-hover)}.docs-sidebar__sublist{border-left:2px solid var(--border);list-style:none;margin:0 0 0 var(--spacing-2);padding:0}.docs-sidebar__subitem{margin:0}.docs-sidebar__sublink{border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--text-dim);display:block;font-size:var(--font-size-sm);padding:var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-3);text-decoration:none;transition:color var(--transition-base),background-color var(--transition-base)}.docs-sidebar__sublink:hover{background-color:var(--background-alt);color:var(--text)}.docs-sidebar__sublink--active{background-color:oklch(from var(--accent-fg) l c h/12%);color:var(--accent-fg);font-weight:var(--font-weight-medium)}.docs-sidebar__sublink--active:hover{background-color:oklch(from var(--accent-fg) l c h/16%);color:var(--accent-fg-hover)}.docs-sidebar-demo{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);max-height:18rem;overflow:auto;padding:var(--spacing-3)}.docs-sidebar-demo .docs-sidebar{border-right:none;max-height:none;padding:0 var(--spacing-2) var(--spacing-4) 0;position:static;width:11rem}.docs-sidebar-demo .docs-sidebar__nav{gap:var(--spacing-4)}.docs-sidebar-demo .docs-sidebar__group-label,
185
+ .docs-sidebar-demo h2.docs-sidebar__group-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-1);padding:var(--spacing-1) var(--spacing-2) var(--spacing-1)}.docs-sidebar-demo .docs-sidebar__link{font-size:var(--font-size-sm);padding:var(--spacing-1) var(--spacing-2)}.docs-sidebar-demo .docs-sidebar__sublist{margin-left:var(--spacing-1)}.docs-sidebar-demo .docs-sidebar__sublink{font-size:var(--font-size-xs);padding:var(--spacing-0-5) var(--spacing-1) var(--spacing-0-5) var(--spacing-2)}.theme-page__header{align-items:center;display:flex;gap:var(--spacing-3);margin-bottom:var(--spacing-2)}.theme-page__header h2{margin:0}html.docs-sidebar-mobile #docs-sidebar-container{display:none!important}@media (width <= 1024px){#docs-sidebar-container,
186
186
  .docs-sidebar,
187
187
  .docs__sidebar-overlay,
188
188
  .docs__sidebar-toggle{display:none!important}}@media (width >= 1025px){.docs__sidebar-overlay[aria-hidden="true"]{display:none!important}}[data-theme="github-dark-classic"]{--bg:oklch(18% 0.012 264deg);--bg-alt:oklch(15% 0.01 264deg);--current-line:oklch(20% 0.012 264deg);--selection:oklch(28% 0.08 255deg);--fg:oklch(91% 0.004 264deg);--fg-dim:oklch(66% 0.01 264deg);--comment:oklch(52% 0.015 264deg);--cyan:oklch(72% 0.12 250deg);--green:oklch(72% 0.19 145deg);--orange:oklch(78% 0.12 55deg);--pink:oklch(68% 0.14 15deg);--purple:oklch(68% 0.14 300deg);--red:oklch(68% 0.16 15deg);--yellow:oklch(88% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(75% 0.01 264deg);--border:oklch(13% 0.01 264deg);--accent:oklch(45% 0.18 250deg);--accent-hover:oklch(48% 0.18 250deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:var(--accent-text);--accent-fg:var(--cyan);--accent-fg-hover:oklch(78% 0.12 250deg);--success:var(--green);--success-hover:oklch(78% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(85% 0.1 55deg);--warning-text:oklch(100% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(75% 0.14 15deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 250deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 250deg)}[data-theme="shades-of-purple"]{--bg:oklch(18% 0.08 290deg);--bg-alt:oklch(15% 0.08 290deg);--current-line:oklch(25% 0.10 290deg);--selection:oklch(30% 0.12 290deg);--fg:oklch(95% 0.01 300deg);--fg-dim:oklch(75% 0.05 300deg);--comment:oklch(55.% 0.08 280deg);--cyan:oklch(75% 0.15 220deg);--green:oklch(70% 0.20 150deg);--orange:oklch(75% 0.18 60deg);--pink:oklch(75% 0.22 340deg);--purple:oklch(65% 0.25 290deg);--red:oklch(65% 0.22 25deg);--yellow:oklch(85% 0.18 100deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(80% 0.05 300deg);--border:var(--current-line);--accent:var(--purple);--accent-hover:var(--pink);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:oklch(22% 0.03 300deg);--success:var(--green);--success-hover:oklch(78% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--yellow);--warning-hover:oklch(92% 0.1 95deg);--warning-text:oklch(100% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 95deg);--error:var(--red);--error-hover:oklch(75% 0.14 15deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 15deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 250deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 250deg)}[data-theme="sandstorm-classic"]{--bg:oklch(16% 0.025 25deg);--bg-alt:oklch(13% 0.02 25deg);--current-line:oklch(20% 0.025 25deg);--selection:oklch(28% 0.06 25deg);--fg:oklch(90% 0.01 25deg);--fg-dim:oklch(62% 0.02 25deg);--comment:oklch(52% 0.03 25deg);--cyan:oklch(68% 0.12 220deg);--green:oklch(68% 0.18 145deg);--orange:oklch(72% 0.14 55deg);--pink:oklch(65% 0.16 350deg);--purple:oklch(62% 0.14 300deg);--red:oklch(58% 0.18 25deg);--yellow:oklch(82% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(72% 0.02 25deg);--border:oklch(22% 0.02 25deg);--accent:var(--red);--accent-hover:oklch(62% 0.16 25deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:oklch(22% 0.03 25deg);--success:var(--green);--success-hover:oklch(74% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(78% 0.12 55deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(65% 0.16 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(74% 0.1 220deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="rocky-blood-orange"]{--bg:oklch(16% 0.03 45deg);--bg-alt:oklch(13% 0.025 45deg);--current-line:oklch(20% 0.03 45deg);--selection:oklch(28% 0.06 45deg);--fg:oklch(90% 0.01 45deg);--fg-dim:oklch(60% 0.02 45deg);--comment:oklch(52% 0.03 45deg);--cyan:oklch(68% 0.12 220deg);--green:oklch(68% 0.18 145deg);--orange:oklch(62% 0.16 55deg);--pink:oklch(65% 0.16 350deg);--purple:oklch(62% 0.14 300deg);--red:oklch(58% 0.18 25deg);--yellow:oklch(82% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(72% 0.02 45deg);--border:oklch(22% 0.02 45deg);--accent:var(--orange);--accent-hover:oklch(68% 0.14 55deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:oklch(22% 0.03 55deg);--success:var(--green);--success-hover:oklch(74% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(72% 0.14 55deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(65% 0.16 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(74% 0.1 220deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="minimal-dark-neon-yellow"]{--bg:oklch(14% 0.01 95deg);--bg-alt:oklch(11% 0.008 95deg);--current-line:oklch(18% 0.015 95deg);--selection:oklch(25% 0.08 95deg);--fg:oklch(92% 0.02 95deg);--fg-dim:oklch(65% 0.02 95deg);--comment:oklch(50% 0.02 95deg);--icon:var(--fg);--icon-dim:oklch(72% 0.02 95deg);--cyan:oklch(72% 0.12 220deg);--green:oklch(72% 0.18 145deg);--orange:oklch(78% 0.14 55deg);--pink:oklch(68% 0.16 350deg);--purple:oklch(65% 0.14 300deg);--red:oklch(62% 0.18 25deg);--yellow:oklch(88% 0.18 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(20% 0.02 95deg);--accent:var(--yellow);--accent-hover:oklch(90% 0.16 95deg);--accent-text:oklch(12% 0.02 95deg);--accent-text-on-hover:oklch(22% 0.03 95deg);--success:var(--green);--success-hover:oklch(78% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(85% 0.12 55deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(68% 0.16 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 220deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="hack-the-box"]{--bg:oklch(16% 0.03 255deg);--bg-alt:oklch(13% 0.025 255deg);--current-line:oklch(20% 0.03 255deg);--selection:oklch(55% 0.08 255deg);--fg:oklch(82% 0.03 255deg);--fg-dim:oklch(62% 0.04 255deg);--comment:oklch(55% 0.03 255deg);--icon:var(--fg);--icon-dim:oklch(70% 0.04 255deg);--cyan:oklch(78% 0.12 175deg);--green:oklch(88% 0.22 130deg);--orange:oklch(78% 0.14 75deg);--pink:oklch(65% 0.18 340deg);--purple:oklch(65% 0.22 300deg);--red:oklch(65% 0.22 25deg);--yellow:oklch(82% 0.16 95deg);--background:var(--bg);--background-alt:oklch(14% 0.028 255deg);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(20% 0.03 255deg);--accent:var(--green);--accent-hover:oklch(85% 0.2 125deg);--accent-text:oklch(12% 0.02 255deg);--accent-text-on-hover:oklch(22% 0.03 130deg);--success:var(--green);--success-hover:oklch(90% 0.18 130deg);--success-text:oklch(98% 0 0deg);--success-text-on-solid:oklch(22% 0.03 130deg);--warning:var(--yellow);--warning-hover:oklch(92% 0.14 95deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 95deg);--error:var(--red);--error-hover:oklch(72% 0.18 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:oklch(68% 0.14 240deg);--info-hover:oklch(75% 0.12 240deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 240deg)}[data-theme="pink-cat-boo"]{--bg:oklch(18% 0.03 280deg);--bg-alt:oklch(22% 0.04 280deg);--current-line:oklch(28% 0.06 320deg);--selection:oklch(28% 0.06 320deg);--fg:oklch(98% 0.01 350deg);--fg-dim:oklch(65% 0.04 280deg);--comment:oklch(55% 0.03 160deg);--cyan:oklch(72% 0.1 220deg);--green:oklch(72% 0.14 165deg);--orange:oklch(72% 0.14 75deg);--pink:oklch(78% 0.12 350deg);--purple:oklch(72% 0.14 300deg);--red:oklch(72% 0.18 350deg);--yellow:oklch(78% 0.14 85deg);--background:var(--bg);--background-alt:oklch(20% 0.035 280deg);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(75% 0.04 280deg);--border:oklch(35% 0.04 280deg);--accent:var(--pink);--accent-hover:oklch(82% 0.1 350deg);--accent-text:oklch(18% 0.02 280deg);--accent-text-on-hover:oklch(22% 0.03 350deg);--success:var(--green);--success-hover:oklch(78% 0.12 165deg);--success-text:oklch(98% 0 0deg);--success-text-on-solid:oklch(22% 0.03 165deg);--warning:var(--yellow);--warning-hover:oklch(85% 0.12 85deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 85deg);--error:var(--red);--error-hover:oklch(78% 0.14 350deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 15deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 220deg);--info-text:oklch(98% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="github-light"]{--bg:oklch(100% 0 0deg);--bg-alt:oklch(97% 0.005 264deg);--current-line:oklch(95% 0.008 264deg);--selection:oklch(88% 0.06 255deg);--fg:oklch(18% 0.02 264deg);--fg-dim:oklch(52% 0.02 264deg);--comment:oklch(58% 0.02 264deg);--cyan:oklch(55% 0.18 255deg);--green:oklch(48% 0.16 145deg);--orange:oklch(65% 0.14 75deg);--pink:oklch(55% 0.18 340deg);--purple:oklch(50% 0.18 290deg);--red:oklch(50% 0.2 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(86% 0.01 264deg);--accent:var(--cyan);--accent-hover:oklch(38% 0.18 255deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--success-text-on-solid:oklch(100% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(82% 0.12 90deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(62% 0.18 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(65% 0.1 210deg);--info-text:oklch(20% 0 0deg);--info-text-on-solid:oklch(100% 0 0deg)}[data-theme="red-velvet-cupcake"]{--bg:oklch(99% 0.005 25deg);--bg-alt:oklch(96% 0.01 25deg);--current-line:oklch(94% 0.015 25deg);--selection:oklch(92% 0.04 25deg);--fg:oklch(28% 0.02 250deg);--fg-dim:oklch(48% 0.02 250deg);--comment:oklch(55% 0.02 250deg);--cyan:oklch(55% 0.12 220deg);--green:oklch(50% 0.16 145deg);--orange:oklch(62% 0.14 55deg);--pink:oklch(58% 0.16 350deg);--purple:oklch(52% 0.16 290deg);--red:oklch(55% 0.17 25deg);--yellow:oklch(75% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.015 25deg);--accent:var(--red);--accent-hover:oklch(48% 0.18 25deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(54% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--orange);--warning-hover:oklch(70% 0.12 55deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(60% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(58% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="orangy-one-light"]{--bg:oklch(99% 0.008 70deg);--bg-alt:oklch(96% 0.012 70deg);--current-line:oklch(94% 0.015 70deg);--selection:oklch(92% 0.05 70deg);--fg:oklch(22% 0.02 70deg);--fg-dim:oklch(48% 0.02 70deg);--comment:oklch(55% 0.02 70deg);--cyan:oklch(55% 0.12 220deg);--green:oklch(50% 0.16 145deg);--orange:oklch(58% 0.16 55deg);--pink:oklch(58% 0.16 350deg);--purple:oklch(52% 0.16 290deg);--red:oklch(52% 0.18 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.02 70deg);--accent:var(--orange);--accent-hover:oklch(50% 0.18 55deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--orange);--warning-hover:oklch(72% 0.12 55deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(58% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(62% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="sunflower"]{--bg:oklch(98% 0.03 95deg);--bg-alt:oklch(95% 0.04 95deg);--current-line:oklch(92% 0.05 95deg);--selection:oklch(88% 0.08 95deg);--fg:oklch(22% 0.03 95deg);--fg-dim:oklch(45% 0.03 95deg);--comment:oklch(52% 0.03 95deg);--cyan:oklch(55% 0.12 220deg);--green:oklch(50% 0.16 145deg);--orange:oklch(62% 0.14 55deg);--pink:oklch(58% 0.16 350deg);--purple:oklch(52% 0.16 290deg);--red:oklch(52% 0.18 25deg);--yellow:oklch(75% 0.16 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(85% 0.04 95deg);--accent:var(--yellow);--accent-hover:oklch(65% 0.18 95deg);--accent-text:oklch(15% 0.02 95deg);--accent-text-on-hover:oklch(22% 0.02 95deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--orange);--warning-hover:oklch(70% 0.12 55deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(60% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(62% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="green-breeze-light"]{--bg:oklch(98% 0.008 140deg);--bg-alt:oklch(96% 0.01 140deg);--current-line:oklch(94% 0.012 140deg);--selection:oklch(88% 0.06 200deg);--fg:oklch(20% 0.02 80deg);--fg-dim:oklch(45% 0.02 80deg);--comment:oklch(55% 0.02 80deg);--cyan:oklch(58% 0.14 205deg);--green:oklch(42% 0.14 145deg);--orange:oklch(62% 0.12 65deg);--pink:oklch(55% 0.12 340deg);--purple:oklch(55% 0.12 290deg);--red:oklch(45% 0.18 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.02 140deg);--accent:oklch(48% 0.16 155deg);--accent-hover:oklch(38% 0.16 155deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(82% 0.12 95deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(58% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(65% 0.1 210deg);--info-text:oklch(20% 0 0deg)}[data-theme="cute-pink"]{--bg:oklch(100% 0 0deg);--bg-alt:oklch(98% 0.02 350deg);--current-line:oklch(96% 0.03 350deg);--selection:oklch(78% 0.12 350deg);--fg:oklch(25% 0.01 0deg);--fg-dim:oklch(50% 0.02 0deg);--comment:oklch(55% 0.02 0deg);--cyan:oklch(55% 0.1 220deg);--green:oklch(48% 0.12 145deg);--orange:oklch(65% 0.12 65deg);--pink:oklch(62% 0.2 350deg);--purple:oklch(42% 0.18 300deg);--red:oklch(55% 0.2 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:oklch(98% 0.025 350deg);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.06 350deg);--accent:oklch(62% 0.22 350deg);--accent-hover:oklch(55% 0.22 350deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(58% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(80% 0.14 90deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(60% 0.18 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(65% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="semi-light-purple"]{--bg:oklch(96% 0.02 290deg);--bg-alt:oklch(94% 0.03 290deg);--current-line:oklch(91% 0.04 290deg);--selection:oklch(88% 0.06 290deg);--fg:oklch(25% 0.02 290deg);--fg-dim:oklch(48% 0.03 290deg);--comment:oklch(55% 0.04 280deg);--cyan:oklch(58% 0.12 220deg);--green:oklch(50% 0.14 150deg);--orange:oklch(65% 0.12 60deg);--pink:oklch(62% 0.16 340deg);--purple:oklch(52% 0.2 290deg);--red:oklch(52% 0.18 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(86% 0.05 290deg);--accent:var(--purple);--accent-hover:oklch(45% 0.2 290deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(82% 0.12 90deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(58% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(62% 0.1 220deg);--info-text:oklch(20% 0 0deg)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rizzo-css",
3
- "version": "0.0.48",
3
+ "version": "0.0.49",
4
4
  "scripts": {
5
5
  "prepublishOnly": "cd ../.. && pnpm run lint:css:fix && pnpm run build:css && node scripts/copy-scaffold.js && node scripts/prepare-vanilla-scaffold.js"
6
6
  },
@@ -112,6 +112,13 @@ const menuId = idPrefix ? `font-pair-menu-${idPrefix}` : 'font-pair-menu';
112
112
  if (monoEl) monoEl.style.fontFamily = '';
113
113
  };
114
114
 
115
+ /** Resolve var(--font-family-xxx) to the actual font stack from :root so preview shows the correct font. */
116
+ const resolveFontVar = (cssValue: string): string => {
117
+ const m = cssValue.match(/^var\((--[a-zA-Z0-9-]+)\)$/);
118
+ if (!m) return cssValue;
119
+ const resolved = getComputedStyle(document.documentElement).getPropertyValue(m[1]).trim();
120
+ return resolved || cssValue;
121
+ };
115
122
  const updatePreview = (option: Element | null) => {
116
123
  if (!preview || !sample || !monoEl) return;
117
124
  if (!option) {
@@ -122,8 +129,8 @@ const menuId = idPrefix ? `font-pair-menu-${idPrefix}` : 'font-pair-menu';
122
129
  }
123
130
  const sans = option.getAttribute('data-font-pair-sans') || '';
124
131
  const mono = option.getAttribute('data-font-pair-mono') || '';
125
- sample.style.fontFamily = sans;
126
- monoEl.style.fontFamily = mono;
132
+ sample.style.fontFamily = resolveFontVar(sans);
133
+ monoEl.style.fontFamily = resolveFontVar(mono);
127
134
  preview.setAttribute('aria-hidden', 'false');
128
135
  };
129
136
 
@@ -1,4 +1,4 @@
1
- // Sound effects: play on click/tap when user has enabled (localStorage soundEffects === 'true'). Uses /assets/sfx/click.mp3, else Web Audio fallback. Same script for docs and all shipped scaffolds. Supports touch (touchend) so mobile plays like desktop.
1
+ // Sound effects: play on click/tap when user has enabled (localStorage soundEffects === 'true'). Uses /assets/sfx/click.mp3 (or relative assets/sfx for Vanilla), else Web Audio fallback. Single source for main site (Layout.astro) and all shipped scaffolds (Astro, Svelte, Vanilla); keep behavior in sync. Supports touch (touchend) so mobile plays like desktop.
2
2
  (function() {
3
3
  var SOUND_KEY = 'soundEffects';
4
4
  var THROTTLE_MS = 120;
@@ -38,8 +38,24 @@
38
38
  triggerEl?.focus();
39
39
  }
40
40
 
41
+ /** Resolve var(--font-family-xxx) to the actual font stack from :root so preview shows the correct primary and code fonts. */
42
+ function resolveFontVar(cssValue: string): string {
43
+ if (typeof document === 'undefined') return cssValue;
44
+ const m = cssValue.match(/^var\((--[a-zA-Z0-9-]+)\)$/);
45
+ if (!m) return cssValue;
46
+ const resolved = getComputedStyle(document.documentElement).getPropertyValue(m[1]).trim();
47
+ return resolved || cssValue;
48
+ }
49
+
41
50
  function setPreview(option: { sans: string; mono: string } | null) {
42
- previewOption = option;
51
+ if (!option) {
52
+ previewOption = null;
53
+ return;
54
+ }
55
+ previewOption = {
56
+ sans: resolveFontVar(option.sans),
57
+ mono: resolveFontVar(option.mono),
58
+ };
43
59
  }
44
60
 
45
61
  function addClickOutsideListener() {
@@ -27,7 +27,7 @@ If you prefer to load CSS from a CDN instead of the local file, replace the `<li
27
27
  - `<link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />`
28
28
  - Or jsDelivr: `https://cdn.jsdelivr.net/npm/rizzo-css@latest/dist/rizzo.min.css`
29
29
 
30
- (Replace `@latest` with a specific version, e.g. `@0.0.48`, in production.)
30
+ (Replace `@latest` with a specific version, e.g. `@0.0.49`, in production.)
31
31
 
32
32
  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.
33
33