Skip to content

Style: Update color to use CSS variable in edit-site#79002

Open
Infinite-Null wants to merge 3 commits into
WordPress:trunkfrom
Infinite-Null:fix/wpds-color-tokens
Open

Style: Update color to use CSS variable in edit-site#79002
Infinite-Null wants to merge 3 commits into
WordPress:trunkfrom
Infinite-Null:fix/wpds-color-tokens

Conversation

@Infinite-Null

@Infinite-Null Infinite-Null commented Jun 8, 2026

Copy link
Copy Markdown
Contributor

Part of #79001

What?

Replaces instances of the hardcoded $gray-300 SCSS variable used for border colors with the --wpds-color-stroke-surface-neutral CSS custom property token.

Affected components

Component Class Context
add-new-template/style.scss .edit-site-add-new-template__template-list__contents > .components-button Template option cards in the "Add Template" modal
editor/style.scss .edit-site-editor__toggle-save-panel "Open save panel" button container shown during theme preview

Testing Instructions

  1. Go to Appearance → Editor → Templates and click Add Template.
    • Verify the template option cards (Front Page, Pages, etc.) have a visible border.
  2. Navigate to Appearance → Themes, hover over an inactive block theme, and click Live Preview (or append ?wp_theme_preview=<theme-slug> to the Site Editor URL).
    • Open a template in the canvas.
    • Press Tab to focus the right-side actions region and verify the "Open save panel" button container border is visible.

Screenshots

Before $gray-300 After var(--wpds-color-stroke-surface-neutral)
Add Template modal border Screenshot 2026-06-08 at 5 14 11 PM Screenshot 2026-06-08 at 5 04 36 PM
Save panel border Screenshot 2026-06-08 at 5 14 27 PM Screenshot 2026-06-08 at 5 04 25 PM

@github-actions github-actions Bot added the [Package] Edit Site /packages/edit-site label Jun 8, 2026
@Infinite-Null Infinite-Null changed the title Style: Update color to use CSS variable Style: Update color to use CSS variable in edit-site Jun 8, 2026
@github-actions

github-actions Bot commented Jun 8, 2026

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Infinite-Null <ankitkumarshah@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Package] Edit Site /packages/edit-site [Type] Code Quality Issues or PRs that relate to code quality

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants