SCSSをトークン化してみた. 2

前回はCSSトークンについてと、color-mapによる最低限の組み方をやってみました。
今回は他のmapを増やしてみたいと思います。

mapの種類

mapは色々あるのですが、このサイトでは以下のファイルを作りました。
かなり細かく分けています。

マップトークン（foundation/maps）

ここは 「トークンを辞書（map）としてまとめたファイル群」です。
中身は大きく分けて次の3タイプがあります。

• スケール系（Scale）
  xs / sm / md... のように、段階で揃えたい値（余白・角丸など）
• セマンティック系（Semantic / Role）
  button-inline / container-inline / modal のように、用途・役割で付けた名前
• プリセット系（Preset）
  transitionのbutton/card や gradientのvignette など、状態や用途をまとめたセット

※一部のmapは **「用途 × 段階」**のように混在します。

ディレクトリはこんな感じで、場所は「foundation/maps」です。

_color-map.scss
_elevation-map.scss
_gradient-map.scss
_font-size-role-map.scss
_font-size-scale-map.scss
_font-size-weight-map.scss
_gradient-map.scss
_radius-map.scss
_shadow-map.scss
_space-map.scss
_transition-map.scss
_z-map.scss

プリミティブトークン（foundation/primitives）

こちらは **「値の唯一ソース（素材）」**になるトークン群です。
色コードや rem() で表したサイズ、透明度、duration など、**他のトークンが参照する“元の値”**をここに集約します。

• 目的：値の直書きを散らさず、変更点をここに集約する
• 特徴：基本的に 用途名（button/card など）では切らない
• 場所：foundation/primitives

※プリミティブ自体は「変数」でも「map」でもOKですが、ここで扱うのはあくまで素材としての値です。

ディレクトリはこんな感じで、場所は「foundation/primitives」です。

_primitives-color.scss
_primitives-font-weight.scss
_primitives-shadow.scss
_primitives-space.scss
_primitives-shadow.scss
_primitives-typography.scss

なるほど。ん？プリミティブとセマンティック？

プリミティブとセマンティック

プリミティブというのは
色コードや余白値など、そのままの素材（値）のことです。

一方セマンティックは
「text/default」や「bg/surface」のような
用途・意味（役割）のことのようです。

これは前回の説明でも少し触れましたね。

ボタンなどのcomponentパーツは直接サイズや色を指定しません。
サイズであれば「heading」や「caption」、
色であれば「default」や「accent」というように、意味で指定します。
（※もちろん全ては難しいので実際には落とし所をつけるようにします）

セマンティックmapがプリミティブmapを読み込んでつかう、
といった流れになります。

これにより、「どこにつかうのか？」がはっきりするので
デザインがバラけにくくなりますし、変更もラクです。

では次回は実際にどんなmapを作るか、見ていってみましょう。

今回は以上です！