PluginProbe
Gutenberg / 22.7.0
Gutenberg v22.7.0
24.1.0 24.0.0 23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 All 404 releases
← All changes | build/styles/components/style-rtl.css +464 -395 23.6.2 → 22.7.0 View file →
@@ -68,14 +68,8 @@
68 68 /**
69 69 * Focus styles.
70 70 */
71 71 /**
72 - * Standard focus rings for the WordPress Design System.
73 - *
74 - * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
75 - * e.g. `&:focus { @include outset-ring__focus(); }`.
76 - */
77 -/**
78 72 * Applies editor left position to the selector passed as argument
79 73 */
80 74 /**
81 75 * Styles that are reused verbatim in a few places
@@ -166,9 +160,8 @@
166 160 height: auto;
167 161 min-height: 36px;
168 162 text-align: right;
169 163 width: 100%;
170 - font-weight: var(--wpds-typography-font-weight-default, 400);
171 164 }
172 165 .components-autocomplete__result.components-button:focus:not(:disabled) {
173 166 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
174 167 outline: 2px solid transparent;
@@ -173,8 +166,188 @@
173 166 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
174 167 outline: 2px solid transparent;
175 168 }
176 169
170 +.components-avatar {
171 + display: inline-flex;
172 + align-items: center;
173 + border-radius: 9999px;
174 + overflow: clip;
175 + flex-shrink: 0;
176 + background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
177 + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
178 +}
179 +
180 +.components-avatar__image {
181 + box-sizing: border-box;
182 + position: relative;
183 + width: 32px;
184 + height: 32px;
185 + border-radius: 9999px;
186 + border: 0;
187 + background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
188 + overflow: clip;
189 + flex-shrink: 0;
190 + font-size: 0;
191 + color: #fff;
192 +}
193 +.is-small > .components-avatar__image {
194 + width: 24px;
195 + height: 24px;
196 +}
197 +.has-src > .components-avatar__image {
198 + background-image: var(--components-avatar-url);
199 + background-size: cover;
200 + background-position: center;
201 +}
202 +.has-avatar-border-color > .components-avatar__image {
203 + border: var(--wp-admin-border-width-focus) solid var(--components-avatar-outline-color);
204 + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff;
205 + background-clip: padding-box;
206 +}
207 +
208 +.components-avatar:not(.has-src) > .components-avatar__image {
209 + display: flex;
210 + align-items: center;
211 + justify-content: center;
212 + font-size: 11px;
213 + font-weight: 499;
214 + border: 0;
215 + box-shadow: none;
216 + background-clip: border-box;
217 +}
218 +
219 +.components-avatar:not(.has-src).has-avatar-border-color > .components-avatar__image {
220 + background-color: var(--components-avatar-outline-color);
221 +}
222 +
223 +.components-avatar__name {
224 + font-size: 13px;
225 + line-height: 20px;
226 + color: #fff;
227 + min-width: 0;
228 + padding-bottom: 2px;
229 + overflow: hidden;
230 + opacity: 0;
231 + white-space: nowrap;
232 + transition: opacity 0.15s cubic-bezier(0.15, 0, 0.15, 1);
233 +}
234 +
235 +.components-avatar.has-badge {
236 + display: inline-grid;
237 + grid-template-columns: min-content 0fr;
238 + column-gap: 0;
239 + padding-inline-end: 0;
240 + transition: grid-template-columns 0.3s cubic-bezier(0.15, 0, 0.15, 1), column-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1), padding-inline-end 0.3s cubic-bezier(0.15, 0, 0.15, 1);
241 +}
242 +.components-avatar.has-badge:hover {
243 + grid-template-columns: min-content 1fr;
244 + column-gap: 4px;
245 + padding-inline-end: 8px;
246 + transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
247 +}
248 +.components-avatar.has-badge:hover .components-avatar__name {
249 + opacity: 1;
250 + transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
251 +}
252 +
253 +.components-avatar.has-badge.has-avatar-border-color {
254 + background-color: var(--components-avatar-outline-color);
255 +}
256 +
257 +.components-avatar.has-status.has-src > .components-avatar__image {
258 + background-image: none;
259 +}
260 +.components-avatar.has-status.has-src > .components-avatar__image::before {
261 + content: "";
262 + position: absolute;
263 + inset: 0;
264 + border-radius: inherit;
265 + background-image: var(--components-avatar-url);
266 + background-size: cover;
267 + background-position: center;
268 + mix-blend-mode: luminosity;
269 + opacity: 0.3;
270 +}
271 +
272 +.components-avatar.has-status:not(.has-src) > .components-avatar__image {
273 + color: rgba(255, 255, 255, 0.3);
274 +}
275 +
276 +.components-avatar.has-status.has-avatar-border-color > .components-avatar__image {
277 + background-color: var(--components-avatar-outline-color);
278 +}
279 +
280 +.components-avatar__status-indicator {
281 + position: absolute;
282 + inset: 0;
283 + display: flex;
284 + align-items: center;
285 + justify-content: center;
286 + z-index: 1;
287 + color: #fff;
288 + fill: #fff;
289 +}
290 +.components-avatar__status-indicator svg {
291 + width: 75%;
292 + height: 75%;
293 +}
294 +
295 +@media (prefers-reduced-motion: reduce) {
296 + .components-avatar.has-badge,
297 + .components-avatar__name {
298 + transition: none;
299 + }
300 +}
301 +.components-avatar-group {
302 + display: flex;
303 + align-items: center;
304 +}
305 +.components-avatar-group > .components-avatar + .components-avatar {
306 + margin-inline-start: -8px;
307 +}
308 +.components-avatar-group > .components-avatar {
309 + position: relative;
310 +}
311 +.components-avatar-group > .components-avatar:nth-child(1) {
312 + z-index: 10;
313 +}
314 +.components-avatar-group > .components-avatar:nth-child(2) {
315 + z-index: 9;
316 +}
317 +.components-avatar-group > .components-avatar:nth-child(3) {
318 + z-index: 8;
319 +}
320 +.components-avatar-group > .components-avatar:nth-child(4) {
321 + z-index: 7;
322 +}
323 +.components-avatar-group > .components-avatar:nth-child(5) {
324 + z-index: 6;
325 +}
326 +.components-avatar-group > .components-avatar:nth-child(6) {
327 + z-index: 5;
328 +}
329 +.components-avatar-group > .components-avatar:nth-child(7) {
330 + z-index: 4;
331 +}
332 +.components-avatar-group > .components-avatar:nth-child(8) {
333 + z-index: 3;
334 +}
335 +.components-avatar-group > .components-avatar:nth-child(9) {
336 + z-index: 2;
337 +}
338 +.components-avatar-group > .components-avatar:nth-child(10) {
339 + z-index: 1;
340 +}
341 +
342 +.components-avatar-group__overflow {
343 + margin-inline-start: 4px;
344 + font-size: 12px;
345 + line-height: 20px;
346 + color: #1e1e1e;
347 + white-space: nowrap;
348 +}
349 +
177 350 .components-badge {
178 351 box-sizing: border-box;
179 352 }
180 353 .components-badge *,
@@ -238,9 +411,9 @@
238 411 .components-button-group .components-button {
239 412 border-radius: 0;
240 413 display: inline-flex;
241 414 color: #1e1e1e;
242 - border-color: #1e1e1e;
415 + box-shadow: inset 0 0 0 1px #1e1e1e;
243 416 }
244 417 .components-button-group .components-button + .components-button {
245 418 margin-right: -1px;
246 419 }
@@ -253,8 +426,11 @@
253 426 .components-button-group .components-button:focus, .components-button-group .components-button.is-primary {
254 427 position: relative;
255 428 z-index: 1;
256 429 }
430 +.components-button-group .components-button.is-primary {
431 + box-shadow: inset 0 0 0 1px #1e1e1e;
432 +}
257 433
258 434 /**
259 435 * For easier testing of potential regressions, you can use a Button variant matrix
260 436 * available in a special Storybook instance by running `npm run storybook:e2e:dev`.
@@ -260,34 +436,33 @@
260 436 * available in a special Storybook instance by running `npm run storybook:e2e:dev`.
261 437 *
262 438 * @see https://github.com/WordPress/gutenberg/blob/trunk/test/storybook-playwright/README.md
263 439 */
264 -.components-button:focus:is(a) {
265 - box-shadow: none;
266 -}
267 -.components-button:focus:not(:active) {
268 - 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));
269 - outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
270 -}
271 440 .components-button {
272 441 display: inline-flex;
273 442 text-decoration: none;
443 + word-break: break-word;
274 444 font-family: inherit;
275 445 font-size: 13px;
276 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
446 + font-weight: 499;
277 447 margin: 0;
278 - cursor: var(--wpds-cursor-control, pointer);
279 - -webkit-appearance: none;
280 - -moz-appearance: none;
281 - appearance: none;
448 + border: 0;
449 + cursor: pointer;
450 + appearance: none;
282 451 background: none;
452 +}
453 +@media not (prefers-reduced-motion) {
454 + .components-button {
455 + transition: box-shadow 0.1s linear;
456 + }
457 +}
458 +.components-button {
283 459 height: 36px;
284 460 align-items: center;
285 461 box-sizing: border-box;
286 462 padding: 4px 12px;
287 463 border-radius: 2px;
288 - color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
289 - border: 1px solid transparent;
464 + color: var(--wp-components-color-foreground, #1e1e1e);
290 465 }
291 466 .components-button.is-next-40px-default-size {
292 467 height: 40px;
293 468 }
@@ -293,8 +468,14 @@
293 468 }
294 469 .components-button[aria-expanded=true], .components-button:hover:not(:disabled, [aria-disabled=true]) {
295 470 color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
296 471 }
472 +.components-button:focus:not(:active) {
473 + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
474 +}
475 +.components-button:focus {
476 + outline: 3px solid transparent;
477 +}
297 478 .components-button {
298 479 /**
299 480 * Primary button style.
300 481 */
@@ -301,30 +482,41 @@
301 482 }
302 483 .components-button.is-primary {
303 484 white-space: nowrap;
304 485 background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
305 - color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
486 + color: var(--wp-components-color-accent-inverted, #fff);
306 487 text-decoration: none;
307 488 text-shadow: none;
489 + outline: 1px solid transparent;
308 490 }
309 491 .components-button.is-primary:hover:not(:disabled) {
310 492 background: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
311 - color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
493 + color: var(--wp-components-color-accent-inverted, #fff);
312 494 }
313 495 .components-button.is-primary:active:not(:disabled) {
314 496 background: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
315 - color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
497 + border-color: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
498 + color: var(--wp-components-color-accent-inverted, #fff);
316 499 }
500 +.components-button.is-primary:focus:not(:active) {
501 + 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));
502 +}
317 503 .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 {
318 504 color: rgba(255, 255, 255, 0.4);
319 505 background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
506 + border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
507 + outline: none;
320 508 }
509 +.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 {
510 + 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));
511 +}
321 512 .components-button.is-primary.is-busy, .components-button.is-primary.is-busy:disabled, .components-button.is-primary.is-busy[aria-disabled=true] {
322 - color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
513 + color: var(--wp-components-color-accent-inverted, #fff);
323 514 background-size: 100px 100%;
324 515 /* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
325 516 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%);
326 517 /* stylelint-enable */
518 + border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
327 519 }
328 520 .components-button {
329 521 /**
330 522 * Secondary and tertiary buttons.
@@ -329,8 +521,14 @@
329 521 /**
330 522 * Secondary and tertiary buttons.
331 523 */
332 524 }
525 +.components-button.is-secondary, .components-button.is-tertiary {
526 + outline: 1px solid transparent;
527 +}
528 +.components-button.is-secondary:active:not(:disabled), .components-button.is-tertiary:active:not(:disabled) {
529 + box-shadow: none;
530 +}
333 531 .components-button.is-secondary:disabled, .components-button.is-secondary[aria-disabled=true], .components-button.is-secondary[aria-disabled=true]:hover, .components-button.is-tertiary:disabled, .components-button.is-tertiary[aria-disabled=true], .components-button.is-tertiary[aria-disabled=true]:hover {
334 532 color: #949494;
335 533 background: transparent;
336 534 transform: none;
@@ -339,33 +537,26 @@
339 537 /**
340 538 * Secondary button style.
341 539 */
342 540 }
343 -@media not (prefers-reduced-motion) {
344 - .components-button.is-secondary {
345 - transition: border-color 0.1s linear;
346 - }
347 -}
348 541 .components-button.is-secondary {
349 - border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
542 + box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)), 0 0 0 currentColor;
543 + outline: 1px solid transparent;
350 544 white-space: nowrap;
351 545 color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
352 546 background: transparent;
353 547 }
354 -.components-button.is-secondary:active:not(:disabled) {
355 - border-color: transparent;
356 -}
357 548 .components-button.is-secondary:hover:not(:disabled, [aria-disabled=true], .is-pressed) {
358 - border-color: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
549 + box-shadow: inset 0 0 0 1px var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
359 550 color: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
360 551 background: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, transparent);
361 552 }
553 +.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) {
554 + box-shadow: inset 0 0 0 1px #ddd;
555 +}
362 556 .components-button.is-secondary:focus:not(:active) {
363 - border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
557 + 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));
364 558 }
365 -.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) {
366 - border-color: var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
367 -}
368 559 .components-button {
369 560 /**
370 561 * Tertiary buttons.
371 562 */
@@ -384,8 +575,12 @@
384 575 }
385 576 p + .components-button.is-tertiary {
386 577 margin-right: -6px;
387 578 }
579 +.components-button.is-tertiary:disabled:not(:focus), .components-button.is-tertiary[aria-disabled=true]:not(:focus), .components-button.is-tertiary[aria-disabled=true]:hover:not(:focus) {
580 + box-shadow: none;
581 + outline: none;
582 +}
388 583 .components-button {
389 584 /**
390 585 * Destructive buttons.
391 586 */
@@ -400,8 +595,11 @@
400 595 }
401 596 .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):hover:not(:disabled, [aria-disabled=true]) {
402 597 color: rgb(112.7368421053, 13.2631578947, 13.2631578947);
403 598 }
599 +.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):focus:not(:active) {
600 + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #cc1818;
601 +}
404 602 .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):active:not(:disabled, [aria-disabled=true]) {
405 603 background: #ccc;
406 604 }
407 605 .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):disabled, .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link)[aria-disabled=true] {
@@ -420,18 +618,17 @@
420 618 }
421 619 .components-button.is-link {
422 620 margin: 0;
423 621 padding: 0;
622 + box-shadow: none;
424 623 border: 0;
425 624 border-radius: 0;
426 625 background: none;
427 626 outline: none;
428 627 text-align: right;
429 - font-weight: var(--wpds-typography-font-weight-default, 400);
628 + font-weight: 400;
430 629 color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
431 630 text-decoration: underline;
432 - text-underline-offset: 0.2em;
433 - text-decoration-thickness: from-font;
434 631 }
435 632 @media not (prefers-reduced-motion) {
436 633 .components-button.is-link {
437 634 transition-property: border, background, color;
@@ -441,17 +638,16 @@
441 638 }
442 639 .components-button.is-link {
443 640 height: auto;
444 641 }
445 -.components-button.is-link:focus:not(:active) {
642 +.components-button.is-link:focus {
446 643 border-radius: 2px;
447 - text-decoration: none;
448 644 }
449 645 .components-button.is-link:disabled, .components-button.is-link[aria-disabled=true] {
450 646 color: #949494;
451 647 }
452 648 .components-button:not(:disabled, [aria-disabled=true]):active {
453 - color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
649 + color: var(--wp-components-color-foreground, #1e1e1e);
454 650 }
455 651 .components-button:disabled, .components-button[aria-disabled=true] {
456 652 cursor: default;
457 653 color: #949494;
@@ -474,9 +670,9 @@
474 670 padding: 0;
475 671 min-width: 32px;
476 672 }
477 673 .components-button.is-small {
478 - height: var(--wpds-dimension-size-sm, 24px);
674 + height: 24px;
479 675 line-height: 22px;
480 676 padding: 0 8px;
481 677 font-size: 11px;
482 678 }
@@ -481,9 +677,9 @@
481 677 font-size: 11px;
482 678 }
483 679 .components-button.is-small.has-icon:not(.has-text) {
484 680 padding: 0;
485 - min-width: var(--wpds-dimension-size-sm, 24px);
681 + min-width: 24px;
486 682 }
487 683 .components-button.has-icon {
488 684 padding: 6px;
489 685 min-width: 36px;
@@ -508,25 +704,27 @@
508 704 .components-button.has-icon.has-text.has-icon-right {
509 705 padding-left: 8px;
510 706 padding-right: 12px;
511 707 }
512 -.components-button.has-icon:not(.has-text) svg,
513 -.components-button.has-icon:not(.has-text) .dashicon {
514 - margin-inline: -1px;
515 -}
516 708 .components-button.is-pressed, .components-button.is-pressed:hover {
517 - color: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc));
709 + color: var(--wp-components-color-foreground-inverted, #fff);
518 710 }
519 711 .components-button.is-pressed:not(:disabled, [aria-disabled=true]), .components-button.is-pressed:hover:not(:disabled, [aria-disabled=true]) {
520 - background: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
712 + background: var(--wp-components-color-foreground, #1e1e1e);
521 713 }
522 714 .components-button.is-pressed:disabled, .components-button.is-pressed[aria-disabled=true] {
523 715 color: #949494;
524 716 }
525 717 .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) {
526 - color: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc));
718 + color: var(--wp-components-color-foreground-inverted, #fff);
527 719 background: #949494;
528 720 }
721 +.components-button.is-pressed:focus:not(:active) {
722 + 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));
723 +}
724 +.components-button.is-pressed:focus {
725 + outline: 2px solid transparent;
726 +}
529 727 .components-button svg {
530 728 fill: currentColor;
531 729 outline: none;
532 730 flex-shrink: 0;
@@ -535,8 +733,11 @@
535 733 .components-button svg {
536 734 fill: CanvasText;
537 735 }
538 736 }
737 +.components-button .components-visually-hidden {
738 + height: auto;
739 +}
539 740
540 741 @keyframes components-button__busy-animation {
541 742 0% {
542 743 background-position: right 200px top 0;
@@ -546,12 +747,12 @@
546 747 .components-calendar {
547 748 position: relative; /* Required to position the navigation toolbar. */
548 749 box-sizing: border-box;
549 750 display: inline flow-root;
550 - color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
551 - background-color: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
751 + color: var(--wp-components-color-foreground, #1e1e1e);
752 + background-color: var(--wp-components-color-background, #fff);
552 753 font-size: 13px;
553 - font-weight: var(--wpds-typography-font-weight-default, 400);
754 + font-weight: 400;
554 755 z-index: 0;
555 756 }
556 757 .components-calendar *,
557 758 .components-calendar *::before,
@@ -563,9 +764,9 @@
563 764 padding: 0;
564 765 position: relative;
565 766 }
566 767 .components-calendar__day:has(.components-calendar__day-button:disabled) {
567 - color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
768 + color: var(--wp-components-color-gray-400, #ccc);
568 769 }
569 770 .components-calendar__day:has(.components-calendar__day-button:hover:not(:disabled)), .components-calendar__day:has(.components-calendar__day-button:focus-visible) {
570 771 color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
571 772 }
@@ -573,9 +774,9 @@
573 774 .components-calendar__day-button {
574 775 background: none;
575 776 padding: 0;
576 777 margin: 0;
577 - cursor: var(--wpds-cursor-control, pointer);
778 + cursor: pointer;
578 779 justify-content: center;
579 780 align-items: center;
580 781 display: flex;
581 782 position: relative;
@@ -631,12 +832,10 @@
631 832 border-radius: 2px;
632 833 background: none;
633 834 padding: 0;
634 835 margin: 0;
635 - cursor: var(--wpds-cursor-control, pointer);
636 - -webkit-appearance: none;
637 - -moz-appearance: none;
638 - appearance: none;
836 + cursor: pointer;
837 + appearance: none;
639 838 display: inline-flex;
640 839 align-items: center;
641 840 justify-content: center;
642 841 position: relative;
@@ -647,9 +846,9 @@
647 846 .components-calendar__button-next:disabled, .components-calendar__button-next[aria-disabled=true],
648 847 .components-calendar__button-previous:disabled,
649 848 .components-calendar__button-previous[aria-disabled=true] {
650 849 cursor: revert;
651 - color: var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
850 + color: var(--wp-components-color-gray-600, #949494);
652 851 }
653 852 .components-calendar__button-next:focus-visible,
654 853 .components-calendar__button-previous:focus-visible {
655 854 outline: var(--wp-admin-border-width-focus) solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -680,9 +879,8 @@
680 879 display: flex;
681 880 justify-content: center;
682 881 flex-wrap: wrap;
683 882 gap: 16px;
684 - max-width: -moz-fit-content;
685 883 max-width: fit-content;
686 884 }
687 885
688 886 .components-calendar__month-grid {
@@ -704,9 +902,9 @@
704 902 .components-calendar__weekday {
705 903 width: 32px;
706 904 height: 32px;
707 905 padding: 0;
708 - color: var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
906 + color: var(--wp-components-color-gray-700, #757575);
709 907 text-align: center;
710 908 text-transform: uppercase;
711 909 }
712 910
@@ -724,25 +922,21 @@
724 922 }
725 923
726 924 .components-calendar__day--selected:not(.components-calendar__range-middle):has(.components-calendar__day-button,
727 925 .components-calendar__day-button:hover:not(:disabled)) {
728 - color: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc));
926 + color: var(--wp-components-color-foreground-inverted, #fff);
729 927 }
730 928 .components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button::before {
731 - background-color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
929 + background-color: var(--wp-components-color-foreground, #1e1e1e);
732 930 border: 1px solid transparent;
733 931 }
734 932 .components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:disabled::before {
735 - background-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
933 + background-color: var(--wp-components-color-gray-600, #949494);
736 934 }
737 935 .components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:hover:not(:disabled)::before {
738 - background-color: var(--wp-components-color-gray-800, var(--wpds-color-foreground-content-neutral, #1e1e1e));
936 + background-color: var(--wp-components-color-gray-800, #2f2f2f);
739 937 }
740 938
741 -.components-calendar__day--outside {
742 - color: var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
743 -}
744 -
745 939 .components-calendar__day--hidden {
746 940 visibility: hidden;
747 941 }
748 942
@@ -918,12 +1112,10 @@
918 1112 }
919 1113
920 1114 .components-checkbox-control__label {
921 1115 line-height: var(--checkbox-input-size);
1116 + cursor: pointer;
922 1117 }
923 -.components-checkbox-control:not(:has(:disabled)) .components-checkbox-control__label {
924 - cursor: var(--wpds-cursor-control, pointer);
925 -}
926 1118
927 1119 .components-checkbox-control__input[type=checkbox] {
928 1120 border: 1px solid #1e1e1e;
929 1121 margin-left: 12px;
@@ -928,9 +1120,9 @@
928 1120 border: 1px solid #1e1e1e;
929 1121 margin-left: 12px;
930 1122 transition: none;
931 1123 border-radius: 2px;
932 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1124 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
933 1125 padding: 6px 8px;
934 1126 /* Fonts smaller than 16px causes mobile safari to zoom. */
935 1127 font-size: 16px;
936 1128 /* Override core line-height. To be reviewed. */
@@ -955,11 +1147,8 @@
955 1147 border-color: var(--wp-admin-theme-color);
956 1148 box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
957 1149 outline: 2px solid transparent;
958 1150 }
959 -.components-checkbox-control__input[type=checkbox]::-moz-placeholder {
960 - color: rgba(30, 30, 30, 0.62);
961 -}
962 1151 .components-checkbox-control__input[type=checkbox]::placeholder {
963 1152 color: rgba(30, 30, 30, 0.62);
964 1153 }
965 1154 .components-checkbox-control__input[type=checkbox]:focus {
@@ -1010,8 +1199,9 @@
1010 1199 .components-checkbox-control__input[type=checkbox] {
1011 1200 background: #fff;
1012 1201 color: #1e1e1e;
1013 1202 clear: none;
1203 + cursor: pointer;
1014 1204 display: inline-block;
1015 1205 line-height: 0;
1016 1206 margin: 0 0 0 4px;
1017 1207 outline: 0;
@@ -1019,11 +1209,9 @@
1019 1209 text-align: center;
1020 1210 vertical-align: top;
1021 1211 width: var(--checkbox-input-size);
1022 1212 height: var(--checkbox-input-size);
1023 - -webkit-appearance: none;
1024 - -moz-appearance: none;
1025 - appearance: none;
1213 + appearance: none;
1026 1214 }
1027 1215 @media not (prefers-reduced-motion) {
1028 1216 .components-checkbox-control__input[type=checkbox] {
1029 1217 transition: 0.1s border-color ease-in-out;
@@ -1033,15 +1221,12 @@
1033 1221 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
1034 1222 outline: 2px solid transparent;
1035 1223 outline-offset: 2px;
1036 1224 }
1037 -.components-checkbox-control__input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
1225 +.components-checkbox-control__input[type=checkbox]:checked, .components-checkbox-control__input[type=checkbox]:indeterminate {
1038 1226 background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1039 1227 border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1040 1228 }
1041 -.components-checkbox-control__input[type=checkbox]:not(:disabled) {
1042 - cursor: var(--wpds-cursor-control, pointer);
1043 -}
1044 1229 .components-checkbox-control__input[type=checkbox]:checked::before {
1045 1230 content: none;
1046 1231 }
1047 1232
@@ -1059,9 +1244,9 @@
1059 1244 svg.components-checkbox-control__checked,
1060 1245 svg.components-checkbox-control__indeterminate {
1061 1246 --checkmark-size: var(--checkbox-input-size);
1062 1247 fill: #fff;
1063 - cursor: var(--wpds-cursor-control, pointer);
1248 + cursor: pointer;
1064 1249 position: absolute;
1065 1250 right: 50%;
1066 1251 top: 50%;
1067 1252 transform: translate(50%, -50%);
@@ -1067,9 +1252,8 @@
1067 1252 transform: translate(50%, -50%);
1068 1253 width: var(--checkmark-size);
1069 1254 height: var(--checkmark-size);
1070 1255 -webkit-user-select: none;
1071 - -moz-user-select: none;
1072 1256 user-select: none;
1073 1257 pointer-events: none;
1074 1258 }
1075 1259 @media (min-width: 600px) {
@@ -1078,13 +1262,8 @@
1078 1262 --checkmark-size: calc(var(--checkbox-input-size) + 4px);
1079 1263 }
1080 1264 }
1081 1265
1082 -.components-checkbox-control:has(:disabled) svg.components-checkbox-control__checked,
1083 -.components-checkbox-control:has(:disabled) svg.components-checkbox-control__indeterminate {
1084 - fill: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1085 -}
1086 -
1087 1266 .components-checkbox-control__help {
1088 1267 display: inline-block;
1089 1268 margin-inline-start: calc(var(--checkbox-input-size) + var(--checkbox-input-margin));
1090 1269 }
@@ -1092,9 +1271,8 @@
1092 1271 .components-circular-option-picker {
1093 1272 display: inline-block;
1094 1273 width: 100%;
1095 1274 min-width: 188px;
1096 - isolation: isolate;
1097 1275 }
1098 1276 .components-circular-option-picker .components-circular-option-picker__custom-clear-wrapper {
1099 1277 display: flex;
1100 1278 justify-content: flex-end;
@@ -1141,8 +1319,9 @@
1141 1319 bottom: 1px;
1142 1320 left: 1px;
1143 1321 border-radius: 50%;
1144 1322 z-index: -1;
1323 + /* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
1145 1324 background: url('data:image/svg+xml,%3Csvg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6 8V6H4v2h2zM8 8V6h2v2H8zM10 16H8v-2h2v2zM12 16v-2h2v2h-2zM12 18v-2h-2v2H8v2h2v-2h2zM14 18v2h-2v-2h2zM16 18h-2v-2h2v2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2v2zm-2-4v-2h2v2h-2z" fill="%23555D65"/%3E%3Cpath d="M18 18v2h-2v-2h2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M8 10V8H6v2H4v2h2v2H4v2h2v2H4v2h2v2H4v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2v2h-2V4h-2v2h-2V4h-2v2h-2V4h-2v2h2v2h-2v2H8zm0 2v-2H6v2h2zm2 0v-2h2v2h-2zm0 2v-2H8v2H6v2h2v2H6v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2V6h-2v2h-2v2h2v2h-2v2h-2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4 0H2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2H8V0H6v2H4V0zm0 4V2H2v2h2zm2 0V2h2v2H6zm0 2V4H4v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2H8v2H6z" fill="%23555D65"/%3E%3C/svg%3E');
1146 1325 }
1147 1326
1148 1327 .components-circular-option-picker__option {
@@ -1160,9 +1339,9 @@
1160 1339 transition: 100ms box-shadow ease;
1161 1340 }
1162 1341 }
1163 1342 .components-circular-option-picker__option {
1164 - cursor: var(--wpds-cursor-control, pointer);
1343 + cursor: pointer;
1165 1344 }
1166 1345 .components-circular-option-picker__option:hover {
1167 1346 box-shadow: inset 0 0 0 14px !important;
1168 1347 }
@@ -1254,10 +1433,10 @@
1254 1433 padding: 2px;
1255 1434 margin: 0;
1256 1435 line-height: inherit;
1257 1436 min-height: auto;
1258 - background: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
1259 - color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
1437 + background: var(--wp-components-color-background, #fff);
1438 + color: var(--wp-components-color-foreground, #1e1e1e);
1260 1439 }
1261 1440 @media (min-width: 600px) {
1262 1441 input.components-combobox-control__input[type=text] {
1263 1442 font-size: 13px;
@@ -1268,9 +1447,9 @@
1268 1447 box-shadow: none;
1269 1448 }
1270 1449
1271 1450 .components-combobox-control__suggestions-container {
1272 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1451 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1273 1452 padding: 6px 8px;
1274 1453 /* Fonts smaller than 16px causes mobile safari to zoom. */
1275 1454 font-size: 16px;
1276 1455 /* Override core line-height. To be reviewed. */
@@ -1295,11 +1474,8 @@
1295 1474 border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1296 1475 box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1297 1476 outline: 2px solid transparent;
1298 1477 }
1299 -.components-combobox-control__suggestions-container::-moz-placeholder {
1300 - color: rgba(30, 30, 30, 0.62);
1301 -}
1302 1478 .components-combobox-control__suggestions-container::placeholder {
1303 1479 color: rgba(30, 30, 30, 0.62);
1304 1480 }
1305 1481 .components-combobox-control__suggestions-container {
@@ -1329,9 +1505,9 @@
1329 1505 background: none;
1330 1506 height: 64px;
1331 1507 width: 100%;
1332 1508 box-sizing: border-box;
1333 - cursor: var(--wpds-cursor-control, pointer);
1509 + cursor: pointer;
1334 1510 outline: 1px solid transparent;
1335 1511 border-radius: 4px 4px 0 0;
1336 1512 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
1337 1513 }
@@ -1358,9 +1534,9 @@
1358 1534 box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2), inset -1px 0 0 0 rgba(0, 0, 0, 0.2), inset 1px 0 0 0 rgba(0, 0, 0, 0.2);
1359 1535 }
1360 1536
1361 1537 .components-color-palette__custom-color-name {
1362 - color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
1538 + color: var(--wp-components-color-foreground, #1e1e1e);
1363 1539 margin: 0 1px;
1364 1540 }
1365 1541
1366 1542 .components-color-palette__custom-color-value {
@@ -1449,8 +1625,28 @@
1449 1625 position: relative;
1450 1626 z-index: 0;
1451 1627 }
1452 1628
1629 +body.is-dragging-components-draggable {
1630 + cursor: move; /* Fallback for IE/Edge < 14 */
1631 + cursor: grabbing !important;
1632 +}
1633 +
1634 +.components-draggable__invisible-drag-image {
1635 + position: fixed;
1636 + right: -1000px;
1637 + height: 50px;
1638 + width: 50px;
1639 +}
1640 +
1641 +.components-draggable__clone {
1642 + position: fixed;
1643 + padding: 0;
1644 + background: transparent;
1645 + pointer-events: none;
1646 + z-index: 1000000000;
1647 +}
1648 +
1453 1649 .components-drop-zone {
1454 1650 position: absolute;
1455 1651 top: 0;
1456 1652 left: 0;
@@ -1517,9 +1713,9 @@
1517 1713 pointer-events: none;
1518 1714 }
1519 1715
1520 1716 .components-drop-zone__content-text {
1521 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1717 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1522 1718 font-size: 13px;
1523 1719 }
1524 1720
1525 1721 .components-dropdown {
@@ -1556,9 +1752,9 @@
1556 1752 }
1557 1753
1558 1754 .components-dropdown-menu__menu {
1559 1755 width: 100%;
1560 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1756 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1561 1757 font-size: 13px;
1562 1758 line-height: 1.4;
1563 1759 }
1564 1760 .components-dropdown-menu__menu .components-dropdown-menu__menu-item,
@@ -1565,11 +1761,11 @@
1565 1761 .components-dropdown-menu__menu .components-menu-item {
1566 1762 width: 100%;
1567 1763 padding: 6px;
1568 1764 outline: none;
1569 - cursor: var(--wpds-cursor-control, pointer);
1765 + cursor: pointer;
1570 1766 white-space: nowrap;
1571 - font-weight: var(--wpds-typography-font-weight-default, 400);
1767 + font-weight: 400;
1572 1768 }
1573 1769 .components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator,
1574 1770 .components-dropdown-menu__menu .components-menu-item.has-separator {
1575 1771 margin-top: 6px;
@@ -1580,9 +1776,9 @@
1580 1776 .components-dropdown-menu__menu .components-menu-item.has-separator::before {
1581 1777 display: block;
1582 1778 content: "";
1583 1779 box-sizing: content-box;
1584 - background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
1780 + background-color: #ddd;
1585 1781 position: absolute;
1586 1782 top: -3px;
1587 1783 right: 0;
1588 1784 left: 0;
@@ -1642,48 +1838,22 @@
1642 1838 margin: 2px;
1643 1839 }
1644 1840
1645 1841 .components-external-link {
1646 - color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1647 1842 text-decoration: none;
1648 1843 }
1649 -@media not (prefers-reduced-motion) {
1650 - .components-external-link {
1651 - transition: outline 0.1s ease-out;
1652 - }
1653 -}
1654 -.components-external-link {
1655 - outline: 0 solid transparent;
1656 - outline-offset: 1px;
1657 -}
1658 -.components-external-link:visited {
1659 - color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1660 -}
1661 -.components-external-link:hover, .components-external-link:active {
1662 - color: var(--wpds-color-foreground-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 52%, black));
1663 -}
1664 -.components-external-link:focus {
1665 - 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));
1666 - box-shadow: none;
1667 - border-radius: 0;
1668 -}
1669 1844
1670 1845 .components-external-link__contents {
1671 1846 text-decoration: underline;
1672 - text-underline-offset: 0.2em;
1673 - text-decoration-thickness: from-font;
1674 1847 }
1675 1848
1676 1849 .components-external-link__icon {
1677 - line-height: 1;
1678 - display: inline-block;
1679 - margin-inline-start: var(--wpds-dimension-padding-xs, 4px);
1680 - font-weight: var(--wpds-typography-font-weight-default, 400);
1850 + margin-right: 0.5ch;
1851 + font-weight: 400;
1681 1852 }
1682 1853
1683 1854 .components-form-toggle {
1684 1855 position: relative;
1685 - isolation: isolate;
1686 1856 display: inline-block;
1687 1857 height: 16px;
1688 1858 }
1689 1859 .components-form-toggle .components-form-toggle__track {
@@ -1757,41 +1927,11 @@
1757 1927 background-color: #fff;
1758 1928 border-width: 0;
1759 1929 transform: translateX(-16px);
1760 1930 }
1761 -.components-form-toggle.is-disabled .components-form-toggle__track, .components-disabled .components-form-toggle .components-form-toggle__track {
1762 - background-color: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
1763 - border-color: var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
1931 +.components-form-toggle.is-disabled, .components-disabled .components-form-toggle {
1932 + opacity: 0.3;
1764 1933 }
1765 -@media (forced-colors: active) {
1766 - .components-form-toggle.is-disabled .components-form-toggle__track, .components-disabled .components-form-toggle .components-form-toggle__track {
1767 - border-color: GrayText;
1768 - }
1769 -}
1770 -.components-form-toggle.is-disabled .components-form-toggle__thumb, .components-disabled .components-form-toggle .components-form-toggle__thumb {
1771 - background-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1772 - box-shadow: none;
1773 -}
1774 -@media (forced-colors: active) {
1775 - .components-form-toggle.is-disabled .components-form-toggle__thumb, .components-disabled .components-form-toggle .components-form-toggle__thumb {
1776 - border-color: GrayText;
1777 - }
1778 -}
1779 -.components-form-toggle.is-disabled.is-checked .components-form-toggle__track, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track {
1780 - background-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1781 - border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1782 -}
1783 -@media (forced-colors: active) {
1784 - .components-form-toggle.is-disabled.is-checked .components-form-toggle__track, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track {
1785 - border-color: GrayText;
1786 - }
1787 - .components-form-toggle.is-disabled.is-checked .components-form-toggle__track::after, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track::after {
1788 - border-top-color: GrayText;
1789 - }
1790 -}
1791 -.components-form-toggle.is-disabled.is-checked .components-form-toggle__thumb, .components-disabled .components-form-toggle.is-checked .components-form-toggle__thumb {
1792 - background-color: #fff;
1793 -}
1794 1934
1795 1935 .components-form-toggle input.components-form-toggle__input[type=checkbox] {
1796 1936 position: absolute;
1797 1937 top: 0;
@@ -1810,13 +1950,13 @@
1810 1950 .components-form-toggle input.components-form-toggle__input[type=checkbox]::before {
1811 1951 content: "";
1812 1952 }
1813 1953 .components-form-toggle input.components-form-toggle__input[type=checkbox]:not(:disabled, [aria-disabled=true]) {
1814 - cursor: var(--wpds-cursor-control, pointer);
1954 + cursor: pointer;
1815 1955 }
1816 1956
1817 1957 .components-form-token-field__input-container {
1818 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1958 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1819 1959 padding: 6px 8px;
1820 1960 /* Fonts smaller than 16px causes mobile safari to zoom. */
1821 1961 font-size: 16px;
1822 1962 /* Override core line-height. To be reviewed. */
@@ -1841,11 +1981,8 @@
1841 1981 border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1842 1982 box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1843 1983 outline: 2px solid transparent;
1844 1984 }
1845 -.components-form-token-field__input-container::-moz-placeholder {
1846 - color: rgba(30, 30, 30, 0.62);
1847 -}
1848 1985 .components-form-token-field__input-container::placeholder {
1849 1986 color: rgba(30, 30, 30, 0.62);
1850 1987 }
1851 1988 .components-form-token-field__input-container {
@@ -1853,11 +1990,10 @@
1853 1990 padding: 0;
1854 1991 cursor: text;
1855 1992 }
1856 1993 .components-form-token-field__input-container.is-disabled {
1857 - background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
1858 - border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1859 - cursor: default;
1994 + background: #ddd;
1995 + border-color: #ddd;
1860 1996 }
1861 1997 .components-form-token-field__input-container.is-active {
1862 1998 border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1863 1999 box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -1876,9 +2012,9 @@
1876 2012 min-height: 24px;
1877 2013 min-width: 50px;
1878 2014 background: inherit;
1879 2015 border: 0;
1880 - color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
2016 + color: var(--wp-components-color-foreground, #1e1e1e);
1881 2017 box-shadow: none;
1882 2018 }
1883 2019 @media (min-width: 600px) {
1884 2020 .components-form-token-field__input-container input[type=text].components-form-token-field__input {
@@ -1910,13 +2046,8 @@
1910 2046 .components-form-token-field__token.is-validating .components-form-token-field__token-text,
1911 2047 .components-form-token-field__token.is-validating .components-form-token-field__remove-token {
1912 2048 color: #757575;
1913 2049 }
1914 -.components-form-token-field__token.is-disabled .components-form-token-field__token-text,
1915 -.components-form-token-field__token.is-disabled .components-form-token-field__remove-token.components-button {
1916 - background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
1917 - color: var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1918 -}
1919 2050 .components-form-token-field__token.is-borderless {
1920 2051 position: relative;
1921 2052 padding: 0 0 0 24px;
1922 2053 }
@@ -1995,9 +2126,9 @@
1995 2126 padding: 0;
1996 2127 }
1997 2128
1998 2129 .components-form-token-field__suggestion {
1999 - color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
2130 + color: var(--wp-components-color-foreground, #1e1e1e);
2000 2131 display: block;
2001 2132 font-size: 13px;
2002 2133 padding: 8px 12px;
2003 2134 min-height: 32px;
@@ -2005,9 +2136,9 @@
2005 2136 box-sizing: border-box;
2006 2137 }
2007 2138 .components-form-token-field__suggestion.is-selected {
2008 2139 background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
2009 - color: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc));
2140 + color: var(--wp-components-color-foreground-inverted, #fff);
2010 2141 }
2011 2142 .components-form-token-field__suggestion[aria-disabled=true] {
2012 2143 pointer-events: none;
2013 2144 color: #949494;
@@ -2015,9 +2146,9 @@
2015 2146 .components-form-token-field__suggestion[aria-disabled=true].is-selected {
2016 2147 background: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, transparent);
2017 2148 }
2018 2149 .components-form-token-field__suggestion:not(.is-empty) {
2019 - cursor: var(--wpds-cursor-control, pointer);
2150 + cursor: pointer;
2020 2151 }
2021 2152
2022 2153 @media (min-width: 600px) {
2023 2154 .components-guide {
@@ -2122,9 +2253,8 @@
2122 2253 outline-color: var(--wp-admin-theme-color);
2123 2254 outline-style: solid;
2124 2255 outline-width: calc(2 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
2125 2256 outline-offset: calc(2 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
2126 - box-shadow: inset 0 0 0 calc(2 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1) + 0.5px) rgba(255, 255, 255, 0.7);
2127 2257 z-index: 1000000;
2128 2258 }
2129 2259
2130 2260 .is-focusing-regions [role=region]:focus::after {
@@ -2138,9 +2268,8 @@
2138 2268 outline-color: var(--wp-admin-theme-color);
2139 2269 outline-style: solid;
2140 2270 outline-width: calc(2 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
2141 2271 outline-offset: calc(2 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
2142 - box-shadow: inset 0 0 0 calc(2 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1) + 0.5px) rgba(255, 255, 255, 0.7);
2143 2272 z-index: 1000000;
2144 2273 }
2145 2274 .is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
2146 2275 .is-focusing-regions .interface-interface-skeleton__sidebar .editor-layout__toggle-sidebar-panel,
@@ -2150,9 +2279,8 @@
2150 2279 outline-color: var(--wp-admin-theme-color);
2151 2280 outline-style: solid;
2152 2281 outline-width: calc(2 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
2153 2282 outline-offset: calc(2 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
2154 - box-shadow: inset 0 0 0 calc(2 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1) + 0.5px) rgba(255, 255, 255, 0.7);
2155 2283 }
2156 2284
2157 2285 .components-menu-group + .components-menu-group {
2158 2286 padding-top: 8px;
@@ -2174,9 +2302,9 @@
2174 2302 margin-bottom: 12px;
2175 2303 color: #757575;
2176 2304 text-transform: uppercase;
2177 2305 font-size: 11px;
2178 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2306 + font-weight: 499;
2179 2307 white-space: nowrap;
2180 2308 }
2181 2309
2182 2310 .components-menu-item__button,
@@ -2181,9 +2309,9 @@
2181 2309
2182 2310 .components-menu-item__button,
2183 2311 .components-menu-item__button.components-button {
2184 2312 width: 100%;
2185 - font-weight: var(--wpds-typography-font-weight-default, 400);
2313 + font-weight: 400;
2186 2314 }
2187 2315 .components-menu-item__button[role=menuitemradio] .components-menu-item__item:only-child, .components-menu-item__button[role=menuitemcheckbox] .components-menu-item__item:only-child,
2188 2316 .components-menu-item__button.components-button[role=menuitemradio] .components-menu-item__item:only-child,
2189 2317 .components-menu-item__button.components-button[role=menuitemcheckbox] .components-menu-item__item:only-child {
@@ -2293,9 +2421,9 @@
2293 2421 }
2294 2422 }
2295 2423 @media not (prefers-reduced-motion) {
2296 2424 .components-modal__screen-overlay {
2297 - animation: __wp-base-styles-fade-in var(--wpds-motion-duration-sm, 100ms) var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1)) 0s;
2425 + animation: __wp-base-styles-fade-in 0.08s linear 0s;
2298 2426 animation-fill-mode: forwards;
2299 2427 }
2300 2428 }
2301 2429 @keyframes __wp-base-styles-fade-out {
@@ -2307,9 +2435,9 @@
2307 2435 }
2308 2436 }
2309 2437 @media not (prefers-reduced-motion) {
2310 2438 .components-modal__screen-overlay.is-animating-out {
2311 - animation: __wp-base-styles-fade-out var(--wpds-motion-duration-sm, 100ms) var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1)) var(--wpds-motion-duration-xs, 50ms);
2439 + animation: __wp-base-styles-fade-out 0.08s linear 80ms;
2312 2440 animation-fill-mode: forwards;
2313 2441 }
2314 2442 }
2315 2443
@@ -2321,12 +2449,10 @@
2321 2449 .components-modal__frame *::after {
2322 2450 box-sizing: inherit;
2323 2451 }
2324 2452 .components-modal__frame {
2325 - align-self: flex-end;
2326 - margin: 0;
2453 + margin: 40px 0 0 0;
2327 2454 width: 100%;
2328 - max-height: calc(100% - 40px);
2329 2455 background: #fff;
2330 2456 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02);
2331 2457 border-radius: 8px 8px 0 0;
2332 2458 overflow: hidden;
@@ -2333,9 +2459,9 @@
2333 2459 display: flex;
2334 2460 color: #1e1e1e;
2335 2461 animation-name: components-modal__appear-animation;
2336 2462 animation-fill-mode: forwards;
2337 - animation-timing-function: var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1));
2463 + animation-timing-function: cubic-bezier(0.29, 0, 0, 1);
2338 2464 }
2339 2465 .components-modal__frame h1,
2340 2466 .components-modal__frame h2,
2341 2467 .components-modal__frame h3 {
@@ -2342,36 +2468,51 @@
2342 2468 color: #1e1e1e;
2343 2469 }
2344 2470 @media not (prefers-reduced-motion) {
2345 2471 .components-modal__frame {
2346 - animation-duration: var(--wpds-motion-duration-md, 200ms);
2472 + animation-duration: var(--modal-frame-animation-duration);
2347 2473 }
2348 2474 }
2349 2475 .components-modal__screen-overlay.is-animating-out .components-modal__frame {
2350 2476 animation-name: components-modal__disappear-animation;
2351 - animation-timing-function: var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1));
2477 + animation-timing-function: cubic-bezier(1, 0, 0.2, 1);
2352 2478 }
2353 2479 @media (min-width: 600px) {
2354 2480 .components-modal__frame {
2355 - align-self: auto;
2356 2481 border-radius: 8px;
2357 2482 margin: auto;
2358 2483 width: auto;
2359 - min-width: var(--wpds-dimension-surface-width-sm, 320px);
2484 + min-width: 350px;
2360 2485 max-width: calc(100% - 32px);
2361 2486 max-height: calc(100% - 128px);
2362 2487 }
2488 +}
2489 +@media (min-width: 600px) and (min-width: 600px) {
2490 + .components-modal__frame.is-full-screen {
2491 + width: calc(100% - 32px);
2492 + height: calc(100% - 32px);
2493 + max-height: none;
2494 + }
2495 +}
2496 +@media (min-width: 600px) and (min-width: 782px) {
2497 + .components-modal__frame.is-full-screen {
2498 + width: calc(100% - 80px);
2499 + height: calc(100% - 80px);
2500 + max-width: none;
2501 + }
2502 +}
2503 +@media (min-width: 600px) {
2363 2504 .components-modal__frame.has-size-small, .components-modal__frame.has-size-medium, .components-modal__frame.has-size-large {
2364 2505 width: 100%;
2365 2506 }
2366 2507 .components-modal__frame.has-size-small {
2367 - max-width: var(--wpds-dimension-surface-width-md, 400px);
2508 + max-width: 384px;
2368 2509 }
2369 2510 .components-modal__frame.has-size-medium {
2370 - max-width: var(--wpds-dimension-surface-width-lg, 560px);
2511 + max-width: 512px;
2371 2512 }
2372 2513 .components-modal__frame.has-size-large {
2373 - max-width: var(--wpds-dimension-surface-width-2xl, 960px);
2514 + max-width: 840px;
2374 2515 }
2375 2516 }
2376 2517 @media (min-width: 960px) {
2377 2518 .components-modal__frame {
@@ -2377,15 +2518,8 @@
2377 2518 .components-modal__frame {
2378 2519 max-height: 70%;
2379 2520 }
2380 2521 }
2381 -.components-modal__frame.is-full-screen {
2382 - margin: 0;
2383 - width: 100%;
2384 - height: 100%;
2385 - max-height: none;
2386 - border-radius: 0;
2387 -}
2388 2522 .components-modal__frame.is-full-screen :where(.components-modal__content) {
2389 2523 display: flex;
2390 2524 margin-bottom: 24px;
2391 2525 padding-bottom: 0;
@@ -2392,66 +2526,29 @@
2392 2526 }
2393 2527 .components-modal__frame.is-full-screen :where(.components-modal__content) > :last-child {
2394 2528 flex: 1;
2395 2529 }
2396 -@media (min-width: 600px) {
2397 - .components-modal__frame.is-full-screen {
2398 - margin: auto;
2399 - border-radius: 8px;
2400 - width: calc(100% - 32px);
2401 - height: calc(100% - 32px);
2402 - }
2403 -}
2404 -@media (min-width: 782px) {
2405 - .components-modal__frame.is-full-screen {
2406 - width: calc(100% - 80px);
2407 - height: calc(100% - 80px);
2408 - max-width: none;
2409 - }
2410 -}
2411 2530
2412 2531 @keyframes components-modal__appear-animation {
2413 2532 from {
2414 2533 opacity: 0;
2415 - transform: translateY(100%);
2534 + transform: scale(0.9);
2416 2535 }
2417 2536 to {
2418 2537 opacity: 1;
2419 - transform: translateY(0);
2538 + transform: scale(1);
2420 2539 }
2421 2540 }
2422 2541 @keyframes components-modal__disappear-animation {
2423 2542 from {
2424 2543 opacity: 1;
2425 - transform: translateY(0);
2544 + transform: scale(1);
2426 2545 }
2427 2546 to {
2428 2547 opacity: 0;
2429 - transform: translateY(100%);
2548 + transform: scale(0.9);
2430 2549 }
2431 2550 }
2432 -@media (min-width: 600px) {
2433 - @keyframes components-modal__appear-animation {
2434 - from {
2435 - opacity: 0;
2436 - transform: scale(0.9);
2437 - }
2438 - to {
2439 - opacity: 1;
2440 - transform: scale(1);
2441 - }
2442 - }
2443 - @keyframes components-modal__disappear-animation {
2444 - from {
2445 - opacity: 1;
2446 - transform: scale(1);
2447 - }
2448 - to {
2449 - opacity: 0;
2450 - transform: scale(0.9);
2451 - }
2452 - }
2453 -}
2454 2551 .components-modal__header {
2455 2552 box-sizing: border-box;
2456 2553 border-bottom: 1px solid transparent;
2457 2554 padding: 24px;
@@ -2467,9 +2564,9 @@
2467 2564 right: 0;
2468 2565 }
2469 2566 .components-modal__header .components-modal__header-heading {
2470 2567 font-size: 20px;
2471 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2568 + font-weight: 600;
2472 2569 }
2473 2570 .components-modal__header h1 {
2474 2571 line-height: 1;
2475 2572 margin: 0;
@@ -2474,9 +2571,9 @@
2474 2571 line-height: 1;
2475 2572 margin: 0;
2476 2573 }
2477 2574 .components-modal__content.has-scrolled-content:not(.hide-header) .components-modal__header {
2478 - border-bottom-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2575 + border-bottom-color: #ddd;
2479 2576 }
2480 2577 .components-modal__header + p {
2481 2578 margin-top: 0;
2482 2579 }
@@ -2514,64 +2611,57 @@
2514 2611 outline-offset: -2px;
2515 2612 }
2516 2613
2517 2614 .components-notice {
2518 - --wp-components-notice-background-color: var(--wpds-color-background-surface-info-weak, #f3f9ff);
2519 - --wp-components-notice-border-color: var(--wpds-color-stroke-surface-info, #a9c6e7);
2520 - --wp-components-notice-text-color: var(--wpds-color-foreground-content-info, #001b4f);
2521 - box-sizing: border-box;
2522 - display: grid;
2523 - grid-template-columns: 1fr auto;
2524 - align-items: start;
2525 - padding: var(--wpds-dimension-padding-md, 12px);
2526 - border: var(--wpds-border-width-xs, 1px) solid var(--wp-components-notice-border-color);
2527 - border-radius: var(--wpds-border-radius-lg, 8px);
2528 - background-color: var(--wp-components-notice-background-color);
2529 - color: var(--wp-components-notice-text-color);
2530 - font-family: var(--wpds-typography-font-family-body, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif);
2531 - font-size: var(--wpds-typography-font-size-md, 13px);
2532 - line-height: var(--wpds-typography-line-height-sm, 20px);
2615 + display: flex;
2616 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2617 + font-size: 13px;
2618 + background-color: #fff;
2619 + border-right: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
2620 + padding: 8px 12px;
2621 + align-items: center;
2622 + color: #1e1e1e;
2533 2623 }
2624 +.components-notice.is-dismissible {
2625 + position: relative;
2626 +}
2627 +.components-notice.is-dismissible .components-notice__content {
2628 + margin-left: 25px;
2629 +}
2534 2630 .components-notice.is-success {
2535 - --wp-components-notice-background-color: var(--wpds-color-background-surface-success-weak, #ebffed);
2536 - --wp-components-notice-border-color: var(--wpds-color-stroke-surface-success, #94d29e);
2537 - --wp-components-notice-text-color: var(--wpds-color-foreground-content-success, #002900);
2631 + border-right-color: #4ab866;
2632 + background-color: rgb(238.8392857143, 248.6607142857, 241.3392857143);
2538 2633 }
2539 2634 .components-notice.is-warning {
2540 - --wp-components-notice-background-color: var(--wpds-color-background-surface-warning-weak, #fff7e1);
2541 - --wp-components-notice-border-color: var(--wpds-color-stroke-surface-warning, #e1bc7c);
2542 - --wp-components-notice-text-color: var(--wpds-color-foreground-content-warning, #2e1900);
2635 + border-right-color: #f0b849;
2636 + background-color: rgb(253.5913705584, 248.3324873096, 237.9086294416);
2543 2637 }
2544 2638 .components-notice.is-error {
2545 - --wp-components-notice-background-color: var(--wpds-color-background-surface-error-weak, #fff6f5);
2546 - --wp-components-notice-border-color: var(--wpds-color-stroke-surface-error, #dab1aa);
2547 - --wp-components-notice-text-color: var(--wpds-color-foreground-content-error, #470000);
2639 + border-right-color: #cc1818;
2640 + background-color: rgb(244.1052631579, 162.3947368421, 162.3947368421);
2548 2641 }
2549 2642
2550 2643 .components-notice__content {
2551 - grid-column: 1;
2552 - grid-row: 1;
2553 - padding-block: calc((var(--wpds-dimension-size-sm, 24px) - 1lh) / 2);
2644 + flex-grow: 1;
2645 + margin-top: 4px;
2646 + margin-bottom: 4px;
2554 2647 }
2555 2648
2556 2649 .components-notice__actions {
2557 - grid-column: 1;
2558 - grid-row: 2;
2559 2650 display: flex;
2560 2651 flex-wrap: wrap;
2561 2652 align-items: center;
2562 - gap: var(--wpds-dimension-gap-md, 12px);
2563 - margin-top: var(--wpds-dimension-gap-sm, 8px);
2653 + gap: 12px;
2654 + margin-top: 12px;
2564 2655 }
2565 2656
2566 2657 .components-notice__dismiss {
2567 - grid-column: 2;
2568 - grid-row: 1;
2569 - color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
2570 - margin-inline-start: var(--wpds-dimension-gap-xs, 4px);
2658 + color: #757575;
2659 + align-self: flex-start;
2660 + flex-shrink: 0;
2571 2661 }
2572 2662 .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 {
2573 - color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
2663 + color: #1e1e1e;
2574 2664 background-color: transparent;
2575 2665 }
2576 2666 .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
2577 2667 box-shadow: none;
@@ -2577,14 +2667,16 @@
2577 2667 box-shadow: none;
2578 2668 }
2579 2669
2580 2670 .components-notice-list {
2581 - display: flex;
2582 - flex-direction: column;
2583 - gap: var(--wpds-dimension-gap-md, 12px);
2584 2671 max-width: 100vw;
2585 2672 box-sizing: border-box;
2586 2673 }
2674 +.components-notice-list .components-notice__content {
2675 + margin-top: 12px;
2676 + margin-bottom: 12px;
2677 + line-height: 2;
2678 +}
2587 2679
2588 2680 .components-panel {
2589 2681 background: #fff;
2590 2682 border: 1px solid #e0e0e0;
@@ -2618,9 +2710,9 @@
2618 2710 flex-shrink: 0;
2619 2711 justify-content: space-between;
2620 2712 align-items: center;
2621 2713 padding: 0 16px;
2622 - border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2714 + border-bottom: 1px solid #ddd;
2623 2715 box-sizing: content-box;
2624 2716 height: 47px;
2625 2717 }
2626 2718 .components-panel__header h2 {
@@ -2661,12 +2753,15 @@
2661 2753
2662 2754 .components-panel__body-toggle.components-button {
2663 2755 position: relative;
2664 2756 padding: 16px 16px 16px 48px;
2757 + outline: none;
2665 2758 width: 100%;
2666 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2759 + font-weight: 499;
2667 2760 text-align: right;
2668 2761 color: #1e1e1e;
2762 + border: none;
2763 + box-shadow: none;
2669 2764 }
2670 2765 @media not (prefers-reduced-motion) {
2671 2766 .components-panel__body-toggle.components-button {
2672 2767 transition: 0.1s background ease-in-out;
@@ -2675,9 +2770,9 @@
2675 2770 .components-panel__body-toggle.components-button {
2676 2771 height: auto;
2677 2772 }
2678 2773 .components-panel__body-toggle.components-button:focus {
2679 - outline-offset: calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) * -1);
2774 + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
2680 2775 border-radius: 0;
2681 2776 }
2682 2777 .components-panel__body-toggle.components-button .components-panel__arrow {
2683 2778 position: absolute;
@@ -2761,9 +2856,9 @@
2761 2856 .components-placeholder__error,
2762 2857 .components-placeholder__instructions,
2763 2858 .components-placeholder__label,
2764 2859 .components-placeholder__fieldset {
2765 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2860 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2766 2861 font-size: 13px;
2767 2862 letter-spacing: initial;
2768 2863 line-height: initial;
2769 2864 text-transform: none;
@@ -2770,9 +2865,9 @@
2770 2865 font-weight: normal;
2771 2866 }
2772 2867
2773 2868 .components-placeholder__label {
2774 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2869 + font-weight: 600;
2775 2870 align-items: center;
2776 2871 display: flex;
2777 2872 }
2778 2873 .components-placeholder__label > svg,
@@ -2802,9 +2897,9 @@
2802 2897 justify-content: flex-start;
2803 2898 }
2804 2899 .components-placeholder__fieldset p,
2805 2900 .components-placeholder__fieldset form p {
2806 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2901 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2807 2902 font-size: 13px;
2808 2903 }
2809 2904
2810 2905 .components-placeholder__fieldset.is-column-layout,
@@ -2812,9 +2907,9 @@
2812 2907 flex-direction: column;
2813 2908 }
2814 2909
2815 2910 .components-placeholder__input[type=url] {
2816 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2911 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2817 2912 padding: 6px 8px;
2818 2913 /* Fonts smaller than 16px causes mobile safari to zoom. */
2819 2914 font-size: 16px;
2820 2915 /* Override core line-height. To be reviewed. */
@@ -2839,11 +2934,8 @@
2839 2934 border-color: var(--wp-admin-theme-color);
2840 2935 box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
2841 2936 outline: 2px solid transparent;
2842 2937 }
2843 -.components-placeholder__input[type=url]::-moz-placeholder {
2844 - color: rgba(30, 30, 30, 0.62);
2845 -}
2846 2938 .components-placeholder__input[type=url]::placeholder {
2847 2939 color: rgba(30, 30, 30, 0.62);
2848 2940 }
2849 2941 .components-placeholder__input[type=url] {
@@ -2979,9 +3071,8 @@
2979 3071 background: #fff;
2980 3072 box-shadow: 0 0 0 1px #ccc, 0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02);
2981 3073 border-radius: 4px;
2982 3074 box-sizing: border-box;
2983 - width: -moz-min-content;
2984 3075 width: min-content;
2985 3076 }
2986 3077 .is-alternate .components-popover__content {
2987 3078 box-shadow: 0 0 0 1px #1e1e1e;
@@ -3018,8 +3109,12 @@
3018 3109 white-space: nowrap;
3019 3110 width: 100%;
3020 3111 }
3021 3112
3113 +.components-popover__close.components-button {
3114 + z-index: 5;
3115 +}
3116 +
3022 3117 .components-popover__arrow {
3023 3118 position: absolute;
3024 3119 width: 14px;
3025 3120 height: 14px;
@@ -3074,9 +3169,9 @@
3074 3169 .components-radio-control {
3075 3170 border: 0;
3076 3171 margin: 0;
3077 3172 padding: 0;
3078 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3173 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3079 3174 font-size: 13px;
3080 3175 }
3081 3176
3082 3177 .components-radio-control__group-wrapper.has-help {
@@ -3086,10 +3181,9 @@
3086 3181 .components-radio-control__option {
3087 3182 display: grid;
3088 3183 grid-template-columns: auto 1fr;
3089 3184 grid-template-rows: auto minmax(0, max-content);
3090 - -moz-column-gap: 8px;
3091 - column-gap: 8px;
3185 + column-gap: 8px;
3092 3186 align-items: center;
3093 3187 }
3094 3188
3095 3189 .components-radio-control__input[type=radio] {
@@ -3147,15 +3241,11 @@
3147 3241 .components-radio-control__input[type=radio] {
3148 3242 display: inline-flex;
3149 3243 margin: 0;
3150 3244 padding: 0;
3151 - -webkit-appearance: none;
3152 - -moz-appearance: none;
3153 - appearance: none;
3245 + appearance: none;
3246 + cursor: pointer;
3154 3247 }
3155 -.components-radio-control__input[type=radio]:not(:disabled) {
3156 - cursor: var(--wpds-cursor-control, pointer);
3157 -}
3158 3248 .components-radio-control__input[type=radio]:focus {
3159 3249 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
3160 3250 outline: 2px solid transparent;
3161 3251 outline-offset: 2px;
@@ -3167,26 +3257,13 @@
3167 3257 .components-radio-control__input[type=radio]:checked::before {
3168 3258 content: "";
3169 3259 border-radius: 50%;
3170 3260 }
3171 -.components-radio-control__input[type=radio]:disabled {
3172 - background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
3173 - border: 1px solid var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
3174 - opacity: 1;
3175 -}
3176 -.components-radio-control__input[type=radio]:disabled:checked::before {
3177 - border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
3178 - opacity: 1;
3179 -}
3180 3261
3181 3262 .components-radio-control__label {
3182 3263 grid-column: 2;
3183 3264 grid-row: 1;
3184 -}
3185 -.components-radio-control:not(:disabled) .components-radio-control__label {
3186 - cursor: var(--wpds-cursor-control, pointer);
3187 -}
3188 -.components-radio-control__label {
3265 + cursor: pointer;
3189 3266 line-height: 24px;
3190 3267 }
3191 3268 @media (min-width: 600px) {
3192 3269 .components-radio-control__label {
@@ -3394,9 +3471,9 @@
3394 3471 -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
3395 3472 }
3396 3473
3397 3474 .components-snackbar {
3398 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3475 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3399 3476 font-size: 13px;
3400 3477 background: rgba(0, 0, 0, 0.85);
3401 3478 backdrop-filter: blur(16px) saturate(180%);
3402 3479 border-radius: 4px;
@@ -3403,16 +3480,15 @@
3403 3480 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
3404 3481 color: #fff;
3405 3482 padding: 12px 20px;
3406 3483 width: 100%;
3407 - max-width: var(--wpds-dimension-surface-width-lg, 560px);
3484 + max-width: 600px;
3408 3485 box-sizing: border-box;
3409 - cursor: var(--wpds-cursor-control, pointer);
3486 + cursor: pointer;
3410 3487 pointer-events: auto;
3411 3488 }
3412 3489 @media (min-width: 600px) {
3413 3490 .components-snackbar {
3414 - width: -moz-fit-content;
3415 3491 width: fit-content;
3416 3492 }
3417 3493 }
3418 3494 .components-snackbar:focus {
@@ -3431,9 +3507,9 @@
3431 3507 top: calc((5.8px) / -2);
3432 3508 }
3433 3509 .components-snackbar .components-snackbar__dismiss-button {
3434 3510 margin-right: 24px;
3435 - cursor: var(--wpds-cursor-control, pointer);
3511 + cursor: pointer;
3436 3512 }
3437 3513
3438 3514 .components-snackbar__action.components-button,
3439 3515 .components-snackbar__action.components-external-link {
@@ -3487,20 +3563,13 @@
3487 3563 height: 48px !important;
3488 3564 background: transparent;
3489 3565 border: none;
3490 3566 box-shadow: none;
3491 - cursor: var(--wpds-cursor-control, pointer);
3492 - padding: 3px var(--wpds-dimension-padding-lg, 16px);
3567 + cursor: pointer;
3568 + padding: 3px 16px;
3493 3569 margin-right: 0;
3494 - font-weight: var(--wpds-typography-font-weight-default, 400);
3495 - color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
3570 + font-weight: 400;
3496 3571 }
3497 -.components-tab-panel__tabs-item:disabled, .components-tab-panel__tabs-item[aria-disabled=true] {
3498 - color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
3499 -}
3500 -.components-tab-panel__tabs-item:not(:disabled, [aria-disabled=true]):is(:hover, :focus-visible) {
3501 - color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
3502 -}
3503 3572 .components-tab-panel__tabs-item:focus:not(:disabled) {
3504 3573 position: relative;
3505 3574 box-shadow: none;
3506 3575 outline: none;
@@ -3511,19 +3580,19 @@
3511 3580 left: 0;
3512 3581 bottom: 0;
3513 3582 right: 0;
3514 3583 pointer-events: none;
3515 - background: var(--wpds-color-stroke-interactive-neutral-strong, #6e6e6e);
3516 - height: calc(0 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
3584 + background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3585 + height: calc(0 * var(--wp-admin-border-width-focus));
3517 3586 border-radius: 0;
3518 3587 }
3519 3588 @media not (prefers-reduced-motion) {
3520 3589 .components-tab-panel__tabs-item::after {
3521 - transition: height 0.1s linear;
3590 + transition: all 0.1s linear;
3522 3591 }
3523 3592 }
3524 3593 .components-tab-panel__tabs-item.is-active::after {
3525 - height: calc(1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
3594 + height: calc(1 * var(--wp-admin-border-width-focus));
3526 3595 outline: 2px solid transparent;
3527 3596 outline-offset: -1px;
3528 3597 }
3529 3598 .components-tab-panel__tabs-item::before {
@@ -3528,31 +3597,25 @@
3528 3597 }
3529 3598 .components-tab-panel__tabs-item::before {
3530 3599 content: "";
3531 3600 position: absolute;
3532 - inset: var(--wpds-dimension-padding-md, 12px);
3601 + top: 12px;
3602 + left: 12px;
3603 + bottom: 12px;
3604 + right: 12px;
3533 3605 pointer-events: none;
3534 3606 box-shadow: 0 0 0 0 transparent;
3535 - border-radius: var(--wpds-border-radius-sm, 2px);
3607 + border-radius: 2px;
3536 3608 }
3537 3609 @media not (prefers-reduced-motion) {
3538 3610 .components-tab-panel__tabs-item::before {
3539 - transition: box-shadow 0.1s linear;
3611 + transition: all 0.1s linear;
3540 3612 }
3541 3613 }
3542 3614 .components-tab-panel__tabs-item:focus-visible::before {
3543 - 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));
3615 + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3544 3616 outline: 2px solid transparent;
3545 3617 }
3546 -.components-tab-panel__tabs[aria-orientation=vertical] .components-tab-panel__tabs-item {
3547 - border-radius: var(--wpds-border-radius-sm, 2px);
3548 -}
3549 -.components-tab-panel__tabs[aria-orientation=vertical] .components-tab-panel__tabs-item::after {
3550 - display: none;
3551 -}
3552 -.components-tab-panel__tabs[aria-orientation=vertical] .components-tab-panel__tabs-item.is-active {
3553 - background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
3554 -}
3555 3618
3556 3619 .components-tab-panel__tab-content:focus {
3557 3620 box-shadow: none;
3558 3621 outline: none;
@@ -3557,9 +3620,9 @@
3557 3620 box-shadow: none;
3558 3621 outline: none;
3559 3622 }
3560 3623 .components-tab-panel__tab-content:focus-visible {
3561 - 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));
3624 + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3562 3625 outline: 2px solid transparent;
3563 3626 outline-offset: 0;
3564 3627 }
3565 3628
@@ -3577,13 +3640,13 @@
3577 3640 .components-text-control__input[type=email],
3578 3641 .components-text-control__input[type=month],
3579 3642 .components-text-control__input[type=number] {
3580 3643 width: 100%;
3581 - height: 40px;
3644 + height: 32px;
3582 3645 margin: 0;
3583 - background: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
3584 - color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
3585 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3646 + background: var(--wp-components-color-background, #fff);
3647 + color: var(--wp-components-color-foreground, #1e1e1e);
3648 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3586 3649 padding: 6px 8px;
3587 3650 /* Fonts smaller than 16px causes mobile safari to zoom. */
3588 3651 font-size: 16px;
3589 3652 /* Override core line-height. To be reviewed. */
@@ -3647,11 +3710,8 @@
3647 3710 border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3648 3711 box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3649 3712 outline: 2px solid transparent;
3650 3713 }
3651 -.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 {
3652 - color: rgba(30, 30, 30, 0.62);
3653 -}
3654 3714 .components-text-control__input::placeholder,
3655 3715 .components-text-control__input[type=text]::placeholder,
3656 3716 .components-text-control__input[type=tel]::placeholder,
3657 3717 .components-text-control__input[type=time]::placeholder,
@@ -3680,15 +3740,10 @@
3680 3740 .components-text-control__input[type=datetime-local],
3681 3741 .components-text-control__input[type=email],
3682 3742 .components-text-control__input[type=month],
3683 3743 .components-text-control__input[type=number] {
3684 - border-color: var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
3685 - padding-right: 12px;
3686 - padding-left: 12px;
3744 + border-color: var(--wp-components-color-gray-600, #949494);
3687 3745 }
3688 -.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 {
3689 - color: color-mix(in srgb, var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e)), transparent 38%);
3690 -}
3691 3746 .components-text-control__input::placeholder,
3692 3747 .components-text-control__input[type=text]::placeholder,
3693 3748 .components-text-control__input[type=tel]::placeholder,
3694 3749 .components-text-control__input[type=time]::placeholder,
@@ -3701,10 +3756,28 @@
3701 3756 .components-text-control__input[type=datetime-local]::placeholder,
3702 3757 .components-text-control__input[type=email]::placeholder,
3703 3758 .components-text-control__input[type=month]::placeholder,
3704 3759 .components-text-control__input[type=number]::placeholder {
3705 - color: color-mix(in srgb, var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e)), transparent 38%);
3760 + color: color-mix(in srgb, var(--wp-components-color-foreground, #1e1e1e), transparent 38%);
3706 3761 }
3762 +.components-text-control__input.is-next-40px-default-size,
3763 +.components-text-control__input[type=text].is-next-40px-default-size,
3764 +.components-text-control__input[type=tel].is-next-40px-default-size,
3765 +.components-text-control__input[type=time].is-next-40px-default-size,
3766 +.components-text-control__input[type=url].is-next-40px-default-size,
3767 +.components-text-control__input[type=week].is-next-40px-default-size,
3768 +.components-text-control__input[type=password].is-next-40px-default-size,
3769 +.components-text-control__input[type=color].is-next-40px-default-size,
3770 +.components-text-control__input[type=date].is-next-40px-default-size,
3771 +.components-text-control__input[type=datetime].is-next-40px-default-size,
3772 +.components-text-control__input[type=datetime-local].is-next-40px-default-size,
3773 +.components-text-control__input[type=email].is-next-40px-default-size,
3774 +.components-text-control__input[type=month].is-next-40px-default-size,
3775 +.components-text-control__input[type=number].is-next-40px-default-size {
3776 + height: 40px;
3777 + padding-right: 12px;
3778 + padding-left: 12px;
3779 +}
3707 3780
3708 3781 .components-text-control__input[type=email],
3709 3782 .components-text-control__input[type=url] {
3710 3783 direction: ltr;
@@ -3727,9 +3800,9 @@
3727 3800 .components-toggle-control__label {
3728 3801 line-height: 16px;
3729 3802 }
3730 3803 .components-toggle-control__label:not(.is-disabled) {
3731 - cursor: var(--wpds-cursor-control, pointer);
3804 + cursor: pointer;
3732 3805 }
3733 3806
3734 3807 .components-toggle-control__help {
3735 3808 display: inline-block;
@@ -3737,9 +3810,9 @@
3737 3810 }
3738 3811
3739 3812 .components-accessible-toolbar {
3740 3813 display: inline-flex;
3741 - border: 1px solid var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
3814 + border: 1px solid var(--wp-components-color-foreground, #1e1e1e);
3742 3815 border-radius: 2px;
3743 3816 flex-shrink: 0;
3744 3817 }
3745 3818 .components-accessible-toolbar > .components-toolbar-group:last-child {
@@ -3804,9 +3877,9 @@
3804 3877 background: transparent;
3805 3878 }
3806 3879 .components-accessible-toolbar .components-button.is-pressed::before,
3807 3880 .components-toolbar .components-button.is-pressed::before {
3808 - background: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
3881 + background: var(--wp-components-color-foreground, #1e1e1e);
3809 3882 }
3810 3883 .components-accessible-toolbar .components-button:focus::before,
3811 3884 .components-toolbar .components-button:focus::before {
3812 3885 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -3834,11 +3907,11 @@
3834 3907 padding: 5px 0 5px 10px;
3835 3908 }
3836 3909 .components-toolbar__control.components-button[data-subscript]::after {
3837 3910 content: attr(data-subscript);
3838 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3911 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3839 3912 font-size: 13px;
3840 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3913 + font-weight: 600;
3841 3914 line-height: 12px;
3842 3915 position: absolute;
3843 3916 left: 8px;
3844 3917 bottom: 10px;
@@ -3848,10 +3921,10 @@
3848 3921 }
3849 3922
3850 3923 .components-toolbar-group {
3851 3924 min-height: 48px;
3852 - border-left: 1px solid var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
3853 - background-color: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
3925 + border-left: 1px solid var(--wp-components-color-foreground, #1e1e1e);
3926 + background-color: var(--wp-components-color-background, #fff);
3854 3927 display: inline-flex;
3855 3928 flex-shrink: 0;
3856 3929 flex-wrap: wrap;
3857 3930 padding-right: 6px;
@@ -3872,9 +3945,9 @@
3872 3945 padding-left: 6px;
3873 3946 }
3874 3947 .components-toolbar-group .components-button.components-button svg,
3875 3948 .components-toolbar-group .components-button.has-icon.has-icon svg {
3876 - min-width: var(--wpds-dimension-size-sm, 24px);
3949 + min-width: 24px;
3877 3950 }
3878 3951 .components-toolbar-group .components-button.components-button::before,
3879 3952 .components-toolbar-group .components-button.has-icon.has-icon::before {
3880 3953 right: 2px;
@@ -3883,10 +3956,10 @@
3883 3956
3884 3957 .components-toolbar {
3885 3958 min-height: 48px;
3886 3959 margin: 0;
3887 - border: 1px solid var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
3888 - background-color: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
3960 + border: 1px solid var(--wp-components-color-foreground, #1e1e1e);
3961 + background-color: var(--wp-components-color-background, #fff);
3889 3962 display: inline-flex;
3890 3963 flex-shrink: 0;
3891 3964 flex-wrap: wrap;
3892 3965 }
@@ -3907,9 +3980,9 @@
3907 3980 div.components-toolbar > div + div.has-left-divider::before {
3908 3981 display: inline-block;
3909 3982 content: "";
3910 3983 box-sizing: content-box;
3911 - background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3984 + background-color: #ddd;
3912 3985 position: absolute;
3913 3986 top: 8px;
3914 3987 right: -3px;
3915 3988 width: 1px;
@@ -3917,10 +3990,10 @@
3917 3990 }
3918 3991
3919 3992 .components-tooltip {
3920 3993 background: #000;
3921 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3922 - border-radius: var(--wpds-border-radius-md, 4px);
3994 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3995 + border-radius: 2px;
3923 3996 color: #f0f0f0;
3924 3997 text-align: center;
3925 3998 line-height: 1.4;
3926 3999 font-size: 12px;
@@ -3959,12 +4032,8 @@
3959 4032 .components-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])) {
3960 4033 --wp-components-color-accent: #cc1818;
3961 4034 border-color: #cc1818;
3962 4035 }
3963 -.components-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-validated-control__content-editable [role=textbox] {
3964 - --wp-components-color-accent: #cc1818;
3965 - border-color: #cc1818;
3966 -}
3967 4036
3968 4037 .components-validated-control__error-delegate {
3969 4038 position: absolute;
3970 4039 top: 0;
@@ -3978,12 +4047,12 @@
3978 4047 display: flex;
3979 4048 align-items: flex-start;
3980 4049 gap: 4px;
3981 4050 margin: 8px 0 0;
3982 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4051 + font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3983 4052 font-size: 12px;
3984 4053 line-height: 16px;
3985 - color: var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
4054 + color: var(--wp-components-color-gray-700, #757575);
3986 4055 animation: components-validated-control__indicator-jump 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
3987 4056 }
3988 4057 .components-validated-control__indicator.is-invalid {
3989 4058 color: #cc1818;