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

10
package-lock.json generated
View File

@@ -8,6 +8,7 @@
"name": "sdc-frontend",
"version": "0.0.0",
"dependencies": {
"@fontsource-variable/public-sans": "^5.2.7",
"@tailwindcss/vite": "^4.3.0",
"clsx": "^2.1.1",
"react": "^19.2.6",
@@ -915,6 +916,15 @@
"node": "^20.19.0 || ^22.13.0 || >=24"
}
},
"node_modules/@fontsource-variable/public-sans": {
"version": "5.2.7",
"resolved": "https://registry.npmjs.org/@fontsource-variable/public-sans/-/public-sans-5.2.7.tgz",
"integrity": "sha512-4mvade2J3slKkvwRkS+p8T3szet/0vhWoSnuUJTVU81Uo2pRpSZY/Y8bSLRqpSwzIPxjVmRJ53oq6JKP/l/PSg==",
"license": "OFL-1.1",
"funding": {
"url": "https://github.com/sponsors/ayuhito"
}
},
"node_modules/@humanfs/core": {
"version": "0.19.2",
"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",

1
package.json
View File

@@ -12,6 +12,7 @@
"build-storybook": "storybook build"
},
"dependencies": {
"@fontsource-variable/public-sans": "^5.2.7",
"@tailwindcss/vite": "^4.3.0",
"clsx": "^2.1.1",
"react": "^19.2.6",

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);
}