Skip to content

Sketch2: more visible group styling on focus and hover#73615

Open
bencodeorg wants to merge 1 commit into
stagingfrom
ben/sketch2-better-group-styling
Open

Sketch2: more visible group styling on focus and hover#73615
bencodeorg wants to merge 1 commit into
stagingfrom
ben/sketch2-better-group-styling

Conversation

@bencodeorg

Copy link
Copy Markdown
Contributor

Improve styling of groups, both on hover (thicker dotted outline) and focus (thicker line, now blue).

Before After
Hover image image
Focus image image

// Declared after hover so it wins when both apply.
:global(.react-flow__node-group.selected) .groupNode,
:global(.react-flow__node-group:focus-visible) .groupNode {
outline: 2px solid var(--borders-brand-teal-primary);

@bencodeorg bencodeorg Jul 1, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have a handful of teal in Sketch Lab (eg, tab nav applies a teal outline on focus), might want to move to something else?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ugh yeah our focus ring will change to purple along with every other instance of teal on the site. Bc the variable names will also be changing, I would just keep it teal for now, we will need to deal with this a large-scale soon anyways 😅

@bencodeorg bencodeorg requested a review from a team July 1, 2026 20:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants