rizzo-css 0.0.39 → 0.0.41

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 (92) hide show
  1. package/README.md +5 -3
  2. package/bin/rizzo-css.js +89 -111
  3. package/dist/fonts/IBMPlexMono/IBMPlexMono-Italic.ttf +0 -0
  4. package/dist/fonts/IBMPlexMono/IBMPlexMono-Regular.ttf +0 -0
  5. package/dist/fonts/IBMPlexMono/OFL.txt +93 -0
  6. package/dist/fonts/IBMPlexSans/IBMPlexSans-Italic-VariableFont_wdth,wght.ttf +0 -0
  7. package/dist/fonts/IBMPlexSans/IBMPlexSans-VariableFont_wdth,wght.ttf +0 -0
  8. package/dist/fonts/IBMPlexSans/OFL.txt +93 -0
  9. package/dist/fonts/IBMPlexSans/README.txt +106 -0
  10. package/dist/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf +0 -0
  11. package/dist/fonts/Inter/Inter-VariableFont_opsz,wght.ttf +0 -0
  12. package/dist/fonts/Inter/OFL.txt +93 -0
  13. package/dist/fonts/JetBrainsMono/AUTHORS.txt +10 -0
  14. package/dist/fonts/JetBrainsMono/JetBrainsMono-Italic[wght].ttf +0 -0
  15. package/dist/fonts/JetBrainsMono/JetBrainsMono[wght].ttf +0 -0
  16. package/dist/fonts/JetBrainsMono/OFL.txt +93 -0
  17. package/dist/fonts/SourceCodePro/OFL.txt +93 -0
  18. package/dist/fonts/SourceCodePro/README.txt +79 -0
  19. package/dist/fonts/SourceCodePro/SourceCodePro-Italic-VariableFont_wght.ttf +0 -0
  20. package/dist/fonts/SourceCodePro/SourceCodePro-VariableFont_wght.ttf +0 -0
  21. package/dist/fonts/SourceSans3/OFL.txt +93 -0
  22. package/dist/fonts/SourceSans3/README.txt +79 -0
  23. package/dist/fonts/SourceSans3/SourceSans3-Italic-VariableFont_wght.ttf +0 -0
  24. package/dist/fonts/SourceSans3/SourceSans3-VariableFont_wght.ttf +0 -0
  25. package/dist/rizzo.min.css +2 -2
  26. package/package.json +10 -9
  27. package/scaffold/astro/Settings.astro +56 -0
  28. package/scaffold/astro/Tabs.astro +3 -0
  29. package/scaffold/astro/icons/devicons/Bun.astro +35 -0
  30. package/scaffold/astro/icons/devicons/Npm.astro +24 -0
  31. package/scaffold/astro/icons/devicons/Pnpm.astro +24 -0
  32. package/scaffold/astro/icons/devicons/Yarn.astro +23 -0
  33. package/scaffold/{astro-minimal → astro-core}/README-RIZZO.md +1 -1
  34. package/scaffold/astro-core/src/layouts/Layout.astro +33 -0
  35. package/scaffold/config/fonts.ts +51 -0
  36. package/scaffold/svelte/Settings.svelte +155 -1
  37. package/scaffold/svelte/icons/devicons/Bun.svelte +30 -0
  38. package/scaffold/svelte/icons/devicons/Npm.svelte +19 -0
  39. package/scaffold/svelte/icons/devicons/Pnpm.svelte +19 -0
  40. package/scaffold/svelte/icons/devicons/Yarn.svelte +18 -0
  41. package/scaffold/{svelte-minimal → svelte-core}/README-RIZZO.md +1 -1
  42. package/scaffold/vanilla/README-RIZZO.md +2 -2
  43. package/scaffold/vanilla/components/accordion.html +47 -0
  44. package/scaffold/vanilla/components/alert.html +47 -0
  45. package/scaffold/vanilla/components/avatar.html +47 -0
  46. package/scaffold/vanilla/components/badge.html +47 -0
  47. package/scaffold/vanilla/components/breadcrumb.html +47 -0
  48. package/scaffold/vanilla/components/button.html +47 -0
  49. package/scaffold/vanilla/components/cards.html +47 -0
  50. package/scaffold/vanilla/components/copy-to-clipboard.html +47 -0
  51. package/scaffold/vanilla/components/divider.html +47 -0
  52. package/scaffold/vanilla/components/dropdown.html +47 -0
  53. package/scaffold/vanilla/components/forms.html +47 -0
  54. package/scaffold/vanilla/components/icons.html +47 -0
  55. package/scaffold/vanilla/components/index.html +47 -0
  56. package/scaffold/vanilla/components/modal.html +47 -0
  57. package/scaffold/vanilla/components/navbar.html +47 -0
  58. package/scaffold/vanilla/components/pagination.html +47 -0
  59. package/scaffold/vanilla/components/progress-bar.html +47 -0
  60. package/scaffold/vanilla/components/search.html +47 -0
  61. package/scaffold/vanilla/components/settings.html +47 -0
  62. package/scaffold/vanilla/components/spinner.html +47 -0
  63. package/scaffold/vanilla/components/table.html +47 -0
  64. package/scaffold/vanilla/components/tabs.html +47 -0
  65. package/scaffold/vanilla/components/theme-switcher.html +47 -0
  66. package/scaffold/vanilla/components/toast.html +47 -0
  67. package/scaffold/vanilla/components/tooltip.html +47 -0
  68. package/scaffold/vanilla/icons/devicons/Bun.svg +19 -0
  69. package/scaffold/vanilla/icons/devicons/Npm.svg +8 -0
  70. package/scaffold/vanilla/icons/devicons/Pnpm.svg +8 -0
  71. package/scaffold/vanilla/icons/devicons/Yarn.svg +7 -0
  72. package/scaffold/vanilla/index.html +47 -0
  73. package/scaffold/vanilla/js/main.js +20 -0
  74. package/scaffold/astro-minimal/src/layouts/Layout.astro +0 -29
  75. /package/scaffold/{astro-minimal → astro-core}/.env.example +0 -0
  76. /package/scaffold/{astro-minimal → astro-core}/astro.config.mjs +0 -0
  77. /package/scaffold/{astro-minimal → astro-core}/gitignore +0 -0
  78. /package/scaffold/{astro-minimal → astro-core}/package.json +0 -0
  79. /package/scaffold/{astro-minimal → astro-core}/public/.gitkeep +0 -0
  80. /package/scaffold/{astro-minimal → astro-core}/public/favicon.svg +0 -0
  81. /package/scaffold/{astro-minimal → astro-core}/src/pages/index.astro +0 -0
  82. /package/scaffold/{astro-minimal → astro-core}/tsconfig.json +0 -0
  83. /package/scaffold/{svelte-minimal → svelte-core}/.env.example +0 -0
  84. /package/scaffold/{svelte-minimal → svelte-core}/gitignore +0 -0
  85. /package/scaffold/{svelte-minimal → svelte-core}/package.json +0 -0
  86. /package/scaffold/{svelte-minimal → svelte-core}/src/app.d.ts +0 -0
  87. /package/scaffold/{svelte-minimal → svelte-core}/src/app.html +0 -0
  88. /package/scaffold/{svelte-minimal → svelte-core}/src/routes/+layout.svelte +0 -0
  89. /package/scaffold/{svelte-minimal → svelte-core}/src/routes/+page.svelte +0 -0
  90. /package/scaffold/{svelte-minimal → svelte-core}/static/.gitkeep +0 -0
  91. /package/scaffold/{svelte-minimal → svelte-core}/svelte.config.js +0 -0
  92. /package/scaffold/{svelte-minimal → svelte-core}/tsconfig.json +0 -0
