Skip to content

[Website] Use graphite icons for dock pane actions - #4068

Merged
adamziel merged 2 commits into
trunkfrom
adamziel/yerevan
Jul 15, 2026
Merged

[Website] Use graphite icons for dock pane actions#4068
adamziel merged 2 commits into
trunkfrom
adamziel/yerevan

Conversation

@adamziel

@adamziel adamziel commented Jul 15, 2026

Copy link
Copy Markdown
Collaborator

The New Playground and Export panes used bright blue for passive action-choice icons. That made them compete with the real accent affordances: primary buttons, links, focus rings, and status marks.

Use a soft graphite action-icon token for those pane action icons instead. The change applies it to the New Playground creation tabs and the Export option groups, and makes those SVGs follow currentColor so the WordPress, GitHub, custom pull request, and stroke-based glyphs stay visually consistent.

Before After
New Playground pane with blue action icons New Playground pane with graphite action icons

Testing: git diff --check origin/trunk...HEAD

Not run: nx format or package tests. This checkout has no Nx modules installed; the commit hook attempted nx format --fix --parallel --uncommitted and reported that Nx modules were missing.

Copilot AI left a comment

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.

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Updates dock-pane action icons to use a softer “graphite” token instead of the accent blue, and ensures SVG glyphs inherit currentColor for consistent icon rendering.

Changes:

  • Introduces an --action-icon CSS variable and applies it to pane action icons.
  • Updates New Playground creation tab icon styles to follow currentColor (via fill: currentColor).
  • Replaces accent-blue icon styling with graphite in Export / creation icon groups.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File Description
packages/playground/website/src/components/site-manager/site-share-panel/style.module.css Switches action icon color from accent link to --action-icon token (with fallback).
packages/playground/website/src/components/saved-playgrounds-panel/style.module.css Applies --action-icon to creation icons and makes SVGs inherit currentColor for consistent glyph coloring.
packages/playground/website/src/components/dock/style.module.css Defines the --action-icon design token value.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread packages/playground/website/src/components/dock/style.module.css
@adamziel
adamziel merged commit 70cd5ea into trunk Jul 15, 2026
52 checks passed
@adamziel
adamziel deleted the adamziel/yerevan branch July 15, 2026 21:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment