VooTokens #

A design token system for VooFlutter that provides responsive spacing, typography, radius, elevation, and animation tokens. Works seamlessly with all screen sizes and adapts automatically.

Features #

• Responsive Scaling: Tokens automatically adapt based on screen width
• Typography Tokens: Consistent text styles with scale factors
• Spacing Tokens: Standardized spacing values (xxs to xxxl)
• Radius Tokens: Consistent border radius values
• Elevation Tokens: Standardized shadow definitions
• Animation Tokens: Consistent animation durations and curves
• ThemeExtension Integration: Access tokens via BuildContext

Usage #

Setup #

Add VooTokensTheme to your app's theme extensions:

import 'package:voo_tokens/voo_tokens.dart';

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
    useMaterial3: true,
    extensions: [
      VooTokensTheme.standard(),
    ],
  ),
);

Responsive Setup #

For responsive token scaling based on screen width:

LayoutBuilder(
  builder: (context, constraints) {
    final theme = Theme.of(context);
    final isDark = theme.brightness == Brightness.dark;

    return Theme(
      data: theme.copyWith(
        extensions: [
          VooTokensTheme.responsive(
            screenWidth: constraints.maxWidth,
            isDark: isDark,
          ),
        ],
      ),
      child: YourContent(),
    );
  },
);

Accessing Tokens #

Use the BuildContext extensions to access tokens:

// Spacing
Padding(
  padding: EdgeInsets.all(context.vooSpacing.md),
  child: Container(
    margin: EdgeInsets.symmetric(
      horizontal: context.vooSpacing.lg,
      vertical: context.vooSpacing.sm,
    ),
  ),
);

// Typography
Text(
  'Title',
  style: context.vooTypography.headlineLarge,
);

// Radius
Container(
  decoration: BoxDecoration(
    borderRadius: context.vooRadius.card,
  ),
);

// Elevation
Container(
  decoration: BoxDecoration(
    boxShadow: context.vooElevation.shadow2(),
  ),
);

// Animation
AnimatedContainer(
  duration: context.vooAnimation.durationNormal,
  curve: context.vooAnimation.curveEaseInOut,
);

Token Values #

Spacing Tokens #

• xxs: 2px
• xs: 4px
• sm: 8px
• md: 16px
• lg: 24px
• xl: 32px
• xxl: 48px
• xxxl: 64px

Component-specific spacing: #

• buttonPadding: 12px
• cardPadding: 16px
• listItemPadding: 12px
• inputPadding: 12px
• dialogPadding: 24px

Radius Tokens #

• none: 0px
• xs: 2px
• sm: 4px
• md: 8px
• lg: 12px
• xl: 16px
• xxl: 24px
• full: 9999px (pill shape)

Responsive Scale Factors #

• < 360px: 0.85x
• 360-414px: 0.9x
• 414-600px: 1.0x
• 600-768px: 1.1x
• 768-1024px: 1.15x
• 1024-1440px: 1.2x

• 1440px: 1.25x

Integration with VooResponsive #

This package works seamlessly with voo_responsive to provide a complete responsive design system. The tokens automatically scale based on screen size while maintaining visual harmony across all breakpoints.