package/scaffold/vanilla/components/breadcrumb.html CHANGED
@@ -25,6 +25,20 @@
25
25
  if (savedFontScale) {
26
26
  document.documentElement.style.setProperty('--font-size-scale', savedFontScale);
27
27
  }
28
+ var savedFontPair = localStorage.getItem('fontPair') || 'geist';
29
+ if (savedFontPair === 'geist') {
30
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-geist-sans)');
31
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-geist-mono)');
32
+ } else if (savedFontPair === 'inter-jetbrains') {
33
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-inter)');
34
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-jetbrains-mono)');
35
+ } else if (savedFontPair === 'ibm-plex') {
36
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-ibm-plex-sans)');
37
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-ibm-plex-mono)');
38
+ } else if (savedFontPair === 'source') {
39
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-source-sans-3)');
40
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-source-code-pro)');
41
+ }
28
42
  if (localStorage.getItem('reducedMotion') === 'true') {
29
43
  document.documentElement.classList.add('reduced-motion');
30
44
  }
@@ -162,6 +176,19 @@
162
176
  <div class="settings__slider-labels"><span>Small</span><span>Default</span><span>Large</span></div>
163
177
  </div>
164
178
  </section>
179
+ <section class="settings__section">
180
+ <h3 class="settings__section-title">Font</h3>
181
+ <div class="settings__control">
182
+ <label for="font-pair-select" class="settings__label"><span class="settings__label-text">Font pair (sans + mono)</span></label>
183
+ <select id="font-pair-select" class="form-control" aria-label="Font pair" data-font-pair style="width: 100%;">
184
+ <option value="geist" data-sans="var(--font-family-geist-sans)" data-mono="var(--font-family-geist-mono)">Geist (Sans + Mono)</option>
185
+ <option value="inter-jetbrains" data-sans="var(--font-family-inter)" data-mono="var(--font-family-jetbrains-mono)">Inter + JetBrains Mono</option>
186
+ <option value="ibm-plex" data-sans="var(--font-family-ibm-plex-sans)" data-mono="var(--font-family-ibm-plex-mono)">IBM Plex Sans + Mono</option>
187
+ <option value="source" data-sans="var(--font-family-source-sans-3)" data-mono="var(--font-family-source-code-pro)">Source Sans 3 + Source Code Pro</option>
188
+ </select>
189
+ <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
190
+ </div>
191
+ </section>
165
192
  <section class="settings__section">
