style-dictionary を使ってフロントエンドで利用しやすいデザイントークンを生成する

tl;dr このレポジトリ から .style-dictionary の中身を持ってきて npm run build を実行してください yaml で書けて、 JSDoc がついた branded-type なデザイントークンがコード生成されます デザイントークンとは デザインシステムを構成する要素のひとつで、 UI における見た目の 各属性値 を共通化するためにトークンとして定義したものです。コンポーネントに適用された カラーコード や 余白 、 フォントサイズ などCSS のスタイルの値などが具体的なデザイントークンです デザインシステムの中でも、デザイントークンはハードルが低く（値の一覧を棚卸してトークンにするだけ）、また導入した場合の実効性が高いため（実装者、デザイン共に値を少なく管理しやすくしたいという要望がある）、とりあえず導入してみるだけでも効果があります デザインシステムに