typography-colors

name: typography-colors description: Use when styling editor content elements — paragraphs, headings/titles, callout blocks, hashtag mentions, or links — especially when choosing text, background, or border colors for those elements inside the Tiptap editor. Trigger on any color decision for editor-rendered prose content.

Typography Colors

Overview

typography.* is a semantic Tailwind color namespace that provides typed aliases over raw @g4rcez/components design tokens for five editor element types. It exists so editor content styling uses consistent, semantically meaningful class names instead of raw palette values.

When to Use

Use for: Any color applied to editor-rendered content elements:

• Body text / prose → paragraph
• Headings, prominent labels → title
• Callout blocks → callout
• Inline hashtag decorations → hashtag
• Hyperlinks → link

Do NOT use for: UI chrome — toolbars, sidebars, menus, buttons, settings panels. Those should use @g4rcez/components tokens directly (text-foreground, bg-primary, etc.).

Token Table

Each element supports five states:

Class Pattern

{utility}-typography-{element}
{utility}-typography-{element}-{state}

Where {utility} is any Tailwind color utility: text, bg, border, ring, decoration, shadow, etc.

// Default state
<p className="text-typography-paragraph">Body text</p>
<h2 className="text-typography-title">Heading</h2>
<div className="bg-typography-callout border-typography-callout">Callout</div>
<span className="text-typography-hashtag">#tag</span>
<a className="text-typography-link decoration-typography-link">Link</a>

// Semantic states
<div className="bg-typography-callout-warn text-typography-callout-warn">Warning callout</div>
<span className="text-typography-hashtag-danger">Error tag</span>
<a className="text-typography-link-info">Info link</a>

Opacity Modifier

Tailwind opacity modifiers (text-typography-link/50) do NOT work with these colors — the values are CSS variable references (hsla(var(--...))) which are incompatible with Tailwind's opacity modifier mechanism.

Anti-Patterns

// ❌ Raw tokens for editor content
<p className="text-foreground">...</p>
<a className="text-primary">...</a>
<h2 className="text-emphasis">...</h2>

// ✅ Typed typography namespace
<p className="text-typography-paragraph">...</p>
<a className="text-typography-link">...</a>
<h2 className="text-typography-title">...</h2>

Using raw tokens (text-foreground, text-primary) for editor content bypasses the semantic layer and makes future theming or state-specific adjustments harder to apply consistently.