166
193
  <h3 class="settings__section-title">Accessibility</h3>
167
194
  <div class="settings__control">
@@ -303,6 +330,16 @@
303
330
 
304
331
 
305
332
 
333
+
334
+
335
+
336
+
337
+
338
+
339
+
340
+
341
+
342
+
306
343
 
307
344
 
308
345
 
@@ -423,6 +460,16 @@
423
460
 
424
461
 
425
462
 
463
+
464
+
465
+
466
+
467
+
468
+
469
+
470
+
471
+
472
+
426
473
 
427
474
 
428
475
 
package/scaffold/vanilla/components/button.html CHANGED
@@ -25,6 +25,20 @@
25
25
  if (savedFontScale) {
26
26
  document.documentElement.style.setProperty('--font-size-scale', savedFontScale);
27
27
  }
28
+ var savedFontPair = localStorage.getItem('fontPair') || 'geist';
29
+ if (savedFontPair === 'geist') {
30
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-geist-sans)');
31
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-geist-mono)');
32
+ } else if (savedFontPair === 'inter-jetbrains') {
33
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-inter)');
34
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-jetbrains-mono)');
35
+ } else if (savedFontPair === 'ibm-plex') {
36
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-ibm-plex-sans)');
37
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-ibm-plex-mono)');
38
+ } else if (savedFontPair === 'source') {
39
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-source-sans-3)');
40
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-source-code-pro)');
41
+ }
28
42
  if (localStorage.getItem('reducedMotion') === 'true') {
29
43
  document.documentElement.classList.add('reduced-motion');
30
44
  }
@@ -162,6 +176,19 @@
162
176
  <div class="settings__slider-labels"><span>Small</span><span>Default</span><span>Large</span></div>
163
177
  </div>
164
178
  </section>
179
+ <section class="settings__section">
180
+ <h3 class="settings__section-title">Font</h3>
181
+ <div class="settings__control">
182
+ <label for="font-pair-select" class="settings__label"><span class="settings__label-text">Font pair (sans + mono)</span></label>
183
+ <select id="font-pair-select" class="form-control" aria-label="Font pair" data-font-pair style="width: 100%;">
184
+ <option value="geist" data-sans="var(--font-family-geist-sans)" data-mono="var(--font-family-geist-mono)">Geist (Sans + Mono)</option>
185
+ <option value="inter-jetbrains" data-sans="var(--font-family-inter)" data-mono="var(--font-family-jetbrains-mono)">Inter + JetBrains Mono</option>
186
+ <option value="ibm-plex" data-sans="var(--font-family-ibm-plex-sans)" data-mono="var(--font-family-ibm-plex-mono)">IBM Plex Sans + Mono</option>
187
+ <option value="source" data-sans="var(--font-family-source-sans-3)" data-mono="var(--font-family-source-code-pro)">Source Sans 3 + Source Code Pro</option>
188
+ </select>
189
+ <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
190
+ </div>
191
+ </section>
165
192
  <section class="settings__section">
