richie/ADS3-Design-System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add typography system with Public Sans and 16 type styles

Browse Source 
Self-host Public Sans via @fontsource-variable (weights 100-900, normal
+ italic). Add 6 composed @utility classes in typography.css for styles
that combine multiple properties (body-strong, small-strong, label,
overline, body-link, small-link). Matching text styles created in the
Figma design file via MCP for designer use.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Richie
2026-05-21 10:05:34 +10:00
parent afba95fbaf
commit b57aab01aa
4 changed files with 56 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/styles/global.css
View File

@@ -1,13 +1,12 @@
@import "@fontsource-variable/public-sans";
@import "@fontsource-variable/public-sans/wght-italic.css";
@import "tailwindcss";
@import "../tokens/tokens.css";
@import "./typography.css";
@layer base {
html {
font-size: 15px;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
font-family: var(--font-sans);
line-height: 1.5;
background-color: var(--color-bg);
color: var(--color-text);

41
src/styles/typography.css Normal file
View File

@@ -0,0 +1,41 @@
@utility text-body-strong {
font-size: var(--text-body);
line-height: var(--text-body--line-height);
font-weight: 700;
}
@utility text-small-strong {
font-size: var(--text-small);
line-height: var(--text-small--line-height);
font-weight: 700;
}
@utility text-label {
font-size: var(--text-h6);
line-height: var(--text-h6--line-height);
font-weight: 500;
}
@utility text-overline {
font-size: var(--text-caption);
line-height: var(--text-caption--line-height);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
@utility text-body-link {
font-size: var(--text-body);
line-height: var(--text-body--line-height);
font-weight: 700;
text-decoration-line: underline;
color: var(--color-blue-02);
}
@utility text-small-link {
font-size: var(--text-small);
line-height: var(--text-small--line-height);
font-weight: 700;
text-decoration-line: underline;
color: var(--color-blue-02);
}