Switch to Mila petrol with contrast-safe theme tokens and one button, badge and segmented API closes #602

simon commented

2026-10-19 21:17:04 +02:00

Owner

closes #602

Description of the implemented changes

The changes were:

Bugfixing
New Feature
Breaking Change
Refactoring

Replaces the generator orange with Mila's petrol in both themes, with every color role measured against WCAG AA and all derived variants (text, lines, soft fills, focus rings, muted text levels, chart palettes) computed centrally in one theme-derivation rule group instead of per-page patches. Buttons, badges and the new segmented control share one color/appearance/size API, every view uses these components, and the UI guard keeps raw buttons, hand-set text levels and foreign colors out of the views.

What has been changed?

Switch both themes to Mila petrol with measured, contrast-safe tokens
Give button and badge the same color, appearance and size axes
Add a segmented control as a radio group with a filled selection
Build every filter toggle as a segmented control
Change a cycle's status through a segmented control that keeps its status color
Report failed cycle status changes and fee type deletes instead of crashing
Render every button through the button component with an explicit color and a sentence-case label
Show buttons, badges, segmented controls, links, text levels, checkboxes and switches in the showcase
Show checked checkboxes in the primary color and keep unchecked boxes neutral
Mark unavailable entries as disabled and show focus rings for keyboard focus only
Lift daisyUI's muted text levels centrally and reject hand-set levels and raw buttons in views
Draw charts and indicators in semantic and brand palettes with measured contrast
Share one always-visible sort glyph across all sortable headers
Remove the unused Phoenix generator logo
Document the petrol theme, the theme-derivation rule group and the component APIs
Name the badge color helpers after the color axis they feed
Record the petrol theme and the button migration under Unreleased
Drop obsolete catalog entries left by the renamed labels

Definition of Done

Code Quality

No new technical depths
Linting passed
Documentation is added were needed

Accessibility

New elements are properly defined with html-tags
Colour contrast follows WCAG criteria
Aria labels are added when needed
Everything is accessible by keyboard
Tab-Order is comprehensible
All interactive elements have a visible focus

Testing

Tests for new code are written
All tests pass
axe-core dev tools show no critical or major issues

Additional Notes

Backtrack from solutions to requirements: the chosen solution revised the spec (measured light primary-ink #00767d, neutral derivation from base-content, filled segmented selection, kept system font stack).
Large commits: most commits touch more than 5 files; the button migration, the central text levels and the theme switch are the largest diffs.

closes #602 ## Description of the implemented changes The changes were: - [x] Bugfixing - [x] New Feature - [ ] Breaking Change - [x] Refactoring Replaces the generator orange with Mila's petrol in both themes, with every color role measured against WCAG AA and all derived variants (text, lines, soft fills, focus rings, muted text levels, chart palettes) computed centrally in one theme-derivation rule group instead of per-page patches. Buttons, badges and the new segmented control share one color/appearance/size API, every view uses these components, and the UI guard keeps raw buttons, hand-set text levels and foreign colors out of the views. ## What has been changed? - Switch both themes to Mila petrol with measured, contrast-safe tokens - Give button and badge the same color, appearance and size axes - Add a segmented control as a radio group with a filled selection - Build every filter toggle as a segmented control - Change a cycle's status through a segmented control that keeps its status color - Report failed cycle status changes and fee type deletes instead of crashing - Render every button through the button component with an explicit color and a sentence-case label - Show buttons, badges, segmented controls, links, text levels, checkboxes and switches in the showcase - Show checked checkboxes in the primary color and keep unchecked boxes neutral - Mark unavailable entries as disabled and show focus rings for keyboard focus only - Lift daisyUI's muted text levels centrally and reject hand-set levels and raw buttons in views - Draw charts and indicators in semantic and brand palettes with measured contrast - Share one always-visible sort glyph across all sortable headers - Remove the unused Phoenix generator logo - Document the petrol theme, the theme-derivation rule group and the component APIs - Name the badge color helpers after the color axis they feed - Record the petrol theme and the button migration under Unreleased - Drop obsolete catalog entries left by the renamed labels ## Definition of Done ### Code Quality - [ ] No new technical depths - [x] Linting passed - [x] Documentation is added were needed ### Accessibility - [ ] New elements are properly defined with html-tags - [ ] Colour contrast follows WCAG criteria - [ ] Aria labels are added when needed - [ ] Everything is accessible by keyboard - [ ] Tab-Order is comprehensible - [ ] All interactive elements have a visible focus ### Testing - [x] Tests for new code are written - [x] All tests pass - [ ] axe-core dev tools show no critical or major issues ## Additional Notes - Backtrack from solutions to requirements: the chosen solution revised the spec (measured light primary-ink #00767d, neutral derivation from base-content, filled segmented selection, kept system font stack). - Large commits: most commits touch more than 5 files; the button migration, the central text levels and the theme switch are the largest diffs.

simon added 20 commits

2026-10-19 21:17:04 +02:00

feat(theme): switch both themes to Mila petrol with measured, contrast-safe tokens 9cc638f7be

feat(ui): give button and badge the same color, appearance and size axes 68f4419b9d

feat(ui): add a segmented control as a radio group with a filled selection 6c8a55f0cb

refactor(member-overview): build every filter toggle as a segmented control f40aebc5af

feat(membership-fees): change a cycle's status through a segmented control that keeps its status color 5a88ef2628

fix(membership-fees): report failed cycle status changes and fee type deletes instead of crashing e309fba129

refactor(ui): render every button through the button component with an explicit color and a sentence-case label 715160c1e8

feat(dev): show buttons, badges, segmented controls, links, text levels, checkboxes and switches in the showcase 21835db351

feat(ui): show checked checkboxes in the primary color and keep unchecked boxes neutral 5905bb6b11

fix(sidebar): mark unavailable entries as disabled and show focus rings for keyboard focus only 22a7cea55c