166
193
  <h3 class="settings__section-title">Accessibility</h3>
167
194
  <div class="settings__control">
@@ -303,6 +330,16 @@
303
330
 
304
331
 
305
332
 
333
+
334
+
335
+
336
+
337
+
338
+
339
+
340
+
341
+
342
+
306
343
 
307
344
 
308
345
 
@@ -423,6 +460,16 @@
423
460
 
424
461
 
425
462
 
463
+
464
+
465
+
466
+
467
+
468
+
469
+
470
+
471
+
472
+
426
473
 
427
474
 
428
475
 
package/scaffold/vanilla/components/cards.html CHANGED
@@ -25,6 +25,20 @@
25
25
  if (savedFontScale) {
26
26
  document.documentElement.style.setProperty('--font-size-scale', savedFontScale);
27
27
  }
28
+ var savedFontPair = localStorage.getItem('fontPair') || 'geist';
29
+ if (savedFontPair === 'geist') {
30
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-geist-sans)');
31
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-geist-mono)');
32
+ } else if (savedFontPair === 'inter-jetbrains') {
33
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-inter)');
34
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-jetbrains-mono)');
35
+ } else if (savedFontPair === 'ibm-plex') {
36
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-ibm-plex-sans)');
37
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-ibm-plex-mono)');
38
+ } else if (savedFontPair === 'source') {
39
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-source-sans-3)');
40
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-source-code-pro)');
41
+ }
28
42
  if (localStorage.getItem('reducedMotion') === 'true') {
29
43
  document.documentElement.classList.add('reduced-motion');
30
44
  }
@@ -162,6 +176,19 @@
162
176
  <div class="settings__slider-labels"><span>Small</span><span>Default</span><span>Large</span></div>
163
177
  </div>
164
178
  </section>
179
+ <section class="settings__section">
180
+ <h3 class="settings__section-title">Font</h3>
181
+ <div class="settings__control">
182
+ <label for="font-pair-select" class="settings__label"><span class="settings__label-text">Font pair (sans + mono)</span></label>
183
+ <select id="font-pair-select" class="form-control" aria-label="Font pair" data-font-pair style="width: 100%;">
184
+ <option value="geist" data-sans="var(--font-family-geist-sans)" data-mono="var(--font-family-geist-mono)">Geist (Sans + Mono)</option>
185
+ <option value="inter-jetbrains" data-sans="var(--font-family-inter)" data-mono="var(--font-family-jetbrains-mono)">Inter + JetBrains Mono</option>
186
+ <option value="ibm-plex" data-sans="var(--font-family-ibm-plex-sans)" data-mono="var(--font-family-ibm-plex-mono)">IBM Plex Sans + Mono</option>
187
+ <option value="source" data-sans="var(--font-family-source-sans-3)" data-mono="var(--font-family-source-code-pro)">Source Sans 3 + Source Code Pro</option>
188
+ </select>
189
+ <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
190
+ </div>
191
+ </section>
165
192
  <section class="settings__section">
166
193
  <h3 class="settings__section-title">Accessibility</h3>
167
194
  <div class="settings__control">
@@ -303,6 +330,16 @@
303
330
 
304
331
 
305
332
 
333
+
334
+
335
+
336
+
337
+
338
+
339
+
340
+
341
+
342
+
306
343
 
307
344
 
308
345
 
@@ -423,6 +460,16 @@
423
460
 
424
461
 
425
462
 
463
+
464
+
465
+
466
+
467
+
468
+
469
+
470
+
471
+
472
+
426
473
 
427
474
 
428
475
 
package/scaffold/vanilla/components/copy-to-clipboard.html CHANGED
@@ -25,6 +25,20 @@
25
25
  if (savedFontScale) {
26
26
  document.documentElement.style.setProperty('--font-size-scale', savedFontScale);
27
27
  }
