rizzo-css 0.0.13 → 0.0.14
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 +3 -3
- package/bin/rizzo-css.js +75 -44
- package/package.json +2 -2
- package/scaffold/astro/ThemeSwitcher.astro +504 -0
- package/scaffold/astro/themes.ts +54 -0
- package/scaffold/astro-app/README.md +1 -1
- package/scaffold/astro-app/src/pages/components.astro +1 -1
- package/scaffold/svelte/ThemeSwitcher.svelte +315 -0
- package/scaffold/svelte/theme.ts +65 -0
- package/scaffold/svelte/themes.ts +54 -0
- package/scaffold/svelte-app/README.md +1 -1
- package/scaffold/vanilla/README.md +2 -2
- package/scaffold/vanilla/components/accordion.html +6 -0
- package/scaffold/vanilla/components/alert.html +6 -0
- package/scaffold/vanilla/components/avatar.html +6 -0
- package/scaffold/vanilla/components/badge.html +6 -0
- package/scaffold/vanilla/components/breadcrumb.html +6 -0
- package/scaffold/vanilla/components/button.html +6 -0
- package/scaffold/vanilla/components/cards.html +6 -0
- package/scaffold/vanilla/components/copy-to-clipboard.html +6 -0
- package/scaffold/vanilla/components/divider.html +6 -0
- package/scaffold/vanilla/components/dropdown.html +6 -0
- package/scaffold/vanilla/components/forms.html +6 -0
- package/scaffold/vanilla/components/icons.html +6 -0
- package/scaffold/vanilla/components/index.html +6 -0
- package/scaffold/vanilla/components/modal.html +6 -0
- package/scaffold/vanilla/components/navbar.html +6 -0
- package/scaffold/vanilla/components/pagination.html +6 -0
- package/scaffold/vanilla/components/progress-bar.html +6 -0
- package/scaffold/vanilla/components/search.html +6 -0
- package/scaffold/vanilla/components/settings.html +6 -0
- package/scaffold/vanilla/components/spinner.html +6 -0
- package/scaffold/vanilla/components/table.html +6 -0
- package/scaffold/vanilla/components/tabs.html +6 -0
- package/scaffold/vanilla/components/theme-switcher.html +6 -0
- package/scaffold/vanilla/components/toast.html +6 -0
- package/scaffold/vanilla/components/tooltip.html +6 -0
- package/scaffold/vanilla/index.html +6 -0
|
@@ -170,6 +170,9 @@
|
|
|
170
170
|
|
|
171
171
|
|
|
172
172
|
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
173
176
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
174
177
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Dropdown</h1>
|
|
175
178
|
<p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
|
|
@@ -182,6 +185,9 @@
|
|
|
182
185
|
|
|
183
186
|
|
|
184
187
|
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
185
191
|
<script src="../js/main.js"></script>
|
|
186
192
|
</body>
|
|
187
193
|
</html>
|
|
@@ -170,6 +170,9 @@
|
|
|
170
170
|
|
|
171
171
|
|
|
172
172
|
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
173
176
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
174
177
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Forms</h1>
|
|
175
178
|
<p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
|
|
@@ -182,6 +185,9 @@
|
|
|
182
185
|
|
|
183
186
|
|
|
184
187
|
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
185
191
|
<script src="../js/main.js"></script>
|
|
186
192
|
</body>
|
|
187
193
|
</html>
|
|
@@ -170,6 +170,9 @@
|
|
|
170
170
|
|
|
171
171
|
|
|
172
172
|
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
173
176
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
174
177
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Icons</h1>
|
|
175
178
|
<p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
|
|
@@ -182,6 +185,9 @@
|
|
|
182
185
|
|
|
183
186
|
|
|
184
187
|
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
185
191
|
<script src="../js/main.js"></script>
|
|
186
192
|
</body>
|
|
187
193
|
</html>
|
|
@@ -170,6 +170,9 @@
|
|
|
170
170
|
|
|
171
171
|
|
|
172
172
|
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
173
176
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
174
177
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-6) 0; color: var(--text);">Component showcase</h1>
|
|
175
178
|
<p style="color: var(--text-dim); margin-bottom: var(--spacing-6);">Each page links to the full docs on the main site.</p>
|
|
@@ -207,6 +210,9 @@
|
|
|
207
210
|
|
|
208
211
|
|
|
209
212
|
|
|
213
|
+
|
|
214
|
+
|
|
215
|
+
|
|
210
216
|
<script src="../js/main.js"></script>
|
|
211
217
|
</body>
|
|
212
218
|
</html>
|
|
@@ -170,6 +170,9 @@
|
|
|
170
170
|
|
|
171
171
|
|
|
172
172
|
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
173
176
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
174
177
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Modal</h1>
|
|
175
178
|
<p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
|
|
@@ -182,6 +185,9 @@
|
|
|
182
185
|
|
|
183
186
|
|
|
184
187
|
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
185
191
|
<script src="../js/main.js"></script>
|
|
186
192
|
</body>
|
|
187
193
|
</html>
|
|
@@ -170,6 +170,9 @@
|
|
|
170
170
|
|
|
171
171
|
|
|
172
172
|
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
173
176
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
174
177
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Navbar</h1>
|
|
175
178
|
<p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
|
|
@@ -182,6 +185,9 @@
|
|
|
182
185
|
|
|
183
186
|
|
|
184
187
|
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
185
191
|
<script src="../js/main.js"></script>
|
|
186
192
|
</body>
|
|
187
193
|
</html>
|
|
@@ -170,6 +170,9 @@
|
|
|
170
170
|
|
|
171
171
|
|
|
172
172
|
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
173
176
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
174
177
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Pagination</h1>
|
|
175
178
|
<p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
|
|
@@ -182,6 +185,9 @@
|
|
|
182
185
|
|
|
183
186
|
|
|
184
187
|
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
185
191
|
<script src="../js/main.js"></script>
|
|
186
192
|
</body>
|
|
187
193
|
</html>
|
|
@@ -170,6 +170,9 @@
|
|
|
170
170
|
|
|
171
171
|
|
|
172
172
|
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
173
176
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
174
177
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Progress Bar</h1>
|
|
175
178
|
<p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
|
|
@@ -182,6 +185,9 @@
|
|
|
182
185
|
|
|
183
186
|
|
|
184
187
|
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
185
191
|
<script src="../js/main.js"></script>
|
|
186
192
|
</body>
|
|
187
193
|
</html>
|
|
@@ -170,6 +170,9 @@
|
|
|
170
170
|
|
|
171
171
|
|
|
172
172
|
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
173
176
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
174
177
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Search</h1>
|
|
175
178
|
<p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
|
|
@@ -182,6 +185,9 @@
|
|
|
182
185
|
|
|
183
186
|
|
|
184
187
|
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
185
191
|
<script src="../js/main.js"></script>
|
|
186
192
|
</body>
|
|
187
193
|
</html>
|
|
@@ -170,6 +170,9 @@
|
|
|
170
170
|
|
|
171
171
|
|
|
172
172
|
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
173
176
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
174
177
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Settings</h1>
|
|
175
178
|
<p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
|
|
@@ -182,6 +185,9 @@
|
|
|
182
185
|
|
|
183
186
|
|
|
184
187
|
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
185
191
|
<script src="../js/main.js"></script>
|
|
186
192
|
</body>
|
|
187
193
|
</html>
|
|
@@ -170,6 +170,9 @@
|
|
|
170
170
|
|
|
171
171
|
|
|
172
172
|
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
173
176
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
174
177
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Spinner</h1>
|
|
175
178
|
<p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
|
|
@@ -182,6 +185,9 @@
|
|
|
182
185
|
|
|
183
186
|
|
|
184
187
|
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
185
191
|
<script src="../js/main.js"></script>
|
|
186
192
|
</body>
|
|
187
193
|
</html>
|
|
@@ -170,6 +170,9 @@
|
|
|
170
170
|
|
|
171
171
|
|
|
172
172
|
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
173
176
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
174
177
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Table</h1>
|
|
175
178
|
<p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
|
|
@@ -182,6 +185,9 @@
|
|
|
182
185
|
|
|
183
186
|
|
|
184
187
|
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
185
191
|
<script src="../js/main.js"></script>
|
|
186
192
|
</body>
|
|
187
193
|
</html>
|
|
@@ -170,6 +170,9 @@
|
|
|
170
170
|
|
|
171
171
|
|
|
172
172
|
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
173
176
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
174
177
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Tabs</h1>
|
|
175
178
|
<p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
|
|
@@ -182,6 +185,9 @@
|
|
|
182
185
|
|
|
183
186
|
|
|
184
187
|
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
185
191
|
<script src="../js/main.js"></script>
|
|
186
192
|
</body>
|
|
187
193
|
</html>
|
|
@@ -170,6 +170,9 @@
|
|
|
170
170
|
|
|
171
171
|
|
|
172
172
|
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
173
176
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
174
177
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Theme Switcher</h1>
|
|
175
178
|
<p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
|
|
@@ -182,6 +185,9 @@
|
|
|
182
185
|
|
|
183
186
|
|
|
184
187
|
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
185
191
|
<script src="../js/main.js"></script>
|
|
186
192
|
</body>
|
|
187
193
|
</html>
|
|
@@ -170,6 +170,9 @@
|
|
|
170
170
|
|
|
171
171
|
|
|
172
172
|
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
173
176
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
174
177
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Toast</h1>
|
|
175
178
|
<p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
|
|
@@ -182,6 +185,9 @@
|
|
|
182
185
|
|
|
183
186
|
|
|
184
187
|
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
185
191
|
<script src="../js/main.js"></script>
|
|
186
192
|
</body>
|
|
187
193
|
</html>
|
|
@@ -170,6 +170,9 @@
|
|
|
170
170
|
|
|
171
171
|
|
|
172
172
|
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
173
176
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
174
177
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Tooltip</h1>
|
|
175
178
|
<p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
|
|
@@ -182,6 +185,9 @@
|
|
|
182
185
|
|
|
183
186
|
|
|
184
187
|
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
185
191
|
<script src="../js/main.js"></script>
|
|
186
192
|
</body>
|
|
187
193
|
</html>
|
|
@@ -170,6 +170,9 @@
|
|
|
170
170
|
|
|
171
171
|
|
|
172
172
|
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
173
176
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
174
177
|
<span class="badge badge--primary badge--sm mb-4">Vanilla JS + Rizzo CSS</span>
|
|
175
178
|
<h1 style="font-size: clamp(2.5rem, 8vw, 4rem); font-weight: 800; line-height: 1.1; margin: 0 0 var(--spacing-4) 0; color: var(--text);">Build something great</h1>
|
|
@@ -194,6 +197,9 @@
|
|
|
194
197
|
|
|
195
198
|
|
|
196
199
|
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
197
203
|
<script src="js/main.js"></script>
|
|
198
204
|
</body>
|
|
199
205
|
</html>
|