PluginProbe
Gutenberg / 24.1.0
Gutenberg v24.1.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 +312 -827 23.2.2 → 24.1.0 View file →
@@ -68,8 +68,14 @@
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 +/**
72 78 * Applies editor left position to the selector passed as argument
73 79 */
74 80 /**
75 81 * Styles that are reused verbatim in a few places
@@ -160,12 +166,14 @@
160 166 height: auto;
161 167 min-height: 36px;
162 168 text-align: right;
163 169 width: 100%;
170 + font-weight: var(--wpds-typography-font-weight-default, 400);
171 + position: relative;
164 172 }
165 -.components-autocomplete__result.components-button:focus:not(:disabled) {
166 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
167 - outline: 2px solid transparent;
173 +.components-autocomplete__result.components-button:focus:not(:disabled):not(:active) {
174 + box-shadow: 0 0 0 calc(2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) + 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
175 + z-index: 1;
168 176 }
169 177
170 178 .components-badge {
171 179 box-sizing: border-box;
@@ -231,9 +239,9 @@
231 239 .components-button-group .components-button {
232 240 border-radius: 0;
233 241 display: inline-flex;
234 242 color: #1e1e1e;
235 - box-shadow: inset 0 0 0 1px #1e1e1e;
243 + border-color: #1e1e1e;
236 244 }
237 245 .components-button-group .components-button + .components-button {
238 246 margin-right: -1px;
239 247 }
@@ -246,11 +254,8 @@
246 254 .components-button-group .components-button:focus, .components-button-group .components-button.is-primary {
247 255 position: relative;
248 256 z-index: 1;
249 257 }
250 -.components-button-group .components-button.is-primary {
251 - box-shadow: inset 0 0 0 1px #1e1e1e;
252 -}
253 258
254 259 /**
255 260 * For easier testing of potential regressions, you can use a Button variant matrix
256 261 * available in a special Storybook instance by running `npm run storybook:e2e:dev`.
@@ -256,32 +261,35 @@
256 261 * available in a special Storybook instance by running `npm run storybook:e2e:dev`.
257 262 *
258 263 * @see https://github.com/WordPress/gutenberg/blob/trunk/test/storybook-playwright/README.md
259 264 */
265 +.components-button:focus:is(a) {
266 + box-shadow: none;
267 +}
268 +.components-button:focus {
269 + outline: none;
270 +}
271 +.components-button:focus:not(:active) {
272 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
273 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
274 +}
260 275 .components-button {
261 276 display: inline-flex;
262 277 text-decoration: none;
263 278 font-family: inherit;
264 279 font-size: 13px;
265 - font-weight: 499;
280 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
266 281 margin: 0;
267 - border: 0;
268 282 cursor: var(--wpds-cursor-control, pointer);
269 283 appearance: none;
270 284 background: none;
271 -}
272 -@media not (prefers-reduced-motion) {
273 - .components-button {
274 - transition: box-shadow 0.1s linear;
275 - }
276 -}
277 -.components-button {
278 285 height: 36px;
279 286 align-items: center;
280 287 box-sizing: border-box;
281 288 padding: 4px 12px;
282 289 border-radius: 2px;
283 - color: var(--wp-components-color-foreground, #1e1e1e);
290 + color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
291 + border: 1px solid transparent;
284 292 }
285 293 .components-button.is-next-40px-default-size {
286 294 height: 40px;
287 295 }
@@ -287,11 +295,8 @@
287 295 }
288 296 .components-button[aria-expanded=true], .components-button:hover:not(:disabled, [aria-disabled=true]) {
289 297 color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
290 298 }
291 -.components-button:focus:not(:active) {
292 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
293 -}
294 299 .components-button {
295 300 /**
296 301 * Primary button style.
297 302 */
@@ -298,41 +303,30 @@
298 303 }
299 304 .components-button.is-primary {
300 305 white-space: nowrap;
301 306 background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
302 - color: var(--wp-components-color-accent-inverted, #fff);
307 + color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
303 308 text-decoration: none;
304 309 text-shadow: none;
305 - outline: 1px solid transparent;
306 310 }
307 311 .components-button.is-primary:hover:not(:disabled) {
308 312 background: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
309 - color: var(--wp-components-color-accent-inverted, #fff);
313 + color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
310 314 }
311 315 .components-button.is-primary:active:not(:disabled) {
312 316 background: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
313 - border-color: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
314 - color: var(--wp-components-color-accent-inverted, #fff);
317 + color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
315 318 }
316 -.components-button.is-primary:focus:not(:active) {
317 - 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));
318 -}
319 319 .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 {
320 320 color: rgba(255, 255, 255, 0.4);
321 321 background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
322 - border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
323 - outline: none;
324 322 }
325 -.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 {
326 - 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));
327 -}
328 323 .components-button.is-primary.is-busy, .components-button.is-primary.is-busy:disabled, .components-button.is-primary.is-busy[aria-disabled=true] {
329 - color: var(--wp-components-color-accent-inverted, #fff);
324 + color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
330 325 background-size: 100px 100%;
331 326 /* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
332 327 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%);
333 328 /* stylelint-enable */
334 - border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
335 329 }
336 330 .components-button {
337 331 /**
338 332 * Secondary and tertiary buttons.
@@ -337,14 +331,8 @@
337 331 /**
338 332 * Secondary and tertiary buttons.
339 333 */
340 334 }
341 -.components-button.is-secondary, .components-button.is-tertiary {
342 - outline: 1px solid transparent;
343 -}
344 -.components-button.is-secondary:active:not(:disabled), .components-button.is-tertiary:active:not(:disabled) {
345 - box-shadow: none;
346 -}
347 335 .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 {
348 336 color: #949494;
349 337 background: transparent;
350 338 transform: none;
@@ -353,26 +341,33 @@
353 341 /**
354 342 * Secondary button style.
355 343 */
356 344 }
345 +@media not (prefers-reduced-motion) {
346 + .components-button.is-secondary {
347 + transition: border-color 0.1s linear;
348 + }
349 +}
357 350 .components-button.is-secondary {
358 - box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)), 0 0 0 currentColor;
359 - outline: 1px solid transparent;
351 + border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
360 352 white-space: nowrap;
361 353 color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
362 354 background: transparent;
363 355 }
356 +.components-button.is-secondary:active:not(:disabled) {
357 + border-color: transparent;
358 +}
364 359 .components-button.is-secondary:hover:not(:disabled, [aria-disabled=true], .is-pressed) {
365 - box-shadow: inset 0 0 0 1px var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
360 + border-color: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
366 361 color: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
367 362 background: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, transparent);
368 363 }
364 +.components-button.is-secondary:focus:not(:active) {
365 + border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
366 +}
369 367 .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) {
370 - box-shadow: inset 0 0 0 1px #ddd;
368 + border-color: var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
371 369 }
372 -.components-button.is-secondary:focus:not(:active) {
373 - 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));
374 -}
375 370 .components-button {
376 371 /**
377 372 * Tertiary buttons.
378 373 */
@@ -391,12 +386,8 @@
391 386 }
392 387 p + .components-button.is-tertiary {
393 388 margin-right: -6px;
394 389 }
395 -.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) {
396 - box-shadow: none;
397 - outline: none;
398 -}
399 390 .components-button {
400 391 /**
401 392 * Destructive buttons.
402 393 */
@@ -411,11 +402,8 @@
411 402 }
412 403 .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):hover:not(:disabled, [aria-disabled=true]) {
413 404 color: rgb(112.7368421053, 13.2631578947, 13.2631578947);
414 405 }
415 -.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):focus:not(:active) {
416 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #cc1818;
417 -}
418 406 .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):active:not(:disabled, [aria-disabled=true]) {
419 407 background: #ccc;
420 408 }
421 409 .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] {
@@ -434,15 +422,14 @@
434 422 }
435 423 .components-button.is-link {
436 424 margin: 0;
437 425 padding: 0;
438 - box-shadow: none;
439 426 border: 0;
440 427 border-radius: 0;
441 428 background: none;
442 429 outline: none;
443 430 text-align: right;
444 - font-weight: 400;
431 + font-weight: var(--wpds-typography-font-weight-default, 400);
445 432 color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
446 433 text-decoration: underline;
447 434 text-underline-offset: 0.2em;
448 435 text-decoration-thickness: from-font;
@@ -456,19 +443,17 @@
456 443 }
457 444 .components-button.is-link {
458 445 height: auto;
459 446 }
460 -.components-button.is-link:focus {
447 +.components-button.is-link:focus:not(:active) {
461 448 border-radius: 2px;
449 + text-decoration: none;
462 450 }
463 451 .components-button.is-link:disabled, .components-button.is-link[aria-disabled=true] {
464 452 color: #949494;
465 453 }
466 -.components-button:focus {
467 - outline: 3px solid transparent;
468 -}
469 454 .components-button:not(:disabled, [aria-disabled=true]):active {
470 - color: var(--wp-components-color-foreground, #1e1e1e);
455 + color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
471 456 }
472 457 .components-button:disabled, .components-button[aria-disabled=true] {
473 458 cursor: default;
474 459 color: #949494;
@@ -491,9 +476,9 @@
491 476 padding: 0;
492 477 min-width: 32px;
493 478 }
494 479 .components-button.is-small {
495 - height: 24px;
480 + height: var(--wpds-dimension-size-sm, 24px);
496 481 line-height: 22px;
497 482 padding: 0 8px;
498 483 font-size: 11px;
499 484 }
@@ -498,9 +483,9 @@
498 483 font-size: 11px;
499 484 }
500 485 .components-button.is-small.has-icon:not(.has-text) {
501 486 padding: 0;
502 - min-width: 24px;
487 + min-width: var(--wpds-dimension-size-sm, 24px);
503 488 }
504 489 .components-button.has-icon {
505 490 padding: 6px;
506 491 min-width: 36px;
@@ -525,40 +510,30 @@
525 510 .components-button.has-icon.has-text.has-icon-right {
526 511 padding-left: 8px;
527 512 padding-right: 12px;
528 513 }
514 +.components-button.has-icon:not(.has-text) svg,
515 +.components-button.has-icon:not(.has-text) .dashicon {
516 + margin-inline: -1px;
517 +}
529 518 .components-button.is-pressed, .components-button.is-pressed:hover {
530 - color: var(--wp-components-color-foreground-inverted, #fff);
519 + color: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc));
531 520 }
532 521 .components-button.is-pressed:not(:disabled, [aria-disabled=true]), .components-button.is-pressed:hover:not(:disabled, [aria-disabled=true]) {
533 - background: var(--wp-components-color-foreground, #1e1e1e);
522 + background: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
534 523 }
535 524 .components-button.is-pressed:disabled, .components-button.is-pressed[aria-disabled=true] {
536 525 color: #949494;
537 526 }
538 527 .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) {
539 - color: var(--wp-components-color-foreground-inverted, #fff);
528 + color: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc));
540 529 background: #949494;
541 530 }
542 -.components-button.is-pressed:focus:not(:active) {
543 - 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));
544 -}
545 -.components-button.is-pressed:focus {
546 - outline: 2px solid transparent;
547 -}
548 -.components-button:focus:active {
549 - outline: none;
550 -}
551 531 .components-button svg {
552 532 fill: currentColor;
553 533 outline: none;
554 534 flex-shrink: 0;
555 535 }
556 -@media (forced-colors: active) {
557 - .components-button svg {
558 - fill: CanvasText;
559 - }
560 -}
561 536
562 537 @keyframes components-button__busy-animation {
563 538 0% {
564 539 background-position: right 200px top 0;
@@ -563,368 +538,8 @@
563 538 0% {
564 539 background-position: right 200px top 0;
565 540 }
566 541 }
567 -/* Root of the component. */
568 -.components-calendar {
569 - position: relative; /* Required to position the navigation toolbar. */
570 - box-sizing: border-box;
571 - display: inline flow-root;
572 - color: var(--wp-components-color-foreground, #1e1e1e);
573 - background-color: var(--wp-components-color-background, #fff);
574 - font-size: 13px;
575 - font-weight: 400;
576 - z-index: 0;
577 -}
578 -.components-calendar *,
579 -.components-calendar *::before,
580 -.components-calendar *::after {
581 - box-sizing: border-box;
582 -}
583 -
584 -.components-calendar__day {
585 - padding: 0;
586 - position: relative;
587 -}
588 -.components-calendar__day:has(.components-calendar__day-button:disabled) {
589 - color: var(--wp-components-color-gray-400, #ccc);
590 -}
591 -.components-calendar__day:has(.components-calendar__day-button:hover:not(:disabled)), .components-calendar__day:has(.components-calendar__day-button:focus-visible) {
592 - color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
593 -}
594 -
595 -.components-calendar__day-button {
596 - background: none;
597 - padding: 0;
598 - margin: 0;
599 - cursor: var(--wpds-cursor-control, pointer);
600 - justify-content: center;
601 - align-items: center;
602 - display: flex;
603 - position: relative;
604 - width: 32px;
605 - height: 32px;
606 - border: none;
607 - border-radius: 2px;
608 - font: inherit;
609 - font-variant-numeric: tabular-nums;
610 - color: inherit;
611 -}
612 -.components-calendar__day-button::before {
613 - content: "";
614 - position: absolute;
615 - z-index: -1;
616 - inset: 0;
617 - border: none;
618 - border-radius: 2px;
619 -}
620 -.components-calendar__day-button::after {
621 - content: "";
622 - position: absolute;
623 - z-index: 1;
624 - inset: 0;
625 - pointer-events: none;
626 -}
627 -.components-calendar__day-button:disabled {
628 - cursor: revert;
629 -}
630 -@media (forced-colors: active) {
631 - .components-calendar__day-button:disabled {
632 - text-decoration: line-through;
633 - }
634 -}
635 -.components-calendar__day-button:focus-visible {
636 - outline: var(--wp-admin-border-width-focus) solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
637 - outline-offset: 1px;
638 -}
639 -
640 -.components-calendar__caption-label {
641 - z-index: 1;
642 - position: relative;
643 - display: inline-flex;
644 - align-items: center;
645 - white-space: nowrap;
646 - border: 0;
647 - text-transform: capitalize;
648 -}
649 -
650 -.components-calendar__button-next,
651 -.components-calendar__button-previous {
652 - border: none;
653 - border-radius: 2px;
654 - background: none;
655 - padding: 0;
656 - margin: 0;
657 - cursor: var(--wpds-cursor-control, pointer);
658 - appearance: none;
659 - display: inline-flex;
660 - align-items: center;
661 - justify-content: center;
662 - position: relative;
663 - width: 32px;
664 - height: 32px;
665 - color: inherit;
666 -}
667 -.components-calendar__button-next:disabled, .components-calendar__button-next[aria-disabled=true],
668 -.components-calendar__button-previous:disabled,
669 -.components-calendar__button-previous[aria-disabled=true] {
670 - cursor: revert;
671 - color: var(--wp-components-color-gray-600, #949494);
672 -}
673 -.components-calendar__button-next:focus-visible,
674 -.components-calendar__button-previous:focus-visible {
675 - outline: var(--wp-admin-border-width-focus) solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
676 -}
677 -
678 -.components-calendar__chevron {
679 - display: inline-block;
680 - fill: currentColor;
681 - width: 16px;
682 - height: 16px;
683 -}
684 -
685 -.components-calendar[dir=rtl] .components-calendar__nav .components-calendar__chevron {
686 - transform: rotate(-180deg);
687 - transform-origin: 50%;
688 -}
689 -
690 -.components-calendar__month-caption {
691 - display: flex;
692 - justify-content: center;
693 - align-content: center;
694 - height: 32px;
695 - margin-bottom: 12px;
696 -}
697 -
698 -.components-calendar__months {
699 - position: relative;
700 - display: flex;
701 - justify-content: center;
702 - flex-wrap: wrap;
703 - gap: 16px;
704 - max-width: fit-content;
705 -}
706 -
707 -.components-calendar__month-grid {
708 - border-collapse: separate;
709 - border-spacing: 0 4px;
710 -}
711 -
712 -.components-calendar__nav {
713 - position: absolute;
714 - inset-block-start: 0;
715 - inset-inline-start: 0;
716 - inset-inline-end: 0;
717 - display: flex;
718 - align-items: center;
719 - justify-content: space-between;
720 - height: 32px;
721 -}
722 -
723 -.components-calendar__weekday {
724 - width: 32px;
725 - height: 32px;
726 - padding: 0;
727 - color: var(--wp-components-color-gray-700, #757575);
728 - text-align: center;
729 - text-transform: uppercase;
730 -}
731 -
732 -/* DAY MODIFIERS */
733 -.components-calendar__day--today::after {
734 - content: "";
735 - position: absolute;
736 - z-index: 1;
737 - inset-block-start: 2px;
738 - inset-inline-end: 2px;
739 - width: 0;
740 - height: 0;
741 - border-radius: 50%;
742 - border: 2px solid currentColor;
743 -}
744 -
745 -.components-calendar__day--selected:not(.components-calendar__range-middle):has(.components-calendar__day-button,
746 -.components-calendar__day-button:hover:not(:disabled)) {
747 - color: var(--wp-components-color-foreground-inverted, #fff);
748 -}
749 -.components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button::before {
750 - background-color: var(--wp-components-color-foreground, #1e1e1e);
751 - border: 1px solid transparent;
752 -}
753 -.components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:disabled::before {
754 - background-color: var(--wp-components-color-gray-400, #ccc);
755 -}
756 -.components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:hover:not(:disabled)::before {
757 - background-color: var(--wp-components-color-gray-800, #2f2f2f);
758 -}
759 -
760 -.components-calendar__day--outside {
761 - color: var(--wp-components-color-gray-600, #949494);
762 -}
763 -
764 -.components-calendar__day--hidden {
765 - visibility: hidden;
766 -}
767 -
768 -.components-calendar__range-start:not(.components-calendar__range-end) .components-calendar__day-button, .components-calendar__range-start:not(.components-calendar__range-end) .components-calendar__day-button::before {
769 - border-start-end-radius: 0;
770 - border-end-end-radius: 0;
771 -}
772 -
773 -.components-calendar__range-middle .components-calendar__day-button::before {
774 - background-color: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, transparent);
775 - border-radius: 0;
776 - border-width: 1px 0;
777 - border-color: transparent;
778 - border-style: solid;
779 -}
780 -
781 -.components-calendar__range-end:not(.components-calendar__range-start) .components-calendar__day-button, .components-calendar__range-end:not(.components-calendar__range-start) .components-calendar__day-button::before {
782 - border-start-start-radius: 0;
783 - border-end-start-radius: 0;
784 -}
785 -
786 -/*
787 - * RANGE PREVIEW (range calendar only)
788 - *
789 - * The preview is rendered in the button's ::after pseudo-element, so that it
790 - * can be rendered over the button's contents.
791 - * The selection preview is shown with a dashed border. In order to have
792 - * control over the dash pattern (especially the seams between days), the
793 - * dashed borders are rendered as SVGs via the url() CSS function.
794 - * Since SVGs rendered in the url() function don't seem to be able to access
795 - * CSS variables, we're using the SVGs as masks, and using `background-color`
796 - * to consume the accent color variable.
797 - */
798 -.components-calendar__day--preview svg {
799 - position: absolute;
800 - inset: 0;
801 - pointer-events: none;
802 - color: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 16%, transparent);
803 -}
804 -@media (forced-colors: active) {
805 - .components-calendar__day--preview svg {
806 - color: inherit;
807 - }
808 -}
809 -.components-calendar[dir=rtl] .components-calendar__day--preview svg {
810 - transform: scaleX(-1);
811 -}
812 -
813 -.components-calendar__day--preview.components-calendar__range-middle .components-calendar__day-button::before {
814 - border: none;
815 -}
816 -
817 -/* ANIMATIONS */
818 -@keyframes slide-in-left {
819 - 0% {
820 - transform: translateX(100%);
821 - }
822 - 100% {
823 - transform: translateX(0);
824 - }
825 -}
826 -@keyframes slide-in-right {
827 - 0% {
828 - transform: translateX(-100%);
829 - }
830 - 100% {
831 - transform: translateX(0);
832 - }
833 -}
834 -@keyframes slide-out-left {
835 - 0% {
836 - transform: translateX(0);
837 - }
838 - 100% {
839 - transform: translateX(100%);
840 - }
841 -}
842 -@keyframes slide-out-right {
843 - 0% {
844 - transform: translateX(0);
845 - }
846 - 100% {
847 - transform: translateX(-100%);
848 - }
849 -}
850 -@keyframes fade-in {
851 - from {
852 - opacity: 0;
853 - }
854 - to {
855 - opacity: 1;
856 - }
857 -}
858 -@keyframes fade-out {
859 - from {
860 - opacity: 1;
861 - }
862 - to {
863 - opacity: 0;
864 - }
865 -}
866 -.components-calendar__weeks-before-enter,
867 -.components-calendar__weeks-before-exit,
868 -.components-calendar__weeks-after-enter,
869 -.components-calendar__weeks-after-exit,
870 -.components-calendar__caption-after-enter,
871 -.components-calendar__caption-after-exit,
872 -.components-calendar__caption-before-enter,
873 -.components-calendar__caption-before-exit {
874 - animation-duration: 0s;
875 - animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
876 - animation-fill-mode: forwards;
877 -}
878 -@media not (prefers-reduced-motion) {
879 - .components-calendar__weeks-before-enter,
880 - .components-calendar__weeks-before-exit,
881 - .components-calendar__weeks-after-enter,
882 - .components-calendar__weeks-after-exit,
883 - .components-calendar__caption-after-enter,
884 - .components-calendar__caption-after-exit,
885 - .components-calendar__caption-before-enter,
886 - .components-calendar__caption-before-exit {
887 - animation-duration: 0.3s;
888 - }
889 -}
890 -
891 -.components-calendar__weeks-before-enter,
892 -.components-calendar[dir=rtl] .components-calendar__weeks-after-enter {
893 - animation-name: slide-in-left;
894 -}
895 -
896 -.components-calendar__weeks-before-exit,
897 -.components-calendar[dir=rtl] .components-calendar__weeks-after-exit {
898 - animation-name: slide-out-left;
899 -}
900 -
901 -.components-calendar__weeks-after-enter,
902 -.components-calendar[dir=rtl] .components-calendar__weeks-before-enter {
903 - animation-name: slide-in-right;
904 -}
905 -
906 -.components-calendar__weeks-after-exit,
907 -.components-calendar[dir=rtl] .components-calendar__weeks-before-exit {
908 - animation-name: slide-out-right;
909 -}
910 -
911 -.components-calendar__caption-after-enter {
912 - animation-name: fade-in;
913 -}
914 -
915 -.components-calendar__caption-after-exit {
916 - animation-name: fade-out;
917 -}
918 -
919 -.components-calendar__caption-before-enter {
920 - animation-name: fade-in;
921 -}
922 -
923 -.components-calendar__caption-before-exit {
924 - animation-name: fade-out;
925 -}
926 -
927 542 .components-checkbox-control {
928 543 --checkbox-input-size: 24px;
929 544 }
930 545 @media (min-width: 600px) {
@@ -937,8 +552,9 @@
937 552 }
938 553
939 554 .components-checkbox-control__label {
940 555 line-height: var(--checkbox-input-size);
556 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
941 557 }
942 558 .components-checkbox-control:not(:has(:disabled)) .components-checkbox-control__label {
943 559 cursor: var(--wpds-cursor-control, pointer);
944 560 }
@@ -943,27 +559,21 @@
943 559 cursor: var(--wpds-cursor-control, pointer);
944 560 }
945 561
946 562 .components-checkbox-control__input[type=checkbox] {
947 - border: 1px solid #1e1e1e;
563 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
948 564 margin-left: 12px;
949 565 transition: none;
950 566 border-radius: 2px;
951 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
567 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
952 568 padding: 6px 8px;
953 569 /* Fonts smaller than 16px causes mobile safari to zoom. */
954 570 font-size: 16px;
955 571 /* Override core line-height. To be reviewed. */
956 572 line-height: normal;
957 - box-shadow: 0 0 0 transparent;
958 - border-radius: 2px;
959 - border: 1px solid #949494;
573 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
574 + border-radius: var(--wpds-border-radius-sm, 2px);
960 575 }
961 -@media not (prefers-reduced-motion) {
962 - .components-checkbox-control__input[type=checkbox] {
963 - transition: box-shadow 0.1s linear;
964 - }
965 -}
966 576 @media (min-width: 600px) {
967 577 .components-checkbox-control__input[type=checkbox] {
968 578 font-size: 13px;
969 579 /* Override core line-height. To be reviewed. */
@@ -969,16 +579,23 @@
969 579 /* Override core line-height. To be reviewed. */
970 580 line-height: normal;
971 581 }
972 582 }
583 +.components-checkbox-control__input[type=checkbox]:hover:not(:disabled, [aria-disabled=true]) {
584 + border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
585 +}
973 586 .components-checkbox-control__input[type=checkbox]:focus {
974 - border-color: var(--wp-admin-theme-color);
975 - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
976 - outline: 2px solid transparent;
587 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
588 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
589 + border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
590 + box-shadow: none;
977 591 }
978 592 .components-checkbox-control__input[type=checkbox]::placeholder {
979 593 color: rgba(30, 30, 30, 0.62);
980 594 }
595 +.components-checkbox-control__input[type=checkbox]:hover:not(:disabled, [aria-disabled=true]) {
596 + background: var(--wpds-color-background-interactive-neutral-active, #fff);
597 +}
981 598 .components-checkbox-control__input[type=checkbox]:focus {
982 599 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
983 600 outline: 2px solid transparent;
984 601 }
@@ -1005,9 +622,9 @@
1005 622 display: inline-block;
1006 623 vertical-align: middle;
1007 624 width: 16px;
1008 625 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
1009 - font: normal 30px/1 dashicons;
626 + font: 400 30px/1 dashicons;
1010 627 speak: none;
1011 628 -webkit-font-smoothing: antialiased;
1012 629 -moz-osx-font-smoothing: grayscale;
1013 630 }
@@ -1017,13 +634,17 @@
1017 634 font-size: 21px;
1018 635 }
1019 636 }
1020 637 .components-checkbox-control__input[type=checkbox][aria-disabled=true], .components-checkbox-control__input[type=checkbox]:disabled {
1021 - background: #f0f0f0;
1022 - border-color: #ddd;
638 + background: var(--wpds-color-background-interactive-neutral-disabled, #fff);
639 + border-color: var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
640 + color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
1023 641 cursor: default;
1024 642 opacity: 1;
1025 643 }
644 +.components-checkbox-control__input[type=checkbox][aria-disabled=true]:checked::before, .components-checkbox-control__input[type=checkbox][aria-disabled=true][aria-checked=mixed]::before, .components-checkbox-control__input[type=checkbox]:disabled:checked::before, .components-checkbox-control__input[type=checkbox]:disabled[aria-checked=mixed]::before {
645 + color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
646 +}
1026 647 .components-checkbox-control__input[type=checkbox] {
1027 648 background: #fff;
1028 649 color: #1e1e1e;
1029 650 clear: none;
@@ -1071,31 +692,24 @@
1071 692 }
1072 693
1073 694 svg.components-checkbox-control__checked,
1074 695 svg.components-checkbox-control__indeterminate {
1075 - --checkmark-size: var(--checkbox-input-size);
1076 - fill: #fff;
696 + color: #fff;
1077 697 cursor: var(--wpds-cursor-control, pointer);
1078 698 position: absolute;
1079 699 right: 50%;
1080 700 top: 50%;
1081 701 transform: translate(50%, -50%);
1082 - width: var(--checkmark-size);
1083 - height: var(--checkmark-size);
702 + width: var(--checkbox-input-size);
703 + height: var(--checkbox-input-size);
1084 704 -webkit-user-select: none;
1085 705 user-select: none;
1086 706 pointer-events: none;
1087 707 }
1088 -@media (min-width: 600px) {
1089 - svg.components-checkbox-control__checked,
1090 - svg.components-checkbox-control__indeterminate {
1091 - --checkmark-size: calc(var(--checkbox-input-size) + 4px);
1092 - }
1093 -}
1094 708
1095 709 .components-checkbox-control:has(:disabled) svg.components-checkbox-control__checked,
1096 710 .components-checkbox-control:has(:disabled) svg.components-checkbox-control__indeterminate {
1097 - fill: var(--wp-components-color-gray-400, #ccc);
711 + color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
1098 712 }
1099 713
1100 714 .components-checkbox-control__help {
1101 715 display: inline-block;
@@ -1133,14 +747,14 @@
1133 747 transform: scale(1);
1134 748 }
1135 749 @media not (prefers-reduced-motion) {
1136 750 .components-circular-option-picker__option-wrapper {
1137 - transition: 100ms transform ease;
751 + transition: 100ms transform ease-out;
1138 752 will-change: transform;
1139 753 }
1140 754 }
1141 755 .components-circular-option-picker__option-wrapper:hover {
1142 - transform: scale(1.2);
756 + transform: scale(1.1);
1143 757 }
1144 758 .components-circular-option-picker__option-wrapper > div {
1145 759 height: 100%;
1146 760 width: 100%;
@@ -1148,15 +762,11 @@
1148 762
1149 763 .components-circular-option-picker__option-wrapper::before {
1150 764 content: "";
1151 765 position: absolute;
1152 - top: 1px;
1153 - right: 1px;
1154 - bottom: 1px;
1155 - left: 1px;
766 + inset: 1px;
1156 767 border-radius: 50%;
1157 768 z-index: -1;
1158 - /* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
1159 769 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');
1160 770 }
1161 771
1162 772 .components-circular-option-picker__option {
@@ -1176,13 +786,9 @@
1176 786 }
1177 787 .components-circular-option-picker__option {
1178 788 cursor: var(--wpds-cursor-control, pointer);
1179 789 }
1180 -.components-circular-option-picker__option:hover {
1181 - box-shadow: inset 0 0 0 14px !important;
1182 -}
1183 790 .components-circular-option-picker__option[aria-pressed=true], .components-circular-option-picker__option[aria-selected=true] {
1184 - box-shadow: inset 0 0 0 4px;
1185 791 position: relative;
1186 792 z-index: 1;
1187 793 overflow: visible;
1188 794 }
@@ -1196,34 +802,13 @@
1196 802 }
1197 803 .components-circular-option-picker__option::after {
1198 804 content: "";
1199 805 position: absolute;
1200 - top: -1px;
1201 - right: -1px;
1202 - bottom: -1px;
1203 - left: -1px;
806 + inset: -1px;
807 + border: 1px solid transparent;
1204 808 border-radius: 50%;
1205 809 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
1206 - border: 1px solid transparent;
1207 - box-sizing: inherit;
1208 810 }
1209 -.components-circular-option-picker__option:focus::after {
1210 - content: "";
1211 - border-radius: 50%;
1212 - box-shadow: inset 0 0 0 2px #fff;
1213 - position: absolute;
1214 - top: 50%;
1215 - right: 50%;
1216 - transform: translate(50%, -50%);
1217 - border: 2px solid #757575;
1218 - width: calc(100% + 4px);
1219 - height: calc(100% + 4px);
1220 -}
1221 -.components-circular-option-picker__option.components-button:focus {
1222 - background-color: transparent;
1223 - box-shadow: inset 0 0 0 14px;
1224 - outline: none;
1225 -}
1226 811
1227 812 .components-circular-option-picker__button-action .components-circular-option-picker__option {
1228 813 color: #fff;
1229 814 background: #fff;
@@ -1235,17 +820,14 @@
1235 820 .components-circular-option-picker__dropdown-link-action .components-button {
1236 821 line-height: 22px;
1237 822 }
1238 823
1239 -.components-palette-edit__popover-gradient-picker {
824 +.components-palette-edit__popover-gradient-picker,
825 +.components-palette-edit__popover-duotone-picker {
1240 826 width: 260px;
1241 827 padding: 8px;
1242 828 }
1243 829
1244 -.components-dropdown-menu__menu .components-palette-edit__menu-button {
1245 - width: 100%;
1246 -}
1247 -
1248 830 .component-color-indicator {
1249 831 width: 20px;
1250 832 height: 20px;
1251 833 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
@@ -1268,10 +850,10 @@
1268 850 padding: 2px;
1269 851 margin: 0;
1270 852 line-height: inherit;
1271 853 min-height: auto;
1272 - background: var(--wp-components-color-background, #fff);
1273 - color: var(--wp-components-color-foreground, #1e1e1e);
854 + background: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
855 + color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
1274 856 }
1275 857 @media (min-width: 600px) {
1276 858 input.components-combobox-control__input[type=text] {
1277 859 font-size: 13px;
@@ -1282,23 +864,17 @@
1282 864 box-shadow: none;
1283 865 }
1284 866
1285 867 .components-combobox-control__suggestions-container {
1286 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
868 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1287 869 padding: 6px 8px;
1288 870 /* Fonts smaller than 16px causes mobile safari to zoom. */
1289 871 font-size: 16px;
1290 872 /* Override core line-height. To be reviewed. */
1291 873 line-height: normal;
1292 - box-shadow: 0 0 0 transparent;
1293 - border-radius: 2px;
1294 - border: 1px solid #949494;
874 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
875 + border-radius: var(--wpds-border-radius-sm, 2px);
1295 876 }
1296 -@media not (prefers-reduced-motion) {
1297 - .components-combobox-control__suggestions-container {
1298 - transition: box-shadow 0.1s linear;
1299 - }
1300 -}
1301 877 @media (min-width: 600px) {
1302 878 .components-combobox-control__suggestions-container {
1303 879 font-size: 13px;
1304 880 /* Override core line-height. To be reviewed. */
@@ -1304,12 +880,16 @@
1304 880 /* Override core line-height. To be reviewed. */
1305 881 line-height: normal;
1306 882 }
1307 883 }
884 +.components-combobox-control__suggestions-container:hover:not(:disabled, [aria-disabled=true]) {
885 + border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
886 +}
1308 887 .components-combobox-control__suggestions-container:focus {
1309 - border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1310 - box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1311 - outline: 2px solid transparent;
888 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
889 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
890 + border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
891 + box-shadow: none;
1312 892 }
1313 893 .components-combobox-control__suggestions-container::placeholder {
1314 894 color: rgba(30, 30, 30, 0.62);
1315 895 }
@@ -1320,11 +900,10 @@
1320 900 width: 100%;
1321 901 padding: 0;
1322 902 }
1323 903 .components-combobox-control__suggestions-container:focus-within {
1324 - border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1325 - box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1326 - outline: 2px solid transparent;
904 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
905 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
1327 906 }
1328 907 .components-combobox-control__suggestions-container .components-spinner {
1329 908 margin: 0;
1330 909 }
@@ -1369,9 +948,9 @@
1369 948 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);
1370 949 }
1371 950
1372 951 .components-color-palette__custom-color-name {
1373 - color: var(--wp-components-color-foreground, #1e1e1e);
952 + color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
1374 953 margin: 0 1px;
1375 954 }
1376 955
1377 956 .components-color-palette__custom-color-value {
@@ -1433,14 +1012,19 @@
1433 1012 width: inherit;
1434 1013 border-radius: 50%;
1435 1014 padding: 0;
1436 1015 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25);
1437 - outline: 2px solid transparent;
1438 1016 }
1439 -.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus, .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button.is-active {
1017 +.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button.is-active {
1440 1018 box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25);
1441 - outline: 1.5px solid transparent;
1442 1019 }
1020 +.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus:not(:active) {
1021 + outline-offset: 1px;
1022 + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25), 0 0 0 calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) + 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
1023 +}
1024 +.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus:not(:active).is-active {
1025 + box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25), 0 0 0 calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) + 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
1026 +}
1443 1027
1444 1028 .components-custom-gradient-picker__remove-control-point-wrapper {
1445 1029 padding-bottom: 8px;
1446 1030 }
@@ -1460,28 +1044,8 @@
1460 1044 position: relative;
1461 1045 z-index: 0;
1462 1046 }
1463 1047
1464 -body.is-dragging-components-draggable {
1465 - cursor: move; /* Fallback for IE/Edge < 14 */
1466 - cursor: grabbing !important;
1467 -}
1468 -
1469 -.components-draggable__invisible-drag-image {
1470 - position: fixed;
1471 - right: -1000px;
1472 - height: 50px;
1473 - width: 50px;
1474 -}
1475 -
1476 -.components-draggable__clone {
1477 - position: fixed;
1478 - padding: 0;
1479 - background: transparent;
1480 - pointer-events: none;
1481 - z-index: 1000000000;
1482 -}
1483 -
1484 1048 .components-drop-zone {
1485 1049 position: absolute;
1486 1050 top: 0;
1487 1051 left: 0;
@@ -1548,9 +1112,9 @@
1548 1112 pointer-events: none;
1549 1113 }
1550 1114
1551 1115 .components-drop-zone__content-text {
1552 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1116 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1553 1117 font-size: 13px;
1554 1118 }
1555 1119
1556 1120 .components-dropdown {
@@ -1587,9 +1151,9 @@
1587 1151 }
1588 1152
1589 1153 .components-dropdown-menu__menu {
1590 1154 width: 100%;
1591 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1155 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1592 1156 font-size: 13px;
1593 1157 line-height: 1.4;
1594 1158 }
1595 1159 .components-dropdown-menu__menu .components-dropdown-menu__menu-item,
@@ -1598,9 +1162,9 @@
1598 1162 padding: 6px;
1599 1163 outline: none;
1600 1164 cursor: var(--wpds-cursor-control, pointer);
1601 1165 white-space: nowrap;
1602 - font-weight: 400;
1166 + font-weight: var(--wpds-typography-font-weight-default, 400);
1603 1167 }
1604 1168 .components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator,
1605 1169 .components-dropdown-menu__menu .components-menu-item.has-separator {
1606 1170 margin-top: 6px;
@@ -1611,9 +1175,9 @@
1611 1175 .components-dropdown-menu__menu .components-menu-item.has-separator::before {
1612 1176 display: block;
1613 1177 content: "";
1614 1178 box-sizing: content-box;
1615 - background-color: #ddd;
1179 + background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
1616 1180 position: absolute;
1617 1181 top: -3px;
1618 1182 right: 0;
1619 1183 left: 0;
@@ -1673,31 +1237,25 @@
1673 1237 margin: 2px;
1674 1238 }
1675 1239
1676 1240 .components-external-link {
1677 - color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1241 + color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1678 1242 text-decoration: none;
1679 1243 }
1680 -@media not (prefers-reduced-motion) {
1681 - .components-external-link {
1682 - transition: outline 0.1s ease-out;
1683 - }
1684 -}
1685 -.components-external-link {
1686 - outline: 0 solid transparent;
1687 - outline-offset: 1px;
1688 -}
1689 1244 .components-external-link:visited {
1690 - color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1245 + color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1691 1246 }
1692 1247 .components-external-link:hover, .components-external-link:active {
1693 - color: var(--wpds-color-fg-interactive-brand-active, var(--wp-admin-theme-color, #3858e9));
1248 + color: var(--wpds-color-foreground-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 52%, black));
1694 1249 }
1695 1250 .components-external-link:focus {
1696 - 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));
1697 1251 box-shadow: none;
1698 1252 border-radius: 0;
1699 1253 }
1254 +.components-external-link:focus:not(:active) {
1255 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
1256 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
1257 +}
1700 1258
1701 1259 .components-external-link__contents {
1702 1260 text-decoration: underline;
1703 1261 text-underline-offset: 0.2em;
@@ -1707,9 +1265,9 @@
1707 1265 .components-external-link__icon {
1708 1266 line-height: 1;
1709 1267 display: inline-block;
1710 1268 margin-inline-start: var(--wpds-dimension-padding-xs, 4px);
1711 - font-weight: var(--wpds-typography-font-weight-regular, 400);
1269 + font-weight: var(--wpds-typography-font-weight-default, 400);
1712 1270 }
1713 1271
1714 1272 .components-form-toggle {
1715 1273 position: relative;
@@ -1788,39 +1346,39 @@
1788 1346 background-color: #fff;
1789 1347 border-width: 0;
1790 1348 transform: translateX(-16px);
1791 1349 }
1792 -.components-form-toggle.is-disabled .components-form-toggle__track, .components-disabled .components-form-toggle .components-form-toggle__track {
1793 - background-color: var(--wp-components-color-gray-100, #f0f0f0);
1794 - border-color: var(--wp-components-color-gray-300, #ddd);
1350 +.components-form-toggle.is-disabled .components-form-toggle__track, [inert] .components-form-toggle .components-form-toggle__track {
1351 + background-color: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
1352 + border-color: var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
1795 1353 }
1796 1354 @media (forced-colors: active) {
1797 - .components-form-toggle.is-disabled .components-form-toggle__track, .components-disabled .components-form-toggle .components-form-toggle__track {
1355 + .components-form-toggle.is-disabled .components-form-toggle__track, [inert] .components-form-toggle .components-form-toggle__track {
1798 1356 border-color: GrayText;
1799 1357 }
1800 1358 }
1801 -.components-form-toggle.is-disabled .components-form-toggle__thumb, .components-disabled .components-form-toggle .components-form-toggle__thumb {
1802 - background-color: var(--wp-components-color-gray-400, #ccc);
1359 +.components-form-toggle.is-disabled .components-form-toggle__thumb, [inert] .components-form-toggle .components-form-toggle__thumb {
1360 + background-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1803 1361 box-shadow: none;
1804 1362 }
1805 1363 @media (forced-colors: active) {
1806 - .components-form-toggle.is-disabled .components-form-toggle__thumb, .components-disabled .components-form-toggle .components-form-toggle__thumb {
1364 + .components-form-toggle.is-disabled .components-form-toggle__thumb, [inert] .components-form-toggle .components-form-toggle__thumb {
1807 1365 border-color: GrayText;
1808 1366 }
1809 1367 }
1810 -.components-form-toggle.is-disabled.is-checked .components-form-toggle__track, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track {
1811 - background-color: var(--wp-components-color-gray-400, #ccc);
1812 - border-color: var(--wp-components-color-gray-400, #ccc);
1368 +.components-form-toggle.is-disabled.is-checked .components-form-toggle__track, [inert] .components-form-toggle.is-checked .components-form-toggle__track {
1369 + background-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1370 + border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1813 1371 }
1814 1372 @media (forced-colors: active) {
1815 - .components-form-toggle.is-disabled.is-checked .components-form-toggle__track, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track {
1373 + .components-form-toggle.is-disabled.is-checked .components-form-toggle__track, [inert] .components-form-toggle.is-checked .components-form-toggle__track {
1816 1374 border-color: GrayText;
1817 1375 }
1818 - .components-form-toggle.is-disabled.is-checked .components-form-toggle__track::after, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track::after {
1376 + .components-form-toggle.is-disabled.is-checked .components-form-toggle__track::after, [inert] .components-form-toggle.is-checked .components-form-toggle__track::after {
1819 1377 border-top-color: GrayText;
1820 1378 }
1821 1379 }
1822 -.components-form-toggle.is-disabled.is-checked .components-form-toggle__thumb, .components-disabled .components-form-toggle.is-checked .components-form-toggle__thumb {
1380 +.components-form-toggle.is-disabled.is-checked .components-form-toggle__thumb, [inert] .components-form-toggle.is-checked .components-form-toggle__thumb {
1823 1381 background-color: #fff;
1824 1382 }
1825 1383
1826 1384 .components-form-toggle input.components-form-toggle__input[type=checkbox] {
@@ -1845,23 +1403,17 @@
1845 1403 cursor: var(--wpds-cursor-control, pointer);
1846 1404 }
1847 1405
1848 1406 .components-form-token-field__input-container {
1849 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1407 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1850 1408 padding: 6px 8px;
1851 1409 /* Fonts smaller than 16px causes mobile safari to zoom. */
1852 1410 font-size: 16px;
1853 1411 /* Override core line-height. To be reviewed. */
1854 1412 line-height: normal;
1855 - box-shadow: 0 0 0 transparent;
1856 - border-radius: 2px;
1857 - border: 1px solid #949494;
1413 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
1414 + border-radius: var(--wpds-border-radius-sm, 2px);
1858 1415 }
1859 -@media not (prefers-reduced-motion) {
1860 - .components-form-token-field__input-container {
1861 - transition: box-shadow 0.1s linear;
1862 - }
1863 -}
1864 1416 @media (min-width: 600px) {
1865 1417 .components-form-token-field__input-container {
1866 1418 font-size: 13px;
1867 1419 /* Override core line-height. To be reviewed. */
@@ -1867,12 +1419,16 @@
1867 1419 /* Override core line-height. To be reviewed. */
1868 1420 line-height: normal;
1869 1421 }
1870 1422 }
1423 +.components-form-token-field__input-container:hover:not(:disabled, [aria-disabled=true]) {
1424 + border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
1425 +}
1871 1426 .components-form-token-field__input-container:focus {
1872 - border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1873 - box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1874 - outline: 2px solid transparent;
1427 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
1428 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
1429 + border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
1430 + box-shadow: none;
1875 1431 }
1876 1432 .components-form-token-field__input-container::placeholder {
1877 1433 color: rgba(30, 30, 30, 0.62);
1878 1434 }
@@ -1881,16 +1437,18 @@
1881 1437 padding: 0;
1882 1438 cursor: text;
1883 1439 }
1884 1440 .components-form-token-field__input-container.is-disabled {
1885 - background: var(--wp-components-color-gray-100, #f0f0f0);
1886 - border-color: var(--wp-components-color-gray-400, #ccc);
1441 + background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
1442 + border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1887 1443 cursor: default;
1888 1444 }
1445 +.components-form-token-field__input-container.is-disabled:hover {
1446 + border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1447 +}
1889 1448 .components-form-token-field__input-container.is-active {
1890 - border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1891 - box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1892 - outline: 2px solid transparent;
1449 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
1450 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
1893 1451 }
1894 1452 .components-form-token-field__input-container input[type=text].components-form-token-field__input {
1895 1453 display: inline-block;
1896 1454 flex: 1;
@@ -1904,9 +1462,9 @@
1904 1462 min-height: 24px;
1905 1463 min-width: 50px;
1906 1464 background: inherit;
1907 1465 border: 0;
1908 - color: var(--wp-components-color-foreground, #1e1e1e);
1466 + color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
1909 1467 box-shadow: none;
1910 1468 }
1911 1469 @media (min-width: 600px) {
1912 1470 .components-form-token-field__input-container input[type=text].components-form-token-field__input {
@@ -1940,10 +1498,10 @@
1940 1498 color: #757575;
1941 1499 }
1942 1500 .components-form-token-field__token.is-disabled .components-form-token-field__token-text,
1943 1501 .components-form-token-field__token.is-disabled .components-form-token-field__remove-token.components-button {
1944 - background: var(--wp-components-color-gray-100, #f0f0f0);
1945 - color: var(--wp-components-color-gray-600, #949494);
1502 + background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
1503 + color: var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1946 1504 }
1947 1505 .components-form-token-field__token.is-borderless {
1948 1506 position: relative;
1949 1507 padding: 0 0 0 24px;
@@ -2023,9 +1581,9 @@
2023 1581 padding: 0;
2024 1582 }
2025 1583
2026 1584 .components-form-token-field__suggestion {
2027 - color: var(--wp-components-color-foreground, #1e1e1e);
1585 + color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
2028 1586 display: block;
2029 1587 font-size: 13px;
2030 1588 padding: 8px 12px;
2031 1589 min-height: 32px;
@@ -2033,9 +1591,9 @@
2033 1591 box-sizing: border-box;
2034 1592 }
2035 1593 .components-form-token-field__suggestion.is-selected {
2036 1594 background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
2037 - color: var(--wp-components-color-foreground-inverted, #fff);
1595 + color: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc));
2038 1596 }
2039 1597 .components-form-token-field__suggestion[aria-disabled=true] {
2040 1598 pointer-events: none;
2041 1599 color: #949494;
@@ -2181,8 +1739,13 @@
2181 1739 outline-offset: calc(2 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
2182 1740 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);
2183 1741 }
2184 1742
1743 +.components-input-control__container:focus-within:not(:has(:is(.components-input-control__prefix, .components-input-control__suffix):focus-within)) .components-input-control__backdrop {
1744 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
1745 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
1746 +}
1747 +
2185 1748 .components-menu-group + .components-menu-group {
2186 1749 padding-top: 8px;
2187 1750 border-top: 1px solid #1e1e1e;
2188 1751 }
@@ -2202,9 +1765,9 @@
2202 1765 margin-bottom: 12px;
2203 1766 color: #757575;
2204 1767 text-transform: uppercase;
2205 1768 font-size: 11px;
2206 - font-weight: 499;
1769 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2207 1770 white-space: nowrap;
2208 1771 }
2209 1772
2210 1773 .components-menu-item__button,
@@ -2209,9 +1772,9 @@
2209 1772
2210 1773 .components-menu-item__button,
2211 1774 .components-menu-item__button.components-button {
2212 1775 width: 100%;
2213 - font-weight: 400;
1776 + font-weight: var(--wpds-typography-font-weight-default, 400);
2214 1777 }
2215 1778 .components-menu-item__button[role=menuitemradio] .components-menu-item__item:only-child, .components-menu-item__button[role=menuitemcheckbox] .components-menu-item__item:only-child,
2216 1779 .components-menu-item__button.components-button[role=menuitemradio] .components-menu-item__item:only-child,
2217 1780 .components-menu-item__button.components-button[role=menuitemcheckbox] .components-menu-item__item:only-child {
@@ -2301,8 +1864,12 @@
2301 1864 .components-menu-items-choice.components-button.has-icon {
2302 1865 padding-right: 12px;
2303 1866 }
2304 1867
1868 +body.modal-open {
1869 + overflow: hidden;
1870 +}
1871 +
2305 1872 .components-modal__screen-overlay {
2306 1873 position: fixed;
2307 1874 top: 0;
2308 1875 left: 0;
@@ -2495,9 +2062,9 @@
2495 2062 right: 0;
2496 2063 }
2497 2064 .components-modal__header .components-modal__header-heading {
2498 2065 font-size: 20px;
2499 - font-weight: 600;
2066 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2500 2067 }
2501 2068 .components-modal__header h1 {
2502 2069 line-height: 1;
2503 2070 margin: 0;
@@ -2502,9 +2069,9 @@
2502 2069 line-height: 1;
2503 2070 margin: 0;
2504 2071 }
2505 2072 .components-modal__content.has-scrolled-content:not(.hide-header) .components-modal__header {
2506 - border-bottom-color: #ddd;
2073 + border-bottom-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2507 2074 }
2508 2075 .components-modal__header + p {
2509 2076 margin-top: 0;
2510 2077 }
@@ -2542,72 +2109,73 @@
2542 2109 outline-offset: -2px;
2543 2110 }
2544 2111
2545 2112 .components-notice {
2546 - display: flex;
2547 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2548 - font-size: 13px;
2549 - background-color: #fff;
2550 - border-right: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
2551 - padding: 8px 12px;
2552 - align-items: center;
2553 - color: #1e1e1e;
2113 + --wp-components-notice-background-color: var(--wpds-color-background-surface-info-weak, #f3f9ff);
2114 + --wp-components-notice-border-color: var(--wpds-color-stroke-surface-info, #adc6e2);
2115 + --wp-components-notice-text-color: var(--wpds-color-foreground-content-info, #001b4f);
2116 + box-sizing: border-box;
2117 + display: grid;
2118 + grid-template-columns: 1fr auto;
2119 + align-items: start;
2120 + padding: var(--wpds-dimension-padding-md, 12px);
2121 + border: var(--wpds-border-width-xs, 1px) solid var(--wp-components-notice-border-color);
2122 + border-radius: var(--wpds-border-radius-lg, 8px);
2123 + background-color: var(--wp-components-notice-background-color);
2124 + color: var(--wp-components-notice-text-color);
2125 + font-family: var(--wpds-typography-font-family-body, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif);
2126 + font-size: var(--wpds-typography-font-size-md, 13px);
2127 + line-height: var(--wpds-typography-line-height-sm, 20px);
2554 2128 }
2555 -.components-notice.is-dismissible {
2556 - position: relative;
2557 -}
2558 -.components-notice.is-dismissible .components-notice__content {
2559 - margin-left: 25px;
2560 -}
2561 2129 .components-notice.is-success {
2562 - border-right-color: #4ab866;
2563 - background-color: rgb(238.8392857143, 248.6607142857, 241.3392857143);
2130 + --wp-components-notice-background-color: var(--wpds-color-background-surface-success-weak, #ebffed);
2131 + --wp-components-notice-border-color: var(--wpds-color-stroke-surface-success, #92d39d);
2132 + --wp-components-notice-text-color: var(--wpds-color-foreground-content-success, #002900);
2564 2133 }
2565 2134 .components-notice.is-warning {
2566 - border-right-color: #f0b849;
2567 - background-color: rgb(253.5913705584, 248.3324873096, 237.9086294416);
2135 + --wp-components-notice-background-color: var(--wpds-color-background-surface-warning-weak, #fff7e1);
2136 + --wp-components-notice-border-color: var(--wpds-color-stroke-surface-warning, #e1bd7c);
2137 + --wp-components-notice-text-color: var(--wpds-color-foreground-content-warning, #2e1900);
2568 2138 }
2569 2139 .components-notice.is-error {
2570 - border-right-color: #cc1818;
2571 - background-color: rgb(244.1052631579, 162.3947368421, 162.3947368421);
2140 + --wp-components-notice-background-color: var(--wpds-color-background-surface-error-weak, #fff6f5);
2141 + --wp-components-notice-border-color: var(--wpds-color-stroke-surface-error, #e0afa7);
2142 + --wp-components-notice-text-color: var(--wpds-color-foreground-content-error, #470000);
2572 2143 }
2573 2144
2574 2145 .components-notice__content {
2575 - flex-grow: 1;
2576 - margin-top: 4px;
2577 - margin-bottom: 4px;
2146 + grid-column: 1;
2147 + grid-row: 1;
2148 + padding-block: calc((var(--wpds-dimension-size-sm, 24px) - 1lh) / 2);
2578 2149 }
2579 2150
2580 2151 .components-notice__actions {
2152 + grid-column: 1;
2153 + grid-row: 2;
2581 2154 display: flex;
2582 2155 flex-wrap: wrap;
2583 2156 align-items: center;
2584 - gap: 12px;
2585 - margin-top: 12px;
2157 + gap: var(--wpds-dimension-gap-md, 12px);
2158 + margin-top: var(--wpds-dimension-gap-sm, 8px);
2586 2159 }
2587 2160
2588 2161 .components-notice__dismiss {
2589 - color: #757575;
2590 - align-self: flex-start;
2591 - flex-shrink: 0;
2162 + grid-column: 2;
2163 + grid-row: 1;
2164 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
2165 + margin-inline-start: var(--wpds-dimension-gap-xs, 4px);
2592 2166 }
2593 2167 .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 {
2594 - color: #1e1e1e;
2595 - background-color: transparent;
2168 + color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
2596 2169 }
2597 -.components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
2598 - box-shadow: none;
2599 -}
2600 2170
2601 2171 .components-notice-list {
2172 + display: flex;
2173 + flex-direction: column;
2174 + gap: var(--wpds-dimension-gap-md, 12px);
2602 2175 max-width: 100vw;
2603 2176 box-sizing: border-box;
2604 2177 }
2605 -.components-notice-list .components-notice__content {
2606 - margin-top: 12px;
2607 - margin-bottom: 12px;
2608 - line-height: 2;
2609 -}
2610 2178
2611 2179 .components-panel {
2612 2180 background: #fff;
2613 2181 border: 1px solid #e0e0e0;
@@ -2641,9 +2209,9 @@
2641 2209 flex-shrink: 0;
2642 2210 justify-content: space-between;
2643 2211 align-items: center;
2644 2212 padding: 0 16px;
2645 - border-bottom: 1px solid #ddd;
2213 + border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2646 2214 box-sizing: content-box;
2647 2215 height: 47px;
2648 2216 }
2649 2217 .components-panel__header h2 {
@@ -2684,15 +2252,12 @@
2684 2252
2685 2253 .components-panel__body-toggle.components-button {
2686 2254 position: relative;
2687 2255 padding: 16px 16px 16px 48px;
2688 - outline: none;
2689 2256 width: 100%;
2690 - font-weight: 499;
2257 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2691 2258 text-align: right;
2692 2259 color: #1e1e1e;
2693 - border: none;
2694 - box-shadow: none;
2695 2260 }
2696 2261 @media not (prefers-reduced-motion) {
2697 2262 .components-panel__body-toggle.components-button {
2698 2263 transition: 0.1s background ease-in-out;
@@ -2701,9 +2266,9 @@
2701 2266 .components-panel__body-toggle.components-button {
2702 2267 height: auto;
2703 2268 }
2704 2269 .components-panel__body-toggle.components-button:focus {
2705 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
2270 + outline-offset: calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) * -1);
2706 2271 border-radius: 0;
2707 2272 }
2708 2273 .components-panel__body-toggle.components-button .components-panel__arrow {
2709 2274 position: absolute;
@@ -2787,18 +2352,18 @@
2787 2352 .components-placeholder__error,
2788 2353 .components-placeholder__instructions,
2789 2354 .components-placeholder__label,
2790 2355 .components-placeholder__fieldset {
2791 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2356 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2792 2357 font-size: 13px;
2793 2358 letter-spacing: initial;
2794 2359 line-height: initial;
2795 2360 text-transform: none;
2796 - font-weight: normal;
2361 + font-weight: 400;
2797 2362 }
2798 2363
2799 2364 .components-placeholder__label {
2800 - font-weight: 600;
2365 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2801 2366 align-items: center;
2802 2367 display: flex;
2803 2368 }
2804 2369 .components-placeholder__label > svg,
@@ -2806,15 +2371,8 @@
2806 2371 .components-placeholder__label .block-editor-block-icon {
2807 2372 margin-left: 4px;
2808 2373 fill: currentColor;
2809 2374 }
2810 -@media (forced-colors: active) {
2811 - .components-placeholder__label > svg,
2812 - .components-placeholder__label .dashicon,
2813 - .components-placeholder__label .block-editor-block-icon {
2814 - fill: CanvasText;
2815 - }
2816 -}
2817 2375 .components-placeholder__label:empty {
2818 2376 display: none;
2819 2377 }
2820 2378
@@ -2828,9 +2386,9 @@
2828 2386 justify-content: flex-start;
2829 2387 }
2830 2388 .components-placeholder__fieldset p,
2831 2389 .components-placeholder__fieldset form p {
2832 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2390 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2833 2391 font-size: 13px;
2834 2392 }
2835 2393
2836 2394 .components-placeholder__fieldset.is-column-layout,
@@ -2838,23 +2396,17 @@
2838 2396 flex-direction: column;
2839 2397 }
2840 2398
2841 2399 .components-placeholder__input[type=url] {
2842 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2400 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2843 2401 padding: 6px 8px;
2844 2402 /* Fonts smaller than 16px causes mobile safari to zoom. */
2845 2403 font-size: 16px;
2846 2404 /* Override core line-height. To be reviewed. */
2847 2405 line-height: normal;
2848 - box-shadow: 0 0 0 transparent;
2849 - border-radius: 2px;
2850 - border: 1px solid #949494;
2406 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
2407 + border-radius: var(--wpds-border-radius-sm, 2px);
2851 2408 }
2852 -@media not (prefers-reduced-motion) {
2853 - .components-placeholder__input[type=url] {
2854 - transition: box-shadow 0.1s linear;
2855 - }
2856 -}
2857 2409 @media (min-width: 600px) {
2858 2410 .components-placeholder__input[type=url] {
2859 2411 font-size: 13px;
2860 2412 /* Override core line-height. To be reviewed. */
@@ -2860,12 +2412,16 @@
2860 2412 /* Override core line-height. To be reviewed. */
2861 2413 line-height: normal;
2862 2414 }
2863 2415 }
2416 +.components-placeholder__input[type=url]:hover:not(:disabled, [aria-disabled=true]) {
2417 + border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
2418 +}
2864 2419 .components-placeholder__input[type=url]:focus {
2865 - border-color: var(--wp-admin-theme-color);
2866 - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
2867 - outline: 2px solid transparent;
2420 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
2421 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2422 + border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
2423 + box-shadow: none;
2868 2424 }
2869 2425 .components-placeholder__input[type=url]::placeholder {
2870 2426 color: rgba(30, 30, 30, 0.62);
2871 2427 }
@@ -3096,9 +2652,9 @@
3096 2652 .components-radio-control {
3097 2653 border: 0;
3098 2654 margin: 0;
3099 2655 padding: 0;
3100 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2656 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3101 2657 font-size: 13px;
3102 2658 }
3103 2659
3104 2660 .components-radio-control__group-wrapper.has-help {
@@ -3187,14 +2743,14 @@
3187 2743 content: "";
3188 2744 border-radius: 50%;
3189 2745 }
3190 2746 .components-radio-control__input[type=radio]:disabled {
3191 - background: var(--wp-components-color-gray-100, #f0f0f0);
3192 - border: 1px solid var(--wp-components-color-gray-300, #ddd);
2747 + background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
2748 + border: 1px solid var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
3193 2749 opacity: 1;
3194 2750 }
3195 2751 .components-radio-control__input[type=radio]:disabled:checked::before {
3196 - border-color: var(--wp-components-color-gray-400, #ccc);
2752 + border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
3197 2753 opacity: 1;
3198 2754 }
3199 2755
3200 2756 .components-radio-control__label {
@@ -3199,10 +2755,11 @@
3199 2755
3200 2756 .components-radio-control__label {
3201 2757 grid-column: 2;
3202 2758 grid-row: 1;
2759 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
3203 2760 }
3204 -.components-radio-control:not(:disabled) .components-radio-control__label {
2761 +.components-radio-control__input:not(:disabled) + .components-radio-control__label {
3205 2762 cursor: var(--wpds-cursor-control, pointer);
3206 2763 }
3207 2764 .components-radio-control__label {
3208 2765 line-height: 24px;
@@ -3413,9 +2970,9 @@
3413 2970 -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
3414 2971 }
3415 2972
3416 2973 .components-snackbar {
3417 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2974 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3418 2975 font-size: 13px;
3419 2976 background: rgba(0, 0, 0, 0.85);
3420 2977 backdrop-filter: blur(16px) saturate(180%);
3421 2978 border-radius: 4px;
@@ -3457,14 +3014,10 @@
3457 3014 .components-snackbar__action.components-external-link {
3458 3015 margin-right: 32px;
3459 3016 color: #fff;
3460 3017 flex-shrink: 0;
3018 + --focus-color: #fff;
3461 3019 }
3462 -.components-snackbar__action.components-button:focus,
3463 -.components-snackbar__action.components-external-link:focus {
3464 - box-shadow: none;
3465 - outline: 1px dotted #fff;
3466 -}
3467 3020 .components-snackbar__action.components-button:hover,
3468 3021 .components-snackbar__action.components-external-link:hover {
3469 3022 text-decoration: none;
3470 3023 color: currentColor;
@@ -3504,17 +3057,22 @@
3504 3057 border-radius: 0;
3505 3058 height: 48px !important;
3506 3059 background: transparent;
3507 3060 border: none;
3508 - box-shadow: none;
3509 3061 cursor: var(--wpds-cursor-control, pointer);
3510 - padding: 3px 16px;
3062 + padding: 3px var(--wpds-dimension-padding-lg, 16px);
3511 3063 margin-right: 0;
3512 - font-weight: 400;
3064 + font-weight: var(--wpds-typography-font-weight-default, 400);
3065 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
3513 3066 }
3067 +.components-tab-panel__tabs-item:disabled, .components-tab-panel__tabs-item[aria-disabled=true] {
3068 + color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
3069 +}
3070 +.components-tab-panel__tabs-item:not(:disabled, [aria-disabled=true]):is(:hover, :focus-visible) {
3071 + color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
3072 +}
3514 3073 .components-tab-panel__tabs-item:focus:not(:disabled) {
3515 3074 position: relative;
3516 - box-shadow: none;
3517 3075 outline: none;
3518 3076 }
3519 3077 .components-tab-panel__tabs-item::after {
3520 3078 content: "";
@@ -3522,10 +3080,10 @@
3522 3080 left: 0;
3523 3081 bottom: 0;
3524 3082 right: 0;
3525 3083 pointer-events: none;
3526 - background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3527 - height: calc(0 * var(--wp-admin-border-width-focus));
3084 + background: var(--wpds-color-stroke-interactive-neutral-strong, #6e6e6e);
3085 + height: calc(0 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
3528 3086 border-radius: 0;
3529 3087 }
3530 3088 @media not (prefers-reduced-motion) {
3531 3089 .components-tab-panel__tabs-item::after {
@@ -3532,9 +3090,9 @@
3532 3090 transition: height 0.1s linear;
3533 3091 }
3534 3092 }
3535 3093 .components-tab-panel__tabs-item.is-active::after {
3536 - height: calc(1 * var(--wp-admin-border-width-focus));
3094 + height: calc(1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
3537 3095 outline: 2px solid transparent;
3538 3096 outline-offset: -1px;
3539 3097 }
3540 3098 .components-tab-panel__tabs-item::before {
@@ -3539,33 +3097,33 @@
3539 3097 }
3540 3098 .components-tab-panel__tabs-item::before {
3541 3099 content: "";
3542 3100 position: absolute;
3543 - top: 12px;
3544 - left: 12px;
3545 - bottom: 12px;
3546 - right: 12px;
3101 + inset: var(--wpds-dimension-padding-md, 12px);
3547 3102 pointer-events: none;
3548 - box-shadow: 0 0 0 0 transparent;
3549 - border-radius: 2px;
3103 + border-radius: var(--wpds-border-radius-sm, 2px);
3550 3104 }
3551 -@media not (prefers-reduced-motion) {
3552 - .components-tab-panel__tabs-item::before {
3553 - transition: box-shadow 0.1s linear;
3554 - }
3105 +.components-tab-panel__tabs-item:focus-visible::before {
3106 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
3107 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
3108 + outline-offset: 0;
3555 3109 }
3556 -.components-tab-panel__tabs-item:focus-visible::before {
3557 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3558 - outline: 2px solid transparent;
3110 +.components-tab-panel__tabs[aria-orientation=vertical] .components-tab-panel__tabs-item {
3111 + border-radius: var(--wpds-border-radius-sm, 2px);
3559 3112 }
3113 +.components-tab-panel__tabs[aria-orientation=vertical] .components-tab-panel__tabs-item::after {
3114 + display: none;
3115 +}
3116 +.components-tab-panel__tabs[aria-orientation=vertical] .components-tab-panel__tabs-item.is-active {
3117 + background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
3118 +}
3560 3119
3561 3120 .components-tab-panel__tab-content:focus {
3562 - box-shadow: none;
3563 3121 outline: none;
3564 3122 }
3565 3123 .components-tab-panel__tab-content:focus-visible {
3566 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3567 - outline: 2px solid transparent;
3124 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
3125 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
3568 3126 outline-offset: 0;
3569 3127 }
3570 3128
3571 3129 .components-text-control__input,
@@ -3582,40 +3140,21 @@
3582 3140 .components-text-control__input[type=email],
3583 3141 .components-text-control__input[type=month],
3584 3142 .components-text-control__input[type=number] {
3585 3143 width: 100%;
3586 - height: 32px;
3144 + height: 40px;
3587 3145 margin: 0;
3588 - background: var(--wp-components-color-background, #fff);
3589 - color: var(--wp-components-color-foreground, #1e1e1e);
3590 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3146 + background: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
3147 + color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
3148 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3591 3149 padding: 6px 8px;
3592 3150 /* Fonts smaller than 16px causes mobile safari to zoom. */
3593 3151 font-size: 16px;
3594 3152 /* Override core line-height. To be reviewed. */
3595 3153 line-height: normal;
3596 - box-shadow: 0 0 0 transparent;
3597 - border-radius: 2px;
3598 - border: 1px solid #949494;
3154 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
3155 + border-radius: var(--wpds-border-radius-sm, 2px);
3599 3156 }
3600 -@media not (prefers-reduced-motion) {
3601 - .components-text-control__input,
3602 - .components-text-control__input[type=text],
3603 - .components-text-control__input[type=tel],
3604 - .components-text-control__input[type=time],
3605 - .components-text-control__input[type=url],
3606 - .components-text-control__input[type=week],
3607 - .components-text-control__input[type=password],
3608 - .components-text-control__input[type=color],
3609 - .components-text-control__input[type=date],
3610 - .components-text-control__input[type=datetime],
3611 - .components-text-control__input[type=datetime-local],
3612 - .components-text-control__input[type=email],
3613 - .components-text-control__input[type=month],
3614 - .components-text-control__input[type=number] {
3615 - transition: box-shadow 0.1s linear;
3616 - }
3617 -}
3618 3157 @media (min-width: 600px) {
3619 3158 .components-text-control__input,
3620 3159 .components-text-control__input[type=text],
3621 3160 .components-text-control__input[type=tel],
@@ -3634,8 +3173,24 @@
3634 3173 /* Override core line-height. To be reviewed. */
3635 3174 line-height: normal;
3636 3175 }
3637 3176 }
3177 +.components-text-control__input:hover:not(:disabled, [aria-disabled=true]),
3178 +.components-text-control__input[type=text]:hover:not(:disabled, [aria-disabled=true]),
3179 +.components-text-control__input[type=tel]:hover:not(:disabled, [aria-disabled=true]),
3180 +.components-text-control__input[type=time]:hover:not(:disabled, [aria-disabled=true]),
3181 +.components-text-control__input[type=url]:hover:not(:disabled, [aria-disabled=true]),
3182 +.components-text-control__input[type=week]:hover:not(:disabled, [aria-disabled=true]),
3183 +.components-text-control__input[type=password]:hover:not(:disabled, [aria-disabled=true]),
3184 +.components-text-control__input[type=color]:hover:not(:disabled, [aria-disabled=true]),
3185 +.components-text-control__input[type=date]:hover:not(:disabled, [aria-disabled=true]),
3186 +.components-text-control__input[type=datetime]:hover:not(:disabled, [aria-disabled=true]),
3187 +.components-text-control__input[type=datetime-local]:hover:not(:disabled, [aria-disabled=true]),
3188 +.components-text-control__input[type=email]:hover:not(:disabled, [aria-disabled=true]),
3189 +.components-text-control__input[type=month]:hover:not(:disabled, [aria-disabled=true]),
3190 +.components-text-control__input[type=number]:hover:not(:disabled, [aria-disabled=true]) {
3191 + border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
3192 +}
3638 3193 .components-text-control__input:focus,
3639 3194 .components-text-control__input[type=text]:focus,
3640 3195 .components-text-control__input[type=tel]:focus,
3641 3196 .components-text-control__input[type=time]:focus,
@@ -3648,11 +3203,12 @@
3648 3203 .components-text-control__input[type=datetime-local]:focus,
3649 3204 .components-text-control__input[type=email]:focus,
3650 3205 .components-text-control__input[type=month]:focus,
3651 3206 .components-text-control__input[type=number]:focus {
3652 - border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3653 - box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3654 - outline: 2px solid transparent;
3207 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
3208 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
3209 + border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
3210 + box-shadow: none;
3655 3211 }
3656 3212 .components-text-control__input::placeholder,
3657 3213 .components-text-control__input[type=text]::placeholder,
3658 3214 .components-text-control__input[type=tel]::placeholder,
@@ -3682,9 +3238,10 @@
3682 3238 .components-text-control__input[type=datetime-local],
3683 3239 .components-text-control__input[type=email],
3684 3240 .components-text-control__input[type=month],
3685 3241 .components-text-control__input[type=number] {
3686 - border-color: var(--wp-components-color-gray-600, #949494);
3242 + padding-right: 12px;
3243 + padding-left: 12px;
3687 3244 }
3688 3245 .components-text-control__input::placeholder,
3689 3246 .components-text-control__input[type=text]::placeholder,
3690 3247 .components-text-control__input[type=tel]::placeholder,
@@ -3698,28 +3255,10 @@
3698 3255 .components-text-control__input[type=datetime-local]::placeholder,
3699 3256 .components-text-control__input[type=email]::placeholder,
3700 3257 .components-text-control__input[type=month]::placeholder,
3701 3258 .components-text-control__input[type=number]::placeholder {
3702 - color: color-mix(in srgb, var(--wp-components-color-foreground, #1e1e1e), transparent 38%);
3259 + color: color-mix(in srgb, var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e)), transparent 38%);
3703 3260 }
3704 -.components-text-control__input.is-next-40px-default-size,
3705 -.components-text-control__input[type=text].is-next-40px-default-size,
3706 -.components-text-control__input[type=tel].is-next-40px-default-size,
3707 -.components-text-control__input[type=time].is-next-40px-default-size,
3708 -.components-text-control__input[type=url].is-next-40px-default-size,
3709 -.components-text-control__input[type=week].is-next-40px-default-size,
3710 -.components-text-control__input[type=password].is-next-40px-default-size,
3711 -.components-text-control__input[type=color].is-next-40px-default-size,
3712 -.components-text-control__input[type=date].is-next-40px-default-size,
3713 -.components-text-control__input[type=datetime].is-next-40px-default-size,
3714 -.components-text-control__input[type=datetime-local].is-next-40px-default-size,
3715 -.components-text-control__input[type=email].is-next-40px-default-size,
3716 -.components-text-control__input[type=month].is-next-40px-default-size,
3717 -.components-text-control__input[type=number].is-next-40px-default-size {
3718 - height: 40px;
3719 - padding-right: 12px;
3720 - padding-left: 12px;
3721 -}
3722 3261
3723 3262 .components-text-control__input[type=email],
3724 3263 .components-text-control__input[type=url] {
3725 3264 direction: ltr;
@@ -3730,9 +3269,9 @@
3730 3269 color: #757575;
3731 3270 }
3732 3271 .components-tip svg {
3733 3272 align-self: center;
3734 - fill: #f0b849;
3273 + color: #f0b849;
3735 3274 flex-shrink: 0;
3736 3275 margin-left: 16px;
3737 3276 }
3738 3277 .components-tip p {
@@ -3740,8 +3279,9 @@
3740 3279 }
3741 3280
3742 3281 .components-toggle-control__label {
3743 3282 line-height: 16px;
3283 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
3744 3284 }
3745 3285 .components-toggle-control__label:not(.is-disabled) {
3746 3286 cursor: var(--wpds-cursor-control, pointer);
3747 3287 }
@@ -3752,9 +3292,9 @@
3752 3292 }
3753 3293
3754 3294 .components-accessible-toolbar {
3755 3295 display: inline-flex;
3756 - border: 1px solid var(--wp-components-color-foreground, #1e1e1e);
3296 + border: 1px solid var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
3757 3297 border-radius: 2px;
3758 3298 flex-shrink: 0;
3759 3299 }
3760 3300 .components-accessible-toolbar > .components-toolbar-group:last-child {
@@ -3819,9 +3359,9 @@
3819 3359 background: transparent;
3820 3360 }
3821 3361 .components-accessible-toolbar .components-button.is-pressed::before,
3822 3362 .components-toolbar .components-button.is-pressed::before {
3823 - background: var(--wp-components-color-foreground, #1e1e1e);
3363 + background: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
3824 3364 }
3825 3365 .components-accessible-toolbar .components-button:focus::before,
3826 3366 .components-toolbar .components-button:focus::before {
3827 3367 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -3849,11 +3389,11 @@
3849 3389 padding: 5px 0 5px 10px;
3850 3390 }
3851 3391 .components-toolbar__control.components-button[data-subscript]::after {
3852 3392 content: attr(data-subscript);
3853 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3393 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3854 3394 font-size: 13px;
3855 - font-weight: 600;
3395 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3856 3396 line-height: 12px;
3857 3397 position: absolute;
3858 3398 left: 8px;
3859 3399 bottom: 10px;
@@ -3863,10 +3403,10 @@
3863 3403 }
3864 3404
3865 3405 .components-toolbar-group {
3866 3406 min-height: 48px;
3867 - border-left: 1px solid var(--wp-components-color-foreground, #1e1e1e);
3868 - background-color: var(--wp-components-color-background, #fff);
3407 + border-left: 1px solid var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
3408 + background-color: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
3869 3409 display: inline-flex;
3870 3410 flex-shrink: 0;
3871 3411 flex-wrap: wrap;
3872 3412 padding-right: 6px;
@@ -3887,9 +3427,9 @@
3887 3427 padding-left: 6px;
3888 3428 }
3889 3429 .components-toolbar-group .components-button.components-button svg,
3890 3430 .components-toolbar-group .components-button.has-icon.has-icon svg {
3891 - min-width: 24px;
3431 + min-width: var(--wpds-dimension-size-sm, 24px);
3892 3432 }
3893 3433 .components-toolbar-group .components-button.components-button::before,
3894 3434 .components-toolbar-group .components-button.has-icon.has-icon::before {
3895 3435 right: 2px;
@@ -3898,10 +3438,10 @@
3898 3438
3899 3439 .components-toolbar {
3900 3440 min-height: 48px;
3901 3441 margin: 0;
3902 - border: 1px solid var(--wp-components-color-foreground, #1e1e1e);
3903 - background-color: var(--wp-components-color-background, #fff);
3442 + border: 1px solid var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
3443 + background-color: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
3904 3444 display: inline-flex;
3905 3445 flex-shrink: 0;
3906 3446 flex-wrap: wrap;
3907 3447 }
@@ -3922,9 +3462,9 @@
3922 3462 div.components-toolbar > div + div.has-left-divider::before {
3923 3463 display: inline-block;
3924 3464 content: "";
3925 3465 box-sizing: content-box;
3926 - background-color: #ddd;
3466 + background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3927 3467 position: absolute;
3928 3468 top: 8px;
3929 3469 right: -3px;
3930 3470 width: 1px;
@@ -3932,10 +3472,10 @@
3932 3472 }
3933 3473
3934 3474 .components-tooltip {
3935 3475 background: #000;
3936 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3937 - border-radius: 2px;
3476 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3477 + border-radius: var(--wpds-border-radius-md, 4px);
3938 3478 color: #f0f0f0;
3939 3479 text-align: center;
3940 3480 line-height: 1.4;
3941 3481 font-size: 12px;
@@ -3947,36 +3487,19 @@
3947 3487 .components-tooltip__shortcut {
3948 3488 margin-right: 8px;
3949 3489 }
3950 3490
3951 -.components-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
3952 - --wp-components-color-accent: #cc1818;
3953 - border-color: #cc1818;
3491 +.components-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-validated-control__content-editable [role=textbox], .components-validated-control__wrapper-with-error-delegate:has(select:invalid[data-validity-visible]) .components-input-control__backdrop, .components-validated-control textarea:invalid[data-validity-visible], .components-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
3492 + --focus-color: var(--wpds-color-stroke-interactive-error, #cc1818);
3954 3493 }
3955 -.components-validated-control :is(textarea, input[type=text]):invalid[data-validity-visible] {
3956 - --wp-admin-theme-color: #cc1818;
3957 - --wp-components-color-accent: #cc1818;
3958 - border-color: #cc1818;
3494 +
3495 +.components-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-validated-control__content-editable [role=textbox], .components-validated-control__wrapper-with-error-delegate:has(select:invalid[data-validity-visible]) .components-input-control__backdrop, .components-validated-control textarea:invalid[data-validity-visible], .components-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
3496 + border-color: var(--wpds-color-stroke-interactive-error, #cc1818);
3959 3497 }
3960 -.components-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])) {
3961 - --wp-components-color-accent: #cc1818;
3962 -}
3963 3498
3964 3499 .components-validated-control__wrapper-with-error-delegate {
3965 3500 position: relative;
3966 3501 }
3967 -.components-validated-control__wrapper-with-error-delegate:has(select:invalid[data-validity-visible]) .components-input-control__backdrop {
3968 - --wp-components-color-accent: #cc1818;
3969 - border-color: #cc1818;
3970 -}
3971 -.components-validated-control__wrapper-with-error-delegate:has(input[type=radio]:invalid[data-validity-visible]) {
3972 - --wp-components-color-accent: #cc1818;
3973 -}
3974 -.components-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])) {
3975 - --wp-components-color-accent: #cc1818;
3976 - border-color: #cc1818;
3977 -}
3978 -
3979 3502 .components-validated-control__error-delegate {
3980 3503 position: absolute;
3981 3504 top: 0;
3982 3505 height: 100%;
@@ -3984,46 +3507,8 @@
3984 3507 opacity: 0;
3985 3508 pointer-events: none;
3986 3509 }
3987 3510
3988 -.components-validated-control__indicator {
3989 - display: flex;
3990 - align-items: flex-start;
3991 - gap: 4px;
3992 - margin: 8px 0 0;
3993 - font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3994 - font-size: 12px;
3995 - line-height: 16px;
3996 - color: var(--wp-components-color-gray-700, #757575);
3997 - animation: components-validated-control__indicator-jump 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
3998 -}
3999 -.components-validated-control__indicator.is-invalid {
4000 - color: #cc1818;
4001 -}
4002 -.components-validated-control__indicator.is-valid {
4003 - color: color-mix(in srgb, #000 30%, #4ab866);
4004 -}
4005 -
4006 -.components-validated-control__indicator-icon {
4007 - flex-shrink: 0;
4008 -}
4009 -
4010 -.components-validated-control__indicator-spinner {
4011 - margin: 2px;
4012 - width: 12px;
4013 - height: 12px;
4014 -}
4015 -
4016 -@keyframes components-validated-control__indicator-jump {
4017 - 0% {
4018 - transform: translateY(-4px);
4019 - opacity: 0;
4020 - }
4021 - 100% {
4022 - transform: translateY(0);
4023 - opacity: 1;
4024 - }
4025 -}
4026 3511 :root {
4027 3512 --wp-admin-theme-color: #3858e9;
4028 3513 --wp-admin-theme-color--rgb: 56, 88, 233;
4029 3514 --wp-admin-theme-color-darker-10: rgb(33.0384615385, 68.7307692308, 230.4615384615);