Skip to content

Commit 72dabf3

Browse files
ayussh-2ayussh-2
authored
Merge pull request #21 from ayussh-2/typography
feat: add typography system
2 parents 7aa7c53 + 9bd9fc6 commit 72dabf3

File tree

13 files changed

+1007
-23
lines changed

13 files changed

+1007
-23
lines changed

‎client/bun.lock‎

Lines changed: 96 additions & 0 deletions
Large diffs are not rendered by default.

‎client/components.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "new-york",
4+
"rsc": true,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "",
8+
"css": "src/app/globals.css",
9+
"baseColor": "neutral",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"iconLibrary": "lucide",
14+
"aliases": {
15+
"components": "@/components",
16+
"utils": "@/lib/utils",
17+
"ui": "@/components/ui",
18+
"lib": "@/lib",
19+
"hooks": "@/hooks"
20+
},
21+
"registries": {}
22+
}

‎client/package.json‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,27 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"@radix-ui/react-dropdown-menu": "^2.1.16",
13+
"@radix-ui/react-slot": "^1.2.3",
14+
"class-variance-authority": "^0.7.1",
15+
"clsx": "^2.1.1",
16+
"lucide-react": "^0.544.0",
17+
"next": "15.3.5",
18+
"next-themes": "^0.4.6",
1219
"react": "^19.0.0",
1320
"react-dom": "^19.0.0",
14-
"next": "15.3.5"
21+
"tailwind-merge": "^3.3.1"
1522
},
1623
"devDependencies": {
17-
"typescript": "^5",
24+
"@eslint/eslintrc": "^3",
25+
"@tailwindcss/postcss": "^4",
1826
"@types/node": "^20",
1927
"@types/react": "^19",
2028
"@types/react-dom": "^19",
21-
"@tailwindcss/postcss": "^4",
22-
"tailwindcss": "^4",
2329
"eslint": "^9",
2430
"eslint-config-next": "15.3.5",
25-
"@eslint/eslintrc": "^3"
31+
"tailwindcss": "^4",
32+
"tw-animate-css": "^1.4.0",
33+
"typescript": "^5"
2634
}
2735
}

