@wordpress/components 23.8.0 → 24.0.0

package/build-style/style-rtl.css

@@ -88,15 +88,13 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 :root {
-  --wp-admin-theme-color: #007cba;
-  --wp-admin-theme-color--rgb: 0, 124, 186;
-  --wp-admin-theme-color-darker-10: #006ba1;
-  --wp-admin-theme-color-darker-10--rgb: 0, 107, 161;
-  --wp-admin-theme-color-darker-20: #005a87;
-  --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
+  --wp-admin-theme-color: #3858e9;
+  --wp-admin-theme-color--rgb: 56, 88, 233;
+  --wp-admin-theme-color-darker-10: #2145e6;
+  --wp-admin-theme-color-darker-10--rgb: 33, 69, 230;
+  --wp-admin-theme-color-darker-20: #183ad6;
+  --wp-admin-theme-color-darker-20--rgb: 24, 58, 214;
   --wp-admin-border-width-focus: 2px;
-  --wp-block-synced-color: #7a00df;
-  --wp-block-synced-color--rgb: 122, 0, 223;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   :root {
@@ -185,7 +183,7 @@
   width: 100%;
 }
 .components-autocomplete__result.components-button.is-selected {
-  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));
 }
 
 .components-button-group {
@@ -257,64 +255,67 @@
     transition-delay: 0s;
   }
 }
