Design Token Provider
Component Detail
Description
Central repository of all design tokens (colors, typography, spacing, sizing, radii) for the application. Tokens are defined as non-overridable Dart constants derived from the WCAG-validated palette, ensuring that downstream components cannot introduce non-compliant values. Serves as the single source of truth consumed by the theme and all widget layers.
design-token-provider
Summaries
The Design Token Provider is the foundation of the application's visual consistency and brand integrity. By centralizing all colors, typography, spacing, and sizing into a single immutable source of truth, it eliminates the risk of developers introducing off-brand or accessibility-violating values anywhere in the product. This consistency directly translates to a polished, trustworthy user experience that strengthens brand perception and reduces costly redesign cycles caused by visual drift. Because the token set is pre-validated against WCAG 2.2 AA standards and supports both light and dark modes, the application can confidently serve a broader user base without additional accessibility remediation investment.
As a shared component consumed across all features, any improvement to the token system immediately benefits the entire product, making design iteration faster and more cost-effective at scale.
The Design Token Provider is a shared, medium-complexity component that underpins every visual feature in the application. Because it has zero external dependencies, it can be developed and finalized early in the project timeline, which is critical — all downstream components (theme builders, accessibility enforcement, widget layers) are blocked until token definitions are stable. Teams should treat token finalization as a milestone gate before beginning feature UI work. Changes to token values after downstream components have been built carry a high ripple risk, requiring re-validation of all consuming components and re-running CI accessibility checks.
Light and dark mode token sets must be validated in parallel, requiring coordination between design and engineering. Testing scope includes verifying immutability guarantees in Dart, contrast ratio compliance for all color pairs, and correct typed accessor behavior. Versioning the token manifest alongside this component is essential to detect breaking changes in CI.
Design Token Provider is a shared mobile component implemented as a collection of immutable Dart constants organized into semantic groups (surfaces, content, interactive). It exposes typed accessors — `getColor(String tokenKey) → Color`, `getTextStyle(String tokenKey) → TextStyle`, `getSpacing/Sizing/Radii(String tokenKey) → double` — and bulk export methods `getAllColorTokens()` and `getAllTypographyTokens()` for tooling and manifest generation. Tokens are declared as `const` or `final` static fields, enforcing immutability at the language level; there is no setter surface. The `exportTokenManifest()` method emits a `Map
Light and dark mode sets are separate named constants rather than runtime-switched values, keeping theme composition explicit. Consumers should always access tokens by semantic key (e.g., `TokenKeys.surfacePrimary`) rather than raw hex, so design-system-level changes propagate automatically without touching widget code.
Responsibilities
- Store and expose all color, typography, spacing, and sizing tokens as typed constants
- Enforce immutability so tokens cannot be overridden at runtime
- Provide named accessors for semantic token groups (surfaces, content, interactive)
- Support light and dark mode token sets with guaranteed contrast in both
Interfaces
getColor(String tokenKey) → Color
getTextStyle(String tokenKey) → TextStyle
getSpacing(String tokenKey) → double
getSizing(String tokenKey) → double
getRadii(String tokenKey) → double
getAllColorTokens() → Map<String, Color>
getAllTypographyTokens() → Map<String, TextStyle>
exportTokenManifest() → Map<String, dynamic>
Relationships
Dependents (7)
Components that depend on this component
Related Data Entities (1)
Data entities managed by this component