From ccd87c467c434ae46966c4f0b8bb2275e248a50a Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Tue, 24 Oct 2023 10:39:12 +0200 Subject: [PATCH] Improve toolbar button visual focus (#55523) * Update block-toolbar-button-style__focus mixin * Use block-toolbar-button-style__focus on block styles --- packages/base-styles/_mixins.scss | 2 +- packages/block-editor/src/components/block-styles/style.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index b621c34551da5..b988c0499f1fb 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -64,7 +64,7 @@ */ @mixin block-toolbar-button-style__focus() { - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px $white; + box-shadow: inset 0 0 0 $border-width var(--wp-components-color-background, $white), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss index 9e80e93b0cd64..ab2a4b0c9ac98 100644 --- a/packages/block-editor/src/components/block-styles/style.scss +++ b/packages/block-editor/src/components/block-styles/style.scss @@ -58,7 +58,7 @@ &:focus, &.is-active:focus { - box-shadow: inset 0 0 0 $border-width var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); + @include block-toolbar-button-style__focus(); } }