boostorg / boostorg/website-v2
Task: Implement Light to Dark Mode Translation for Cards
- Dominant language
- HTML
- Stars
- 18
- Forks
- 28
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 77
Description
**Summary**
Update the design foundations so card background colours translate correctly from light mode to dark mode, instead of requiring manual overrides in components.
[Card Example](https://www.figma.com/design/VhZHw3RudFNMzfPEEYchE9/UI-Kit---Foundations-Delivery?node-id=4291-17049&t=vR9b044Pz06y1uR0-4)
[Colour Foundations ](https://www.figma.com/design/VhZHw3RudFNMzfPEEYchE9/UI-Kit---Foundations-Delivery?node-id=503-3145&t=vR9b044Pz06y1uR0-4)
**Context**
Design clarified that:
- White / non-coloured cards should map to a specific gray treatment in dark mode.
- Coloured cards should use a different dark mode variant.
- The current foundations do not reflect the intended gray-tone mapping, so teams are manually adjusting colours in components.
**Problem**
The current light-to-dark translation behaviour for card backgrounds is not encoded at the foundation level. As a result:
- component implementations require manual colour overrides
- dark mode behaviour is inconsistent across cards
**Task**
Implement the light > dark mode translation in foundations for card background colours so components can inherit the correct mapping by default.
**Scope**
- Update foundation-level colour mappings for card backgrounds.
- Ensure white / non-coloured cards use the approved gray translation in dark mode.
- Ensure coloured cards use the approved dark mode variant.
- Remove the need for manual per-component overrides where possible.
**Acceptance criteria**
- Card background colours follow the approved light-to-dark mapping from foundations.
- White / non-coloured cards render with the correct gray treatment in dark mode.
- Coloured cards render with the correct dark mode variant.
**Notes / Risks**
- Although the change sounds simple, it may have broader consequences because it could affect all coloured cards.
- QA: please verify all coloured card surfaces in dark mode (e.g join card, event card, and postcards etc.) have the correct gray colour
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.