Author: David East [deast@google.com]
Hash: daebb9110125d8b6175f33199f1dbedace5b50ec
Timestamp: Fri, 04 Nov 2022 01:55:35 +0000 (1 year ago)

+251 -234 +/-5 browse
<Typography />
1diff --git a/site/src/components/Prism.astro b/site/src/components/Prism.astro
2index 771bd38..c1722e8 100644
3--- a/site/src/components/Prism.astro
4+++ b/site/src/components/Prism.astro
5 @@ -1,10 +1,14 @@
6 ---
7 import { Prism } from '@astrojs/prism';
8- const { code, lang } = Astro.props;
9+ let { code, lang, format } = Astro.props;
10 // Note: This is a CJS module
11 import formatter from 'js-beautify';
12 const beautify = formatter.css;
13- const formattedCode = beautify(code, { indent_size: 2 })
14+ let formattedCode = code;
15+ format = format != null ? format : true;
16+ if(format) {
17+ formattedCode = beautify(code, { indent_size: 2 })
18+ }
19 ---
20
21 <Prism lang={lang} code={formattedCode} />
22 diff --git a/site/src/components/Typography/Typography.astro b/site/src/components/Typography/Typography.astro
23new file mode 100644
24index 0000000..f9a002b
25--- /dev/null
26+++ b/site/src/components/Typography/Typography.astro
27 @@ -0,0 +1,199 @@
28+ ---
29+ import Prism from '../Prism.astro';
30+ import styles from './Typography.module.css';
31+ ---
32+
33+ <section id="typography">
34+ <header>
35+ <h2>Typography</h2>
36+ <p>Variable and static font sizes, smart line heights, and other familiar typography variables, all ready to go.</p>
37+ </header>
38+ <div class="block-wrap">
39+ <div>
40+ <h5>The Props</h5>
41+ <div class="var-examples">
42+ <Prism lang="css" code={`
43+ /* A scale from 00-8 */
44+ --font-size-8;
45+ /* A scale from 0-3 */
46+ --font-size-fluid-3;
47+ /* A scale from 1-9 */
48+ --font-weight-9;
49+ /* A scale from 0-7 */
50+ --font-letterspacing-7;
51+ /* A scale from 00-5 */
52+ --font-lineheight-5;`} />
53+ </div>
54+ </div>
55+
56+ <div>
57+ <h5>Usage Sample</h5>
58+ <Prism lang="css" code={`.hero {
59+ line-height: var(--font-lineheight-1);
60+ font-size: var(--font-size-fluid-3);
61+ font-weight: var(--font-weight-9);
62+ font-family: var(--font-sans);
63+ }`} />
64+ </div>
65+ </div>
66+
67+ <article class={styles.fontSizes}>
68+ <h4>Font Families</h4>
69+ <Prism format={false} lang="css" code={`--font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
70+ --font-serif: ui-serif, serif;
71+ --font-mono: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, monospace;`} />
72+ <div class="block-wrap">
73+ <div class="font-family-grid">
74+ <code class=" language-css">--font-sans</code>
75+ <div>
76+ <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&</span>
77+ </div>
78+ </div>
79+ <div class="font-family-grid">
80+ <code class=" language-css">--font-serif</code>
81+ <div style="font-family: var(--font-serif)">
82+ <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&</span>
83+ </div>
84+ </div>
85+ <div class="font-family-grid">
86+ <code class=" language-css">--font-mono</code>
87+ <div style="font-family: var(--font-mono)">
88+ <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&</span>
89+ </div>
90+ </div>
91+ </div>
92+ </article>
93+
94+ <article class={styles.fontSizes}>
95+ <div class="block-wrap">
96+ <div>
97+ <h4>Font Weights</h4>
98+ <Prism lang="css" code={`--font-weight-1: 100;
99+ --font-weight-2: 200;
100+ --font-weight-3: 300;
101+ --font-weight-4: 400;
102+ --font-weight-5: 500;
103+ --font-weight-6: 600;
104+ --font-weight-7: 700;
105+ --font-weight-8: 800;
106+ --font-weight-9: 900;`} />
107+ </div>
108+ <div class="font-demo">
109+ <div class="sample-text" style="font-size: var(--font-size-8)">Aa</div>
110+ <input class="font-slider" name="weight" data-prop="fontWeight" type="range" value="4" min="1" max="9" style="--track-fill:44%;">
111+ </div>
112+ </div>
113+ </article>
114+
115+ <article class={styles.fontSizes}>
116+ <div class="block-wrap">
117+ <div>
118+ <h4>Letter Spacing</h4>
119+ <Prism lang="css" code={`--font-letterspacing-0: -.05em;
120+ --font-letterspacing-1: .025em;
121+ --font-letterspacing-2: .050em;
122+ --font-letterspacing-3: .075em;
123+ --font-letterspacing-4: .150em;
124+ --font-letterspacing-5: .500em;
125+ --font-letterspacing-6: .750em;
126+ --font-letterspacing-7: 1em;`} />
127+ </div>
128+ <div class={styles.fontDemo}>
129+ <div class={styles.letterspacingDemo}>Letter Spacing</div>
130+ <input class="font-slider" name="letterspacing" data-prop="letter-spacing" type="range" value="1" min="0" max="7" style="--track-fill:14%;">
131+ </div>
132+ </div>
133+ </article>
134+
135+ <article class={styles.fontSizes}>
136+ <div class="block-wrap">
137+ <div>
138+ <h4>Line Height</h4>
139+ <Prism lang="css" code={`--font-lineheight-00: .95;
140+ --font-lineheight-0: 1.1;
141+ --font-lineheight-1: 1.25;
142+ --font-lineheight-2: 1.375;
143+ --font-lineheight-3: 1.5;
144+ --font-lineheight-4: 1.75;
145+ --font-lineheight-5: 2;`} />
146+ </div>
147+ <div class="font-demo">
148+ <div class="sample-text" style="max-inline-size: var(--size-content-1);">
149+ Sample paragraph content to provide a preview for OP's line heights
150+ </div>
151+ <input class="font-slider" name="lineheight" data-prop="lineHeight" type="range" value="1" min="-1" max="5" style="--track-fill:33%;">
152+ </div>
153+ </div>
154+ </article>
155+
156+ <!-- <article class={styles.fontSizes}>
157+ <header>
158+ <h4>Relative Line Height</h4>
159+ <p>These line heights tighten as the font size is increased.</p>
160+ </header>
161+ <pre class="language-css"><code>
162+ --font-relative-lineheight-00: calc(1rem + .5ch);
163+ --font-relative-lineheight-0: calc(1rem + .75ch);
164+ --font-relative-lineheight-1: calc(1rem + 1ch);
165+ --font-relative-lineheight-2: calc(1rem + 1.25ch);
166+ --font-relative-lineheight-3: calc(1rem + 1.5ch);
167+ --font-relative-lineheight-4: calc(1rem + 2ch);
168+ --font-relative-lineheight-5: calc(1rem + 2.5ch);
169+ --font-relative-lineheight-6: calc(1rem + 3ch);
170+ </code></pre>
171+ </article> -->
172+
173+ <article class={styles.fontSizes}>
174+ <h4>Font Sizes</h4>
175+ <Prism lang="css" code={`--font-size-00: .5rem;
176+ --font-size-0: .75rem;
177+ --font-size-1: 1rem;
178+ --font-size-2: 1.1rem;
179+ --font-size-3: 1.25rem;
180+ --font-size-4: 1.5rem;
181+ --font-size-5: 2rem;
182+ --font-size-6: 2.5rem;
183+ --font-size-7: 3rem;
184+ --font-size-8: 3.5rem;`} />
185+ <div class="scroll-x-overflow"><div class={styles.fontSizeExamples}>
186+ <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-00<span class="token punctuation">)</span></code>
187+ <span style="font-size: var(--font-size-00)">Almost before you knew it, we'd touched ground.</span>
188+ <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-0<span class="token punctuation">)</span></code>
189+ <span style="font-size: var(--font-size-0)">Almost before you knew it, we'd touched ground.</span>
190+ <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-1<span class="token punctuation">)</span></code>
191+ <span style="font-size: var(--font-size-1)">Almost before you knew it, we'd touched ground.</span>
192+ <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-2<span class="token punctuation">)</span></code>
193+ <span style="font-size: var(--font-size-2)">Almost before you knew it, we'd touched ground.</span>
194+ <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-3<span class="token punctuation">)</span></code>
195+ <span style="font-size: var(--font-size-3)">Almost before you knew it, we'd touched ground.</span>
196+ <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-4<span class="token punctuation">)</span></code>
197+ <span style="font-size: var(--font-size-4)">Almost before you knew it, we'd touched ground.</span>
198+ <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-5<span class="token punctuation">)</span></code>
199+ <span style="font-size: var(--font-size-5)">Almost before you knew it, we'd touched ground.</span>
200+ <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-6<span class="token punctuation">)</span></code>
201+ <span style="font-size: var(--font-size-6)">Almost before you knew it, we'd touched ground.</span>
202+ <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-7<span class="token punctuation">)</span></code>
203+ <span style="font-size: var(--font-size-7)">Almost before you knew it, we'd touched ground.</span>
204+ <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-8<span class="token punctuation">)</span></code>
205+ <span style="font-size: var(--font-size-8)">Almost before you knew it, we'd touched ground.</span>
206+ </div></div>
207+ </article>
208+
209+ <article class={styles.fontSizes}>
210+ <h4>Fluid Font Sizes</h4>
211+ <Prism lang="css" code={`--font-size-fluid-0: clamp(.75rem, 1.5vw, 1rem);
212+ --font-size-fluid-1: clamp(1rem, 2vw, 1.5rem);
213+ --font-size-fluid-2: clamp(1.5rem, 3vw, 2.5rem);
214+ --font-size-fluid-3: clamp(2rem, 4vw, 3.5rem);`} />
215+ <div class="scroll-x-overflow"><div class={styles.fontSizeExamples}>
216+ <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-fluid-00<span class="token punctuation">)</span></code>
217+ <span style="font-size: var(--font-size-fluid-00)">Almost before you knew it, we'd touched ground.</span>
218+ <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-fluid-1<span class="token punctuation">)</span></code>
219+ <span style="font-size: var(--font-size-fluid-1)">Almost before you knew it, we'd touched ground.</span>
220+ <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-fluid-2<span class="token punctuation">)</span></code>
221+ <span style="font-size: var(--font-size-fluid-2)">Almost before you knew it, we'd touched ground.</span>
222+ <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-fluid-3<span class="token punctuation">)</span></code>
223+ <span style="font-size: var(--font-size-fluid-3)">Almost before you knew it, we'd touched ground.</span>
224+ </div></div>
225+ </article>
226+ </section>
227 diff --git a/site/src/components/Typography/Typography.module.css b/site/src/components/Typography/Typography.module.css
228new file mode 100644
229index 0000000..ce68357
230--- /dev/null
231+++ b/site/src/components/Typography/Typography.module.css
232 @@ -0,0 +1,44 @@
233+ .fontSizes {
234+ display: grid;
235+ gap: var(--size-3);
236+
237+ & pre {
238+ max-inline-size: var(--max-inline-body);
239+ }
240+ }
241+
242+ .fontDemo {
243+ flex-grow: 1;
244+ display: grid;
245+ gap: var(--size-2);
246+ align-content: center;
247+ align-self: stretch;
248+ text-align: center;
249+
250+ & > :global(.sample-text) {
251+ margin-inline: auto;
252+ }
253+ }
254+
255+ .letterspacingDemo {
256+ composes: sample-text from global;
257+ inline-size: min(var(--max-inline-body), var(--size-content-2));
258+ }
259+
260+ .fontSizeExamples {
261+ inline-size: max-content;
262+ display: grid;
263+ gap: var(--size-2);
264+ grid-template-columns: max-content 1fr;
265+ align-items: center;
266+ justify-items: flex-start;
267+
268+ @media (--md-n-below) {
269+ grid-template-columns: 1fr;
270+ gap: var(--size-1);
271+
272+ & > code:not(:first-of-type) {
273+ margin-block-start: var(--size-3);
274+ }
275+ }
276+ }
277 diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
278index 6224be4..9b4ef6b 100644
279--- a/site/src/pages/index.astro
280+++ b/site/src/pages/index.astro
281 @@ -12,6 +12,7 @@ import Colors from '../components/Colors/Colors.astro';
282 import Gradients from '../components/Gradients/Gradients.astro';
283 import Shadows from '../components/Shadows/Shadows.astro';
284 import AspectRatio from '../components/AspectRatio/AspectRatio.astro';
285+ import Typography from '../components/Typography/Typography.astro';
286 ---
287
288 <BaseLayout>
289 @@ -60,194 +61,7 @@ import AspectRatio from '../components/AspectRatio/AspectRatio.astro';
290
291 <AspectRatio />
292
293- <section id="typography">
294- <header>
295- <h2>Typography</h2>
296- <p>Variable and static font sizes, smart line heights, and other familiar typography variables, all ready to go.</p>
297- </header>
298- <div class="block-wrap">
299- <div>
300- <h5>The Props</h5>
301- <div class="var-examples">
302- <Prism lang="css" code={`--font-size-{00-8}
303- --font-size-fluid-{0-3}
304- --font-weight-{1-9}
305- --font-letterspacing-{0-7}
306- --font-lineheight-{00-5}`} />
307- </div>
308- </div>
309-
310- <div>
311- <h5>Usage Sample</h5>
312- <Prism lang="css" code={`.hero {
313- line-height: var(--font-lineheight-1);
314- font-size: var(--font-size-fluid-3);
315- font-weight: var(--font-weight-9);
316- font-family: var(--font-sans);
317- }`} />
318- </div>
319- </div>
320-
321- <article class="font-sizes">
322- <h4>Font Families</h4>
323- <Prism lang="css" code={`--font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
324- --font-serif: ui-serif, serif;
325- --font-mono: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, monospace;`} />
326- <div class="block-wrap">
327- <div class="font-family-grid">
328- <code class=" language-css">--font-sans</code>
329- <div>
330- <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&</span>
331- </div>
332- </div>
333- <div class="font-family-grid">
334- <code class=" language-css">--font-serif</code>
335- <div style="font-family: var(--font-serif)">
336- <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&</span>
337- </div>
338- </div>
339- <div class="font-family-grid">
340- <code class=" language-css">--font-mono</code>
341- <div style="font-family: var(--font-mono)">
342- <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&</span>
343- </div>
344- </div>
345- </div>
346- </article>
347-
348- <article class="font-sizes">
349- <div class="block-wrap">
350- <div>
351- <h4>Font Weights</h4>
352- <Prism lang="css" code={`--font-weight-1: 100;
353- --font-weight-2: 200;
354- --font-weight-3: 300;
355- --font-weight-4: 400;
356- --font-weight-5: 500;
357- --font-weight-6: 600;
358- --font-weight-7: 700;
359- --font-weight-8: 800;
360- --font-weight-9: 900;`} />
361- </div>
362- <div class="font-demo">
363- <div class="sample-text" style="font-size: var(--font-size-8)">Aa</div>
364- <input class="font-slider" name="weight" data-prop="fontWeight" type="range" value="4" min="1" max="9" style="--track-fill:44%;">
365- </div>
366- </div>
367- </article>
368-
369- <article class="font-sizes">
370- <div class="block-wrap">
371- <div>
372- <h4>Letter Spacing</h4>
373- <Prism lang="css" code={`--font-letterspacing-0: -.05em;
374- --font-letterspacing-1: .025em;
375- --font-letterspacing-2: .050em;
376- --font-letterspacing-3: .075em;
377- --font-letterspacing-4: .150em;
378- --font-letterspacing-5: .500em;
379- --font-letterspacing-6: .750em;
380- --font-letterspacing-7: 1em;`} />
381- </div>
382- <div class="font-demo">
383- <div class="sample-text letterspacing-demo">Letter Spacing</div>
384- <input class="font-slider" name="letterspacing" data-prop="letter-spacing" type="range" value="1" min="0" max="7" style="--track-fill:14%;">
385- </div>
386- </div>
387- </article>
388-
389- <article class="font-sizes">
390- <div class="block-wrap">
391- <div>
392- <h4>Line Height</h4>
393- <Prism lang="css" code={`--font-lineheight-00: .95;
394- --font-lineheight-0: 1.1;
395- --font-lineheight-1: 1.25;
396- --font-lineheight-2: 1.375;
397- --font-lineheight-3: 1.5;
398- --font-lineheight-4: 1.75;
399- --font-lineheight-5: 2;`} />
400- </div>
401- <div class="font-demo">
402- <div class="sample-text" style="max-inline-size: var(--size-content-1);">
403- Sample paragraph content to provide a preview for OP's line heights
404- </div>
405- <input class="font-slider" name="lineheight" data-prop="lineHeight" type="range" value="1" min="-1" max="5" style="--track-fill:33%;">
406- </div>
407- </div>
408- </article>
409-
410- <!-- <article class="font-sizes">
411- <header>
412- <h4>Relative Line Height</h4>
413- <p>These line heights tighten as the font size is increased.</p>
414- </header>
415- <pre class="language-css"><code>
416- --font-relative-lineheight-00: calc(1rem + .5ch);
417- --font-relative-lineheight-0: calc(1rem + .75ch);
418- --font-relative-lineheight-1: calc(1rem + 1ch);
419- --font-relative-lineheight-2: calc(1rem + 1.25ch);
420- --font-relative-lineheight-3: calc(1rem + 1.5ch);
421- --font-relative-lineheight-4: calc(1rem + 2ch);
422- --font-relative-lineheight-5: calc(1rem + 2.5ch);
423- --font-relative-lineheight-6: calc(1rem + 3ch);
424- </code></pre>
425- </article> -->
426-
427- <article class="font-sizes">
428- <h4>Font Sizes</h4>
429- <Prism lang="css" code={`--font-size-00: .5rem;
430- --font-size-0: .75rem;
431- --font-size-1: 1rem;
432- --font-size-2: 1.1rem;
433- --font-size-3: 1.25rem;
434- --font-size-4: 1.5rem;
435- --font-size-5: 2rem;
436- --font-size-6: 2.5rem;
437- --font-size-7: 3rem;
438- --font-size-8: 3.5rem;`} />
439- <div class="scroll-x-overflow"><div class="font-size-examples">
440- <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-00<span class="token punctuation">)</span></code>
441- <span style="font-size: var(--font-size-00)">Almost before you knew it, we'd touched ground.</span>
442- <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-0<span class="token punctuation">)</span></code>
443- <span style="font-size: var(--font-size-0)">Almost before you knew it, we'd touched ground.</span>
444- <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-1<span class="token punctuation">)</span></code>
445- <span style="font-size: var(--font-size-1)">Almost before you knew it, we'd touched ground.</span>
446- <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-2<span class="token punctuation">)</span></code>
447- <span style="font-size: var(--font-size-2)">Almost before you knew it, we'd touched ground.</span>
448- <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-3<span class="token punctuation">)</span></code>
449- <span style="font-size: var(--font-size-3)">Almost before you knew it, we'd touched ground.</span>
450- <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-4<span class="token punctuation">)</span></code>
451- <span style="font-size: var(--font-size-4)">Almost before you knew it, we'd touched ground.</span>
452- <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-5<span class="token punctuation">)</span></code>
453- <span style="font-size: var(--font-size-5)">Almost before you knew it, we'd touched ground.</span>
454- <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-6<span class="token punctuation">)</span></code>
455- <span style="font-size: var(--font-size-6)">Almost before you knew it, we'd touched ground.</span>
456- <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-7<span class="token punctuation">)</span></code>
457- <span style="font-size: var(--font-size-7)">Almost before you knew it, we'd touched ground.</span>
458- <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-8<span class="token punctuation">)</span></code>
459- <span style="font-size: var(--font-size-8)">Almost before you knew it, we'd touched ground.</span>
460- </div></div>
461- </article>
462-
463- <article class="font-sizes">
464- <h4>Fluid Font Sizes</h4>
465- <Prism lang="css" code={`--font-size-fluid-0: clamp(.75rem, 1.5vw, 1rem);
466- --font-size-fluid-1: clamp(1rem, 2vw, 1.5rem);
467- --font-size-fluid-2: clamp(1.5rem, 3vw, 2.5rem);
468- --font-size-fluid-3: clamp(2rem, 4vw, 3.5rem);`} />
469- <div class="scroll-x-overflow"><div class="font-size-examples">
470- <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-fluid-00<span class="token punctuation">)</span></code>
471- <span style="font-size: var(--font-size-fluid-00)">Almost before you knew it, we'd touched ground.</span>
472- <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-fluid-1<span class="token punctuation">)</span></code>
473- <span style="font-size: var(--font-size-fluid-1)">Almost before you knew it, we'd touched ground.</span>
474- <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-fluid-2<span class="token punctuation">)</span></code>
475- <span style="font-size: var(--font-size-fluid-2)">Almost before you knew it, we'd touched ground.</span>
476- <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-fluid-3<span class="token punctuation">)</span></code>
477- <span style="font-size: var(--font-size-fluid-3)">Almost before you knew it, we'd touched ground.</span>
478- </div></div>
479- </article>
480- </section>
481+ <Typography />
482
483 <section id="easing">
484 <header>
485 diff --git a/site/src/styles/global.css b/site/src/styles/global.css
486index 68a8f3e..4b48922 100644
487--- a/site/src/styles/global.css
488+++ b/site/src/styles/global.css
489 @@ -281,50 +281,6 @@ pre[class*="language-"] {
490 }
491 }
492
493- .font-sizes {
494- display: grid;
495- gap: var(--size-3);
496-
497- & pre {
498- max-inline-size: var(--max-inline-body);
499- }
500- }
501-
502- .font-demo {
503- flex-grow: 1;
504- display: grid;
505- gap: var(--size-2);
506- align-content: center;
507- align-self: stretch;
508- text-align: center;
509-
510- & > .sample-text {
511- margin-inline: auto;
512- }
513- }
514-
515- .letterspacing-demo {
516- inline-size: min(var(--max-inline-body), var(--size-content-2));
517- }
518-
519- .font-size-examples {
520- inline-size: max-content;
521- display: grid;
522- gap: var(--size-2);
523- grid-template-columns: max-content 1fr;
524- align-items: center;
525- justify-items: flex-start;
526-
527- @media (--md-n-below) {
528- grid-template-columns: 1fr;
529- gap: var(--size-1);
530-
531- & > code:not(:first-of-type) {
532- margin-block-start: var(--size-3);
533- }
534- }
535- }
536-
537 .var-examples {
538 display: flex;
539 flex-wrap: wrap;