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.

  1. Convert all of the hex values for blues and grays to HSL values.
  2. 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%)

Related issues:

CommentFileSizeAuthor
#31 3217924-31-reroll.patch9.03 KBmherchel
#29 3217924-29.patch8.96 KBmherchel
#27 3217924-27-reroll.patch58.7 KBmherchel
#26 3217924-25-source-only.patch4.69 KBmherchel
#26 3217924-25.patch58.56 KBmherchel
#24 diff_20-24.txt3.79 KBkostyashupenko
#24 3217924-24.patch58.58 KBkostyashupenko
#20 3217924-20-reroll.patch58.6 KBmherchel
#17 3217924-17.patch58.4 KBmherchel
#17 interdiff-15-17.txt1.54 KBmherchel
#16 olivero-hsl.mp41.54 MBmherchel
#15 3217924-15.patch58.11 KBmherchel
#15 interdiff-13-15.txt575 bytesmherchel
#13 3217924-13-reroll.patch57.9 KBmherchel
#13 3217924-source-only.patch4.14 KBmherchel
#12 After Patch 3217924 Two.png1.61 MBchetanbharambe
#12 After Patch 3217924 One.png1.7 MBchetanbharambe
#6 Screenshot from 2021-06-09 10-34-17.png244.49 KBvikashsoni
#6 Screenshot from 2021-06-09 10-31-41.png247.82 KBvikashsoni
#5 3217924-5.patch56.5 KBmherchel
#3 3217924-2.patch55.83 KBmherchel

Comments

mherchel created an issue. See original summary.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Assigned: Unassigned » mherchel
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new 3217924-2.patch55.83 KB

Patch attached. Note that I removed blue 30 because its not being used.

Tugboat preview for this: https://hsl-colors-9bqruzkyptqepeiakdiqgtfy1eqbxffl.tugboat.qa/

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Active » Needs review
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new 3217924-5.patch56.5 KB

This new patch also consolidates a one-off hex color within the site branding block

vikashsoni’s picture

vikashsoni commented
StatusFileSize
new Screenshot from 2021-06-09 10-31-41.png247.82 KB
new Screenshot from 2021-06-09 10-34-17.png244.49 KB

@mherchel thanks for the patch
Applying successfully for me
Thanks

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

@vikashsoni Thanks for testing this out. However, the Drupal tests will fail if the patch fails to apply, so there is no need to post screenshots or indicate that the patch doesn't apply.

jwitkowski79’s picture

jwitkowski79 commented

@mherchel, the colors look good!

marcusvsouza’s picture

marcusvsouza commented

@mherchel, very nice change, the colors looks pretty good!

sakthivel m’s picture

sakthivel m commented

@mherchel, patch look good!

+ RTBC

chetanbharambe’s picture

chetanbharambe commented
Assigned: mherchel » chetanbharambe
chetanbharambe’s picture

chetanbharambe commented
Assigned: chetanbharambe » Unassigned
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new After Patch 3217924 One.png1.7 MB
new After Patch 3217924 Two.png1.61 MB

Verified and tested patch #5.
Patch applied successfully and looks good to me.

Expected Results:
# Convert all colors (blues and grays) to HSL and normalize hues and saturations

Looks good to me.
Please find attached screenshots.
Can be a move to RTBC.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new 3217924-source-only.patch4.14 KB
new 3217924-13-reroll.patch57.9 KB

Re-rolling (and converting some additional colors that were added in subsequent commits)

Updated Tugboat link at https://hsl-colors-cuhfrcke26xxrg9bu8nz61pgdbfenl24.tugboat.qa/

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Reviewed & tested by the community » Needs work
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs work » Needs review
StatusFileSize
new interdiff-13-15.txt575 bytes
new 3217924-15.patch58.11 KB

Tests failed because I forgot to rebuild the patch after updating header-site-branding.pcss.css

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new olivero-hsl.mp41.54 MB

Tugboat preview for the previous patch is at https://hsl-colors-3-zhkb4qdwe1riy3kpccg4u2llsijcqfe6.tugboat.qa/

Also attaching a movie where I flip back and forth between tabs with the current colors vs the new colors.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new interdiff-15-17.txt1.54 KB
new 3217924-17.patch58.4 KB

Forgot to update the LTR version of .site-branding within header-site-branding.pcss.css

Updated Tugboat link with the latest code.

andy-blum’s picture

andy-blum
he/him/his
Primary language English
Location Ohio, USA
commented
Status: Needs review » Reviewed & tested by the community

Marking RTBC, but making a few follow-up notes here:

  1. Full blacks and whites (#000 and #fff) aren't in HSL format even though all grays between them are.
  2. If the purpose of moving all blues to HSL is to make color replacement easy, should we perhaps move from --color--blue-XX to --color--primary-XX?
  3. Named colors are hard coded in as hex values, I'm wondering if there's value in moving those to the HSL format as well for consistency or easy adoption of hsla() in the future.
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

Note that #2 above is #3217926: Olivero: Rename and consolidate all color CSS variable names.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new 3217924-20-reroll.patch58.6 KB

Re-roll attached.

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 20: 3217924-20-reroll.patch, failed testing. View results

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs work » Reviewed & tested by the community

Unrelated test failure.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue tags: +olivero stable should have
kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Status: Reviewed & tested by the community » Needs review
StatusFileSize
new 3217924-24.patch58.58 KB
new diff_20-24.txt3.79 KB

Reroll

Status: Needs review » Needs work

The last submitted patch, 24: 3217924-24.patch, failed testing. View results

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs work » Needs review
StatusFileSize
new 3217924-25.patch58.56 KB
new 3217924-25-source-only.patch4.69 KB

Converting a newly added color to HSL in this patch (added in #3211616: Olivero: a11y color contrast test fail for primary button on hover).

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new 3217924-27-reroll.patch58.7 KB

Re-roll of #26. The source files have not changed.

Tugboat preview for this: https://3217924-hsl-colors-27-spajhejk5nn59ladis7yz3aqu4yygo9u.tugboat.qa/

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Version: 9.4.x-dev » 10.0.x-dev
Issue tags: -olivero stable should have
StatusFileSize
new 3217924-29.patch8.96 KB

Moving this to Drupal 10, since that's where we're going to make use of the HSL colors.

andy-blum’s picture

andy-blum
he/him/his
Primary language English
Location Ohio, USA
commented
Status: Needs review » Reviewed & tested by the community

D10 Tugboat: https://3217924-29-a2feq1gkh48vdhiceryrvpvzkz2gs2ma.tugboat.qa/

This looks good to me!

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new 3217924-31-reroll.patch9.03 KB

Re-roll of #29 attached.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes

Adjusting credits

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

Adjusting credits

  • lauriii committed 0d46b74 on 10.0.x 
    Issue #3217924 by mherchel, kostyashupenko, andy-blum, jwitkowski79:...
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Fixed

Committed 0d46b74 and pushed to 10.0.x. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.