Global Styles: Add light and dark palette controls - #80805
Draft
MaggieCabrera wants to merge 6 commits into
Draft
Conversation
github-actions
Bot
added
[Package] Components
This was referenced Jul 28, 2026
|
Size Change: +4.42 kB (+0.06%) Total Size: 7.76 MB 📦 View Changed
|
This was referenced Jul 28, 2026
|
Flaky tests detected in 9a0edca. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/30388846880
|
|
Warning: Type of PR label mismatch To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task. |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds scheme-aware (light/dark) Global Styles preset editing and preview affordances, building on the theme.json color-scheme data model in Global Styles Engine and extending the palette UI to support scheme variations.
Changes:
- Add sun/moon icons and a preview badge indicator for available light/dark scheme presets.
- Extend Global Styles UI palette editing to expose scheme-specific palette/gradient/duotone variations (including a new Duotone tab/panel).
- Extend Global Styles Engine rendering/types to support scheme preset overrides (including duotone filter variants and scheme-scoped CSS custom properties).
Reviewed changes
Copilot reviewed 21 out of 23 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/icons/src/manifest.php | Registers new sun / moon icons. |
| packages/icons/src/manifest.json | Adds sun / moon icon metadata for JS consumers. |
| packages/icons/src/library/sun.svg | New sun SVG asset used for “light scheme” UI. |
| packages/icons/src/library/moon.svg | New moon SVG asset used for “dark scheme” UI. |
| packages/global-styles-ui/src/test/scheme-preview-indicator.spec.tsx | Tests indicator rendering + scheme preset detection. |
| packages/global-styles-ui/src/test/duotone-palette-panel.spec.tsx | Tests scheme duotone panel rendering behavior. |
| packages/global-styles-ui/src/test/color-scheme-palette.spec.ts | Tests scheme preset normalization helpers. |
| packages/global-styles-ui/src/style.scss | Styles for scheme indicators and duotone panel layout. |
| packages/global-styles-ui/src/screen-color-palette.tsx | Adds Duotone tab and panel. |
| packages/global-styles-ui/src/scheme-preview-indicator.tsx | Renders scheme availability badges in previews. |
| packages/global-styles-ui/src/preview-styles.tsx | Mounts the scheme indicator into the preview wrapper. |
| packages/global-styles-ui/src/gradients-palette-panel.tsx | Adds scheme gradient variations via paletteVariations. |
| packages/global-styles-ui/src/duotone-palette-panel.tsx | New UI panel for theme + scheme duotone palettes. |
| packages/global-styles-ui/src/color-scheme-palette.tsx | New helpers for flattening and naming scheme presets + scheme icons. |
| packages/global-styles-ui/src/color-palette-panel.tsx | Adds scheme color variations via paletteVariations. |
| packages/global-styles-engine/src/types.ts | Introduces scheme preset types and wires color.light / color.dark into settings types. |
| packages/global-styles-engine/src/test/render.test.ts | Tests scheme variable output + scheme duotone filter output. |
| packages/global-styles-engine/src/settings/get-setting.ts | Includes color.light / color.dark in enumerated settings map output. |
| packages/global-styles-engine/src/core/render.tsx | Emits scheme-scoped preset variables and scheme duotone filters. |
| packages/components/src/palette-edit/types.ts | Adds paletteIcon and typed paletteVariations support. |
| packages/components/src/palette-edit/test/index.tsx | Tests palette icon rendering and variation editing/reset behavior. |
| packages/components/src/palette-edit/styles.ts | Adds layout styles for headings with icons + variation section wrapper. |
| packages/components/src/palette-edit/index.tsx | Implements variation rendering, combined reset, and menu gating updates. |
Comment on lines
+54
to
+62
| export type ColorSchemePreset< T extends BasePreset > = Omit< T, 'name' > & { | ||
| name?: string; | ||
| }; | ||
|
|
||
| export interface ColorSchemeSettings { | ||
| palette?: ColorSchemePreset< Color >[]; | ||
| gradients?: ColorSchemePreset< Gradient >[]; | ||
| duotone?: ColorSchemePreset< Duotone >[]; | ||
| } |
Comment on lines
398
to
+417
| @@ -399,6 +412,12 @@ export function PaletteEdit( { | |||
| ! elements[ editingElement ].slug; | |||
| const elementsLength = elements.length; | |||
| const hasElements = elementsLength > 0; | |||
| const hasVariations = variations.some( | |||
| ( variation ) => variation.elements.length > 0 | |||
| ); | |||
Comment on lines
703
to
705
| { ! hasElements && emptyMessage && ( | ||
| <PaletteEditContents>{ emptyMessage }</PaletteEditContents> | ||
| ) } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Adds scheme-specific color, gradient, and duotone controls to Global Styles. Light or dark sections appear only when the active theme defines them and use sun or moon labels.
Stacked on #80746 and #80698.
Testing
Use either fixture from WordPress/community-themes#266 with this full PR stack.
dark-theme.light-themeand confirm the sections are labeled for the dark scheme.Screenshots
Controls
Style indicators