Split off of #3217923: [Plan] Organize and refactor CSS color variables for Olivero
In the not-so-distant (Drupal 10) future, we want Olivero to be able to support changing design by changing base CSS variables. In order make this process easier, it makes sense to re-architect the CSS variables sooner than later.
- Convert all of the hex values for blues and grays to HSL values.
- Normalize the values for the hues and saturations.
This will require designer sign off, as there will be slightly different shades of blue and gray. We'll also want to triple check that the new colors still meet WCAG accessibility contrast guidelines.
Original Gray Hex to HSL conversion
Note that the hues and saturations will be normalized.
--color--gray-0: #0d1214; - Black 1 - hsl(197, 21%, 6%)
--color--gray-10: #313637; - Black 2 - hsl(190, 6%, 20%)
--color--gray-20: #6e7172; - Black 3 - hsl(195, 2%, 44%)
--color--gray-25: #5d7585; - Gray Dark - hsl(204, 18%, 44%)
--color--gray-28: #7d919d; - Gray Dark 2 - hsl(203, 14%, 55%)
--color--gray-30: #7e96a7; - Gray medium - hsl(205, 19%, 57%)
--color--gray-40: #98abb9; - Gray medium 1 - hsl(205, 19%, 66%)
--color--gray-45: #afb8be; - Gray medium 2 - hsl(204, 10%, 72%)
--color--gray-50: #9ea0a1; - Black 4 - hsl(200, 2%, 63%)
--color--gray-70: #d7e1e8; - Gray light - hsl(205, 27%, 88%)
--color--gray-80: #e7edf1; - Gray light 1 - hsl(204, 26%, 93%)
--color--gray-90: #f1f4f7 - hsl(210, 27%, 96%)
--color--gray-95: #f7f9fa; - Gray light 2 - hsl(200, 23%, 97%)
Original Blue Hex to HSL conversion
Note that the hues and saturations will be normalized.
--color--blue-20: #0d77b5; - Blue dark - hsl(202, 87%, 38%)
--color--blue-30: #3d92c4; - Blue dark 2 - hsl(202, 53%, 50%)
--color--blue-50: #2494db; - Blue medium - hsl(203, 72%, 50%)
--color--blue-70: #53b0eb; - Blue bright - hsl(203, 79%, 62%)
--color--blue-90: #ddeffb; - Blue bright 5 - hsl(204, 79%, 93%)