+.components-button.is-next-40px-default-size {
+  height: 40px;
+}
 .components-button[aria-expanded=true], .components-button:hover {
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 .components-button[aria-disabled=true]:hover {
   color: initial;
 }
 .components-button: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;
 }
 .components-button.is-primary {
   white-space: nowrap;
-  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   color: var(--wp-components-color-accent-inverted, #fff);
   text-decoration: none;
   text-shadow: none;
   outline: 1px solid transparent;
 }
 .components-button.is-primary:hover:not(:disabled) {
-  background: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
+  background: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
   color: var(--wp-components-color-accent-inverted, #fff);
 }
 .components-button.is-primary:active:not(:disabled) {
-  background: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87));
-  border-color: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87));
+  background: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
+  border-color: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
   color: var(--wp-components-color-accent-inverted, #fff);
 }
 .components-button.is-primary:focus:not(:disabled) {
-  box-shadow: inset 0 0 0 1px 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, #007cba));
+  box-shadow: inset 0 0 0 1px 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));
 }
 .components-button.is-primary:disabled, .components-button.is-primary:disabled:active:enabled, .components-button.is-primary[aria-disabled=true], .components-button.is-primary[aria-disabled=true]:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled {
   color: rgba(255, 255, 255, 0.4);
-  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   opacity: 1;
   outline: none;
 }
 .components-button.is-primary:disabled:focus:enabled, .components-button.is-primary:disabled:active:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:focus:enabled, .components-button.is-primary[aria-disabled=true]:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled:focus:enabled {
-  box-shadow: 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 3px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  box-shadow: 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 3px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 .components-button.is-primary.is-busy, .components-button.is-primary.is-busy:disabled, .components-button.is-primary.is-busy[aria-disabled=true] {
   color: var(--wp-components-color-accent-inverted, #fff);
   background-size: 100px 100%;
   /* stylelint-disable */
-  background-image: linear-gradient(45deg, var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87)) 70%, var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)) 70%);
+  background-image: linear-gradient(45deg, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)) 70%, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 70%);
   /* stylelint-enable */
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 .components-button.is-secondary, .components-button.is-tertiary {
   outline: 1px solid transparent;
 }
 .components-button.is-secondary:active:not(:disabled), .components-button.is-tertiary:active:not(:disabled) {
   background: var(--wp-components-color-gray-300, #ddd);
-  color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
+  color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
   box-shadow: none;
 }
 .components-button.is-secondary:hover:not(:disabled), .components-button.is-tertiary:hover:not(:disabled) {
-  color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
+  color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
 }
 .components-button.is-secondary:disabled, .components-button.is-secondary[aria-disabled=true], .components-button.is-secondary[aria-disabled=true]:hover, .components-button.is-tertiary:disabled, .components-button.is-tertiary[aria-disabled=true], .components-button.is-tertiary[aria-disabled=true]:hover {
   color: #828282;
@@ -325,20 +326,19 @@
   outline: none;
 }
 .components-button.is-secondary {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 1px solid transparent;
   white-space: nowrap;
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   background: transparent;
 }
 .components-button.is-secondary:hover:not(:disabled) {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
+  box-shadow: inset 0 0 0 1px var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
 }
 .components-button.is-tertiary {
   white-space: nowrap;
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   background: transparent;
-  padding: 6px;
 }
 .components-button.is-tertiary:hover:not(:disabled) {
   background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
@@ -380,7 +380,7 @@ p + .components-button.is-tertiary {
   background: none;
   outline: none;
   text-align: right;
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   text-decoration: underline;
   transition-property: border, background, color;
   transition-duration: 0.05s;
@@ -427,6 +427,9 @@ p + .components-button.is-tertiary {
   min-width: 36px;
   justify-content: center;
 }
+.components-button.has-icon.is-next-40px-default-size {
+  min-width: 40px;
+}
 .components-button.has-icon .dashicon {
   display: inline-block;
   flex: 0 0 auto;
@@ -436,9 +439,8 @@ p + .components-button.is-tertiary {
 .components-button.has-icon.has-text {
   justify-content: start;
   padding-left: 12px;
-}
-.components-button.has-icon.has-text svg {
-  margin-left: 8px;
+  padding-right: 8px;
+  gap: 4px;
 }
 .components-button.has-icon.has-text .dashicon {
   margin-left: 10px;
@@ -448,7 +450,7 @@ p + .components-button.is-tertiary {
   background: var(--wp-components-color-foreground, #1e1e1e);
 }
 .components-button.is-pressed:focus:not(:disabled) {
-  box-shadow: inset 0 0 0 1px 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, #007cba));
+  box-shadow: inset 0 0 0 1px 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));
   outline: 2px solid transparent;
 }
 .components-button.is-pressed:hover:not(:disabled) {
@@ -589,12 +591,13 @@ p + .components-button.is-tertiary {
   }
 }
 .components-checkbox-control__input[type=checkbox]:focus {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 .components-checkbox-control__input[type=checkbox]:checked, .components-checkbox-control__input[type=checkbox]:indeterminate {
-  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 .components-checkbox-control__input[type=checkbox]:checked::-ms-check, .components-checkbox-control__input[type=checkbox]:indeterminate::-ms-check {
   opacity: 0;
@@ -894,7 +897,7 @@ input.components-combobox-control__input[type=text]:focus {
   outline: 1px solid transparent;
 }
 .components-color-palette__custom-color:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline-width: 2px;
 }
 
@@ -1126,7 +1129,7 @@ body.is-dragging-components-draggable {
   height: 100%;
   width: 100%;
   display: flex;
-  background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   align-items: center;
   justify-content: center;
   z-index: 50;
@@ -1316,12 +1319,12 @@ body.is-dragging-components-draggable {
   }
 }
 .components-form-toggle.is-checked .components-form-toggle__track {
-  background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-  border: 1px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  border: 1px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   border: 9px solid transparent;
 }
 .components-form-toggle .components-form-toggle__input:focus + .components-form-toggle__track {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
@@ -1458,7 +1461,7 @@ body.is-dragging-components-draggable {
 }
 .components-form-token-field__token.is-borderless .components-form-token-field__token-text {
   background: transparent;
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 .components-form-token-field__token.is-borderless .components-form-token-field__remove-token {
   background: transparent;
@@ -1549,7 +1552,7 @@ body.is-dragging-components-draggable {
   cursor: pointer;
 }
 .components-form-token-field__suggestion.is-selected {
-  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   color: #fff;
 }
 
@@ -1677,7 +1680,7 @@ body.is-dragging-components-draggable {
   bottom: 0;
   content: "";
   pointer-events: none;
-  outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline-offset: -4px;
   z-index: 1000000;
 }
@@ -1686,7 +1689,7 @@ body.is-dragging-components-draggable {
 .is-focusing-regions .interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel,
 .is-focusing-regions .interface-interface-skeleton__actions .edit-post-layout__toggle-entities-saved-states-panel,
 .is-focusing-regions .editor-post-publish-panel {
-  outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline-offset: -4px;
 }
 
@@ -1753,7 +1756,7 @@ body.is-dragging-components-draggable {
 .components-menu-item__button.components-button:disabled.is-tertiary,
 .components-menu-item__button.components-button[aria-disabled=true].is-tertiary {
   background: none;
-  color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
+  color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
   opacity: 0.3;
 }
 
@@ -1821,35 +1824,44 @@ body.is-dragging-components-draggable {
 }
 
 .components-modal__frame {
-  margin: 0;
+  margin: 40px 0 0 0;
   width: 100%;
   background: #fff;
   box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.15), 0 2.7px 3.8px -0.2px rgba(0, 0, 0, 0.15), 0 5.5px 7.8px -0.3px rgba(0, 0, 0, 0.15), -0.1px 11.5px 16.4px -0.5px rgba(0, 0, 0, 0.15);
-  border-radius: 2px;
+  border-radius: 8px 8px 0 0;
   overflow: hidden;
   display: flex;
+  animation: components-modal__appear-animation 0.1s ease-out;
+  animation-fill-mode: forwards;
+}
+@media (prefers-reduced-motion: reduce) {
+  .components-modal__frame {
+    animation-duration: 1ms;
+    animation-delay: 0s;
+  }
 }
 @media (min-width: 600px) {
   .components-modal__frame {
+    border-radius: 8px;
     margin: auto;
     width: auto;
     min-width: 360px;
     max-width: calc(100% - 32px);
     max-height: calc(100% - 120px);
-    animation: components-modal__appear-animation 0.1s ease-out;
-    animation-fill-mode: forwards;
   }
 }
-@media (min-width: 600px) and (prefers-reduced-motion: reduce) {
-  .components-modal__frame {
-    animation-duration: 1ms;
-    animation-delay: 0s;
+@media (min-width: 600px) and (min-width: 600px) {
+  .components-modal__frame.is-full-screen {
+    width: calc(100% - 32px);
+    height: calc(100% - 32px);
+    max-height: none;
   }
 }
-@media (min-width: 600px) {
+@media (min-width: 600px) and (min-width: 782px) {
   .components-modal__frame.is-full-screen {
-    width: 90vw;
-    min-height: 90vh;
+    width: calc(100% - 80px);
+    height: calc(100% - 80px);
+    max-width: none;
   }
 }
 @media (min-width: 960px) {
@@ -1869,12 +1881,12 @@ body.is-dragging-components-draggable {
 .components-modal__header {
   box-sizing: border-box;
   border-bottom: 1px solid transparent;
-  padding: 0 32px;
+  padding: 24px 32px 12px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  height: 76px;
+  height: 72px;
   width: 100%;
   z-index: 10;
   position: absolute;
@@ -1919,13 +1931,13 @@ body.is-dragging-components-draggable {
 
 .components-modal__content {
   flex: 1;
-  margin-top: 76px;
+  margin-top: 72px;
   padding: 0 32px 32px;
   overflow: auto;
 }
 .components-modal__content.hide-header {
   margin-top: 0;
-  padding-top: 24px;
+  padding-top: 32px;
 }
 .components-modal__content.is-scrollable:focus-visible {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -1938,7 +1950,7 @@ body.is-dragging-components-draggable {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 13px;
   background-color: #fff;
-  border-right: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  border-right: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   margin: 5px 15px 2px;
   padding: 8px 12px;
   align-items: center;
@@ -2103,7 +2115,7 @@ body.is-dragging-components-draggable {
   }
 }
 .components-panel__body-toggle.components-button:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   border-radius: 0;
 }
 .components-panel__body-toggle.components-button .components-panel__arrow {
@@ -2623,7 +2635,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   position: absolute;
   top: calc(50% - 8px);
   left: calc(50% - 8px);
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
 }
 
@@ -2633,7 +2645,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   content: "";
   width: 3px;
   height: 3px;
-  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   cursor: inherit;
   position: absolute;
   top: calc(50% - 1px);
@@ -2852,7 +2864,7 @@ body.lockscroll {
 }
 .components-search-control input[type=search].components-search-control__input:focus {
   background: #fff;
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 .components-search-control input[type=search].components-search-control__input::placeholder {
   color: #757575;
@@ -2908,7 +2920,7 @@ body.lockscroll {
   }
 }
 .components-snackbar:focus {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 .components-snackbar.components-snackbar-explicit-dismiss {
   cursor: default;
@@ -2944,7 +2956,8 @@ body.lockscroll {
   outline: 1px dotted #fff;
 }
 .components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  text-decoration: none;
+  color: #fff;
 }
 
 .components-snackbar__content {
@@ -3000,7 +3013,7 @@ body.lockscroll {
   bottom: 0;
   right: 0;
   pointer-events: none;
-  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   height: calc(0 * var(--wp-admin-border-width-focus));
   border-radius: 0;
   transition: all 0.1s linear;
@@ -3035,7 +3048,7 @@ body.lockscroll {
   }
 }
 .components-tab-panel__tabs-item:focus-visible::before {
-  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: 2px solid transparent;
 }