sparkle-design-cli 2.5.0-beta.5 → 2.5.0-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sparkle-design-cli",
-  "version": "2.5.0-beta.5",
+  "version": "2.5.0-beta.6",
   "description": "Sparkle Design CLI — プロジェクトセットアップ、CSS・フォント生成、アンチパターン検査、AI エージェント（Claude Code / Cursor / Codex）向けのガードと hook 設定まで一括で行う sparkle-design 公式 CLI。",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",

package/templates/sparkle-variables/README.md

@@ -153,3 +153,32 @@ node scripts/validate-tokens.mjs
 **検査できないこと。** これは構造の検査であって、値の妥当性は見ていません。たとえば `--color-text-high` の参照先を別のグレーに書き換えてもコントラストが壊れるだけで検査は通ります。色の値そのものの正解は Figma です。
 
 `fontdata.csv` についても同じで、見ているのは形だけです。`variable` の値が消費側のプラグインに実在するクラスかどうかは、そのクラスが別リポジトリ（`sparkle-design-theme-settings` の `src/ui/styles/main.css`）にあるため、このリポジトリの CI では確かめられません。
+
+## 2026-10-02 のアイコン段階更新（internal issue #247）
+
+Figma の `Typography` の「スタイル更新」注釈（19113:6808）に従い、
+20px と 24px の間に 22px を追加しました。fill=0/1 共通です。
+
+| 段階 | px | 更新前の段階 |
+|---|---|---|
+| 1 | 12 | 1 |
+| 2 | 14 | 2 |
+| 3 | 16 | 3 |
+| 4 | 18 | 4 |
+| 5 | 20 | 5 |
+| 6 | 22 | 新設 |
+| 7 | 24 | 6 |
+| 8 | 28 | 7 |
+| 9 | 32 | 8 |
+| 10 | 36 | 9 |
+| 11 | 42 | 10 |
+| 12 | 48 | 11 |
+| 13 | 54 | 12 |
+
+既存表示を保つ場合は `Icon` / `Spinner` の旧 size=6〜12 と
+`icon-6`〜`icon-12` の参照を 1 段上げます。ピクセル指定の他のコンポーネントには
+この変更を適用しません。character の 12 段は据え置きです。
+既に新しい段階を使うコードとの区別が必要なため、一律の自動置換はできません。
+
+Figma の gray/50・gray/500 は Variables / 実体の色と色票の HEX ラベルに
+不一致が残っています。gray.json は今回変更せず、採用値の確認待ちとします。

package/templates/sparkle-variables/scripts/validate-tokens.mjs

@@ -877,6 +877,27 @@ check('fontdata.csv が消費側の期待する形をしていること', () =>
   return problems.length ? problems.join(' / ') : null;
 });
 
+// アイコンの番号追加・変更は fill 両軸と CSS utility を同時に更新する。
+// en: Icon renumbering must update both fill axes and their CSS utilities.
+check('icon 1–13 が Figma の 13 段に一致すること', () => {
+  const sizes = [12, 14, 16, 18, 20, 22, 24, 28, 32, 36, 42, 48, 54];
+  const problems = [];
+  for (const [index, px] of sizes.entries()) {
+    for (const fill of [0, 1]) {
+      const name = `icon-${index + 1}-fill-${fill}`;
+      if (!templateNoComments.includes(`--${name}-font-size: var(--font-size-${px});`)) {
+        problems.push(`${name} の font-size が ${px}px ではありません`);
+      }
+      if (!templateNoComments.includes(`.${name} {`)) {
+        problems.push(`${name} の utility がありません`);
+      }
+    }
+  }
+  const steps = [...templateNoComments.matchAll(/--icon-(\d+)-fill-0-font-size:/g)];
+  if (steps.length !== 13) problems.push(`段階数が ${steps.length}（期待 13）`);
+  return problems.length ? problems.join(' / ') : null;
+});
+
 // ---------------------------------------------------------------------------
 // 結果
 // ---------------------------------------------------------------------------

package/templates/sparkle-variables/sparkle-design.template.css

@@ -29,6 +29,7 @@
   --font-size-16: 1rem; /* 16px */
   --font-size-18: 1.125rem; /* 18px */
   --font-size-20: 1.25rem; /* 20px */
