js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #23 from shoelace-style/theming-ui/add-curated-font-list

Browse Source 
add list of curated fonts
This commit is contained in:
Kelsey Jackson
2024-01-04 18:08:21 -06:00
committed by GitHub
parent ccc6f1aa23 0c95c70192
commit 4914cdb352
2 changed files with 129 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/_includes/default.njk
View File

@@ -52,6 +52,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Noto+Sans+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;500;600&family=Inter:wght@300;400;500;600&family=Lora:wght@400;500;600&family=Noto+Sans+Display:wght@300;400;500;600&family=Noto+Sans+Mono:wght@300;400;500;600&family=Noto+Sans:wght@300;400;500;600&family=Noto+Serif:wght@300;400;500;600&family=Open+Sans:wght@300;400;500;600&family=Playfair+Display:wght@400;500;600&family=Playfair:opsz,wght@5..1200,300;5..1200,400;5..1200,500;5..1200,600&family=Quicksand:wght@300;400;500;600&family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500;8..144,600&family=Roboto+Mono:wght@300;400;500;600&family=Roboto+Serif:opsz,wght@8..144,300;8..144,400;8..144,500;8..144,600&family=Roboto+Slab:wght@300;400;500;600&display=swap" rel="stylesheet">
{# Turbo + Scroll positioning #}
<script src="{{ assetUrl('scripts/turbo.js') }}" type="module"></script>

144
docs/pages/experimental/themer.md
View File

@@ -17,19 +17,39 @@ toc: false
<wa-option value="playful">Playful</wa-option>
<wa-option value="chic">Chic</wa-option>
</wa-select>
<wa-select name="heading-text" label="Heading" value="">
<wa-option value="">Theme default</wa-option>
<wa-option value="serif">Serif</wa-option>
<wa-option value="sans-serif">Sans-serif</wa-option>
<wa-option value="monospace">Monospace</wa-option>
<wa-option value="cursive">Cursive</wa-option>
<wa-select name="heading-text" label="Heading" value="default">
<wa-option value="default">Theme default</wa-option>
<wa-option value="assistant">Assistant</wa-option>
<wa-option value="inter">Inter</wa-option>
<wa-option value="lora">Lora</wa-option>
<wa-option value="noto-sans">Noto Sans</wa-option>
<wa-option value="noto-sans-display">Noto Sans Display</wa-option>
<wa-option value="noto-sans-mono">Noto Sans Mono</wa-option>
<wa-option value="noto-serif">Noto Serif</wa-option>
<wa-option value="open-sans">Open Sans</wa-option>
<wa-option value="playfair">Playfair</wa-option>
<wa-option value="playfair-display">Playfair Display</wa-option>
<wa-option value="quicksand">Quicksand</wa-option>
<wa-option value="roboto-flex">Roboto Flex</wa-option>
<wa-option value="roboto-mono">Roboto Mono</wa-option>
<wa-option value="roboto-serif">Roboto Serif</wa-option>
<wa-option value="roboto-slab">Roboto Slab</wa-option>
</wa-select>
<wa-select name="body-text" label="Body" value="">
<wa-option value="">Theme default</wa-option>
<wa-option value="serif">Serif</wa-option>
<wa-option value="sans-serif">Sans-serif</wa-option>
<wa-option value="monospace">Monospace</wa-option>
<wa-option value="cursive">Cursive</wa-option>
<wa-select name="body-text" label="Body" value="default">
<wa-option value="default">Theme default</wa-option>
<wa-option value="assistant">Assistant</wa-option>
<wa-option value="inter">Inter</wa-option>
<wa-option value="lora">Lora</wa-option>
<wa-option value="noto-sans">Noto Sans</wa-option>
<wa-option value="noto-sans-mono">Noto Sans Mono</wa-option>
<wa-option value="noto-serif">Noto Serif</wa-option>
<wa-option value="open-sans">Open Sans</wa-option>
<wa-option value="playfair">Playfair</wa-option>
<wa-option value="quicksand">Quicksand</wa-option>
<wa-option value="roboto-flex">Roboto Flex</wa-option>
<wa-option value="roboto-mono">Roboto Mono</wa-option>
<wa-option value="roboto-serif">Roboto Serif</wa-option>
<wa-option value="roboto-slab">Roboto Slab</wa-option>
</wa-select>
<wa-select name="border-style" label="Border Style" value="solid">
<wa-option value="solid">Solid</wa-option>
@@ -53,13 +73,105 @@ toc: false
});
// Heading text
container.querySelector('[name="heading-text"]').addEventListener('wa-input', event => {
document.documentElement.style.setProperty('--wa-font-family-heading', event.target.value);
container.querySelector('[name="heading-text"]').addEventListener('wa-change', event => {
let fontFamily;
switch(event.target.value) {
case 'assistant':
fontFamily = `'Assistant', sans-serif`;
break;
case 'inter':
fontFamily = `'inter', sans-serif`;
break;
case 'lora':
fontFamily = `'Lora', serif`
case 'noto-sans':
fontFamily = `'Noto Sans', sans-serif`;
break;
case 'noto-sans-display':
fontFamily = `'Noto Sans Display', sans-serif`;
break;
case 'noto-sans-mono':
fontFamily = `'Noto Sans Mono', monospace`;
break;
case 'noto-serif':
fontFamily = `'Noto Serif', serif`;
break;
case 'open-sans':
fontFamily = `'Open Sans', sans-serif`;
break;
case 'playfair':
fontFamily = `'Playfair', serif`;
break;
case 'playfair-display':
fontFamily = `'Playfair Display', serif`;
break;
case 'quicksand':
fontFamily = `'Quicksand', sans-serif`;
break;
case 'roboto-flex':
fontFamily = `'Roboto Flex', sans-serif`;
break;
case 'roboto-mono':
fontFamily = `'Roboto Mono', monospace`;
break;
case 'roboto-serif':
fontFamily = `'Roboto Serif', serif`;
break;
case 'roboto-slab':
fontFamily = `'Roboto Slab', serif`;
break;
default:
fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
}
document.documentElement.style.setProperty('--wa-font-family-heading', fontFamily);
});
// Body text
container.querySelector('[name="body-text"]').addEventListener('wa-input', event => {
document.documentElement.style.setProperty('--wa-font-family-body', event.target.value);
container.querySelector('[name="body-text"]').addEventListener('wa-change', event => {
let fontFamily;
switch(event.target.value) {
case 'assistant':
fontFamily = `'Assistant', sans-serif`;
break;
case 'inter':
fontFamily = `'inter', sans-serif`;
break;
case 'lora':
fontFamily = `'Lora', serif`
case 'noto-sans':
fontFamily = `'Noto Sans', sans-serif`;
break;
case 'noto-sans-mono':
fontFamily = `'Noto Sans Mono', monospace`;
break;
case 'noto-serif':
fontFamily = `'Noto Serif', serif`;
break;
case 'open-sans':
fontFamily = `'Open Sans', sans-serif`;
break;
case 'playfair':
fontFamily = `'Playfair', serif`;
break;
case 'quicksand':
fontFamily = `'Quicksand', sans-serif`;
break;
case 'roboto-flex':
fontFamily = `'Roboto Flex', sans-serif`;
break;
case 'roboto-mono':
fontFamily = `'Roboto Mono', monospace`;
break;
case 'roboto-serif':
fontFamily = `'Roboto Serif', serif`;
break;
case 'roboto-slab':
fontFamily = `'Roboto Slab', serif`;
break;
default:
fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
}
document.documentElement.style.setProperty('--wa-font-family-body', fontFamily);
});
// Corners