28
+ var savedFontPair = localStorage.getItem('fontPair') || 'geist';
29
+ if (savedFontPair === 'geist') {
30
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-geist-sans)');
31
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-geist-mono)');
32
+ } else if (savedFontPair === 'inter-jetbrains') {
33
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-inter)');
34
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-jetbrains-mono)');
35
+ } else if (savedFontPair === 'ibm-plex') {
36
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-ibm-plex-sans)');
37
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-ibm-plex-mono)');
38
+ } else if (savedFontPair === 'source') {
39
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-source-sans-3)');
40
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-source-code-pro)');
41
+ }
28
42
  if (localStorage.getItem('reducedMotion') === 'true') {
29
43
  document.documentElement.classList.add('reduced-motion');
30
44
  }
@@ -162,6 +176,19 @@
162
176
  <div class="settings__slider-labels"><span>Small</span><span>Default</span><span>Large</span></div>
163
177
  </div>
164
178
  </section>
179
+ <section class="settings__section">
180
+ <h3 class="settings__section-title">Font</h3>
181
+ <div class="settings__control">
182
+ <label for="font-pair-select" class="settings__label"><span class="settings__label-text">Font pair (sans + mono)</span></label>
183
+ <select id="font-pair-select" class="form-control" aria-label="Font pair" data-font-pair style="width: 100%;">
184
+ <option value="geist" data-sans="var(--font-family-geist-sans)" data-mono="var(--font-family-geist-mono)">Geist (Sans + Mono)</option>
185
+ <option value="inter-jetbrains" data-sans="var(--font-family-inter)" data-mono="var(--font-family-jetbrains-mono)">Inter + JetBrains Mono</option>
186
+ <option value="ibm-plex" data-sans="var(--font-family-ibm-plex-sans)" data-mono="var(--font-family-ibm-plex-mono)">IBM Plex Sans + Mono</option>
187
+ <option value="source" data-sans="var(--font-family-source-sans-3)" data-mono="var(--font-family-source-code-pro)">Source Sans 3 + Source Code Pro</option>
188
+ </select>
189
+ <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
190
+ </div>
191
+ </section>
165
192
  <section class="settings__section">
166
193
  <h3 class="settings__section-title">Accessibility</h3>
167
194
  <div class="settings__control">
@@ -303,6 +330,16 @@
303
330
 
304
331
 
305
332
 
333
+
334
+
335
+
336
+
337
+
338
+
339
+
340
+
341
+
342
+
306
343
 
307
344
 
308
345
 
@@ -423,6 +460,16 @@
423
460
 
424
461
 
425
462
 
463
+
464
+
465
+
466
+
467
+
468
+
469
+
470
+
471
+
472
+
426
473
 
427
474
 
428
475
 
package/scaffold/vanilla/components/divider.html CHANGED
@@ -25,6 +25,20 @@
25
25
  if (savedFontScale) {
26
26
  document.documentElement.style.setProperty('--font-size-scale', savedFontScale);
27
27
  }
28
+ var savedFontPair = localStorage.getItem('fontPair') || 'geist';
29
+ if (savedFontPair === 'geist') {
30
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-geist-sans)');
31
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-geist-mono)');
32
+ } else if (savedFontPair === 'inter-jetbrains') {
33
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-inter)');
34
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-jetbrains-mono)');
35
+ } else if (savedFontPair === 'ibm-plex') {
36
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-ibm-plex-sans)');
37
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-ibm-plex-mono)');
38
+ } else if (savedFontPair === 'source') {
39
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-source-sans-3)');
40
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-source-code-pro)');
41
+ }
28
42
  if (localStorage.getItem('reducedMotion') === 'true') {
29
43
  document.documentElement.classList.add('reduced-motion');
30
44
  }
@@ -162,6 +176,19 @@
162
176
  <div class="settings__slider-labels"><span>Small</span><span>Default</span><span>Large</span></div>
163
177
  </div>
164
178
  </section>
179
+ <section class="settings__section">
180
+ <h3 class="settings__section-title">Font</h3>
181
+ <div class="settings__control">
182
+ <label for="font-pair-select" class="settings__label"><span class="settings__label-text">Font pair (sans + mono)</span></label>
183
+ <select id="font-pair-select" class="form-control" aria-label="Font pair" data-font-pair style="width: 100%;">
184
+ <option value="geist" data-sans="var(--font-family-geist-sans)" data-mono="var(--font-family-geist-mono)">Geist (Sans + Mono)</option>
185
+ <option value="inter-jetbrains" data-sans="var(--font-family-inter)" data-mono="var(--font-family-jetbrains-mono)">Inter + JetBrains Mono</option>
186
+ <option value="ibm-plex" data-sans="var(--font-family-ibm-plex-sans)" data-mono="var(--font-family-ibm-plex-mono)">IBM Plex Sans + Mono</option>
187
+ <option value="source" data-sans="var(--font-family-source-sans-3)" data-mono="var(--font-family-source-code-pro)">Source Sans 3 + Source Code Pro</option>
188
+ </select>
189
+ <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
190
+ </div>
191
+ </section>
165
192
  <section class="settings__section">