+  --font-size-22: 1.375rem; /* 22px */
   --font-size-24: 1.5rem; /* 24px */
   --font-size-28: 1.75rem; /* 28px */
   --font-size-32: 2rem; /* 32px */
@@ -677,75 +678,85 @@
   --icon-5-fill-1-letter-spacing: var(--letter-spacing-normal);
   --icon-5-fill-1-line-height: var(--line-height-leading-none);
   --icon-6-fill-0-font-family: var(--font-family-icon);
-  --icon-6-fill-0-font-size: var(--font-size-24);
+  --icon-6-fill-0-font-size: var(--font-size-22);
   --icon-6-fill-0-font-weight: var(--font-weight-icon);
   --icon-6-fill-0-letter-spacing: var(--letter-spacing-normal);
   --icon-6-fill-0-line-height: var(--line-height-leading-none);
   --icon-6-fill-1-font-family: var(--font-family-icon);
-  --icon-6-fill-1-font-size: var(--font-size-24);
+  --icon-6-fill-1-font-size: var(--font-size-22);
   --icon-6-fill-1-font-weight: var(--font-weight-icon);
   --icon-6-fill-1-letter-spacing: var(--letter-spacing-normal);
   --icon-6-fill-1-line-height: var(--line-height-leading-none);
   --icon-7-fill-0-font-family: var(--font-family-icon);
-  --icon-7-fill-0-font-size: var(--font-size-28);
+  --icon-7-fill-0-font-size: var(--font-size-24);
   --icon-7-fill-0-font-weight: var(--font-weight-icon);
   --icon-7-fill-0-letter-spacing: var(--letter-spacing-normal);
   --icon-7-fill-0-line-height: var(--line-height-leading-none);
   --icon-7-fill-1-font-family: var(--font-family-icon);
-  --icon-7-fill-1-font-size: var(--font-size-28);
+  --icon-7-fill-1-font-size: var(--font-size-24);
   --icon-7-fill-1-font-weight: var(--font-weight-icon);
   --icon-7-fill-1-letter-spacing: var(--letter-spacing-normal);
   --icon-7-fill-1-line-height: var(--line-height-leading-none);
   --icon-8-fill-0-font-family: var(--font-family-icon);
-  --icon-8-fill-0-font-size: var(--font-size-32);
+  --icon-8-fill-0-font-size: var(--font-size-28);
   --icon-8-fill-0-font-weight: var(--font-weight-icon);
   --icon-8-fill-0-letter-spacing: var(--letter-spacing-normal);
   --icon-8-fill-0-line-height: var(--line-height-leading-none);
   --icon-8-fill-1-font-family: var(--font-family-icon);
-  --icon-8-fill-1-font-size: var(--font-size-32);
+  --icon-8-fill-1-font-size: var(--font-size-28);
   --icon-8-fill-1-font-weight: var(--font-weight-icon);
   --icon-8-fill-1-letter-spacing: var(--letter-spacing-normal);
   --icon-8-fill-1-line-height: var(--line-height-leading-none);
   --icon-9-fill-0-font-family: var(--font-family-icon);
-  --icon-9-fill-0-font-size: var(--font-size-36);
+  --icon-9-fill-0-font-size: var(--font-size-32);
   --icon-9-fill-0-font-weight: var(--font-weight-icon);
   --icon-9-fill-0-letter-spacing: var(--letter-spacing-normal);
   --icon-9-fill-0-line-height: var(--line-height-leading-none);
   --icon-9-fill-1-font-family: var(--font-family-icon);
-  --icon-9-fill-1-font-size: var(--font-size-36);
+  --icon-9-fill-1-font-size: var(--font-size-32);
   --icon-9-fill-1-font-weight: var(--font-weight-icon);
   --icon-9-fill-1-letter-spacing: var(--letter-spacing-normal);
   --icon-9-fill-1-line-height: var(--line-height-leading-none);
   --icon-10-fill-0-font-family: var(--font-family-icon);
-  --icon-10-fill-0-font-size: var(--font-size-42);
+  --icon-10-fill-0-font-size: var(--font-size-36);
   --icon-10-fill-0-font-weight: var(--font-weight-icon);
   --icon-10-fill-0-letter-spacing: var(--letter-spacing-normal);
   --icon-10-fill-0-line-height: var(--line-height-leading-none);
   --icon-10-fill-1-font-family: var(--font-family-icon);
