rizzo-css 0.0.40 → 0.0.42

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 (96) hide show
  1. package/README.md +6 -4
  2. package/bin/rizzo-css.js +142 -124
  3. package/dist/fonts/DMMono/DMMono-Italic.ttf +0 -0
  4. package/dist/fonts/DMMono/DMMono-Regular.ttf +0 -0
  5. package/dist/fonts/DMMono/OFL.txt +93 -0
  6. package/dist/fonts/DMSans/DMSans-Italic-VariableFont_opsz,wght.ttf +0 -0
  7. package/dist/fonts/DMSans/DMSans-VariableFont_opsz,wght.ttf +0 -0
  8. package/dist/fonts/DMSans/OFL.txt +93 -0
  9. package/dist/fonts/DMSans/README.txt +136 -0
  10. package/dist/fonts/IBMPlexMono/IBMPlexMono-Italic.ttf +0 -0
  11. package/dist/fonts/IBMPlexMono/IBMPlexMono-Regular.ttf +0 -0
  12. package/dist/fonts/IBMPlexMono/OFL.txt +93 -0
  13. package/dist/fonts/IBMPlexSans/IBMPlexSans-Italic-VariableFont_wdth,wght.ttf +0 -0
  14. package/dist/fonts/IBMPlexSans/IBMPlexSans-VariableFont_wdth,wght.ttf +0 -0
  15. package/dist/fonts/IBMPlexSans/OFL.txt +93 -0
  16. package/dist/fonts/IBMPlexSans/README.txt +106 -0
  17. package/dist/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf +0 -0
  18. package/dist/fonts/Inter/Inter-VariableFont_opsz,wght.ttf +0 -0
  19. package/dist/fonts/Inter/OFL.txt +93 -0
  20. package/dist/fonts/JetBrainsMono/AUTHORS.txt +10 -0
  21. package/dist/fonts/JetBrainsMono/JetBrainsMono-Italic[wght].ttf +0 -0
  22. package/dist/fonts/JetBrainsMono/JetBrainsMono[wght].ttf +0 -0
  23. package/dist/fonts/JetBrainsMono/OFL.txt +93 -0
  24. package/dist/fonts/Outfit/OFL.txt +93 -0
  25. package/dist/fonts/Outfit/Outfit-VariableFont_wght.ttf +0 -0
  26. package/dist/fonts/Outfit/README.txt +71 -0
  27. package/dist/fonts/SourceCodePro/OFL.txt +93 -0
  28. package/dist/fonts/SourceCodePro/README.txt +79 -0
  29. package/dist/fonts/SourceCodePro/SourceCodePro-Italic-VariableFont_wght.ttf +0 -0
  30. package/dist/fonts/SourceCodePro/SourceCodePro-VariableFont_wght.ttf +0 -0
  31. package/dist/fonts/SourceSans3/OFL.txt +93 -0
  32. package/dist/fonts/SourceSans3/README.txt +79 -0
  33. package/dist/fonts/SourceSans3/SourceSans3-Italic-VariableFont_wght.ttf +0 -0
  34. package/dist/fonts/SourceSans3/SourceSans3-VariableFont_wght.ttf +0 -0
  35. package/dist/rizzo.min.css +6 -3
  36. package/package.json +10 -9
  37. package/scaffold/astro/FontSwitcher.astro +221 -0
  38. package/scaffold/astro/Modal.astro +14 -8
  39. package/scaffold/astro/Settings.astro +19 -0
  40. package/scaffold/astro/SoundEffects.astro +49 -0
  41. package/scaffold/{astro-minimal → astro-core}/README-RIZZO.md +1 -1
  42. package/scaffold/astro-core/src/layouts/Layout.astro +33 -0
  43. package/scaffold/config/fonts.ts +59 -0
  44. package/scaffold/svelte/DocsSidebar.svelte +47 -0
  45. package/scaffold/svelte/FontSwitcher.svelte +180 -0
  46. package/scaffold/svelte/Modal.svelte +2 -0
  47. package/scaffold/svelte/Settings.svelte +173 -1
  48. package/scaffold/svelte/SoundEffects.svelte +43 -0
  49. package/scaffold/{svelte-minimal → svelte-core}/README-RIZZO.md +1 -1
  50. package/scaffold/vanilla/README-RIZZO.md +3 -3
  51. package/scaffold/vanilla/components/accordion.html +75 -0
  52. package/scaffold/vanilla/components/alert.html +75 -0
  53. package/scaffold/vanilla/components/avatar.html +75 -0
  54. package/scaffold/vanilla/components/badge.html +75 -0
  55. package/scaffold/vanilla/components/breadcrumb.html +75 -0
  56. package/scaffold/vanilla/components/button.html +75 -0
  57. package/scaffold/vanilla/components/cards.html +75 -0
  58. package/scaffold/vanilla/components/copy-to-clipboard.html +75 -0
  59. package/scaffold/vanilla/components/divider.html +75 -0
  60. package/scaffold/vanilla/components/dropdown.html +75 -0
  61. package/scaffold/vanilla/components/forms.html +75 -0
  62. package/scaffold/vanilla/components/icons.html +75 -0
  63. package/scaffold/vanilla/components/index.html +75 -0
  64. package/scaffold/vanilla/components/modal.html +75 -0
  65. package/scaffold/vanilla/components/navbar.html +75 -0
  66. package/scaffold/vanilla/components/pagination.html +75 -0
  67. package/scaffold/vanilla/components/progress-bar.html +75 -0
  68. package/scaffold/vanilla/components/search.html +75 -0
  69. package/scaffold/vanilla/components/settings.html +75 -0
  70. package/scaffold/vanilla/components/spinner.html +75 -0
  71. package/scaffold/vanilla/components/table.html +75 -0
  72. package/scaffold/vanilla/components/tabs.html +75 -0
  73. package/scaffold/vanilla/components/theme-switcher.html +75 -0
  74. package/scaffold/vanilla/components/toast.html +75 -0
  75. package/scaffold/vanilla/components/tooltip.html +75 -0
  76. package/scaffold/vanilla/index.html +75 -0
  77. package/scaffold/vanilla/js/main.js +20 -0
  78. package/scaffold/astro-minimal/src/layouts/Layout.astro +0 -29
  79. /package/scaffold/{astro-minimal → astro-core}/.env.example +0 -0
  80. /package/scaffold/{astro-minimal → astro-core}/astro.config.mjs +0 -0
  81. /package/scaffold/{astro-minimal → astro-core}/gitignore +0 -0
  82. /package/scaffold/{astro-minimal → astro-core}/package.json +0 -0
  83. /package/scaffold/{astro-minimal → astro-core}/public/.gitkeep +0 -0
  84. /package/scaffold/{astro-minimal → astro-core}/public/favicon.svg +0 -0
  85. /package/scaffold/{astro-minimal → astro-core}/src/pages/index.astro +0 -0
  86. /package/scaffold/{astro-minimal → astro-core}/tsconfig.json +0 -0
  87. /package/scaffold/{svelte-minimal → svelte-core}/.env.example +0 -0
  88. /package/scaffold/{svelte-minimal → svelte-core}/gitignore +0 -0
  89. /package/scaffold/{svelte-minimal → svelte-core}/package.json +0 -0
  90. /package/scaffold/{svelte-minimal → svelte-core}/src/app.d.ts +0 -0
  91. /package/scaffold/{svelte-minimal → svelte-core}/src/app.html +0 -0
  92. /package/scaffold/{svelte-minimal → svelte-core}/src/routes/+layout.svelte +0 -0
  93. /package/scaffold/{svelte-minimal → svelte-core}/src/routes/+page.svelte +0 -0
  94. /package/scaffold/{svelte-minimal → svelte-core}/static/.gitkeep +0 -0
  95. /package/scaffold/{svelte-minimal → svelte-core}/svelte.config.js +0 -0
  96. /package/scaffold/{svelte-minimal → svelte-core}/tsconfig.json +0 -0
