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.css +312 -827 23.2.1 → 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: left;
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-left: -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-left: -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: left;
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-right: 8px;
527 512 padding-left: 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: 200px 0;
@@ -563,368 +538,8 @@
563 538 0% {
564 539 background-position: 200px 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-right: 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 left: 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 - left: 1px;
1154 - bottom: 1px;
1155 - right: 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 - left: -1px;
1202 - bottom: -1px;
1203 - right: -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 - left: 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 }
@@ -1371,9 +950,9 @@
1371 950 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);
1372 951 }
1373 952
1374 953 .components-color-palette__custom-color-name {
1375 - color: var(--wp-components-color-foreground, #1e1e1e);
954 + color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
1376 955 margin: 0 1px;
1377 956 }
1378 957
1379 958 .components-color-palette__custom-color-value {
@@ -1437,14 +1016,19 @@
1437 1016 width: inherit;
1438 1017 border-radius: 50%;
1439 1018 padding: 0;
1440 1019 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25);
1441 - outline: 2px solid transparent;
1442 1020 }
1443 -.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 {
1021 +.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button.is-active {
1444 1022 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);
1445 - outline: 1.5px solid transparent;
1446 1023 }
1024 +.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus:not(:active) {
1025 + outline-offset: 1px;
1026 + 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);
1027 +}
1028 +.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus:not(:active).is-active {
1029 + 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);
1030 +}
1447 1031
1448 1032 .components-custom-gradient-picker__remove-control-point-wrapper {
1449 1033 padding-bottom: 8px;
1450 1034 }
@@ -1465,28 +1049,8 @@
1465 1049 position: relative;
1466 1050 z-index: 0;
1467 1051 }
1468 1052
1469 -body.is-dragging-components-draggable {
1470 - cursor: move; /* Fallback for IE/Edge < 14 */
1471 - cursor: grabbing !important;
1472 -}
1473 -
1474 -.components-draggable__invisible-drag-image {
1475 - position: fixed;
1476 - left: -1000px;
1477 - height: 50px;
1478 - width: 50px;
1479 -}
1480 -
1481 -.components-draggable__clone {
1482 - position: fixed;
1483 - padding: 0;
1484 - background: transparent;
1485 - pointer-events: none;
1486 - z-index: 1000000000;
1487 -}
1488 -
1489 1053 .components-drop-zone {
1490 1054 position: absolute;
1491 1055 top: 0;
1492 1056 right: 0;
@@ -1553,9 +1117,9 @@
1553 1117 pointer-events: none;
1554 1118 }
1555 1119
1556 1120 .components-drop-zone__content-text {
1557 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1121 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1558 1122 font-size: 13px;
1559 1123 }
1560 1124
1561 1125 .components-dropdown {
@@ -1592,9 +1156,9 @@
1592 1156 }
1593 1157
1594 1158 .components-dropdown-menu__menu {
1595 1159 width: 100%;
1596 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1160 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1597 1161 font-size: 13px;
1598 1162 line-height: 1.4;
1599 1163 }
1600 1164 .components-dropdown-menu__menu .components-dropdown-menu__menu-item,
@@ -1603,9 +1167,9 @@
1603 1167 padding: 6px;
1604 1168 outline: none;
1605 1169 cursor: var(--wpds-cursor-control, pointer);
1606 1170 white-space: nowrap;
1607 - font-weight: 400;
1171 + font-weight: var(--wpds-typography-font-weight-default, 400);
1608 1172 }
1609 1173 .components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator,
1610 1174 .components-dropdown-menu__menu .components-menu-item.has-separator {
1611 1175 margin-top: 6px;
@@ -1616,9 +1180,9 @@
1616 1180 .components-dropdown-menu__menu .components-menu-item.has-separator::before {
1617 1181 display: block;
1618 1182 content: "";
1619 1183 box-sizing: content-box;
1620 - background-color: #ddd;
1184 + background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
1621 1185 position: absolute;
1622 1186 top: -3px;
1623 1187 left: 0;
1624 1188 right: 0;
@@ -1678,31 +1242,25 @@
1678 1242 margin: 2px;
1679 1243 }
1680 1244
1681 1245 .components-external-link {
1682 - color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1246 + color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1683 1247 text-decoration: none;
1684 1248 }
1685 -@media not (prefers-reduced-motion) {
1686 - .components-external-link {
1687 - transition: outline 0.1s ease-out;
1688 - }
1689 -}
1690 -.components-external-link {
1691 - outline: 0 solid transparent;
1692 - outline-offset: 1px;
1693 -}
1694 1249 .components-external-link:visited {
1695 - color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1250 + color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1696 1251 }
1697 1252 .components-external-link:hover, .components-external-link:active {
1698 - color: var(--wpds-color-fg-interactive-brand-active, var(--wp-admin-theme-color, #3858e9));
1253 + color: var(--wpds-color-foreground-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 52%, black));
1699 1254 }
1700 1255 .components-external-link:focus {
1701 - 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));
1702 1256 box-shadow: none;
1703 1257 border-radius: 0;
1704 1258 }
1259 +.components-external-link:focus:not(:active) {
1260 + 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)));
1261 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
1262 +}
1705 1263
1706 1264 .components-external-link__contents {
1707 1265 text-decoration: underline;
1708 1266 text-underline-offset: 0.2em;
@@ -1712,9 +1270,9 @@
1712 1270 .components-external-link__icon {
1713 1271 line-height: 1;
1714 1272 display: inline-block;
1715 1273 margin-inline-start: var(--wpds-dimension-padding-xs, 4px);
1716 - font-weight: var(--wpds-typography-font-weight-regular, 400);
1274 + font-weight: var(--wpds-typography-font-weight-default, 400);
1717 1275 }
1718 1276
1719 1277 .components-form-toggle {
1720 1278 position: relative;
@@ -1793,39 +1351,39 @@
1793 1351 background-color: #fff;
1794 1352 border-width: 0;
1795 1353 transform: translateX(16px);
1796 1354 }
1797 -.components-form-toggle.is-disabled .components-form-toggle__track, .components-disabled .components-form-toggle .components-form-toggle__track {
1798 - background-color: var(--wp-components-color-gray-100, #f0f0f0);
1799 - border-color: var(--wp-components-color-gray-300, #ddd);
1355 +.components-form-toggle.is-disabled .components-form-toggle__track, [inert] .components-form-toggle .components-form-toggle__track {
1356 + background-color: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
1357 + border-color: var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
1800 1358 }
1801 1359 @media (forced-colors: active) {
1802 - .components-form-toggle.is-disabled .components-form-toggle__track, .components-disabled .components-form-toggle .components-form-toggle__track {
1360 + .components-form-toggle.is-disabled .components-form-toggle__track, [inert] .components-form-toggle .components-form-toggle__track {
1803 1361 border-color: GrayText;
1804 1362 }
1805 1363 }
1806 -.components-form-toggle.is-disabled .components-form-toggle__thumb, .components-disabled .components-form-toggle .components-form-toggle__thumb {
1807 - background-color: var(--wp-components-color-gray-400, #ccc);
1364 +.components-form-toggle.is-disabled .components-form-toggle__thumb, [inert] .components-form-toggle .components-form-toggle__thumb {
1365 + background-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1808 1366 box-shadow: none;
1809 1367 }
1810 1368 @media (forced-colors: active) {
1811 - .components-form-toggle.is-disabled .components-form-toggle__thumb, .components-disabled .components-form-toggle .components-form-toggle__thumb {
1369 + .components-form-toggle.is-disabled .components-form-toggle__thumb, [inert] .components-form-toggle .components-form-toggle__thumb {
1812 1370 border-color: GrayText;
1813 1371 }
1814 1372 }
1815 -.components-form-toggle.is-disabled.is-checked .components-form-toggle__track, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track {
1816 - background-color: var(--wp-components-color-gray-400, #ccc);
1817 - border-color: var(--wp-components-color-gray-400, #ccc);
1373 +.components-form-toggle.is-disabled.is-checked .components-form-toggle__track, [inert] .components-form-toggle.is-checked .components-form-toggle__track {
1374 + background-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1375 + border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1818 1376 }
1819 1377 @media (forced-colors: active) {
1820 - .components-form-toggle.is-disabled.is-checked .components-form-toggle__track, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track {
1378 + .components-form-toggle.is-disabled.is-checked .components-form-toggle__track, [inert] .components-form-toggle.is-checked .components-form-toggle__track {
1821 1379 border-color: GrayText;
1822 1380 }
1823 - .components-form-toggle.is-disabled.is-checked .components-form-toggle__track::after, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track::after {
1381 + .components-form-toggle.is-disabled.is-checked .components-form-toggle__track::after, [inert] .components-form-toggle.is-checked .components-form-toggle__track::after {
1824 1382 border-top-color: GrayText;
1825 1383 }
1826 1384 }
1827 -.components-form-toggle.is-disabled.is-checked .components-form-toggle__thumb, .components-disabled .components-form-toggle.is-checked .components-form-toggle__thumb {
1385 +.components-form-toggle.is-disabled.is-checked .components-form-toggle__thumb, [inert] .components-form-toggle.is-checked .components-form-toggle__thumb {
1828 1386 background-color: #fff;
1829 1387 }
1830 1388
1831 1389 .components-form-toggle input.components-form-toggle__input[type=checkbox] {
@@ -1850,23 +1408,17 @@
1850 1408 cursor: var(--wpds-cursor-control, pointer);
1851 1409 }
1852 1410
1853 1411 .components-form-token-field__input-container {
1854 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1412 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1855 1413 padding: 6px 8px;
1856 1414 /* Fonts smaller than 16px causes mobile safari to zoom. */
1857 1415 font-size: 16px;
1858 1416 /* Override core line-height. To be reviewed. */
1859 1417 line-height: normal;
1860 - box-shadow: 0 0 0 transparent;
1861 - border-radius: 2px;
1862 - border: 1px solid #949494;
1418 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
1419 + border-radius: var(--wpds-border-radius-sm, 2px);
1863 1420 }
1864 -@media not (prefers-reduced-motion) {
1865 - .components-form-token-field__input-container {
1866 - transition: box-shadow 0.1s linear;
1867 - }
1868 -}
1869 1421 @media (min-width: 600px) {
1870 1422 .components-form-token-field__input-container {
1871 1423 font-size: 13px;
1872 1424 /* Override core line-height. To be reviewed. */
@@ -1872,12 +1424,16 @@
1872 1424 /* Override core line-height. To be reviewed. */
1873 1425 line-height: normal;
1874 1426 }
1875 1427 }
1428 +.components-form-token-field__input-container:hover:not(:disabled, [aria-disabled=true]) {
1429 + border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
1430 +}
1876 1431 .components-form-token-field__input-container:focus {
1877 - border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1878 - box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1879 - outline: 2px solid transparent;
1432 + 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)));
1433 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
1434 + border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
1435 + box-shadow: none;
1880 1436 }
1881 1437 .components-form-token-field__input-container::placeholder {
1882 1438 color: rgba(30, 30, 30, 0.62);
1883 1439 }
@@ -1886,16 +1442,18 @@
1886 1442 padding: 0;
1887 1443 cursor: text;
1888 1444 }
1889 1445 .components-form-token-field__input-container.is-disabled {
1890 - background: var(--wp-components-color-gray-100, #f0f0f0);
1891 - border-color: var(--wp-components-color-gray-400, #ccc);
1446 + background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
1447 + border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1892 1448 cursor: default;
1893 1449 }
1450 +.components-form-token-field__input-container.is-disabled:hover {
1451 + border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1452 +}
1894 1453 .components-form-token-field__input-container.is-active {
1895 - border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1896 - box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1897 - outline: 2px solid transparent;
1454 + 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)));
1455 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
1898 1456 }
1899 1457 .components-form-token-field__input-container input[type=text].components-form-token-field__input {
1900 1458 display: inline-block;
1901 1459 flex: 1;
@@ -1909,9 +1467,9 @@
1909 1467 min-height: 24px;
1910 1468 min-width: 50px;
1911 1469 background: inherit;
1912 1470 border: 0;
1913 - color: var(--wp-components-color-foreground, #1e1e1e);
1471 + color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
1914 1472 box-shadow: none;
1915 1473 }
1916 1474 @media (min-width: 600px) {
1917 1475 .components-form-token-field__input-container input[type=text].components-form-token-field__input {
@@ -1945,10 +1503,10 @@
1945 1503 color: #757575;
1946 1504 }
1947 1505 .components-form-token-field__token.is-disabled .components-form-token-field__token-text,
1948 1506 .components-form-token-field__token.is-disabled .components-form-token-field__remove-token.components-button {
1949 - background: var(--wp-components-color-gray-100, #f0f0f0);
1950 - color: var(--wp-components-color-gray-600, #949494);
1507 + background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
1508 + color: var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1951 1509 }
1952 1510 .components-form-token-field__token.is-borderless {
1953 1511 position: relative;
1954 1512 padding: 0 24px 0 0;
@@ -2028,9 +1586,9 @@
2028 1586 padding: 0;
2029 1587 }
2030 1588
2031 1589 .components-form-token-field__suggestion {
2032 - color: var(--wp-components-color-foreground, #1e1e1e);
1590 + color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
2033 1591 display: block;
2034 1592 font-size: 13px;
2035 1593 padding: 8px 12px;
2036 1594 min-height: 32px;
@@ -2038,9 +1596,9 @@
2038 1596 box-sizing: border-box;
2039 1597 }
2040 1598 .components-form-token-field__suggestion.is-selected {
2041 1599 background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
2042 - color: var(--wp-components-color-foreground-inverted, #fff);
1600 + color: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc));
2043 1601 }
2044 1602 .components-form-token-field__suggestion[aria-disabled=true] {
2045 1603 pointer-events: none;
2046 1604 color: #949494;
@@ -2186,8 +1744,13 @@
2186 1744 outline-offset: calc(2 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
2187 1745 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);
2188 1746 }
2189 1747
1748 +.components-input-control__container:focus-within:not(:has(:is(.components-input-control__prefix, .components-input-control__suffix):focus-within)) .components-input-control__backdrop {
1749 + 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)));
1750 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
1751 +}
1752 +
2190 1753 .components-menu-group + .components-menu-group {
2191 1754 padding-top: 8px;
2192 1755 border-top: 1px solid #1e1e1e;
2193 1756 }
@@ -2207,9 +1770,9 @@
2207 1770 margin-bottom: 12px;
2208 1771 color: #757575;
2209 1772 text-transform: uppercase;
2210 1773 font-size: 11px;
2211 - font-weight: 499;
1774 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2212 1775 white-space: nowrap;
2213 1776 }
2214 1777
2215 1778 .components-menu-item__button,
@@ -2214,9 +1777,9 @@
2214 1777
2215 1778 .components-menu-item__button,
2216 1779 .components-menu-item__button.components-button {
2217 1780 width: 100%;
2218 - font-weight: 400;
1781 + font-weight: var(--wpds-typography-font-weight-default, 400);
2219 1782 }
2220 1783 .components-menu-item__button[role=menuitemradio] .components-menu-item__item:only-child, .components-menu-item__button[role=menuitemcheckbox] .components-menu-item__item:only-child,
2221 1784 .components-menu-item__button.components-button[role=menuitemradio] .components-menu-item__item:only-child,
2222 1785 .components-menu-item__button.components-button[role=menuitemcheckbox] .components-menu-item__item:only-child {
@@ -2306,8 +1869,12 @@
2306 1869 .components-menu-items-choice.components-button.has-icon {
2307 1870 padding-left: 12px;
2308 1871 }
2309 1872
1873 +body.modal-open {
1874 + overflow: hidden;
1875 +}
1876 +
2310 1877 .components-modal__screen-overlay {
2311 1878 position: fixed;
2312 1879 top: 0;
2313 1880 right: 0;
@@ -2500,9 +2067,9 @@
2500 2067 left: 0;
2501 2068 }
2502 2069 .components-modal__header .components-modal__header-heading {
2503 2070 font-size: 20px;
2504 - font-weight: 600;
2071 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2505 2072 }
2506 2073 .components-modal__header h1 {
2507 2074 line-height: 1;
2508 2075 margin: 0;
@@ -2507,9 +2074,9 @@
2507 2074 line-height: 1;
2508 2075 margin: 0;
2509 2076 }
2510 2077 .components-modal__content.has-scrolled-content:not(.hide-header) .components-modal__header {
2511 - border-bottom-color: #ddd;
2078 + border-bottom-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2512 2079 }
2513 2080 .components-modal__header + p {
2514 2081 margin-top: 0;
2515 2082 }
@@ -2547,72 +2114,73 @@
2547 2114 outline-offset: -2px;
2548 2115 }
2549 2116
2550 2117 .components-notice {
2551 - display: flex;
2552 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2553 - font-size: 13px;
2554 - background-color: #fff;
2555 - border-left: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
2556 - padding: 8px 12px;
2557 - align-items: center;
2558 - color: #1e1e1e;
2118 + --wp-components-notice-background-color: var(--wpds-color-background-surface-info-weak, #f3f9ff);
2119 + --wp-components-notice-border-color: var(--wpds-color-stroke-surface-info, #adc6e2);
2120 + --wp-components-notice-text-color: var(--wpds-color-foreground-content-info, #001b4f);
2121 + box-sizing: border-box;
2122 + display: grid;
2123 + grid-template-columns: 1fr auto;
2124 + align-items: start;
2125 + padding: var(--wpds-dimension-padding-md, 12px);
2126 + border: var(--wpds-border-width-xs, 1px) solid var(--wp-components-notice-border-color);
2127 + border-radius: var(--wpds-border-radius-lg, 8px);
2128 + background-color: var(--wp-components-notice-background-color);
2129 + color: var(--wp-components-notice-text-color);
2130 + font-family: var(--wpds-typography-font-family-body, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif);
2131 + font-size: var(--wpds-typography-font-size-md, 13px);
2132 + line-height: var(--wpds-typography-line-height-sm, 20px);
2559 2133 }
2560 -.components-notice.is-dismissible {
2561 - position: relative;
2562 -}
2563 -.components-notice.is-dismissible .components-notice__content {
2564 - margin-right: 25px;
2565 -}
2566 2134 .components-notice.is-success {
2567 - border-left-color: #4ab866;
2568 - background-color: rgb(238.8392857143, 248.6607142857, 241.3392857143);
2135 + --wp-components-notice-background-color: var(--wpds-color-background-surface-success-weak, #ebffed);
2136 + --wp-components-notice-border-color: var(--wpds-color-stroke-surface-success, #92d39d);
2137 + --wp-components-notice-text-color: var(--wpds-color-foreground-content-success, #002900);
2569 2138 }
2570 2139 .components-notice.is-warning {
2571 - border-left-color: #f0b849;
2572 - background-color: rgb(253.5913705584, 248.3324873096, 237.9086294416);
2140 + --wp-components-notice-background-color: var(--wpds-color-background-surface-warning-weak, #fff7e1);
2141 + --wp-components-notice-border-color: var(--wpds-color-stroke-surface-warning, #e1bd7c);
2142 + --wp-components-notice-text-color: var(--wpds-color-foreground-content-warning, #2e1900);
2573 2143 }
2574 2144 .components-notice.is-error {
2575 - border-left-color: #cc1818;
2576 - background-color: rgb(244.1052631579, 162.3947368421, 162.3947368421);
2145 + --wp-components-notice-background-color: var(--wpds-color-background-surface-error-weak, #fff6f5);
2146 + --wp-components-notice-border-color: var(--wpds-color-stroke-surface-error, #e0afa7);
2147 + --wp-components-notice-text-color: var(--wpds-color-foreground-content-error, #470000);
2577 2148 }
2578 2149
2579 2150 .components-notice__content {
2580 - flex-grow: 1;
2581 - margin-top: 4px;
2582 - margin-bottom: 4px;
2151 + grid-column: 1;
2152 + grid-row: 1;
2153 + padding-block: calc((var(--wpds-dimension-size-sm, 24px) - 1lh) / 2);
2583 2154 }
2584 2155
2585 2156 .components-notice__actions {
2157 + grid-column: 1;
2158 + grid-row: 2;
2586 2159 display: flex;
2587 2160 flex-wrap: wrap;
2588 2161 align-items: center;
2589 - gap: 12px;
2590 - margin-top: 12px;
2162 + gap: var(--wpds-dimension-gap-md, 12px);
2163 + margin-top: var(--wpds-dimension-gap-sm, 8px);
2591 2164 }
2592 2165
2593 2166 .components-notice__dismiss {
2594 - color: #757575;
2595 - align-self: flex-start;
2596 - flex-shrink: 0;
2167 + grid-column: 2;
2168 + grid-row: 1;
2169 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
2170 + margin-inline-start: var(--wpds-dimension-gap-xs, 4px);
2597 2171 }
2598 2172 .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 {
2599 - color: #1e1e1e;
2600 - background-color: transparent;
2173 + color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
2601 2174 }
2602 -.components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
2603 - box-shadow: none;
2604 -}
2605 2175
2606 2176 .components-notice-list {
2177 + display: flex;
2178 + flex-direction: column;
2179 + gap: var(--wpds-dimension-gap-md, 12px);
2607 2180 max-width: 100vw;
2608 2181 box-sizing: border-box;
2609 2182 }
2610 -.components-notice-list .components-notice__content {
2611 - margin-top: 12px;
2612 - margin-bottom: 12px;
2613 - line-height: 2;
2614 -}
2615 2183
2616 2184 .components-panel {
2617 2185 background: #fff;
2618 2186 border: 1px solid #e0e0e0;
@@ -2646,9 +2214,9 @@
2646 2214 flex-shrink: 0;
2647 2215 justify-content: space-between;
2648 2216 align-items: center;
2649 2217 padding: 0 16px;
2650 - border-bottom: 1px solid #ddd;
2218 + border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2651 2219 box-sizing: content-box;
2652 2220 height: 47px;
2653 2221 }
2654 2222 .components-panel__header h2 {
@@ -2689,15 +2257,12 @@
2689 2257
2690 2258 .components-panel__body-toggle.components-button {
2691 2259 position: relative;
2692 2260 padding: 16px 48px 16px 16px;
2693 - outline: none;
2694 2261 width: 100%;
2695 - font-weight: 499;
2262 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2696 2263 text-align: left;
2697 2264 color: #1e1e1e;
2698 - border: none;
2699 - box-shadow: none;
2700 2265 }
2701 2266 @media not (prefers-reduced-motion) {
2702 2267 .components-panel__body-toggle.components-button {
2703 2268 transition: 0.1s background ease-in-out;
@@ -2706,9 +2271,9 @@
2706 2271 .components-panel__body-toggle.components-button {
2707 2272 height: auto;
2708 2273 }
2709 2274 .components-panel__body-toggle.components-button:focus {
2710 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
2275 + outline-offset: calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) * -1);
2711 2276 border-radius: 0;
2712 2277 }
2713 2278 .components-panel__body-toggle.components-button .components-panel__arrow {
2714 2279 position: absolute;
@@ -2794,18 +2359,18 @@
2794 2359 .components-placeholder__error,
2795 2360 .components-placeholder__instructions,
2796 2361 .components-placeholder__label,
2797 2362 .components-placeholder__fieldset {
2798 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2363 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2799 2364 font-size: 13px;
2800 2365 letter-spacing: initial;
2801 2366 line-height: initial;
2802 2367 text-transform: none;
2803 - font-weight: normal;
2368 + font-weight: 400;
2804 2369 }
2805 2370
2806 2371 .components-placeholder__label {
2807 - font-weight: 600;
2372 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2808 2373 align-items: center;
2809 2374 display: flex;
2810 2375 }
2811 2376 .components-placeholder__label > svg,
@@ -2813,15 +2378,8 @@
2813 2378 .components-placeholder__label .block-editor-block-icon {
2814 2379 margin-right: 4px;
2815 2380 fill: currentColor;
2816 2381 }
2817 -@media (forced-colors: active) {
2818 - .components-placeholder__label > svg,
2819 - .components-placeholder__label .dashicon,
2820 - .components-placeholder__label .block-editor-block-icon {
2821 - fill: CanvasText;
2822 - }
2823 -}
2824 2382 .components-placeholder__label:empty {
2825 2383 display: none;
2826 2384 }
2827 2385
@@ -2835,9 +2393,9 @@
2835 2393 justify-content: flex-start;
2836 2394 }
2837 2395 .components-placeholder__fieldset p,
2838 2396 .components-placeholder__fieldset form p {
2839 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2397 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2840 2398 font-size: 13px;
2841 2399 }
2842 2400
2843 2401 .components-placeholder__fieldset.is-column-layout,
@@ -2845,23 +2403,17 @@
2845 2403 flex-direction: column;
2846 2404 }
2847 2405
2848 2406 .components-placeholder__input[type=url] {
2849 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2407 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2850 2408 padding: 6px 8px;
2851 2409 /* Fonts smaller than 16px causes mobile safari to zoom. */
2852 2410 font-size: 16px;
2853 2411 /* Override core line-height. To be reviewed. */
2854 2412 line-height: normal;
2855 - box-shadow: 0 0 0 transparent;
2856 - border-radius: 2px;
2857 - border: 1px solid #949494;
2413 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
2414 + border-radius: var(--wpds-border-radius-sm, 2px);
2858 2415 }
2859 -@media not (prefers-reduced-motion) {
2860 - .components-placeholder__input[type=url] {
2861 - transition: box-shadow 0.1s linear;
2862 - }
2863 -}
2864 2416 @media (min-width: 600px) {
2865 2417 .components-placeholder__input[type=url] {
2866 2418 font-size: 13px;
2867 2419 /* Override core line-height. To be reviewed. */
@@ -2867,12 +2419,16 @@
2867 2419 /* Override core line-height. To be reviewed. */
2868 2420 line-height: normal;
2869 2421 }
2870 2422 }
2423 +.components-placeholder__input[type=url]:hover:not(:disabled, [aria-disabled=true]) {
2424 + border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
2425 +}
2871 2426 .components-placeholder__input[type=url]:focus {
2872 - border-color: var(--wp-admin-theme-color);
2873 - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
2874 - outline: 2px solid transparent;
2427 + 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)));
2428 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2429 + border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
2430 + box-shadow: none;
2875 2431 }
2876 2432 .components-placeholder__input[type=url]::placeholder {
2877 2433 color: rgba(30, 30, 30, 0.62);
2878 2434 }
@@ -3105,9 +2661,9 @@
3105 2661 .components-radio-control {
3106 2662 border: 0;
3107 2663 margin: 0;
3108 2664 padding: 0;
3109 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2665 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3110 2666 font-size: 13px;
3111 2667 }
3112 2668
3113 2669 .components-radio-control__group-wrapper.has-help {
@@ -3196,14 +2752,14 @@
3196 2752 content: "";
3197 2753 border-radius: 50%;
3198 2754 }
3199 2755 .components-radio-control__input[type=radio]:disabled {
3200 - background: var(--wp-components-color-gray-100, #f0f0f0);
3201 - border: 1px solid var(--wp-components-color-gray-300, #ddd);
2756 + background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
2757 + border: 1px solid var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
3202 2758 opacity: 1;
3203 2759 }
3204 2760 .components-radio-control__input[type=radio]:disabled:checked::before {
3205 - border-color: var(--wp-components-color-gray-400, #ccc);
2761 + border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
3206 2762 opacity: 1;
3207 2763 }
3208 2764
3209 2765 .components-radio-control__label {
@@ -3208,10 +2764,11 @@
3208 2764
3209 2765 .components-radio-control__label {
3210 2766 grid-column: 2;
3211 2767 grid-row: 1;
2768 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
3212 2769 }
3213 -.components-radio-control:not(:disabled) .components-radio-control__label {
2770 +.components-radio-control__input:not(:disabled) + .components-radio-control__label {
3214 2771 cursor: var(--wpds-cursor-control, pointer);
3215 2772 }
3216 2773 .components-radio-control__label {
3217 2774 line-height: 24px;
@@ -3425,9 +2982,9 @@
3425 2982 -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
3426 2983 }
3427 2984
3428 2985 .components-snackbar {
3429 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2986 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3430 2987 font-size: 13px;
3431 2988 background: rgba(0, 0, 0, 0.85);
3432 2989 backdrop-filter: blur(16px) saturate(180%);
3433 2990 border-radius: 4px;
@@ -3469,14 +3026,10 @@
3469 3026 .components-snackbar__action.components-external-link {
3470 3027 margin-left: 32px;
3471 3028 color: #fff;
3472 3029 flex-shrink: 0;
3030 + --focus-color: #fff;
3473 3031 }
3474 -.components-snackbar__action.components-button:focus,
3475 -.components-snackbar__action.components-external-link:focus {
3476 - box-shadow: none;
3477 - outline: 1px dotted #fff;
3478 -}
3479 3032 .components-snackbar__action.components-button:hover,
3480 3033 .components-snackbar__action.components-external-link:hover {
3481 3034 text-decoration: none;
3482 3035 color: currentColor;
@@ -3516,17 +3069,22 @@
3516 3069 border-radius: 0;
3517 3070 height: 48px !important;
3518 3071 background: transparent;
3519 3072 border: none;
3520 - box-shadow: none;
3521 3073 cursor: var(--wpds-cursor-control, pointer);
3522 - padding: 3px 16px;
3074 + padding: 3px var(--wpds-dimension-padding-lg, 16px);
3523 3075 margin-left: 0;
3524 - font-weight: 400;
3076 + font-weight: var(--wpds-typography-font-weight-default, 400);
3077 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
3525 3078 }
3079 +.components-tab-panel__tabs-item:disabled, .components-tab-panel__tabs-item[aria-disabled=true] {
3080 + color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
3081 +}
3082 +.components-tab-panel__tabs-item:not(:disabled, [aria-disabled=true]):is(:hover, :focus-visible) {
3083 + color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
3084 +}
3526 3085 .components-tab-panel__tabs-item:focus:not(:disabled) {
3527 3086 position: relative;
3528 - box-shadow: none;
3529 3087 outline: none;
3530 3088 }
3531 3089 .components-tab-panel__tabs-item::after {
3532 3090 content: "";
@@ -3534,10 +3092,10 @@
3534 3092 right: 0;
3535 3093 bottom: 0;
3536 3094 left: 0;
3537 3095 pointer-events: none;
3538 - background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3539 - height: calc(0 * var(--wp-admin-border-width-focus));
3096 + background: var(--wpds-color-stroke-interactive-neutral-strong, #6e6e6e);
3097 + height: calc(0 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
3540 3098 border-radius: 0;
3541 3099 }
3542 3100 @media not (prefers-reduced-motion) {
3543 3101 .components-tab-panel__tabs-item::after {
@@ -3544,9 +3102,9 @@
3544 3102 transition: height 0.1s linear;
3545 3103 }
3546 3104 }
3547 3105 .components-tab-panel__tabs-item.is-active::after {
3548 - height: calc(1 * var(--wp-admin-border-width-focus));
3106 + height: calc(1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
3549 3107 outline: 2px solid transparent;
3550 3108 outline-offset: -1px;
3551 3109 }
3552 3110 .components-tab-panel__tabs-item::before {
@@ -3551,33 +3109,33 @@
3551 3109 }
3552 3110 .components-tab-panel__tabs-item::before {
3553 3111 content: "";
3554 3112 position: absolute;
3555 - top: 12px;
3556 - right: 12px;
3557 - bottom: 12px;
3558 - left: 12px;
3113 + inset: var(--wpds-dimension-padding-md, 12px);
3559 3114 pointer-events: none;
3560 - box-shadow: 0 0 0 0 transparent;
3561 - border-radius: 2px;
3115 + border-radius: var(--wpds-border-radius-sm, 2px);
3562 3116 }
3563 -@media not (prefers-reduced-motion) {
3564 - .components-tab-panel__tabs-item::before {
3565 - transition: box-shadow 0.1s linear;
3566 - }
3117 +.components-tab-panel__tabs-item:focus-visible::before {
3118 + 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)));
3119 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
3120 + outline-offset: 0;
3567 3121 }
3568 -.components-tab-panel__tabs-item:focus-visible::before {
3569 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3570 - outline: 2px solid transparent;
3122 +.components-tab-panel__tabs[aria-orientation=vertical] .components-tab-panel__tabs-item {
3123 + border-radius: var(--wpds-border-radius-sm, 2px);
3571 3124 }
3125 +.components-tab-panel__tabs[aria-orientation=vertical] .components-tab-panel__tabs-item::after {
3126 + display: none;
3127 +}
3128 +.components-tab-panel__tabs[aria-orientation=vertical] .components-tab-panel__tabs-item.is-active {
3129 + background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
3130 +}
3572 3131
3573 3132 .components-tab-panel__tab-content:focus {
3574 - box-shadow: none;
3575 3133 outline: none;
3576 3134 }
3577 3135 .components-tab-panel__tab-content:focus-visible {
3578 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3579 - outline: 2px solid transparent;
3136 + 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)));
3137 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
3580 3138 outline-offset: 0;
3581 3139 }
3582 3140
3583 3141 .components-text-control__input,
@@ -3594,40 +3152,21 @@
3594 3152 .components-text-control__input[type=email],
3595 3153 .components-text-control__input[type=month],
3596 3154 .components-text-control__input[type=number] {
3597 3155 width: 100%;
3598 - height: 32px;
3156 + height: 40px;
3599 3157 margin: 0;
3600 - background: var(--wp-components-color-background, #fff);
3601 - color: var(--wp-components-color-foreground, #1e1e1e);
3602 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3158 + background: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
3159 + color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
3160 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3603 3161 padding: 6px 8px;
3604 3162 /* Fonts smaller than 16px causes mobile safari to zoom. */
3605 3163 font-size: 16px;
3606 3164 /* Override core line-height. To be reviewed. */
3607 3165 line-height: normal;
3608 - box-shadow: 0 0 0 transparent;
3609 - border-radius: 2px;
3610 - border: 1px solid #949494;
3166 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
3167 + border-radius: var(--wpds-border-radius-sm, 2px);
3611 3168 }
3612 -@media not (prefers-reduced-motion) {
3613 - .components-text-control__input,
3614 - .components-text-control__input[type=text],
3615 - .components-text-control__input[type=tel],
3616 - .components-text-control__input[type=time],
3617 - .components-text-control__input[type=url],
3618 - .components-text-control__input[type=week],
3619 - .components-text-control__input[type=password],
3620 - .components-text-control__input[type=color],
3621 - .components-text-control__input[type=date],
3622 - .components-text-control__input[type=datetime],
3623 - .components-text-control__input[type=datetime-local],
3624 - .components-text-control__input[type=email],
3625 - .components-text-control__input[type=month],
3626 - .components-text-control__input[type=number] {
3627 - transition: box-shadow 0.1s linear;
3628 - }
3629 -}
3630 3169 @media (min-width: 600px) {
3631 3170 .components-text-control__input,
3632 3171 .components-text-control__input[type=text],
3633 3172 .components-text-control__input[type=tel],
@@ -3646,8 +3185,24 @@
3646 3185 /* Override core line-height. To be reviewed. */
3647 3186 line-height: normal;
3648 3187 }
3649 3188 }
3189 +.components-text-control__input:hover:not(:disabled, [aria-disabled=true]),
3190 +.components-text-control__input[type=text]:hover:not(:disabled, [aria-disabled=true]),
3191 +.components-text-control__input[type=tel]:hover:not(:disabled, [aria-disabled=true]),
3192 +.components-text-control__input[type=time]:hover:not(:disabled, [aria-disabled=true]),
3193 +.components-text-control__input[type=url]:hover:not(:disabled, [aria-disabled=true]),
3194 +.components-text-control__input[type=week]:hover:not(:disabled, [aria-disabled=true]),
3195 +.components-text-control__input[type=password]:hover:not(:disabled, [aria-disabled=true]),
3196 +.components-text-control__input[type=color]:hover:not(:disabled, [aria-disabled=true]),
3197 +.components-text-control__input[type=date]:hover:not(:disabled, [aria-disabled=true]),
3198 +.components-text-control__input[type=datetime]:hover:not(:disabled, [aria-disabled=true]),
3199 +.components-text-control__input[type=datetime-local]:hover:not(:disabled, [aria-disabled=true]),
3200 +.components-text-control__input[type=email]:hover:not(:disabled, [aria-disabled=true]),
3201 +.components-text-control__input[type=month]:hover:not(:disabled, [aria-disabled=true]),
3202 +.components-text-control__input[type=number]:hover:not(:disabled, [aria-disabled=true]) {
3203 + border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
3204 +}
3650 3205 .components-text-control__input:focus,
3651 3206 .components-text-control__input[type=text]:focus,
3652 3207 .components-text-control__input[type=tel]:focus,
3653 3208 .components-text-control__input[type=time]:focus,
@@ -3660,11 +3215,12 @@
3660 3215 .components-text-control__input[type=datetime-local]:focus,
3661 3216 .components-text-control__input[type=email]:focus,
3662 3217 .components-text-control__input[type=month]:focus,
3663 3218 .components-text-control__input[type=number]:focus {
3664 - border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3665 - box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3666 - outline: 2px solid transparent;
3219 + 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)));
3220 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
3221 + border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
3222 + box-shadow: none;
3667 3223 }
3668 3224 .components-text-control__input::placeholder,
3669 3225 .components-text-control__input[type=text]::placeholder,
3670 3226 .components-text-control__input[type=tel]::placeholder,
@@ -3694,9 +3250,10 @@
3694 3250 .components-text-control__input[type=datetime-local],
3695 3251 .components-text-control__input[type=email],
3696 3252 .components-text-control__input[type=month],
3697 3253 .components-text-control__input[type=number] {
3698 - border-color: var(--wp-components-color-gray-600, #949494);
3254 + padding-left: 12px;
3255 + padding-right: 12px;
3699 3256 }
3700 3257 .components-text-control__input::placeholder,
3701 3258 .components-text-control__input[type=text]::placeholder,
3702 3259 .components-text-control__input[type=tel]::placeholder,
@@ -3710,28 +3267,10 @@
3710 3267 .components-text-control__input[type=datetime-local]::placeholder,
3711 3268 .components-text-control__input[type=email]::placeholder,
3712 3269 .components-text-control__input[type=month]::placeholder,
3713 3270 .components-text-control__input[type=number]::placeholder {
3714 - color: color-mix(in srgb, var(--wp-components-color-foreground, #1e1e1e), transparent 38%);
3271 + color: color-mix(in srgb, var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e)), transparent 38%);
3715 3272 }
3716 -.components-text-control__input.is-next-40px-default-size,
3717 -.components-text-control__input[type=text].is-next-40px-default-size,
3718 -.components-text-control__input[type=tel].is-next-40px-default-size,
3719 -.components-text-control__input[type=time].is-next-40px-default-size,
3720 -.components-text-control__input[type=url].is-next-40px-default-size,
3721 -.components-text-control__input[type=week].is-next-40px-default-size,
3722 -.components-text-control__input[type=password].is-next-40px-default-size,
3723 -.components-text-control__input[type=color].is-next-40px-default-size,
3724 -.components-text-control__input[type=date].is-next-40px-default-size,
3725 -.components-text-control__input[type=datetime].is-next-40px-default-size,
3726 -.components-text-control__input[type=datetime-local].is-next-40px-default-size,
3727 -.components-text-control__input[type=email].is-next-40px-default-size,
3728 -.components-text-control__input[type=month].is-next-40px-default-size,
3729 -.components-text-control__input[type=number].is-next-40px-default-size {
3730 - height: 40px;
3731 - padding-left: 12px;
3732 - padding-right: 12px;
3733 -}
3734 3273
3735 3274 .components-text-control__input[type=email],
3736 3275 .components-text-control__input[type=url] {
3737 3276 /* rtl:ignore */
@@ -3743,9 +3282,9 @@
3743 3282 color: #757575;
3744 3283 }
3745 3284 .components-tip svg {
3746 3285 align-self: center;
3747 - fill: #f0b849;
3286 + color: #f0b849;
3748 3287 flex-shrink: 0;
3749 3288 margin-right: 16px;
3750 3289 }
3751 3290 .components-tip p {
@@ -3753,8 +3292,9 @@
3753 3292 }
3754 3293
3755 3294 .components-toggle-control__label {
3756 3295 line-height: 16px;
3296 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
3757 3297 }
3758 3298 .components-toggle-control__label:not(.is-disabled) {
3759 3299 cursor: var(--wpds-cursor-control, pointer);
3760 3300 }
@@ -3765,9 +3305,9 @@
3765 3305 }
3766 3306
3767 3307 .components-accessible-toolbar {
3768 3308 display: inline-flex;
3769 - border: 1px solid var(--wp-components-color-foreground, #1e1e1e);
3309 + border: 1px solid var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
3770 3310 border-radius: 2px;
3771 3311 flex-shrink: 0;
3772 3312 }
3773 3313 .components-accessible-toolbar > .components-toolbar-group:last-child {
@@ -3832,9 +3372,9 @@
3832 3372 background: transparent;
3833 3373 }
3834 3374 .components-accessible-toolbar .components-button.is-pressed::before,
3835 3375 .components-toolbar .components-button.is-pressed::before {
3836 - background: var(--wp-components-color-foreground, #1e1e1e);
3376 + background: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
3837 3377 }
3838 3378 .components-accessible-toolbar .components-button:focus::before,
3839 3379 .components-toolbar .components-button:focus::before {
3840 3380 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -3862,11 +3402,11 @@
3862 3402 padding: 5px 10px 5px 0;
3863 3403 }
3864 3404 .components-toolbar__control.components-button[data-subscript]::after {
3865 3405 content: attr(data-subscript);
3866 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3406 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3867 3407 font-size: 13px;
3868 - font-weight: 600;
3408 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3869 3409 line-height: 12px;
3870 3410 position: absolute;
3871 3411 right: 8px;
3872 3412 bottom: 10px;
@@ -3876,10 +3416,10 @@
3876 3416 }
3877 3417
3878 3418 .components-toolbar-group {
3879 3419 min-height: 48px;
3880 - border-right: 1px solid var(--wp-components-color-foreground, #1e1e1e);
3881 - background-color: var(--wp-components-color-background, #fff);
3420 + border-right: 1px solid var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
3421 + background-color: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
3882 3422 display: inline-flex;
3883 3423 flex-shrink: 0;
3884 3424 flex-wrap: wrap;
3885 3425 padding-left: 6px;
@@ -3900,9 +3440,9 @@
3900 3440 padding-right: 6px;
3901 3441 }
3902 3442 .components-toolbar-group .components-button.components-button svg,
3903 3443 .components-toolbar-group .components-button.has-icon.has-icon svg {
3904 - min-width: 24px;
3444 + min-width: var(--wpds-dimension-size-sm, 24px);
3905 3445 }
3906 3446 .components-toolbar-group .components-button.components-button::before,
3907 3447 .components-toolbar-group .components-button.has-icon.has-icon::before {
3908 3448 left: 2px;
@@ -3911,10 +3451,10 @@
3911 3451
3912 3452 .components-toolbar {
3913 3453 min-height: 48px;
3914 3454 margin: 0;
3915 - border: 1px solid var(--wp-components-color-foreground, #1e1e1e);
3916 - background-color: var(--wp-components-color-background, #fff);
3455 + border: 1px solid var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
3456 + background-color: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
3917 3457 display: inline-flex;
3918 3458 flex-shrink: 0;
3919 3459 flex-wrap: wrap;
3920 3460 }
@@ -3935,9 +3475,9 @@
3935 3475 div.components-toolbar > div + div.has-left-divider::before {
3936 3476 display: inline-block;
3937 3477 content: "";
3938 3478 box-sizing: content-box;
3939 - background-color: #ddd;
3479 + background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3940 3480 position: absolute;
3941 3481 top: 8px;
3942 3482 left: -3px;
3943 3483 width: 1px;
@@ -3945,10 +3485,10 @@
3945 3485 }
3946 3486
3947 3487 .components-tooltip {
3948 3488 background: #000;
3949 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3950 - border-radius: 2px;
3489 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3490 + border-radius: var(--wpds-border-radius-md, 4px);
3951 3491 color: #f0f0f0;
3952 3492 text-align: center;
3953 3493 line-height: 1.4;
3954 3494 font-size: 12px;
@@ -3960,36 +3500,19 @@
3960 3500 .components-tooltip__shortcut {
3961 3501 margin-left: 8px;
3962 3502 }
3963 3503
3964 -.components-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
3965 - --wp-components-color-accent: #cc1818;
3966 - border-color: #cc1818;
3504 +.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 {
3505 + --focus-color: var(--wpds-color-stroke-interactive-error, #cc1818);
3967 3506 }
3968 -.components-validated-control :is(textarea, input[type=text]):invalid[data-validity-visible] {
3969 - --wp-admin-theme-color: #cc1818;
3970 - --wp-components-color-accent: #cc1818;
3971 - border-color: #cc1818;
3507 +
3508 +.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 {
3509 + border-color: var(--wpds-color-stroke-interactive-error, #cc1818);
3972 3510 }
3973 -.components-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])) {
3974 - --wp-components-color-accent: #cc1818;
3975 -}
3976 3511
3977 3512 .components-validated-control__wrapper-with-error-delegate {
3978 3513 position: relative;
3979 3514 }
3980 -.components-validated-control__wrapper-with-error-delegate:has(select:invalid[data-validity-visible]) .components-input-control__backdrop {
3981 - --wp-components-color-accent: #cc1818;
3982 - border-color: #cc1818;
3983 -}
3984 -.components-validated-control__wrapper-with-error-delegate:has(input[type=radio]:invalid[data-validity-visible]) {
3985 - --wp-components-color-accent: #cc1818;
3986 -}
3987 -.components-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])) {
3988 - --wp-components-color-accent: #cc1818;
3989 - border-color: #cc1818;
3990 -}
3991 -
3992 3515 .components-validated-control__error-delegate {
3993 3516 position: absolute;
3994 3517 top: 0;
3995 3518 height: 100%;
@@ -3997,46 +3520,8 @@
3997 3520 opacity: 0;
3998 3521 pointer-events: none;
3999 3522 }
4000 3523
4001 -.components-validated-control__indicator {
4002 - display: flex;
4003 - align-items: flex-start;
4004 - gap: 4px;
4005 - margin: 8px 0 0;
4006 - font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4007 - font-size: 12px;
4008 - line-height: 16px;
4009 - color: var(--wp-components-color-gray-700, #757575);
4010 - animation: components-validated-control__indicator-jump 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
4011 -}
4012 -.components-validated-control__indicator.is-invalid {
4013 - color: #cc1818;
4014 -}
4015 -.components-validated-control__indicator.is-valid {
4016 - color: color-mix(in srgb, #000 30%, #4ab866);
4017 -}
4018 -
4019 -.components-validated-control__indicator-icon {
4020 - flex-shrink: 0;
4021 -}
4022 -
4023 -.components-validated-control__indicator-spinner {
4024 - margin: 2px;
4025 - width: 12px;
4026 - height: 12px;
4027 -}
4028 -
4029 -@keyframes components-validated-control__indicator-jump {
4030 - 0% {
4031 - transform: translateY(-4px);
4032 - opacity: 0;
4033 - }
4034 - 100% {
4035 - transform: translateY(0);
4036 - opacity: 1;
4037 - }
4038 -}
4039 3524 :root {
4040 3525 --wp-admin-theme-color: #3858e9;
4041 3526 --wp-admin-theme-color--rgb: 56, 88, 233;
4042 3527 --wp-admin-theme-color-darker-10: rgb(33.0384615385, 68.7307692308, 230.4615384615);