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;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
* {
|
||||
@apply border-border;
|
||||
|
||||
@@ -74,6 +74,23 @@ const config: Config = {
|
||||
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: {
|
||||
sm: "var(--radius-nested)",
|
||||
md: "var(--radius-nested)",
|
||||
@@ -106,6 +123,8 @@ const config: Config = {
|
||||
},
|
||||
spacing: {
|
||||
section: "var(--section-space)",
|
||||
"section-sm": "3rem",
|
||||
"section-lg": "8rem",
|
||||
content: "var(--content-space)",
|
||||
},
|
||||
backdropBlur: {
|
||||
|
||||
Reference in New Issue
Block a user