From 985930e352841420635cbeb4069cb2239124e2d0 Mon Sep 17 00:00:00 2001 From: touyou <465697+touyou@users.noreply.github.com> Date: Fri, 10 Jul 2026 15:22:44 +0900 Subject: [PATCH 1/2] =?UTF-8?q?chore:=20sparkle-design-cli=202.4.1=20?= =?UTF-8?q?=E3=81=A7=20sparkle-design.css=20=E3=82=92=E5=86=8D=E7=94=9F?= =?UTF-8?q?=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @theme inline のセマンティック宣言をプリミティブ直接参照から自己参照に変更する 不具合修正（goodpatch/sparkle-design-internal#229 フォローアップ、 sparkle-design-cli v2.4.1）を取り込む。生成物のみの変更で、デフォルト表示 （属性スコープでの上書きを使わない現状の運用）には影響しない （Storybook で Button/Switch/Tabs をピクセル差分ゼロで確認済み）。 Co-Authored-By: Claude Sonnet 5 --- src/app/sparkle-design.css | 226 +++++++++++++++++++------------------ 1 file changed, 119 insertions(+), 107 deletions(-) diff --git a/src/app/sparkle-design.css b/src/app/sparkle-design.css index 345af79..f02ca24 100644 --- a/src/app/sparkle-design.css +++ b/src/app/sparkle-design.css @@ -309,125 +309,137 @@ } /* セマンティクスのトークン定義（Tailwind ユーティリティ生成用） */ +/* NOTE (issue #229): 各宣言は上の「セマンティックトークン」:root ブロックにある + 同名変数を自己参照している（例: --color-primary-500: var(--color-primary-500)）。 + プリミティブへ直接参照させない（例: var(--color-blue-500) にしない）のが + 重要な設計判断で、Tailwind v4 は @theme inline の宣言右辺をそのまま utility class + に埋め込む（インライン化する）ため、直接参照だと bg-primary-500 等の compiled + utility が最初からプリミティブ変数（--color-blue-500 等）だけを参照し、 + 同名のセマンティック変数（--color-primary-500）は一切参照されなくなる。 + この状態では、`:root` / `[data-attr]` セレクタでセマンティック変数だけを + ランタイム上書きしても utility class の見た目は変わらない + （generate --scope が解決しようとしていた issue #229 の問題そのもの）。 + 自己参照にしておけば、compiled utility は常にセマンティック変数名を参照し続け、 + 別セレクタでその変数を上書きするだけでランタイムに追従する。 */ @theme inline { /* セマンティクスカラー定義 */ - --color-neutral-50: var(--color-gray-50); - --color-neutral-100: var(--color-gray-100); - --color-neutral-200: var(--color-gray-200); - --color-neutral-300: var(--color-gray-300); - --color-neutral-400: var(--color-gray-400); - --color-neutral-500: var(--color-gray-500); - --color-neutral-600: var(--color-gray-600); - --color-neutral-700: var(--color-gray-700); - --color-neutral-800: var(--color-gray-800); - --color-neutral-900: var(--color-gray-900); + --color-neutral-50: var(--color-neutral-50); + --color-neutral-100: var(--color-neutral-100); + --color-neutral-200: var(--color-neutral-200); + --color-neutral-300: var(--color-neutral-300); + --color-neutral-400: var(--color-neutral-400); + --color-neutral-500: var(--color-neutral-500); + --color-neutral-600: var(--color-neutral-600); + --color-neutral-700: var(--color-neutral-700); + --color-neutral-800: var(--color-neutral-800); + --color-neutral-900: var(--color-neutral-900); /* プライマリカラーは設定可能 */ - --color-primary-50: var(--color-blue-50); - --color-primary-100: var(--color-blue-100); - --color-primary-200: var(--color-blue-200); - --color-primary-300: var(--color-blue-300); - --color-primary-400: var(--color-blue-400); - --color-primary-500: var(--color-blue-500); - --color-primary-600: var(--color-blue-600); - --color-primary-700: var(--color-blue-700); - --color-primary-800: var(--color-blue-800); - --color-primary-900: var(--color-blue-900); - - --color-secondary-50: var(--color-gray-50); - --color-secondary-100: var(--color-gray-100); - --color-secondary-200: var(--color-gray-200); - --color-secondary-300: var(--color-gray-300); - --color-secondary-400: var(--color-gray-400); - --color-secondary-500: var(--color-gray-500); - --color-secondary-600: var(--color-gray-600); - --color-secondary-700: var(--color-gray-700); - --color-secondary-800: var(--color-gray-800); - --color-secondary-900: var(--color-gray-900); - - --color-info-50: var(--color-blue-50); - --color-info-100: var(--color-blue-100); - --color-info-200: var(--color-blue-200); - --color-info-300: var(--color-blue-300); - --color-info-400: var(--color-blue-400); - --color-info-500: var(--color-blue-500); - --color-info-600: var(--color-blue-600); - --color-info-700: var(--color-blue-700); - --color-info-800: var(--color-blue-800); - --color-info-900: var(--color-blue-900); - - --color-success-50: var(--color-green-50); - --color-success-100: var(--color-green-100); - --color-success-200: var(--color-green-200); - --color-success-300: var(--color-green-300); - --color-success-400: var(--color-green-400); - --color-success-500: var(--color-green-500); - --color-success-600: var(--color-green-600); - --color-success-700: var(--color-green-700); - --color-success-800: var(--color-green-800); - --color-success-900: var(--color-green-900); - - --color-warning-50: var(--color-yellow-50); - --color-warning-100: var(--color-yellow-100); - --color-warning-200: var(--color-yellow-200); - --color-warning-300: var(--color-yellow-300); - --color-warning-400: var(--color-yellow-400); - --color-warning-500: var(--color-yellow-500); - --color-warning-600: var(--color-yellow-600); - --color-warning-700: var(--color-yellow-700); - --color-warning-800: var(--color-yellow-800); - --color-warning-900: var(--color-yellow-900); - - --color-negative-50: var(--color-red-50); - --color-negative-100: var(--color-red-100); - --color-negative-200: var(--color-red-200); - --color-negative-300: var(--color-red-300); - --color-negative-400: var(--color-red-400); - --color-negative-500: var(--color-red-500); - --color-negative-600: var(--color-red-600); - --color-negative-700: var(--color-red-700); - --color-negative-800: var(--color-red-800); - --color-negative-900: var(--color-red-900); + --color-primary-50: var(--color-primary-50); + --color-primary-100: var(--color-primary-100); + --color-primary-200: var(--color-primary-200); + --color-primary-300: var(--color-primary-300); + --color-primary-400: var(--color-primary-400); + --color-primary-500: var(--color-primary-500); + --color-primary-600: var(--color-primary-600); + --color-primary-700: var(--color-primary-700); + --color-primary-800: var(--color-primary-800); + --color-primary-900: var(--color-primary-900); + + --color-secondary-50: var(--color-secondary-50); + --color-secondary-100: var(--color-secondary-100); + --color-secondary-200: var(--color-secondary-200); + --color-secondary-300: var(--color-secondary-300); + --color-secondary-400: var(--color-secondary-400); + --color-secondary-500: var(--color-secondary-500); + --color-secondary-600: var(--color-secondary-600); + --color-secondary-700: var(--color-secondary-700); + --color-secondary-800: var(--color-secondary-800); + --color-secondary-900: var(--color-secondary-900); + + --color-info-50: var(--color-info-50); + --color-info-100: var(--color-info-100); + --color-info-200: var(--color-info-200); + --color-info-300: var(--color-info-300); + --color-info-400: var(--color-info-400); + --color-info-500: var(--color-info-500); + --color-info-600: var(--color-info-600); + --color-info-700: var(--color-info-700); + --color-info-800: var(--color-info-800); + --color-info-900: var(--color-info-900); + + --color-success-50: var(--color-success-50); + --color-success-100: var(--color-success-100); + --color-success-200: var(--color-success-200); + --color-success-300: var(--color-success-300); + --color-success-400: var(--color-success-400); + --color-success-500: var(--color-success-500); + --color-success-600: var(--color-success-600); + --color-success-700: var(--color-success-700); + --color-success-800: var(--color-success-800); + --color-success-900: var(--color-success-900); + + --color-warning-50: var(--color-warning-50); + --color-warning-100: var(--color-warning-100); + --color-warning-200: var(--color-warning-200); + --color-warning-300: var(--color-warning-300); + --color-warning-400: var(--color-warning-400); + --color-warning-500: var(--color-warning-500); + --color-warning-600: var(--color-warning-600); + --color-warning-700: var(--color-warning-700); + --color-warning-800: var(--color-warning-800); + --color-warning-900: var(--color-warning-900); + + --color-negative-50: var(--color-negative-50); + --color-negative-100: var(--color-negative-100); + --color-negative-200: var(--color-negative-200); + --color-negative-300: var(--color-negative-300); + --color-negative-400: var(--color-negative-400); + --color-negative-500: var(--color-negative-500); + --color-negative-600: var(--color-negative-600); + --color-negative-700: var(--color-negative-700); + --color-negative-800: var(--color-negative-800); + --color-negative-900: var(--color-negative-900); /* コンポーネントカラー定義 */ - --color-divider-low: var(--color-neutral-100); - --color-divider-middle: var(--color-neutral-200); - --color-divider-high: var(--color-neutral-300); - --color-text-disabled: var(--color-neutral-300); - --color-text-placeholder: var(--color-neutral-500); - --color-text-low: var(--color-neutral-500); - --color-text-middle: var(--color-neutral-700); - --color-text-high: var(--color-neutral-900); - --color-skeleton-fill: var(--color-neutral-200); + --color-divider-low: var(--color-divider-low); + --color-divider-middle: var(--color-divider-middle); + --color-divider-high: var(--color-divider-high); + --color-text-disabled: var(--color-text-disabled); + --color-text-placeholder: var(--color-text-placeholder); + --color-text-low: var(--color-text-low); + --color-text-middle: var(--color-text-middle); + --color-text-high: var(--color-text-high); + --color-skeleton-fill: var(--color-skeleton-fill); /* ベースカラー（base） - gray と同等 */ - --color-base-50: var(--color-gray-50); - --color-base-100: var(--color-gray-100); - --color-base-200: var(--color-gray-200); - --color-base-300: var(--color-gray-300); - --color-base-400: var(--color-gray-400); - --color-base-500: var(--color-gray-500); - --color-base-600: var(--color-gray-600); - --color-base-700: var(--color-gray-700); - --color-base-800: var(--color-gray-800); - --color-base-900: var(--color-gray-900); + --color-base-50: var(--color-base-50); + --color-base-100: var(--color-base-100); + --color-base-200: var(--color-base-200); + --color-base-300: var(--color-base-300); + --color-base-400: var(--color-base-400); + --color-base-500: var(--color-base-500); + --color-base-600: var(--color-base-600); + --color-base-700: var(--color-base-700); + --color-base-800: var(--color-base-800); + --color-base-900: var(--color-base-900); /* 角丸 - デフォルト値は設定可能 */ - --radius-divide: var(--radius-none); - --radius-minimum: var(--radius-xs); - --radius-notice: var(--radius-sm); - --radius-action: var(--radius-md); - --radius-halfModal: var(--radius-lg); - --radius-modal: var(--radius-xl); - --radius-round: var(--radius-full); + --radius-divide: var(--radius-divide); + --radius-minimum: var(--radius-minimum); + --radius-notice: var(--radius-notice); + --radius-action: var(--radius-action); + --radius-halfModal: var(--radius-halfModal); + --radius-modal: var(--radius-modal); + --radius-round: var(--radius-round); /* シャドウ */ - --shadow-base: var(--shadow-none); - --shadow-flat: var(--shadow-2xs); - --shadow-raise: var(--shadow-xs); - --shadow-stick: var(--shadow-sm); - --shadow-float: var(--shadow-md); - --shadow-popout: var(--shadow-lg); + --shadow-base: var(--shadow-base); + --shadow-flat: var(--shadow-flat); + --shadow-raise: var(--shadow-raise); + --shadow-stick: var(--shadow-stick); + --shadow-float: var(--shadow-float); + --shadow-popout: var(--shadow-popout); } /* フォントレンダリング */ From 048866dd7eb931c0b746b6a0af58752dfe4c53ae Mon Sep 17 00:00:00 2001 From: touyou <465697+touyou@users.noreply.github.com> Date: Fri, 10 Jul 2026 15:47:35 +0900 Subject: [PATCH 2/2] =?UTF-8?q?chore:=20sparkle-design-cli=202.4.2=20?= =?UTF-8?q?=E3=81=A7=20sparkle-design.css=20=E3=82=92=E5=86=8D=E7=94=9F?= =?UTF-8?q?=E6=88=90=EF=BC=88=E3=82=B3=E3=83=A1=E3=83=B3=E3=83=88=E7=B0=A1?= =?UTF-8?q?=E6=BD=94=E5=8C=96=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @theme inline 自己参照コメントを簡潔にし、社内 issue 番号への言及を削除した sparkle-design-cli v2.4.2 を反映。生成される CSS は公開 npm パッケージにも 同梱され消費側の CSS にそのまま出力されるため、社内 issue 番号を含めるべき ではなかった。 Co-Authored-By: Claude Sonnet 5 --- src/app/sparkle-design.css | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/src/app/sparkle-design.css b/src/app/sparkle-design.css index f02ca24..3b8eb88 100644 --- a/src/app/sparkle-design.css +++ b/src/app/sparkle-design.css @@ -309,18 +309,12 @@ } /* セマンティクスのトークン定義（Tailwind ユーティリティ生成用） */ -/* NOTE (issue #229): 各宣言は上の「セマンティックトークン」:root ブロックにある - 同名変数を自己参照している（例: --color-primary-500: var(--color-primary-500)）。 - プリミティブへ直接参照させない（例: var(--color-blue-500) にしない）のが - 重要な設計判断で、Tailwind v4 は @theme inline の宣言右辺をそのまま utility class - に埋め込む（インライン化する）ため、直接参照だと bg-primary-500 等の compiled - utility が最初からプリミティブ変数（--color-blue-500 等）だけを参照し、 - 同名のセマンティック変数（--color-primary-500）は一切参照されなくなる。 - この状態では、`:root` / `[data-attr]` セレクタでセマンティック変数だけを - ランタイム上書きしても utility class の見た目は変わらない - （generate --scope が解決しようとしていた issue #229 の問題そのもの）。 - 自己参照にしておけば、compiled utility は常にセマンティック変数名を参照し続け、 - 別セレクタでその変数を上書きするだけでランタイムに追従する。 */ +/* NOTE: 各宣言は上の「セマンティックトークン」:root ブロックにある同名変数を + 自己参照している（例: --color-primary-500: var(--color-primary-500)）。 + プリミティブへの直接参照にしない意図的な設計。Tailwind v4 は @theme inline + の宣言右辺を compiled utility class にそのまま埋め込むため、直接参照だと + セマンティック変数が一切参照されなくなり、別セレクタでのランタイム上書きが + compiled utility に効かなくなる。 */ @theme inline { /* セマンティクスカラー定義 */ --color-neutral-50: var(--color-neutral-50);