前の文 選択中のリンク 後ろの文
+テキストを選択すると、ブラウザは選択範囲の文字も下線も**選択の文字色1色で塗り直します**。リンクの色は残りません。下線に色を指定しても残りません。**選択中にリンクを名乗れるのは下線だけ**で、ひとつ上の「色だけで名乗らない」がそのまま効いてきます。この段落のリンクを選択すると、実際にそうなります。 このとき、下線は**選択の帯に収まっていないと見えません**。帯からはみ出した線は背景と同じ色で描かれて消えます。帯の高さは行間で決まるので、いちばん低いのは行間の狭いところ——表のセルです。 @@ -96,7 +94,7 @@ editable: true ### ブランド色 -ネイビーは塗り面（フッター）とインタラクション（selection / hover / focus）専用で、**文字色には使いません**。本文の `ink-strong` との比が 1.63 しかなく、文字にすると黒と区別が付かないためです。例外は2つの形だけです。1つは**ネイビーの図形とひと組で読ませる小さな文字**で、タブに出る「← → で切り替え」は同時に出るフォーカスリングと同じ色にして1つの信号として読ませ、シェア数はボタンの丸と、著者名は頭文字の丸と1組に見せます。もう1つは、**文字がそのページの面そのものになっている 404 の数字**です。読み下す文章に混ざる文字には使いません。クリムゾンはコンセプトブックの文法どおり、画面内で同時に1箇所だけの差し色に限定しています。 +ネイビーは塗り面（フッター）とインタラクション（hover / focus）専用で、**文字色には使いません**。本文の `ink-strong` との比が 1.63 しかなく、文字にすると黒と区別が付かないためです。例外は2つの形だけです。1つは**ネイビーの図形とひと組で読ませる小さな文字**で、タブに出る「← → で切り替え」は同時に出るフォーカスリングと同じ色にして1つの信号として読ませ、シェア数はボタンの丸と、著者名は頭文字の丸と1組に見せます。もう1つは、**文字がそのページの面そのものになっている 404 の数字**です。読み下す文章に混ざる文字には使いません。クリムゾンはコンセプトブックの文法どおり、画面内で同時に1箇所だけの差し色に限定しています。 | 見本 | 変数 | 値 | 白背景との比 | 使うところ | | --- | --- | --- | --- | --- | @@ -143,7 +141,6 @@ editable: true | | `surface-tint` | | | 静止した面 | | | `surface-mute` | | | 反応した面と、空・無効の面 | | | `brand-navy` | | | フッターの帯 | -| | `selection-bg` | | | テキスト選択の帯。文字は `surface-base` | **`ink-faint` は明るいほうと同じく「AA を満たす最も薄い段階」です。** 上の表の比はページの背景に対する値ですが、実際にいちばん厳しいのは面のスケールでいちばん明るい `surface-mute` で、そこでも AA を満たす値にしています。これより薄くしません。 diff --git a/themes/future/css-src/_variables.styl b/themes/future/css-src/_variables.styl index a274a90034a..5bcb6e91875 100644 --- a/themes/future/css-src/_variables.styl +++ b/themes/future/css-src/_variables.styl @@ -77,16 +77,16 @@ link-on-note-alert = #AC1B1B link-on-note-visited = #4a0ba6 // コーポレートのブランド色（FA Concept Book 2025 の実測値）。 -// ネイビーは塗り面（フッター）とインタラクション（selection / hover / focus）専用で、 +// ネイビーは塗り面（フッター）とインタラクション（hover / focus）専用で、 // 文字色には使わない。本文 ink-strong とのコントラスト比が 1.63 しかなく、 // 文字にすると黒と区別が付かない（リンクに使うと走査性が死ぬ）。 // クリムゾンはブックの文法どおり画面内で同時に1箇所だけの差し色に限定する brand-navy = #0A1461 brand-crimson = #D5004A // コンセプトブックのライトグレー（ページ地の色）。surface-* より一段濃く、 -// 白地の上で「面」としてはっきり見せたいところに使う。使うのはフッターの地と -// その ::selection だけで、小物（チップ）には広げない。地の濃さで輪郭を作ろうと -// すると、白に近い2段から外れる (#2681) +// 白地の上で「面」としてはっきり見せたいところに使う。使うのはフッターの地だけで、 +// 小物（チップ）には広げない。地の濃さで輪郭を作ろうとすると、白に近い2段から +// 外れる (#2681) brand-gray = #E3E3E2 // 暗い地の上の語彙 (#2839)。ink / rule / surface は白地の上で決めた値で、 @@ -259,12 +259,6 @@ dark-navy = #0a0d1f // テキスト選択の帯 (#3103)。明るい側は brand-navy の塗りに白文字だが、暗い地では // ネイビーを中間まで明るくしても帯として 3:1 に届く前に白文字が 4.5 を割る // （hsl(233, 60%, 54%) でも地と 2.79）。向きを逆にして「ネイビーを薄くした帯＋ -// 地の色の文字」にする。色相は brand-navy の 233° のまま、彩度は半分に落とす -// （81% のままだと蛍光の紫青になる。rule-on-dark で彩度を落としたのと同じ理由）。 -// 無彩色の ink-strong の帯だと反転表示のように見えて、ブランドの色味が無い。 -// 対 dark-surface-base 10.35 / 対コードの地 #2b2b2b 8.54。文字は dark-surface-base -dark-selection = #c2c7eb - /* ::: note の種別。持たせるのは色だけで、寸法は .note-container が1箇所で決める。 以前は両方が padding / margin / border-radius を宣言しており、同じ詳細度の 後勝ちで .note-container 側だけが効いていた。読んでも効いている値が分からない @@ -452,7 +446,7 @@ hover-speed = 0.05s footer-underline-speed = 0.25s // 地の文のリンクの下線の位置（#3058）。**見た目から選んだ値ではなく、ブラウザの -// 描画の制約で決まる値。** 選択されると文字も下線も ::selection の文字色1色で +// 描画の制約で決まる値。** 選択されると文字も下線もブラウザの選択の文字色1色で // 塗り直されるので（text-decoration-color を明示しても残らない。実測で0画素）、 // 選択の帯からはみ出した線は地と同じ色になって消える。帯の高さは行ボックスで、 // いちばん低いのは表のセル（td は line-height を持たず leading-row を継ぐので diff --git a/themes/future/css-src/theme-styles.styl b/themes/future/css-src/theme-styles.styl index b98d12c142a..2ba7680e1cf 100644 --- a/themes/future/css-src/theme-styles.styl +++ b/themes/future/css-src/theme-styles.styl @@ -28,11 +28,6 @@ --rule-on-dark: rule-on-dark; --crimson-on-dark: crimson-on-dark; - // テキスト選択の帯と、その上の文字。明暗で向きが逆になる（明るい側は濃い帯に - // 白文字、暗い側は薄いネイビーの帯に地の色の文字）ので役として持つ (#3103) - --selection-bg: brand-navy; - --selection-ink: on-dark-strong; - // 表彰の淡金 (#2742)。ブランド色は表彰に広げないので、この系統だけが持つ色 --award-gold: award-gold; --award-gold-on-tint: award-gold-on-tint; @@ -202,9 +197,6 @@ dark-tokens() // ネイビーは暗い地で 1.05 しか出ない。面としては一段暗くして帯の色味だけ残す --brand-navy: dark-navy; - --selection-bg: dark-selection; - --selection-ink: dark-surface-base; - // 差し色としてのネイビーは、暗い地では面ではなく「明るい線・明るい塗り」に置き換える。 // 白地では #0A1461 が 16.34 の差し色だが、暗い地では 1.05 で消える (#2746) dark-parts() @@ -265,22 +257,7 @@ dark-parts() .tabs input:checked + .tab_item { border-bottom-color: var(--ink-strong); } - /* フッターの選択。明るい側はネイビー地の上でネイビーの帯が見えないので塗りと文字を - 反転させているが、暗い側のフッターは dark-navy の暗い地なので、ページと同じ - 薄いネイビーの帯でよい（対 dark-navy 11.61）。ベンダー接頭辞の擬似要素は - 単独のルールにする（同居させると Chrome / Safari でルールごと捨てられる #3058） */ - .site-footer ::-moz-selection { - color: var(--selection-ink); - fill: var(--selection-ink); - background: var(--selection-bg); - } - .site-footer ::selection { - color: var(--selection-ink); - fill: var(--selection-ink); - background: var(--selection-bg); - } - /* 塗り面。明暗を入れ替える。地だけ明るくすると白文字が飛ぶので、中の文字も一緒に返す。 - テキスト選択の帯はここに入れない。--selection-bg / --selection-ink が持つ (#3103) */ + /* 塗り面。明暗を入れ替える。地だけ明るくすると白文字が飛ぶので、中の文字も一緒に返す */ .skip-link, .share-copied, .tag-list-link:hover, @@ -442,36 +419,6 @@ Misc tools /* ベンダー接頭辞の擬似要素は他のセレクタと同じリストに入れない。 1つでも解釈できないセレクタがあると、ブラウザはルールごと捨てる */ -/* SVG の