package/scaffold/vanilla/components/dropdown.html CHANGED
@@ -25,6 +25,26 @@
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
+ } else if (savedFontPair === 'dm') {
42
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-dm-sans)');
43
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-dm-mono)');
44
+ } else if (savedFontPair === 'outfit-jetbrains') {
45
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-outfit)');
46
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-jetbrains-mono)');
47
+ }
28
48
  if (localStorage.getItem('reducedMotion') === 'true') {
29
49
  document.documentElement.classList.add('reduced-motion');
30
50
  }
@@ -162,6 +182,21 @@
162
182
  <div class="settings__slider-labels"><span>Small</span><span>Default</span><span>Large</span></div>
163
183
  </div>
164
184
  </section>
185
+ <section class="settings__section">
186
+ <h3 class="settings__section-title">Font</h3>
187
+ <div class="settings__control">
188
+ <label for="font-pair-select" class="settings__label"><span class="settings__label-text">Font pair (sans + mono)</span></label>
189
+ <select id="font-pair-select" class="form-control" aria-label="Font pair" data-font-pair style="width: 100%;">
190
+ <option value="geist" data-sans="var(--font-family-geist-sans)" data-mono="var(--font-family-geist-mono)">Geist (Sans + Mono)</option>
191
+ <option value="inter-jetbrains" data-sans="var(--font-family-inter)" data-mono="var(--font-family-jetbrains-mono)">Inter + JetBrains Mono</option>
192
+ <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>
193
+ <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>
194
+ <option value="dm" data-sans="var(--font-family-dm-sans)" data-mono="var(--font-family-dm-mono)">DM Sans + DM Mono</option>
195
+ <option value="outfit-jetbrains" data-sans="var(--font-family-outfit)" data-mono="var(--font-family-jetbrains-mono)">Outfit + JetBrains Mono</option>
196
+ </select>
197
+ <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
198
+ </div>
199
+ </section>
165
200
  <section class="settings__section">
