Global Styles: Add light and dark palette controls - #80795
Closed
MaggieCabrera wants to merge 6 commits into
Closed
Conversation
MaggieCabrera
force-pushed
the
codex/color-scheme-palette-ui
branch
from
July 28, 2026 15:44
13208f0 to
f59547e
Compare
|
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-specific (light/dark) preset controls to Global Styles so themes can expose alternate palettes/gradients/duotones, with visual indicators and shared editing UI.
Changes:
- Extend
PaletteEditto support an optional heading icon and “palette variations” (additional palettes edited via the same UI/actions). - Add Global Styles UI support for light/dark palette + gradient variations, a dedicated Duotone tab/panel, and preview scheme indicators (sun/moon).
- Update Global Styles engine/types/tests to include
color.light/color.darksettings and emit scheme-scoped preset custom properties (including duotone filter variants).
Reviewed changes
Copilot reviewed 21 out of 23 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/icons/src/manifest.php | Registers new sun/moon icons for PHP consumers. |
| packages/icons/src/manifest.json | Registers new sun/moon icons for JS build/public export. |
| packages/icons/src/library/sun.svg | Adds sun SVG asset. |
| packages/icons/src/library/moon.svg | Adds moon SVG asset. |
| packages/global-styles-ui/src/test/scheme-preview-indicator.spec.tsx | Adds unit tests for scheme availability indicator logic/rendering. |
| packages/global-styles-ui/src/test/duotone-palette-panel.spec.tsx | Adds unit test coverage for scheme + theme duotone panels. |
| packages/global-styles-ui/src/test/color-scheme-palette.spec.ts | Tests preset flattening + base-name hydration helpers. |
| packages/global-styles-ui/src/style.scss | Styles scheme indicators and duotone panel layout tweaks. |
| packages/global-styles-ui/src/screen-color-palette.tsx | Adds a new “Duotone” tab to the Colors screen. |
| packages/global-styles-ui/src/scheme-preview-indicator.tsx | Implements sun/moon preview badges based on available scheme presets. |
| packages/global-styles-ui/src/preview-styles.tsx | Renders the scheme indicator overlay within the preview wrapper. |
| packages/global-styles-ui/src/gradients-palette-panel.tsx | Adds light/dark gradient “variations” via PaletteEdit. |
| packages/global-styles-ui/src/duotone-palette-panel.tsx | Introduces a dedicated duotone panel including scheme sections. |
| packages/global-styles-ui/src/color-scheme-palette.tsx | Shared helpers/icons for scheme preset collections and naming. |
| packages/global-styles-ui/src/color-palette-panel.tsx | Adds light/dark color palette “variations” via PaletteEdit. |
| packages/global-styles-engine/src/types.ts | Adds color scheme settings/types to the engine’s settings model. |
| packages/global-styles-engine/src/test/render.test.ts | Adds/extends tests for scheme-scoped preset vars and duotone filters. |
| packages/global-styles-engine/src/settings/get-setting.ts | Ensures color.light / color.dark are included in “get all settings” paths. |
| 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 to PaletteEdit props. |
| packages/components/src/palette-edit/test/index.tsx | Tests new paletteIcon and variation editing/reset behavior. |
| packages/components/src/palette-edit/styles.ts | Adds layout for icon-in-heading and variation block spacing. |
| packages/components/src/palette-edit/index.tsx | Implements variation rendering + reset behavior and icon rendering. |
Comment on lines
+681
to
+698
| { ! isEditing && isGradient && ( | ||
| <GradientPicker | ||
| gradients={ | ||
| variation.elements as Gradient[] | ||
| } | ||
| onChange={ () => {} } | ||
| clearable={ false } | ||
| disableCustomGradients | ||
| /> | ||
| ) } | ||
| { ! isEditing && ! isGradient && ( | ||
| <ColorPalette | ||
| colors={ variation.elements as Color[] } | ||
| onChange={ () => {} } | ||
| clearable={ false } | ||
| disableCustomColors | ||
| /> | ||
| ) } |
Comment on lines
+1564
to
+1569
| const slug = kebabCase( preset.slug ); | ||
| let value: string | number | null | undefined; | ||
| if ( presetType === 'duotone' ) { | ||
| value = `url( '#wp-duotone-${ slug }--${ scheme }' )`; | ||
| } else if ( valueKey && ! valueFunc ) { | ||
| value = preset[ valueKey ]; |
Contributor
Author
|
Recreated as #80805 from an upstream WordPress/gutenberg branch so this work can be used in a stacked PR chain. The commit and PR description are unchanged; automated review context remains available here. |
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