feat(design-system): add type scale, spacing rhythm and font tokens
Apply the Phase 2 warm-premium base additively (no existing page changes): - tailwind.config.ts: add fontSize roles (display, h1, h2, h3, title, body-lg, body, small, caption, overline) with line-height/tracking/weight; add fontFamily (sans/latin = Museo, arabic = Dubai); add section-sm/section-lg spacing rhythm. - globals.css: add Arabic-safe .eyebrow utility (uppercase + tracking on Latin, neutralised for html[lang="ar"]). Colors and fonts unchanged. Verified: tsc clean, eslint clean, tailwind build generates the new utilities with correct values.
This commit is contained in:
@@ -168,6 +168,18 @@ html[lang="ar"] {
|
|||||||
font-family: var(--font-dubai), sans-serif;
|
font-family: var(--font-dubai), sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Eyebrow / overline label. Latin gets uppercase + tracking; Arabic keeps
|
||||||
|
normal case and spacing so joined letterforms are not broken. */
|
||||||
|
.eyebrow {
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.14em;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[lang="ar"] .eyebrow {
|
||||||
|
text-transform: none;
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
* {
|
* {
|
||||||
@apply border-border;
|
@apply border-border;
|
||||||
|
|||||||
@@ -74,6 +74,23 @@ const config: Config = {
|
|||||||
ring: "hsl(var(--sidebar-ring))",
|
ring: "hsl(var(--sidebar-ring))",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ["var(--font-museo)", "Arial", "Helvetica", "sans-serif"],
|
||||||
|
latin: ["var(--font-museo)", "Arial", "Helvetica", "sans-serif"],
|
||||||
|
arabic: ["var(--font-dubai)", "Tahoma", "Arial", "sans-serif"],
|
||||||
|
},
|
||||||
|
fontSize: {
|
||||||
|
display: ["clamp(2.75rem, 8vw, 5.5rem)", { lineHeight: "0.95", letterSpacing: "-0.03em", fontWeight: "900" }],
|
||||||
|
h1: ["clamp(2.25rem, 5vw, 3.5rem)", { lineHeight: "1.05", letterSpacing: "-0.02em", fontWeight: "700" }],
|
||||||
|
h2: ["clamp(1.75rem, 3.5vw, 2.5rem)", { lineHeight: "1.1", letterSpacing: "-0.015em", fontWeight: "700" }],
|
||||||
|
h3: ["1.375rem", { lineHeight: "1.2", letterSpacing: "-0.01em", fontWeight: "700" }],
|
||||||
|
title: ["1.125rem", { lineHeight: "1.3", fontWeight: "500" }],
|
||||||
|
"body-lg": ["1.125rem", { lineHeight: "1.7", fontWeight: "400" }],
|
||||||
|
body: ["1rem", { lineHeight: "1.7", fontWeight: "400" }],
|
||||||
|
small: ["0.875rem", { lineHeight: "1.6" }],
|
||||||
|
caption: ["0.8125rem", { lineHeight: "1.5", fontWeight: "500" }],
|
||||||
|
overline: ["0.75rem", { lineHeight: "1.4", letterSpacing: "0.14em", fontWeight: "500" }],
|
||||||
|
},
|
||||||
borderRadius: {
|
borderRadius: {
|
||||||
sm: "var(--radius-nested)",
|
sm: "var(--radius-nested)",
|
||||||
md: "var(--radius-nested)",
|
md: "var(--radius-nested)",
|
||||||
@@ -106,6 +123,8 @@ const config: Config = {
|
|||||||
},
|
},
|
||||||
spacing: {
|
spacing: {
|
||||||
section: "var(--section-space)",
|
section: "var(--section-space)",
|
||||||
|
"section-sm": "3rem",
|
||||||
|
"section-lg": "8rem",
|
||||||
content: "var(--content-space)",
|
content: "var(--content-space)",
|
||||||
},
|
},
|
||||||
backdropBlur: {
|
backdropBlur: {
|
||||||
|
|||||||
Reference in New Issue
Block a user