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.