🎨 Refine the EDS Colour & Token System

[emirgens]

Description

This epic covers all work required to refine and improve the EDS colour and token system.

Following the 23 Jun 2026 token decision ("redefine, don't rebuild"), this work is now a redefinition of the tokens: keep the foundation (colour generator + values, type scale, contrast algorithm, primitives), but decouple typography / spacing / corner radius, consolidate colour on static/semantic (drop dynamic) and expand the static colour scale (shipped alongside the current set), remove text-trim, rename density modes (compact / comfortable / relaxed), and rebuild the pipeline with CI/CD. Ships as eds-core-react 3.0.0 + eds-tokens 3.0.0.

Goals

• Improve visual consistency across EDS
• Strengthen accessibility (e.g., disabled states, APCA contrast considerations)
• Ensure density modes are coherent and future‑proof
• Make token naming intuitive and maintainable
• Update all documentation accordingly

Definition of Done

• Alpha‑channel disabled state approach implemented across components
• Colour token values reviewed, refined, and updated (consolidated on static)
• Density mode tokens renamed (compact, comfortable, relaxed)
• Token naming conventions reviewed and improved
• All changes documented and published
• Visual and functional consistency validated across representative components

Sub-tasks & sequencing

Now (parallel):

• Define the Token Variable Architecture (Figma + code ADRs) #4963 — token variable architecture ADR (gates the design/definition track)
• Token studio exploration #4800 — Token Studio exploration + Marco meeting (gates the tooling/pipeline track)
• Revisit the dynamic-vs-static user-test recordings (spike) #5124 — revisit dynamic-vs-static user-test recordings (validate drop-dynamic early)
• Pause new component development during the token transition #5122 — pause new component development (standing, until tokens + package work)

Design track — after the ADR (#4963):

• Re-define Typography, Spacing & Corner Radius tokens #5107 — redefine typography / spacing / corner radius + new Figma file
• 🧩 Re‑evaluate token naming conventions #4744 — colour state-naming rework (default→hover→selected/active; + expose px, generic-vs-specific) → feeds 🎛 Review & Refine Colour Token values #4742
• 🎛 Review & Refine Colour Token values #4742 — expand the static colour scale (ships alongside the current set) + alpha + gaps
• 📏 Rename density modes (compact / comfortable / relaxed) #4743 — density rename (compact / comfortable / relaxed)

Tooling track — after tooling direction (#4800), parallel to the design track:

• equinor/design-system-internal#158 — Tokens Studio implementation (also needs the definitions as they land)
• Establish a new Token build & publishing pipeline #5108 — pipeline rebuild with CI/CD (after equinor/design-system-internal#158)

After tokens defined + buildable:

• 📦 eds-tokens packaging & release (beta flags → 3.0.0) #5120 — push tokens to beta (verify against real components)
• 🧩 Component migration (colour, then spacing & typography) #5119 — component migration: Phase 1 expanded static colours (incl. 🎨 Implement Alpha‑Channel approach for disabled states #4741 alpha disabled states), then Phase 2 spacing & typography (incl. text-trim removal + repad)
• Align mobile on the unified typography #5123 — mobile alignment (needs text-trim-free typography)
• Consumer migration path (spike) #5121 — consumer migration path (spike)

Wrap:

• 📦 eds-tokens packaging & release (beta flags → 3.0.0) #5120 — stable release: EDS core (react) + tokens together as one major, once verified
• 📚 Update token documentation #4745 — documentation of intent (Storybook) — throughout

Critical path: #4963 → #5107/#4742 definitions → #5120 beta → #5119 migration → #5120 stable. Tooling/pipeline track (#4800 → equinor/design-system-internal#158 → #5108) runs in parallel, gated by the Marco / Tokens Studio meeting.

Timeline: beta first (current beta naming, not "3.0 beta"); stable major (likely 3.0) once verified against components — not this year.