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

fix(t-paliad-082): introduce --color-accent-fg so accent text isn't lime on cream

Browse Source 
Lime text on the cream/white BG fails WCAG AA. Adds a foreground token that
is midnight by default and lime inside the .sidebar scope (which lives on
midnight). Rewires every text-color use of --color-accent to the new token,
including the double-fallback typo variants. Decoration uses (border, BG,
border-bottom) keep --color-accent (= lime).

mAi/paliad#2 (full dark mode) flips --color-accent-fg back to lime in one
place — no need to revisit every rule.
This commit is contained in:
m
2026-04-30 03:59:12 +02:00
parent 17aa840977
commit b25da860c8
1 changed files with 65 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,6 +29,12 @@
--color-accent: var(--hlc-lime);
--color-accent-light: #d8f78a; /* lighter lime for hover */
--color-accent-dark: var(--hlc-midnight); /* foreground on lime — WCAG AA */
/* Accent text colour. Lime fails WCAG on the cream/white BGs we use
in light mode, so accent emphasis in body copy is rendered in
midnight here. Dark-mode (mAi/paliad#2) flips this back to lime,
and the .sidebar scope below already keeps lime today since the
sidebar lives on a midnight BG. */
--color-accent-fg: var(--hlc-midnight);
--color-border: #e1dcd6; /* derived from cream, neutral warm */
--color-hero-bg: var(--hlc-midnight);
--color-hero-text: #ffffff;
@@ -122,7 +128,7 @@ main {
.logo-mark {
font-family: var(--font-mono);
color: var(--color-accent);
color: var(--color-accent-fg);
font-weight: 700;
font-size: 1.3rem;
}
@@ -140,7 +146,7 @@ main {
}
.nav-logout:hover {
color: var(--color-accent);
color: var(--color-accent-fg);
}
.nav-lang {
@@ -162,11 +168,11 @@ main {
}
.lang-btn:hover {
color: var(--color-accent-light);
color: var(--color-accent-fg);
}
.lang-active {
color: var(--color-accent);
color: var(--color-accent-fg);
font-weight: 600;
cursor: default;
}
@@ -238,7 +244,7 @@ main {
.card-icon {
width: 2.25rem;
height: 2.25rem;
color: var(--color-accent);
color: var(--color-accent-fg);
margin-bottom: 1rem;
}
@@ -513,7 +519,7 @@ main {
}
.nav-link:hover {
color: var(--color-accent);
color: var(--color-accent-fg);
}
/* --- Sidebar --- */
@@ -532,6 +538,12 @@ main {
flex-direction: column;
overflow: hidden;
transition: width 150ms ease;
/* Sidebar lives on midnight BG, so accent text inside it stays lime
even though the rest of the page (cream/white BG) overrides accent
text to midnight. Same cascade trick will work in reverse for
dark-mode (mAi/paliad#2): the body-level palette flips to lime,
and this scope is a no-op. */
--color-accent-fg: var(--sidebar-text-active);
}
.sidebar.expanded,
@@ -950,7 +962,7 @@ input[type="range"]::-moz-range-thumb {
.streitwert-presets button:hover {
border-color: var(--color-accent);
color: var(--color-accent);
color: var(--color-accent-fg);
}
.streitwert-presets button.active {
@@ -1073,7 +1085,7 @@ input[type="range"]::-moz-range-thumb {
font-family: var(--font-mono);
font-size: 1.6rem;
font-weight: 700;
color: var(--color-accent);
color: var(--color-accent-fg);
}
.result-empty {
@@ -1122,7 +1134,7 @@ input[type="range"]::-moz-range-thumb {
font-family: var(--font-mono);
font-size: 0.92rem;
font-weight: 600;
color: var(--color-accent);
color: var(--color-accent-fg);
}
.result-detail-row {
@@ -1186,7 +1198,7 @@ input[type="range"]::-moz-range-thumb {
.result-action-btn:hover {
border-color: var(--color-accent);
color: var(--color-accent);
color: var(--color-accent-fg);
}
.result-action-btn--accent {
@@ -1279,7 +1291,7 @@ input[type="range"]::-moz-range-thumb {
}
.diff-decrease .comparison-diff-value {
color: var(--color-accent);
color: var(--color-accent-fg);
}
.diff-increase .comparison-diff-value {
@@ -1418,7 +1430,7 @@ input[type="range"]::-moz-range-thumb {
.trigger-event-name {
font-size: 0.88rem;
font-weight: 600;
color: var(--color-accent);
color: var(--color-accent-fg);
}
.date-input {
@@ -1470,7 +1482,7 @@ input[type="range"]::-moz-range-thumb {
.reset-btn:hover {
border-color: var(--color-accent);
color: var(--color-accent);
color: var(--color-accent-fg);
}
/* Timeline */
@@ -1780,7 +1792,7 @@ input[type="range"]::-moz-range-thumb {
.filter-pill:hover {
border-color: var(--color-accent);
color: var(--color-accent);
color: var(--color-accent-fg);
}
.filter-pill.active {
@@ -1875,7 +1887,7 @@ input[type="range"]::-moz-range-thumb {
.glossar-feedback-btn:hover {
background: rgb(var(--hlc-lime-rgb) / 0.1);
color: var(--color-accent);
color: var(--color-accent-fg);
opacity: 1;
}
@@ -2030,7 +2042,7 @@ input[type="range"]::-moz-range-thumb {
}
.form-msg-success {
color: var(--color-accent);
color: var(--color-accent-fg);
}
/* Inline warning shown above Save in the project edit modal when changing
@@ -2088,7 +2100,7 @@ input[type="range"]::-moz-range-thumb {
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
color: var(--color-accent);
color: var(--color-accent-fg);
}
.download-icon svg {
@@ -2123,7 +2135,7 @@ input[type="range"]::-moz-range-thumb {
padding: 0.5rem 1rem;
font-size: 0.82rem;
font-weight: 600;
color: var(--color-accent);
color: var(--color-accent-fg);
border: 1.5px solid var(--color-accent);
border-radius: var(--radius);
transition: background 0.15s ease, color 0.15s ease;
@@ -2247,7 +2259,7 @@ input[type="range"]::-moz-range-thumb {
.links-pending-badge {
font-size: 0.78rem;
color: var(--color-accent);
color: var(--color-accent-fg);
background: rgb(var(--hlc-lime-rgb) / 0.1);
padding: 0.25rem 0.65rem;
border-radius: 999px;
@@ -2296,7 +2308,7 @@ input[type="range"]::-moz-range-thumb {
.links-filter-btn:hover {
border-color: var(--color-accent);
color: var(--color-accent);
color: var(--color-accent-fg);
}
.links-filter-btn.active {
@@ -2369,7 +2381,7 @@ input[type="range"]::-moz-range-thumb {
}
.link-card:hover .link-card-external {
color: var(--color-accent);
color: var(--color-accent-fg);
opacity: 1;
}
@@ -2399,7 +2411,7 @@ input[type="range"]::-moz-range-thumb {
.link-card-feedback:hover {
opacity: 1 !important;
color: var(--color-accent);
color: var(--color-accent-fg);
}
.links-empty {
@@ -2523,7 +2535,7 @@ input[type="range"]::-moz-range-thumb {
}
.form-message-success {
color: var(--color-accent);
color: var(--color-accent-fg);
}
.form-message-error {
@@ -2556,7 +2568,7 @@ input[type="range"]::-moz-range-thumb {
}
.print-header-brand strong {
color: var(--color-accent);
color: var(--color-accent-fg);
font-size: 1.4rem;
}
@@ -2714,7 +2726,7 @@ input[type="range"]::-moz-range-thumb {
font-family: var(--font-mono);
font-weight: 600;
font-size: 1.05rem;
color: var(--color-accent);
color: var(--color-accent-fg);
}
/* Tabs */
@@ -3023,12 +3035,12 @@ input[type="range"]::-moz-range-thumb {
font-weight: 600;
letter-spacing: 0.04em;
background: rgb(var(--hlc-lime-rgb) / 0.12);
color: var(--color-accent);
color: var(--color-accent-fg);
}
.checklist-regime-UPC {
background: rgb(var(--hlc-lime-rgb) / 0.12);
color: var(--color-accent);
color: var(--color-accent-fg);
}
.checklist-regime-DE {
@@ -3062,7 +3074,7 @@ input[type="range"]::-moz-range-thumb {
}
.checklist-back:hover {
color: var(--color-accent);
color: var(--color-accent-fg);
}
.checklist-back-arrow {
@@ -3106,7 +3118,7 @@ input[type="range"]::-moz-range-thumb {
.btn-ghost:hover {
border-color: var(--color-accent);
color: var(--color-accent);
color: var(--color-accent-fg);
}
.checklist-meta {
@@ -3195,11 +3207,11 @@ input[type="range"]::-moz-range-thumb {
}
.checklist-instance-name:hover {
color: var(--color-accent);
color: var(--color-accent-fg);
}
.checklist-instance-akte-link {
color: var(--color-accent);
color: var(--color-accent-fg);
text-decoration: none;
}
@@ -3492,7 +3504,7 @@ input[type="range"]::-moz-range-thumb {
padding: 0.12rem 0.55rem;
border-radius: 99px;
background: rgb(var(--hlc-lime-rgb) / 0.1);
color: var(--color-accent);
color: var(--color-accent-fg);
font-weight: 600;
font-size: 0.72rem;
text-transform: uppercase;
@@ -3543,7 +3555,7 @@ input[type="range"]::-moz-range-thumb {
.gericht-feedback-btn:hover {
background: rgb(var(--hlc-lime-rgb) / 0.1);
color: var(--color-accent);
color: var(--color-accent-fg);
}
.gericht-toggle {
@@ -3626,7 +3638,7 @@ input[type="range"]::-moz-range-thumb {
}
.gericht-contact a {
color: var(--color-accent);
color: var(--color-accent-fg);
text-decoration: none;
}
@@ -3759,7 +3771,7 @@ input[type="range"]::-moz-range-thumb {
.btn-cta-lime.btn-outline {
background: transparent;
color: var(--color-accent);
color: var(--color-accent-fg);
border: 1.5px solid var(--color-accent);
}
@@ -3946,10 +3958,9 @@ input[type="range"]::-moz-range-thumb {
}
.akten-firmwide-dot {
color: var(--hlc-lime);
color: var(--color-accent-fg);
font-size: 0.95em;
margin-left: 0.4rem;
text-shadow: 0 0 2px rgba(26, 26, 46, 0.35);
}
.akten-empty {
@@ -4195,7 +4206,7 @@ input[type="range"]::-moz-range-thumb {
}
.akten-back-link:hover {
color: var(--color-accent);
color: var(--color-accent-fg);
}
.akten-form {
@@ -4391,7 +4402,7 @@ input[type="range"]::-moz-range-thumb {
.btn-icon:hover {
border-color: var(--color-accent);
color: var(--color-accent);
color: var(--color-accent-fg);
}
.akten-tabs {
@@ -4741,7 +4752,7 @@ input[type="range"]::-moz-range-thumb {
}
.frist-reopen-btn:hover {
color: var(--color-accent, var(--color-accent));
color: var(--color-accent-fg);
border-color: var(--color-accent, var(--color-accent));
background: rgb(var(--hlc-lime-rgb) / 0.08);
}
@@ -5063,7 +5074,7 @@ input[type="range"]::-moz-range-thumb {
}
.dashboard-greeting-name {
color: var(--color-accent);
color: var(--color-accent-fg);
}
.dashboard-subline {
@@ -5197,7 +5208,7 @@ input[type="range"]::-moz-range-thumb {
}
.dashboard-matter-arrow {
color: var(--color-accent);
color: var(--color-accent-fg);
font-size: 1.1rem;
}
@@ -5271,7 +5282,7 @@ input[type="range"]::-moz-range-thumb {
}
.dashboard-list-link:hover {
color: var(--color-accent);
color: var(--color-accent-fg);
}
.dashboard-list-main {
@@ -5409,7 +5420,7 @@ input[type="range"]::-moz-range-thumb {
.dashboard-activity-project {
font-family: var(--font-mono);
color: var(--color-accent);
color: var(--color-accent-fg);
text-decoration: none;
margin-right: 0.4rem;
}
@@ -5453,7 +5464,7 @@ input[type="range"]::-moz-range-thumb {
}
.termin-type-hearing { background: #b91c1c; color: #b91c1c; }
.termin-type-meeting { background: #2563eb; color: #2563eb; }
.termin-type-consultation { background: var(--color-accent); color: var(--color-accent); }
.termin-type-consultation { background: var(--color-accent); color: var(--color-accent-fg); }
.termin-type-deadline_hearing { background: #b45309; color: #b45309; }
.termin-type-default { background: #94a3b8; color: #64748b; }
@@ -5724,7 +5735,7 @@ input[type="range"]::-moz-range-thumb {
}
.notiz-body a {
color: var(--color-accent);
color: var(--color-accent-fg);
text-decoration: underline;
word-break: break-all;
}
@@ -5971,7 +5982,7 @@ input[type="range"]::-moz-range-thumb {
}
.search-group-actions .search-result-icon {
color: var(--color-accent);
color: var(--color-accent-fg);
}
.palette-footer {
@@ -6098,7 +6109,7 @@ input[type="range"]::-moz-range-thumb {
.changelog-tag-feature {
background: rgb(var(--hlc-lime-rgb) / 0.14);
color: var(--color-accent);
color: var(--color-accent-fg);
}
.changelog-tag-content {
@@ -6405,7 +6416,7 @@ input[type="range"]::-moz-range-thumb {
}
.team-dept-lead a {
color: var(--color-accent, var(--color-accent));
color: var(--color-accent-fg);
text-decoration: none;
}
@@ -6522,7 +6533,7 @@ input[type="range"]::-moz-range-thumb {
gap: 0.35rem;
margin-top: 0.6rem;
font-size: 0.82rem;
color: var(--color-accent, var(--color-accent));
color: var(--color-accent-fg);
text-decoration: none;
overflow-wrap: anywhere;
word-break: break-all;
@@ -6591,7 +6602,7 @@ input[type="range"]::-moz-range-thumb {
}
.bottom-nav-slot.active {
color: var(--color-accent);
color: var(--color-accent-fg);
}
.bottom-nav-slot.active::before {
@@ -6772,7 +6783,7 @@ dialog.quick-add-sheet::backdrop {
height: 40px;
border-radius: 50%;
background: rgb(var(--hlc-lime-rgb) / 0.1);
color: var(--color-accent);
color: var(--color-accent-fg);
flex-shrink: 0;
}
@@ -6912,7 +6923,7 @@ dialog.quick-add-sheet::backdrop {
justify-content: center;
vertical-align: -4px;
margin: 0 0.15rem;
color: var(--color-accent, var(--color-accent));
color: var(--color-accent-fg);
}
.pwa-install-cta {
@@ -7062,7 +7073,7 @@ dialog.quick-add-sheet::backdrop {
}
.sidebar-admin-group .sidebar-group-label {
color: var(--hlc-lime);
color: var(--color-accent-fg);
}
/* --- Project breadcrumb (t-paliad-049) ---------------------------------