-  --icon-10-fill-1-font-size: var(--font-size-42);
+  --icon-10-fill-1-font-size: var(--font-size-36);
   --icon-10-fill-1-font-weight: var(--font-weight-icon);
   --icon-10-fill-1-letter-spacing: var(--letter-spacing-normal);
   --icon-10-fill-1-line-height: var(--line-height-leading-none);
   --icon-11-fill-0-font-family: var(--font-family-icon);
-  --icon-11-fill-0-font-size: var(--font-size-48);
+  --icon-11-fill-0-font-size: var(--font-size-42);
   --icon-11-fill-0-font-weight: var(--font-weight-icon);
   --icon-11-fill-0-letter-spacing: var(--letter-spacing-normal);
   --icon-11-fill-0-line-height: var(--line-height-leading-none);
   --icon-11-fill-1-font-family: var(--font-family-icon);
-  --icon-11-fill-1-font-size: var(--font-size-48);
+  --icon-11-fill-1-font-size: var(--font-size-42);
   --icon-11-fill-1-font-weight: var(--font-weight-icon);
   --icon-11-fill-1-letter-spacing: var(--letter-spacing-normal);
   --icon-11-fill-1-line-height: var(--line-height-leading-none);
   --icon-12-fill-0-font-family: var(--font-family-icon);
-  --icon-12-fill-0-font-size: var(--font-size-54);
+  --icon-12-fill-0-font-size: var(--font-size-48);
   --icon-12-fill-0-font-weight: var(--font-weight-icon);
   --icon-12-fill-0-letter-spacing: var(--letter-spacing-normal);
   --icon-12-fill-0-line-height: var(--line-height-leading-none);
   --icon-12-fill-1-font-family: var(--font-family-icon);
-  --icon-12-fill-1-font-size: var(--font-size-54);
+  --icon-12-fill-1-font-size: var(--font-size-48);
   --icon-12-fill-1-font-weight: var(--font-weight-icon);
   --icon-12-fill-1-letter-spacing: var(--letter-spacing-normal);
   --icon-12-fill-1-line-height: var(--line-height-leading-none);
+  --icon-13-fill-0-font-family: var(--font-family-icon);
+  --icon-13-fill-0-font-size: var(--font-size-54);
+  --icon-13-fill-0-font-weight: var(--font-weight-icon);
+  --icon-13-fill-0-letter-spacing: var(--letter-spacing-normal);
+  --icon-13-fill-0-line-height: var(--line-height-leading-none);
+  --icon-13-fill-1-font-family: var(--font-family-icon);
+  --icon-13-fill-1-font-size: var(--font-size-54);
+  --icon-13-fill-1-font-weight: var(--font-weight-icon);
+  --icon-13-fill-1-letter-spacing: var(--letter-spacing-normal);
+  --icon-13-fill-1-line-height: var(--line-height-leading-none);
 
   /* 角丸 - デフォルト値は設定可能 */
   /* NOTE: ここに書かれた var(--radius-*) は「置換前のデフォルト値」で、
@@ -1614,4 +1625,20 @@
     letter-spacing: var(--icon-12-fill-1-letter-spacing);
     line-height: var(--icon-12-fill-1-line-height);
   }
+  .icon-13-fill-0 {
+    font-family: var(--icon-13-fill-0-font-family);
+    font-size: var(--icon-13-fill-0-font-size);
+    font-weight: var(--icon-13-fill-0-font-weight);
+    font-variation-settings: var(--font-weight-icon-fill-0);
+    letter-spacing: var(--icon-13-fill-0-letter-spacing);
+    line-height: var(--icon-13-fill-0-line-height);
+  }
+  .icon-13-fill-1 {
+    font-family: var(--icon-13-fill-1-font-family);
+    font-size: var(--icon-13-fill-1-font-size);
+    font-weight: var(--icon-13-fill-1-font-weight);
+    font-variation-settings: var(--font-weight-icon-fill-1);
+    letter-spacing: var(--icon-13-fill-1-letter-spacing);
+    line-height: var(--icon-13-fill-1-line-height);
+  }
 }