fix(#94): replace text-white with text-primary-fg on all primary buttons #109

Merged

marcel merged 1 commits from feature/94-fix-dark-save-button into main 2026-03-27 16:07:40 +01:00

Conversation 0 Commits 1 Files Changed 28 +39 -39

marcel commented 2026-03-27 16:00:48 +01:00

Owner

Copy Link

Closes #94

Problem

In dark mode --c-primary switches from navy #012851 to mint #a1dcd8. Buttons using bg-primary text-white showed white text on mint at ~1.4:1 — invisible. Buttons using bg-brand-navy text-white were also invisible: navy (#012851) on the dark canvas (#0d0d0d) at 1.3:1.

Fix

28 components updated:

• bg-primary ... text-white → text-primary-fg
• hover:bg-primary hover:text-white → hover:bg-primary hover:text-primary-fg
• bg-brand-navy ... text-white ... hover:bg-brand-navy/90 → bg-primary ... text-primary-fg ... hover:bg-primary/90 (4 enrich/new files)

Light mode unchanged: primary-fg = white in light mode, so no visual difference.
Dark mode: primary-fg = navy (#012851) on mint button = readable.

Test plan

• Dark mode: save button in document edit form is visually distinct (mint background, navy text)
• Dark mode: save button in new document form is visible
• Dark mode: admin action buttons, login button, comment submit button all visible
• Dark mode: user avatar circles (initials) have readable text
• Light mode: no visual change to any button — primary-fg = white in light mode
• Both modes: delete/cancel buttons (red/gray) unaffected — only bg-primary targets changed

Closes #94 ## Problem In dark mode `--c-primary` switches from navy `#012851` to mint `#a1dcd8`. Buttons using `bg-primary text-white` showed **white text on mint at ~1.4:1** — invisible. Buttons using `bg-brand-navy text-white` were also invisible: navy (`#012851`) on the dark canvas (`#0d0d0d`) at **1.3:1**. ## Fix 28 components updated: - `bg-primary ... text-white` → `text-primary-fg` - `hover:bg-primary hover:text-white` → `hover:bg-primary hover:text-primary-fg` - `bg-brand-navy ... text-white ... hover:bg-brand-navy/90` → `bg-primary ... text-primary-fg ... hover:bg-primary/90` (4 enrich/new files) **Light mode unchanged**: `primary-fg = white` in light mode, so no visual difference. **Dark mode**: `primary-fg = navy (#012851)` on mint button = readable. ## Test plan - [ ] Dark mode: save button in document edit form is visually distinct (mint background, navy text) - [ ] Dark mode: save button in new document form is visible - [ ] Dark mode: admin action buttons, login button, comment submit button all visible - [ ] Dark mode: user avatar circles (initials) have readable text - [ ] Light mode: no visual change to any button — primary-fg = white in light mode - [ ] Both modes: delete/cancel buttons (red/gray) unaffected — only bg-primary targets changed

marcel added 1 commit 2026-03-27 16:00:48 +01:00

fix(#94): replace text-white with text-primary-fg on all primary buttons ... e3a2027425

In dark mode --c-primary switches from navy (#012851) to mint (#a1dcd8).
Buttons using bg-primary+text-white showed white text on mint at 1.4:1
contrast — invisible. bg-brand-navy buttons were also invisible (navy on
near-black canvas, 1.3:1).

Replaced in 28 components app-wide:
- bg-primary ... text-white → text-primary-fg
- hover:bg-primary hover:text-white → hover:text-primary-fg
- bg-brand-navy ... text-white + hover:bg-brand-navy/90 →
  bg-primary ... text-primary-fg + hover:bg-primary/90

Light mode is unchanged: primary-fg = white in light mode.
Dark mode: primary-fg = navy (#012851) on mint bg = readable.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

marcel merged commit fcff7fbdb1 into main 2026-03-27 16:07:40 +01:00

marcel deleted branch feature/94-fix-dark-save-button 2026-03-27 16:07:54 +01:00

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

Clear labels

P0-critical

Blocks a core user journey, causes data loss, or is a security/accessibility barrier. Work on this before P1+.

P1-high

Significant friction on a main user journey; workaround exists but is non-obvious. Next up after P0.

P2-medium

Noticeable improvement; doesn't block anything; schedule opportunistically.

P3-later

Cosmetic or parking-lot work; fine to stay open indefinitely.

audit

Read-only audit / assessment work; produces a report rather than changing code

bug

Something isn't working

cleanup

Removal of dead code, vague comments, naming violations, and scratch artifacts

collaboration

We want to extend the family archive to have more collaboration tools

conversation

descoped

We will do that later

devops

documentation

README, ARCHITECTURE, GLOSSARY, CONTRIBUTING, per-domain docs

epic

Marker for epic-level issues that group multiple child issues

feature

file-upload

legibility

Codebase Legibility Refactor — preparing the codebase for human evaluation and bus-factor reduction

notification

person

phase-1: security

Security hygiene — must be done first

phase-2: container-images

Production-ready multi-stage Docker images

phase-3: prod-compose

Production compose overlay + Caddy reverse proxy

phase-4: spring-prod-profile

Spring Boot production configuration profile

phase-5: backups

Database and object storage backup strategy

phase-6: deployment-docs

.env.example, DEPLOYMENT.md, runbook

phase-7: monitoring

Prometheus, Loki, Grafana, Alertmanager

refactor

Code restructuring without behaviour change

security

test

ui

UI/UX and accessibility issues

user

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

Jens marcel

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: marcel/familienarchiv#109