@wordpress/components 22.1.0 → 23.1.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
  */
@@ -47,15 +59,15 @@
 * @param {string} hex - the hexadecimal value to convert
 * @return {string} comma separated rgb values
 */
-/**
- * Breakpoint mixins
- */
 /**
  * Long content fade mixin
  *
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
+/**
+ * Breakpoint mixins
+ */
 /**
  * Focus styles.
  */
@@ -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 {
@@ -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. */
@@ -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. */
@@ -1316,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. */
@@ -1493,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;
 }
@@ -1633,51 +1648,25 @@ body.is-dragging-components-draggable {
   position: relative;
 }
 
-.is-focusing-regions [role=region]:focus {
+.is-focusing-regions [role=region]:focus::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  content: "";
+  pointer-events: none;
   outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline-offset: -4px;
+  z-index: 1000000;
 }
-.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 {
+.is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
+.is-focusing-regions .interface-interface-skeleton__sidebar .edit-post-layout__toggle-sidebar-panel,
+.is-focusing-regions .interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel,
+.is-focusing-regions .editor-post-publish-panel {
   outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline-offset: -4px;
 }
-.is-focusing-regions .interface-interface-skeleton__drawer {
-  z-index: 31;
-}
-.is-focusing-regions .interface-interface-skeleton__drawer .interface-navigable-region__stacker,
-.is-focusing-regions .interface-interface-skeleton__drawer .edit-site-navigation-toggle {
-  outline: inherit;
-  outline-offset: inherit;
-}
-.is-focusing-regions .interface-interface-skeleton__drawer .edit-site-navigation-toggle.is-open {
-  outline: none;
-}
-.is-focusing-regions .interface-interface-skeleton__drawer .edit-site-navigation-toggle__button {
-  z-index: -1;
-}
-
-.interface-interface-skeleton__drawer .interface-navigable-region__stacker {
-  height: 100%;
-}
 
 .components-menu-group + .components-menu-group {
   margin-top: 8px;
@@ -1813,7 +1802,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;
@@ -2239,7 +2228,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. */
@@ -2332,8 +2321,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;
 }
@@ -2397,6 +2385,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;
@@ -2409,21 +2398,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 {
@@ -2431,9 +2416,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 {
@@ -2514,7 +2500,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. */
@@ -2626,6 +2612,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   top: calc(50% - 1px);
   left: calc(50% - 1px);
   transition: transform 0.1s ease-in;
+  will-change: transform;
   opacity: 0;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -2792,7 +2779,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. */
@@ -2803,6 +2790,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;
 }
@@ -2977,47 +2966,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-components-color-accent, var(--wp-admin-theme-color, #007cba));
-}
-.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-components-color-accent, var(--wp-admin-theme-color, #007cba));
   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;
 }
-.components-tab-panel__tabs-item:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+@media (prefers-reduced-motion: reduce) {
+  .components-tab-panel__tabs-item::after {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.components-tab-panel__tabs-item.is-active::after {
+  height: calc(1 * var(--wp-admin-border-width-focus));
+}
+.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.is-active:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)), inset 0 -3px 0 0 var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+.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,
@@ -3040,7 +3044,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. */
@@ -3185,8 +3189,8 @@ body.lockscroll {
   padding-right: 16px;
   padding-left: 16px;
 }
-.components-accessible-toolbar .components-button:focus:enabled,
-.components-toolbar .components-button:focus:enabled {
+.components-accessible-toolbar .components-button:focus:not(:disabled),
+.components-toolbar .components-button:focus:not(:disabled) {
   box-shadow: none;
   outline: none;
 }
@@ -3361,11 +3365,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;