166
201
  <h3 class="settings__section-title">Accessibility</h3>
167
202
  <div class="settings__control">
@@ -296,6 +331,26 @@
296
331
 
297
332
 
298
333
 
334
+
335
+
336
+
337
+
338
+
339
+
340
+
341
+
342
+
343
+
344
+
345
+
346
+
347
+
348
+
349
+
350
+
351
+
352
+
353
+
299
354
 
300
355
 
301
356
 
@@ -419,6 +474,26 @@
419
474
 
420
475
 
421
476
 
477
+
478
+
479
+
480
+
481
+
482
+
483
+
484
+
485
+
486
+
487
+
488
+
489
+
490
+
491
+
492
+
493
+
494
+
495
+
496
+
422
497
 
423
498
 
424
499
 
package/scaffold/vanilla/components/forms.html CHANGED
@@ -25,6 +25,26 @@
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
+ } else if (savedFontPair === 'dm') {
42
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-dm-sans)');
43
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-dm-mono)');
44
+ } else if (savedFontPair === 'outfit-jetbrains') {
45
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-outfit)');
46
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-jetbrains-mono)');
47
+ }
28
48
  if (localStorage.getItem('reducedMotion') === 'true') {
29
49
  document.documentElement.classList.add('reduced-motion');
30
50
  }
@@ -162,6 +182,21 @@
162
182
  <div class="settings__slider-labels"><span>Small</span><span>Default</span><span>Large</span></div>
163
183
  </div>
164
184
  </section>
185
+ <section class="settings__section">
186
+ <h3 class="settings__section-title">Font</h3>
187
+ <div class="settings__control">
188
+ <label for="font-pair-select" class="settings__label"><span class="settings__label-text">Font pair (sans + mono)</span></label>
189
+ <select id="font-pair-select" class="form-control" aria-label="Font pair" data-font-pair style="width: 100%;">
190
+ <option value="geist" data-sans="var(--font-family-geist-sans)" data-mono="var(--font-family-geist-mono)">Geist (Sans + Mono)</option>
191
+ <option value="inter-jetbrains" data-sans="var(--font-family-inter)" data-mono="var(--font-family-jetbrains-mono)">Inter + JetBrains Mono</option>
192
+ <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>
193
+ <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>
194
+ <option value="dm" data-sans="var(--font-family-dm-sans)" data-mono="var(--font-family-dm-mono)">DM Sans + DM Mono</option>
195
+ <option value="outfit-jetbrains" data-sans="var(--font-family-outfit)" data-mono="var(--font-family-jetbrains-mono)">Outfit + JetBrains Mono</option>
196
+ </select>
197
+ <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
198
+ </div>
199
+ </section>
165
200
  <section class="settings__section">
