Skip to content

Refine border-color/width of inner selection highlights #2019

@iamthomasbishop

Description

@iamthomasbishop

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):

Image

Video

Gallery

Spacer

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):

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions