mirror of
https://github.com/we-promise/sure.git
synced 2026-05-30 07:49:01 +00:00
7e50feeca4
Avatar letter/icon now uses `--avatar-color` CSS variable + the new `.goal-avatar` class. Light mode darkens the text to 55% color + 45% black so pale palette entries (cyan-300, green-300) stay readable on the 10%-mix tint over white (~4.5:1). Dark mode reverts to the full brand color via [data-theme="dark"] .goal-avatar override so the text doesn't disappear against the near-black tinted surface. Verified live: #805dee renders as a darker oklab in light mode and full rgb(128,93,238) in dark mode. Picker popup compacted: - 80 (320px) wide, max-h-[60vh] overflow-y-auto so it never spills off-screen. - Anchored below the avatar + horizontally centered to it (top-full left-1/2 -translate-x-1/2) so it doesn't drift off to the right edge of the form on narrow modals. - Icon grid max-h-40 (160px, ~5 rows) with the in-house `scrollbar` utility for a thin gray thumb that works in both themes. - Section headers (Color / Icon) styled `uppercase tracking-wide` for visual hierarchy. Verified popup at 320x310px in edit modal, no vertical overflow.
11 lines
377 B
Plaintext
11 lines
377 B
Plaintext
<span class="goal-avatar inline-flex items-center justify-center font-semibold <%= box_classes %> <%= text_classes %> <%= radius_classes %>"
|
|
style="--avatar-color: <%= color %>;"
|
|
aria-hidden="true"
|
|
data-testid="goal-avatar">
|
|
<% if icon.present? %>
|
|
<%= icon(icon, size: icon_size, color: "current") %>
|
|
<% else %>
|
|
<%= initial %>
|
|
<% end %>
|
|
</span>
|