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 all commits
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
220 changes: 113 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,131 @@
}

/* セマンティクスのトークン定義（Tailwind ユーティリティ生成用） */
/* 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-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