rizzo-css 0.0.42 → 0.0.43
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 +11 -10
- package/dist/rizzo.min.css +5 -4
- package/package.json +1 -1
- package/scaffold/astro/Footer.astro +56 -0
- package/scaffold/astro/ThemeIcon.astro +2 -1
- package/scaffold/astro-core/src/pages/index.astro +42 -1
- package/scaffold/svelte/DocsSidebar.svelte +4 -2
- package/scaffold/svelte/Footer.svelte +49 -0
- package/scaffold/svelte/index.ts +2 -0
- package/scaffold/svelte-core/src/routes/+page.svelte +42 -1
- package/scaffold/vanilla/README-RIZZO.md +1 -1
- package/scaffold/vanilla/components/accordion.html +8 -0
- package/scaffold/vanilla/components/alert.html +8 -0
- package/scaffold/vanilla/components/avatar.html +8 -0
- package/scaffold/vanilla/components/badge.html +8 -0
- package/scaffold/vanilla/components/breadcrumb.html +8 -0
- package/scaffold/vanilla/components/button.html +8 -0
- package/scaffold/vanilla/components/cards.html +8 -0
- package/scaffold/vanilla/components/copy-to-clipboard.html +8 -0
- package/scaffold/vanilla/components/divider.html +8 -0
- package/scaffold/vanilla/components/docs-sidebar.html +528 -0
- package/scaffold/vanilla/components/dropdown.html +8 -0
- package/scaffold/vanilla/components/font-switcher.html +528 -0
- package/scaffold/vanilla/components/footer.html +528 -0
- package/scaffold/vanilla/components/forms.html +8 -0
- package/scaffold/vanilla/components/icons.html +8 -0
- package/scaffold/vanilla/components/index.html +28 -16
- package/scaffold/vanilla/components/modal.html +8 -0
- package/scaffold/vanilla/components/navbar.html +8 -0
- package/scaffold/vanilla/components/pagination.html +8 -0
- package/scaffold/vanilla/components/progress-bar.html +8 -0
- package/scaffold/vanilla/components/search.html +8 -0
- package/scaffold/vanilla/components/settings.html +8 -0
- package/scaffold/vanilla/components/sound-effects.html +528 -0
- package/scaffold/vanilla/components/spinner.html +8 -0
- package/scaffold/vanilla/components/table.html +8 -0
- package/scaffold/vanilla/components/tabs.html +8 -0
- package/scaffold/vanilla/components/theme-switcher.html +8 -0
- package/scaffold/vanilla/components/toast.html +8 -0
- package/scaffold/vanilla/components/tooltip.html +8 -0
- package/scaffold/vanilla/index.html +49 -1
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.43 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
|
@@ -93,14 +93,14 @@ const LIGHT_THEMES = [
|
|
|
93
93
|
const THEMES = [...DARK_THEMES, ...LIGHT_THEMES];
|
|
94
94
|
// Components available for scaffold (must match scaffold/svelte and scaffold/astro)
|
|
95
95
|
const SVELTE_COMPONENTS = [
|
|
96
|
-
'Button', 'Badge', 'Card', 'Divider', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
|
|
96
|
+
'Button', 'Badge', 'Card', 'Divider', 'Footer', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
|
|
97
97
|
'Breadcrumb', 'FormGroup', 'Input', 'Checkbox', 'Textarea', 'Select', 'Radio',
|
|
98
98
|
'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown',
|
|
99
99
|
'Modal', 'Toast', 'Table', 'ThemeSwitcher', 'FontSwitcher', 'SoundEffects',
|
|
100
100
|
'Navbar', 'Settings', 'Search', 'Icons',
|
|
101
101
|
];
|
|
102
102
|
const ASTRO_COMPONENTS = [
|
|
103
|
-
'Button', 'Badge', 'Card', 'Divider', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
|
|
103
|
+
'Button', 'Badge', 'Card', 'Divider', 'Footer', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
|
|
104
104
|
'Breadcrumb', 'FormGroup', 'Input', 'Checkbox', 'Textarea', 'Select', 'Radio',
|
|
105
105
|
'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown',
|
|
106
106
|
'Modal', 'Toast', 'Table', 'ThemeSwitcher', 'FontSwitcher', 'SoundEffects',
|
|
@@ -109,7 +109,7 @@ const ASTRO_COMPONENTS = [
|
|
|
109
109
|
|
|
110
110
|
// Base set for Manual: all interactive components we ship (so manual has a full working set). Full includes everything (same list).
|
|
111
111
|
const RECOMMENDED_COMPONENTS = [
|
|
112
|
-
'Button', 'Badge', 'Card', 'Divider', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
|
|
112
|
+
'Button', 'Badge', 'Card', 'Divider', 'Footer', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
|
|
113
113
|
'Breadcrumb', 'FormGroup', 'Input', 'Checkbox', 'Textarea', 'Select', 'Radio',
|
|
114
114
|
'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown',
|
|
115
115
|
'Modal', 'Toast', 'Table', 'ThemeSwitcher', 'FontSwitcher', 'SoundEffects',
|
|
@@ -174,14 +174,15 @@ function logAddedDeps(selected, expanded, framework) {
|
|
|
174
174
|
if (byRequirement.length) console.log('\n Also adding: ' + byRequirement.join('; '));
|
|
175
175
|
}
|
|
176
176
|
|
|
177
|
-
// Vanilla scaffold: component name (same as ASTRO_COMPONENTS) -> components/*.html slug.
|
|
177
|
+
// Vanilla scaffold: component name (same as ASTRO_COMPONENTS) -> components/*.html slug.
|
|
178
178
|
const VANILLA_COMPONENT_SLUGS = {
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
179
|
+
Accordion: 'accordion', Alert: 'alert', Avatar: 'avatar', Badge: 'badge', Breadcrumb: 'breadcrumb', Button: 'button',
|
|
180
|
+
Card: 'cards', Checkbox: 'forms', CopyToClipboard: 'copy-to-clipboard', Divider: 'divider', Dropdown: 'dropdown',
|
|
181
|
+
Footer: 'footer', FormGroup: 'forms', Input: 'forms', Modal: 'modal', Pagination: 'pagination', ProgressBar: 'progress-bar',
|
|
182
|
+
Radio: 'forms', Search: 'search', Select: 'forms', Settings: 'settings', Spinner: 'spinner', Table: 'table',
|
|
183
|
+
Tabs: 'tabs', Textarea: 'forms', ThemeSwitcher: 'theme-switcher', Toast: 'toast', Tooltip: 'tooltip',
|
|
184
|
+
FontSwitcher: 'font-switcher', SoundEffects: 'sound-effects',
|
|
185
|
+
Navbar: 'navbar', Icons: 'icons',
|
|
185
186
|
};
|
|
186
187
|
|
|
187
188
|
// ANSI colors for CLI (framework logo colors)
|
package/dist/rizzo.min.css
CHANGED
|
@@ -100,7 +100,7 @@ input[type="radio"]:disabled{cursor:not-allowed;opacity:var(--opacity-60)}.check
|
|
|
100
100
|
[class*="duration-"]{transition-delay:0s!important;transition-duration:.01ms!important}}.bg-primary{background-color:var(--background)}.bg-alt{background-color:var(--background-alt)}.bg-accent{background-color:var(--accent)}.bg-success{background-color:var(--success)}.bg-warning{background-color:var(--warning)}.bg-error{background-color:var(--error)}.bg-info{background-color:var(--info)}.bg-transparent{background-color:transparent}.text-primary{color:var(--text)}.text-dim{color:var(--text-dim)}.text-accent{color:var(--accent)}.text-success{color:var(--success)}.text-warning{color:var(--warning)}.text-error{color:var(--error)}.text-info{color:var(--info)}.text-on-accent{color:var(--accent-text)}.text-on-success{color:var(--success-text)}.text-on-warning{color:var(--warning-text)}.text-on-error{color:var(--error-text)}.text-on-info{color:var(--info-text)}.bg-neutral-50{background-color:var(--color-neutral-50)}.bg-neutral-100{background-color:var(--color-neutral-100)}.bg-neutral-200{background-color:var(--color-neutral-200)}.bg-neutral-300{background-color:var(--color-neutral-300)}.bg-neutral-400{background-color:var(--color-neutral-400)}.bg-neutral-500{background-color:var(--color-neutral-500)}.bg-neutral-600{background-color:var(--color-neutral-600)}.bg-neutral-700{background-color:var(--color-neutral-700)}.bg-neutral-800{background-color:var(--color-neutral-800)}.bg-neutral-900{background-color:var(--color-neutral-900)}.bg-neutral-950{background-color:var(--color-neutral-950)}.text-neutral-50{color:var(--color-neutral-50)}.text-neutral-100{color:var(--color-neutral-100)}.text-neutral-200{color:var(--color-neutral-200)}.text-neutral-300{color:var(--color-neutral-300)}.text-neutral-400{color:var(--color-neutral-400)}.text-neutral-500{color:var(--color-neutral-500)}.text-neutral-600{color:var(--color-neutral-600)}.text-neutral-700{color:var(--color-neutral-700)}.text-neutral-800{color:var(--color-neutral-800)}.text-neutral-900{color:var(--color-neutral-900)}.text-neutral-950{color:var(--color-neutral-950)}.border-neutral-50{border-color:var(--color-neutral-50)}.border-neutral-100{border-color:var(--color-neutral-100)}.border-neutral-200{border-color:var(--color-neutral-200)}.border-neutral-300{border-color:var(--color-neutral-300)}.border-neutral-400{border-color:var(--color-neutral-400)}.border-neutral-500{border-color:var(--color-neutral-500)}.border-neutral-600{border-color:var(--color-neutral-600)}.border-neutral-700{border-color:var(--color-neutral-700)}.border-neutral-800{border-color:var(--color-neutral-800)}.border-neutral-900{border-color:var(--color-neutral-900)}.border-neutral-950{border-color:var(--color-neutral-950)}.bg-accent-50{background-color:var(--color-accent-50)}.bg-accent-100{background-color:var(--color-accent-100)}.bg-accent-200{background-color:var(--color-accent-200)}.bg-accent-300{background-color:var(--color-accent-300)}.bg-accent-400{background-color:var(--color-accent-400)}.bg-accent-500{background-color:var(--color-accent-500)}.bg-accent-600{background-color:var(--color-accent-600)}.bg-accent-700{background-color:var(--color-accent-700)}.bg-accent-800{background-color:var(--color-accent-800)}.bg-accent-900{background-color:var(--color-accent-900)}.bg-accent-950{background-color:var(--color-accent-950)}.text-accent-50{color:var(--color-accent-50)}.text-accent-100{color:var(--color-accent-100)}.text-accent-200{color:var(--color-accent-200)}.text-accent-300{color:var(--color-accent-300)}.text-accent-400{color:var(--color-accent-400)}.text-accent-500{color:var(--color-accent-500)}.text-accent-600{color:var(--color-accent-600)}.text-accent-700{color:var(--color-accent-700)}.text-accent-800{color:var(--color-accent-800)}.text-accent-900{color:var(--color-accent-900)}.text-accent-950{color:var(--color-accent-950)}.border-accent-50{border-color:var(--color-accent-50)}.border-accent-100{border-color:var(--color-accent-100)}.border-accent-200{border-color:var(--color-accent-200)}.border-accent-300{border-color:var(--color-accent-300)}.border-accent-400{border-color:var(--color-accent-400)}.border-accent-500{border-color:var(--color-accent-500)}.border-accent-600{border-color:var(--color-accent-600)}.border-accent-700{border-color:var(--color-accent-700)}.border-accent-800{border-color:var(--color-accent-800)}.border-accent-900{border-color:var(--color-accent-900)}.border-accent-950{border-color:var(--color-accent-950)}.bg-success-50{background-color:var(--color-success-50)}.bg-success-100{background-color:var(--color-success-100)}.bg-success-200{background-color:var(--color-success-200)}.bg-success-300{background-color:var(--color-success-300)}.bg-success-400{background-color:var(--color-success-400)}.bg-success-500{background-color:var(--color-success-500)}.bg-success-600{background-color:var(--color-success-600)}.bg-success-700{background-color:var(--color-success-700)}.bg-success-800{background-color:var(--color-success-800)}.bg-success-900{background-color:var(--color-success-900)}.bg-success-950{background-color:var(--color-success-950)}.text-success-50{color:var(--color-success-50)}.text-success-100{color:var(--color-success-100)}.text-success-200{color:var(--color-success-200)}.text-success-300{color:var(--color-success-300)}.text-success-400{color:var(--color-success-400)}.text-success-500{color:var(--color-success-500)}.text-success-600{color:var(--color-success-600)}.text-success-700{color:var(--color-success-700)}.text-success-800{color:var(--color-success-800)}.text-success-900{color:var(--color-success-900)}.text-success-950{color:var(--color-success-950)}.border-success-50{border-color:var(--color-success-50)}.border-success-100{border-color:var(--color-success-100)}.border-success-200{border-color:var(--color-success-200)}.border-success-300{border-color:var(--color-success-300)}.border-success-400{border-color:var(--color-success-400)}.border-success-500{border-color:var(--color-success-500)}.border-success-600{border-color:var(--color-success-600)}.border-success-700{border-color:var(--color-success-700)}.border-success-800{border-color:var(--color-success-800)}.border-success-900{border-color:var(--color-success-900)}.border-success-950{border-color:var(--color-success-950)}.bg-warning-50{background-color:var(--color-warning-50)}.bg-warning-100{background-color:var(--color-warning-100)}.bg-warning-200{background-color:var(--color-warning-200)}.bg-warning-300{background-color:var(--color-warning-300)}.bg-warning-400{background-color:var(--color-warning-400)}.bg-warning-500{background-color:var(--color-warning-500)}.bg-warning-600{background-color:var(--color-warning-600)}.bg-warning-700{background-color:var(--color-warning-700)}.bg-warning-800{background-color:var(--color-warning-800)}.bg-warning-900{background-color:var(--color-warning-900)}.bg-warning-950{background-color:var(--color-warning-950)}.text-warning-50{color:var(--color-warning-50)}.text-warning-100{color:var(--color-warning-100)}.text-warning-200{color:var(--color-warning-200)}.text-warning-300{color:var(--color-warning-300)}.text-warning-400{color:var(--color-warning-400)}.text-warning-500{color:var(--color-warning-500)}.text-warning-600{color:var(--color-warning-600)}.text-warning-700{color:var(--color-warning-700)}.text-warning-800{color:var(--color-warning-800)}.text-warning-900{color:var(--color-warning-900)}.text-warning-950{color:var(--color-warning-950)}.border-warning-50{border-color:var(--color-warning-50)}.border-warning-100{border-color:var(--color-warning-100)}.border-warning-200{border-color:var(--color-warning-200)}.border-warning-300{border-color:var(--color-warning-300)}.border-warning-400{border-color:var(--color-warning-400)}.border-warning-500{border-color:var(--color-warning-500)}.border-warning-600{border-color:var(--color-warning-600)}.border-warning-700{border-color:var(--color-warning-700)}.border-warning-800{border-color:var(--color-warning-800)}.border-warning-900{border-color:var(--color-warning-900)}.border-warning-950{border-color:var(--color-warning-950)}.bg-error-50{background-color:var(--color-error-50)}.bg-error-100{background-color:var(--color-error-100)}.bg-error-200{background-color:var(--color-error-200)}.bg-error-300{background-color:var(--color-error-300)}.bg-error-400{background-color:var(--color-error-400)}.bg-error-500{background-color:var(--color-error-500)}.bg-error-600{background-color:var(--color-error-600)}.bg-error-700{background-color:var(--color-error-700)}.bg-error-800{background-color:var(--color-error-800)}.bg-error-900{background-color:var(--color-error-900)}.bg-error-950{background-color:var(--color-error-950)}.text-error-50{color:var(--color-error-50)}.text-error-100{color:var(--color-error-100)}.text-error-200{color:var(--color-error-200)}.text-error-300{color:var(--color-error-300)}.text-error-400{color:var(--color-error-400)}.text-error-500{color:var(--color-error-500)}.text-error-600{color:var(--color-error-600)}.text-error-700{color:var(--color-error-700)}.text-error-800{color:var(--color-error-800)}.text-error-900{color:var(--color-error-900)}.text-error-950{color:var(--color-error-950)}.border-error-50{border-color:var(--color-error-50)}.border-error-100{border-color:var(--color-error-100)}.border-error-200{border-color:var(--color-error-200)}.border-error-300{border-color:var(--color-error-300)}.border-error-400{border-color:var(--color-error-400)}.border-error-500{border-color:var(--color-error-500)}.border-error-600{border-color:var(--color-error-600)}.border-error-700{border-color:var(--color-error-700)}.border-error-800{border-color:var(--color-error-800)}.border-error-900{border-color:var(--color-error-900)}.border-error-950{border-color:var(--color-error-950)}.bg-info-50{background-color:var(--color-info-50)}.bg-info-100{background-color:var(--color-info-100)}.bg-info-200{background-color:var(--color-info-200)}.bg-info-300{background-color:var(--color-info-300)}.bg-info-400{background-color:var(--color-info-400)}.bg-info-500{background-color:var(--color-info-500)}.bg-info-600{background-color:var(--color-info-600)}.bg-info-700{background-color:var(--color-info-700)}.bg-info-800{background-color:var(--color-info-800)}.bg-info-900{background-color:var(--color-info-900)}.bg-info-950{background-color:var(--color-info-950)}.text-info-50{color:var(--color-info-50)}.text-info-100{color:var(--color-info-100)}.text-info-200{color:var(--color-info-200)}.text-info-300{color:var(--color-info-300)}.text-info-400{color:var(--color-info-400)}.text-info-500{color:var(--color-info-500)}.text-info-600{color:var(--color-info-600)}.text-info-700{color:var(--color-info-700)}.text-info-800{color:var(--color-info-800)}.text-info-900{color:var(--color-info-900)}.text-info-950{color:var(--color-info-950)}.border-info-50{border-color:var(--color-info-50)}.border-info-100{border-color:var(--color-info-100)}.border-info-200{border-color:var(--color-info-200)}.border-info-300{border-color:var(--color-info-300)}.border-info-400{border-color:var(--color-info-400)}.border-info-500{border-color:var(--color-info-500)}.border-info-600{border-color:var(--color-info-600)}.border-info-700{border-color:var(--color-info-700)}.border-info-800{border-color:var(--color-info-800)}.border-info-900{border-color:var(--color-info-900)}.border-info-950{border-color:var(--color-info-950)}:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}@media (prefers-reduced-motion:reduce){*,
|
|
101
101
|
*::after,
|
|
102
102
|
*::before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}@media (prefers-contrast:high){:root{--border:oklch(from var(--border) calc(l - 10%) c h)}*{border-width:2px}}.navbar{backdrop-filter:blur(var(--blur));background-color:oklch(from var(--background-alt) l c h/90%);box-sizing:border-box;left:0;margin:0;max-width:100%;overflow:visible;padding:0;position:sticky;right:0;top:0;width:100%;z-index:var(--z-navbar,5000)}@media (width <= 1023px){.navbar--search-open{border-bottom:0 transparent!important;box-shadow:none!important}.navbar--search-open::after{display:none!important}}.navbar--menu-open{z-index:calc(var(--z-navbar) - 1)}.navbar--search-open{z-index:calc(var(--z-navbar-search-overlay) - 1)}.navbar:not(.navbar--menu-open, .navbar--search-open){z-index:var(--z-navbar)}@media (width <= 1023px){.navbar--menu-open{z-index:var(--z-navbar-mobile-menu-open)}.navbar--search-open{z-index:var(--z-navbar)}}.navbar__container{align-items:center;box-sizing:border-box;display:flex;gap:var(--spacing-4);justify-content:space-between;margin:0 auto;max-width:var(--container-default);min-height:var(--spacing-16);min-width:0;padding:0 var(--spacing-4);width:100%}.navbar::after{background-color:var(--border);bottom:0;content:"";height:var(--spacing-0-125);left:0;pointer-events:none;position:absolute;right:0;width:100%;z-index:var(--z-base)}@media (width <= 1023px){.navbar--search-open::after{display:none!important}}.navbar__actions-desktop{align-items:center;display:flex;flex-shrink:0;gap:var(--spacing-4);margin-left:auto;order:999}.navbar__brand{align-items:center;display:flex;gap:var(--spacing-3)}.navbar__logo{flex-shrink:0;height:var(--spacing-8);width:auto}.navbar__brand-link{align-items:center;color:var(--text);display:flex;font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);gap:var(--spacing-2);text-decoration:none;transition:color var(--transition-base)}.navbar__brand-link:hover{color:var(--accent)}.navbar__brand-link:focus-visible{border-radius:var(--radius);outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.navbar__toggle{align-items:center;background:none;border:none;color:var(--text);cursor:pointer;display:none;flex-direction:column;gap:var(--spacing-1);justify-content:center;padding:var(--spacing-2)}.navbar__toggle:focus-visible{border-radius:var(--radius);outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.navbar__toggle-icon{display:flex;flex-direction:column;gap:var(--spacing-0-375);height:calc(var(--spacing-3) + var(--spacing-0-125));position:relative;width:var(--spacing-6)}.navbar__toggle-icon span{background-color:var(--text);border-radius:var(--spacing-0-125);display:block;height:var(--spacing-0-125);position:absolute;transform-origin:center;transition:transform var(--transition-slow) ease,opacity var(--transition-base) ease;width:100%}.navbar__toggle-icon span:nth-child(1){top:0}.navbar__toggle-icon span:nth-child(2){top:50%;transform:translateY(-50%)}.navbar__toggle-icon span:nth-child(3){bottom:0}.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon span:nth-child(2){opacity:0;transform:translateY(-50%) scaleX(0)}.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon span:nth-child(3){bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg)}.navbar__menu{align-items:center;display:flex;flex:1;gap:var(--spacing-8);justify-content:flex-start;list-style:none;margin:0;margin-left:var(--spacing-4);padding:0}.navbar__item,.navbar__item--has-dropdown,.navbar__link{position:relative}.navbar__link{align-items:center;color:var(--text);display:flex;font-weight:var(--font-weight-medium);gap:var(--spacing-0-375);padding:var(--spacing-2) 0;text-decoration:none;transition:color var(--transition-base)}button.navbar__link,
|
|
103
|
-
div.navbar__link{background:none;border:none;cursor:pointer;font:inherit;text-align:left}div.navbar__sublink{cursor:pointer}.navbar__dropdown-icon{color:currentcolor;flex-shrink:0;height:var(--spacing-3);transition:transform var(--transition-base),color var(--transition-base);width:var(--spacing-3)}.navbar__item--has-dropdown:hover .navbar__dropdown-icon,.navbar__item--has-dropdown[aria-expanded="true"] .navbar__dropdown-icon{transform:rotate(180deg)}.navbar__item--has-dropdown[aria-expanded="true"] .navbar__link{color:var(--accent)}.navbar__submenu{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);left:0;list-style:none;margin:0;max-width:var(--spacing-80);min-width:var(--spacing-48);opacity:0;padding:var(--spacing-2) 0;position:absolute;top:100%;transform:translateY(calc(var(--spacing-2)*-1));transition:opacity var(--transition-base),visibility var(--transition-base),transform var(--transition-base);visibility:hidden;white-space:nowrap;width:-moz-max-content;width:max-content;z-index:var(--z-dropdown)}@media (width > 1023px){.navbar__submenu--components{display:block;max-width:
|
|
103
|
+
div.navbar__link{background:none;border:none;cursor:pointer;font:inherit;text-align:left}div.navbar__sublink{cursor:pointer}.navbar__dropdown-icon{color:currentcolor;flex-shrink:0;height:var(--spacing-3);transition:transform var(--transition-base),color var(--transition-base);width:var(--spacing-3)}.navbar__item--has-dropdown:hover .navbar__dropdown-icon,.navbar__item--has-dropdown[aria-expanded="true"] .navbar__dropdown-icon{transform:rotate(180deg)}.navbar__item--has-dropdown[aria-expanded="true"] .navbar__link{color:var(--accent)}.navbar__submenu{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);left:0;list-style:none;margin:0;max-width:var(--spacing-80);min-width:var(--spacing-48);opacity:0;padding:var(--spacing-2) 0;position:absolute;top:100%;transform:translateY(calc(var(--spacing-2)*-1));transition:opacity var(--transition-base),visibility var(--transition-base),transform var(--transition-base);visibility:hidden;white-space:nowrap;width:-moz-max-content;width:max-content;z-index:var(--z-dropdown)}@media (width > 1023px){.navbar__submenu--components{display:block;max-width:min(90vw,32rem);min-width:var(--spacing-105);padding:var(--spacing-3);white-space:normal;width:-moz-max-content;width:max-content}.navbar__submenu--components > li{display:block;margin:0;padding:0}.navbar__submenu--components .navbar__submenu-overview{border-bottom:var(--border-width) solid var(--border);margin-bottom:var(--spacing-2);padding-bottom:var(--spacing-2)}.navbar__submenu--components .navbar__sublink--overview{box-sizing:border-box;display:block;padding:var(--spacing-0-625) var(--spacing-4);width:100%}.navbar__submenu--components .navbar__submenu-components-grid{display:grid;gap:0 var(--spacing-2);grid-template-columns:1fr 1fr 1fr;min-width:-moz-max-content;min-width:max-content}.navbar__submenu--components .navbar__submenu-column{display:flex;flex-direction:column;gap:0;min-width:-moz-max-content;min-width:max-content}.navbar__submenu--components .navbar__submenu-column .navbar__sublink{box-sizing:border-box;min-width:0;padding:var(--spacing-0-625) var(--spacing-4);white-space:nowrap}.navbar__submenu--themes{display:block;max-width:var(--spacing-105);min-width:var(--spacing-105);padding:var(--spacing-3);white-space:normal;width:var(--spacing-105)}.navbar__submenu--themes > li{display:block;margin:0;padding:0}.navbar__submenu--themes .navbar__submenu-overview{border-bottom:var(--border-width) solid var(--border);margin-bottom:var(--spacing-2);padding-bottom:var(--spacing-2)}.navbar__submenu--themes .navbar__sublink--overview{box-sizing:border-box;display:block;padding:var(--spacing-0-625) var(--spacing-4);width:100%}.navbar__submenu--themes .navbar__submenu-themes-grid{display:grid;gap:0 var(--spacing-2);grid-template-columns:1fr 1fr;min-width:0}.navbar__submenu--themes .navbar__submenu-column{display:flex;flex-direction:column;gap:0;min-width:0}.navbar__submenu--themes .navbar__submenu-column-label{border-bottom:var(--border-width) solid var(--border);color:var(--text-dim);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);letter-spacing:.05em;margin-bottom:var(--spacing-0-625);padding:var(--spacing-0-625) var(--spacing-4);text-transform:uppercase}.navbar__submenu--themes .navbar__submenu-column .navbar__sublink{box-sizing:border-box;min-width:0;overflow:hidden;padding:var(--spacing-0-625) var(--spacing-4);text-overflow:ellipsis;white-space:nowrap}.navbar__submenu--themes .navbar__sublink--with-icon{align-items:center;display:flex;gap:var(--spacing-2)}.navbar__submenu--themes .navbar__sublink-icon{color:var(--text-dim);flex-shrink:0}.navbar__submenu--themes .navbar__sublink-text{min-width:0;overflow:hidden;text-overflow:ellipsis}}.navbar__submenu--docs{max-width:var(--spacing-80);min-width:var(--spacing-56)}.navbar__submenu--docs .navbar__submenu-group{display:block;list-style:none;margin:0;padding:0}.navbar__submenu--docs .navbar__submenu-group:not(:first-child){border-top:var(--border-width) solid var(--border);margin-top:var(--spacing-3);padding-top:var(--spacing-2)}.navbar__submenu--docs .navbar__submenu-group-label{color:var(--text-dim);display:block;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wider);margin:0;padding:var(--spacing-2) var(--spacing-4) var(--spacing-2);text-transform:uppercase}.navbar__submenu--docs .navbar__submenu-list{list-style:none;margin:0;padding:0}.navbar__submenu--docs .navbar__submenu-list .navbar__sublink{padding-left:var(--spacing-4)}
|
|
104
104
|
.navbar__item--has-dropdown:hover .navbar__submenu,.navbar__item--has-dropdown[aria-expanded="true"] .navbar__submenu{opacity:1;transform:translateY(0);visibility:visible}.navbar__sublink{color:var(--text);display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);padding:var(--spacing-0-625) var(--spacing-4);text-decoration:none;transition:background-color var(--transition-base),color var(--transition-base)}.navbar__sublink:hover,.navbar__sublink[aria-current="page"]{background-color:var(--background);color:var(--accent)}.navbar__sublink[aria-current="page"]{font-weight:var(--font-weight-medium)}.navbar__sublink:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:calc(var(--outline-offset)*-1)}.navbar__link:hover{color:var(--accent)}.navbar__link:focus-visible{border-radius:var(--radius);outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.navbar__link::after{background-color:var(--accent);bottom:0;content:"";height:var(--spacing-0-125);left:0;position:absolute;transition:width var(--transition-slow);width:0}
|
|
105
105
|
.navbar__link:focus-visible::after,.navbar__link:hover::after,
|
|
106
106
|
.navbar__link[aria-current="page"]::after{width:100%}.navbar__link[aria-current="page"]{color:var(--accent)}.navbar__actions,.navbar__actions .search{display:none}.navbar__settings-btn{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;font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-2);min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--spacing-2) var(--spacing-3);transition:background-color var(--transition-base),border-color var(--transition-base)}.navbar__settings-btn:hover{background-color:var(--background);border-color:var(--accent);color:var(--text)}.navbar__settings-btn:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.navbar__settings-icon{color:var(--icon);flex-shrink:0;height:var(--spacing-5);width:var(--spacing-5)}.navbar__settings-label{font-size:var(--font-size-sm)}@media (width <= 1023px){.navbar{overflow-x:clip}.navbar__container{gap:var(--spacing-2);min-width:0;padding-left:var(--spacing-3);padding-right:var(--spacing-3)}.navbar__brand{flex-shrink:1;min-width:0;order:0;overflow:hidden}.navbar__brand-link{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.navbar__toggle{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);display:flex;margin-left:var(--spacing-2);margin-right:0;min-height:var(--touch-target-min);min-width:var(--touch-target-min);order:1;padding:var(--spacing-2) var(--spacing-3);transition:background-color var(--transition-base),border-color var(--transition-base)}.navbar__toggle:hover{background-color:var(--background);border-color:var(--accent)}.navbar__toggle-icon{height:var(--spacing-5)!important;width:var(--spacing-5)!important}.navbar__toggle-icon span{border-radius:var(--radius-sm);height:calc(var(--spacing-0-125)*1.5)!important}.navbar__menu{align-items:stretch;background-color:var(--background-alt);border-top:none;box-shadow:var(--shadow-md);box-sizing:border-box;flex-direction:column;gap:var(--spacing-0);left:0;margin:0;max-height:0;max-width:100%;opacity:0;overflow:hidden;padding:0;pointer-events:none;position:absolute;right:0;top:100%;transition:max-height var(--transition-slowest) var(--ease-in-out-cubic),opacity var(--transition-ease-out),padding var(--transition-slowest) var(--ease-in-out-cubic);width:100%;z-index:var(--z-navbar-mobile-menu)}.navbar__menu--open{border-bottom:none!important;left:0;max-height:var(--vh-80);opacity:1;overflow-x:hidden;overflow-y:auto;padding:var(--spacing-4) 0;pointer-events:auto;position:fixed;right:0;scroll-behavior:auto;top:var(--spacing-16);transform:translateZ(0);transition:max-height var(--transition-slowest) var(--ease-in-out-cubic),opacity var(--transition-ease-in),padding var(--transition-slowest) var(--ease-in-out-cubic);width:100%;will-change:scroll-position;z-index:var(--z-navbar-mobile-menu-open)}.navbar__menu .navbar__item{contain:layout;margin:0;max-width:100%;padding:0;width:100%}.navbar__menu:not(.navbar__menu--open){padding:0;transition:max-height var(--transition-slowest) var(--ease-in-out-cubic),opacity var(--transition-ease-out),padding var(--transition-slowest) var(--ease-in-out-cubic)}.navbar__menu--open .navbar__item:last-of-type .navbar__link{border-bottom:none!important}.navbar__item{width:100%}.navbar__link{align-items:center;border-bottom:var(--border-width) solid var(--border);box-sizing:border-box;display:flex;justify-content:space-between;margin:0;max-width:100%;min-height:var(--touch-target-min);min-width:0;overflow-wrap:break-word;padding:var(--spacing-3) var(--spacing-4) var(--spacing-3) var(--spacing-3);transition:background-color var(--transition-base) ease,color var(--transition-base) ease;width:100%}.navbar__link .navbar__dropdown-icon{display:block!important;flex-shrink:0!important;height:var(--spacing-3)!important;margin-left:var(--spacing-2);margin-right:var(--spacing-4);opacity:1!important;transition:transform var(--transition-base) ease-out;visibility:visible!important;width:var(--spacing-3)!important}.navbar__submenu{background-color:var(--background);border:none;border-top:var(--border-width) solid var(--border);box-shadow:none;contain:layout;grid-template-columns:none!important;list-style:none;margin:0!important;max-height:0;max-width:100%!important;opacity:1;overflow:hidden;padding:0!important;position:static;transform:none;transition:max-height .25s cubic-bezier(.4,0,.2,1);visibility:visible;width:100%!important}.navbar__submenu,.navbar__submenu--components .navbar__submenu-components-grid{display:block!important}.navbar__submenu--components .navbar__submenu-column{display:block!important;margin-top:var(--spacing-2);width:100%!important}.navbar__submenu--components .navbar__submenu-column .navbar__sublink{border-bottom:var(--border-width) solid var(--border);min-height:var(--touch-target-min)!important;padding:var(--spacing-3) var(--spacing-5) var(--spacing-3) var(--spacing-10)!important}.navbar__item--has-dropdown[aria-expanded="true"] .navbar__submenu{max-height:var(--max-height-navbar-submenu);overflow:visible;padding:0!important}@media (prefers-reduced-motion:reduce){.navbar__menu,.navbar__menu--open,.navbar__submenu{transition:none}}.navbar__submenu li{padding:0!important}.navbar__sublink,.navbar__submenu li{display:block!important;margin:0!important;max-width:100%!important;width:100%!important}.navbar__sublink{border-bottom:var(--border-width) solid var(--border);box-sizing:border-box!important;min-height:var(--touch-target-min)!important;min-width:0!important;overflow-wrap:break-word!important;padding:var(--spacing-3) var(--spacing-5) var(--spacing-3) var(--spacing-10)!important}.navbar__sublink:last-child{border-bottom:none}.navbar__submenu--themes .navbar__submenu-themes-grid{display:block!important}.navbar__submenu--themes .navbar__submenu-column{display:block!important;margin-top:var(--spacing-2);width:100%!important}.navbar__submenu--themes .navbar__submenu-column-label{border-bottom:var(--border-width) solid var(--border);box-sizing:border-box;display:block;font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-0-625);margin-top:var(--spacing-2);padding-bottom:var(--spacing-0-625);padding-left:var(--spacing-10);padding-right:var(--spacing-5);width:100%}.navbar__submenu--themes .navbar__submenu-column:first-of-type .navbar__submenu-column-label{margin-top:0}.navbar__submenu--themes .navbar__submenu-column .navbar__sublink{border-bottom:var(--border-width) solid var(--border);min-height:var(--touch-target-min)!important;padding:var(--spacing-3) var(--spacing-5) var(--spacing-3) var(--spacing-10)!important}.navbar__submenu--themes .navbar__sublink--with-icon{align-items:center;display:flex!important;gap:var(--spacing-2)}.navbar__submenu--themes .navbar__sublink-icon{color:var(--text-dim);flex-shrink:0}.navbar__submenu--themes .navbar__sublink-text{min-width:0;overflow:hidden;text-overflow:ellipsis}.navbar__submenu--docs .navbar__submenu-group{border-top:none;margin-top:0;padding-top:0}.navbar__submenu--docs .navbar__submenu-group:not(:first-child){border-top:var(--border-width) solid var(--border);margin-top:var(--spacing-2);padding-top:var(--spacing-2)}.navbar__submenu--docs .navbar__submenu-group-label{border-bottom:var(--border-width) solid var(--border);padding:var(--spacing-2) var(--spacing-5) var(--spacing-2) var(--spacing-10)}.navbar__submenu--docs .navbar__submenu-list .navbar__sublink{min-height:var(--touch-target-min)!important;padding:var(--spacing-3) var(--spacing-5) var(--spacing-3) var(--spacing-10)!important}.navbar__item--has-dropdown[aria-expanded="true"] .navbar__submenu--docs{max-height:min(70vh,420px)!important;overflow-x:hidden;overflow-y:auto!important;-webkit-overflow-scrolling:touch}.navbar__submenu--docs .navbar__sublink[aria-current="page"]{background-color:oklch(from var(--accent) l c h/12%)!important;box-shadow:inset var(--spacing-0-125) 0 0 var(--accent)!important;color:var(--accent)!important;font-weight:var(--font-weight-medium)}.navbar__item:last-of-type .navbar__link{border-bottom:var(--border-width) solid var(--border)}.navbar__actions-desktop .navbar__settings-btn{align-items:center;display:flex;justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--spacing-2) var(--spacing-3);width:auto}.navbar__actions-desktop .navbar__settings-label{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.navbar__actions-desktop .search__trigger{justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--spacing-2) var(--spacing-3);width:auto}
|
|
@@ -157,11 +157,12 @@ div.navbar__link{background:none;border:none;cursor:pointer;font:inherit;text-al
|
|
|
157
157
|
.accordion__panel-content :global(ol:first-child),.accordion__panel-content :global(p:first-child),
|
|
158
158
|
.accordion__panel-content :global(ul:first-child){margin-top:0}
|
|
159
159
|
.accordion__panel-content :global(ol:last-child),.accordion__panel-content :global(p:last-child),
|
|
160
|
-
.accordion__panel-content :global(ul:last-child){margin-bottom:0}.accordion__slot-content{display:none}.tabs{width:100%}.tabs__list{border-bottom:var(--outline-width) solid var(--border);display:flex;gap:var(--spacing-1);margin-bottom:var(--spacing-6);overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.tabs__list::-webkit-scrollbar{height:var(--spacing-0-125)}.tabs__list::-webkit-scrollbar-track{background:var(--background-alt)}.tabs__list::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius)}.tabs__tab{align-items:center;background:transparent;border:none;border-bottom:calc(var(--outline-width)*2) solid transparent;border-radius:var(--radius-md) var(--radius-md) 0 0;color:var(--text-dim);cursor:pointer;display:inline-flex;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);gap:var(--spacing-2);justify-content:center;margin-bottom:calc(var(--outline-width)*-1*2);min-height:var(--touch-target-min);outline:none;padding:var(--spacing-3) var(--spacing-5);position:relative;transition:color var(--transition-base),border-color var(--transition-base),background-color var(--transition-base);white-space:nowrap}.tabs__tab-icon{flex-shrink:0;vertical-align:middle}.tabs__tab:hover:not(.tabs__tab--active){background-color:var(--background-alt);color:var(--text)}.tabs__tab:focus-visible{border-radius:var(--radius-md) var(--radius-md) 0 0;outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.tabs__tab--active{border-bottom-color:var(--accent-fg);border-bottom-width:calc(var(--outline-width)*3);font-weight:var(--font-weight-semibold)}.tabs__tab--active,.tabs__tab--active:hover{background-color:var(--background-alt);color:var(--accent-fg)}.tabs__tab--active:hover{border-bottom-color:var(--accent-fg)}.tabs__panels-wrapper{width:100%}.tabs__panel{display:none;min-height:var(--spacing-20);padding:var(--spacing-6) 0;width:100%}.tabs__panel--active{animation:fadeIn var(--transition-base);display:block}.tabs__panel-content{width:100%}@keyframes fade-in{from{opacity:0;transform:translateY(var(--spacing-1))}to{opacity:1;transform:translateY(0)}}.tabs__slot-content{display:none}.tabs--pills .tabs__list{border-bottom:none;gap:var(--spacing-2)}.tabs--pills .tabs__tab{border-bottom:none;border-radius:var(--radius-md);margin-bottom:0}.tabs--pills .tabs__tab--active{background-color:var(--accent);border-bottom-color:transparent;color:var(--accent-text)}.tabs--pills .tabs__tab--active:hover{background-color:var(--accent-hover);color:var(--accent-text)}.tabs--underline .tabs__list{border-bottom:var(--outline-width) solid var(--border)}.tabs--underline .tabs__tab{border-bottom:var(--outline-width) solid transparent;padding-bottom:var(--spacing-3)}.tabs--underline .tabs__tab--active{border-bottom-color:var(--accent-fg);border-bottom-width:calc(var(--outline-width)*2)}@media (width <= 640px){.tabs__list{gap:var(--spacing-1)}.tabs__tab{font-size:var(--font-size-sm);padding:var(--spacing-2) var(--spacing-3)}.tabs__panel{padding:var(--spacing-3) 0}}@media (prefers-reduced-motion:reduce){.tabs__tab{transition:none}.tabs__panel--active{animation:none}}.progress{display:flex;flex-direction:column;gap:var(--spacing-2);width:100%}.progress__track{background-color:var(--background-alt);border:var(--border-width) solid var(--border);overflow:hidden;width:100%}.progress__bar,.progress__track{border-radius:var(--radius-full)}.progress__bar{flex-shrink:0;height:100%;min-height:var(--spacing-2);transition:width var(--transition-slow) var(--ease-in-out-cubic)}.progress--sm .progress__track{height:var(--spacing-1)}.progress--sm .progress__bar{min-height:var(--spacing-1)}.progress--md .progress__track{height:var(--spacing-2)}.progress--md .progress__bar{min-height:var(--spacing-2)}.progress--lg .progress__track{height:var(--spacing-3)}.progress--lg .progress__bar{min-height:var(--spacing-3)}.progress--primary .progress__bar{background-color:var(--accent)}.progress--success .progress__bar{background-color:var(--success)}.progress--warning .progress__bar{background-color:var(--warning)}.progress--error .progress__bar{background-color:var(--error)}.progress--info .progress__bar{background-color:var(--info)}.progress__label{color:var(--text-dim);font-size:var(--font-size-sm);text-align:right}.progress--indeterminate .progress__bar{animation:progress-indeterminate 1.5s ease-in-out infinite;min-width:30%;width:30%!important}@keyframes progress-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(233.333%)}}@media (prefers-reduced-motion:reduce){.progress__bar{transition:none}.progress--indeterminate .progress__bar{animation:none;opacity:.7;width:50%!important}}.spinner{align-items:center;display:inline-flex;justify-content:center;vertical-align:middle}.spinner__ring{animation:spinner-rotate .8s linear infinite;border-color:var(--border);border-radius:var(--radius-full);border-style:solid;border-top-color:currentcolor;display:block}.spinner--sm .spinner__ring{border-width:var(--border-width-2);height:var(--spacing-4);width:var(--spacing-4)}.spinner--md .spinner__ring{border-width:var(--border-width-3);height:var(--spacing-6);width:var(--spacing-6)}.spinner--lg .spinner__ring{border-width:var(--border-width-4);height:var(--spacing-8);width:var(--spacing-8)}.spinner--primary{color:var(--accent)}.spinner--success{color:var(--success)}.spinner--warning{color:var(--warning)}.spinner--error{color:var(--error)}.spinner--info{color:var(--info)}@keyframes spinner-rotate{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.spinner__ring{animation:none;border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent}}.avatar{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);color:var(--text-dim);display:inline-flex;flex-shrink:0;font-size:inherit;font-weight:var(--font-weight-semibold);justify-content:center;line-height:1;overflow:hidden}.avatar__img{display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.avatar__initials{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.avatar--sm{font-size:var(--font-size-xs);height:var(--spacing-8);width:var(--spacing-8)}.avatar--md{font-size:var(--font-size-sm);height:var(--spacing-10);width:var(--spacing-10)}.avatar--lg{font-size:var(--font-size-base);height:var(--spacing-12);width:var(--spacing-12)}.avatar--circle{border-radius:var(--radius-full)}.avatar--square{border-radius:var(--radius-md)}.divider{align-items:center;color:var(--text-dim);display:flex;font-size:var(--font-size-sm);gap:var(--spacing-3)}.divider__line{border:none;border-left:none;border-top:var(--border-width) solid var(--border);flex:1;min-height:0;min-width:0}.divider__label{flex-shrink:0;padding:0 var(--spacing-2);white-space:nowrap}.divider--horizontal{width:100%}.divider--horizontal .divider__line{border-left:none;border-top:var(--border-width) solid var(--border)}.divider--vertical{flex-direction:column;height:100%;min-height:var(--spacing-8);width:auto}.divider--vertical .divider__line{border-left:var(--border-width) solid var(--border);border-top:none;flex:1;min-height:var(--spacing-4);width:0}.table{display:flex;flex-direction:column;gap:var(--spacing-3);width:100%}.table__filter-wrap{align-items:center;display:flex;flex-shrink:0;position:relative}.table__filter-icon{align-items:center;color:var(--icon-dim);display:flex;justify-content:center;left:var(--spacing-3);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.table__filter-icon-svg{color:currentcolor;height:var(--table-filter-icon-size,1.25rem);width:var(--table-filter-icon-size,1.25rem)}.table__filter-wrap:focus-within .table__filter-icon{color:var(--accent)}.table__filter-wrap .table__filter{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);font-family:var(--font-family);font-size:var(--font-size-base);max-width:var(--spacing-80);padding-bottom:var(--spacing-2);padding-left:3.5rem;padding-right:var(--spacing-3);padding-top:var(--spacing-2);width:100%}.table__filter-wrap .table__filter::-moz-placeholder{color:var(--text-dim)}.table__filter-wrap .table__filter::placeholder{color:var(--text-dim)}.table__filter-wrap .table__filter:focus{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.table__wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}.table__table{border-collapse:collapse;border-spacing:0;font-size:var(--font-size-sm);width:100%}.table__caption{color:var(--text);font-weight:var(--font-weight-semibold);padding:var(--spacing-2) 0;text-align:left}.table__head .table__row{border-bottom:var(--border-width-2) solid var(--border)}.table__cell{border-bottom:var(--border-width) solid var(--border);color:var(--text);padding:var(--spacing-3) var(--spacing-4);text-align:left}.table__cell--head{color:var(--text);font-weight:var(--font-weight-semibold);white-space:nowrap}.table__sort-trigger{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:inline-flex;font:inherit;font-weight:var(--font-weight-semibold);padding:0;text-align:left;transition:background-color var(--transition-fast),color var(--transition-fast);width:100%}.table__sort-trigger:hover{background-color:var(--background-alt);color:var(--text)}.table__sort-trigger:hover .table__sort-icon-svg{color:var(--accent)}.table__sort-trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.table--sortable .table__cell--head{padding:0}.table--sortable .table__cell--head .table__sort-trigger{padding:var(--spacing-3) var(--spacing-4)}.table__cell-content{display:inline-block}.table__sort-icon{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center;margin-left:var(--spacing-2)}.table__sort-icon-svg{color:var(--icon-dim);height:var(--table-sort-icon-size,1.25rem);transition:color var(--transition-fast);width:var(--table-sort-icon-size,1.25rem)}.table__body .table__row:hover{background-color:var(--background-alt)}.table__body .table__row:hover .table__cell{color:var(--text)}.table--striped .table__body .table__row:nth-child(even){background-color:var(--background-alt)}.table--striped .table__body .table__row:nth-child(even):hover{background-color:var(--background)}.table--striped .table__body .table__row:nth-child(even):hover .table__cell{color:var(--text)}.table__body .table__row[hidden]{display:none}@media (prefers-reduced-motion:reduce){.table__sort-icon-svg,.table__sort-trigger{transition:none}}.home{padding:var(--spacing-8) 0}.home__container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:var(--container-default);min-width:0;padding-left:var(--spacing-4);padding-right:var(--spacing-4);width:100%}.home__hero{margin-bottom:var(--spacing-16);padding:var(--spacing-16) 0;text-align:center}.home__title{color:var(--text);font-size:var(--font-size-5xl);font-weight:var(--font-weight-extrabold);line-height:var(--line-height-tight);margin:0 0 var(--spacing-6) 0}.home__subtitle{color:var(--text-dim);font-size:var(--font-size-xl);line-height:var(--line-height-relaxed);margin:0 auto var(--spacing-8) auto;max-width:var(--spacing-175)}.home__hero-ctas{display:flex;flex-wrap:wrap;gap:var(--spacing-4);justify-content:center;margin-top:var(--spacing-6)}.home__hero-cta{text-decoration:none}.home__section-title{color:var(--text);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-8);text-align:center}.home__install{align-items:center;display:flex;flex-direction:column;justify-content:center;margin-bottom:var(--spacing-16)}.home__install-grid{display:grid;gap:0;grid-template-columns:1fr;margin:0 auto;max-width:var(--spacing-150);width:100%}@media (width >= 768px){.home__install-grid{grid-template-columns:1fr auto 1fr;max-width:none}}.home__install-block{align-items:stretch;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-height:var(--spacing-24);padding:var(--spacing-6);width:100%}.home__install-or{align-items:center;color:var(--text-dim);display:flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);gap:var(--spacing-4);justify-content:center;letter-spacing:var(--letter-spacing-wider);padding:var(--spacing-4) 0}
|
|
160
|
+
.accordion__panel-content :global(ul:last-child){margin-bottom:0}.accordion__slot-content{display:none}.tabs{width:100%}.tabs__list{border-bottom:var(--outline-width) solid var(--border);display:flex;gap:var(--spacing-1);margin-bottom:var(--spacing-6);overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.tabs__list::-webkit-scrollbar{height:var(--spacing-0-125)}.tabs__list::-webkit-scrollbar-track{background:var(--background-alt)}.tabs__list::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius)}.tabs__tab{align-items:center;background:transparent;border:none;border-bottom:calc(var(--outline-width)*2) solid transparent;border-radius:var(--radius-md) var(--radius-md) 0 0;color:var(--text-dim);cursor:pointer;display:inline-flex;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);gap:var(--spacing-2);justify-content:center;margin-bottom:calc(var(--outline-width)*-1*2);min-height:var(--touch-target-min);outline:none;padding:var(--spacing-3) var(--spacing-5);position:relative;transition:color var(--transition-base),border-color var(--transition-base),background-color var(--transition-base);white-space:nowrap}.tabs__tab-icon{flex-shrink:0;vertical-align:middle}.tabs__tab:hover:not(.tabs__tab--active){background-color:var(--background-alt);color:var(--text)}.tabs__tab:focus-visible{border-radius:var(--radius-md) var(--radius-md) 0 0;outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.tabs__tab--active{border-bottom-color:var(--accent-fg);border-bottom-width:calc(var(--outline-width)*3);font-weight:var(--font-weight-semibold)}.tabs__tab--active,.tabs__tab--active:hover{background-color:var(--background-alt);color:var(--accent-fg)}.tabs__tab--active:hover{border-bottom-color:var(--accent-fg)}.tabs__panels-wrapper{width:100%}.tabs__panel{display:none;min-height:var(--spacing-20);padding:var(--spacing-6) 0;width:100%}.tabs__panel--active{animation:fadeIn var(--transition-base);display:block}.tabs__panel-content{width:100%}@keyframes fade-in{from{opacity:0;transform:translateY(var(--spacing-1))}to{opacity:1;transform:translateY(0)}}.tabs__slot-content{display:none}.tabs--pills .tabs__list{border-bottom:none;gap:var(--spacing-2)}.tabs--pills .tabs__tab{border-bottom:none;border-radius:var(--radius-md);margin-bottom:0}.tabs--pills .tabs__tab--active{background-color:var(--accent);border-bottom-color:transparent;color:var(--accent-text)}.tabs--pills .tabs__tab--active:hover{background-color:var(--accent-hover);color:var(--accent-text)}.tabs--underline .tabs__list{border-bottom:var(--outline-width) solid var(--border)}.tabs--underline .tabs__tab{border-bottom:var(--outline-width) solid transparent;padding-bottom:var(--spacing-3)}.tabs--underline .tabs__tab--active{border-bottom-color:var(--accent-fg);border-bottom-width:calc(var(--outline-width)*2)}@media (width <= 640px){.tabs__list{gap:var(--spacing-1)}.tabs__tab{font-size:var(--font-size-sm);padding:var(--spacing-2) var(--spacing-3)}.tabs__panel{padding:var(--spacing-3) 0}}@media (prefers-reduced-motion:reduce){.tabs__tab{transition:none}.tabs__panel--active{animation:none}}.progress{display:flex;flex-direction:column;gap:var(--spacing-2);width:100%}.progress__track{background-color:var(--background-alt);border:var(--border-width) solid var(--border);overflow:hidden;width:100%}.progress__bar,.progress__track{border-radius:var(--radius-full)}.progress__bar{flex-shrink:0;height:100%;min-height:var(--spacing-2);transition:width var(--transition-slow) var(--ease-in-out-cubic)}.progress--sm .progress__track{height:var(--spacing-1)}.progress--sm .progress__bar{min-height:var(--spacing-1)}.progress--md .progress__track{height:var(--spacing-2)}.progress--md .progress__bar{min-height:var(--spacing-2)}.progress--lg .progress__track{height:var(--spacing-3)}.progress--lg .progress__bar{min-height:var(--spacing-3)}.progress--primary .progress__bar{background-color:var(--accent)}.progress--success .progress__bar{background-color:var(--success)}.progress--warning .progress__bar{background-color:var(--warning)}.progress--error .progress__bar{background-color:var(--error)}.progress--info .progress__bar{background-color:var(--info)}.progress__label{color:var(--text-dim);font-size:var(--font-size-sm);text-align:right}.progress--indeterminate .progress__bar{animation:progress-indeterminate 1.5s ease-in-out infinite;min-width:30%;width:30%!important}@keyframes progress-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(233.333%)}}@media (prefers-reduced-motion:reduce){.progress__bar{transition:none}.progress--indeterminate .progress__bar{animation:none;opacity:.7;width:50%!important}}.spinner{align-items:center;display:inline-flex;justify-content:center;vertical-align:middle}.spinner__ring{animation:spinner-rotate .8s linear infinite;border-color:var(--border);border-radius:var(--radius-full);border-style:solid;border-top-color:currentcolor;display:block}.spinner--sm .spinner__ring{border-width:var(--border-width-2);height:var(--spacing-4);width:var(--spacing-4)}.spinner--md .spinner__ring{border-width:var(--border-width-3);height:var(--spacing-6);width:var(--spacing-6)}.spinner--lg .spinner__ring{border-width:var(--border-width-4);height:var(--spacing-8);width:var(--spacing-8)}.spinner--primary{color:var(--accent)}.spinner--success{color:var(--success)}.spinner--warning{color:var(--warning)}.spinner--error{color:var(--error)}.spinner--info{color:var(--info)}@keyframes spinner-rotate{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.spinner__ring{animation:none;border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent}}.avatar{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);color:var(--text-dim);display:inline-flex;flex-shrink:0;font-size:inherit;font-weight:var(--font-weight-semibold);justify-content:center;line-height:1;overflow:hidden}.avatar__img{display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.avatar__initials{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.avatar--sm{font-size:var(--font-size-xs);height:var(--spacing-8);width:var(--spacing-8)}.avatar--md{font-size:var(--font-size-sm);height:var(--spacing-10);width:var(--spacing-10)}.avatar--lg{font-size:var(--font-size-base);height:var(--spacing-12);width:var(--spacing-12)}.avatar--circle{border-radius:var(--radius-full)}.avatar--square{border-radius:var(--radius-md)}.divider{align-items:center;color:var(--text-dim);display:flex;font-size:var(--font-size-sm);gap:var(--spacing-3)}.divider__line{border:none;border-left:none;border-top:var(--border-width) solid var(--border);flex:1;min-height:0;min-width:0}.divider__label{flex-shrink:0;padding:0 var(--spacing-2);white-space:nowrap}.divider--horizontal{width:100%}.divider--horizontal .divider__line{border-left:none;border-top:var(--border-width) solid var(--border)}.divider--vertical{flex-direction:column;height:100%;min-height:var(--spacing-8);width:auto}.divider--vertical .divider__line{border-left:var(--border-width) solid var(--border);border-top:none;flex:1;min-height:var(--spacing-4);width:0}.footer{background-color:var(--background-alt);border-top:var(--border-width) solid var(--border);color:var(--text-dim);font-size:var(--font-size-sm);margin-top:auto;padding:var(--spacing-6) 0}.footer__container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:var(--container-default);padding-left:var(--spacing-4);padding-right:var(--spacing-4);width:100%}.footer__inner{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-4);justify-content:space-between}.footer__copyright{color:var(--text-dim);margin:0}.footer__site-name{color:var(--text);font-weight:var(--font-weight-medium)}.footer__nav{margin:0}.footer__links{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-2) var(--spacing-4);list-style:none;margin:0;padding:0}.footer__link-item{margin:0}.footer__link{color:var(--text-dim);text-decoration:none;transition:color var(--transition-base)}.footer__link:hover{color:var(--accent-fg)}.footer__link:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.table{display:flex;flex-direction:column;gap:var(--spacing-3);width:100%}.table__filter-wrap{align-items:center;display:flex;flex-shrink:0;position:relative}.table__filter-icon{align-items:center;color:var(--icon-dim);display:flex;justify-content:center;left:var(--spacing-3);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.table__filter-icon-svg{color:currentcolor;height:var(--table-filter-icon-size,1.25rem);width:var(--table-filter-icon-size,1.25rem)}.table__filter-wrap:focus-within .table__filter-icon{color:var(--accent)}.table__filter-wrap .table__filter{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);font-family:var(--font-family);font-size:var(--font-size-base);max-width:var(--spacing-80);padding-bottom:var(--spacing-2);padding-left:3.5rem;padding-right:var(--spacing-3);padding-top:var(--spacing-2);width:100%}.table__filter-wrap .table__filter::-moz-placeholder{color:var(--text-dim)}.table__filter-wrap .table__filter::placeholder{color:var(--text-dim)}.table__filter-wrap .table__filter:focus{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.table__wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}.table__table{border-collapse:collapse;border-spacing:0;font-size:var(--font-size-sm);width:100%}.table__caption{color:var(--text);font-weight:var(--font-weight-semibold);padding:var(--spacing-2) 0;text-align:left}.table__head .table__row{border-bottom:var(--border-width-2) solid var(--border)}.table__cell{border-bottom:var(--border-width) solid var(--border);color:var(--text);padding:var(--spacing-3) var(--spacing-4);text-align:left}.table__cell--head{color:var(--text);font-weight:var(--font-weight-semibold);white-space:nowrap}.table__sort-trigger{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:inline-flex;font:inherit;font-weight:var(--font-weight-semibold);padding:0;text-align:left;transition:background-color var(--transition-fast),color var(--transition-fast);width:100%}.table__sort-trigger:hover{background-color:var(--background-alt);color:var(--text)}.table__sort-trigger:hover .table__sort-icon-svg{color:var(--accent)}.table__sort-trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.table--sortable .table__cell--head{padding:0}.table--sortable .table__cell--head .table__sort-trigger{padding:var(--spacing-3) var(--spacing-4)}.table__cell-content{display:inline-block}.table__sort-icon{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center;margin-left:var(--spacing-2)}.table__sort-icon-svg{color:var(--icon-dim);height:var(--table-sort-icon-size,1.25rem);transition:color var(--transition-fast);width:var(--table-sort-icon-size,1.25rem)}.table__body .table__row:hover{background-color:var(--background-alt)}.table__body .table__row:hover .table__cell{color:var(--text)}.table--striped .table__body .table__row:nth-child(even){background-color:var(--background-alt)}.table--striped .table__body .table__row:nth-child(even):hover{background-color:var(--background)}.table--striped .table__body .table__row:nth-child(even):hover .table__cell{color:var(--text)}.table__body .table__row[hidden]{display:none}@media (prefers-reduced-motion:reduce){.table__sort-icon-svg,.table__sort-trigger{transition:none}}.home{padding:var(--spacing-8) 0}.home__container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:var(--container-default);min-width:0;padding-left:var(--spacing-4);padding-right:var(--spacing-4);width:100%}.home__hero{margin-bottom:var(--spacing-16);padding:var(--spacing-16) 0;text-align:center}.home__title{color:var(--text);font-size:var(--font-size-5xl);font-weight:var(--font-weight-extrabold);line-height:var(--line-height-tight);margin:0 0 var(--spacing-6) 0}.home__subtitle{color:var(--text-dim);font-size:var(--font-size-xl);line-height:var(--line-height-relaxed);margin:0 auto var(--spacing-8) auto;max-width:var(--spacing-175)}.home__hero-ctas{display:flex;flex-wrap:wrap;gap:var(--spacing-4);justify-content:center;margin-top:var(--spacing-6)}.home__hero-cta{text-decoration:none}.home__section-title{color:var(--text);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-8);text-align:center}.home__install{align-items:center;display:flex;flex-direction:column;justify-content:center;margin-bottom:var(--spacing-16)}.home__install-grid{display:grid;gap:0;grid-template-columns:1fr;margin:0 auto;max-width:var(--spacing-150);width:100%}@media (width >= 768px){.home__install-grid{grid-template-columns:1fr auto 1fr;max-width:none}}.home__install-block{align-items:stretch;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-height:var(--spacing-24);padding:var(--spacing-6);width:100%}.home__install-or{align-items:center;color:var(--text-dim);display:flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);gap:var(--spacing-4);justify-content:center;letter-spacing:var(--letter-spacing-wider);padding:var(--spacing-4) 0}
|
|
161
161
|
.home__install-or::after,.home__install-or::before{border-top:var(--border-width) solid var(--border);content:"";flex:1;height:0}@media (width >= 768px){.home__install-or{flex-direction:column;gap:var(--spacing-4);padding:0 var(--spacing-4)}
|
|
162
162
|
.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,
|
|
163
|
-
.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{margin:0}.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__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)}.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 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__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)}
|
|
164
|
-
.home__docs-grid,.home__grid
|
|
163
|
+
.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{margin:0}.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__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}
|
|
164
|
+
.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}.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-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,
|
|
165
|
+
.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)}.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,
|
|
165
166
|
.docs-sidebar,
|
|
166
167
|
.docs__sidebar-overlay,
|
|
167
168
|
.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
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
---
|
|
2
|
+
interface FooterLink {
|
|
3
|
+
href: string;
|
|
4
|
+
label: string;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
interface Props {
|
|
8
|
+
/** Site or product name shown in copyright */
|
|
9
|
+
siteName?: string;
|
|
10
|
+
/** Copyright year (default: current year) */
|
|
11
|
+
year?: number;
|
|
12
|
+
/** Optional list of footer links (e.g. Privacy, Terms, Docs) */
|
|
13
|
+
links?: FooterLink[];
|
|
14
|
+
/** Optional class for the root element */
|
|
15
|
+
class?: string;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
const {
|
|
19
|
+
siteName = '',
|
|
20
|
+
year = new Date().getFullYear(),
|
|
21
|
+
links = [],
|
|
22
|
+
class: className = '',
|
|
23
|
+
} = Astro.props;
|
|
24
|
+
|
|
25
|
+
const classes = `footer ${className}`.trim();
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
<footer class={classes} role="contentinfo">
|
|
29
|
+
<div class="footer__container">
|
|
30
|
+
<div class="footer__inner">
|
|
31
|
+
<p class="footer__copyright">
|
|
32
|
+
{siteName ? (
|
|
33
|
+
<>
|
|
34
|
+
<span class="footer__site-name">{siteName}</span>
|
|
35
|
+
{' · '}
|
|
36
|
+
</>
|
|
37
|
+
) : null}
|
|
38
|
+
<span class="footer__year">© {year}</span>
|
|
39
|
+
</p>
|
|
40
|
+
{links.length > 0 ? (
|
|
41
|
+
<nav class="footer__nav" aria-label="Footer">
|
|
42
|
+
<ul class="footer__links">
|
|
43
|
+
{links.map((link) => (
|
|
44
|
+
<li class="footer__link-item">
|
|
45
|
+
<a class="footer__link" href={link.href}>
|
|
46
|
+
{link.label}
|
|
47
|
+
</a>
|
|
48
|
+
</li>
|
|
49
|
+
))}
|
|
50
|
+
</ul>
|
|
51
|
+
</nav>
|
|
52
|
+
) : null}
|
|
53
|
+
<slot />
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
</footer>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
import type { ThemeIconKey } from './themes';
|
|
3
3
|
import { ALL_THEMES } from './themes';
|
|
4
|
+
import Gear from './icons/Gear.astro';
|
|
4
5
|
import Owl from './icons/Owl.astro';
|
|
5
6
|
import Palette from './icons/Palette.astro';
|
|
6
7
|
import Flame from './icons/Flame.astro';
|
|
@@ -17,7 +18,7 @@ import Cherry from './icons/Cherry.astro';
|
|
|
17
18
|
import Brush from './icons/Brush.astro';
|
|
18
19
|
|
|
19
20
|
const iconMap: Record<ThemeIconKey, typeof Owl> = {
|
|
20
|
-
gear:
|
|
21
|
+
gear: Gear,
|
|
21
22
|
owl: Owl,
|
|
22
23
|
palette: Palette,
|
|
23
24
|
flame: Flame,
|
|
@@ -8,13 +8,54 @@ const DOCS_BASE = 'https://rizzo-css.vercel.app';
|
|
|
8
8
|
<div class="home__container">
|
|
9
9
|
<header class="home__hero">
|
|
10
10
|
<h1 class="home__title">Rizzo CSS</h1>
|
|
11
|
-
<p class="home__subtitle">A modern CSS design system
|
|
11
|
+
<p class="home__subtitle">A modern CSS design system with semantic theming, accessibility-first components, and one CLI for Vanilla, Astro, and Svelte. Start here then make it your own.</p>
|
|
12
12
|
<div class="home__hero-ctas">
|
|
13
13
|
<a href={`${DOCS_BASE}/docs/getting-started`} class="btn btn-primary home__hero-cta" target="_blank" rel="noopener noreferrer">Get Started</a>
|
|
14
14
|
<a href={`${DOCS_BASE}/docs/components`} class="btn btn-outline home__hero-cta" target="_blank" rel="noopener noreferrer">View Components</a>
|
|
15
15
|
</div>
|
|
16
16
|
</header>
|
|
17
17
|
|
|
18
|
+
<section class="home__features" aria-labelledby="home-features-heading">
|
|
19
|
+
<h2 id="home-features-heading" class="home__section-title">Features</h2>
|
|
20
|
+
<p class="home__features-intro">A complete design system that works across Vanilla, Astro, and Svelte — same CSS, same components, zero lock-in.</p>
|
|
21
|
+
<div class="home__features-featured">
|
|
22
|
+
<div class="home__card home__card--featured">
|
|
23
|
+
<span class="home__card-icon" aria-hidden="true">Themes</span>
|
|
24
|
+
<h3>14 beautiful themes</h3>
|
|
25
|
+
<p>7 dark and 7 light with OKLCH for perceptual uniformity. System preference, persistence, and a unique icon per theme.</p>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="home__card home__card--featured">
|
|
28
|
+
<span class="home__card-icon" aria-hidden="true">A11y</span>
|
|
29
|
+
<h3>Accessibility first</h3>
|
|
30
|
+
<p>WCAG AA compliant with full keyboard navigation, ARIA, focus management, and screen reader support.</p>
|
|
31
|
+
</div>
|
|
32
|
+
<div class="home__card home__card--featured">
|
|
33
|
+
<span class="home__card-icon" aria-hidden="true">Components</span>
|
|
34
|
+
<h3>31 ready components</h3>
|
|
35
|
+
<p>Navbar, Settings, Theme Switcher, Font Switcher, Modal, Dropdown, Tabs, Forms, and more — all accessible and themeable.</p>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
<h3 class="home__features-supporting-label">And more</h3>
|
|
39
|
+
<div class="home__grid home__grid--supporting">
|
|
40
|
+
<div class="home__card home__card--supporting">
|
|
41
|
+
<h3>Semantic variables</h3>
|
|
42
|
+
<p>CSS variables that adapt to themes. No hardcoded colors; override once, update everywhere.</p>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="home__card home__card--supporting">
|
|
45
|
+
<h3>PostCSS powered</h3>
|
|
46
|
+
<p>Imports, autoprefixing, and production minification. Fits into any build pipeline.</p>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="home__card home__card--supporting">
|
|
49
|
+
<h3>Typography & spacing</h3>
|
|
50
|
+
<p>Scaling font sizes, weights, line heights, and a consistent spacing scale (0–24).</p>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="home__card home__card--supporting">
|
|
53
|
+
<h3>Responsive & utilities</h3>
|
|
54
|
+
<p>Mobile-first breakpoints and utility classes for layout, display, and flexbox.</p>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
</section>
|
|
58
|
+
|
|
18
59
|
<section class="home__docs">
|
|
19
60
|
<h2 class="home__section-title">Documentation</h2>
|
|
20
61
|
<div class="home__docs-grid">
|
|
@@ -6,8 +6,10 @@
|
|
|
6
6
|
currentPath: string;
|
|
7
7
|
/** Path prefix for framework-specific links (e.g. /docs, /docs/svelte, /docs/vanilla). */
|
|
8
8
|
pathPrefix?: string;
|
|
9
|
+
/** When true, omit the aside id to avoid duplicate ids when used inside a demo box. */
|
|
10
|
+
omitId?: boolean;
|
|
9
11
|
}
|
|
10
|
-
let { currentPath, pathPrefix = '/docs' }: Props = $props();
|
|
12
|
+
let { currentPath, pathPrefix = '/docs', omitId = false }: Props = $props();
|
|
11
13
|
|
|
12
14
|
function fullHref(link: { href: string; frameworkOnly?: boolean }): string {
|
|
13
15
|
const base = link.frameworkOnly ? pathPrefix : '/docs';
|
|
@@ -21,7 +23,7 @@
|
|
|
21
23
|
}
|
|
22
24
|
</script>
|
|
23
25
|
|
|
24
|
-
<aside id=
|
|
26
|
+
<aside id={omitId ? undefined : 'docs-sidebar'} class="docs-sidebar" aria-label="Documentation navigation" tabindex="0">
|
|
25
27
|
<nav class="docs-sidebar__nav">
|
|
26
28
|
{#each DOCS_NAV as group}
|
|
27
29
|
<div class="docs-sidebar__group">
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
export interface FooterLink {
|
|
3
|
+
href: string;
|
|
4
|
+
label: string;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
interface Props {
|
|
8
|
+
/** Site or product name shown in copyright */
|
|
9
|
+
siteName?: string;
|
|
10
|
+
/** Copyright year (default: current year) */
|
|
11
|
+
year?: number;
|
|
12
|
+
/** Optional list of footer links */
|
|
13
|
+
links?: FooterLink[];
|
|
14
|
+
class?: string;
|
|
15
|
+
}
|
|
16
|
+
let {
|
|
17
|
+
siteName = '',
|
|
18
|
+
year = new Date().getFullYear(),
|
|
19
|
+
links = [],
|
|
20
|
+
class: className = '',
|
|
21
|
+
}: Props = $props();
|
|
22
|
+
|
|
23
|
+
const classes = $derived(['footer', className].filter(Boolean).join(' ').trim());
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<footer class={classes} role="contentinfo">
|
|
27
|
+
<div class="footer__container">
|
|
28
|
+
<div class="footer__inner">
|
|
29
|
+
<p class="footer__copyright">
|
|
30
|
+
{#if siteName}
|
|
31
|
+
<span class="footer__site-name">{siteName}</span>
|
|
32
|
+
{' · '}
|
|
33
|
+
{/if}
|
|
34
|
+
<span class="footer__year">© {year}</span>
|
|
35
|
+
</p>
|
|
36
|
+
{#if links && links.length > 0}
|
|
37
|
+
<nav class="footer__nav" aria-label="Footer">
|
|
38
|
+
<ul class="footer__links">
|
|
39
|
+
{#each links as link}
|
|
40
|
+
<li class="footer__link-item">
|
|
41
|
+
<a class="footer__link" href={link.href}>{link.label}</a>
|
|
42
|
+
</li>
|
|
43
|
+
{/each}
|
|
44
|
+
</ul>
|
|
45
|
+
</nav>
|
|
46
|
+
{/if}
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
</footer>
|
package/scaffold/svelte/index.ts
CHANGED
|
@@ -6,6 +6,8 @@ export { default as Button } from './Button.svelte';
|
|
|
6
6
|
export { default as Badge } from './Badge.svelte';
|
|
7
7
|
export { default as Card } from './Card.svelte';
|
|
8
8
|
export { default as Divider } from './Divider.svelte';
|
|
9
|
+
export { default as Footer } from './Footer.svelte';
|
|
10
|
+
export type { FooterLink } from './Footer.svelte';
|
|
9
11
|
export { default as Spinner } from './Spinner.svelte';
|
|
10
12
|
export { default as ProgressBar } from './ProgressBar.svelte';
|
|
11
13
|
export { default as Avatar } from './Avatar.svelte';
|
|
@@ -7,13 +7,54 @@
|
|
|
7
7
|
<div class="home__container">
|
|
8
8
|
<header class="home__hero">
|
|
9
9
|
<h1 class="home__title">Rizzo CSS</h1>
|
|
10
|
-
<p class="home__subtitle">A modern CSS design system
|
|
10
|
+
<p class="home__subtitle">A modern CSS design system with semantic theming, accessibility-first components, and one CLI for Vanilla, Astro, and Svelte. Start here then make it your own.</p>
|
|
11
11
|
<div class="home__hero-ctas">
|
|
12
12
|
<a href={DOCS_BASE + '/docs/getting-started'} class="btn btn-primary home__hero-cta" target="_blank" rel="noopener noreferrer">Get Started</a>
|
|
13
13
|
<a href={DOCS_BASE + '/docs/components'} class="btn btn-outline home__hero-cta" target="_blank" rel="noopener noreferrer">View Components</a>
|
|
14
14
|
</div>
|
|
15
15
|
</header>
|
|
16
16
|
|
|
17
|
+
<section class="home__features" aria-labelledby="home-features-heading">
|
|
18
|
+
<h2 id="home-features-heading" class="home__section-title">Features</h2>
|
|
19
|
+
<p class="home__features-intro">A complete design system that works across Vanilla, Astro, and Svelte — same CSS, same components, zero lock-in.</p>
|
|
20
|
+
<div class="home__features-featured">
|
|
21
|
+
<div class="home__card home__card--featured">
|
|
22
|
+
<span class="home__card-icon" aria-hidden="true">Themes</span>
|
|
23
|
+
<h3>14 beautiful themes</h3>
|
|
24
|
+
<p>7 dark and 7 light with OKLCH for perceptual uniformity. System preference, persistence, and a unique icon per theme.</p>
|
|
25
|
+
</div>
|
|
26
|
+
<div class="home__card home__card--featured">
|
|
27
|
+
<span class="home__card-icon" aria-hidden="true">A11y</span>
|
|
28
|
+
<h3>Accessibility first</h3>
|
|
29
|
+
<p>WCAG AA compliant with full keyboard navigation, ARIA, focus management, and screen reader support.</p>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="home__card home__card--featured">
|
|
32
|
+
<span class="home__card-icon" aria-hidden="true">Components</span>
|
|
33
|
+
<h3>31 ready components</h3>
|
|
34
|
+
<p>Navbar, Settings, Theme Switcher, Font Switcher, Modal, Dropdown, Tabs, Forms, and more — all accessible and themeable.</p>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
<h3 class="home__features-supporting-label">And more</h3>
|
|
38
|
+
<div class="home__grid home__grid--supporting">
|
|
39
|
+
<div class="home__card home__card--supporting">
|
|
40
|
+
<h3>Semantic variables</h3>
|
|
41
|
+
<p>CSS variables that adapt to themes. No hardcoded colors; override once, update everywhere.</p>
|
|
42
|
+
</div>
|
|
43
|
+
<div class="home__card home__card--supporting">
|
|
44
|
+
<h3>PostCSS powered</h3>
|
|
45
|
+
<p>Imports, autoprefixing, and production minification. Fits into any build pipeline.</p>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="home__card home__card--supporting">
|
|
48
|
+
<h3>Typography & spacing</h3>
|
|
49
|
+
<p>Scaling font sizes, weights, line heights, and a consistent spacing scale (0–24).</p>
|
|
50
|
+
</div>
|
|
51
|
+
<div class="home__card home__card--supporting">
|
|
52
|
+
<h3>Responsive & utilities</h3>
|
|
53
|
+
<p>Mobile-first breakpoints and utility classes for layout, display, and flexbox.</p>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
</section>
|
|
57
|
+
|
|
17
58
|
<section class="home__docs">
|
|
18
59
|
<h2 class="home__section-title">Documentation</h2>
|
|
19
60
|
<div class="home__docs-grid">
|
|
@@ -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.43`, 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
|
|