/* * Site color palette: derived tokens + component rules. * * ⚠ パレットごとの色トークンの正本は color-palettes-button-states.css（ロード順で後勝ち）と * inc/color-palettes.php（レジストリ）。以前ここにあった per-palette の色キー定義は * button-states.css と完全な二重定義（死宣言）だったため削除した（前後computed同値実証済み）。 * このファイルが持つのは: contrast-surface 派生トークン / リンクの役割トークン / * body背景・リンク等のコンポーネント規則。選択パレットは inc/color-palettes.php が html/body に付与。 */ html[data-tiptop-palette] { --tiptop-contrast-surface-bg: var(--tiptop-contrast); --tiptop-contrast-surface-text: var(--tiptop-base); --tiptop-contrast-surface-muted: color-mix(in srgb, var(--tiptop-contrast-surface-text) 72%, transparent); --tiptop-contrast-surface-border: color-mix(in srgb, var(--tiptop-contrast-surface-text) var(--tt-tint-soft), transparent); --tiptop-contrast-surface-button-bg: var(--tiptop-contrast-surface-text); --tiptop-contrast-surface-button-text: var(--tiptop-contrast-surface-bg); --tiptop-contrast-surface-button-border: var(--tiptop-contrast-surface-text); --tiptop-contrast-surface-button-hover-bg: transparent; --tiptop-contrast-surface-button-hover-text: var(--tiptop-contrast-surface-text); --tiptop-contrast-surface-button-hover-border: var(--tiptop-contrast-surface-text); } html[data-tiptop-palette] { --tiptop-link: var(--tiptop-contrast); --tiptop-link-hover: var(--tiptop-contrast); /* Issue #748: 本文インラインリンクだけをaccentへ戻す。カードタイトルも消費する * --tiptop-link-hoverはcontrastのまま維持し、本文専用トークンへ分離して波及を防ぐ。 */ --tiptop-body-link: var(--tiptop-accent); --tiptop-body-link-hover: var(--tiptop-accent); /* 分類バッジの文字色（Issue #1161）。 * 地が accent 10%・文字が accent だと**同系色なので原理的に低コントラスト**で、 * accent の明度が上がるほど必ず読めなくなる（既定12パレット中7件が実測でAA未達）。 * 文字だけ text に寄せると3面最小 8.45 まで上がり、**地は accent 10% のままなので * アクセントの気配は残る**。本文リンクの色（現状維持と判断された * 「リンクの色の個性」）とは副作用の重さが違うため、バッジだけ直す判断になった。 * トークンにしているのは子テーマが役割ごとに差し替えられるようにするため。 */ --tiptop-badge-text: var(--tiptop-text); /* 本文リンクの下線は承認済みモックに合わせて文字色そのまま（currentColor）にする * （意匠上の判断）。専用トークンは持たせない。 * * 当初は「文字色＝パレットの個性／下線＝リンクだと分かる手がかり」と役割を * 分ける狙いで、下線だけ contrast 由来（--tiptop-body-link-border）にしていた。 * そのとき「モックの下線は accent の40%濃度」と記録していたが、モックへ実際に * リンクを挿して計測すると text-decoration-color の指定が無く、下線は * currentColor＝accent の100%だった。40%という前提自体が誤っていた。 * モックとの差分をなくす方針に従い、専用トークンを廃してモックへ揃える。 * * 追記：この形で12パレットすべての見え方を確認し、現状維持でよいという * 判断が出ている。同じ検討を繰り返さないため経緯を残す。 * 白背景に対する本文リンクのコントラスト比は * plum-noir 9.47 / luxe-night 6.76 / mono-editorial 6.31 / sumi-shu 6.06 / * violet-noir 5.28 / tech-blue 3.21 / warm-craft 3.08 / cobalt-press 2.48 / * pop-bright 1.93 / ryokan-cha 1.82 / deep-forest 1.68 / navy-blush 1.64 * で、accent が淡いパレットではリンクが地の文に近づく。 * 下線だけ contrast 由来へ戻す案も検討したが、暗色パレット（luxe-night / * plum-noir / violet-noir）は contrast が背景と同じ側の色のため下線が完全に沈み * （比 1.00〜1.08）、明色を直す代わりに暗色を壊すことになる。 * 既定は mono-editorial（6.31）でモック準拠のまま成立しているため、現状を正とする。 * * **再確認・現状維持（Issue #1165）。** 上の実測は白背景1面のものだったので、 * base / surface / surface_alt の**3面**で測り直し、あわせて分類バッジも調べた。 * 本文リンクは3面でも同じ7パレット（navy-blush 1.64 / deep-forest 1.68 / * ryokan-cha 1.82 / pop-bright 1.93 / cobalt-press 2.48 / warm-craft 3.08 / * tech-blue 3.21）が未達だが、**上の現状維持の判断を覆す新情報にはならない**ため * 現状維持とした。検討した代案も実測済みで、`--tiptop-primary` へ寄せる案は * **未達が 7→8 パレットへ悪化する**（primary が淡い装飾色のパレットが多いため）。 * 全12パレットで通るのは「文字色＋下線」（3面最小 7.53）か「accent 25%＋文字色 75%」 * （同 4.71）だが、どちらもリンクの色の個性が実質消える。 * * **可読性が要件の案件は自由配色（custom）を使う。** #1161 で自由配色だけは * `--tiptop-body-link` に AA 保証が入った（`inc/color-palettes.php` の * `tiptop_theme_ensure_readable_color()`）。既定プリセットは意匠優先・AA が要るなら * custom、という使い分けが成立している＝**未達を放置したのではなく逃げ道がある**。 * * 分類バッジは同日に文字色を `--tiptop-badge-text`（既定 `--tiptop-text`）へ変えて * 全12パレット通過済み（Issue #1161）。同じ調査を三度繰り返さないためここに残す。 */ /* ナビ専用の別トークン。hoverで実際に変化が要るナビ系だけを * 別系統として分離する。既定は従来どおり「通常時=hover時=contrast」で変化なし＝ * 他パレット・イマーシブの見た目は不変。 */ --tiptop-nav-link: var(--tiptop-contrast); --tiptop-nav-link-hover: var(--tiptop-contrast); } /* 標準モードだけ、通常時をmutedに落としてhoverでcontrastへ上げる（モックに合わせた * 意匠上の判断）。イマーシブは上の既定値のまま＝変化なしを維持。 */ html[data-tiptop-palette] body.tiptop-standard-system { --tiptop-nav-link: var(--tiptop-muted); --tiptop-nav-link-hover: var(--tiptop-contrast); } /* Hero veil color follows the palette tone: black on dark palettes, white on light ones. Intensity follows the darkness slider (--tiptop-scene-overlay); 0 clears it in every direction. */ html:not([data-tiptop-palette-tone="dark"]) { --tt-scene-veil: 255 255 255; } html[data-tiptop-palette-tone="dark"] { --tt-scene-veil: 2 10 17; } body[class*="tiptop-palette-"] { background: linear-gradient(90deg, color-mix(in srgb, var(--tiptop-contrast) var(--tt-tint-faint), transparent) 1px, transparent 1px), linear-gradient(180deg, var(--tiptop-surface) 0, var(--tiptop-base) 360px); background-size: 72px 72px, auto; color: var(--tiptop-text); } html[data-tiptop-palette-tone="dark"] body, body.tiptop-palette-dark { background: linear-gradient(90deg, color-mix(in srgb, var(--tiptop-contrast) var(--tt-tint-faint), transparent) 1px, transparent 1px), linear-gradient(180deg, var(--tiptop-surface-alt) 0, var(--tiptop-base) 420px); background-size: 72px 72px, auto; } /* 標準モードのbodyは無地にする（CTAの下に縦線ボーダーが * 何本も見えていた）。上の2ルールは72px間隔の縦罫線グリッド＋上部グラデーションを * body背景に敷いている。従来は各セクションの背景色が全面を覆っていて見えなかったが、 * CTAをカード化して下に余白を作った結果、フッターとの隙間でbody背景が露出して初めて見えた。 * モックのbodyは無地（var(--tiptop-base)）なので、標準モードは装飾グリッドも上部 * グラデーションも持たない素の面にする。イマーシブは既存の見た目を維持。 */ body.tiptop-standard-system[class*="tiptop-palette-"], html[data-tiptop-palette-tone="dark"] body.tiptop-standard-system, body.tiptop-standard-system.tiptop-palette-dark { background: var(--tiptop-base); background-size: auto; } /* var(--tt-color-danger)は固定の暗い赤（#b3261e）で暗色パレット背景ではコントラスト不足になるため、 暗色パレットに限りtoken由来のまま明度だけ上げる（Issue #361検証時に発見） */ html[data-tiptop-palette-tone="dark"] body .wpcf7-not-valid-tip, body.tiptop-palette-dark .wpcf7-not-valid-tip, html[data-tiptop-palette-tone="dark"] body .tiptop-contact-form .wpcf7-acceptance a, body.tiptop-palette-dark .tiptop-contact-form .wpcf7-acceptance a { color: color-mix(in srgb, var(--tt-color-danger) 55%, white 45%); } html[data-tiptop-palette-tone="dark"] body .wpcf7-not-valid, body.tiptop-palette-dark .wpcf7-not-valid { border-color: color-mix(in srgb, var(--tt-color-danger) 55%, white 45%); } html[data-tiptop-palette] .site, html[data-tiptop-palette] .site-main, html[data-tiptop-palette] .tiptop-smooth-wrapper, html[data-tiptop-palette] .tiptop-smooth-content, html[data-tiptop-palette] .content-area, html[data-tiptop-palette] .entry-content, html[data-tiptop-palette] .tiptop-front-content { color: var(--tiptop-text); } html[data-tiptop-palette] h1:not(:where(.tiptop-own-color, .tiptop-own-color *)), html[data-tiptop-palette] h2:not(:where(.tiptop-own-color, .tiptop-own-color *)), html[data-tiptop-palette] h3:not(:where(.tiptop-own-color, .tiptop-own-color *)), html[data-tiptop-palette] h4:not(:where(.tiptop-own-color, .tiptop-own-color *)), html[data-tiptop-palette] h5:not(:where(.tiptop-own-color, .tiptop-own-color *)), html[data-tiptop-palette] h6:not(:where(.tiptop-own-color, .tiptop-own-color *)), html[data-tiptop-palette] .site-branding__title:not(:where(.tiptop-own-color, .tiptop-own-color *)), html[data-tiptop-palette] .entry-title:not(:where(.tiptop-own-color, .tiptop-own-color *)), html[data-tiptop-palette] .page-title:not(:where(.tiptop-own-color, .tiptop-own-color *)), html[data-tiptop-palette] .post-card__title:not(:where(.tiptop-own-color, .tiptop-own-color *)), html[data-tiptop-palette] .news-item__title:not(:where(.tiptop-own-color, .tiptop-own-color *)) { color: var(--tiptop-contrast); } html[data-tiptop-palette] a:not(:where(.tiptop-own-color, .tiptop-own-color *)) { color: var(--tiptop-link); } /* 下線の引き方も承認済みモックへ揃える。 * モックは text-decoration: underline に text-underline-offset: 0.2em で、 * 文字の下端からわずかに離した下線。実サイトは border-bottom で引いていたため、 * 行ボックスの底に付いて位置が違っていた。 * 下線色と太さはモックが指定を持たない（currentColor / auto）ので、こちらも * 指定しない。モックへリンクを挿して計測し、下線が accent の100%であることを * 確認したうえで合わせている。 */ html[data-tiptop-palette] .entry__content :where(p, li) a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text), html[data-tiptop-palette] .tiptop-page-content :where(p, li) a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text), html[data-tiptop-palette] .tiptop-front-content p a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text), html[data-tiptop-palette] .tiptop-front-content li a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text) { border-bottom: 0; text-decoration: underline; text-underline-offset: 0.2em; } html[data-tiptop-palette] .entry__content :where(p, li) a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text):not(:where(.tiptop-own-color, .tiptop-own-color *)), html[data-tiptop-palette] .tiptop-page-content :where(p, li) a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text):not(:where(.tiptop-own-color, .tiptop-own-color *)), html[data-tiptop-palette] .tiptop-front-content p a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text):not(:where(.tiptop-own-color, .tiptop-own-color *)), html[data-tiptop-palette] .tiptop-front-content li a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text):not(:where(.tiptop-own-color, .tiptop-own-color *)) { color: var(--tiptop-body-link); } /* フッターの反転背景では、広域リンク色より反転面の文字色を優先する。 */ html[data-tiptop-palette] .site-footer a:not(:where(.tiptop-own-color, .tiptop-own-color *)), html[data-tiptop-palette] .site-footer .site-social-links__link:not(:where(.tiptop-own-color, .tiptop-own-color *)), html[data-tiptop-palette] .site-footer__logo-link:not(:where(.tiptop-own-color, .tiptop-own-color *)) { color: var(--tiptop-base); } /* フッター内の見出しも反転面の文字色にする（子テーマで作った案件で発覚）。 * 上の `html[data-tiptop-palette] h1〜h6`（0-1-2）は反転面を考えていないので、 * フッターに見出しを置くと `--tiptop-contrast`（暗色）が当たって**13パレット全部で * コントラスト比 1.00＝完全に見えなくなる**（実測）。本体のフッターには見出しが * 0個なので今日は表面化しないが、子テーマやブロックが置いた瞬間に出る。 * 子テーマ側のクラス1つ（0-1-0）では勝てないので、本体で直す。 * * ⚠ トークンは `--tiptop-contrast-surface-text` ではなく `--tiptop-base`。 * 前者だと luxe-night / plum-noir / violet-noir の3つで**背景と同色（1.00）のまま** * 残る——あの3パレットはフッターの実背景が明るいのにトークンも明るく解決される。 * `--tiptop-base` は上の `.site-footer a` と同じ＝フッターの実際の文字色で、 * 13パレット実測でAA未達 0件（最小 9.12・最大 21）。 * * 淡くしたい案件は子テーマ側で不透明度を落とすことになるが、そのときのAAは案件が * 測る（本体は安全側＝全強度で当てる）。詳細は docs/css-effectiveness-check.md。 */ html[data-tiptop-palette] .site-footer :is(h1, h2, h3, h4, h5, h6):not(:where(.tiptop-own-color, .tiptop-own-color *)) { color: var(--tiptop-base); } html[data-tiptop-palette] body.tiptop-standard-system .site-footer .site-social-links__link:hover, html[data-tiptop-palette] body.tiptop-standard-system .site-footer .site-social-links__link:focus-visible { border-color: var(--tiptop-base); color: var(--tiptop-base); } /* フッターナビにもナビと同じ「通常時は控えめ→hoverで前面へ」の手応えを持たせる * （モックに合わせた意匠上の判断）。ただしフッターは反転面なので * contrast系（暗色）ではなく反転面派生トークンを使う——暗背景でcontrastを使うと * 文字が沈んで読めなくなる（scripts/check-footer-inversion.js が禁じているのも同じ理由）。 */ /* 二次テキストの控えめさは「面」で持つ（Issue #1185）。 * * ⚠ 以前ここは `.site-footer__nav a` へ `--tiptop-contrast-surface-muted` を当てていたが、 * **暗色パレット3種（luxe-night / plum-noir / violet-noir）でコントラスト比 1.73〜1.87 に * なっていた**。あの3つは `is_dark` でフッター背景が `--tiptop-contrast`＝明色になるのに、 * `-surface-*` 系も明色に解決されるため向きが逆になる。`--tiptop-base` 系へ寄せて 0/13 未達。 * * ⚠ 当て先を「リンク」でなく「面」にしているのも意図。要素セレクタで色を当てると、 * 同じ行に並ぶ `` 以外の文字（`

` / `` / `