Utilise CSS variables across the site

[andrico1234]

We have a lot of hardcoded colour and spacing values across our CSS files. We also have a lot of similar colours that could be consolidated into a single colour variables.

Here's a small slice of the different variables that we have across the site:

values	number of files	total occurrences
#333	1	1
#eee	2	2
#00a453	3	3
#f2f2f2	2	2
#ffdf3f	1	2

This isn't included spacing values or rgba values.

To ensure a consistent visual experience across the site, we should look to use CSS variables where possible.

This means defining the CSS variables in the global.css file, and using them in other CSS files or within style blocks.

This will also allow us to more easily add a dark mode, should we decide to add one at a later date.

[hippee-lee]

Hello,

I'm taking a look at this and could use some feedback before I start making any changes. I'll try to be clear but please let me know if I am not. So far I've only looked into the color aspect but this seems like two commits or two PRs. One for color changes and one for space changes. What is the preference from the core team when it comes to breaking up changes into multiple commits in one PR vs multiple PR's with one commit?

Color Proposal

I went through the project CSS files and believe I identified all of the color values used in css and isolated them in groups of palettes here.

It seems like there are four - six palettes for the site:

1. Neutral
2. Green
3. Pink (1) / Purple
4. Yellow / Tan (2)

I am thinking about approaching this in a way that will separate the color from the usage by defining the color palettes first:

--oui-color-black: #000000;
--oui-color-white: #ffffff;
// Neutrals
--oui-color-neutral-100: #f2f2f2;
--oui-color-neutral-200: #417 
// Greens
--oui-color-green-100: rgba(0, 255, 0, 0.1)
...
// Pink/purple
--oui-color-pink-100: rgba(255, 0, 0, 0.1);
--oui-color-purple: 100: rgba(206, 186, 240, 0.75);
...
// Yellow / tan
--oui-color-yellow-100: #ffffca;
--oui-color-yellow-200: #f7f781;
--oui-color-tan-100: rgba(200, 150, 81, 0.75)

Then, the colors will be mapped to tokens such as (these are ideas to get a feeling for how you feel about this approach, naming is hard so I just made these up along with the oui prefix):

--oui-container-background: var(--oui-color-neutral-100); // This could be applied to body for background or, overridden at component/container level for granular control
--oui-interaction-hover-background: var(--oui-color-pink-100)
--oui-interaction-active-background: var(--oui-color-purple)

The idea here is to create color pallets and then map the colors to tokens that describe the parts of the DOM, site or component that needs color. Container and component backgrounds, borders, text, etc. When I analyzed the css, here are the properties (and count) where I found currently using color in some way:

1. background / background-color: 27
2. border / border-*: 8
3. color: 10

The other two areas I need some help understanding what direction to take is:

1. What is the format preference: hex, rgb/a, hsla, one of the new css color options? I'm not partial to any of them but they should prolly all be the same :)
2. In order to eliminate values that are close together, how should I choose when there are different color values close together? E.g the neutrals rgba(0, 0, 0, 0.5) vs #777777 or #f2f2f2 vs #eeeeee Is it my preference, yours? Something else?

Obviously for a small site the tokens list does not have to be super large or complicated like a full fledged bespoke design system. But IMO it (the approach of color palette token -> functional/descriptive token -> css usage, not the size of the color palettes) would lay a foundation for your goal of theming colors and spacing as well. Is this approach in line with what the team finds acceptable? Before I start mucking around in code I'd like to know if this is going in the right direction and get some feedback / guidance.

[andrico1234]

Thanks for the detailed breakdown!

What is the preference from the core team when it comes to breaking up changes into multiple commits in one PR vs multiple PR's with one commit?

Having multiple smaller PRs would be preferable. So feel free to focus solely on colours for now.

I really like that you're decoupling the usage from the colour definition. Even with the Open UI site being the size it is, having the colours defined separately will make it easier for other developers to avoid adding similar colours, or one-use colours.

My personal preference for format is hsla, only because it's easier to visually parse and tweak on the fly. Ultimately I have no major preference, so please choose the best option. It may be best to choose one of the formats with wide browser support.

In order to eliminate values that are close together, how should I choose when there are different color values close together? E.g the neutrals rgba(0, 0, 0, 0.5) vs #777777 or #f2f2f2 vs #eeeeee Is it my preference, yours? Something else?

I wouldn't consolidate colours with opacity with ones that don't have opacity rgba(0, 0, 0, 0.5) vs #777777, because they may behave differently based on usage (like when used as a background).

I even observed this in your demo:

If you have a list of similar colors, it might be worth cataloguing them here, and sharing your preference.

Thanks again for taking the time to leave a detailed breakdown!

[github-actions[bot]]

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.