diff --git a/app/assets/tailwind/application.css b/app/assets/tailwind/application.css index 5cdf1a3bf..ddbda9b04 100644 --- a/app/assets/tailwind/application.css +++ b/app/assets/tailwind/application.css @@ -14,7 +14,6 @@ @import "./date-picker-dark-mode.css"; @import "./print-report.css"; @import "./privacy-mode.css"; -@import "./goals.css"; @layer components { .pcr-app{ @@ -189,6 +188,20 @@ scrollbar-width:none } +/* 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); +} + .invite_code [data-clipboard-target="iconDefault"], .invite_code [data-clipboard-target="iconSuccess"] { transition: opacity 0.2s; diff --git a/app/assets/tailwind/goals.css b/app/assets/tailwind/goals.css deleted file mode 100644 index a42e81a1b..000000000 --- a/app/assets/tailwind/goals.css +++ /dev/null @@ -1,17 +0,0 @@ -/* 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); -}