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

Поддержка
1

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

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

  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) сохраняют свои цвета по умолчанию, которые могут плохо контрастировать с фоном выделения.

Скриншоты

image
image531×470 11.9 KB

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

Окружение

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

  • Браузер: Edge

  • Тема: тема Foundation

2 лайка
3

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

5

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

image
image479×406 22.3 KB

7

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

8

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

2 лайка
9

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

?

10

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

2 лайка
11

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

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

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

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

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

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

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

2 лайка