fix(styles): dark-mode contrast on lime-active chips (t-paliad-291)
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:
@@ -1917,7 +1917,11 @@ input[type="range"]::-moz-range-thumb {
|
|||||||
.fristen-row.is-active .fristen-row-num {
|
.fristen-row.is-active .fristen-row-num {
|
||||||
background: var(--color-accent);
|
background: var(--color-accent);
|
||||||
border-color: 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 {
|
.fristen-row.is-prefilled .fristen-row-num {
|
||||||
@@ -3578,7 +3582,10 @@ input[type="range"]::-moz-range-thumb {
|
|||||||
.event-card-choices-option--active {
|
.event-card-choices-option--active {
|
||||||
background: var(--color-accent, #c6f41c);
|
background: var(--color-accent, #c6f41c);
|
||||||
border-color: 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;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -7992,7 +7999,7 @@ dialog.modal::backdrop {
|
|||||||
padding: 0.05rem 0.45rem;
|
padding: 0.05rem 0.45rem;
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
background: var(--color-accent);
|
background: var(--color-accent);
|
||||||
color: var(--color-text);
|
color: var(--color-accent-dark);
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
@@ -15922,7 +15929,7 @@ dialog.quick-add-sheet::backdrop {
|
|||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border: 1px solid var(--color-border-strong);
|
border: 1px solid var(--color-border-strong);
|
||||||
background: var(--color-accent);
|
background: var(--color-accent);
|
||||||
color: var(--color-text);
|
color: var(--color-accent-dark);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background 120ms ease;
|
transition: background 120ms ease;
|
||||||
}
|
}
|
||||||
@@ -16530,7 +16537,7 @@ dialog.quick-add-sheet::backdrop {
|
|||||||
.smart-timeline-anchor-submit {
|
.smart-timeline-anchor-submit {
|
||||||
background: var(--color-accent, #c6f41c);
|
background: var(--color-accent, #c6f41c);
|
||||||
border: 1px solid 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;
|
padding: 0.25rem 0.75rem;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -17468,7 +17475,7 @@ dialog.quick-add-sheet::backdrop {
|
|||||||
.admin-rules-chip.active {
|
.admin-rules-chip.active {
|
||||||
background: var(--color-accent, #BFF355);
|
background: var(--color-accent, #BFF355);
|
||||||
border-color: var(--color-accent, #BFF355);
|
border-color: var(--color-accent, #BFF355);
|
||||||
color: var(--color-text, #000);
|
color: var(--color-accent-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-rules-pill {
|
.admin-rules-pill {
|
||||||
|
|||||||
Reference in New Issue
Block a user