Выпадающий список Select-kit: у выбранных/подсвеченных элементов низкий контраст цветов, текст и иконки исчезают

[BrettH (Brett)]

При использовании выпадающего меню уведомлений по теме (Слежение/Отслеживание/Обычное/Заглушено) текст и иконка текущего выбранного пункта становятся невидимыми из-за недостаточного контраста между цветом фона выделения и цветами переднего плана.

Шаги для воспроизведения

1. Откройте любую тему

2. Нажмите кнопку с колокольчиком уведомлений в нижней части темы

3. Обратите внимание на текущий выбранный уровень уведомлений (например, «Отслеживание»)

Ожидаемое поведение

Выбранный пункт должен иметь четко видимый текст и иконку с хорошим контрастом.

Фактическое поведение

• Текстовая метка исчезает или становится очень трудно читаемой

• Иконка колокольчика становится невидимой

• Проблема наиболее заметна в темных темах, но может проявляться в любой теме в зависимости от цветовой палитры

Технические детали

В файле app/assets/stylesheets/common/select-kit/select-kit.scss состояние .is-selected устанавливает только цвет фона, не обеспечивая контрастность переднего плана:

&.is-selected,
&.is-selected.is-highlighted {
  background: var(--d-selected);
  // Нет переопределения цвета для текста или иконок
}

CSS-переменная --d-selected берется из цвета $selected темы, но текст (.name, .desc) и иконки (.d-icon) сохраняют свои цвета по умолчанию, которые могут плохо контрастировать с фоном выделения.

Скриншоты

Примечание: Я хотел бы добавить другое изображение, где исчезает иконка для выбранного состояния, но я новичок и пока могу добавить только одно изображение.

Окружение

• Версия Discourse: последняя

• Браузер: Edge

• Тема: тема Foundation

[Noble_Fish]

@BrettH

𝑁𝑜𝑡𝑒:𝐼𝑤𝑜𝑢𝑙𝑑ℎ𝑎𝑣𝑒𝑎𝑑𝑑𝑒𝑑𝑡ℎ𝑒𝑜𝑡ℎ𝑒𝑟𝑖𝑚𝑎𝑔𝑒𝑤ℎ𝑒𝑟𝑒𝑡ℎ𝑒𝑖𝑐𝑜𝑛𝑑𝑖𝑠𝑎𝑝𝑝𝑒𝑎𝑟𝑠𝑓𝑜𝑟𝑡ℎ𝑒𝑠𝑒𝑒𝑙𝑐𝑡𝑒𝑑𝑠𝑡𝑎𝑡𝑒,𝑏𝑢𝑡𝑖′𝑚𝑛𝑒𝑤𝑎𝑛𝑑𝑐𝑎𝑛𝑜𝑛𝑙𝑦𝑎𝑑𝑑𝑜𝑛𝑒𝑖𝑚𝑎𝑔𝑒𝑟𝑖𝑔ℎ𝑡𝑛𝑜𝑤.

This is a restriction for new users. You can browse some existing topics so that your trust level can quickly rise to 1.

[bryce (Bryce Huhtala)]

Мне не удалось воспроизвести эту ошибку.

[NateDhaliwal]

@BrettH Это происходит в безопасном режиме?

[chapoi]

@BrettH

CSS-переменная --d-selected берётся из цвета $selected темы, но текст (.name, .desc) и иконки (.d-icon) сохраняют свои цвета по умолчанию, которые могут плохо контрастировать с фоном выделения.

Похоже, ваша цветовая палитра давно не обновлялась, потому что это не обычный цвет выделения. Когда вы в последний раз обновляли свой форум?

[Canapin (Coin-coin le Canapin)]

Неужели это может быть связано с

Discourse Free Plan setup - options are hard to read

Thanks for the details @NateDhaliwal. My hunch is that it’s related to that missing CSS var when light/dark mode is involved, and how it’s compiled via PostCSS. It looks like the browser may be falling back to the light mode background color, which is odd since I can’t reproduce this. Judging by the screenshots, my fix hadn’t been deployed to your instance yet. It should be deployed there now, so give it another try and let me know if you still notice anything off.

?

[awesomerobot (Kris)]

Да, скорее всего, так и есть — я сталкивался с подобными ситуациями, когда пользовательская цветовая палитра, созданная до добавления новых цветов, оказывалась с недостаточным контрастом… @BrettH, если вы создадите новую цветовую палитру и будете использовать её, проблема сохранится?

[BrettH (Brett)]

Спасибо всем за предложения. Давайте разберём вопросы:

NateDhaliwal — Я ещё не тестировал в безопасном режиме, но, судя по тому, что описывают chapoi и Kris, подозреваю, что безопасный режим решит проблему, так как в этом случае система вернётся к стандартной светлой палитре вместо моей кастомной.

@chapoi — Хороший вопрос. Наша цветовая палитра была создана довольно давно — определённо до того, как в базовую палитру были добавлены цвета selected и hover. Думаю, палитра была настроена при запуске нашего сообщества, и с тех пор мы её не обновляли.

@awesomerobot — Это имеет смысл. Изучив код, я вижу, что resolved_colors вычисляет значения по умолчанию для hover и selected с помощью dark_light_diff, если они отсутствуют в палитре. Но проблема в том, что цвета текста (.name, .desc, .d-icon) всё ещё используют свои значения по умолчанию, которые были разработаны для цвета выделения стандартной светлой палитры, а не для вычисленного значения по умолчанию для моей тёмной темы.

Я создам новую палитру и явно задам цвета selected и hover такими значениями, которые обеспечивают должный контраст. Думаю, это исправит ситуацию.

Одна мысль во время тестирования: не имеет ли смысл, чтобы расчёт значений по умолчанию также учитывал контраст текста? Таким образом, старые палитры могли бы корректно обрабатывать новые цветовые добавления без ручного вмешательства. Просто идея — я знаю, что системы цветов сложно настроить правильно, и текущий подход, вероятно, покрывает большинство случаев. Готов создать отдельный запрос на добавление функции, если это будет полезно.

Спасибо за помощь в поиске причины проблемы!