tokens 0.1.0

A constraint-checked design token substrate for Flutter. One import, one access point — context.x — zero design decisions in screen code.

example/lib/main.dart

// Example app for the tokens package.
// Shows every token dimension — color, type, space, motion — in one screen.

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

void main() {
  runApp(
    // One line. That's the entire integration.
    TokenScope(child: const ExampleApp()),
  );
}

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const TokensDemo(),
    );
  }
}

class TokensDemo extends StatelessWidget {
  const TokensDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: context.x.surface,
      body: SafeArea(
        child: SingleChildScrollView(
          padding: EdgeInsets.all(context.x.md),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('tokens', style: context.x.display),
              SizedBox(height: context.x.xs),
              Text('Everything below came from context.x', style: context.x.caption),
              SizedBox(height: context.x.xl),

              Text('Typography', style: context.x.title),
              SizedBox(height: context.x.sm),
              Text('Display — 39dp', style: context.x.display),
              Text('Headline — 31dp', style: context.x.headline),
              Text('Title — 25dp', style: context.x.title),
              Text('Body — 16dp', style: context.x.body),
              Text('Label — 13dp', style: context.x.label),
              Text('Caption — 10dp', style: context.x.caption),
              SizedBox(height: context.x.xl),

              Text('Colors', style: context.x.title),
              SizedBox(height: context.x.sm),
              _Swatch(label: 'surface', color: context.x.surface, text: context.x.onSurface),
              _Swatch(label: 'surfaceVariant', color: context.x.surfaceVariant, text: context.x.onSurface),
              _Swatch(label: 'accent', color: context.x.accent, text: context.x.onAccent),
              _Swatch(label: 'error', color: context.x.error, text: context.x.onError),
              SizedBox(height: context.x.xl),

              Text('Spacing', style: context.x.title),
              SizedBox(height: context.x.sm),
              _SpacingRow(label: 'xs (4)', size: context.x.xs, accent: context.x.accent),
              _SpacingRow(label: 'sm (8)', size: context.x.sm, accent: context.x.accent),
              _SpacingRow(label: 'md (16)', size: context.x.md, accent: context.x.accent),
              _SpacingRow(label: 'lg (24)', size: context.x.lg, accent: context.x.accent),
              _SpacingRow(label: 'xl (32)', size: context.x.xl, accent: context.x.accent),
            ],
          ),
        ),
      ),
    );
  }
}

class _Swatch extends StatelessWidget {
  const _Swatch({required this.label, required this.color, required this.text});
  final String label;
  final Color color;
  final Color text;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(bottom: context.x.xs),
      padding: EdgeInsets.symmetric(horizontal: context.x.md, vertical: context.x.sm),
      color: color,
      child: Text(label, style: context.x.label.copyWith(color: text)),
    );
  }
}

class _SpacingRow extends StatelessWidget {
  const _SpacingRow({required this.label, required this.size, required this.accent});
  final String label;
  final double size;
  final Color accent;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(bottom: context.x.xs),
      child: Row(
        children: [
          Container(width: size, height: context.x.md, color: accent),
          SizedBox(width: context.x.sm),
          Text(label, style: context.x.label),
        ],
      ),
    );
  }
}