diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md index d6451907f5940a..7b3f0f93c88307 100644 --- a/packages/base-styles/CHANGELOG.md +++ b/packages/base-styles/CHANGELOG.md @@ -4,6 +4,7 @@ ### Enhancements +- Default `--wp-admin-theme-color` to `#3858e9`, the WordPress 7.0 default admin color scheme, instead of the legacy `#007cba`. To keep the old color, include `admin-scheme(#007cba)` on `:root` in your own stylesheet. `wordpress-admin-schemes()` and the default custom properties now set `#007cba` for the Fresh scheme, which had used the `:root` default ([#83749](https://github.com/WordPress/gutenberg/pull/83749)). - `radio-control`: Use the design system color tokens ([#83270](https://github.com/WordPress/gutenberg/pull/83270)). ## 13.2.0 (2026-09-23) diff --git a/packages/base-styles/_default-custom-properties.scss b/packages/base-styles/_default-custom-properties.scss index 43707a59143ed1..d1f657d1f0a955 100644 --- a/packages/base-styles/_default-custom-properties.scss +++ b/packages/base-styles/_default-custom-properties.scss @@ -12,5 +12,10 @@ // but is maintained for backwards compatibility. --wp-bound-block-color: var(--wp-block-synced-color); --wp-editor-canvas-background: #{colors.$gray-300}; + @include mixins.admin-scheme(#3858e9); +} + +// Fresh has no rule in the admin-schemes.css shipped by older WordPress versions, so it would inherit the :root default above. Plugins bundle these defaults while WordPress supplies the scheme stylesheet, so the rule must travel with them. +body.admin-color-fresh { @include mixins.admin-scheme(#007cba); } diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index e519d9e4feb419..33ff4f01d93a9b 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -481,7 +481,7 @@ @mixin link-reset { &:focus { color: var(--wp-admin-theme-color--rgb); - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba); + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #3858e9); border-radius: variables.$radius-small; } } @@ -572,6 +572,10 @@ } @mixin wordpress-admin-schemes() { + body.admin-color-fresh { + @include admin-scheme(#007cba); + } + body.admin-color-light { @include admin-scheme(#007cba); } diff --git a/packages/block-editor/src/components/global-styles/inheritance/style.scss b/packages/block-editor/src/components/global-styles/inheritance/style.scss index c88a070c9be640..bbeea3ae983204 100644 --- a/packages/block-editor/src/components/global-styles/inheritance/style.scss +++ b/packages/block-editor/src/components/global-styles/inheritance/style.scss @@ -115,7 +115,7 @@ &:focus-visible { // Inset focus ring so it doesn't push other text around. - outline: 1.5px solid var(--wp-admin-theme-color, #007cba); + outline: 1.5px solid var(--wp-admin-theme-color, #3858e9); outline-offset: 1px; } @@ -168,7 +168,7 @@ display: block; width: 8px; height: 8px; - background-color: var(--wp-admin-theme-color, #007cba); + background-color: var(--wp-admin-theme-color, #3858e9); border-radius: 50%; } @@ -180,5 +180,5 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - color: var(--wp-admin-theme-color, #007cba); + color: var(--wp-admin-theme-color, #3858e9); } diff --git a/packages/editor/src/components/style-book/constants.ts b/packages/editor/src/components/style-book/constants.ts index 3a3da8fa1abd3c..67e46e8e30c147 100644 --- a/packages/editor/src/components/style-book/constants.ts +++ b/packages/editor/src/components/style-book/constants.ts @@ -233,7 +233,7 @@ export const STYLE_BOOK_IFRAME_STYLES = ` } .editor-style-book__example.is-selected { - box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)); + box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); } .editor-style-book__example.is-disabled-example { @@ -241,7 +241,7 @@ export const STYLE_BOOK_IFRAME_STYLES = ` } .editor-style-book__example:focus:not(:disabled) { - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)); + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); outline: 3px solid transparent; } diff --git a/packages/media-editor/src/image-editor/react/components/cropper.scss b/packages/media-editor/src/image-editor/react/components/cropper.scss index 904a3e67400d05..2ac3f6fdb2e5b9 100644 --- a/packages/media-editor/src/image-editor/react/components/cropper.scss +++ b/packages/media-editor/src/image-editor/react/components/cropper.scss @@ -149,8 +149,8 @@ $handle-touch-target-size: 44px; // on the canvas ensures the outline appears only when the canvas // itself is focused, not when focus is on a child handle. &__canvas--focus-visible:focus &__stencil-rect { - border-color: var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba)); - box-shadow: 0 0 0 1px var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba)); + border-color: var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #3858e9)); + box-shadow: 0 0 0 1px var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #3858e9)); } &__handle { @@ -169,7 +169,7 @@ $handle-touch-target-size: 44px; // Solid white fill with an accent-blue border so the handles read // clearly against the light grey wash. background: $white; - border: 1px solid var(--wp-admin-theme-color, #007cba); + border: 1px solid var(--wp-admin-theme-color, #3858e9); border-radius: 50%; box-sizing: border-box; pointer-events: auto; @@ -185,9 +185,9 @@ $handle-touch-target-size: 44px; // keyboard session — e.g., clicking a handle to start a drag — // don't leave the active ring stuck on the handle. .wp-media-editor-image-editor__canvas--focus-visible &:focus { - background: var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba)); + background: var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #3858e9)); border-color: transparent; - box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba)); + box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #3858e9)); } // Extend touch target to the minimum accessible hit area.