-
Notifications
You must be signed in to change notification settings - Fork 57
Refine border-color/width of inner selection highlights #2019
Description
Border Color
Currently, we're using "old" blues (WordPress.com blue) from Colors Archive for the inner highlight when certain blocks are selected (and I'm not 100% sure if we're using the same blue across the board or not).
This border color should be the same color as the block-level selection border (blue-50 in light mode and blue-30 from Color Studio in dark mode, IIRC).
This applies to the following blocks (and maybe more that I'm missing):
Note: If we haven't already established this, we might want to create a variable for $element-highlight or similar (I'm not able to think of a better name at the moment) that will use the primary color (blue-50 in light, blue-30 in dark) and be used for block selection borders, inner selection borders, media upload progress indicators, etc.
Border Width
I believe in the code we are using a 3px border-width on the element highlights — we can tone that down to 1px. I've been using 1px in our design library for a little while to see how it feels, and it feels more balanced.
Here's a comparison of current (3px) and proposed (1px):








