53 lines
2.3 KiB
Markdown
53 lines
2.3 KiB
Markdown
# Badge Component Design Notes (WCAG)
|
|
|
|
Design rationale for the central `<.badge>` core component
|
|
(`MvWeb.CoreComponents`) and the WCAG-driven theme overrides in
|
|
`assets/css/app.css`. Before it, badges were raw `<span class="badge ...">`
|
|
markup with no central component.
|
|
|
|
## `<.badge>` API contract
|
|
|
|
- `attr :variant` — `:neutral | :primary | :info | :success | :warning | :error`
|
|
- `attr :style` — `:soft | :solid | :outline` (default: `:soft`)
|
|
- `attr :size` — `:sm | :md` (default: `:md`)
|
|
- `attr :sr_label` — optional screen-reader label for icon-only badges
|
|
- `slot :icon` — optional
|
|
- `slot :inner_block` — badge text
|
|
|
|
## Design rules
|
|
|
|
- `:soft` and `:solid` use a visible background; `:soft` is the default. No
|
|
transparent ghost as a default.
|
|
- `:outline` **always** sets a background (e.g. `bg-base-100`) so the border
|
|
stays visible on grey (`base-200`/`base-300`) surfaces.
|
|
- Ghost only as an explicit opt-in, and then with `bg-base-100` for visibility
|
|
(plain DaisyUI `badge-ghost` is `base-200` on `base-200` — nearly invisible).
|
|
- Clickable chips keep `<.badge>` as a plain container with a button in the
|
|
`inner_block`.
|
|
|
|
## WCAG contrast overrides (`app.css`)
|
|
|
|
DaisyUI defaults do not reach the WCAG 2.2 AA **4.5:1** text-contrast ratio for
|
|
badges, so `app.css` adds per-theme overrides on top of the custom `light` /
|
|
`dark` themes:
|
|
|
|
- **Light theme:** darker `--badge-fg` for all solid variants; darker text on
|
|
`badge-soft`'s tinted background; uniform dark text for `badge-outline` on
|
|
`base-100`.
|
|
- **Dark theme:** slightly darkened solid-badge backgrounds so the light
|
|
`*-content` colors reach 4.5:1; lighter, readable variant tints for
|
|
`badge-soft`; light `--badge-fg` for `badge-outline` on `base-100`.
|
|
|
|
Related: contrast overrides for the member-filter join buttons
|
|
(`.member-filter-dropdown .join .btn`) under the same 4.5:1 rule.
|
|
|
|
## Variant helpers
|
|
|
|
- `MembershipFeeHelpers.status_variant/1` → `:success | :error | :warning`.
|
|
`status_variant(:suspended) -> :warning` (yellow) deliberately matches the
|
|
Edit button (`btn-warning`), keeping the "suspended" badge the same color as
|
|
its action.
|
|
- `RoleLive.Helpers.permission_set_badge_variant/1` →
|
|
`:neutral | :info | :success | :error`.
|
|
- `MembershipFeeStatus.format_cycle_status_badge/1` additionally returns a
|
|
`:variant` for `<.badge>`.
|