166
193
  <h3 class="settings__section-title">Accessibility</h3>
167
194
  <div class="settings__control">
@@ -303,6 +330,16 @@
303
330
 
304
331
 
305
332
 
333
+
334
+
335
+
336
+
337
+
338
+
339
+
340
+
341
+
342
+
306
343
 
307
344
 
308
345
 
@@ -423,6 +460,16 @@
423
460
 
424
461
 
425
462
 
463
+
464
+
465
+
466
+
467
+
468
+
469
+
470
+
471
+
472
+
426
473
 
427
474
 
428
475
 
package/scaffold/vanilla/components/dropdown.html CHANGED
@@ -25,6 +25,20 @@
25
25
  if (savedFontScale) {
26
26
  document.documentElement.style.setProperty('--font-size-scale', savedFontScale);
27
27
  }
28
+ var savedFontPair = localStorage.getItem('fontPair') || 'geist';
29
+ if (savedFontPair === 'geist') {
30
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-geist-sans)');
31
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-geist-mono)');
32
+ } else if (savedFontPair === 'inter-jetbrains') {
33
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-inter)');
34
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-jetbrains-mono)');
35
+ } else if (savedFontPair === 'ibm-plex') {
36
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-ibm-plex-sans)');
37
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-ibm-plex-mono)');
38
+ } else if (savedFontPair === 'source') {
39
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-source-sans-3)');
40
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-source-code-pro)');
41
+ }
28
42
  if (localStorage.getItem('reducedMotion') === 'true') {
29
43
  document.documentElement.classList.add('reduced-motion');
30
44
  }
@@ -162,6 +176,19 @@
162
176
  <div class="settings__slider-labels"><span>Small</span><span>Default</span><span>Large</span></div>
163
177
  </div>
164
178
  </section>
179
+ <section class="settings__section">
180
+ <h3 class="settings__section-title">Font</h3>
181
+ <div class="settings__control">
182
+ <label for="font-pair-select" class="settings__label"><span class="settings__label-text">Font pair (sans + mono)</span></label>
183
+ <select id="font-pair-select" class="form-control" aria-label="Font pair" data-font-pair style="width: 100%;">
184
+ <option value="geist" data-sans="var(--font-family-geist-sans)" data-mono="var(--font-family-geist-mono)">Geist (Sans + Mono)</option>
185
+ <option value="inter-jetbrains" data-sans="var(--font-family-inter)" data-mono="var(--font-family-jetbrains-mono)">Inter + JetBrains Mono</option>
186
+ <option value="ibm-plex" data-sans="var(--font-family-ibm-plex-sans)" data-mono="var(--font-family-ibm-plex-mono)">IBM Plex Sans + Mono</option>
187
+ <option value="source" data-sans="var(--font-family-source-sans-3)" data-mono="var(--font-family-source-code-pro)">Source Sans 3 + Source Code Pro</option>
188
+ </select>
189
+ <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
190
+ </div>
191
+ </section>
165
192
  <section class="settings__section">
166
193
  <h3 class="settings__section-title">Accessibility</h3>
167
194
  <div class="settings__control">
@@ -303,6 +330,16 @@
303
330
 
304
331
 
305
332
 
333
+
334
+
335
+
336
+
337
+
338
+
339
+
340
+
341
+
342
+
306
343
 
307
344
 
308
345
 
@@ -423,6 +460,16 @@
423
460
 
424
461
 
425
462
 
463
+
464
+
465
+
466
+
467
+
468
+
469
+
470
+
471
+
472
+
426
473
 
427
474
 
428
475
 
package/scaffold/vanilla/components/forms.html CHANGED
@@ -25,6 +25,20 @@
25
25
  if (savedFontScale) {
26
26
  document.documentElement.style.setProperty('--font-size-scale', savedFontScale);
27
27
  }
