デザイントークンについて
UI を統一する目的でデザイントークンを CSS 変数で利用しま す。
デザイントークンの定義
デザイントークンは、src/theme/tokens
以下に定義します。
プリミティブトークン (Primitive Tokens)
プリミティブトークンは、デザインシステムの最小のトークンです。
プリミティブトークンはプリミティブトークンは以下のように定義します。
- プリミティブトークンはstyle-dictionaryを利用して作成する。
- プリミティブトークンの接頭語は
color
,fontSize
,fontWeight
,fontFamily
,lineHeight
,letterSpacing
,borderRadius
,borderWidth
,boxShadow
,opacity
のいずれかで始める。 - プリミティブトークンは
primitive
というファイル名にする(拡張子はプロジェクトで異なって良い)