boostorg / boostorg/website-v2

Task: Implement Light to Dark Mode Translation for Cards

Open
#2,356 0 comments 0 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.