mirror of
https://github.com/zulip/zulip.git
synced 2025-11-02 21:13:36 +00:00
3f5764e5ba
This is a case where the use of alpha channels in HSL color values shows its limits. The use of an alpha channel is necessary for the background elements for the top navbar elements, because they sit over the top of the navbar's bottom border (actually an inset shaddow). However, it's impossible to use the alpha-channel based color on elements like the unread dot, where the border actually sits on top of the element itself--meaning that the effect would be a larger dot with an imperceptibly darker ring around it. What this commit does is use a technique suggested by Anders Kaseorg for using CSS's `color-mix()` functional notation to calculate an opaque version of the alpha color for use on elements that do not or cannot directly take the color with the alpha channel. See CZO discussion: https://chat.zulip.org/#narrow/stream/6-frontend/topic/alphas.20in.20color.20definitions/near/1670102