トークン

JSONのトークンソースから、WebのCSSとFlutterの値を生成します。数値を 複製せず、公開トークンクラスを使ってください。

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

TRSpacing、TRRadii、TRTypography、TRMotion、TRShadowsには、 各プラットフォーム向けに変換した値が入ります。CSS固有の単位と シャドウ構文はジェネレーターが変換し、未対応の変換がある場合は 生成トークンの検証が失敗します。

レイアウトの幅

TRBreakpointsにはレイアウトの形が変わるビューポート幅が、 TRMeasurementsにはその中に置く領域の幅が入ります。どちらもトークンから 読むことで、同じアプリの2つの画面が異なる幅で再配置されるのを防げます。

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

Flutterでは、コンポーネントが実際に使うsmallとextraLargeの2つの しきい値を公開します。幅を制限するコンテンツ領域にはmeasureスケールを、 1つのコントロールにはTRControlMetricsを使ってください。製品固有の ペイン幅や読み物の幅は、共通トークンAPIではなく製品のレイアウトで定義します。