Platform · style

Portal Style — Design Token System

Complete design token system for Portal UI: colors (with WCAG contrast), typography, spacing, shadows, border radius, transitions, theme management with hot-reload.

portal-stylev0.4.0style

5.5K

Lines of Code

263

Tests

Files

Architecture

11 modules: color (Color, ColorSpace, DisplayTarget — color primitives and conversion), palette (Palette, ColorRole, WcagLevel — semantic roles and contrast validation), typography (FontFamily, FontWeight, FontSize, TextStyle — type system), spacing (Spacing, SpacingScale, SpacingToken — 4px-based spacing), radius (Radius, ComponentRadii — border radius tokens), shadow (Elevation, Shadow, Scrim — elevation system), transition (AnimDuration, Easing, SpringParams — animation tokens), theme (Theme, ThemeManager, ThemeEvent — theme composition and hot-reload), icon (IconName, IconSize, IconStyle — icon system), config (StyleConfig, ValidationPolicy — config loading), error (StyleError).

Overview

portal-style provides the complete design token system that all Portal UI components use for consistent visual presentation. It defines the color palette with semantic roles (primary, secondary, background, surface, error, etc.), typography scale (font families, weights, sizes, text styles), spacing system (4px-based scale with tokens), elevation/shadow system (6 elevation levels), border radius tokens, and animation transition presets. The theme manager supports hot-reload — themes can be changed at runtime and all components update automatically. Built-in themes include Demain Light and Demain Dark with WCAG AA/AAA contrast validation.

Key Types

PaletteSemantic color palette — ColorRole (primary/secondary/background/surface/error/etc.) with WCAG contrast validation.

ThemeComplete theme definition — palette, typography, spacing, radius, shadows, transitions, component overrides.

ThemeManagerRuntime theme manager — hot-reload support, theme change events, component override resolution.

SpacingScale4px-based spacing scale — SpacingToken enum for consistent spacing across components.

TextStyleTypography text style — font family, weight, size, line height, letter spacing, text transform.

ElevationElevation level (0-5) — maps to shadow definitions for depth perception.

WcagLevelWCAG compliance level — AA (4.5:1), AAA (7:1) contrast ratio targets.

TransitionAnimation transition token — duration, easing, spring parameters.

Modules

color

Color primitives — Color struct, ColorSpace (RGB/HSL/OKLCH), DisplayTarget (sRGB/P3), color adjustment utilities.

palette

Semantic color palette — ColorRole assignments, built-in themes (demain_light, demain_dark), WCAG contrast checking.

typography

Typography system — FontFamily, FontWeight, FontSize, LineHeight, LetterSpacing, TextStyle presets.

spacing

Spacing system — 4px-based SpacingScale, SpacingToken enum, Padding type.

radius

Border radius — Radius enum, CustomRadius, ComponentRadii (button, card, input, etc.).

shadow

Shadow system — Elevation (0-5), Shadow definition, Scrim for overlays.

transition

Animation tokens — AnimDuration, Easing curves, SpringParams, Transition presets.

theme

Theme management — Theme composition, ThemeManager with hot-reload, ThemeEvent for change notifications, component overrides.

icon

Icon system — IconName enum, IconSize, IconShape, IconStyle, Gradient definitions.

config

Configuration — StyleConfig loading from TOML/JSON, ValidationPolicy (strict/lenient), environment overrides.

Data Flow

StyleConfig → ThemeManager loads Theme → UI components query tokens → consistent visual presentation across all Portal UI

Dependencies

Internal (1)

portal-common

External (7)

thiserror workspacetracing workspaceserde workspacetoml workspacecrossbeam-channel workspacedirs workspacenotify 6

External: serde (config), thiserror (errors). Feature-gated: telemetry feature adds StyleMetrics.