mirror of
https://github.com/we-promise/sure.git
synced 2026-05-30 07:49:01 +00:00
30c2638fd0
Goals-specific styling doesn't belong in the global stylesheet. Extract the avatar tint + theme-aware text color into a topical goals.css and @import it alongside the other feature CSS files.
18 lines
745 B
CSS
18 lines
745 B
CSS
/* Goals-feature styles. Lives outside application.css so component-specific
|
|
rules don't pile up in the global stylesheet. */
|
|
|
|
/* Tinted-bg + colored-content avatar used by Goals::AvatarComponent and
|
|
the goals color/icon picker. Theme-aware text color: light mode darkens
|
|
the letter/icon so pale palette entries (cyan-300, green-300, etc.) keep
|
|
~4.5:1 contrast against the 10%-mix tint over white. Dark mode reverts
|
|
to the full color so the letter doesn't disappear against the near-black
|
|
surface. */
|
|
.goal-avatar {
|
|
background-color: color-mix(in oklab, var(--avatar-color) 10%, transparent);
|
|
color: color-mix(in oklab, var(--avatar-color) 55%, black);
|
|
}
|
|
|
|
[data-theme="dark"] .goal-avatar {
|
|
color: var(--avatar-color);
|
|
}
|