28
+ var savedFontPair = localStorage.getItem('fontPair') || 'geist';
29
+ if (savedFontPair === 'geist') {
30
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-geist-sans)');
31
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-geist-mono)');
32
+ } else if (savedFontPair === 'inter-jetbrains') {
33
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-inter)');
34
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-jetbrains-mono)');
35
+ } else if (savedFontPair === 'ibm-plex') {
36
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-ibm-plex-sans)');
37
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-ibm-plex-mono)');
38
+ } else if (savedFontPair === 'source') {
39
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-source-sans-3)');
40
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-source-code-pro)');
41
+ }
28
42
  if (localStorage.getItem('reducedMotion') === 'true') {
29
43
  document.documentElement.classList.add('reduced-motion');
30
44
  }
@@ -162,6 +176,19 @@
162
176
  <div class="settings__slider-labels"><span>Small</span><span>Default</span><span>Large</span></div>
163
177
  </div>
164
178
  </section>
179
+ <section class="settings__section">
180
+ <h3 class="settings__section-title">Font</h3>
181
+ <div class="settings__control">
182
+ <label for="font-pair-select" class="settings__label"><span class="settings__label-text">Font pair (sans + mono)</span></label>
183
+ <select id="font-pair-select" class="form-control" aria-label="Font pair" data-font-pair style="width: 100%;">
184
+ <option value="geist" data-sans="var(--font-family-geist-sans)" data-mono="var(--font-family-geist-mono)">Geist (Sans + Mono)</option>
185
+ <option value="inter-jetbrains" data-sans="var(--font-family-inter)" data-mono="var(--font-family-jetbrains-mono)">Inter + JetBrains Mono</option>
186
+ <option value="ibm-plex" data-sans="var(--font-family-ibm-plex-sans)" data-mono="var(--font-family-ibm-plex-mono)">IBM Plex Sans + Mono</option>
187
+ <option value="source" data-sans="var(--font-family-source-sans-3)" data-mono="var(--font-family-source-code-pro)">Source Sans 3 + Source Code Pro</option>
188
+ </select>
189
+ <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
190
+ </div>
191
+ </section>
165
192
  <section class="settings__section">
166
193
  <h3 class="settings__section-title">Accessibility</h3>
167
194
  <div class="settings__control">
@@ -303,6 +330,16 @@
303
330
 
304
331
 
305
332
 
333
+
334
+
335
+
336
+
337
+
338
+
339
+
340
+
341
+
342
+
306
343
 
307
344
 
308
345
 
@@ -423,6 +460,16 @@
423
460
 
424
461
 
425
462
 
463
+
464
+
465
+
466
+
467
+
468
+
469
+
470
+
471
+
472
+
426
473
 
427
474
 
428
475
 
package/scaffold/vanilla/components/icons.html CHANGED
@@ -25,6 +25,20 @@
25
25
  if (savedFontScale) {
26
26
  document.documentElement.style.setProperty('--font-size-scale', savedFontScale);
27
27
  }
28
+ var savedFontPair = localStorage.getItem('fontPair') || 'geist';
29
+ if (savedFontPair === 'geist') {
30
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-geist-sans)');
31
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-geist-mono)');
32
+ } else if (savedFontPair === 'inter-jetbrains') {
33
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-inter)');
34
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-jetbrains-mono)');
35
+ } else if (savedFontPair === 'ibm-plex') {
36
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-ibm-plex-sans)');
37
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-ibm-plex-mono)');
38
+ } else if (savedFontPair === 'source') {
39
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-source-sans-3)');
40
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-source-code-pro)');
41
+ }
28
42
  if (localStorage.getItem('reducedMotion') === 'true') {
29
43
  document.documentElement.classList.add('reduced-motion');
30
44
  }
@@ -162,6 +176,19 @@
162
176
  <div class="settings__slider-labels"><span>Small</span><span>Default</span><span>Large</span></div>
163
177
  </div>
164
178
  </section>
