Skip to content

[Theme typography/contracts] Investigate and add serializable typography scale contracts #30

Description

@artiphishle

Summary

Investigate common typography scale models and add serializable typography scale contracts to @ankhorage/contracts.

Typography should be treated as a sibling system to spacing. It should not be folded into the spacing issue because typography has additional concerns: type scale model, font family, line height, font weight, letter spacing, responsive/fluid behavior, accessibility scaling, locale/script support, and semantic text roles.

Architecture

  • @ankhorage/contracts owns serializable typography scale config and preset names.
  • @ankhorage/zora owns semantic text recipes and component interpretation.
  • @ankhorage/surface owns low-level rendered text primitives.
  • ankhorage4 / Studio can later expose typography preset and density controls in the theme creator.

Research scope

Investigate at least these models/presets:

  • Ankhorage default curated product-app scale
  • Material 3 type roles
  • Tailwind font-size scale
  • Carbon productive and expressive type sets
  • Atlassian typography scale
  • GOV.UK fixed/responsive type scale
  • modular type scale
  • fluid/responsive type scale, e.g. Utopia-like model
  • custom scale

Contract scope

Add serializable types such as:

  • ThemeTypographyPreset
  • ThemeTypographyDensity
  • ThemeTypographyScaleModel
  • ThemeTypographyScaleConfig
  • custom typography token shape

The contract should support fixed, modular, and later fluid models without requiring runtime functions in manifests.

Suggested shape

export type ThemeTypographyPreset =
  | 'ankhorage'
  | 'material3'
  | 'tailwind'
  | 'carbon-productive'
  | 'carbon-expressive'
  | 'atlassian'
  | 'govuk'
  | 'modular'
  | 'fluid'
  | 'custom';

export type ThemeTypographyDensity = 'compact' | 'default' | 'comfortable';

export type ThemeTypographyScaleModel = 'fixed' | 'modular' | 'fluid';

export interface ThemeTypographyTokenConfig {
  fontSize: number;
  lineHeight: number;
  letterSpacing?: number;
  fontWeight?: number | string;
}

export interface ThemeTypographyScaleConfig {
  preset: ThemeTypographyPreset;
  model?: ThemeTypographyScaleModel;
  density?: ThemeTypographyDensity;
  baseSize?: number;
  ratio?: number;
  minViewport?: number;
  maxViewport?: number;
  minBaseSize?: number;
  maxBaseSize?: number;
  minRatio?: number;
  maxRatio?: number;
  tokens?: Record<string, ThemeTypographyTokenConfig>;
}

Final names may differ if implementation finds a cleaner contract shape.

Acceptance criteria

  • @ankhorage/contracts exposes serializable typography scale config types.
  • ThemeConfig can carry typography scale selection without importing ZORA or Surface.
  • Supported typography presets/models are explicit and documented.
  • Fixed, modular, fluid, and custom models are representable as data.
  • Tests cover representative preset, modular, fluid, and custom configs.
  • README/docs explain the boundary between contracts and ZORA recipes.
  • bun run build, bun run lint:fix, and bun run test pass.

Non-goals

  • Do not implement ZORA Text or Heading recipes in this repo.
  • Do not migrate ZORA components in this issue.
  • Do not add non-serializable functions or callbacks.
  • Do not implement Studio UI in this issue.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions