Skip to content

Commit 989722e

Browse files
fellipeutakafellipeutaka
committed
feat: add typography
1 parent 2c3bdc0 commit 989722e

11 files changed

+232
-24
lines changed

‎apps/www/src/config/docs.ts

+4
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,10 @@ export const docsConfig: DocsConfig = {
4545
title: "CLI",
4646
href: "/docs/cli",
4747
},
48+
{
49+
title: "Typography",
50+
href: "/docs/typography",
51+
},
4852
],
4953
},
5054
{

‎apps/www/src/content/docs/typography.mdx

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
title: Typography
3+
description: Styles for headings, paragraphs, lists...etc
4+
---
5+
6+
<ComponentPreview name="typography-demo" />
7+
8+
## Installation
9+
10+
```css title="typography.css"
11+
@utility heading-1 {
12+
@apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
13+
}
14+
15+
@utility heading-2 {
16+
@apply scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0;
17+
}
18+
19+
@utility heading-3 {
20+
@apply scroll-m-20 text-2xl font-semibold tracking-tight;
21+
}
22+
23+
@utility heading-4 {
24+
@apply scroll-m-20 text-xl font-semibold tracking-tight;
25+
}
26+
27+
@utility p {
28+
@apply leading-7 not-first:mt-6;
29+
}
30+
31+
@utility blockquote {
32+
@apply mt-6 border-l-2 pl-6 italic;
33+
}
34+
```
35+
36+
```css title="globals.css"{2}
37+
@import "tailwindcss";
38+
@import "./typography.css";
39+
```
40+
41+
## Usage
42+
43+
### h1
44+
45+
<ComponentPreview name="typography-h1" />
46+
47+
### h2
48+
49+
<ComponentPreview name="typography-h2" />
50+
51+
### h3
52+
53+
<ComponentPreview name="typography-h3" />
54+
55+
### h4
56+
57+
<ComponentPreview name="typography-h4" />
58+
59+
### p
60+
61+
<ComponentPreview name="typography-p" />
62+
63+
### blockquote
64+
65+
<ComponentPreview name="typography-blockquote" />

‎apps/www/src/demos/typography-blockquote.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default function TypographyBlockquote() {
2+
return (
3+
<blockquote className="blockquote">
4+
"After all," he said, "everyone enjoys a good joke, so it's only fair that
5+
they should pay for the privilege."
6+
</blockquote>
7+
);
8+
}

‎apps/www/src/demos/typography-demo.tsx

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
export default function TypographyDemo() {
2+
return (
3+
<div>
4+
<h1 className="heading-1">The Joke Tax Chronicles</h1>
5+
<p className="p">
6+
Once upon a time, in a far-off land, there was a very lazy king who
7+
spent all day lounging on his throne. One day, his advisors came to him
8+
with a problem: the kingdom was running out of money.
9+
</p>
10+
<h2 className="heading-2 mt-10">The King's Plan</h2>
11+
<p className="p">
12+
The king thought long and hard, and finally came up with{" "}
13+
<a
14+
href="##"
15+
className="font-medium text-primary underline underline-offset-4"
16+
>
17+
a brilliant plan
18+
</a>
19+
: he would tax the jokes in the kingdom.
20+
</p>
21+
<blockquote className="blockquote">
22+
"After all," he said, "everyone enjoys a good joke, so it's only fair
23+
that they should pay for the privilege."
24+
</blockquote>
25+
<h3 className="heading-3 mt-8">The Joke Tax</h3>
26+
<p className="p">
27+
The king's subjects were not amused. They grumbled and complained, but
28+
the king was firm:
29+
</p>
30+
<ul className="my-6 ml-6 list-disc [&>li]:mt-2">
31+
<li>1st level of puns: 5 gold coins</li>
32+
<li>2nd level of jokes: 10 gold coins</li>
33+
<li>3rd level of one-liners : 20 gold coins</li>
34+
</ul>
35+
<p className="p">
36+
As a result, people stopped telling jokes, and the kingdom fell into a
37+
gloom. But there was one person who refused to let the king's
38+
foolishness get him down: a court jester named Jokester.
39+
</p>
40+
<h3 className="heading-3 mt-8">Jokester's Revolt</h3>
41+
<p className="p">
42+
Jokester began sneaking into the castle in the middle of the night and
43+
leaving jokes all over the place: under the king's pillow, in his soup,
44+
even in the royal toilet. The king was furious, but he couldn't seem to
45+
stop Jokester.
46+
</p>
47+
<p className="p">
48+
And then, one day, the people of the kingdom discovered that the jokes
49+
left by Jokester were so funny that they couldn't help but laugh. And
50+
once they started laughing, they couldn't stop.
51+
</p>
52+
<h3 className="heading-3 mt-8">The People's Rebellion</h3>
53+
<p className="p">
54+
The people of the kingdom, feeling uplifted by the laughter, started to
55+
tell jokes and puns again, and soon the entire kingdom was in on the
56+
joke.
57+
</p>
58+
<div className="my-6 w-full overflow-y-auto">
59+
<table className="w-full">
60+
<thead>
61+
<tr className="m-0 border-t p-0 even:bg-muted">
62+
<th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
63+
King's Treasury
64+
</th>
65+
<th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
66+
People's happiness
67+
</th>
68+
</tr>
69+
</thead>
70+
<tbody>
71+
<tr className="m-0 border-t p-0 even:bg-muted">
72+
<td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
73+
Empty
74+
</td>
75+
<td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
76+
Overflowing
77+
</td>
78+
</tr>
79+
<tr className="m-0 border-t p-0 even:bg-muted">
80+
<td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
81+
Modest
82+
</td>
83+
<td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
84+
Satisfied
85+
</td>
86+
</tr>
87+
<tr className="m-0 border-t p-0 even:bg-muted">
88+
<td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
89+
Full
90+
</td>
91+
<td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
92+
Ecstatic
93+
</td>
94+
</tr>
95+
</tbody>
96+
</table>
97+
</div>
98+
<p className="p">
99+
The king, seeing how much happier his subjects were, realized the error
100+
of his ways and repealed the joke tax. Jokester was declared a hero, and
101+
the kingdom lived happily ever after.
102+
</p>
103+
<p className="p">
104+
The moral of the story is: never underestimate the power of a good laugh
105+
and always be careful of bad ideas.
106+
</p>
107+
</div>
108+
);
109+
}

‎apps/www/src/demos/typography-h1.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default function TypographyH1() {
2+
return (
3+
<h1 className="heading-1">Taxing Laughter: The Joke Tax Chronicles</h1>
4+
);
5+
}

‎apps/www/src/demos/typography-h2.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function TypographyH2() {
2+
return <h2 className="heading-2">The People of the Kingdom</h2>;
3+
}

‎apps/www/src/demos/typography-h3.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function TypographyH3() {
2+
return <h3 className="heading-3">The Joke Tax</h3>;
3+
}

‎apps/www/src/demos/typography-h4.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function TypographyH4() {
2+
return <h4 className="heading-4">People stopped telling jokes</h4>;
3+
}

‎apps/www/src/demos/typography-p.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default function TypographyP() {
2+
return (
3+
<p className="p">
4+
The king, seeing how much happier his subjects were, realized the error of
5+
his ways and repealed the joke tax.
6+
</p>
7+
);
8+
}

‎apps/www/src/styles/globals.css

+1-24
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import "tailwindcss";
2+
@import "./typography.css";
23

34
@plugin "tailwindcss-motion";
45

@@ -68,30 +69,6 @@
6869
@apply border-primary/70;
6970
}
7071

