Skip to content

chore: sparkle-design-cli 2.4.1 で sparkle-design.css を再生成 #289

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
touyou merged 2 commits into from
Jul 10, 2026
+113 −107
Merged

chore: sparkle-design-cli 2.4.1 で sparkle-design.css を再生成 #289

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
985930e
chore: sparkle-design-cli 2.4.1 で sparkle-design.css を再生成
touyou Jul 10, 2026
048866d
chore: sparkle-design-cli 2.4.2 で sparkle-design.css を再生成（コメント簡潔化）
touyou Jul 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
226 changes: 119 additions & 107 deletions src/app/sparkle-design.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

@chatgpt-codex-connector chatgpt-codex-connector Bot Jul 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Badge Avoid publishing self-referential registry theme vars

When make registry runs, scripts/build-sparkle-design-theme.mjs reads the @theme inline block and merges those declarations over the first :root block before writing sparkle-design-theme.json; with this self-reference pattern, the generated registry theme contains entries like color-primary-500: var(--color-primary-500). Registry consumers receive only those cssVars, so the variable is defined in terms of itself and semantic colors/radii/shadows become unresolved even though importing the full CSS in this app still works.

Useful? React with 👍 / 👎.

--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);
}

/* フォントレンダリング */
Expand Down
Loading