Skip to content

Commit 9b8ca7f

Browse files
1aron1aron
committed
Docs: Add examples for text-size 
1 parent d822f66 commit 9b8ca7f

File tree

7 files changed

+74
-95
lines changed

7 files changed

+74
-95
lines changed

‎site/app/[locale]/guide/colors/components/FrameHeirs.tsx‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎site/app/[locale]/guide/colors/components/TextHeirs.tsx‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎site/app/[locale]/guide/fonts/page.tsx‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎site/app/[locale]/reference/text-size/components/BodyText.mdx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
Use tokens like `text:sm`, `text:md`, and `text:lg` to style body text, descriptions, and paragraphs.
2+
<Demo $py={0}>
3+
<DemoPanel className="flex flex-col gap:8x w:full">
4+
<div className="w:full">
5+
<DemoLabel>text:sm</DemoLabel>
6+
<DemoP className="font:regular text:sm">Design is not just about aesthetics—it’s about communication. Proper font sizes and spacing help present information clearly and improve usability.</DemoP>
7+
</div>
8+
<div className="w:full">
9+
<DemoLabel>text:md</DemoLabel>
10+
<DemoP className="font:regular text:md">Design is not just about aesthetics—it’s about communication. Proper font sizes and spacing help present information clearly and improve usability.</DemoP>
11+
</div>
12+
<div className="w:full">
13+
<DemoLabel>text:lg</DemoLabel>
14+
<DemoP className="font:regular text:lg">Design is not just about aesthetics—it’s about communication. Proper font sizes and spacing help present information clearly and improve usability.</DemoP>
15+
</div>
16+
</DemoPanel>
17+
</Demo>
18+
```html
19+
<!-- @MARK text:sm -->
20+
<p class="text:sm">Design is not just about aesthetics—it’s...</p>
21+
<!-- @MARK text:md -->
22+
<p class="text:md">Design is not just about aesthetics—it’s...</p>
23+
<!-- @MARK text:lg -->
24+
<p class="text:lg">Design is not just about aesthetics—it’s...</p>
25+
```

‎site/app/[locale]/reference/text-size/components/Headings.mdx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
Use tokens like `text:lg`, `text:xl`, and `text:2xl` to style article headings.
2+
<Demo $py={0}>
3+
<DemoPanel className="flex flex-col gap:8x w:full">
4+
<div className="w:full">
5+
<DemoLabel>text:2xl <div className="ml:auto">heading 2</div></DemoLabel>
6+
<DemoP className="text:pretty font:medium text:2xl">Shifting Dimensions Unfold Gently Beneath Layers of Balanced Design.</DemoP>
7+
</div>
8+
<div className="w:full">
9+
<DemoLabel>text:xl <div className="ml:auto">heading 3</div></DemoLabel>
10+
<DemoP className="text:pretty font:medium text:xl">Shifting Dimensions Unfold Gently Beneath Layers of Balanced Design.</DemoP>
11+
</div>
12+
<div className="w:full">
13+
<DemoLabel>text:lg <div className="ml:auto">heading 4</div></DemoLabel>
14+
<DemoP className="text:pretty font:medium text:lg">Shifting Dimensions Unfold Gently Beneath Layers of Balanced Design.</DemoP>
15+
</div>
16+
</DemoPanel>
17+
</Demo>
18+
```html
19+
<!-- @MARK text:2xl -->
20+
<h2 class="text:2xl">Design is not just about aesthetics—it’s...</h2>
21+
<!-- @MARK text:xl -->
22+
<h3 class="text:xl">Design is not just about aesthetics—it’s...</h3>
23+
<!-- @MARK text:lg -->
24+
<h4 class="text:lg">Design is not just about aesthetics—it’s...</h4>
25+
```

‎site/app/[locale]/reference/text-size/components/PageTitles.mdx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
Use tokens like `text:3xl` and `text:4xl` to style page titles and hero sections.
2+
<Demo $py={0}>
3+
<DemoPanel className="flex flex-col gap:8x w:full">
4+
<div className="w:full">
5+
<DemoLabel>text:4xl</DemoLabel>
6+
<DemoP className="text:pretty text:4xl">Designing for clarity and consistency across every platform.</DemoP>
7+
</div>
8+
<div className="w:full">
9+
<DemoLabel>text:3xl</DemoLabel>
10+
<DemoP className="text:pretty text:3xl">Designing for clarity and consistency across every platform.</DemoP>
11+
</div>
12+
</DemoPanel>
13+
</Demo>
14+
```html
15+
<!-- @MARK text:4xl -->
16+
<h1 class="text:4xl">Designing for clarity and consistency...</h1>
17+
<!-- @MARK text:3xl -->
18+
<h1 class="text:3xl">Designing for clarity and consistency...</h1>
19+
```

‎site/app/[locale]/reference/text-size/content.mdx‎

Lines changed: 5 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -3,59 +3,14 @@
33

44
## Examples
55
### Body text
6-
Use the predefined text size tokens like `text:sm`, `text:md`, and `text:lg` to set the body text of an element.
7-
<Demo $py={0}>
8-
<DemoPanel className="flex flex-col gap:8x w:full">
9-
<div className="w:full">
10-
<DemoLabel>text:sm</DemoLabel>
11-
<DemoP className="text:sm">Design is not just about aesthetics—it’s about communication. Proper font sizes and spacing help present information clearly and improve usability.</DemoP>
12-
</div>
13-
<div className="w:full">
14-
<DemoLabel>text:md</DemoLabel>
15-
<DemoP className="text:md">Design is not just about aesthetics—it’s about communication. Proper font sizes and spacing help present information clearly and improve usability.</DemoP>
16-
</div>
17-
<div className="w:full">
18-
<DemoLabel>text:lg</DemoLabel>
19-
<DemoP className="text:lg">Design is not just about aesthetics—it’s about communication. Proper font sizes and spacing help present information clearly and improve usability.</DemoP>
20-
</div>
21-
</DemoPanel>
22-
</Demo>
23-
```html
24-
<!-- @MARK text:sm -->
25-
<p class="text:sm">Design is not just about aesthetics—it’s...</p>
26-
<!-- @MARK text:md -->
27-
<p class="text:md">Design is not just about aesthetics—it’s...</p>
28-
<!-- @MARK text:lg -->
29-
<p class="text:lg">Design is not just about aesthetics—it’s...</p>
30-
```
6+
<BodyText />
317
If you don’t want to include line height, use the [`font:<size>`](/reference/font-size).
328

339
### Headings
34-
Use the predefined text size tokens like `text:xl`, `text:2xl`, and `text:3xl` to set the headings of an element.
35-
<Demo $py={0}>
36-
<DemoPanel className="flex flex-col gap:8x w:full">
37-
<div className="w:full">
38-
<DemoLabel>text:xl</DemoLabel>
39-
<DemoP className="text:pretty font:medium text:xl">Shifting Dimensions Unfold Gently Beneath Layers of Balanced Design.</DemoP>
40-
</div>
41-
<div className="w:full">
42-
<DemoLabel>text:2xl</DemoLabel>
43-
<DemoP className="text:pretty font:medium text:2xl">Shifting Dimensions Unfold Gently Beneath Layers of Balanced Design.</DemoP>
44-
</div>
45-
<div className="w:full">
46-
<DemoLabel>text:3xl</DemoLabel>
47-
<DemoP className="text:pretty font:medium text:3xl">Shifting Dimensions Unfold Gently Beneath Layers of Balanced Design.</DemoP>
48-
</div>
49-
</DemoPanel>
50-
</Demo>
51-
```html
52-
<!-- @MARK text:xl -->
53-
<h1 class="text:xl">Design is not just about aesthetics—it’s...</h1>
54-
<!-- @MARK text:2xl -->
55-
<h1 class="text:2xl">Design is not just about aesthetics—it’s...</h1>
56-
<!-- @MARK text:3xl -->
57-
<h1 class="text:3xl">Design is not just about aesthetics—it’s...</h1>
58-
```
10+
<Headings />
11+
12+
### Page titles, hero sections
13+
<PageTitles />
5914

6015
---
6116

0 commit comments

Comments
 (0)