@texturehq/edges-tokens

Texture design system tokens. Emits Tailwind v4-compatible CSS custom properties and generated typography role utilities via Style Dictionary.

For the canonical engineering inventory and old → new migration map, see docs/color-system.md.

Generated outputs

| File | Description | |------|-------------| | dist/tokens-light.css | @theme {} block (Tailwind utility generation) + :root {} cascading var() refs | | dist/tokens-dark.css | .theme-dark {} block with primitive redeclarations and semantic overrides | | dist/legacy-aliases.css | Deprecated — backward-compat aliases for old brand/neutral names and --theme-text-label; deprecated --color-text-* aliases are emitted in tokens-light.css / tokens-dark.css during migration | | dist/typography.css | Generated .text-{role}-{size} typography role utilities, e.g. .text-display-xl, .text-heading-md, .text-body-md, .text-code, .text-agent | | dist/tokens.json | Flat JSON for Figma Tokens plugin and docs token tables |

Install

yarn add @texturehq/edges-tokens

Usage

/* In your global CSS — import light theme + dark overrides */
@import "@texturehq/edges-tokens/css/light";
@import "@texturehq/edges-tokens/css/dark";

/* Optional: generated typography role utility classes */
@import "@texturehq/edges-tokens/css/typography";

/* Optional: legacy brand/gray aliases during migration */
@import "@texturehq/edges-tokens/css/legacy";

Typography utilities

@texturehq/edges-tokens/css/typography is the lightweight typography API for consumers that want the role classes without importing the full @texturehq/edges component stylesheet. Import it after css/light so the referenced --text-* and --font-family-* custom properties are defined.

@import "@texturehq/edges-tokens/css/light";
@import "@texturehq/edges-tokens/css/typography";

<h1 class="text-display-xl">The grid, orchestrated.</h1>
<p class="text-body-md">Shared product and marketing typography.</p>
<code class="text-code">--text-display-xl</code>

Each generated role class applies the role shorthand via font: var(--text-*) plus the matching letter-spacing token. text-code also enables tabular numerals, and text-agent enables optical sizing for Source Serif 4. Full Edges consumers get these classes through @texturehq/edges/styles.css automatically.

Build

yarn build

Requires Node ≥ 18. Outputs to dist/.

Validate color docs and token inventory

yarn validate:colors

This checks that the canonical Foundations · Color families exist in generated tokens and that the main Edges color docs do not reference undefined --color-* variables.

Token architecture

Primitives (tokens/base/colors.json) define raw color values. Semantic tokens (tokens/themes/light.json, tokens/themes/dark.json) reference primitives. The dark theme redeclares primitives that invert in dark mode (e.g. color.ink, color.graphite, accents, status) so semantic references resolve automatically.

Product code should consume semantic families first: background-*, text-*, border-*, action-*, feedback-*, state-*, viz-*, map, and skeleton tokens. Primitive colors are for token definitions, documentation reference, and rare brand/accent moments.

This package has zero runtime dependencies.