🏠 Overview › 🧩 Components ›🧩 Design Tokens Config

Design Tokens Config

Component Detail

Data Layer medium complexity mobile
0
Dependencies
0
Dependents
0
Entities
0
Integrations

Description

The centralized Dart token definition layer implemented as a Flutter ThemeExtension with typed token classes for colors, typography (TextTheme), spacing, border radii, shadows, and sizing constants. It defines two complete token sets — default and high-contrast — and exposes WCAG 2.2 AA contrast-validated color pairs. Tokens are validated against WCAG 2.2 AA contrast ratios via unit tests using the color_contrast package.

Feature: Design Token System

design-tokens-config

Responsibilities

  • Define all color tokens (primary, surface, error, on-* variants) for both themes
  • Define spacing scale (4dp base grid), border radii, and elevation/shadow tokens
  • Define typography scale mapping to Flutter TextTheme with accessible font sizes
  • Define sizing constants (minimum touch target 48dp, icon sizes, input heights)
  • Expose high-contrast token override that replaces only color tokens

Interfaces

AppColors.defaultTheme -> AppColorTokens
AppColors.highContrastTheme -> AppColorTokens
AppTypography.textTheme -> TextTheme
AppSpacing.xs / sm / md / lg / xl / xxl (double constants)
AppRadii.sm / md / lg / full (double constants)
AppSizing.minTouchTarget / iconSm / iconMd / iconLg (double constants)
AppShadows.card / modal / dropdown (BoxShadow constants)
DesignTokensExtension.of(context) -> DesignTokensExtension
validateContrastRatio(foreground, background) -> bool

Sub-Components (2)

AppColorTokens
component low

Typed Dart class holding all semantic color tokens (primary, secondary, surface, error, success, warning, on-* pairs). Provides both default and high-contrast instances.

  • Define semantic color roles used across the entire application
  • Ensure all color pairs meet WCAG 2.2 AA contrast ratio (4.5:1 text, 3:1 UI)
AppTypographyTokens
component low

Flutter TextTheme definition using the project's approved typeface, with scalable font sizes (sp units) and line heights ensuring readability at all system text scale factors.

  • Define displayLarge through bodySmall TextStyle entries
  • Use sp units to respect system font scaling for accessibility
  • Avoid thin/italic fonts that reduce legibility for low-vision users