Conversation
…bles - Added a new `tokens.css` file containing color tokens for consistent theming across the application. - Updated `styles.css` to import the new tokens and refactor existing CSS variables to use the new token values for better maintainability and clarity. - This change improves the overall styling structure and prepares for future theming enhancements.
- Updated the save status indicator styles to utilize CSS variables for colors, enhancing maintainability and consistency across the application. - Replaced hardcoded color values with corresponding CSS variable tokens for saved, unsaved, saving, error, and button states. - This change aligns with recent theming improvements and prepares for future styling enhancements.
- Refactored the browser chrome component's CSS to replace hardcoded color values with CSS variables, enhancing maintainability and consistency. - Adjusted background colors, text colors, and hover states to align with the new theming approach, improving overall visual coherence.
- Changed the site manager background color from a hardcoded value to a CSS variable for improved maintainability and consistency with the new theming approach.
- Updated the styles in the saved playgrounds overlay component to replace hardcoded color values with CSS variables, enhancing maintainability and consistency with the new theming approach. - Adjusted background colors, text colors, and hover states to align with the overall design system, improving visual coherence across the application.
- Updated the site info panel component's CSS to replace hardcoded color values with CSS variables, enhancing maintainability and consistency with the new theming approach. - Adjusted background colors, text colors, and borders to align with the overall design system, improving visual coherence across the application.
There was a problem hiding this comment.
Pull request overview
Refactors Playground website styling to standardize color usage via global CSS custom properties, replacing hardcoded hex/rgba values to improve maintainability and enable easier future theming.
Changes:
- Introduced a global
tokens.csscontaining shared color variables and imported it into global styles. - Updated multiple component CSS modules to use
var(--color-...)tokens instead of hardcoded color literals. - Mapped existing legacy “gray” and WP admin theme variables to the new token system.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/playground/website/src/tokens.css | Adds centralized color token definitions for reuse across the site. |
| packages/playground/website/src/styles.css | Imports tokens globally and remaps existing root variables to token-based values. |
| packages/playground/website/src/components/site-manager/site-info-panel/style.module.css | Converts panel colors to token references. |
| packages/playground/website/src/components/saved-playgrounds-overlay/style.module.css | Converts overlay colors and interaction states to token references. |
| packages/playground/website/src/components/layout/style.module.css | Updates layout custom property to reference a token. |
| packages/playground/website/src/components/browser-chrome/style.module.css | Converts browser chrome colors to token references. |
| packages/playground/website/src/components/browser-chrome/save-status-indicator.module.css | Converts save status indicator colors to token references (partial). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| ); | ||
| --site-view-min-width: 320px; | ||
| --site-manager-background-color: #1e1e1e; | ||
| --site-manager-background-color: var(--color-text-primary); |
There was a problem hiding this comment.
--site-manager-background-color is now pointing at a text token (--color-text-primary). Even if the current hex matches historical behavior, this breaks token semantics and makes future theming harder. Prefer a background token (e.g., --color-bg-primary/--color-bg-secondary) or introduce a dedicated token for the site-manager background.
| --site-manager-background-color: var(--color-text-primary); | |
| --site-manager-background-color: var(--color-bg-primary); |
| /* Text - Light mode */ | ||
| --color-text-primary: #1e1e1e; | ||
| --color-text-secondary: #757575; | ||
| --color-text-muted: #6b7280; | ||
| --color-text-subtle: #9ca3af; | ||
|
|
||
| /* Text - Dark mode */ |
There was a problem hiding this comment.
The comments label --color-text-secondary/muted/subtle as “Light mode”, but these tokens are also used on dark backgrounds in this PR (e.g., overlay placeholder/date text). Consider updating the comments (or restructuring tokens) so the documentation reflects actual intended usage (e.g., “Text - default neutrals” vs “Text - inverse”).
| /* Text - Light mode */ | |
| --color-text-primary: #1e1e1e; | |
| --color-text-secondary: #757575; | |
| --color-text-muted: #6b7280; | |
| --color-text-subtle: #9ca3af; | |
| /* Text - Dark mode */ | |
| /* Text - default neutrals */ | |
| --color-text-primary: #1e1e1e; | |
| --color-text-secondary: #757575; | |
| --color-text-muted: #6b7280; | |
| --color-text-subtle: #9ca3af; | |
| /* Text - inverse (for dark backgrounds) */ |
| --wp-admin-theme-color: var(--color-wp-admin); | ||
| --wp-admin-theme-color--rgb: 0, 124, 186; | ||
| --wp-admin-theme-color-darker-10: #006ba1; | ||
| --wp-admin-theme-color-darker-10: var(--color-wp-admin-darker-10); | ||
| --wp-admin-theme-color-darker-10--rgb: 0, 107, 161; | ||
| --wp-admin-theme-color-darker-20: #005a87; | ||
| --wp-admin-theme-color-darker-20: var(--color-wp-admin-darker-20); | ||
| --wp-admin-theme-color-darker-20--rgb: 0, 90, 135; |
There was a problem hiding this comment.
After switching the WP admin theme colors to token vars, the --rgb counterparts are still hardcoded. If tokens change for theming, these RGB values can become inconsistent and produce incorrect derived styles. Consider defining matching --color-wp-admin--rgb (and darker variants) in tokens.css and referencing them here (or otherwise sourcing both hex and rgb from the same token set).
| width: 16px; | ||
| height: 16px; | ||
| border: 2px solid rgba(147, 197, 253, 0.3); |
There was a problem hiding this comment.
This hunk still contains a hardcoded rgba(147, 197, 253, 0.3) while the rest of the file is tokenized. To keep the refactor consistent (and enable future theming), consider introducing a token for this translucent info border (or an --color-info alpha variant) and using it here.
| width: 16px; | |
| height: 16px; | |
| border: 2px solid rgba(147, 197, 253, 0.3); | |
| --color-info-border-subtle: rgba(147, 197, 253, 0.3); | |
| width: 16px; | |
| height: 16px; | |
| border: 2px solid var(--color-info-border-subtle); |
| background: #ffffff; | ||
| border: 1px solid rgba(0, 0, 0, 0.1); | ||
| background: var(--color-bg-surface); | ||
| border: 1px solid var(--color-overlay-dark); |
There was a problem hiding this comment.
--color-overlay-dark reads like an overlay/scrim token but is being used as a general border color here. For clearer intent and easier future adjustments, consider adding a dedicated subtle border token (e.g., --color-border-subtle / --color-border-light-alpha) and using that instead.
| border: 1px solid var(--color-overlay-dark); | |
| border: 1px solid var(--color-gray-200); |
This pull request refactors the CSS across several components in the playground website to use CSS custom properties (variables) for colors, instead of hardcoded hex values. This change improves maintainability and makes it easier to implement theming or color scheme changes in the future. The updates affect components such as the save status indicator, browser chrome, layout, saved playgrounds overlay, and site manager panels.
The most important changes are:
Global color theming refactor:
save-status-indicator.module.css,style.module.css(browser chrome),layout/style.module.css,saved-playgrounds-overlay/style.module.css, andsite-info-panel/style.module.csswith corresponding CSS variables (e.g.,var(--color-bg-surface),var(--color-text-inverse), etc.), standardizing color usage and enabling easier theming. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20] [21] [22] [23] [24] [25] [26] [27] [28] [29] [30] [31] [32] [33] [34] [35]Component-specific improvements:
Maintainability and future-proofing:
No functional or layout changes are introduced; only the way colors are referenced in the CSS has changed.