71-
@utility heading-1 {
72-
@apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
73-
}
74-
75-
@utility heading-2 {
76-
@apply scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0;
77-
}
78-
79-
@utility heading-3 {
80-
@apply scroll-m-20 text-2xl font-semibold tracking-tight;
81-
}
82-
83-
@utility heading-4 {
84-
@apply scroll-m-20 text-xl font-semibold tracking-tight;
85-
}
86-
87-
@utility p {
88-
@apply leading-7 not-first:mt-6;
89-
}
90-
91-
@utility blockquote {
92-
@apply mt-6 border-l-2 pl-6 italic;
93-
}
94-
9572
@layer base {
9673
*,
9774
::after,

‎apps/www/src/styles/typography.css

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@utility heading-1 {
2+
@apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
3+
}
4+
5+
@utility heading-2 {
6+
@apply scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0;
7+
}
8+
9+
@utility heading-3 {
10+
@apply scroll-m-20 text-2xl font-semibold tracking-tight;
11+
}
12+
13+
@utility heading-4 {
14+
@apply scroll-m-20 text-xl font-semibold tracking-tight;
15+
}
16+
17+
@utility p {
18+
@apply leading-7 not-first:mt-6;
19+
}
20+
21+
@utility blockquote {
22+
@apply mt-6 border-l-2 pl-6 italic;
23+
}

0 commit comments

Comments
 (0)