Tokens

The JSON token source generates both the web CSS and Flutter values. Use the public token classes instead of copying numeric values:

Padding(
  padding: const EdgeInsets.all(TRSpacing.medium),
  child: DecoratedBox(
    decoration: const BoxDecoration(
      borderRadius: BorderRadius.all(TRRadii.medium),
      boxShadow: [TRShadows.raised],
    ),
    child: Text('Rack', style: TRTypography.body),
  ),
);

TRSpacing, TRRadii, TRTypography, TRMotion, and TRShadows contain the platform-resolved values. CSS-only units and shadow syntax are converted by the generator; an unsupported conversion fails the generated-token check.

Layout widths

TRBreakpoints holds the viewport widths at which a layout changes shape, and TRMeasurements holds the widths of the regions inside it. Reading both from tokens keeps two screens in the same app from reflowing at different widths.

LayoutBuilder(
  builder: (context, constraints) => constraints.maxWidth < TRBreakpoints.small
      ? detail
      : Row(
          children: [
            SizedBox(width: TRMeasurements.measureXl, child: list),
            Expanded(child: detail),
          ],
        ),
);

Flutter exposes the two thresholds used by its components: small and extraLarge. Use the measure scale for a bounded content region and TRControlMetrics for one control. Product-specific pane and reading widths belong in the product layout instead of the shared token API.