pulse_theme library

PULSE — i-Willink's mobile-first canonical design system for Flutter.

PULSE is the ADR-018 mobile-first source of truth for i-Willink app UI. Design tokens are not hand-mirrored here: PulsePrimitives, PulseSemantics / PulseSemanticsDark, PulseSpacing and PulseFontSize are code-generated from the published @willink-labs/tokens DTCG JSON contract — the same source the web (@willink-labs/* React) consumes — so web and mobile stay at parity from a single token SSOT.

PulseTheme.light / PulseTheme.dark return Material 3 ThemeData whose ColorScheme, TextTheme and component themes are a token-backed projection of that contract. The first 9 Pulse* components ship on the accessible blue baseline (see the exports below). See the README and doc/adr/0001-pulse-mobile-first-architecture.md.

import 'package:flutter/material.dart';
import 'package:pulse_theme/pulse_theme.dart';

MaterialApp(
  theme: PulseTheme.light(),
  darkTheme: PulseTheme.dark(),
  themeMode: ThemeMode.system,
  home: ...,
);

To re-brand, hand the factory your own scheme — not ThemeData.copyWith(colorScheme: ...), which leaves the already-built component themes on the blue baseline (see PulseTheme.light):

MaterialApp(
  theme: PulseTheme.light(
    colorScheme: PulseTheme.lightColorScheme.copyWith(
      primary: const Color(0xFF0F766E),
    ),
  ),
);

Classes

PulseBottomSheet: Material 3 brand-aware modal bottom sheet.
PulseBrandTokens: Non-Material brand tokens carried alongside ThemeData.
PulseButton: Material 3 brand-aware button.
PulseEmptyState: Centered empty-state composition: icon + title + optional description + CTA.
PulseErrorState: Centered error display with optional copy-to-clipboard and retry.
PulseFontSize: Font-size scale (logical px) — mirrors the web --font-size-* type scale (text-xs … text-3xl). Wired into PulseTheme's TextTheme.
PulseLoadingState: Centered loading indicator with optional caption.
PulsePrimitives: Primitive (raw) tokens — fixed across the design system; meaningless on their own. Consumers normally use PulseSemantics or the PulseTheme factories instead of referencing primitives directly.
PulseProgressIndicator: Material 3 brand-aware linear progress indicator.
PulseRadius: Corner radii by role — what kind of thing is being rounded.
PulseSectionCard: Section-shaped surface that hosts grouped content under an optional title.
PulseSemantics: Semantic color roles (light) — named by role, not by hue. Aliases in the DTCG source are folded to their PulsePrimitives reference so a value is never duplicated. This is the default i-Willink mapping.
PulseSemanticsDark: Semantic color roles (dark) — the $extensions["willink.dark"] flip of PulseSemantics (ADR-0013). Roles without a dark extension are mode-invariant and resolve to the same value as the light role.
PulseShadows: Elevation / glow shadows — the primitive shadow scale parsed from CSS box-shadow into List<BoxShadow>. *Dark variants come from the willink.dark extension (ADR-0013); brand-tinted glow is mode-invariant.
PulseSnackBar: Material 3 brand-aware snack bar helper.
PulseSpacing: Spacing scale (logical px) — paddings / gaps / margins. Mirrors the web --spacing-* scale so layouts stay consistent across web and mobile.
PulseStrings: Default copy for Pulse* components that render text of their own.
PulseTabBar: Material 3 brand-aware tab bar.
PulseTheme: Material 3 ThemeData factory for the PULSE design system.

Enums

PulseButtonSize: Size axis of PulseButton. Drives padding + font size.
PulseButtonTone: Accent of PulseButton — which ColorScheme role the button is built from.
PulseButtonVariant: Structural style of PulseButton — how much visual weight it carries.
PulseSnackBarVariant: Semantic variant of PulseSnackBar.

pulse_theme library

Classes

Enums

pulse_theme package

pulse_theme library