{
  "name": "Typography",
  "type": "component",
  "description": "Renders text in one of the token layer's 42 typography roles, on any of ten HTML elements.",
  "export": "@gtmi/strix-react/atoms/typography",
  "path": "@gtmi/strix-react/atoms/typography",
  "figma": null,
  "figmaAbsent": "NO SINGLE NODE. Figma has no `Typography` component -- it has composite TYPE STYLES (Paragraph/footnote, Paragraph/small, Paragraph/medium-semibold, Headings/h6, Paragraph/code-snippet and others) that every other node applies. So this component ports the type SYSTEM rather than a drawing, which is why no binding names it as its `component` and why it is in atoms/ on the primitive basis. Verified across all 62 Dev-Mode-read bindings: none maps to Typography. Two traps its variants must respect, both recorded in the bindings: Figma's Headings/h6 measures 16/24 while Strix's h6 is 20/26 (the two files' heading scales are offset), and token FALLBACKS drift from their names -- Scenario-card binds font/size/small to 14px where everywhere else it is 16.",
  "props": [
    {
      "name": "variant",
      "type": "body-l | body-l-semibold | body-m-regular | body-m-medium | body-m-semibold | body-s | body-s-medium | body-s-semibold | body-xs | body-xs-semibold | cta-regular-l | cta-regular-m | cta-regular-s | cta-medium-xs | cta-strong-l | cta-strong-m | cta-strong-s | d1 | d2 | d3 | d4 | d5 | d6 | d7 | eyebrow-l | eyebrow-l-semibold | eyebrow-s-retina | eyebrow-s-semibold | h1 | h2 | h3 | h4 | h5 | h6 | h7 | mono-l-semibold | mono-m-medium | mono-m-regular | mono-m-semibold | mono-s-regular | subhead-l | subhead-m | subhead-s",
      "default": "body-m-regular",
      "description": "Typography role. Sets family, size, line height, tracking and weight together; eyebrow roles also uppercase."
    },
    {
      "name": "as",
      "type": "h1 | h2 | h3 | h4 | h5 | h6 | span | label | p | div | ul | ol | li | dl | dt | dd | code | pre | blockquote | figcaption | small | strong | em",
      "default": "span",
      "description": "HTML element to render. Independent of `variant`, so document semantics and visual role can differ. INLINE BY DEFAULT: a span takes no vertical margin, so `mb-*`/`w-*`/block-layout utilities passed through className do nothing until `as` names a block element -- a dev-only console warning fires on exactly that combination. Lists, code, pre and blockquote are in the list because their absence was a defect: a styled <ul> was expressible only as render={<ul />} while a styled <p> was as=\"p\", so the narrower seam was also the prettier one and the choice turned on an allowlist the caller could not see."
    },
    {
      "name": "gradient",
      "type": "blue-primary | blue-secondary | blue-tertiary | blue-quaternary | blue-balance | blue-card-active | white-primary | white-on-surface | mint-active | mint-primary | lime-primary | lavender-primary | surface-fade | null",
      "default": "null",
      "description": "Paint the text with a --gradients-* token clipped to the glyphs. Display roles also gain descender padding."
    },
    {
      "name": "className",
      "type": "string",
      "description": "Merged through cn(), so a caller's color or spacing always wins over the role defaults."
    }
  ],
  "ai_tags": ["typography", "text", "heading", "label", "primitive"],
  "since": "0.2.0",
  "tokens_used": [
    "--font-sans",
    "--font-display",
    "--font-mono",
    "--text-size-*",
    "--leading-height-*",
    "--tracking-*",
    "--font-weight-*",
    "--gradients-*"
  ],
  "notes": "Color is not a variant: pass a --color-text-* utility such as text-text-secondary through className. Uses `as` rather than Base UI's `render` prop, the one documented exception to that convention, because label, help-text and spinner depend on `as`. Font families are translated from maker-ds, which names Twilio Sans Text `--font-serif`: upstream `font-serif` is `font-sans` here and upstream `font-sans` is `font-display`. Never copy a font utility across from maker-ds verbatim.",
  "default_roles": {
    "note": "cr-web-demo, the primary design authority, uses about five sizes and three weights across its whole codebase — text-sm in 41 places, text-xs in 11, text-xl in 4, text-base in 3, text-2xl in 2, and only four headings (two h2, two h3). Reach for these first; the other 37 roles are maker-ds vocabulary that the design does not exercise.",
    "body text (14px)": "body-s, body-s-medium, body-s-semibold — the workhorse. cr-web-demo's text-sm.",
    "secondary and help text (12px)": "body-xs, body-xs-semibold. cr-web-demo's text-xs.",
    "emphasis in a paragraph (16px)": "body-m-regular, body-m-medium, body-m-semibold. cr-web-demo's text-base.",
    "section heading (20px)": "h5, or subhead-s at the same size. cr-web-demo's text-xl.",
    "panel or page heading (26px+)": "h4 (26px) or subhead-m (22px). cr-web-demo's text-2xl (24px) sits between the two; pick by role, not by px.",
    "control labels": "cta-regular-s and cta-strong-s (both 14px), which is what Button and Label already use.",
    "code and identifiers": "mono-s-regular, mono-m-regular."
  }
}