fix(t-paliad-087): theme-aware count pills + sweep of hardcoded light-grey BGs
`/team` count pills (member counts per office / per partner unit) rendered with `var(--color-bg-muted, #f4f4f7)` — but `--color-bg-muted` was never defined, so the literal `#f4f4f7` always won and the pills stayed light-grey in dark mode. Sweep across `frontend/src/styles/global.css`: - 5x `--color-bg-muted, #f3f4f6|#f4f4f7` → `--color-surface-muted` (the actual themed chip-bg token; light: #f3f4f6, dark: 5% cream over midnight). Sites: `.team-group-count`, `.team-dept-tag`, `.admin-soon-badge`, `.admin-audit-event`, `.admin-audit-source`. - Trigger-event Fristenrechner block (added in PR-2 / t-paliad-086) used a parallel set of fictional tokens (`--surface-color`, `--surface-soft`, `--accent-soft`, `--text-color`, `--text-muted`, `--border-color`, `--accent`, `--accent-text`, `--border-light`) that were never defined, so the entire panel rendered in fallback hex literals — white card, light-grey duration chip, pale-lime rule-code, dark `#111` body text. In dark mode the bg/border/divider stayed light while text stayed dark, on a midnight body — unreadable. Re-pointed all 27 sites onto the project's `--color-*` token system. - `rgba(0, 0, 0, 0.0X)` literal overlays (hover/active states for `.search-result`, `.palette-action`, `.quick-add-row/-cancel`, `.pwa-install-dismiss`, `.termin-type-chip/-badge`, `.termin-personal-tag`, `.caldav-status-card`) → `--color-overlay-faint|subtle` (the existing tokens that flip to white-channel alpha in dark mode). - Removed redundant hex fallbacks on already-themed tokens (`var(--color-surface, #ffffff)` → `var(--color-surface)` etc) — the `:root[data-theme="dark"]` block already defines all of them. Acceptance: - `cd frontend && bun run build` → clean. - Sweep-greps from the task brief now return 0 hits (excl. one comment). - No new tokens introduced — reuses the t-paliad-083 / t-paliad-082 palette. Refs t-paliad-087.
This commit is contained in:
m
@@ -1513,7 +1513,7 @@ input[type="range"]::-moz-range-thumb {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border-bottom: 1px solid var(--border-color, #e5e7eb);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.mode-tab {
|
||||
@@ -1523,18 +1523,18 @@ input[type="range"]::-moz-range-thumb {
|
||||
padding: 0.6rem 1rem;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted, #6b7280);
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.mode-tab:hover {
|
||||
color: var(--text-color, #111);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.mode-tab.is-active {
|
||||
color: var(--text-color, #111);
|
||||
border-bottom-color: var(--accent, #c6f41c);
|
||||
color: var(--color-text);
|
||||
border-bottom-color: var(--color-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -1549,7 +1549,7 @@ input[type="range"]::-moz-range-thumb {
|
||||
/* --- Event mode (Was kommt nach…) --- */
|
||||
|
||||
.wizard-step-hint {
|
||||
color: var(--text-muted, #6b7280);
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.9rem;
|
||||
margin: -0.4rem 0 1rem;
|
||||
}
|
||||
@@ -1564,14 +1564,14 @@ input[type="range"]::-moz-range-thumb {
|
||||
width: 100%;
|
||||
padding: 0.6rem 0.8rem;
|
||||
font-size: 1rem;
|
||||
border: 1px solid var(--border-color, #d1d5db);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
background: var(--surface-color, #fff);
|
||||
color: var(--text-color, #111);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.event-search-input:focus {
|
||||
outline: 2px solid var(--accent, #c6f41c);
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
@@ -1581,15 +1581,15 @@ input[type="range"]::-moz-range-thumb {
|
||||
padding: 0;
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--border-color, #d1d5db);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
background: var(--surface-color, #fff);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.event-list-item {
|
||||
padding: 0.55rem 0.8rem;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid var(--border-light, #f3f4f6);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
@@ -1598,19 +1598,19 @@ input[type="range"]::-moz-range-thumb {
|
||||
|
||||
.event-list-item:hover,
|
||||
.event-list-item:focus {
|
||||
background: var(--accent-soft, #f5fbe2);
|
||||
background: var(--color-bg-lime-tint);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.event-list-empty {
|
||||
padding: 1rem;
|
||||
color: var(--text-muted, #6b7280);
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.event-results-header {
|
||||
background: var(--surface-soft, #f9fafb);
|
||||
background: var(--color-surface-muted);
|
||||
border-radius: 6px;
|
||||
padding: 0.8rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
@@ -1620,7 +1620,7 @@ input[type="range"]::-moz-range-thumb {
|
||||
|
||||
.event-results-empty {
|
||||
padding: 1rem;
|
||||
color: var(--text-muted, #6b7280);
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@@ -1634,8 +1634,8 @@ input[type="range"]::-moz-range-thumb {
|
||||
}
|
||||
|
||||
.event-result-row {
|
||||
background: var(--surface-color, #fff);
|
||||
border: 1px solid var(--border-color, #e5e7eb);
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
padding: 0.8rem 1rem;
|
||||
}
|
||||
@@ -1650,12 +1650,12 @@ input[type="range"]::-moz-range-thumb {
|
||||
|
||||
.event-result-title {
|
||||
font-weight: 600;
|
||||
color: var(--text-color, #111);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.event-result-date {
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--accent-text, #4d6e00);
|
||||
color: var(--color-accent-fg);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -1665,18 +1665,18 @@ input[type="range"]::-moz-range-thumb {
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted, #6b7280);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.event-result-duration {
|
||||
background: var(--surface-soft, #f3f4f6);
|
||||
background: var(--color-surface-muted);
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.event-rule-code {
|
||||
background: var(--accent-soft, #f5fbe2);
|
||||
color: var(--accent-text, #4d6e00);
|
||||
background: var(--color-bg-lime-tint);
|
||||
color: var(--color-accent-fg);
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
@@ -1687,14 +1687,14 @@ input[type="range"]::-moz-range-thumb {
|
||||
.event-result-adjusted {
|
||||
margin-top: 0.4rem;
|
||||
font-size: 0.82rem;
|
||||
color: var(--text-muted, #6b7280);
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.event-result-notes {
|
||||
margin-top: 0.4rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-color, #111);
|
||||
color: var(--color-text);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@@ -5863,7 +5863,7 @@ input[type="range"]::-moz-range-thumb {
|
||||
border-radius: 999px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
background: var(--color-overlay-faint);
|
||||
color: inherit;
|
||||
}
|
||||
.termin-type-chip.termin-type-hearing { background: rgba(185, 28, 28, 0.10); }
|
||||
@@ -5879,8 +5879,8 @@ input[type="range"]::-moz-range-thumb {
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
color: #475569;
|
||||
background: var(--color-overlay-subtle);
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.termin-type-badge.termin-type-hearing { background: rgba(185, 28, 28, 0.12); color: #b91c1c; }
|
||||
@@ -5892,8 +5892,8 @@ input[type="range"]::-moz-range-thumb {
|
||||
display: inline-block;
|
||||
padding: 0.1rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: #64748b;
|
||||
background: var(--color-overlay-faint);
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
@@ -5928,8 +5928,8 @@ input[type="range"]::-moz-range-thumb {
|
||||
|
||||
/* CalDAV settings page */
|
||||
.caldav-status-card {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
background: var(--color-surface-muted);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
padding: 0.8rem 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
@@ -6297,7 +6297,7 @@ input[type="range"]::-moz-range-thumb {
|
||||
|
||||
.search-result:hover,
|
||||
.search-result.active {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
background: var(--color-overlay-faint);
|
||||
border-left-color: var(--color-accent);
|
||||
}
|
||||
|
||||
@@ -6366,7 +6366,7 @@ input[type="range"]::-moz-range-thumb {
|
||||
|
||||
.palette-action:hover,
|
||||
.palette-action.active {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
background: var(--color-overlay-faint);
|
||||
border-left-color: var(--color-accent);
|
||||
}
|
||||
|
||||
@@ -6816,7 +6816,7 @@ input[type="range"]::-moz-range-thumb {
|
||||
|
||||
.team-group-count {
|
||||
flex-shrink: 0;
|
||||
background: var(--color-bg-muted, #f4f4f7);
|
||||
background: var(--color-surface-muted);
|
||||
color: var(--color-text-muted, #64647a);
|
||||
border-radius: 999px;
|
||||
padding: 0.15rem 0.7rem;
|
||||
@@ -6912,7 +6912,7 @@ input[type="range"]::-moz-range-thumb {
|
||||
.team-dept-tag {
|
||||
display: inline-block;
|
||||
padding: 0.15rem 0.5rem;
|
||||
background: var(--color-bg-muted, #f4f4f7);
|
||||
background: var(--color-surface-muted);
|
||||
color: var(--color-text-muted, #64647a);
|
||||
border-radius: 999px;
|
||||
}
|
||||
@@ -7162,7 +7162,7 @@ dialog.quick-add-sheet::backdrop {
|
||||
|
||||
.quick-add-row:hover,
|
||||
.quick-add-row:active {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
background: var(--color-overlay-faint);
|
||||
}
|
||||
|
||||
.quick-add-icon {
|
||||
@@ -7213,7 +7213,7 @@ dialog.quick-add-sheet::backdrop {
|
||||
}
|
||||
|
||||
.quick-add-cancel:hover {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
background: var(--color-overlay-faint);
|
||||
}
|
||||
|
||||
/* --- Phone breakpoint (<768px): show BottomNav, hide legacy hamburger --- */
|
||||
@@ -7250,9 +7250,9 @@ dialog.quick-add-sheet::backdrop {
|
||||
align-items: center;
|
||||
gap: 0.85rem;
|
||||
padding: 0.85rem 1rem;
|
||||
background: var(--color-surface, #ffffff);
|
||||
color: var(--color-text, #111111);
|
||||
border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
|
||||
animation: pwa-banner-in 220ms ease-out;
|
||||
@@ -7303,7 +7303,7 @@ dialog.quick-add-sheet::backdrop {
|
||||
.pwa-install-sub {
|
||||
margin-top: 0.15rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted, rgba(0, 0, 0, 0.62));
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
@@ -7341,15 +7341,15 @@ dialog.quick-add-sheet::backdrop {
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
color: var(--color-text-muted, rgba(0, 0, 0, 0.5));
|
||||
color: var(--color-text-muted);
|
||||
font-size: 1.4rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pwa-install-dismiss:hover {
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
color: var(--color-text, #111111);
|
||||
background: var(--color-overlay-subtle);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
@keyframes pwa-banner-in {
|
||||
@@ -7487,7 +7487,7 @@ dialog.quick-add-sheet::backdrop {
|
||||
padding: 0.28rem 0.6rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-surface, #fff);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text-muted);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
@@ -7628,7 +7628,7 @@ dialog.quick-add-sheet::backdrop {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--color-text-muted);
|
||||
background: var(--color-bg-muted, #f3f4f6);
|
||||
background: var(--color-surface-muted);
|
||||
border: 1px solid var(--color-border);
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 999px;
|
||||
@@ -7717,7 +7717,7 @@ dialog.quick-add-sheet::backdrop {
|
||||
|
||||
.admin-audit-event {
|
||||
font-size: 0.78rem;
|
||||
background: var(--color-bg-muted, #f3f4f6);
|
||||
background: var(--color-surface-muted);
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
@@ -7741,7 +7741,7 @@ dialog.quick-add-sheet::backdrop {
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-bg-muted, #f3f4f6);
|
||||
background: var(--color-surface-muted);
|
||||
color: var(--color-text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user