@wordpress/components 35.0.1 → 36.0.0

package/build-style/style.css

@@ -282,7 +282,7 @@
   box-sizing: border-box;
   padding: 4px 12px;
   border-radius: 2px;
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 .components-button.is-next-40px-default-size {
   height: 40px;
@@ -301,22 +301,22 @@
 .components-button.is-primary {
   white-space: nowrap;
   background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  color: var(--wp-components-color-accent-inverted, #fff);
+  color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #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, #2145e6));
-  color: var(--wp-components-color-accent-inverted, #fff);
+  color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
 }
 .components-button.is-primary:active:not(:disabled) {
   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);
+  color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
 }
 .components-button.is-primary:focus:not(:active) {
-  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));
+  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #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);
@@ -325,10 +325,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: 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));
+  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #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.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);
+  color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
   background-size: 100px 100%;
   /* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
   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%);
@@ -369,7 +369,7 @@
   background: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, transparent);
 }
 .components-button.is-secondary:disabled:not(:focus), .components-button.is-secondary[aria-disabled=true]:not(:focus), .components-button.is-secondary[aria-disabled=true]:hover:not(:focus) {
-  box-shadow: inset 0 0 0 1px #ddd;
+  box-shadow: inset 0 0 0 1px var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
 }
 .components-button.is-secondary:focus:not(:active) {
   box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -469,7 +469,7 @@ p + .components-button.is-tertiary {
   outline: 3px solid transparent;
 }
 .components-button:not(:disabled, [aria-disabled=true]):active {
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 .components-button:disabled, .components-button[aria-disabled=true] {
   cursor: default;
@@ -494,14 +494,14 @@ p + .components-button.is-tertiary {
   min-width: 32px;
 }
 .components-button.is-small {
-  height: 24px;
+  height: var(--wpds-dimension-size-sm, 24px);
   line-height: 22px;
   padding: 0 8px;
   font-size: 11px;
 }
 .components-button.is-small.has-icon:not(.has-text) {
   padding: 0;
-  min-width: 24px;
+  min-width: var(--wpds-dimension-size-sm, 24px);
 }
 .components-button.has-icon {
   padding: 6px;
@@ -529,20 +529,20 @@ p + .components-button.is-tertiary {
   padding-left: 12px;
 }
 .components-button.is-pressed, .components-button.is-pressed:hover {
-  color: var(--wp-components-color-foreground-inverted, #fff);
+  color: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc));
 }
 .components-button.is-pressed:not(:disabled, [aria-disabled=true]), .components-button.is-pressed:hover:not(:disabled, [aria-disabled=true]) {
-  background: var(--wp-components-color-foreground, #1e1e1e);
+  background: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 .components-button.is-pressed:disabled, .components-button.is-pressed[aria-disabled=true] {
   color: #949494;
 }
 .components-button.is-pressed:disabled:not(.is-primary):not(.is-secondary):not(.is-tertiary), .components-button.is-pressed[aria-disabled=true]:not(.is-primary):not(.is-secondary):not(.is-tertiary) {
-  color: var(--wp-components-color-foreground-inverted, #fff);
+  color: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc));
   background: #949494;
 }
 .components-button.is-pressed:focus:not(:active) {
-  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));
+  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff)), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 .components-button.is-pressed:focus {
   outline: 2px solid transparent;
@@ -571,8 +571,8 @@ p + .components-button.is-tertiary {
   position: relative; /* Required to position the navigation toolbar. */
   box-sizing: border-box;
   display: inline flow-root;
