QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-05-29 23:39:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

revert(goals): move .goal-avatar back into application.css

Browse Source 
Sure's convention for one-off custom classes (.combobox, .scrollbar,
.windows, .prose variants, .table-divider, .turbo-progress-bar) is to
define them directly in application.css. Topical files (privacy-mode,
date-picker-dark-mode, print-report) are reserved for coherent feature
namespaces with multiple rules. A single .goal-avatar rule belongs
with the other custom classes.
This commit is contained in:
Guillem Arias
2026-05-18 21:41:25 +02:00
parent 612af6c14b
commit 3bf36efc66
2 changed files with 14 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/assets/tailwind/application.css
View File

@@ -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;

17
app/assets/tailwind/goals.css
View File

@@ -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);
}