179
+ <section class="settings__section">
180
+ <h3 class="settings__section-title">Font</h3>
181
+ <div class="settings__control">
182
+ <label for="font-pair-select" class="settings__label"><span class="settings__label-text">Font pair (sans + mono)</span></label>
183
+ <select id="font-pair-select" class="form-control" aria-label="Font pair" data-font-pair style="width: 100%;">
184
+ <option value="geist" data-sans="var(--font-family-geist-sans)" data-mono="var(--font-family-geist-mono)">Geist (Sans + Mono)</option>
185
+ <option value="inter-jetbrains" data-sans="var(--font-family-inter)" data-mono="var(--font-family-jetbrains-mono)">Inter + JetBrains Mono</option>
186
+ <option value="ibm-plex" data-sans="var(--font-family-ibm-plex-sans)" data-mono="var(--font-family-ibm-plex-mono)">IBM Plex Sans + Mono</option>
187
+ <option value="source" data-sans="var(--font-family-source-sans-3)" data-mono="var(--font-family-source-code-pro)">Source Sans 3 + Source Code Pro</option>
188
+ </select>
189
+ <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
190
+ </div>
191
+ </section>
165
192
  <section class="settings__section">
166
193
  <h3 class="settings__section-title">Accessibility</h3>
167
194
  <div class="settings__control">
@@ -303,6 +330,16 @@
303
330
 
304
331
 
305
332
 
333
+
334
+
335
+
336
+
337
+
338
+
339
+
340
+
341
+
342
+
306
343
 
307
344
 
308
345
 
@@ -423,6 +460,16 @@
423
460
 
424
461
 
425
462
 
463
+
464
+
465
+
466
+
467
+
468
+
469
+
470
+
471
+
472
+
426
473
 
427
474
 
428
475
 
package/scaffold/vanilla/components/index.html CHANGED
@@ -25,6 +25,20 @@
25
25
  if (savedFontScale) {
26
26
  document.documentElement.style.setProperty('--font-size-scale', savedFontScale);
27
27
  }
28
+ var savedFontPair = localStorage.getItem('fontPair') || 'geist';
29
+ if (savedFontPair === 'geist') {
30
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-geist-sans)');
31
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-geist-mono)');
32
+ } else if (savedFontPair === 'inter-jetbrains') {
33
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-inter)');
34
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-jetbrains-mono)');
35
+ } else if (savedFontPair === 'ibm-plex') {
36
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-ibm-plex-sans)');
37
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-ibm-plex-mono)');
38
+ } else if (savedFontPair === 'source') {
39
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-source-sans-3)');
40
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-source-code-pro)');
41
+ }
28
42
  if (localStorage.getItem('reducedMotion') === 'true') {
29
43
  document.documentElement.classList.add('reduced-motion');
30
44
  }
@@ -162,6 +176,19 @@
162
176
  <div class="settings__slider-labels"><span>Small</span><span>Default</span><span>Large</span></div>
163
177
  </div>
164
178
  </section>
179
+ <section class="settings__section">
180
+ <h3 class="settings__section-title">Font</h3>
181
+ <div class="settings__control">
182
+ <label for="font-pair-select" class="settings__label"><span class="settings__label-text">Font pair (sans + mono)</span></label>
183
+ <select id="font-pair-select" class="form-control" aria-label="Font pair" data-font-pair style="width: 100%;">
184
+ <option value="geist" data-sans="var(--font-family-geist-sans)" data-mono="var(--font-family-geist-mono)">Geist (Sans + Mono)</option>
185
+ <option value="inter-jetbrains" data-sans="var(--font-family-inter)" data-mono="var(--font-family-jetbrains-mono)">Inter + JetBrains Mono</option>
186
+ <option value="ibm-plex" data-sans="var(--font-family-ibm-plex-sans)" data-mono="var(--font-family-ibm-plex-mono)">IBM Plex Sans + Mono</option>
187
+ <option value="source" data-sans="var(--font-family-source-sans-3)" data-mono="var(--font-family-source-code-pro)">Source Sans 3 + Source Code Pro</option>
188
+ </select>
189
+ <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
190
+ </div>
191
+ </section>
165
192
  <section class="settings__section">
166
193
  <h3 class="settings__section-title">Accessibility</h3>
167
194
  <div class="settings__control">
@@ -303,6 +330,16 @@
303
330
 
304
331
 
305
332
 
333
+
334
+
335
+
336
+
337
+
338
+
339
+
340
+
341
+
342
+
306
343
 
307
344
 
308
345
 
@@ -448,6 +485,16 @@
448
485
 
449
486
 
450
487
 
488
+
489
+
490
+
491
+
492
+
493
+
494
+
495
+
496
+
497
+
451
498
 
452
499
 
453
500