LayrzTokenizer

LayrzTokenizer

A convenience facade providing semantic access to design tokens via both group getters and flat shortcuts.

---

Overview

LayrzTokenizer wraps a LayrzTokens object and provides two access patterns:

1. Group getters — access all tokens of a category at once (e.g., all colors)
2. Flat shortcuts — access common single-value patterns quickly (e.g., primary color only)

This dual interface accommodates both detailed component styling (group getters) and quick convenience patterns (flat shortcuts).

---

Access Patterns

Via BuildContext (Recommended)

// Recommended: uses the active theme
final tokenizer = context.tokenizer;
final primary = tokenizer.primary;
final spacing = tokenizer.spacing;

// Direct access to groups
final colors = tokenizer.colors;
final allSpacing = tokenizer.spacingTokens; // Not "spacing" — that's the base unit

Direct Construction

final tokenizer = LayrzTokenizer(context.tokens);
final primary = tokenizer.primary;

Static Access

// Throws if no LayrzTheme is found
final tokenizer = LayrzTokenizer.of(context);

// Returns null if no LayrzTheme is found
final tokenizer = LayrzTokenizer.maybeOf(context);

---

Group Getters

Group getters return the complete token category objects. They are named to avoid collision with flat shortcuts (see naming note below).

Getter	Returns	Access Pattern
colors	LayrzColorTokens	tokenizer.colors.primary
typography	LayrzTextTheme	tokenizer.typography.bodyMedium
spacingTokens	LayrzSpacingTokens	tokenizer.spacingTokens.sp16
radiusTokens	LayrzRadiusTokens	tokenizer.radiusTokens.r12
shadowTokens	LayrzShadowTokens	tokenizer.shadowTokens.elevation2
border	LayrzBorderTokens	tokenizer.border.normal
motion	LayrzMotionTokens	tokenizer.motion.dTransition

Why "spacingTokens" and "radiusTokens"?

These group getters are named to avoid collision with flat shortcuts that use the shorter names:

• tokenizer.spacingTokens — the full set
• tokenizer.spacing — the base unit (8.0)
• tokenizer.radiusTokens — the full set
• tokenizer.radius — the base unit (8.0)

This naming pattern prevents shadowing and keeps the API unambiguous.

---

Flat Shortcuts for Color Tokens

Quick access to semantic colors without drilling into the full color token set.

Shortcut	Returns	Equivalent
primary	Color	tokens.colors.primary
success	Color	tokens.colors.success
warning	Color	tokens.colors.warning
danger	Color	tokens.colors.danger
info	Color	tokens.colors.info
contextual	Color	tokens.colors.contextual
tonalOpacity	double	tokens.colors.tonalOpacity

Example:

Container(
  color: context.tokenizer.primary, // Deep navy blue
)

Text(
  'Error',
  style: TextStyle(color: context.tokenizer.danger),
)

---

Flat Shortcuts for Spacing Tokens

Quick access to the spacing base unit and common convenience methods.

Shortcut	Returns	Equivalent
spacing	double	tokens.spacing.base (8.0)
margin	EdgeInsets	tokens.spacing.margin (all sides = base)
reducedMargin	EdgeInsets	tokens.spacing.reducedMargin (all sides = base/2)
padding	EdgeInsets	tokens.spacing.padding (all sides = base)
sizedBox	Widget	tokens.spacing.sizedBox (8×8 SizedBox)

Example:

Padding(
  padding: context.tokenizer.padding, // EdgeInsets.all(8)
  child: Text('Padded text'),
)

SizedBox.fromSize(
  size: Size.square(context.tokenizer.spacing), // 8×8
  child: Loading(),
)

---

Flat Shortcuts for Radius Tokens

Quick access to the radius base unit and the convenience border radius getter.

Shortcut	Returns	Equivalent
radius	double	tokens.radius.base (8.0)
borderRadius	BorderRadius	tokens.radius.borderRadius (circular(8))
innerRadius(...)	BorderRadius	Computed inner radius for nested borders

Example:

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(context.tokenizer.radius),
    color: Colors.blue,
  ),
)

// Or use the pre-computed shortcut
Container(
  decoration: BoxDecoration(
    borderRadius: context.tokenizer.borderRadius, // Same as above
    color: Colors.blue,
  ),
)

// Nested borders
final inner = context.tokenizer.innerRadius(
  outerRadius: 12.0,
  spacer: 4.0, // Distance between outer and inner arcs
);

---

Flat Shortcuts for Shadow Tokens

Quick access to elevation-based shadow decoration generation.

Shortcut	Returns	Equivalent
shadow(...)	BoxDecoration	tokens.shadow.elevation(...)

Example:

Container(
  decoration: context.tokenizer.shadow(elevation: 2),
  // Returns BoxDecoration with shadow, border radius, and surface color
)

// Custom elevation settings
Container(
  decoration: context.tokenizer.shadow(
    elevation: 3,
    radius: 12.0,
    color: Colors.white,
    reverse: false,
  ),
)

See Design-Tokens for complete shadow documentation.

---

Flat Shortcuts for Border Tokens

Quick access to the border base width.

Shortcut	Returns	Equivalent
borderWidth	double	tokens.border.base (1.5)

Example:

Container(
  decoration: BoxDecoration(
    border: Border.all(width: context.tokenizer.borderWidth),
  ),
)

// Or use pre-built border sides
Container(
  decoration: BoxDecoration(
    border: Border(bottom: context.tokens.border.normal),
  ),
)

---

Complete Shortcut Reference

Color Shortcuts:

• primary, success, warning, danger, info, contextual, tonalOpacity

Spacing Shortcuts:

• spacing (base unit), margin, reducedMargin, padding, sizedBox

Radius Shortcuts:

• radius (base unit), borderRadius, innerRadius(...)

Shadow Shortcuts:

• shadow(...) method

Border Shortcuts:

• borderWidth (base width)

Group Getters:

• colors, typography, spacingTokens, radiusTokens, shadowTokens, border, motion

---

When to Use Each Pattern

Use Flat Shortcuts When:

• Accessing a single, common value (primary color, base spacing)
• Writing quick styling logic where brevity helps readability
• You know the exact value you need (no exploration)

Use Group Getters When:

• Accessing multiple values from the same category
• Building a design system component that needs the full token set
• You want to explore all available values in a category

Use Direct Token Access When:

• You need the lowest-level access
• You're consuming LayrzTokens directly without the facade

Example: Mixed Patterns:

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

  @override
  Widget build(BuildContext context) {
    return Container(
      // Use shortcut for single value
      padding: context.tokenizer.padding,
      
      // Use group getter for multiple values
      decoration: BoxDecoration(
        color: context.tokenizer.colors.surface,
        borderRadius: context.tokenizer.borderRadius,
        boxShadow: context.tokenizer.shadowTokens.elevation2,
      ),
      
      child: Text(
        'Card',
        // Use shortcut for typography base
        style: context.theme.textStyle,
      ),
    );
  }
}

---

Last updated: 2026-08-13
Related pages: Design-Tokens, Theming, Getting-Started