166
201
  <h3 class="settings__section-title">Accessibility</h3>
167
202
  <div class="settings__control">
@@ -296,6 +331,26 @@
296
331
 
297
332
 
298
333
 
334
+
335
+
336
+
337
+
338
+
339
+
340
+
341
+
342
+
343
+
344
+
345
+
346
+
347
+
348
+
349
+
350
+
351
+
352
+
353
+
299
354
 
300
355
 
301
356
 
@@ -419,6 +474,26 @@
419
474
 
420
475
 
421
476
 
477
+
478
+
479
+
480
+
481
+
482
+
483
+
484
+
485
+
486
+
487
+
488
+
489
+
490
+
491
+
492
+
493
+
494
+
495
+
496
+
422
497
 
423
498
 
424
499
 
package/scaffold/vanilla/components/icons.html CHANGED
@@ -25,6 +25,26 @@
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
+ } else if (savedFontPair === 'dm') {
42
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-dm-sans)');
43
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-dm-mono)');
44
+ } else if (savedFontPair === 'outfit-jetbrains') {
45
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-outfit)');
46
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-jetbrains-mono)');
47
+ }
28
48
  if (localStorage.getItem('reducedMotion') === 'true') {
29
49
  document.documentElement.classList.add('reduced-motion');
30
50
  }
@@ -162,6 +182,21 @@
162
182
  <div class="settings__slider-labels"><span>Small</span><span>Default</span><span>Large</span></div>
163
183
  </div>
164
184
  </section>
185
+ <section class="settings__section">
186
+ <h3 class="settings__section-title">Font</h3>
187
+ <div class="settings__control">
188
+ <label for="font-pair-select" class="settings__label"><span class="settings__label-text">Font pair (sans + mono)</span></label>
189
+ <select id="font-pair-select" class="form-control" aria-label="Font pair" data-font-pair style="width: 100%;">
190
+ <option value="geist" data-sans="var(--font-family-geist-sans)" data-mono="var(--font-family-geist-mono)">Geist (Sans + Mono)</option>
191
+ <option value="inter-jetbrains" data-sans="var(--font-family-inter)" data-mono="var(--font-family-jetbrains-mono)">Inter + JetBrains Mono</option>
192
+ <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>
193
+ <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>
194
+ <option value="dm" data-sans="var(--font-family-dm-sans)" data-mono="var(--font-family-dm-mono)">DM Sans + DM Mono</option>
195
+ <option value="outfit-jetbrains" data-sans="var(--font-family-outfit)" data-mono="var(--font-family-jetbrains-mono)">Outfit + JetBrains Mono</option>
196
+ </select>
197
+ <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
198
+ </div>
199
+ </section>
165
200
  <section class="settings__section">
166
201
  <h3 class="settings__section-title">Accessibility</h3>
167
202
  <div class="settings__control">
@@ -296,6 +331,26 @@
296
331
 
297
332
 
298
333
 
334
+
335
+
336
+
337
+
338
+
339
+
340
+
341
+
342
+
343
+
344
+
345
+
346
+
347
+
348
+
349
+
350
+
351
+
352
+
353
+
299
354
 
300
355
 
301
356
 
@@ -419,6 +474,26 @@
419
474
 
420
475
 
421
476
 
477
+
478
+
479
+
480
+
481
+
482
+
483
+
484
+
485
+
486
+
487
+
488
+
489
+
490
+
491
+
492
+
493
+
494
+
495
+
496
+
422
497
 
423
498
 
424
499
 
