Select-kitドロップダウン:選択/ハイライトされた項目の色のコントラストが低く、テキストとアイコンが消える

トピック通知ドロップダウン(Watching/Tracking/Normal/Muted)を使用すると、選択された項目のテキストとアイコンが、選択背景色と前景色のコントラストが不十分なために見えなくなります。

再現手順

  1. いずれかのトピックを開きます。

  2. トピック下部にある通知ベルボタンをクリックします。

  3. 現在選択されている通知レベル(例:「Tracking」)を観察します。

期待される動作

選択された項目は、コントラストが良好で、テキストとアイコンがはっきりと見えるはずです。

実際の動作

  • テキストラベルが消えるか、非常に読みにくくなります。

  • ベルアイコンが見えなくなります。

  • この問題はダークテーマで最も顕著ですが、カラーパレットによってはどのテーマにも影響を与える可能性があります。

技術的な詳細

app/assets/stylesheets/common/select-kit/select-kit.scss では、.is-selected 状態は背景色のみを設定し、前景のコントラストを保証していません。

&.is-selected,
&.is-selected.is-highlighted {
  background: var(--d-selected);
  // テキストまたはアイコンの色のオーバーライドなし
}

--d-selected CSS変数はテーマの $selected 色から取得されますが、テキスト (.name, .desc) とアイコン (.d-icon) はデフォルトの色を保持しており、選択背景色とのコントラストが適切でない場合があります。

スクリーンショット

注:選択状態でのアイコンが消える別の画像も追加したかったのですが、新規のため現時点では画像を1枚しか追加できません。

環境

  • Discourse バージョン: latest

  • ブラウザ: Edge

  • テーマ: Foundation テーマ

「いいね!」 1