Make use of the theme color scheme for categories and use accessible text color depending on the background color

[colorfield]

Currently, we are mapping color field colors to Tailwind default color scheme.
As we will set a custom color scheme, it makes sense to use it for the categories color map.
See https://drupal.slack.com/archives/C011JF4C1M4/p1590315801406200

Each category can have a different color, if we plan to make use of the text category with the category color as a background, we need to respect a11y contrast as only the background color can be set on the admin ui and it should not be the responsibility of the content editor to pick the right contrast color.
https://stackoverflow.com/questions/1855884/determine-font-color-based-on-background-color

Use case
As a content editor
When I select a category background color
Then the text color is set automatically with a a11y friendly contrast.

• Alter ColorMap::getTailwindClass() and limit the color field colors based on the theme color scheme
• Implement ColorMap::getTailwindContrastClass()

[dan2k3k4]

We can also just enforce the mapping of the colours in frontend without needing to rely on ColorMap functions.

The editor can select a set of predefined colours e.g.

• blue
• red
• green

We would then need to check which colour was picked, and appropriately use the correct contrasting colour for text or background overlay.

In backend, the colour field was used just because it seemed a bit nicer to select a colour visually compared to using say a field list text.

Also the backend "red" may not equal the frontend "red" and that's OK. The colour red in the backend is just so that the admin editor has an idea of colours they can pick from.

We will need to update the list of colours once we finalise the colour scheme but most likely we can base our colours on Olivero

[colorfield]

We could simplify this but i still find it nice to have a large variety of colors as we might end up with a few categories + the color field is working well for this use case.

Yes perhaps better to think about this once we have a defined scheme.
Meanwhile we could simplify this with black / white as contrast color (so we have only 2 contrast maps) and possibly tweak a bit the initial color map so we always have a good contrast.

[colorfield]

we should be able to extend the ColorFieldWidgetBox field widget with our color scheme to remove the ColorMap and use named colors in this widget so we have one single source of truth https://git.drupalcode.org/project/color_field/-/blob/8.x-2.x/src/Plugin/Field/FieldWidget/ColorFieldWidgetBox.php#L25