@cosxai/ui 0.25.0 → 1.0.0-alpha.0

package/src/tokens/typography.css

@@ -0,0 +1,81 @@
+/* COSX 3.0 — typography. One family.
+   Geist for everything. Hierarchy comes from size and the yellow, not from a second face.
+   Headlines 500 (size does the work) · body 400 · UI 500 · labels 12px 500 grey, sentence case ·
+   figures 500–700 tabular. Geist Mono is retired; --font-mono resolves to the sans. */
+:root {
+  --font-sans:  "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-mono:  var(--font-sans);          /* retired in 3.0 — resolves to the sans */
+  --font-serif: var(--font-sans);          /* retired in 3.0 */
+  --font-serif-display: var(--font-sans);  /* retired in 3.0 */
+
+  --w-regular: 400; /* @kind font */
+  --w-medium: 500; /* @kind font */
+  --w-semibold: 600; /* @kind font */
+  --w-bold: 700; /* @kind font */
+
+  /* Screen scale */
+  --size-display: clamp(44px, 7vw, 84px);
+  --size-h1:      clamp(34px, 4.6vw, 56px);
+  --size-h2:      clamp(26px, 3.2vw, 36px);
+  --size-h3:      18px;
+  --size-lede:    20px;
+  --size-body:    15px;
+  --size-small:   13.5px;
+  --size-label:   12px;   /* labels, eyebrows, metadata — 500, sentence case, --text-secondary */
+  --size-mono:    12px;   /* alias of --size-label */
+  --size-mono-sm: 12px;
+
+  /* Product UI scale */
+  --ui-title:     22px;
+  --ui-figure:    32px;
+  --ui-body:      14px;
+
+  /* Social artboard 1080x1350 */
+  --social-headline: 72px;
+  --social-lede:     26px;
+  --social-note:     17px;
+  --social-mono:     18px;
+
+  /* Deck scale, at the 1280x720 artboard */
+  --deck-cover:   76px;
+  --deck-section: 64px;
+  --deck-heading: 46px;
+  --deck-figure:  64px;
+  --deck-lead:    20px;
+  --deck-body:    15px;
+  --deck-mono:    13px;
+  --deck-source:  13px;
+
+  --w-display: 500; /* @kind font */
+  --leading-display: 1.0;  /* @kind other */
+  --leading-heading: 1.08; /* @kind other */
+  --leading-body:    1.6;  /* @kind other */
+
+  --track-display: -.025em;
+  --track-heading: -.015em;
+  --track-mono:     0; /* @kind other */
+  --track-figure:  -.03em;
+
+  /* v2 names kept as aliases */
+  --t-display: 84px; --t-h1: 56px; --t-h2: 36px; --t-h3: 26px; --t-h4: 20px;
+  --t-body-lg: 20px; --t-body: 15px; --t-small: 13.5px; --t-meta: 12px;
+  --lh-tight: 1.0; /* @kind other */
+  --lh-snug: 1.08; /* @kind other */
+  --lh-normal: 1.5; /* @kind other */
+  --lh-relaxed: 1.6; /* @kind other */
+  --track-label: 0; /* @kind other */
+  --track-meta: 0; /* @kind other */
+  --w-light: 400; /* @kind font */
+}
+.tabular { font-variant-numeric: tabular-nums; }
+
+/* The marker: a highlighter stroke behind a phrase. Sits in the lower 60% of the line
+   so ascenders clear it. Works across line breaks. */
+.marker {
+  background: linear-gradient(transparent 40%, var(--marker) 40%, var(--marker) 94%, transparent 94%);
+  -webkit-box-decoration-break: clone; box-decoration-break: clone;
+  padding: 0 .08em; margin: 0 -.08em;
+}
+/* On ink the yellow itself is the highlighter: the marked phrase is set in accent yellow with no
+   band. Nothing light can sit legibly on a yellow band, and ink type vanishes outside it. */
+.ink-mode .marker, .ink .marker, .marker.on-ink { color: var(--yellow-accent); background: none; padding: 0; margin: 0; border-radius: 0; }