m/paliad
1
0
Fork 0
Code Issues 146 Pull Requests 8 Actions 1 Packages Projects Releases Wiki Activity

fix(styles): dark-mode contrast on lime-active chips (t-paliad-291)
Some checks failed
Paliad CI gate / build (push) Has been cancelled
Details
Paliad CI gate / test-go (push) Has been cancelled
Details
Paliad CI gate / deploy (push) Has been cancelled
Details

Browse Source 
Six surfaces paired a lime background with var(--color-text), which
flips to cream in dark mode and collapses contrast on the high-luminance
brand lime. Switch them to var(--color-accent-dark) — the design token
already defined to stay midnight in both themes as the WCAG-AA fg on
lime.

Affected:
  - .event-card-choices-option--active  (Berufung durch … popover —
    m's primary report on m/paliad#123)
  - .fristen-row.is-active .fristen-row-num
  - .form-hint-badge
  - .paliadin-widget-send-btn
  - .smart-timeline-anchor-submit
  - .admin-rules-chip.active

Lime hue and non-active states untouched.

Refs: m/paliad#123
This commit is contained in:
mAi
2026-05-26 09:45:59 +02:00
parent 5e17de6e07
commit 18d2e743ba
1 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/styles/global.css
View File

@@ -1917,7 +1917,11 @@ input[type="range"]::-moz-range-thumb {
.fristen-row.is-active .fristen-row-num {
background: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-text, #111);
/* Lime is high-luminance; foreground stays midnight in both themes via
--color-accent-dark (light: midnight by default, dark: midnight
explicit). Using --color-text here would flip to cream in dark mode
and collapse contrast on lime. */
color: var(--color-accent-dark);
}
.fristen-row.is-prefilled .fristen-row-num {
@@ -3578,7 +3582,10 @@ input[type="range"]::-moz-range-thumb {
.event-card-choices-option--active {
background: var(--color-accent, #c6f41c);
border-color: var(--color-accent, #c6f41c);
color: var(--color-text);
/* Foreground stays midnight in both themes — --color-text would flip
to cream in dark mode and leave the active "Berufung durch …"
chip unreadable on lime (m/paliad#123). */
color: var(--color-accent-dark);
font-weight: 600;
}
@@ -7992,7 +7999,7 @@ dialog.modal::backdrop {
padding: 0.05rem 0.45rem;
border-radius: 999px;
background: var(--color-accent);
color: var(--color-text);
color: var(--color-accent-dark);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
@@ -15922,7 +15929,7 @@ dialog.quick-add-sheet::backdrop {
border-radius: 6px;
border: 1px solid var(--color-border-strong);
background: var(--color-accent);
color: var(--color-text);
color: var(--color-accent-dark);
cursor: pointer;
transition: background 120ms ease;
}
@@ -16530,7 +16537,7 @@ dialog.quick-add-sheet::backdrop {
.smart-timeline-anchor-submit {
background: var(--color-accent, #c6f41c);
border: 1px solid var(--color-accent, #c6f41c);
color: var(--color-text, #333);
color: var(--color-accent-dark);
padding: 0.25rem 0.75rem;
border-radius: 4px;
cursor: pointer;
@@ -17468,7 +17475,7 @@ dialog.quick-add-sheet::backdrop {
.admin-rules-chip.active {
background: var(--color-accent, #BFF355);
border-color: var(--color-accent, #BFF355);
color: var(--color-text, #000);
color: var(--color-accent-dark);
}
.admin-rules-pill {