package/scaffold/vanilla/components/index.html CHANGED
@@ -25,6 +25,26 @@
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
+ } else if (savedFontPair === 'dm') {
42
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-dm-sans)');
43
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-dm-mono)');
44
+ } else if (savedFontPair === 'outfit-jetbrains') {
45
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-outfit)');
46
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-jetbrains-mono)');
47
+ }
28
48
  if (localStorage.getItem('reducedMotion') === 'true') {
29
49
  document.documentElement.classList.add('reduced-motion');
30
50
  }
@@ -162,6 +182,21 @@
162
182
  <div class="settings__slider-labels"><span>Small</span><span>Default</span><span>Large</span></div>
163
183
  </div>
164
184
  </section>
185
+ <section class="settings__section">
186
+ <h3 class="settings__section-title">Font</h3>
187
+ <div class="settings__control">
188
+ <label for="font-pair-select" class="settings__label"><span class="settings__label-text">Font pair (sans + mono)</span></label>
189
+ <select id="font-pair-select" class="form-control" aria-label="Font pair" data-font-pair style="width: 100%;">
190
+ <option value="geist" data-sans="var(--font-family-geist-sans)" data-mono="var(--font-family-geist-mono)">Geist (Sans + Mono)</option>
191
+ <option value="inter-jetbrains" data-sans="var(--font-family-inter)" data-mono="var(--font-family-jetbrains-mono)">Inter + JetBrains Mono</option>
192
+ <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>
193
+ <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>
194
+ <option value="dm" data-sans="var(--font-family-dm-sans)" data-mono="var(--font-family-dm-mono)">DM Sans + DM Mono</option>
195
+ <option value="outfit-jetbrains" data-sans="var(--font-family-outfit)" data-mono="var(--font-family-jetbrains-mono)">Outfit + JetBrains Mono</option>
196
+ </select>
197
+ <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
198
+ </div>
199
+ </section>
165
200
  <section class="settings__section">
166
201
  <h3 class="settings__section-title">Accessibility</h3>
167
202
  <div class="settings__control">
@@ -296,6 +331,26 @@
296
331
 
297
332
 
298
333
 
334
+
335
+
336
+
337
+
338
+
339
+
340
+
341
+
342
+
343
+
344
+
345
+
346
+
347
+
348
+
349
+
350
+
351
+
352
+
353
+
299
354
 
300
355
 
301
356
 
@@ -444,6 +499,26 @@
444
499
 
445
500
 
446
501
 
502
+
503
+
504
+
505
+
506
+
507
+
508
+
509
+
510
+
511
+
512
+
513
+
514
+
515
+
516
+
517
+
518
+
519
+
520
+
521
+
447
522
 
448
523
 
449
524
 
package/scaffold/vanilla/components/modal.html CHANGED
@@ -25,6 +25,26 @@
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
+ } else if (savedFontPair === 'dm') {
42
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-dm-sans)');
43
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-dm-mono)');
44
+ } else if (savedFontPair === 'outfit-jetbrains') {
45
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-outfit)');
46
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-jetbrains-mono)');
47
+ }
28
48
  if (localStorage.getItem('reducedMotion') === 'true') {
29
49
  document.documentElement.classList.add('reduced-motion');
30
50
  }
@@ -162,6 +182,21 @@
162
182
  <div class="settings__slider-labels"><span>Small</span><span>Default</span><span>Large</span></div>
163
183
  </div>
164
184
  </section>
185
+ <section class="settings__section">
186
+ <h3 class="settings__section-title">Font</h3>
187
+ <div class="settings__control">
188
+ <label for="font-pair-select" class="settings__label"><span class="settings__label-text">Font pair (sans + mono)</span></label>
189
+ <select id="font-pair-select" class="form-control" aria-label="Font pair" data-font-pair style="width: 100%;">
190
+ <option value="geist" data-sans="var(--font-family-geist-sans)" data-mono="var(--font-family-geist-mono)">Geist (Sans + Mono)</option>
191
+ <option value="inter-jetbrains" data-sans="var(--font-family-inter)" data-mono="var(--font-family-jetbrains-mono)">Inter + JetBrains Mono</option>
192
+ <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>
193
+ <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>
194
+ <option value="dm" data-sans="var(--font-family-dm-sans)" data-mono="var(--font-family-dm-mono)">DM Sans + DM Mono</option>
195
+ <option value="outfit-jetbrains" data-sans="var(--font-family-outfit)" data-mono="var(--font-family-jetbrains-mono)">Outfit + JetBrains Mono</option>
196
+ </select>
197
+ <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
198
+ </div>
199
+ </section>
165
200
  <section class="settings__section">
