@wordpress/components 35.0.1 → 36.0.0

package/build-style/style-rtl.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-right: 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] {
@@ -1384,7 +1384,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;
 }
 
@@ -1606,7 +1606,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;
   right: 0;
@@ -1668,7 +1668,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) {
@@ -1681,13 +1681,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;
 }
@@ -1784,8 +1784,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 {
@@ -1793,7 +1793,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) {
@@ -1802,8 +1802,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 {
@@ -1879,8 +1879,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 {
@@ -1902,7 +1902,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) {
@@ -1938,8 +1938,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;
@@ -2021,7 +2021,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;
@@ -2031,7 +2031,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;
@@ -2500,7 +2500,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;
@@ -2540,9 +2540,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;
@@ -2557,25 +2557,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 {
@@ -2591,11 +2591,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 {
@@ -2644,7 +2644,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;
 }
@@ -3197,12 +3197,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;
 }
 
@@ -3520,13 +3520,13 @@ body.lockscroll {
   padding: 3px var(--wpds-dimension-padding-lg, 16px);
   margin-right: 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;
@@ -3568,7 +3568,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 {
@@ -3578,7 +3578,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 {
@@ -3586,7 +3586,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;
 }
@@ -3606,10 +3606,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. */
@@ -3709,10 +3709,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-right: 12px;
+  padding-left: 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,
@@ -3728,25 +3730,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-right: 12px;
-  padding-left: 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],
@@ -3782,7 +3766,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;
 }
@@ -3849,7 +3833,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 {
@@ -3893,8 +3877,8 @@ body.lockscroll {
 
 .components-toolbar-group {
   min-height: 48px;
-  border-left: 1px solid var(--wp-components-color-foreground, #1e1e1e);
-  background-color: var(--wp-components-color-background, #fff);
+  border-left: 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;
@@ -3917,7 +3901,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 {
@@ -3928,8 +3912,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;
@@ -3952,7 +3936,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;
   right: -3px;
@@ -4022,7 +4006,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 {