From b342c30fc074059538a1c4d5e6127823be52e64c Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Mon, 23 Jun 2025 23:49:28 -0400 Subject: [PATCH] make font packs more exciting --- packages/webawesome/docs/_data/themer.js | 80 +++++++++---------- .../docs/examples/themes/showcase.njk | 2 +- .../webawesome/src/styles/themes/awesome.css | 4 +- 3 files changed, 43 insertions(+), 43 deletions(-) diff --git a/packages/webawesome/docs/_data/themer.js b/packages/webawesome/docs/_data/themer.js index e457f5ef7..8475b2a47 100644 --- a/packages/webawesome/docs/_data/themer.js +++ b/packages/webawesome/docs/_data/themer.js @@ -74,12 +74,12 @@ export const themes = [ body: { name: 'Quicksand', css: 'Quicksand, sans-serif', - href: 'https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap', + href: 'https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap', }, heading: { name: 'Quicksand', css: 'Quicksand, sans-serif', - href: 'https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap', + href: 'https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap', }, code: { name: 'OS Default', @@ -87,9 +87,9 @@ export const themes = [ href: null, }, longform: { - name: 'OS Default', - css: 'ui-serif, serif', - href: null, + name: 'Crimson Pro', + css: '"Crimson Pro", serif', + href: 'https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap', }, }, icons: { @@ -108,7 +108,7 @@ export const themes = [ '--wa-font-family-body': 'Quicksand, sans-serif', '--wa-font-family-heading': 'var(--wa-font-family-body)', '--wa-font-family-code': 'ui-monospace, monospace', - '--wa-font-family-longform': 'ui-serif, serif', + '--wa-font-family-longform': '"Crimson Pro", serif', '--wa-font-weight-body': 500, '--wa-font-weight-heading': 700, '--wa-font-weight-code': 500, @@ -194,22 +194,22 @@ export const themes = [ body: { name: 'Inter', css: 'Inter, sans-serif', - href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap', + href: 'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap', }, heading: { name: 'Inter', css: 'Inter, sans-serif', - href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap', + href: 'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap', }, code: { - name: 'OS Default', - css: 'ui-monospace, monospace', - href: null, + name: 'Geist Mono', + css: '"Geist Mono", monospace', + href: 'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap', }, longform: { - name: 'OS Default', - css: 'ui-serif, serif', - href: null, + name: 'Aleo', + css: 'Aleo, serif', + href: 'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap', }, }, icons: { @@ -227,8 +227,8 @@ export const themes = [ // Fonts '--wa-font-family-body': 'Inter, sans-serif', '--wa-font-family-heading': 'var(--wa-font-family-body)', - '--wa-font-family-code': 'ui-monospace, monospace', - '--wa-font-family-longform': 'ui-serif, serif', + '--wa-font-family-code': '"Geist Mono", monospace', + '--wa-font-family-longform': 'Aleo, serif', '--wa-font-weight-body': 400, '--wa-font-weight-heading': 650, '--wa-font-weight-code': 400, @@ -254,22 +254,22 @@ export const themes = [ body: { name: 'Space Grotesk', css: '"Space Grotesk", sans-serif', - href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@100;200;300;400;500;600;700&family=Space+Grotesk:wght@300..700&family=Space+Mono:wght@400;700&display=swap', + href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap', }, heading: { name: 'IBM Plex Sans Condensed', css: '"IBM Plex Sans Condensed", sans-serif', - href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@100;200;300;400;500;600;700&family=Space+Grotesk:wght@300..700&family=Space+Mono:wght@400;700&display=swap', + href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap', }, code: { name: 'Space Mono', css: '"Space Mono", monospace', - href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@100;200;300;400;500;600;700&family=Space+Grotesk:wght@300..700&family=Space+Mono:wght@400;700&display=swap', + href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap', }, longform: { - name: 'OS Default', - css: 'ui-serif, serif', - href: null, + name: 'Roboto Serif', + css: '"Roboto Serif", serif', + href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap', }, }, icons: { @@ -288,7 +288,7 @@ export const themes = [ '--wa-font-family-body': 'Space Grotesk, sans-serif', '--wa-font-family-heading': 'IBM Plex Sans Condensed, sans-serif', '--wa-font-family-code': 'Space Mono, monospace', - '--wa-font-family-longform': 'ui-serif, serif', + '--wa-font-family-longform': '"Roboto Serif", serif', '--wa-font-weight-body': 400, '--wa-font-weight-heading': 500, '--wa-font-weight-code': 400, @@ -314,22 +314,22 @@ export const themes = [ body: { name: 'Figtree', css: 'Figtree, sans-serif', - href: 'https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap', + href: 'https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap', }, heading: { name: 'Figtree', css: 'Figtree, sans-serif', - href: 'https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap', + href: 'https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap', }, code: { - name: 'OS Default', - css: 'ui-monospace, monospace', - href: null, + name: 'Chivo Mono', + css: '"Chivo Mono", monospace', + href: 'https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap', }, longform: { - name: 'OS Default', - css: 'ui-serif, serif', - href: null, + name: 'Fraunces', + css: 'Fraunces, serif', + href: 'https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap', }, }, icons: { @@ -347,8 +347,8 @@ export const themes = [ // Fonts '--wa-font-family-body': 'Figtree, sans-serif', '--wa-font-family-heading': 'var(--wa-font-family-body)', - '--wa-font-family-code': 'ui-monospace, monospace', - '--wa-font-family-longform': 'ui-serif, serif', + '--wa-font-family-code': '"Chivo Mono", monospace', + '--wa-font-family-longform': 'Fraunces, serif', '--wa-font-weight-body': 400, '--wa-font-weight-heading': 800, '--wa-font-weight-code': 400, @@ -494,22 +494,22 @@ export const themes = [ body: { name: 'Nunito', css: 'Nunito, sans-serif', - href: 'https://fonts.googleapis.com/css2?family=Azeret+Mono:ital@0;1&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap', + href: 'https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=BioRhyme:wght@200..800&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap', }, heading: { name: 'Fredoka', css: 'Fredoka, sans-serif', - href: 'https://fonts.googleapis.com/css2?family=Azeret+Mono:ital@0;1&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap', + href: 'https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=BioRhyme:wght@200..800&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap', }, code: { name: 'Azeret Mono', css: '"Azeret Mono", monospace', - href: 'https://fonts.googleapis.com/css2?family=Azeret+Mono:ital@0;1&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap', + href: 'https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=BioRhyme:wght@200..800&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap', }, longform: { - name: 'OS Default', - css: 'ui-serif, serif', - href: null, + name: 'BioRhyme', + css: 'BioRhyme, serif', + href: 'https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=BioRhyme:wght@200..800&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap', }, }, icons: { @@ -528,7 +528,7 @@ export const themes = [ '--wa-font-family-body': 'Nunito, sans-serif', '--wa-font-family-heading': 'Fredoka, sans-serif', '--wa-font-family-code': 'Azeret Mono, monospace', - '--wa-font-family-longform': 'ui-serif, serif', + '--wa-font-family-longform': 'BioRhyme, serif', '--wa-font-weight-body': 500, '--wa-font-weight-heading': 600, '--wa-font-weight-code': 500, diff --git a/packages/webawesome/docs/examples/themes/showcase.njk b/packages/webawesome/docs/examples/themes/showcase.njk index f45a442a0..7ff109b3c 100644 --- a/packages/webawesome/docs/examples/themes/showcase.njk +++ b/packages/webawesome/docs/examples/themes/showcase.njk @@ -151,7 +151,7 @@ layout: false -

+

“All we have to decide is what to do with the time that is given to us. There are other forces at work in this world, Frodo, besides the will of evil.”

diff --git a/packages/webawesome/src/styles/themes/awesome.css b/packages/webawesome/src/styles/themes/awesome.css index db198e7f3..c523fa71d 100644 --- a/packages/webawesome/src/styles/themes/awesome.css +++ b/packages/webawesome/src/styles/themes/awesome.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap'); @layer wa-theme { .wa-theme-awesome, @@ -187,7 +187,7 @@ --wa-font-family-body: 'Quicksand', sans-serif; --wa-font-family-heading: var(--wa-font-family-body); --wa-font-family-code: ui-monospace, monospace; - --wa-font-family-longform: ui-serif, serif; + --wa-font-family-longform: 'Crimson Pro', serif; /* Font sizes use a ratio of 1.125 to scale sizes proportionally. * For larger font sizes, each size is twice 1.125x larger to maximize impact.