Skip to content

refactor(styles): prefers-contrast: more をテーマトークンに集約#176

Merged
masuP9 merged 3 commits into
mainfrom
refactor/prefers-contrast-theme
May 13, 2026
Merged

refactor(styles): prefers-contrast: more をテーマトークンに集約#176
masuP9 merged 3 commits into
mainfrom
refactor/prefers-contrast-theme

Conversation

@masuP9
Copy link
Copy Markdown
Owner

@masuP9 masuP9 commented May 13, 2026

Summary

  • 24 個のパターン CSS から `@media (prefers-contrast: more)` ブロックを完全削除
  • `global.css` の `:root` / `.dark` で CSS 変数を高コントラスト版に上書きするテーマ層に集約
  • `black` / `white` / `#facc15` のパターン個別ハードコードを撲滅
  • 副次で `switch.css` の thumb を `var(--background)` に張り替えてテーマ追従
  • `CODING_RULES.md` に `prefers-contrast` の値ガイドを追記

`prefers-contrast: more` のスタイル更新は今後テーマ層 1 箇所で完結。`forced-colors: active` ブロックは別系統として維持。`CLAUDE.md` の整理は別コミットで含めている。

Test plan

  • `npm run build` 通過(553 ページ)
  • Playwright で `page.emulateMedia({ contrast: 'more' })` を使い、light/dark × normal/more の 4 マトリクスで以下を検証
    • accordion: collapsed/expanded × hover で文字が薄くならない(過去の不具合の回帰防止)
    • tabs: selected の判別性
    • toggle-button: pressed/non-pressed の対比
    • switch: track と thumb の対比(dark + more の checked で対比破綻していたのを `--input` 値調整と thumb 変数化で解消)
  • 残課題(別 PR): `toggle-button.css:187` の `#fde047` を `--ring` / 専用 token に統一、`window-splitter` の操作領域形状改善

🤖 Generated with Claude Code

masuP9 and others added 2 commits May 14, 2026 00:26
24 個のパターン CSS から @media (prefers-contrast: more) ブロックを削除し、
global.css の :root / .dark でテーマ変数を高コントラスト版に上書きする方式に集約。
これにより black / white / #facc15 のパターン個別ハードコードが撲滅され、
今後 prefers-contrast: more 用のスタイル更新はテーマ層 1 箇所で完結する。

- src/styles/global.css: @media (prefers-contrast: more) で :root と .dark の
  CSS 変数を OKLCH の高コントラスト版に上書き(--input は dark + more で
  0.55 に下げて switch track と white thumb の対比を確保)
- src/styles/patterns/*.css (23 ファイル) と src/patterns/menubar/menubar.css:
  @media (prefers-contrast: more) ブロックを削除(forced-colors: active は維持)
- src/styles/patterns/switch.css: thumb の background: white を
  background: var(--background) に変更してテーマ追従
- CODING_RULES.md: prefers-contrast の値ガイドを追記(high / low は仕様外)
- src/styles/patterns/tabs.css: forced-colors の selected 表現を SelectedItem
  ボーダーに変更、:focus → :focus-visible に整理

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
冗長な目標リスト、Astro リビルド版という過渡的な記述、移行状況セクションを削除。
コマンド一覧は package.json の scripts を参照する形に集約。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages Bot commented May 13, 2026

Deploying apg-patterns-examples with  Cloudflare Pages  Cloudflare Pages

Latest commit: cf00101
Status: ✅  Deploy successful!
Preview URL: https://caa3a330.apg-patterns-examples.pages.dev
Branch Preview URL: https://refactor-prefers-contrast-th.apg-patterns-examples.pages.dev

View logs

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@masuP9 masuP9 merged commit 297ee66 into main May 13, 2026
17 checks passed
@masuP9 masuP9 deleted the refactor/prefers-contrast-theme branch May 13, 2026 15:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant