Improved Color Blind Support

[ItsJonQ]

Adding support for built-in improved color-blind support.

So far, it's available as unique background patterns for certain colors. This UI was inspired by how Trello handles color blind mode for their coloured tags:

https://wearecolorblind.com/examples/trello-colorblind-friendly-mode/

Getting this values is quite simple!

import { getBackgroundColor } from '@wp-g2/styles';

getBackgroundColor('red')
// .css-213klj1

The mode can be enabled and toggled via the <ThemeProvider />

import { ThemeProvider } from '@wp-g2/styles';

<ThemeProvider
    isDark={isDark}
    isHighContrast={isHighContrast}
    isColorBlind={isColorBlind}
/>

cc'ing @diegohaz 😉

[ItsJonQ]

⚠️ A New Component Approaches ⚠️

<Alert />

Using the new native color-blind support!

[ItsJonQ]

Working out a readable automated backgroundColor for the color palette to work for light/dark mode x color blind mode:

The browsers on the right have color blind simulation turned on.

[ItsJonQ]

Just pushed some pretty substantial updates!

Improved color rendering has been implemented into <Tag /> and <Lozenge /> components:

Color Values

The system contains a handful of support colors (color palette):

export const SUPPORTED_COLORS = [
	'blue',
	'red',
	'purple',
	'green',
	'yellow',
	'orange',
	'darkGray',
	'lightGray',
];

Each of these colours have a 100...900 grade (light to dark) with 100% alpha.
Then, using the base grade (500), we generate an alpha set: rgba10...rgba90.

During the alpha set generation, there's logic to determine readability based on light vs dark mode, and darkens/lightens the alpha colors accordingly.

Check out the generator:
https://github.com/ItsJonQ/g2/blob/master/packages/styles/src/theme/utils.js#L55

All of these values get outputted as CSS values.

(Phew...)

Finally, at the component layer, these values can be implemented by using getBackgroundColor or getBackgroundColorText mixins.

Something like this:

const cx = [
    styles.base,
    styles.getBackground({ color, isBold }),
    styles.getBackgroundText({ color, isBold }),
];

This allows for easy to use background/text color referencing, with seamless zero-config dark/light, color blind and contrast (pre configured) considerations out-of-the-box!

[ItsJonQ]

Closing this up! Built-in color blind support for backgrounds has been streamlined - thanks to the new collection of presets within the Style System.