Limit ColorField to a set of approved, accessible color options

mozmeao / birdbox

A template repo for creating quick-to-deploy, on-brand, easily customisable, CMS-backed microsites - brought to you by your friends in Mozilla MEAO

https://github.com/mozmeao/birdbox-documentation

Mozilla Public License 2.0

5 stars 6 forks source link

Limit ColorField to a set of approved, accessible color options #212

Closed stevejalim closed 7 months ago

stevejalim commented 1 year ago

...Plus have some validation on selected values to ensure accessibility needs are met (would need to take in to consideration which theme was also selected along with the BG color)

...Plus map the approved choices to pre-defined CSS classes, so we can avoid inline styles

Steps:

[ ] Define allowed colour options
[ ] Add specific CSS classes for these options
[ ] Add new ColorField implementation that has these options as the only selectable values, rather than being a color picker - an entirely new field called a ColorSelect seems to make sense
[ ] Update the component(s) that use this field to use the new one instead, falling back to the old value for now, until a new one is selected
[ ] Hide the old field in the CMS UI, but don't drop the field from the database yet
[ ] Rollout and get all sites switched over to using the new picker
[ ] Follow-up with a separate PR that drops the field

stevejalim commented 1 year ago

@craigcook I'm v happy to take this on, as it's not FE-specific, but I'd welcome your advice on what the allowed set(s) of colours should be

stevejalim commented 1 year ago

We'll also need to think about a migration/rollout strategy for futuremo, which is using inline styles for colours, but that could be as simple as 'quickly pick a new colour after rollout"

stevejalim commented 11 months ago

@craigcook Thining about this, it makes sense to have a set of approved colour tints per 'theme' but in order for them to play well with a colour picker, we'll need to name them (ideally consistently) across the themes.

I know a label that describes the colour would be ideal, but that's gonna take some juggling to keep the UI happy (dynamically pulling colour names from a source that needs to be kept in sync with the CSS's class names)

How open are you to the idea of having, say, 12 colour optons named Option 1.... Option 12? We can show them in the documentation and in the demo birdbox site, if people need a reference rather than trial and error.

Then each theme stylesheet we make just needs to set its own values for theme-color-1 ...theme-color-12

craigcook commented 11 months ago

That all sounds like a good approach. I'm only hesitant to commit to a color palette until we have updated brand guidelines. We could pick colors from the current branding but we know they'll be changing at some point in the not-too-distant future.

stevejalim commented 11 months ago

I'm only hesitant to commit to a color palette until we have updated brand guidelines.

Yeah indeed - but if we basically have a set of 12(?) slots, we can tweak the CSS values as per the brand re-do.

Would you mind suggesting a handful (10? 12?) of colours we currently could use (including a few that are very close to current futuremo, so that we don't massively change their colours when we roll this out)