enhance: add more background gray colors

[marcelgerber]

Soo, when I just went to add more gray background colors, I noticed that we've been using the wrong gray-10 color all this time (marwa-raging) 🤯

It's a slight difference, but it's a difference.

[owidbot]

Quick links (staging server):

Site	Admin	Wizard

Login: ssh owid@staging-site-gray-colors

• Site-screenshots: https://github.com/owid/site-screenshots/compare/gray-colors
• SVG tester: https://github.com/owid/owid-grapher-svgs/compare/gray-colors

SVG tester:

Number of differences (default views): 0 ✅
Number of differences (all views): 0 ✅

Edited: 2024-08-06 18:25:16 UTC
Execution time: 1.18 seconds

[marcelgerber]

Site screenshots are super helpful here!

[ikesau]

Added (and integrated) more variables that are being used in Marwa's projects now. I had added them in my catalog branch but this is a better place to do it.

[ikesau]

I can revert these "convention changes" I made by swapping out the top level definitions for inline usage of the global variables if you'd prefer, Marcel.

[marcelgerber]

No, I've done more of these now :)

Overall, I find it nice sometimes that colors are given a more meaningful name with local SCSS variables inside a component. I don't mind that, but I do mind using hex codes when color names are available and make more sense.

[marcelgerber]

I've continued your work, Ike, and have replaced references to colors with their names in almost all places I could find.

As a sanity check, I also diffed the generated CSS (owid.css) before and after: The only change is using the correct gray-10 (#f7f7f7 -> #f2f2f2), which changed in 27 places. All other CSS lines stayed the same.