@wordpress/components 22.0.0 → 23.0.0

package/build-style/style-rtl.css

@@ -1,4 +1,10 @@
 @charset "UTF-8";
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -12,6 +18,12 @@
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -83,6 +95,8 @@
   --wp-admin-theme-color-darker-20: #005a87;
   --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
   --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 {
@@ -171,7 +185,7 @@
   width: 100%;
 }
 .components-autocomplete__result.components-button.is-selected {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 
 .components-button-group {
@@ -217,7 +231,7 @@
   box-sizing: border-box;
   padding: 6px 12px;
   border-radius: 2px;
-  color: #1e1e1e;
+  color: var(--wp-components-color-foreground, #1e1e1e);
   /**
    * Primary button style.
    */
@@ -256,22 +270,22 @@
 .components-button.is-primary {
   white-space: nowrap;
   background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-  color: #fff;
+  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));
-  color: #fff;
+  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));
-  color: #fff;
+  color: var(--wp-components-color-accent-inverted, #fff);
 }
 .components-button.is-primary:focus:not(:disabled) {
-  box-shadow: inset 0 0 0 1px #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, #007cba));
 }
 .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);
@@ -281,10 +295,10 @@
   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 #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, #007cba));
 }
 .components-button.is-primary.is-busy, .components-button.is-primary.is-busy:disabled, .components-button.is-primary.is-busy[aria-disabled=true] {
-  color: #fff;
+  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%);
@@ -295,7 +309,7 @@
   outline: 1px solid transparent;
 }
 .components-button.is-secondary:active:not(:disabled), .components-button.is-tertiary:active:not(:disabled) {
-  background: #ddd;
+  background: var(--wp-components-color-gray-300, #ddd);
   color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
   box-shadow: none;
 }
@@ -375,7 +389,7 @@ p + .components-button.is-tertiary {
   border-radius: 2px;
 }
 .components-button:not([aria-disabled=true]):active {
-  color: inherit;
+  color: var(--wp-components-color-foreground, #1e1e1e);
 }
 .components-button:disabled, .components-button[aria-disabled=true] {
   cursor: default;
@@ -421,16 +435,16 @@ p + .components-button.is-tertiary {
   margin-left: 10px;
 }
 .components-button.is-pressed {
-  color: #fff;
-  background: #1e1e1e;
+  color: var(--wp-components-color-foreground-inverted, #fff);
+  background: var(--wp-components-color-foreground, #1e1e1e);
 }
 .components-button.is-pressed:focus:not(:disabled) {
-  box-shadow: inset 0 0 0 1px #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, #007cba));
   outline: 2px solid transparent;
 }
 .components-button.is-pressed:hover:not(:disabled) {
-  color: #fff;
-  background: #1e1e1e;
+  color: var(--wp-components-color-foreground-inverted, #fff);
+  background: var(--wp-components-color-foreground, #1e1e1e);
 }
 .components-button svg {
   fill: currentColor;
@@ -456,7 +470,7 @@ p + .components-button.is-tertiary {
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
@@ -566,12 +580,12 @@ 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-admin-theme-color);
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: 2px solid transparent;
 }
 .components-checkbox-control__input[type=checkbox]:checked, .components-checkbox-control__input[type=checkbox]:indeterminate {
-  background: var(--wp-admin-theme-color);
-  border-color: var(--wp-admin-theme-color);
+  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));
 }
 .components-checkbox-control__input[type=checkbox]:checked::-ms-check, .components-checkbox-control__input[type=checkbox]:indeterminate::-ms-check {
   opacity: 0;
@@ -639,6 +653,7 @@ svg.components-checkbox-control__indeterminate {
   vertical-align: top;
   transform: scale(1);
   transition: 100ms transform ease;
+  will-change: transform;
 }
 @media (prefers-reduced-motion: reduce) {
   .components-circular-option-picker__option-wrapper {
@@ -792,7 +807,7 @@ input.components-combobox-control__input[type=text]:focus {
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
@@ -880,7 +895,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-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline-width: 2px;
 }
 
@@ -985,6 +1000,11 @@ input.components-combobox-control__input[type=text]:focus {
   outline: 0;
 }
 
+.components-custom-select-control__hint {
+  color: #949494;
+  margin-right: 10px;
+}
+
 .components-custom-select-control__menu {
   border: 1px solid #1e1e1e;
   background-color: #fff;
@@ -1021,7 +1041,7 @@ input.components-combobox-control__input[type=text]:focus {
   background: #ddd;
 }
 .components-custom-select-control__item .components-custom-select-control__item-hint {
-  color: #757575;
+  color: #949494;
   text-align: left;
   padding-left: 4px;
 }
@@ -1095,7 +1115,7 @@ body.is-dragging-components-draggable {
   height: 100%;
   width: 100%;
   display: flex;
-  background-color: var(--wp-admin-theme-color);
+  background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   align-items: center;
   justify-content: center;
   z-index: 50;
@@ -1268,12 +1288,12 @@ body.is-dragging-components-draggable {
   }
 }
 .components-form-toggle.is-checked .components-form-toggle__track {
-  background-color: var(--wp-admin-theme-color);
-  border: 1px solid var(--wp-admin-theme-color);
+  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));
   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-admin-theme-color);
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
@@ -1311,7 +1331,7 @@ body.is-dragging-components-draggable {
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
@@ -1417,7 +1437,7 @@ body.is-dragging-components-draggable {
 }
 .components-form-token-field__token.is-borderless .components-form-token-field__token-text {
   background: transparent;
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-form-token-field__token.is-borderless .components-form-token-field__remove-token {
   background: transparent;
@@ -1488,7 +1508,7 @@ body.is-dragging-components-draggable {
   overflow-y: auto;
   transition: all 0.15s ease-in-out;
   list-style: none;
-  border-top: 1px solid #757575;
+  border-top: 1px solid var(--wp-components-color-gray-600, #949494);
   margin: 0;
   padding: 0;
 }
@@ -1508,7 +1528,7 @@ body.is-dragging-components-draggable {
   cursor: pointer;
 }
 .components-form-token-field__suggestion.is-selected {
-  background: var(--wp-admin-theme-color);
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   color: #fff;
 }
 
@@ -1628,27 +1648,37 @@ body.is-dragging-components-draggable {
   position: relative;
 }
 
-.is-focusing-regions [role=region]:focus::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  pointer-events: none;
-  outline: 4px solid transparent;
-  box-shadow: inset 0 0 0 4px var(--wp-admin-theme-color);
+.is-focusing-regions [role=region]:focus {
+  outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  outline-offset: -4px;
 }
-@supports (outline-offset: 1px) {
-  .is-focusing-regions [role=region]:focus::after {
-    content: none;
-  }
-  .is-focusing-regions [role=region]:focus {
-    outline-style: solid;
-    outline-color: var(--wp-admin-theme-color);
-    outline-width: 4px;
-    outline-offset: -4px;
-  }
+.is-focusing-regions [role=region]:focus .interface-navigable-region__stacker {
+  position: relative;
+  z-index: -1;
+}
+.is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .interface-navigable-region__stacker,
+.is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .edit-post-header {
+  outline: inherit;
+  outline-offset: inherit;
+}
+.is-focusing-regions .interface-interface-skeleton__sidebar .interface-navigable-region__stacker,
+.is-focusing-regions .interface-interface-skeleton__sidebar .edit-post-layout__toggle-sidebar-panel {
+  outline: inherit;
+  outline-offset: inherit;
+}
+.is-focusing-regions .interface-interface-skeleton__actions .interface-navigable-region__stacker,
+.is-focusing-regions .interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel {
+  outline: inherit;
+  outline-offset: inherit;
+}
+.is-focusing-regions [role=region].interface-interface-skeleton__actions:focus .editor-post-publish-panel {
+  outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  outline-offset: -4px;
+}
+
+.interface-navigable-region__stacker {
+  height: 100%;
+  width: 100%;
 }
 
 .components-menu-group + .components-menu-group {
@@ -1714,7 +1744,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-admin-theme-color-darker-10);
+  color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
   opacity: 0.3;
 }
 
@@ -1785,7 +1815,7 @@ body.is-dragging-components-draggable {
   margin: 0;
   width: 100%;
   background: #fff;
-  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
+  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;
   overflow: hidden;
   display: flex;
@@ -1894,7 +1924,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-admin-theme-color);
+  border-right: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   margin: 5px 15px 2px;
   padding: 8px 12px;
   align-items: center;
@@ -2059,7 +2089,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-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   border-radius: 0;
 }
 .components-panel__body-toggle.components-button .components-panel__arrow {
@@ -2211,7 +2241,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
@@ -2304,8 +2334,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   -webkit-backdrop-filter: blur(100px);
           backdrop-filter: blur(100px);
   background-color: transparent;
-  -webkit-backface-visibility: hidden;
-          backface-visibility: hidden;
+  backface-visibility: hidden;
   border-radius: 2px;
   overflow: hidden;
 }
@@ -2369,6 +2398,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 
 .components-popover {
   z-index: 1000000;
+  will-change: transform;
 }
 .components-popover.is-expanded {
   position: fixed;
@@ -2381,21 +2411,17 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 
 .components-popover__content {
   background: #fff;
-  outline: 1px solid #ccc;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 1px #ccc, 0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1);
   border-radius: 2px;
   box-sizing: border-box;
   width: min-content;
 }
 .is-alternate .components-popover__content {
-  outline: 1px solid #1e1e1e;
-  box-shadow: none;
+  box-shadow: 0 0 0 1px #1e1e1e;
 }
 .is-unstyled .components-popover__content {
   background: none;
-  border: none;
   border-radius: 0;
-  outline: none;
   box-shadow: none;
 }
 .components-popover.is-expanded .components-popover__content {
@@ -2403,9 +2429,10 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   height: calc(100% - 48px);
   overflow-y: visible;
   width: auto;
-  border: none;
-  outline: none;
-  border-top: 1px solid #1e1e1e;
+  box-shadow: 0 -1px 0 0 #ccc;
+}
+.components-popover.is-expanded.is-alternate .components-popover__content {
+  box-shadow: 0 -1px 0 #1e1e1e;
 }
 
 .components-popover__header {
@@ -2486,7 +2513,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
@@ -2582,7 +2609,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-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: 2px solid transparent;
 }
 
@@ -2592,12 +2619,13 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   content: "";
   width: 3px;
   height: 3px;
-  background: var(--wp-admin-theme-color);
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   cursor: inherit;
   position: absolute;
   top: calc(50% - 1px);
   left: calc(50% - 1px);
   transition: transform 0.1s ease-in;
+  will-change: transform;
   opacity: 0;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -2764,7 +2792,7 @@ body.lockscroll {
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
@@ -2775,6 +2803,8 @@ body.lockscroll {
   border: none;
   width: 100%;
   height: 48px;
+  margin-right: 0;
+  margin-left: 0;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
 }
@@ -2813,7 +2843,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-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-search-control input[type=search].components-search-control__input::placeholder {
   color: #757575;
@@ -2880,7 +2910,7 @@ body.lockscroll {
   }
 }
 .components-snackbar:focus {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-snackbar.components-snackbar-explicit-dismiss {
   cursor: default;
@@ -2916,7 +2946,7 @@ body.lockscroll {
   outline: 1px dotted #fff;
 }
 .components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 
 .components-snackbar__content {
@@ -2949,47 +2979,62 @@ body.lockscroll {
 }
 
 .components-tab-panel__tabs-item {
+  position: relative;
+  border-radius: 0;
+  height: 48px;
   background: transparent;
   border: none;
   box-shadow: none;
-  border-radius: 0;
   cursor: pointer;
-  height: 48px;
   padding: 3px 16px;
   margin-right: 0;
   font-weight: 500;
-  transition: box-shadow 0.1s linear;
-  box-sizing: border-box;
-}
-.components-tab-panel__tabs-item::after {
-  content: attr(data-label);
-  display: block;
-  height: 0;
-  overflow: hidden;
-  speak: none;
-  visibility: hidden;
 }
 .components-tab-panel__tabs-item:focus:not(:disabled) {
-  box-shadow: inset 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
-.components-tab-panel__tabs-item.is-active {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -1.5px 0 0 var(--wp-admin-theme-color);
   position: relative;
+  box-shadow: none;
 }
-.components-tab-panel__tabs-item.is-active::before {
+.components-tab-panel__tabs-item::after {
   content: "";
   position: absolute;
-  top: 0;
-  bottom: 1px;
   left: 0;
+  bottom: 0;
   right: 0;
-  border-bottom: 1.5px solid transparent;
+  pointer-events: none;
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  height: calc(0 * var(--wp-admin-border-width-focus));
+  border-radius: 0;
+  transition: all 0.1s linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .components-tab-panel__tabs-item::after {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
 }
-.components-tab-panel__tabs-item:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+.components-tab-panel__tabs-item.is-active::after {
+  height: calc(1 * var(--wp-admin-border-width-focus));
 }
-.components-tab-panel__tabs-item.is-active:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -3px 0 0 var(--wp-admin-theme-color);
+.components-tab-panel__tabs-item::before {
+  content: "";
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  bottom: 12px;
+  right: 12px;
+  pointer-events: none;
+  box-shadow: 0 0 0 0 transparent;
+  border-radius: 2px;
+  transition: all 0.1s linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .components-tab-panel__tabs-item::before {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.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));
 }
 
 .components-text-control__input,
@@ -3012,7 +3057,7 @@ body.lockscroll {
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
@@ -3333,11 +3378,11 @@ div.components-toolbar > div + div.has-left-divider::before {
 }
 
 .components-tooltip .components-popover__content {
-  background: #1e1e1e;
+  background: var(--wp-components-color-foreground, #1e1e1e);
   border-radius: 2px;
   border-width: 0;
   outline: none;
-  color: #fff;
+  color: var(--wp-components-color-foreground-inverted, #fff);
   white-space: nowrap;
   text-align: center;
   line-height: 1.4;