rizzo-css 0.0.48 → 0.0.50
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.
- package/README.md +1 -1
- package/bin/rizzo-css.js +3 -3
- package/dist/rizzo.min.css +3 -3
- package/package.json +1 -1
- package/scaffold/astro/CopyToClipboard.astro +20 -5
- package/scaffold/astro/FontSwitcher.astro +9 -2
- package/scaffold/shared/sound-effects-inline.js +1 -1
- package/scaffold/svelte/CopyToClipboard.svelte +12 -5
- package/scaffold/svelte/FontSwitcher.svelte +17 -1
- package/scaffold/vanilla/README-RIZZO.md +1 -1
- package/scaffold/vanilla/components/accordion.html +18 -0
- package/scaffold/vanilla/components/alert.html +18 -0
- package/scaffold/vanilla/components/avatar.html +18 -0
- package/scaffold/vanilla/components/badge.html +18 -0
- package/scaffold/vanilla/components/breadcrumb.html +18 -0
- package/scaffold/vanilla/components/button.html +18 -0
- package/scaffold/vanilla/components/cards.html +18 -0
- package/scaffold/vanilla/components/copy-to-clipboard.html +18 -0
- package/scaffold/vanilla/components/divider.html +18 -0
- package/scaffold/vanilla/components/docs-sidebar.html +18 -0
- package/scaffold/vanilla/components/dropdown.html +18 -0
- package/scaffold/vanilla/components/font-switcher.html +18 -0
- package/scaffold/vanilla/components/footer.html +18 -0
- package/scaffold/vanilla/components/forms.html +18 -0
- package/scaffold/vanilla/components/icons.html +18 -0
- package/scaffold/vanilla/components/index.html +18 -0
- package/scaffold/vanilla/components/modal.html +18 -0
- package/scaffold/vanilla/components/navbar.html +18 -0
- package/scaffold/vanilla/components/pagination.html +18 -0
- package/scaffold/vanilla/components/progress-bar.html +18 -0
- package/scaffold/vanilla/components/search.html +18 -0
- package/scaffold/vanilla/components/settings.html +18 -0
- package/scaffold/vanilla/components/sound-effects.html +18 -0
- package/scaffold/vanilla/components/spinner.html +18 -0
- package/scaffold/vanilla/components/table.html +18 -0
- package/scaffold/vanilla/components/tabs.html +18 -0
- package/scaffold/vanilla/components/theme-switcher.html +18 -0
- package/scaffold/vanilla/components/toast.html +18 -0
- package/scaffold/vanilla/components/tooltip.html +18 -0
- package/scaffold/vanilla/index.html +18 -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.
|
|
66
|
+
<!-- unpkg (pin version: replace @latest with @0.0.50 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() && /\.
|
|
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() && /\.
|
|
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() && /\.
|
|
303
|
+
if (!e.isDirectory() && /\.mp3$/i.test(e.name)) {
|
|
304
304
|
copyFileSync(join(sfxSrc, e.name), join(sfxDest, e.name));
|
|
305
305
|
}
|
|
306
306
|
}
|
package/dist/rizzo.min.css
CHANGED
|
@@ -114,7 +114,7 @@ div.navbar__link{background:none;border:none;cursor:pointer;font:inherit;text-al
|
|
|
114
114
|
.font-switcher__option--active:hover{background-color:var(--background);border-left:var(--border-width-accent) solid var(--accent);border-radius:var(--radius);color:var(--text);font-weight:var(--font-weight-medium);padding-left:calc(var(--spacing-4) - var(--border-width-accent))}.font-switcher__option--active:focus-visible{box-shadow:inset 0 0 0 var(--outline-width) var(--accent)}@media (width <= 768px){.font-switcher,.font-switcher__menu{max-width:100%;width:100%}.font-switcher__menu{box-sizing:border-box;left:0;min-width:0;right:auto}}.settings__control .font-switcher{max-width:100%;width:100%}.settings__control .font-switcher__menu{box-sizing:border-box;max-width:100%;min-width:0;width:100%}.settings{inset:0;pointer-events:none;position:fixed;z-index:var(--z-settings)}.settings[aria-hidden="true"]{display:none}.settings__overlay{backdrop-filter:blur(var(--blur-sm));background-color:var(--overlay);inset:0;opacity:0;pointer-events:all;position:absolute;transition:opacity var(--transition-ease-out)}.settings[aria-hidden="false"] .settings__overlay[aria-hidden="false"],.settings__overlay[aria-hidden="false"]{opacity:1}.settings__panel{background-color:var(--background-alt);border-left:var(--border-width) solid var(--border);box-shadow:calc(var(--spacing-1)*-1) 0 var(--spacing-3) calc(var(--spacing-0-125)*-1) oklch(from var(--shadow-color) l c h/15%);display:flex;flex-direction:column;height:100%;max-width:var(--spacing-105);overflow-y:auto;pointer-events:all;position:absolute;right:0;top:0;transform:translateX(100%);transition:transform var(--transition-ease-out);width:100%}.settings__panel[data-open="true"]{transform:translateX(0)}.settings[aria-hidden="false"] .settings__panel:not([data-open]){transform:translateX(100%)}@media (prefers-reduced-motion:reduce){.settings__overlay,.settings__panel{transition:none}}.settings__header{align-items:center;background-color:var(--background-alt);border-bottom:var(--border-width) solid var(--border);display:flex;justify-content:space-between;padding:var(--spacing-6);position:sticky;top:0;z-index:var(--z-dropdown)}.settings__title{color:var(--text);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin:0}.settings__close{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;height:var(--spacing-8);justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:0;transition:background-color var(--transition-base),color var(--transition-base),border-color var(--transition-base);width:var(--spacing-8)}.settings__close:hover{background-color:var(--background-alt);border-color:var(--accent);color:var(--accent)}.settings__close:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.settings__content{background-color:var(--background);display:flex;flex:1;flex-direction:column;gap:var(--spacing-8);padding:var(--spacing-6)}.settings__section{display:flex;flex-direction:column;gap:var(--spacing-4)}.settings__section-title{color:var(--text);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-4)}.settings__control{display:flex;flex-direction:column;gap:var(--spacing-3)}.settings__control .theme-switcher{max-width:100%;width:100%}.settings__control .theme-switcher__menu{box-sizing:border-box;max-width:100%;min-width:0;width:100%}.settings__label{align-items:center;color:var(--text);display:flex;font-weight:var(--font-weight-medium);justify-content:space-between;margin-bottom:var(--spacing-3)}.settings__label-text{font-size:var(--font-size-base)}.settings__label-value{color:var(--text-dim);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.settings__slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--slider-progress,50%),var(--background-alt) var(--slider-progress,50%),var(--background-alt) 100%);border:var(--border-width) solid var(--border);border-radius:var(--radius);cursor:pointer;height:var(--spacing-2);outline:none;width:100%}.settings__slider::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--slider-progress,50%),var(--background-alt) var(--slider-progress,50%),var(--background-alt) 100%);border:var(--border-width) solid var(--border);border-radius:var(--radius);box-shadow:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%);height:var(--spacing-2);width:100%}.settings__slider::-moz-range-track{background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--slider-progress,50%),var(--background-alt) var(--slider-progress,50%),var(--background-alt) 100%);border:var(--border-width) solid var(--border);border-radius:var(--radius);box-shadow:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%);height:var(--spacing-2);width:100%}.settings__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:var(--accent);border:var(--outline-width) solid var(--background);border-radius:var(--radius-circle);box-shadow:0 0 0 var(--spacing-0-125) var(--border);cursor:pointer;height:var(--spacing-5);margin-top:calc(var(--spacing-2)*-1);-webkit-transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);width:var(--spacing-5)}.settings__slider::-webkit-slider-thumb:hover{background-color:var(--accent-hover);transform:scale(1.1)}.settings__slider::-moz-range-thumb{background-color:var(--accent);border:var(--outline-width) solid var(--background);border-radius:var(--radius-circle);box-shadow:0 0 0 var(--spacing-0-125) var(--border);cursor:pointer;height:var(--spacing-5);-moz-transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);width:var(--spacing-5)}.settings__slider::-moz-range-thumb:hover{background-color:var(--accent-hover);transform:scale(1.1)}.settings__slider:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.settings__slider-labels{color:var(--text-dim);display:flex;font-size:var(--font-size-xs);justify-content:space-between;margin-top:var(--spacing-1)}.settings__checkbox-label{align-items:center;color:var(--text);cursor:pointer;display:flex;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);gap:var(--spacing-3);-webkit-user-select:none;-moz-user-select:none;user-select:none}.settings__checkbox-label:hover{color:var(--accent)}.settings__checkbox{accent-color:var(--accent);cursor:pointer;height:var(--spacing-5);margin:0;width:var(--spacing-5)}.settings__radio-group{display:flex;flex-direction:column;gap:var(--spacing-2)}.settings__radio-label{align-items:center;border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;font-size:var(--font-size-base);font-weight:var(--font-weight-normal);gap:var(--spacing-2);padding:var(--spacing-2);transition:background-color var(--transition-base),color var(--transition-base);-webkit-user-select:none;-moz-user-select:none;user-select:none}.settings__radio-label:hover{background-color:var(--background-alt);color:var(--accent)}.settings__radio{accent-color:var(--accent);cursor:pointer;height:var(--spacing-5);margin:0;width:var(--spacing-5)}.settings__help-text{color:var(--text-dim);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);margin:0}@media (width <= 640px){.settings__panel{max-width:100%;width:100%}}.modal__overlay{backdrop-filter:blur(var(--blur-sm));background-color:oklch(from var(--shadow-color) l c h/60%);bottom:0;left:0;opacity:0;pointer-events:none;position:fixed;right:0;top:0;transition:opacity var(--transition-slow) ease;z-index:var(--z-modal-backdrop)}.modal__overlay[aria-hidden="false"]{opacity:1;pointer-events:auto}.modal{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;left:50%;max-height:var(--vh-90);max-width:var(--max-height-modal);opacity:0;pointer-events:none;position:fixed;top:50%;transform:translate(-50%,-50%);transition:opacity var(--transition-slow) ease,transform var(--transition-slow) ease;width:100%;z-index:var(--z-modal)}.modal[aria-hidden="false"]{opacity:1;pointer-events:auto}.modal__header{align-items:center;border-bottom:var(--border-width) solid var(--border);display:flex;flex-shrink:0;justify-content:space-between;padding:var(--spacing-6)}.modal__title{color:var(--text);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0}.modal__close{align-items:center;background:none;border:none;border-radius:var(--radius);color:var(--text-dim);cursor:pointer;display:flex;flex-shrink:0;justify-content:center;padding:var(--spacing-2);transition:background-color var(--transition-base),color var(--transition-base)}.modal__close:hover{background-color:var(--background-alt);color:var(--text)}.modal__close:focus{box-shadow:0 0 0 3px oklch(from var(--accent) l c h/10%);outline:none}.modal__body{flex:1;min-height:0;overflow-y:auto;padding:var(--spacing-6)}.modal__footer{border-top:var(--border-width) solid var(--border);display:flex;flex-shrink:0;gap:var(--spacing-3);justify-content:flex-end;padding:var(--spacing-6)}.modal__footer:empty{display:none}.modal--sm{max-width:var(--spacing-96)}.modal--md{max-width:var(--max-height-modal)}.modal--lg{max-width:var(--max-width-modal-lg)}
|
|
115
115
|
.reduced-motion .modal,.reduced-motion .modal__overlay{transition:none}@media (width <= 640px){.modal{bottom:auto;left:auto;margin:var(--spacing-4);max-height:95vh;max-width:95vw;right:auto;top:auto}.modal,.modal[aria-hidden="false"]{transform:none}
|
|
116
116
|
.modal__body,
|
|
117
|
-
.modal__footer,.modal__header{padding:var(--spacing-4)}}.copy-to-clipboard{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:inline-flex;font-family:var(--font-family-mono);font-size:var(--font-size-sm);gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);position:relative;transition:background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base)}.copy-to-clipboard:hover{background-color:var(--background);border-color:var(--accent);color:var(--accent)}.copy-to-clipboard:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.copy-to-clipboard__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.copy-to-clipboard__icon{align-items:center;color:var(--icon);display:flex;flex-shrink:0;height:var(--spacing-4);justify-content:center;transition:opacity var(--transition-base),transform var(--transition-base);width:var(--spacing-4)}.copy-to-clipboard__icon--check{opacity:0;position:absolute;right:var(--spacing-3);transform:scale(var(--scale-80))}.copy-to-clipboard__icon--check:not(.copy-to-clipboard__icon--hidden){opacity:1;transform:scale(var(--scale-100))}.copy-to-clipboard__icon--copy.copy-to-clipboard__icon--hidden{opacity:0;transform:scale(var(--scale-80))}.copy-to-clipboard__feedback{border-width:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.alert{align-items:flex-start;background-color:var(--alert-bg);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);color:var(--text);display:flex;gap:var(--spacing-3);margin-bottom:var(--spacing-3);padding:var(--spacing-4) var(--spacing-5);position:relative;transition:opacity var(--transition-base),transform var(--transition-base)}.alert:last-child{margin-bottom:0}.alert__content{flex:1;min-width:0}.alert__close{align-items:center;background:none;border:1px solid transparent;border-radius:var(--radius);color:inherit;cursor:pointer;display:flex;fill:none;flex-shrink:0;height:var(--spacing-6);justify-content:center;margin:calc(var(--spacing-1)*-1) calc(var(--spacing-2)*-1) calc(var(--spacing-1)*-1) 0;opacity:var(--opacity-80);padding:0;stroke:currentcolor;transition:opacity var(--transition-base),background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base);width:var(--spacing-6)}.alert__close:hover{background-color:oklch(from var(--background) l c h/25%);border-color:var(--border);color:var(--text);opacity:1}.alert__close:focus-visible{opacity:1;outline:var(--outline-width) solid currentcolor;outline-offset:var(--outline-offset)}.alert--success{background-color:var(--alert-success-bg);border-color:var(--success);color:var(--success-text)}.alert--error{background-color:var(--alert-error-bg);border-color:var(--error);color:var(--error-text)}.alert--warning{background-color:var(--alert-warning-bg);border-color:var(--warning)}.alert--warning,.alert--warning .alert__content,
|
|
117
|
+
.modal__footer,.modal__header{padding:var(--spacing-4)}}.copy-to-clipboard{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:inline-flex;font-family:var(--font-family-mono);font-size:var(--font-size-sm);gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);position:relative;transition:background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base)}.copy-to-clipboard:hover{background-color:var(--background);border-color:var(--accent);color:var(--accent)}.copy-to-clipboard:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.copy-to-clipboard__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.copy-to-clipboard__icon{align-items:center;color:var(--icon);display:flex;flex-shrink:0;height:var(--spacing-4);justify-content:center;transition:opacity var(--transition-base),transform var(--transition-base);width:var(--spacing-4)}.copy-to-clipboard__icon--check{opacity:0;position:absolute;right:var(--spacing-3);transform:scale(var(--scale-80))}.copy-to-clipboard__icon--check:not(.copy-to-clipboard__icon--hidden){opacity:1;transform:scale(var(--scale-100))}.copy-to-clipboard__icon--copy.copy-to-clipboard__icon--hidden{opacity:0;transform:scale(var(--scale-80))}.copy-to-clipboard__feedback{border-width:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.copy-to-clipboard--icon-only{padding:var(--spacing-2)}.copy-to-clipboard--icon-only .copy-to-clipboard__text{border-width:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.copy-to-clipboard--icon-only .copy-to-clipboard__icon--check{right:var(--spacing-2)}.alert{align-items:flex-start;background-color:var(--alert-bg);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);color:var(--text);display:flex;gap:var(--spacing-3);margin-bottom:var(--spacing-3);padding:var(--spacing-4) var(--spacing-5);position:relative;transition:opacity var(--transition-base),transform var(--transition-base)}.alert:last-child{margin-bottom:0}.alert__content{flex:1;min-width:0}.alert__close{align-items:center;background:none;border:1px solid transparent;border-radius:var(--radius);color:inherit;cursor:pointer;display:flex;fill:none;flex-shrink:0;height:var(--spacing-6);justify-content:center;margin:calc(var(--spacing-1)*-1) calc(var(--spacing-2)*-1) calc(var(--spacing-1)*-1) 0;opacity:var(--opacity-80);padding:0;stroke:currentcolor;transition:opacity var(--transition-base),background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base);width:var(--spacing-6)}.alert__close:hover{background-color:oklch(from var(--background) l c h/25%);border-color:var(--border);color:var(--text);opacity:1}.alert__close:focus-visible{opacity:1;outline:var(--outline-width) solid currentcolor;outline-offset:var(--outline-offset)}.alert--success{background-color:var(--alert-success-bg);border-color:var(--success);color:var(--success-text)}.alert--error{background-color:var(--alert-error-bg);border-color:var(--error);color:var(--error-text)}.alert--warning{background-color:var(--alert-warning-bg);border-color:var(--warning)}.alert--warning,.alert--warning .alert__content,
|
|
118
118
|
.alert--warning .alert__content strong{color:var(--warning-text)}.alert--warning .alert__close{color:var(--warning-text);opacity:.9}.alert--warning .alert__close:hover{color:var(--text)}.alert--info{background-color:var(--alert-info-bg);border-color:var(--info);color:var(--info-text)}.alert-examples-container{align-items:stretch;display:flex;flex-direction:column;justify-content:center;min-height:8rem}.toast{max-width:var(--spacing-96);pointer-events:none;position:fixed;width:100%;z-index:var(--z-toast)}.toast .alert{box-shadow:var(--shadow-lg);margin-bottom:var(--spacing-2);pointer-events:auto}
|
|
119
119
|
.toast--bottom-right .alert,.toast--top-right .alert{animation:toast-slide-in-right var(--transition-slow) ease-out}
|
|
120
120
|
.toast--bottom-left .alert,.toast--top-left .alert{animation:toast-slide-in-left var(--transition-slow) ease-out}
|
|
@@ -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-
|
|
185
|
-
.docs-sidebar-demo h2.docs-sidebar__group-label{font-size
|
|
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
|
@@ -6,6 +6,10 @@ interface Props {
|
|
|
6
6
|
value: string;
|
|
7
7
|
label?: string;
|
|
8
8
|
format?: string;
|
|
9
|
+
/** When true, only the copy/check icons are shown (e.g. in code blocks). */
|
|
10
|
+
iconOnly?: boolean;
|
|
11
|
+
/** For icon-only: accessible label for the hidden text (e.g. "Copy code"). */
|
|
12
|
+
buttonLabel?: string;
|
|
9
13
|
class?: string;
|
|
10
14
|
id?: string;
|
|
11
15
|
}
|
|
@@ -14,24 +18,31 @@ const {
|
|
|
14
18
|
value,
|
|
15
19
|
label,
|
|
16
20
|
format,
|
|
21
|
+
iconOnly = false,
|
|
22
|
+
buttonLabel,
|
|
17
23
|
class: className = '',
|
|
18
24
|
id,
|
|
19
25
|
} = Astro.props;
|
|
20
26
|
|
|
21
27
|
const buttonId = id || `copy-btn-${Math.random().toString(36).substr(2, 9)}`;
|
|
22
|
-
const defaultTooltip = label || 'Copy to clipboard';
|
|
28
|
+
const defaultTooltip = label || (iconOnly ? (buttonLabel || 'Copy') : 'Copy to clipboard');
|
|
29
|
+
const ariaLabel = label || (iconOnly ? (buttonLabel || 'Copy to clipboard') : `Copy ${value} to clipboard`);
|
|
30
|
+
const displayText = iconOnly ? (buttonLabel || 'Copy') : value;
|
|
31
|
+
const buttonClass = ['copy-to-clipboard', iconOnly ? 'copy-to-clipboard--icon-only' : '', className].filter(Boolean).join(' ').trim();
|
|
23
32
|
---
|
|
24
33
|
|
|
25
34
|
<span class="tooltip-host" data-tooltip={defaultTooltip}>
|
|
26
35
|
<button
|
|
27
36
|
type="button"
|
|
28
|
-
class={
|
|
37
|
+
class={buttonClass}
|
|
29
38
|
data-copy-value={value}
|
|
30
39
|
data-copy-format={format}
|
|
31
|
-
aria-label={
|
|
40
|
+
aria-label={ariaLabel}
|
|
32
41
|
id={buttonId}
|
|
42
|
+
data-copy-icon-only={iconOnly ? 'true' : undefined}
|
|
43
|
+
data-copy-button-label={iconOnly ? (buttonLabel || 'Copy') : undefined}
|
|
33
44
|
>
|
|
34
|
-
<span class="copy-to-clipboard__text">{
|
|
45
|
+
<span class="copy-to-clipboard__text">{displayText}</span>
|
|
35
46
|
<span class="copy-to-clipboard__icon copy-to-clipboard__icon--copy" aria-hidden="true">
|
|
36
47
|
<Copy width={16} height={16} />
|
|
37
48
|
</span>
|
|
@@ -67,8 +78,12 @@ const defaultTooltip = label || 'Copy to clipboard';
|
|
|
67
78
|
const checkIcon = button.querySelector('.copy-to-clipboard__icon--check');
|
|
68
79
|
const textSpan = button.querySelector('.copy-to-clipboard__text');
|
|
69
80
|
|
|
70
|
-
// Update text span with current value
|
|
81
|
+
// Update text span with current value (or fixed label when icon-only)
|
|
71
82
|
const updateDisplay = () => {
|
|
83
|
+
if (button.hasAttribute('data-copy-icon-only')) {
|
|
84
|
+
if (textSpan) textSpan.textContent = button.getAttribute('data-copy-button-label') || 'Copy';
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
72
87
|
const value = getValue();
|
|
73
88
|
if (textSpan) {
|
|
74
89
|
textSpan.textContent = value || '';
|
|
@@ -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.
|
|
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;
|
|
@@ -3,16 +3,23 @@
|
|
|
3
3
|
value: string;
|
|
4
4
|
label?: string;
|
|
5
5
|
format?: string;
|
|
6
|
+
/** When true, only the copy/check icons are shown (e.g. in code blocks). */
|
|
7
|
+
iconOnly?: boolean;
|
|
8
|
+
/** For icon-only: accessible label for the hidden text (e.g. "Copy code"). */
|
|
9
|
+
buttonLabel?: string;
|
|
6
10
|
class?: string;
|
|
7
11
|
id?: string;
|
|
8
12
|
}
|
|
9
|
-
let { value, label, format, class: className = '', id }: Props = $props();
|
|
13
|
+
let { value, label, format, iconOnly = false, buttonLabel, class: className = '', id }: Props = $props();
|
|
10
14
|
|
|
11
15
|
let copied = $state(false);
|
|
12
16
|
let feedbackText = $state('');
|
|
13
17
|
const fallbackId = `copy-btn-${Math.random().toString(36).slice(2, 11)}`;
|
|
14
18
|
const buttonId = $derived(id ?? fallbackId);
|
|
15
|
-
const
|
|
19
|
+
const displayText = $derived(iconOnly ? (buttonLabel ?? 'Copy') : value);
|
|
20
|
+
const classes = $derived(['copy-to-clipboard', iconOnly ? 'copy-to-clipboard--icon-only' : '', className].filter(Boolean).join(' ').trim());
|
|
21
|
+
const ariaLabel = $derived(copied ? (format ? `Copied ${format}!` : 'Copied!') : (label ?? (iconOnly ? (buttonLabel ?? 'Copy to clipboard') : `Copy ${value} to clipboard`)));
|
|
22
|
+
const tooltipText = $derived(copied ? (format ? `Copied ${format}!` : 'Copied!') : (label ?? (iconOnly ? (buttonLabel ?? 'Copy') : 'Copy to clipboard')));
|
|
16
23
|
|
|
17
24
|
async function copy() {
|
|
18
25
|
if (!value) return;
|
|
@@ -48,11 +55,11 @@
|
|
|
48
55
|
}
|
|
49
56
|
</script>
|
|
50
57
|
|
|
51
|
-
<span class="tooltip-host" data-tooltip={
|
|
58
|
+
<span class="tooltip-host" data-tooltip={tooltipText}>
|
|
52
59
|
<button
|
|
53
60
|
type="button"
|
|
54
61
|
class={classes}
|
|
55
|
-
aria-label={
|
|
62
|
+
aria-label={ariaLabel}
|
|
56
63
|
id={buttonId}
|
|
57
64
|
onclick={copy}
|
|
58
65
|
onkeydown={(e) => {
|
|
@@ -62,7 +69,7 @@
|
|
|
62
69
|
}
|
|
63
70
|
}}
|
|
64
71
|
>
|
|
65
|
-
<span class="copy-to-clipboard__text">{
|
|
72
|
+
<span class="copy-to-clipboard__text">{displayText}</span>
|
|
66
73
|
<span class="copy-to-clipboard__icon copy-to-clipboard__icon--copy" class:copy-to-clipboard__icon--hidden={copied} aria-hidden="true">
|
|
67
74
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
|
68
75
|
<rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
|
|
@@ -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
|
-
|
|
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.
|
|
30
|
+
(Replace `@latest` with a specific version, e.g. `@0.0.50`, 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
|
|