Select-kit 드롭다운: 선택/강조된 항목의 색상 대비가 낮아 텍스트와 아이콘이 사라짐

제품 지원
1

토픽 알림 드롭다운(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)은 선택 배경색과 잘 대비되지 않을 수 있는 기본 색상을 유지합니다.

스크린샷

image
image531×470 11.9 KB

참고: 선택된 상태에서 아이콘이 사라지는 다른 이미지를 추가하고 싶었지만, 신규 사용자라 현재는 이미지 하나만 추가할 수 있습니다.

환경

  • Discourse 버전: 최신

  • 브라우저: Edge

  • 테마: Foundation 테마

3

이것은 신규 사용자를 위한 제한 사항입니다. 신뢰도가 빠르게 1로 올라갈 수 있도록 몇 가지 기존 주제를 둘러보세요.

5

이 버그를 재현할 수 없습니다.

image
image479×406 22.3 KB

7

@BrettH 안전 모드에서는 이런 현상이 발생하나요?

8

색상 팔레트가 오랫동안 업데이트되지 않은 것 같습니다. 일반적인 선택 상태 색상이 아니기 때문이죠. 마지막으로 포럼을 업데이트한 시점은 언제입니까?

9

이 링크와 관련이 있을까요?

?

10

네, 아마도 그런 상황인 것 같습니다. 새 색상이 추가되기 전에 만든 사용자 지정 색상 팔레트는 대비가 나빠지는 경우가 종종 보이거든요… @BrettH 님, 새 색상 팔레트를 만들어서 사용해 보시면 문제가 계속 발생합니까?

11

제안해 주신 모든 분들께 감사드립니다. 질문들에 대해 답변드리겠습니다:

NateDhaliwal - 아직 안전 모드에서 테스트해 보지 않았지만, chapoi와 Kris가 설명한 내용으로 보아 안전 모드에서는 문제가 해결될 것 같습니다. 안전 모드에서는 사용자 지정 팔레트 대신 기본 Light 팔레트로 되돌아가기 때문입니다.

@chapoi - 좋은 질문입니다. 저희 색 팔레트는 꽤 오래 전에 생성되었습니다. selected와 hover 색상이 기본 팔레트에 추가되기 전이죠. 팔레트가 커뮤니티를 처음 런칭할 때 설정되었고, 그 이후로 업데이트하지 않았습니다.

@awesomerobot - 일리 있는 말씀입니다. 코드를 살펴보니 resolved_colors가 팔레트에 hover와 selected가 없는 경우 dark_light_diff를 사용하여 폴백 값을 계산하고 있습니다. 하지만 문제는 텍스트 색상(.name, .desc, .d-icon)이 여전히 기본 값을 사용하고 있다는 것입니다. 이 기본 값들은 제 더 어두운 테마의 계산된 폴백이 아니라 기본 Light 팔레트의 선택 색상용으로 설계된 것이었거든요.

새로운 팔레트를 만들어 selected와 hover 색상을 적절하게 대비되는 값으로 명시적으로 설정할 것입니다. 이렇게 하면 문제가 해결될 것으로 생각합니다.

테스트하면서 든 생각인데, 폴백 계산 시 텍스트 대비도 고려하는 것이 나을까요? 그러면 수동 개입 없이도 오래된 팔레트가 새로운 색상 추가를 자연스럽게 처리할 수 있을 것입니다. 그냥 아이디어일 뿐이며, 색상 시스템을 제대로 잡는 것이 까다롭다는 점은 알고 있고, 현재 방식이 대부분의 경우를 커버할 것이라 생각합니다. 도움이 된다면 별도의 기능 요청을 접수하는 것도 괜찮습니다.

이 문제를 추적하는 데 도움을 주셔서 감사합니다!