CSSトークン抽出

CSS Token Extractor

スタイルシートから色・余白・角丸・書体の値を拾い出し、カスタムプロパティの一式を提案します。

スタイルシートを読んで、その中の色・長さ・角丸・書体・影をすべて数え上げ、それぞれに`--変数`を提案します。並び順は使われている回数です。そのうえで、それらを使う形にスタイルシートを書き換えられます。CSS整形ツールのトークナイザの上に作った宣言のスキャナであって、完全なパーサでもリンタでもありません。ファイルにどんな値が入っているかを教えてくれる道具で、そこが手作業ではつらい部分です。

🔒 ブラウザの中だけで動きますcsstokensdesign-systemrefactor

CSS の入力

.css ファイルをここに

このタブの中だけで読みます。

トークンの提案

接頭辞（任意）

--app-color-1 のように前に付きます。

:root {
  /* 색 */
  --color-1: #6366f1;
  --color-2: #fff;
  --color-3: #1f2937;
  --color-4: rgba(0,0,0,.06);
  --color-5: rgba(0,0,0,.08);
  --color-6: #111827;
  --color-7: #4b5563;
  --color-8: #4f46e5;
  --color-9: #eef2ff;
  --color-10: #4338ca;
  --color-11: #e5e7eb;
  /* 글꼴 */
  --font-pretendard: "Pretendard", system-ui, sans-serif;
  /* 글자 크기 */
  --text-1: 12px;
  --text-2: 14px;
  --text-3: 20px;
  /* 행간 */
  --leading-1: 1.6;
  /* 간격 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  /* 모서리 */
  --radius-1: 8px;
  --radius-2: 12px;
  --radius-3: 999px;
  /* 그림자 */
  --shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 8px 24px rgba(0,0,0,.08);
}

宣言

色

余白の値

角丸

フォント

もとからある変数

色 11

#6366f1×2
#fff×2
#1f2937×1
rgba(0,0,0,.06)×1
rgba(0,0,0,.08)×1
#111827×1
#4b5563×1
#4f46e5×1
#eef2ff×1
#4338ca×1
#e5e7eb×1

余白 5

4px×1
8px×3
16px×4
24px×3
32px×1

角丸 3

8px×1
12px×1
999px×1

文字サイズ 3

12px×1
14px×2
20px×1

行の高さ 1

1.6×1

フォント 1

"Pretendard", system-ui, sans-serif×1

影 2

0 1px 2px rgba(0,0,0,.06)×1
0 8px 24px rgba(0,0,0,.08)×1

ファイルをどう読んでいるか

· CSS 整形ツールのトークナイザーで読むので、url() も、文字列の中の #fff も色として数えず、calc() はまるごと残します。
· 色は 16 進数に正規化するので、#FFF・white・rgb(255 255 255) はひとつの項目にまとまり、使われた回数が付きます。名前は使用回数の多い順に番号を振るので、--color-1 はたいていブランド色か本文の色です。名前は自分で付け直してください。
· 余白は margin・padding・gap と inset 系からだけ、角丸は border-radius からだけ拾い、大きさの順に番号を振ります。width と height は外してあります。リズムではなく寸法だからです。
· JSON は W3C Design Tokens（DTCG）ドラフトの形で、$type と $value が付きます。「var() に書き換えた CSS」は値が完全に一致する場所だけを置き換え、ほかの文字は 1 文字も触りません。

取り出した色から段階を作るなら濃淡スケール生成が、ダークモードならダークモード配色がそれをやります。

使い方

スタイルシートを貼り付けるか、ファイルを置きます
一度に1ファイルです。最初に読み込まれる例は、自分のCSSを探しに行く前に出力の形を見せるためにあります。
トークンより先に件数を読みます
12色で済むはずのファイルに40色ある、というのが発見です。下のまとめた一覧は値ごとに出現回数を並べるので、名前を付ける価値のあるものが上に、1回しか出てこないもの、つまりたいていは書き間違いか死んだ規則が下に来ます。
プロジェクトに必要なら接頭辞を決めます
空なら`--color-1`、`app`と入れれば`--app-color-1`になります。どちらにしても数字は使用回数の順位であって意味ではないので、各値が何のためのものか分かった時点で付け直してください。
変数か、JSONか、書き換えたファイルを取ります
CSSの出力は先頭に貼る`:root`ブロックです。JSONはW3C Design Tokensのドラフトの形で、ビルド手順やデザインツール向けです。書き換えは、値が完全に一致した箇所だけを`var()`に差し替え、ほかには手を付けていない元のスタイルシートです。コミットする前に差分を読んでください。

よくある質問

書き換えたCSSはそのまま出して安全ですか。

まず差分を読んでください。置き換えはテキストの完全一致だけなので、認識できない値を壊すことはありません。ただし、同じ2つのグレーが別々の意味を持っていることも知りようがありません。たまたま同じ16進数だったボーダーの色と無効状態のラベルには同じ変数が付き、あとで誰かが片方だけを変えます。それを捕まえるのはトークンにきちんと名前を付ける段で、それは人の仕事です。

余白の一覧にwidthとheightが入っていないのはなぜですか。

意図的です。余白はリズムです。margin、padding、gap、insetのことで、デザインシステムはそれをトークン化します。widthとheightは寸法です。240pxのサイドバーと44pxのタップ領域は同じ尺度の上の2点ではありませんし、一覧に入れれば、本当に尺度の上にある値が埋もれます。