4 ms·
Mostly it's a combination of tools. We write a lot of custom color functions (using Sass). You can check the src here[0]. A common one we'll use is makeHighCont
by snide 6y ago
Mostly it's a combination of tools. We write a lot of custom color functions (using Sass). You can check the src here[0]. A common one we'll use is makeHighContrastColor(), which given two colors will automatically make the first one a 4.5 AA accessible contrast by adding tint/shade.
For palette generation, we do a lot of our work with tools like chroma.js[1] which can help with some colorblind math.
[0]: https://github.com/elastic/eui/blob/master/src/global_styling/functions/_colors.scss#L64-L130 https://github.com/elastic/eui/blob/master/src/global_stylin...
[1]: https://gka.github.io/palettes/#/9|s|00429d,96ffea,ffffe0|ffffe0,ff005e,93003a|1|1 https://gka.github.io/palettes/#/9|s|00429d,96ffea,ffffe0|ff...
- cheald 6y agoBeautiful. Thank you so much!