[Docs] Use consistent casing when outputting hex values

[cchaos]

I noticed that all the hex colors for CSS-in-JS are in uppercase:

For Sass they're in lowercase:

In the "Global values" page, the hex values are also in uppercase:

But in "Theme provider" page they're in lowercase:

Should we only stick to one letter case? If I had to choose I would prefer the lowercase. I think it has better readability.

Originally posted by @miukimiu in #5283 (review)

[davidylee]

Hi @cchaos , would this just entail changing them all to lowercase? I can take it up! :-) relatively new to open source contribution..

[cchaos]

👋 Hi @davidylee . I've talked this over with @miukimiu and we've actually decided that we should stick with uppercase because all our source code and our sass-linter is uppercase. The main issue here is in the functions that we use to output them in our docs.

For example

For Sass they're in lowercase

We pull in these values from the JSON files here: https://github.com/elastic/eui/tree/master/src-docs/src/views/theme/_json which are compiled from our Sass via this script https://github.com/elastic/eui/blob/master/scripts/compile-scss.js. For some reason the script returns a lowercased version of the hex values. We should find a way to convert them to uppercase.

But in "Theme provider" page they're in lowercase

These are actually hard-coded directly in the examples found in this file: https://github.com/elastic/eui/blob/7a130d52c9dfc7633e94e3f2978dd413e16bfe8e/src-docs/src/views/theme/computed.tsx

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.