local-it/mitgliederverwaltung
2
3
Fork 0
Code Issues 59 Pull requests 3 Projects 2 Releases Packages 1 Activity Actions

style: consistent badges with sufficient color contrast

Browse source
This commit is contained in:
carla 2026-02-26 08:33:52 +01:00
parent d614ad2219
commit d0b8cb672a
22 changed files with 534 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

6
CODE_GUIDELINES.md
View file

@ -2781,7 +2781,11 @@ Building accessible applications ensures that all users, including those with di
### 8.4 Color and Contrast
**Ensure Sufficient Contrast:**
**Ensure Sufficient Contrast (WCAG 2.2 AA: 4.5:1 for normal text):**
- Use the Core Component `<.badge>` for all badges; theme and `app.css` overrides ensure badge text meets 4.5:1 in light and dark theme (solid, soft, and outline styles). Cycle status "suspended" uses variant `:warning` (yellow) to match the edit cycle-status button.
- For other UI, prefer theme tokens (`text-*-content` on `bg-*`) or the `.text-success-aa` / `.text-error-aa` utility classes where theme contrast is insufficient.
- Member filter join buttons (All / Paid / Unpaid, etc.) use `.member-filter-dropdown`; `app.css` overrides ensure WCAG 4.5:1 for inactive and active states.
```elixir
# Tailwind classes with sufficient contrast (4.5:1 minimum)