dotcom-rendering
dotcom-rendering copied to clipboard
Accessibility colour improvements for DCR cards
Culture kicker fails currently
The old and new colours are laid out side-by-side in this Figma file: https://www.figma.com/file/5CfbWOeZPRi15lXBD5u1rW/?node-id=160%3A4026
This is a summarised list of the things that need to change:
- [ ] All Opinion cards The opinion.400 colour is being changed within Source to #C74600 which will make the text accessible
- [ ] All Culture cards The culture.350 colour is being changed within Source to #866D50 which will make the text accessible
- [ ] Standard Labs card The labs.400 colour needs to be replaced with the new labs.200 #0C7A73
- [ ] Live Blog cards The kicker and all metadata needs to change to neutral.100, other than Labs
- [ ] Media cards Make the metadata neutral.86 across all variants
- [ ] Special Report Comment card Replace opinion.550 with brandAlt.400 and change the multiline colour to neutral.46
- [ ] Special Report cards Make the metadata neutral.86 across all variants
- [ ] Metadata across all cards should be either neutral.46 for pale cards, neutral.86 for dark cards, neutral.100 for live blog cards, and #606060 for some fronts palettes cards
I'm happy to pick this up, assuming that no-one's already actively working on it?
Standard Labs card The labs.400 colour needs to be replaced with the new labs.200 #0C7A73
This colour is currently being set by the default fall-through of using pillarPalette[format.theme].main
:
https://github.com/guardian/dotcom-rendering/blob/e6810b910f1cb656d75100af5239e9b108e38e04/dotcom-rendering/src/web/lib/decidePalette.ts#L468-L469
So it could be resolved by updating the value used for main
for labs, but these palettes are deprecated, so it might be better to refactor and add an explicit case for Labs kickers.
@oliverlloyd it looks like you were involved in deprecating pillars.ts
-- is there any context you can provide on how we should approach it moving forwards for refactors like this?
is there any context you can provide on how we should approach it moving forwards for refactors like this?
pillarPalette
is just a convenience helper, you can replace it with a switch statement that gives you more flexibility. We deprecated it because we wanted decidePalette
to be the one central place where colour is decided and to not have multiple 'palettes' in different places.
AMP still uses the old palette but outside of this the only other place we use it is in decidePalette.
@bryophyta is this done now? I think 'Live' kickers look odd in white so might suggest changing back to a pale colour. I can add this in a new ticket though?
Some of these were fixed, but others had some questions or discussion which didn't get resolved.. Maybe given that this ticket is quite old now it would be best to just raise new tickets for any issues that you're aware of? Then we know what to prioritise 👍