-  color: var(--wp-components-color-foreground, #1e1e1e);
-  background-color: var(--wp-components-color-background, #fff);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
+  background-color: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
   font-size: 13px;
   font-weight: 400;
   z-index: 0;
@@ -588,7 +588,7 @@ p + .components-button.is-tertiary {
   position: relative;
 }
 .components-calendar__day:has(.components-calendar__day-button:disabled) {
-  color: var(--wp-components-color-gray-400, #ccc);
+  color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
 }
 .components-calendar__day:has(.components-calendar__day-button:hover:not(:disabled)), .components-calendar__day:has(.components-calendar__day-button:focus-visible) {
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -672,7 +672,7 @@ p + .components-button.is-tertiary {
 .components-calendar__button-previous:disabled,
 .components-calendar__button-previous[aria-disabled=true] {
   cursor: revert;
-  color: var(--wp-components-color-gray-600, #949494);
+  color: var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
 }
 .components-calendar__button-next:focus-visible,
 .components-calendar__button-previous:focus-visible {
@@ -729,7 +729,7 @@ p + .components-button.is-tertiary {
   width: 32px;
   height: 32px;
   padding: 0;
-  color: var(--wp-components-color-gray-700, #757575);
+  color: var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
   text-align: center;
   text-transform: uppercase;
 }
@@ -749,21 +749,21 @@ p + .components-button.is-tertiary {
 
 .components-calendar__day--selected:not(.components-calendar__range-middle):has(.components-calendar__day-button,
 .components-calendar__day-button:hover:not(:disabled)) {
-  color: var(--wp-components-color-foreground-inverted, #fff);
+  color: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc));
 }
 .components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button::before {
-  background-color: var(--wp-components-color-foreground, #1e1e1e);
+  background-color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   border: 1px solid transparent;
 }
 .components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:disabled::before {
-  background-color: var(--wp-components-color-gray-400, #ccc);
+  background-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
 }
 .components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:hover:not(:disabled)::before {
-  background-color: var(--wp-components-color-gray-800, #2f2f2f);
+  background-color: var(--wp-components-color-gray-800, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 
 .components-calendar__day--outside {
-  color: var(--wp-components-color-gray-600, #949494);
+  color: var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
 }
 
 .components-calendar__day--hidden {
@@ -1105,7 +1105,7 @@ svg.components-checkbox-control__indeterminate {
 
 .components-checkbox-control:has(:disabled) svg.components-checkbox-control__checked,
 .components-checkbox-control:has(:disabled) svg.components-checkbox-control__indeterminate {
-  fill: var(--wp-components-color-gray-400, #ccc);
+  fill: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
 }
 
 .components-checkbox-control__help {
@@ -1280,8 +1280,8 @@ input.components-combobox-control__input[type=text] {
   margin: 0;
   line-height: inherit;
   min-height: auto;
-  background: var(--wp-components-color-background, #fff);
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  background: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 @media (min-width: 600px) {
   input.components-combobox-control__input[type=text] {
@@ -1386,7 +1386,7 @@ input.components-combobox-control__input[type=text]:focus {
 }
 
 .components-color-palette__custom-color-name {
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   margin: 0 1px;
 }
 
@@ -1611,7 +1611,7 @@ input.components-combobox-control__input[type=text]:focus {
   display: block;
   content: "";
   box-sizing: content-box;
-  background-color: #ddd;
+  background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
   position: absolute;
   top: -3px;
   left: 0;
@@ -1673,7 +1673,7 @@ input.components-combobox-control__input[type=text]:focus {
 }
 
 .components-external-link {
-  color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
+  color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
   text-decoration: none;
 }
 @media not (prefers-reduced-motion) {
@@ -1686,13 +1686,13 @@ input.components-combobox-control__input[type=text]:focus {
   outline-offset: 1px;
 }
 .components-external-link:visited {
-  color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
+  color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
 }
 .components-external-link:hover, .components-external-link:active {
-  color: var(--wpds-color-fg-interactive-brand-active, var(--wp-admin-theme-color, #3858e9));
+  color: var(--wpds-color-foreground-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 52%, black));
 }
 .components-external-link:focus {
-  outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
+  outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
   box-shadow: none;
   border-radius: 0;
 }
@@ -1789,8 +1789,8 @@ input.components-combobox-control__input[type=text]:focus {
   transform: translateX(16px);
 }
 .components-form-toggle.is-disabled .components-form-toggle__track, .components-disabled .components-form-toggle .components-form-toggle__track {
-  background-color: var(--wp-components-color-gray-100, #f0f0f0);
-  border-color: var(--wp-components-color-gray-300, #ddd);
+  background-color: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
+  border-color: var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
 }
 @media (forced-colors: active) {
   .components-form-toggle.is-disabled .components-form-toggle__track, .components-disabled .components-form-toggle .components-form-toggle__track {
@@ -1798,7 +1798,7 @@ input.components-combobox-control__input[type=text]:focus {
   }
 }
 .components-form-toggle.is-disabled .components-form-toggle__thumb, .components-disabled .components-form-toggle .components-form-toggle__thumb {
-  background-color: var(--wp-components-color-gray-400, #ccc);
+  background-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
   box-shadow: none;
 }
 @media (forced-colors: active) {
@@ -1807,8 +1807,8 @@ input.components-combobox-control__input[type=text]:focus {
   }
 }
 .components-form-toggle.is-disabled.is-checked .components-form-toggle__track, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track {
-  background-color: var(--wp-components-color-gray-400, #ccc);
-  border-color: var(--wp-components-color-gray-400, #ccc);
+  background-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
+  border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
 }
 @media (forced-colors: active) {
   .components-form-toggle.is-disabled.is-checked .components-form-toggle__track, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track {
@@ -1884,8 +1884,8 @@ input.components-combobox-control__input[type=text]:focus {
   cursor: text;
 }
 .components-form-token-field__input-container.is-disabled {
-  background: var(--wp-components-color-gray-100, #f0f0f0);
-  border-color: var(--wp-components-color-gray-400, #ccc);
+  background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
+  border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
   cursor: default;
 }
 .components-form-token-field__input-container.is-active {
@@ -1907,7 +1907,7 @@ input.components-combobox-control__input[type=text]:focus {
   min-width: 50px;
   background: inherit;
   border: 0;
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   box-shadow: none;
 }
 @media (min-width: 600px) {
@@ -1943,8 +1943,8 @@ input.components-combobox-control__input[type=text]:focus {
 }
 .components-form-token-field__token.is-disabled .components-form-token-field__token-text,
 .components-form-token-field__token.is-disabled .components-form-token-field__remove-token.components-button {
-  background: var(--wp-components-color-gray-100, #f0f0f0);
-  color: var(--wp-components-color-gray-600, #949494);
+  background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
+  color: var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
 }
 .components-form-token-field__token.is-borderless {
   position: relative;
@@ -2026,7 +2026,7 @@ input.components-combobox-control__input[type=text]:focus {
 }
 
 .components-form-token-field__suggestion {
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   display: block;
   font-size: 13px;
   padding: 8px 12px;
@@ -2036,7 +2036,7 @@ input.components-combobox-control__input[type=text]:focus {
 }
 .components-form-token-field__suggestion.is-selected {
   background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  color: var(--wp-components-color-foreground-inverted, #fff);
+  color: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc));
 }
 .components-form-token-field__suggestion[aria-disabled=true] {
   pointer-events: none;
@@ -2505,7 +2505,7 @@ input.components-combobox-control__input[type=text]:focus {
   margin: 0;
 }
 .components-modal__content.has-scrolled-content:not(.hide-header) .components-modal__header {
-  border-bottom-color: #ddd;
+  border-bottom-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
 }
 .components-modal__header + p {
   margin-top: 0;
@@ -2545,9 +2545,9 @@ input.components-combobox-control__input[type=text]:focus {
 }
 
 .components-notice {
-  --wp-components-notice-background-color: var(--wpds-color-bg-surface-info-weak, #f3f9ff);
+  --wp-components-notice-background-color: var(--wpds-color-background-surface-info-weak, #f3f9ff);
   --wp-components-notice-border-color: var(--wpds-color-stroke-surface-info, #a9c6e7);
-  --wp-components-notice-text-color: var(--wpds-color-fg-content-info, #001b4f);
+  --wp-components-notice-text-color: var(--wpds-color-foreground-content-info, #001b4f);
   box-sizing: border-box;
   display: grid;
   grid-template-columns: 1fr auto;
@@ -2562,25 +2562,25 @@ input.components-combobox-control__input[type=text]:focus {
   line-height: var(--wpds-typography-line-height-sm, 20px);
 }
 .components-notice.is-success {
-  --wp-components-notice-background-color: var(--wpds-color-bg-surface-success-weak, #ebffed);
+  --wp-components-notice-background-color: var(--wpds-color-background-surface-success-weak, #ebffed);
   --wp-components-notice-border-color: var(--wpds-color-stroke-surface-success, #94d29e);
-  --wp-components-notice-text-color: var(--wpds-color-fg-content-success, #002900);
+  --wp-components-notice-text-color: var(--wpds-color-foreground-content-success, #002900);
 }
 .components-notice.is-warning {
-  --wp-components-notice-background-color: var(--wpds-color-bg-surface-warning-weak, #fff7e1);
+  --wp-components-notice-background-color: var(--wpds-color-background-surface-warning-weak, #fff7e1);
   --wp-components-notice-border-color: var(--wpds-color-stroke-surface-warning, #e1bc7c);
-  --wp-components-notice-text-color: var(--wpds-color-fg-content-warning, #2e1900);
+  --wp-components-notice-text-color: var(--wpds-color-foreground-content-warning, #2e1900);
 }
 .components-notice.is-error {
-  --wp-components-notice-background-color: var(--wpds-color-bg-surface-error-weak, #fff6f5);
+  --wp-components-notice-background-color: var(--wpds-color-background-surface-error-weak, #fff6f5);
   --wp-components-notice-border-color: var(--wpds-color-stroke-surface-error, #dab1aa);
-  --wp-components-notice-text-color: var(--wpds-color-fg-content-error, #470000);
+  --wp-components-notice-text-color: var(--wpds-color-foreground-content-error, #470000);
 }
 
 .components-notice__content {
   grid-column: 1;
   grid-row: 1;
-  padding-block: calc((24px - 1lh) / 2);
+  padding-block: calc((var(--wpds-dimension-size-sm, 24px) - 1lh) / 2);
 }
 
 .components-notice__actions {
@@ -2596,11 +2596,11 @@ input.components-combobox-control__input[type=text]:focus {
 .components-notice__dismiss {
   grid-column: 2;
   grid-row: 1;
-  color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
+  color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
   margin-inline-start: var(--wpds-dimension-gap-xs, 4px);
 }
 .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover, .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):active, .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):focus {
-  color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
+  color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
   background-color: transparent;
 }
 .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
@@ -2649,7 +2649,7 @@ input.components-combobox-control__input[type=text]:focus {
   justify-content: space-between;
   align-items: center;
   padding: 0 16px;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
   box-sizing: content-box;
   height: 47px;
 }
@@ -3206,12 +3206,12 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   border-radius: 50%;
 }
 .components-radio-control__input[type=radio]:disabled {
-  background: var(--wp-components-color-gray-100, #f0f0f0);
-  border: 1px solid var(--wp-components-color-gray-300, #ddd);
+  background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
+  border: 1px solid var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
   opacity: 1;
 }
 .components-radio-control__input[type=radio]:disabled:checked::before {
-  border-color: var(--wp-components-color-gray-400, #ccc);
+  border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
   opacity: 1;
 }
 
@@ -3532,13 +3532,13 @@ body.lockscroll {
   padding: 3px var(--wpds-dimension-padding-lg, 16px);
   margin-left: 0;
   font-weight: var(--wpds-typography-font-weight-regular, 400);
-  color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
+  color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
 }
 .components-tab-panel__tabs-item:disabled, .components-tab-panel__tabs-item[aria-disabled=true] {
-  color: var(--wpds-color-fg-interactive-neutral-disabled, #8d8d8d);
+  color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
 }
 .components-tab-panel__tabs-item:not(:disabled, [aria-disabled=true]):is(:hover, :focus-visible) {
-  color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
+  color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
 }
 .components-tab-panel__tabs-item:focus:not(:disabled) {
   position: relative;
@@ -3580,7 +3580,7 @@ body.lockscroll {
   }
 }
 .components-tab-panel__tabs-item:focus-visible::before {
-  box-shadow: 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
 }
 .components-tab-panel__tabs[aria-orientation=vertical] .components-tab-panel__tabs-item {
@@ -3590,7 +3590,7 @@ body.lockscroll {
   display: none;
 }
 .components-tab-panel__tabs[aria-orientation=vertical] .components-tab-panel__tabs-item.is-active {
-  background: var(--wpds-color-bg-interactive-neutral-weak-active, #ededed);
+  background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
 }
 
 .components-tab-panel__tab-content:focus {
@@ -3598,7 +3598,7 @@ body.lockscroll {
   outline: none;
 }
 .components-tab-panel__tab-content:focus-visible {
-  box-shadow: 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
   outline-offset: 0;
 }
@@ -3618,10 +3618,10 @@ body.lockscroll {
 .components-text-control__input[type=month],
 .components-text-control__input[type=number] {
   width: 100%;
-  height: 32px;
+  height: 40px;
   margin: 0;
-  background: var(--wp-components-color-background, #fff);
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  background: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
@@ -3721,10 +3721,12 @@ body.lockscroll {
 .components-text-control__input[type=email],
 .components-text-control__input[type=month],
 .components-text-control__input[type=number] {
-  border-color: var(--wp-components-color-gray-600, #949494);
+  border-color: var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
+  padding-left: 12px;
+  padding-right: 12px;
 }
 .components-text-control__input::-moz-placeholder, .components-text-control__input[type=text]::-moz-placeholder, .components-text-control__input[type=tel]::-moz-placeholder, .components-text-control__input[type=time]::-moz-placeholder, .components-text-control__input[type=url]::-moz-placeholder, .components-text-control__input[type=week]::-moz-placeholder, .components-text-control__input[type=password]::-moz-placeholder, .components-text-control__input[type=color]::-moz-placeholder, .components-text-control__input[type=date]::-moz-placeholder, .components-text-control__input[type=datetime]::-moz-placeholder, .components-text-control__input[type=datetime-local]::-moz-placeholder, .components-text-control__input[type=email]::-moz-placeholder, .components-text-control__input[type=month]::-moz-placeholder, .components-text-control__input[type=number]::-moz-placeholder {
-  color: color-mix(in srgb, var(--wp-components-color-foreground, #1e1e1e), transparent 38%);
+  color: color-mix(in srgb, var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e)), transparent 38%);
 }
 .components-text-control__input::placeholder,
 .components-text-control__input[type=text]::placeholder,
@@ -3740,25 +3742,7 @@ body.lockscroll {
 .components-text-control__input[type=email]::placeholder,
 .components-text-control__input[type=month]::placeholder,
 .components-text-control__input[type=number]::placeholder {
-  color: color-mix(in srgb, var(--wp-components-color-foreground, #1e1e1e), transparent 38%);
-}
-.components-text-control__input.is-next-40px-default-size,
-.components-text-control__input[type=text].is-next-40px-default-size,
-.components-text-control__input[type=tel].is-next-40px-default-size,
-.components-text-control__input[type=time].is-next-40px-default-size,
-.components-text-control__input[type=url].is-next-40px-default-size,
-.components-text-control__input[type=week].is-next-40px-default-size,
-.components-text-control__input[type=password].is-next-40px-default-size,
-.components-text-control__input[type=color].is-next-40px-default-size,
-.components-text-control__input[type=date].is-next-40px-default-size,
-.components-text-control__input[type=datetime].is-next-40px-default-size,
-.components-text-control__input[type=datetime-local].is-next-40px-default-size,
-.components-text-control__input[type=email].is-next-40px-default-size,
-.components-text-control__input[type=month].is-next-40px-default-size,
-.components-text-control__input[type=number].is-next-40px-default-size {
-  height: 40px;
-  padding-left: 12px;
-  padding-right: 12px;
+  color: color-mix(in srgb, var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e)), transparent 38%);
 }
 
 .components-text-control__input[type=email],
@@ -3795,7 +3779,7 @@ body.lockscroll {
 
 .components-accessible-toolbar {
   display: inline-flex;
-  border: 1px solid var(--wp-components-color-foreground, #1e1e1e);
+  border: 1px solid var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   border-radius: 2px;
   flex-shrink: 0;
 }
@@ -3862,7 +3846,7 @@ body.lockscroll {
 }
 .components-accessible-toolbar .components-button.is-pressed::before,
 .components-toolbar .components-button.is-pressed::before {
-  background: var(--wp-components-color-foreground, #1e1e1e);
+  background: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 .components-accessible-toolbar .components-button:focus::before,
 .components-toolbar .components-button:focus::before {
@@ -3906,8 +3890,8 @@ body.lockscroll {
 
 .components-toolbar-group {
   min-height: 48px;
-  border-right: 1px solid var(--wp-components-color-foreground, #1e1e1e);
-  background-color: var(--wp-components-color-background, #fff);
+  border-right: 1px solid var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
+  background-color: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
   display: inline-flex;
   flex-shrink: 0;
   flex-wrap: wrap;
@@ -3930,7 +3914,7 @@ body.lockscroll {
 }
 .components-toolbar-group .components-button.components-button svg,
 .components-toolbar-group .components-button.has-icon.has-icon svg {
-  min-width: 24px;
+  min-width: var(--wpds-dimension-size-sm, 24px);
 }
 .components-toolbar-group .components-button.components-button::before,
 .components-toolbar-group .components-button.has-icon.has-icon::before {
@@ -3941,8 +3925,8 @@ body.lockscroll {
 .components-toolbar {
   min-height: 48px;
   margin: 0;
-  border: 1px solid var(--wp-components-color-foreground, #1e1e1e);
-  background-color: var(--wp-components-color-background, #fff);
+  border: 1px solid var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
+  background-color: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
   display: inline-flex;
   flex-shrink: 0;
   flex-wrap: wrap;
@@ -3965,7 +3949,7 @@ div.components-toolbar > div + div.has-left-divider::before {
   display: inline-block;
   content: "";
   box-sizing: content-box;
-  background-color: #ddd;
+  background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
   position: absolute;
   top: 8px;
   left: -3px;
@@ -4035,7 +4019,7 @@ div.components-toolbar > div + div.has-left-divider::before {
   font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 12px;
   line-height: 16px;
-  color: var(--wp-components-color-gray-700, #757575);
+  color: var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
   animation: components-validated-control__indicator-jump 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
 }
 .components-validated-control__indicator.is-invalid {

package/build-types/base-control/styles/base-control-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-control-styles.d.ts","sourceRoot":"","sources":["../../../src/base-control/styles/base-control-styles.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,OAAO;;;yGAKnB,CAAC;AAEF,eAAO,MAAM,WAAW;;;yGAIvB,CAAC;AAcF,eAAO,MAAM,WAAW;;;kHAEvB,CAAC;AAEF,eAAO,MAAM,UAAU;;;qHAMtB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;2GAE7B,CAAC"}
+{"version":3,"file":"base-control-styles.d.ts","sourceRoot":"","sources":["../../../src/base-control/styles/base-control-styles.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,OAAO;;;yGAKnB,CAAC;AAEF,eAAO,MAAM,WAAW;;;yGAIvB,CAAC;AAcF,eAAO,MAAM,WAAW;;;kHAEvB,CAAC;AAEF,eAAO,MAAM,UAAU;;;qHAOtB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;2GAE7B,CAAC"}

package/build-types/border-control/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/border-control/styles.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAMtC,eAAO,MAAM,aAAa,2CAKzB,CAAC;AAEF,eAAO,MAAM,YAAY,iDAQxB,CAAC;AAOF,eAAO,MAAM,YAAY,2CAKxB,CAAC;AAEF,eAAO,MAAM,aAAa,UAAY,SAAS,GAAG,kBAAkB,8CAInE,CAAC;AAEF,eAAO,MAAM,qBAAqB,2CAuBjC,CAAC;AAEF,eAAO,MAAM,oBAAoB,YAAc,MAAM,8CAUpD,CAAC;AAEF,eAAO,MAAM,qBAAqB,YACxB,MAAM,SACR,SAAS,GAAG,kBAAkB,8CA8BrC,CAAC;AAOF,eAAO,MAAM,4BAA4B,2CAWxC,CAAC;AAEF,eAAO,MAAM,2BAA2B,2CAAQ,CAAC;AACjD,eAAO,MAAM,oBAAoB,2CAAQ,CAAC;AAE1C,eAAO,MAAM,kBAAkB,2CAI9B,CAAC;AAEF,eAAO,MAAM,YAAY,iDAGxB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/border-control/styles.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAMtC,eAAO,MAAM,aAAa,2CAKzB,CAAC;AAEF,eAAO,MAAM,YAAY,iDAQxB,CAAC;AAOF,eAAO,MAAM,YAAY,2CAKxB,CAAC;AAEF,eAAO,MAAM,aAAa,UAAY,SAAS,GAAG,kBAAkB,8CAInE,CAAC;AAEF,eAAO,MAAM,qBAAqB,2CAuBjC,CAAC;AAEF,eAAO,MAAM,oBAAoB,YAAc,MAAM,8CAWpD,CAAC;AAEF,eAAO,MAAM,qBAAqB,YACxB,MAAM,SACR,SAAS,GAAG,kBAAkB,8CA8BrC,CAAC;AAOF,eAAO,MAAM,4BAA4B,2CAWxC,CAAC;AAEF,eAAO,MAAM,2BAA2B,2CAAQ,CAAC;AACjD,eAAO,MAAM,oBAAoB,2CAAQ,CAAC;AAE1C,eAAO,MAAM,kBAAkB,2CAI9B,CAAC;AAEF,eAAO,MAAM,YAAY,iDAGxB,CAAC"}

package/build-types/box-control/box-input-control.d.ts

@@ -0,0 +1,3 @@
+import type { BoxControlInputControlProps } from './types';
+export default function BoxInputControl({ onChange, onFocus, values, selectedUnits, setSelectedUnits, sides, side, min, presets, presetKey, placeholder: placeholderProp, ...props }: BoxControlInputControlProps): import("react").JSX.Element;
+//# sourceMappingURL=box-input-control.d.ts.map

package/build-types/box-control/box-input-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"box-input-control.d.ts","sourceRoot":"","sources":["../../src/box-control/box-input-control.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,2BAA2B,EAAmB,MAAM,SAAS,CAAC;AA+C5E,MAAM,CAAC,OAAO,UAAU,eAAe,CAAE,EACxC,QAAe,EACf,OAAc,EACd,MAAM,EACN,aAAa,EACb,gBAAgB,EAChB,KAAK,EACL,IAAI,EACJ,GAAO,EACP,OAAO,EACP,SAAS,EACT,WAAW,EAAE,eAAe,EAC5B,GAAG,KAAK,EACR,EAAE,2BAA2B,+BAuN7B"}

package/build-types/box-control/index.d.ts

@@ -16,15 +16,11 @@ import type { BoxControlProps } from './types';
  *   } );
  *
  *   return (
- *     <BoxControl
- *       __next40pxDefaultSize
- *       values={ values }
- *       onChange={ setValues }
- *     />
+ *     <BoxControl values={ values } onChange={ setValues } />
  *   );
  * };
  * ```
  */
-declare function BoxControl({ __next40pxDefaultSize, id: idProp, inputProps, onChange, label, values: valuesProp, units, sides, splitOnAxis, allowReset, resetValues, presets, presetKey, onMouseOver, onMouseOut }: BoxControlProps): import("react").JSX.Element;
+declare function BoxControl({ id: idProp, inputProps, onChange, label, values: valuesProp, units, sides, splitOnAxis, allowReset, resetValues, presets, presetKey, onMouseOver, onMouseOut }: BoxControlProps): import("react").JSX.Element;
 export default BoxControl;
 //# sourceMappingURL=index.d.ts.map

package/build-types/box-control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/box-control/index.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,eAAe,EAAmB,MAAM,SAAS,CAAC;AAehE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,iBAAS,UAAU,CAAE,EACpB,qBAA6B,EAC7B,EAAE,EAAE,MAAM,EACV,UAA8B,EAC9B,QAAe,EACf,KAA2B,EAC3B,MAAM,EAAE,UAAU,EAClB,KAAK,EACL,KAAK,EACL,WAAmB,EACnB,UAAiB,EACjB,WAA4B,EAC5B,OAAO,EACP,SAAS,EACT,WAAW,EACX,UAAU,EACV,EAAE,eAAe,+BAwIjB;eAEc,UAAU"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/box-control/index.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,eAAe,EAAmB,MAAM,SAAS,CAAC;AAchE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,iBAAS,UAAU,CAAE,EACpB,EAAE,EAAE,MAAM,EACV,UAA8B,EAC9B,QAAe,EACf,KAA2B,EAC3B,MAAM,EAAE,UAAU,EAClB,KAAK,EACL,KAAK,EACL,WAAmB,EACnB,UAAiB,EACjB,WAA4B,EAC5B,OAAO,EACP,SAAS,EACT,WAAW,EACX,UAAU,EACV,EAAE,eAAe,+BA4HjB;eAEc,UAAU"}

package/build-types/box-control/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/box-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAC;AAQ3D;;GAEG;AACH,OAAO,UAAU,MAAM,KAAK,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,UAAU,CAkBlC,CAAC;eACa,IAAI;AAsBnB,eAAO,MAAM,OAAO,iIAAkC,CAAC;AAMvD,eAAO,MAAM,UAAU,iIAAgC,CAAC;AAKxD,eAAO,MAAM,cAAc,iIAAgC,CAAC;AAM5D,eAAO,MAAM,UAAU,iIAAgC,CAAC;AAMxD,eAAO,MAAM,aAAa,iIAAgC,CAAC;AAM3D,eAAO,MAAM,2BAA2B,iIAAgC,CAAC;AAOzE,eAAO,MAAM,kBAAkB,iIAAgC,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/box-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAC;AAQ3D;;GAEG;AACH,OAAO,UAAU,MAAM,KAAK,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,UAAU,CAkBlC,CAAC;eACa,IAAI;AAqBnB,eAAO,MAAM,OAAO,iIAAkC,CAAC;AAKvD,eAAO,MAAM,UAAU,iIAAgC,CAAC;AAKxD,eAAO,MAAM,cAAc,iIAAgC,CAAC;AAM5D,eAAO,MAAM,UAAU,iIAAgC,CAAC;AAMxD,eAAO,MAAM,aAAa,iIAAgC,CAAC;AAM3D,eAAO,MAAM,2BAA2B,iIAAgC,CAAC;AAOzE,eAAO,MAAM,kBAAkB,iIAAgC,CAAC"}

package/build-types/box-control/types.d.ts

@@ -22,6 +22,13 @@ export interface Preset {
 }
 type UnitControlPassthroughProps = Omit<UnitControlProps, 'label' | 'onChange' | 'onFocus' | 'units'>;
 type DeprecatedBoxControlProps = {
+    /**
+     * Start opting into the larger default height that will become the default size in a future version.
+     *
+     * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+     * @ignore
+     */
+    __next40pxDefaultSize?: boolean;
     /**
      * @deprecated Pass to the `inputProps` prop instead.
      * @ignore
@@ -83,12 +90,6 @@ export type BoxControlProps = Pick<UnitControlProps, 'units'> & DeprecatedBoxCon
      * The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.
      */
     values?: BoxControlValue;
-    /**
-     * Start opting into the larger default height that will become the default size in a future version.
-     *
-     * @default false
-     */
-    __next40pxDefaultSize?: boolean;
 } & ({
     /**
      * Available presets to pick from.