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.
Files changed (38) hide show
  1. package/README.md +3 -3
  2. package/bin/rizzo-css.js +75 -44
  3. package/package.json +2 -2
  4. package/scaffold/astro/ThemeSwitcher.astro +504 -0
  5. package/scaffold/astro/themes.ts +54 -0
  6. package/scaffold/astro-app/README.md +1 -1
  7. package/scaffold/astro-app/src/pages/components.astro +1 -1
  8. package/scaffold/svelte/ThemeSwitcher.svelte +315 -0
  9. package/scaffold/svelte/theme.ts +65 -0
  10. package/scaffold/svelte/themes.ts +54 -0
  11. package/scaffold/svelte-app/README.md +1 -1
  12. package/scaffold/vanilla/README.md +2 -2
  13. package/scaffold/vanilla/components/accordion.html +6 -0
  14. package/scaffold/vanilla/components/alert.html +6 -0
  15. package/scaffold/vanilla/components/avatar.html +6 -0
  16. package/scaffold/vanilla/components/badge.html +6 -0
  17. package/scaffold/vanilla/components/breadcrumb.html +6 -0
  18. package/scaffold/vanilla/components/button.html +6 -0
  19. package/scaffold/vanilla/components/cards.html +6 -0
  20. package/scaffold/vanilla/components/copy-to-clipboard.html +6 -0
  21. package/scaffold/vanilla/components/divider.html +6 -0
  22. package/scaffold/vanilla/components/dropdown.html +6 -0
  23. package/scaffold/vanilla/components/forms.html +6 -0
  24. package/scaffold/vanilla/components/icons.html +6 -0
  25. package/scaffold/vanilla/components/index.html +6 -0
  26. package/scaffold/vanilla/components/modal.html +6 -0
  27. package/scaffold/vanilla/components/navbar.html +6 -0
  28. package/scaffold/vanilla/components/pagination.html +6 -0
  29. package/scaffold/vanilla/components/progress-bar.html +6 -0
  30. package/scaffold/vanilla/components/search.html +6 -0
  31. package/scaffold/vanilla/components/settings.html +6 -0
  32. package/scaffold/vanilla/components/spinner.html +6 -0
  33. package/scaffold/vanilla/components/table.html +6 -0
  34. package/scaffold/vanilla/components/tabs.html +6 -0
  35. package/scaffold/vanilla/components/theme-switcher.html +6 -0
  36. package/scaffold/vanilla/components/toast.html +6 -0
  37. package/scaffold/vanilla/components/tooltip.html +6 -0
  38. 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>