refactor: Layer Identity トークンをプリミティブ名に変更#41
Merged
shunei-web merged 1 commit intodevelop/v1.1from Mar 5, 2026
Merged
Conversation
Tokens 層のセマンティック名（--layer-tokens 等）を hue ベースの プリミティブ名（--violet-500 等）に変更。 セマンティックマッピングは Theme 層に移動。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
shunei-web
added a commit
that referenced
this pull request
Mar 12, 2026
* feat: モダン CSS 機能を統合 — light-dark() / Container Queries / @scope / Scroll-driven Animations - Theme 層: light-dark() でライト・ダークカラーを1ファイルに統合（dark.css は拡張ポイントとして空で残存） - Component 層: c-card に container-type: inline-size と @container クエリを追加、@scope で境界を定義 - Animation 層: 全5ファイルに @supports (animation-timeline: view()) ブロックを追加し、Scroll-driven Animations をプログレッシブエンハンスメントで導入 - JS: IntersectionObserver / stagger delay を animation-timeline 対応ブラウザではスキップ Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: l-container 追加・dark.css 削除・Container Queries モダン構文化 - l-container.css 新規作成（container-type: inline-size） - c-card から container-type を削除し l-container に委譲 - @container 構文を (min-width: 480px) → (width >= 480px) に更新 - dark.css 削除（light-dark() で color.css に統合済み） - style.css の import 整理（l-container 追加、dark.css 削除） - index.html の各 c-card を l-container で包む - layers/index.html の Theme コード例を light-dark() パターンに更新 Closes #27 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: Scroll-driven Animations を削除し IntersectionObserver に統一 - 全アニメーション CSS から @supports (animation-timeline: view()) ブロックを削除 - main.js から SDA 早期リターンを削除 - 全ブラウザで IntersectionObserver + CSS transition による時間ベースのフェードインに統一 - SDA はスクロール位置連動のため体験が不自然と判断（将来の方向性として記録済み） Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: アニメーションをコンポーネント単位に変更 - index.html: a-stagger をグリッドから削除、各 l-container に a-fade-in-slide-up を付与 - layers/index.html: p-layer-showcase 全体から各 __item に a-fade-in-slide-up を移動 - 画面に入った順に個別フェードインする自然な体験に改善 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: フォームフィールド個別アニメーション・初期表示フェード修正 - contact/index.html: フォーム全体→各フィールド+ボタンに a-fade-in-slide-up を付与 - main.js: rAF 2回ネストで初回ペイント後に IO 開始（初期表示要素のフェードが見えるように） Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: 初期表示要素をフェードのみに変更 - ヒーロー lead/actions を a-fade-in-activate（フェードのみ）に変更 - 各ページ冒頭の段落も a-fade-in-activate に統一 - スクロールで入る要素は a-fade-in-slide-up を維持 - setTimeout 遅延を削除し即時 IO 開始に戻す Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: philosophy ページのアニメーションをセクション単位に分割 l-stack 全体の一括アニメーションから、4つのセクションそれぞれに a-fade-in-slide-up を付与する方式に変更。スクロールに応じて 各セクションが個別にフェードイン＋スライドアップする。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: CSS読み込み時の逆方向トランジションを防止 transition を .is-active 側に移動。CSS が読み込まれた瞬間に 初期状態（opacity: 0, translate等）への変化にトランジションが 掛かり、定位置→開始位置→定位置と動く問題を修正。 対象: a-fade-in-activate, a-fade-in-slide-up, a-fade-in-slide-right, a-scale-in, a-stagger の全5ファイル。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: @layerセクションのアニメーションをコンポーネント単位に分割 l-stack 全体の一括アニメーションから、blockquote・code-block・p それぞれに a-fade-in-slide-up を付与。大きなブロック単位での translate によるレイアウトシフトを防止。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: フッターナビゲーションの中央寄せ display: contents を削除し、grid-template-columns を auto に変更、 justify-content: center で中央配置に修正。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: アニメーションを @Keyframes + @media パターンに刷新 transition（双方向）から animation（一方向）に変更し、 CSS読み込み時の逆方向再生を原理的に排除。 - @Keyframes で一方向アニメーションを定義 - @media (prefers-reduced-motion: no-preference) and (scripting: enabled) で全体をラップ → reduce-motion / JS無効時のリセットコード不要 - 対象: a-fade-in-activate, a-fade-in-slide-up, a-fade-in-slide-right, a-scale-in, a-stagger の全5ファイル Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: 全5種アニメーションの適材適所な配置 - hero: a-scale-in（ズーム登場） - h2見出し: a-fade-in-slide-up（下からスライド） - blockquote: a-fade-in-slide-right（左からスライド） - フッターnav: a-stagger（順次表示） - h1/説明文: a-fade-in-activate / a-fade-in-slide-up - Layers Animation層のコード例を@Keyframes+@mediaパターンに更新 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: フッター水平線を全幅に・不要なラッパー削除 - l-inner / p-footer__inner ラッパーを削除しHTML構造をフラット化 - p-footer__nav と p-footer__bottom に個別 padding-inline を適用 - border-block-start がビューポート全幅に表示されるように Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: レビュー指摘対応（stagger依存解消・コード例修正） - a-stagger.css に専用 @Keyframes stagger-slide-up を定義 （a-fade-in-slide-up.css への暗黙依存を解消） - layers/index.html の Animation コード例を実装と一致させる （ease-out → var(--ease-out-cubic)） Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: インラインスタイル撲滅・層設計の改善 (#38) - 32箇所のインラインスタイルを全て CSS に移行（0箇所達成） - l-stack / l-grid を完全除去し Project Element に置換 - reset.css の :where() 疑似要素バグ修正 - focus-visible を reset.css（汎用）と base.css（テーマ固有）に分離 - base.css の img 重複を解消 - Foundation に container-type、Layout に -flush Modifier 追加 - 新規 Project CSS: p-home / p-philosophy / p-layers / p-contact Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: layers ページのモバイル横スクロールを修正 グリッド項目の min-inline-size: auto により pre 要素がグリッドカラムを 押し広げていた。__description に min-inline-size: 0 を追加して解消。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: インラインスタイル撲滅・層設計の改善 (#39) * feat: モダン CSS 機能を統合 — light-dark() / Container Queries / @scope / Scroll-driven Animations - Theme 層: light-dark() でライト・ダークカラーを1ファイルに統合（dark.css は拡張ポイントとして空で残存） - Component 層: c-card に container-type: inline-size と @container クエリを追加、@scope で境界を定義 - Animation 層: 全5ファイルに @supports (animation-timeline: view()) ブロックを追加し、Scroll-driven Animations をプログレッシブエンハンスメントで導入 - JS: IntersectionObserver / stagger delay を animation-timeline 対応ブラウザではスキップ Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: l-container 追加・dark.css 削除・Container Queries モダン構文化 - l-container.css 新規作成（container-type: inline-size） - c-card から container-type を削除し l-container に委譲 - @container 構文を (min-width: 480px) → (width >= 480px) に更新 - dark.css 削除（light-dark() で color.css に統合済み） - style.css の import 整理（l-container 追加、dark.css 削除） - index.html の各 c-card を l-container で包む - layers/index.html の Theme コード例を light-dark() パターンに更新 Closes #27 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: Scroll-driven Animations を削除し IntersectionObserver に統一 - 全アニメーション CSS から @supports (animation-timeline: view()) ブロックを削除 - main.js から SDA 早期リターンを削除 - 全ブラウザで IntersectionObserver + CSS transition による時間ベースのフェードインに統一 - SDA はスクロール位置連動のため体験が不自然と判断（将来の方向性として記録済み） Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: アニメーションをコンポーネント単位に変更 - index.html: a-stagger をグリッドから削除、各 l-container に a-fade-in-slide-up を付与 - layers/index.html: p-layer-showcase 全体から各 __item に a-fade-in-slide-up を移動 - 画面に入った順に個別フェードインする自然な体験に改善 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: フォームフィールド個別アニメーション・初期表示フェード修正 - contact/index.html: フォーム全体→各フィールド+ボタンに a-fade-in-slide-up を付与 - main.js: rAF 2回ネストで初回ペイント後に IO 開始（初期表示要素のフェードが見えるように） Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: 初期表示要素をフェードのみに変更 - ヒーロー lead/actions を a-fade-in-activate（フェードのみ）に変更 - 各ページ冒頭の段落も a-fade-in-activate に統一 - スクロールで入る要素は a-fade-in-slide-up を維持 - setTimeout 遅延を削除し即時 IO 開始に戻す Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: philosophy ページのアニメーションをセクション単位に分割 l-stack 全体の一括アニメーションから、4つのセクションそれぞれに a-fade-in-slide-up を付与する方式に変更。スクロールに応じて 各セクションが個別にフェードイン＋スライドアップする。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: CSS読み込み時の逆方向トランジションを防止 transition を .is-active 側に移動。CSS が読み込まれた瞬間に 初期状態（opacity: 0, translate等）への変化にトランジションが 掛かり、定位置→開始位置→定位置と動く問題を修正。 対象: a-fade-in-activate, a-fade-in-slide-up, a-fade-in-slide-right, a-scale-in, a-stagger の全5ファイル。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: @layerセクションのアニメーションをコンポーネント単位に分割 l-stack 全体の一括アニメーションから、blockquote・code-block・p それぞれに a-fade-in-slide-up を付与。大きなブロック単位での translate によるレイアウトシフトを防止。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: フッターナビゲーションの中央寄せ display: contents を削除し、grid-template-columns を auto に変更、 justify-content: center で中央配置に修正。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: アニメーションを @Keyframes + @media パターンに刷新 transition（双方向）から animation（一方向）に変更し、 CSS読み込み時の逆方向再生を原理的に排除。 - @Keyframes で一方向アニメーションを定義 - @media (prefers-reduced-motion: no-preference) and (scripting: enabled) で全体をラップ → reduce-motion / JS無効時のリセットコード不要 - 対象: a-fade-in-activate, a-fade-in-slide-up, a-fade-in-slide-right, a-scale-in, a-stagger の全5ファイル Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: 全5種アニメーションの適材適所な配置 - hero: a-scale-in（ズーム登場） - h2見出し: a-fade-in-slide-up（下からスライド） - blockquote: a-fade-in-slide-right（左からスライド） - フッターnav: a-stagger（順次表示） - h1/説明文: a-fade-in-activate / a-fade-in-slide-up - Layers Animation層のコード例を@Keyframes+@mediaパターンに更新 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: フッター水平線を全幅に・不要なラッパー削除 - l-inner / p-footer__inner ラッパーを削除しHTML構造をフラット化 - p-footer__nav と p-footer__bottom に個別 padding-inline を適用 - border-block-start がビューポート全幅に表示されるように Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: レビュー指摘対応（stagger依存解消・コード例修正） - a-stagger.css に専用 @Keyframes stagger-slide-up を定義 （a-fade-in-slide-up.css への暗黙依存を解消） - layers/index.html の Animation コード例を実装と一致させる （ease-out → var(--ease-out-cubic)） Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: インラインスタイル撲滅・層設計の改善 (#38) - 32箇所のインラインスタイルを全て CSS に移行（0箇所達成） - l-stack / l-grid を完全除去し Project Element に置換 - reset.css の :where() 疑似要素バグ修正 - focus-visible を reset.css（汎用）と base.css（テーマ固有）に分離 - base.css の img 重複を解消 - Foundation に container-type、Layout に -flush Modifier 追加 - 新規 Project CSS: p-home / p-philosophy / p-layers / p-contact Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: layers ページのモバイル横スクロールを修正 グリッド項目の min-inline-size: auto により pre 要素がグリッドカラムを 押し広げていた。__description に min-inline-size: 0 を追加して解消。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> * refactor: Layer Identity トークンをプリミティブ名に変更 (#40) (#41) Tokens 層のセマンティック名（--layer-tokens 等）を hue ベースの プリミティブ名（--violet-500 等）に変更。 セマンティックマッピングは Theme 層に移動。 Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> * refactor: mFLOCSS v1.1 仕様準拠の全面リファクタリング - @import layer() 一元管理方式に移行（§8 推奨） - @Property 宣言を tokens/property.css に分離（§4） - 全 CSS ファイルから @layer ラッパーを除去 - c-badge のサイト固有 Modifier を除去し、プライベートカスタムプロパティ注入パターンに移行（§5.5, §7） - c-skip-link の position: fixed を p-skip-link.css に分離（§5.5 Responsibility Test） - c-card から @scope を除去（§1 将来の展望） - 機能的トランジションの prefers-reduced-motion ガードを除去（§5.7） - HTML: バッジの Modifier を親の Project 要素に移動、p-home__card エレメント追加 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: HTML/JS を仕様 v1.1 と完全整合・アクセシビリティ改善 - 全ページの層名・役割記述を仕様の公式用語に統一 - 詳細度コードサンプルの合理的なエスカレーション例に修正 - CSS進化の説明に :has(), Container Queries, @scope を追加 - バッジをプライベートカスタムプロパティ注入パターンに移行（Philosophy） - 外部リンクに target="_blank" rel="noopener noreferrer" 追加 - @import layer() 方式との違いを注記（Layers） - JS: フォーカストラップ・フォーカス移動・prefers-reduced-motion チェック追加 - JS: IntersectionObserver 存在チェック追加 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: フォーム充実（select・radio・checkbox・エラー状態） - Foundation: select/radio/checkbox/label のリセット追加 - Theme: --color-error / --color-error-bg セマンティックカラー追加 - Project: select・radio・checkbox・エラー状態のスタイルパターン追加 - HTML: select(種別)・radio(優先度)・checkbox(同意)・fieldset/legend 追加 - バリデーションはブラウザネイティブに委任（CSS設計リファレンスの範囲） Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: radio/checkbox/select の基本スタイルを Foundation 層に移動 base.css と同じ設計方針（要素セレクタ + :where() の基本スタイル）に統一。 Project 層にはレイアウト・エラー状態のみ残す。 HTML から不要な p-contact-form__radio / __checkbox クラスを除去。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: Tokens→Theme 参照チェーンの MUST 違反修正 + container query 統一 - tokens/color.css: error 状態カラートークン追加（--error-light/dark/bg-light/bg-dark） - theme/color.css: ハードコード oklch → var() でトークン参照に修正 - c-card.css: @container (width) → (inline-size) に統一 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: 仕様 v1.1 準拠のマークアップ全面再構築 - 全4ページの HTML を仕様 + CSS 実装から1から再構築 - aria-current="page" をナビゲーションに動的付与（a11y 改善） - ラジオボタングループに required 属性を追加 - ヘッダー/フッター構造を4ページ間で完全統一 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: FOUC 解消 — CSS を HTML link タグで直接読み込み - CSS 読み込みを JS import から HTML <link rel="stylesheet"> に移行 - <meta name="color-scheme" content="light dark"> を全ページに追加 - ページ遷移時のダークモードフラッシュとスタイル崩れを解消 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
--layer-tokens等のセマンティック名を hue ベースのプリミティブ名に変更--color-layer-*）を追加--layer-tokens--violet-500--color-layer-tokens--layer-theme--indigo-500--color-layer-theme--layer-foundation--blue-500--color-layer-foundation--layer-layout--teal-500--color-layer-layout--layer-component--green-500--color-layer-component--layer-project--amber-500--color-layer-project--layer-animation--orange-500--color-layer-animation--layer-utility--rose-500--color-layer-utilityCloses #40
Test plan
🤖 Generated with Claude Code