166
201
  <h3 class="settings__section-title">Accessibility</h3>
167
202
  <div class="settings__control">
@@ -296,6 +331,26 @@
296
331
 
297
332
 
298
333
 
334
+
335
+
336
+
337
+
338
+
339
+
340
+
341
+
342
+
343
+
344
+
345
+
346
+
347
+
348
+
349
+
350
+
351
+
352
+
353
+
299
354
 
300
355
 
301
356
 
@@ -419,6 +474,26 @@
419
474
 
420
475
 
421
476
 
477
+
478
+
479
+
480
+
481
+
482
+
483
+
484
+
485
+
486
+
487
+
488
+
489
+
490
+
491
+
492
+
493
+
494
+
495
+
496
+
422
497
 
423
498
 
424
499
 
package/scaffold/vanilla/components/navbar.html CHANGED
@@ -25,6 +25,26 @@
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
+ } else if (savedFontPair === 'dm') {
42
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-dm-sans)');
43
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-dm-mono)');
44
+ } else if (savedFontPair === 'outfit-jetbrains') {
45
+ document.documentElement.style.setProperty('--font-family', 'var(--font-family-outfit)');
46
+ document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-jetbrains-mono)');
47
+ }
28
48
  if (localStorage.getItem('reducedMotion') === 'true') {
29
49
  document.documentElement.classList.add('reduced-motion');
30
50
  }
@@ -162,6 +182,21 @@
162
182
  <div class="settings__slider-labels"><span>Small</span><span>Default</span><span>Large</span></div>
163
183
  </div>
164
184
  </section>
185
+ <section class="settings__section">
186
+ <h3 class="settings__section-title">Font</h3>
187
+ <div class="settings__control">
188
+ <label for="font-pair-select" class="settings__label"><span class="settings__label-text">Font pair (sans + mono)</span></label>
189
+ <select id="font-pair-select" class="form-control" aria-label="Font pair" data-font-pair style="width: 100%;">
190
+ <option value="geist" data-sans="var(--font-family-geist-sans)" data-mono="var(--font-family-geist-mono)">Geist (Sans + Mono)</option>
191
+ <option value="inter-jetbrains" data-sans="var(--font-family-inter)" data-mono="var(--font-family-jetbrains-mono)">Inter + JetBrains Mono</option>
192
+ <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>
193
+ <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>
194
+ <option value="dm" data-sans="var(--font-family-dm-sans)" data-mono="var(--font-family-dm-mono)">DM Sans + DM Mono</option>
195
+ <option value="outfit-jetbrains" data-sans="var(--font-family-outfit)" data-mono="var(--font-family-jetbrains-mono)">Outfit + JetBrains Mono</option>
196
+ </select>
197
+ <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
198
+ </div>
199
+ </section>
165
200
  <section class="settings__section">
166
201
  <h3 class="settings__section-title">Accessibility</h3>
167
202
  <div class="settings__control">
@@ -296,6 +331,26 @@
296
331
 
297
332
 
298
333
 
334
+
335
+
336
+
337
+
338
+
339
+
340
+
341
+
342
+
343
+
344
+
345
+
346
+
347
+
348
+
349
+
350
+
351
+
352
+
353
+
299
354
 
300
355
 
301
356
 
@@ -419,6 +474,26 @@
419
474
 
420
475
 
421
476
 
477
+
478
+
479
+
480
+
481
+
482
+
483
+
484
+
485
+
486
+
487
+
488
+
489
+
490
+
491
+
492
+
493
+
494
+
495
+
496
+
422
497
 
423
498
 
424
499