‎client/src/app/(dev)/typography/page.tsx‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
import React from "react";
2+
3+
import {
4+
Blockquote,
5+
H1,
6+
H2,
7+
H3,
8+
H4,
9+
Large,
10+
Lead,
11+
Muted,
12+
P,
13+
Small,
14+
} from "@/components/ui/typography";
15+
16+
export default function Page() {
17+
return (
18+
<div className="container mx-auto px-4 py-8 max-w-4xl">
19+
<H1>Typography System</H1>
20+
21+
<Lead className="mt-4">
22+
A comprehensive typography system using Geist Sans as the
23+
primary font family, following the design guidelines from
24+
DESIGN.md.
25+
</Lead>
26+
27+
<div className="space-y-8 mt-8">
28+
<section>
29+
<H2>Headings</H2>
30+
<P>Typography hierarchy with Geist Sans font family.</P>
31+
32+
<div className="space-y-4 mt-4">
33+
<H1>H1 Heading - Main page titles</H1>
34+
<H2>H2 Heading - Section headers</H2>
35+
<H3>H3 Heading - Subsection headers</H3>
36+
<H4>H4 Heading - Component headers</H4>
37+
</div>
38+
</section>
39+
40+
<section>
41+
<H2>Body Text</H2>
42+
<P>Various body text styles for different content types.</P>
43+
44+
<div className="space-y-4 mt-4">
45+
<div>
46+
<H4>Paragraph</H4>
47+
<P>
48+
This is a standard paragraph with proper line
49+
height and spacing. It uses the leading-7 class
50+
for comfortable reading. The typography system
51+
ensures consistent spacing between paragraphs
52+
with the [&:not(:first-child)]:mt-6 utility.
53+
</P>
54+
</div>
55+
56+
<div>
57+
<H4>Lead Text</H4>
58+
<Lead>
59+
This is lead text, perfect for introductions or
60+
highlighted content. It uses a larger font size
61+
with muted foreground color.
62+
</Lead>
63+
</div>
64+
65+
<div>
66+
<H4>Large Text</H4>
67+
<Large>
68+
This is large text for emphasized content. It
69+
combines larger size with semibold font weight
70+
for better hierarchy.
71+
</Large>
72+
</div>
73+
74+
<div>
75+
<H4>Small Text</H4>
76+
<Small>
77+
This is small text for metadata, labels, or
78+
secondary information. It uses smaller font size
79+
with medium weight.
80+
</Small>
81+
</div>
82+
83+
<div>
84+
<H4>Muted Text</H4>
85+
<Muted>
86+
This is muted text for secondary information or
87+
less important content. It uses small font size
88+
with muted foreground color.
89+
</Muted>
90+
</div>
91+
</div>
92+
</section>
93+
94+
<section>
95+
<H2>Blockquote</H2>
96+
<P>Special formatting for quoted content.</P>
97+
98+
<Blockquote className="mt-4">
99+
"This is a blockquote example. It provides special
100+
styling for quoted text with left border and italic
101+
formatting. Perfect for highlighting important
102+
statements or citations."
103+
</Blockquote>
104+
</section>
105+
106+
<section>
107+
<H2>Responsive Typography</H2>
108+
<P>
109+
The typography system includes responsive font sizing.
110+
Headings automatically adjust size based on screen size
111+
(e.g., H1 scales from text-4xl on mobile to text-5xl on
112+
large screens).
113+
</P>
114+
115+
<div className="mt-4 p-4 bg-muted rounded-lg">
116+
<H4>Responsive Example</H4>
117+
<P>
118+
Resize your browser window to see how the H1 heading
119+
above changes size. The system uses Tailwind's
120+
responsive prefixes (sm:, md:, lg:, xl:) to provide
121+
optimal readability across devices.
122+
</P>
123+
</div>
124+
</section>
125+
126+
<section>
127+
<H2>Font Families</H2>
128+
<P>
129+
The system utilizes both Geist Sans and Inter fonts as
130+
specified in the design guidelines.
131+
</P>
132+
133+
<div className="space-y-4 mt-4">
134+
<div>
135+
<H4 className="font-geist">Geist Sans (Primary)</H4>
136+
<P className="font-geist">
137+
This text uses Geist Sans, the primary font
138+
family for headings and body text throughout the
139+
application.
140+
</P>
141+
</div>
142+
143+
<div>
144+
<H4 className="font-inter">Inter (Secondary)</H4>
145+
<P className="font-inter">
146+
This text uses Inter, which can be used for
147+
specific UI elements or as an alternative font
148+
family.
149+
</P>
150+
</div>
151+
</div>
152+
</section>
153+
154+
<section>
155+
<H2>Theme Switching</H2>
156+
<P>
157+
The typography system supports both light and dark
158+
themes. Use the theme toggle button in the top-right
159+
corner of the screen to switch between themes. The
160+
system automatically adapts colors and maintains proper
161+
contrast ratios for accessibility.
162+
</P>
163+
164+
<div className="mt-4 space-y-2">
165+
<Muted>• Light theme: Clean, bright appearance</Muted>
166+
<Muted>
167+
• Dark theme: Easy on the eyes for low-light
168+
environments
169+
</Muted>
170+
<Muted>
171+
• System theme: Automatically matches your OS
172+
preference
173+
</Muted>
174+
<Muted>
175+
• Persistent: Your theme choice is remembered
176+
</Muted>
177+
<Muted>• Global access: Available on every page</Muted>
178+
</div>
179+
</section>
180+
181+
<section>
182+
<H2>Accessibility</H2>
183+
<P>
184+
The typography system follows accessibility guidelines
185+
with proper contrast ratios, minimum font sizes, and
186+
semantic HTML elements.
187+
</P>
188+
189+
<div className="mt-4 space-y-2">
190+
<Muted>• Minimum font size: 14px (0.875rem)</Muted>
191+
<Muted>• Line height: 1.5 minimum for body text</Muted>
192+
<Muted>• Proper heading hierarchy maintained</Muted>
193+
<Muted>• Semantic HTML elements used</Muted>
194+
<Muted>• Font display: swap for optimal loading</Muted>
195+
<Muted>
196+
• Theme switching respects user preferences
197+
</Muted>
198+
</div>
199+
</section>
200+
</div>
201+
</div>
202+
);
203+
}

0 commit comments

Comments
 (0)