← All changes | build/styles/components/style-rtl.css +273 -817 23.4.0 → trunk View file →

		@@ -68,8 +68,14 @@
68	68	/**
69	69	* Focus styles.
70	70	*/
71	71	/**
	72	+ * Standard focus rings for the WordPress Design System.
	73	+ *
	74	+ * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
	75	+ * e.g. `&:focus { @include outset-ring__focus(); }`.
	76	+ */
	77	+/**
72	78	* Applies editor left position to the selector passed as argument
73	79	*/
74	80	/**
75	81	* Styles that are reused verbatim in a few places
		@@ -160,12 +166,14 @@
160	166	height: auto;
161	167	min-height: 36px;
162	168	text-align: right;
163	169	width: 100%;
	170	+ font-weight: var(--wpds-typography-font-weight-default, 400);
	171	+ position: relative;
164	172	}
165		-.components-autocomplete__result.components-button:focus:not(:disabled) {
166		- box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
167		- outline: 2px solid transparent;
	173	+.components-autocomplete__result.components-button:focus:not(:disabled):not(:active) {
	174	+ box-shadow: 0 0 0 calc(2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) + 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
	175	+ z-index: 1;
168	176	}
169	177
170	178	.components-badge {
171	179	box-sizing: border-box;
		@@ -231,9 +239,9 @@
231	239	.components-button-group .components-button {
232	240	border-radius: 0;
233	241	display: inline-flex;
234	242	color: #1e1e1e;
235		- box-shadow: inset 0 0 0 1px #1e1e1e;
	243	+ border-color: #1e1e1e;
236	244	}
237	245	.components-button-group .components-button + .components-button {
238	246	margin-right: -1px;
239	247	}
		@@ -246,11 +254,8 @@
246	254	.components-button-group .components-button:focus, .components-button-group .components-button.is-primary {
247	255	position: relative;
248	256	z-index: 1;
249	257	}
250		-.components-button-group .components-button.is-primary {
251		- box-shadow: inset 0 0 0 1px #1e1e1e;
252		-}
253	258
254	259	/**
255	260	* For easier testing of potential regressions, you can use a Button variant matrix
256	261	* available in a special Storybook instance by running `npm run storybook:e2e:dev`.
		@@ -256,34 +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		- -webkit-appearance: none;
270		- -moz-appearance: none;
271		- appearance: none;
	283	+ appearance: none;
272	284	background: none;
273		-}
274		-@media not (prefers-reduced-motion) {
275		- .components-button {
276		- transition: box-shadow 0.1s linear;
277		- }
278		-}
279		-.components-button {
280	285	height: 36px;
281	286	align-items: center;
282	287	box-sizing: border-box;
283	288	padding: 4px 12px;
284	289	border-radius: 2px;
285		- 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;
286	292	}
287	293	.components-button.is-next-40px-default-size {
288	294	height: 40px;
289	295	}
		@@ -289,11 +295,8 @@
289	295	}
290	296	.components-button[aria-expanded=true], .components-button:hover:not(:disabled, [aria-disabled=true]) {
291	297	color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
292	298	}
293		-.components-button:focus:not(:active) {
294		- box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
295		-}
296	299	.components-button {
297	300	/**
298	301	* Primary button style.
299	302	*/
		@@ -300,41 +303,30 @@
300	303	}
301	304	.components-button.is-primary {
302	305	white-space: nowrap;
303	306	background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
304		- color: var(--wp-components-color-accent-inverted, #fff);
	307	+ color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
305	308	text-decoration: none;
306	309	text-shadow: none;
307		- outline: 1px solid transparent;
308	310	}
309	311	.components-button.is-primary:hover:not(:disabled) {
310	312	background: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
311		- color: var(--wp-components-color-accent-inverted, #fff);
	313	+ color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
312	314	}
313	315	.components-button.is-primary:active:not(:disabled) {
314	316	background: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
315		- border-color: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
316		- color: var(--wp-components-color-accent-inverted, #fff);
	317	+ color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
317	318	}
318		-.components-button.is-primary:focus:not(:active) {
319		- 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));
320		-}
321	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 {
322	320	color: rgba(255, 255, 255, 0.4);
323	321	background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
324		- border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
325		- outline: none;
326	322	}
327		-.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 {
328		- 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));
329		-}
330	323	.components-button.is-primary.is-busy, .components-button.is-primary.is-busy:disabled, .components-button.is-primary.is-busy[aria-disabled=true] {
331		- color: var(--wp-components-color-accent-inverted, #fff);
	324	+ color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
332	325	background-size: 100px 100%;
333	326	/* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
334	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%);
335	328	/* stylelint-enable */
336		- border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
337	329	}
338	330	.components-button {
339	331	/**
340	332	* Secondary and tertiary buttons.
		@@ -339,14 +331,8 @@
339	331	/**
340	332	* Secondary and tertiary buttons.
341	333	*/
342	334	}
343		-.components-button.is-secondary, .components-button.is-tertiary {
344		- outline: 1px solid transparent;
345		-}
346		-.components-button.is-secondary:active:not(:disabled), .components-button.is-tertiary:active:not(:disabled) {
347		- box-shadow: none;
348		-}
349	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 {
350	336	color: #949494;
351	337	background: transparent;
352	338	transform: none;
		@@ -355,26 +341,33 @@
355	341	/**
356	342	* Secondary button style.
357	343	*/
358	344	}
	345	+@media not (prefers-reduced-motion) {
	346	+ .components-button.is-secondary {
	347	+ transition: border-color 0.1s linear;
	348	+ }
	349	+}
359	350	.components-button.is-secondary {
360		- box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)), 0 0 0 currentColor;
361		- outline: 1px solid transparent;
	351	+ border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
362	352	white-space: nowrap;
363	353	color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
364	354	background: transparent;
365	355	}
	356	+.components-button.is-secondary:active:not(:disabled) {
	357	+ border-color: transparent;
	358	+}
366	359	.components-button.is-secondary:hover:not(:disabled, [aria-disabled=true], .is-pressed) {
367		- 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));
368	361	color: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
369	362	background: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, transparent);
370	363	}
	364	+.components-button.is-secondary:focus:not(:active) {
	365	+ border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
	366	+}
371	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) {
372		- box-shadow: inset 0 0 0 1px #ddd;
	368	+ border-color: var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
373	369	}
374		-.components-button.is-secondary:focus:not(:active) {
375		- 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));
376		-}
377	370	.components-button {
378	371	/**
379	372	* Tertiary buttons.
380	373	*/
		@@ -393,12 +386,8 @@
393	386	}
394	387	p + .components-button.is-tertiary {
395	388	margin-right: -6px;
396	389	}
397		-.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) {
398		- box-shadow: none;
399		- outline: none;
400		-}
401	390	.components-button {
402	391	/**
403	392	* Destructive buttons.
404	393	*/
		@@ -413,11 +402,8 @@
413	402	}
414	403	.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):hover:not(:disabled, [aria-disabled=true]) {
415	404	color: rgb(112.7368421053, 13.2631578947, 13.2631578947);
416	405	}
417		-.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):focus:not(:active) {
418		- box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #cc1818;
419		-}
420	406	.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):active:not(:disabled, [aria-disabled=true]) {
421	407	background: #ccc;
422	408	}
423	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] {
		@@ -436,15 +422,14 @@
436	422	}
437	423	.components-button.is-link {
438	424	margin: 0;
439	425	padding: 0;
440		- box-shadow: none;
441	426	border: 0;
442	427	border-radius: 0;
443	428	background: none;
444	429	outline: none;
445	430	text-align: right;
446		- font-weight: 400;
	431	+ font-weight: var(--wpds-typography-font-weight-default, 400);
447	432	color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
448	433	text-decoration: underline;
449	434	text-underline-offset: 0.2em;
450	435	text-decoration-thickness: from-font;
		@@ -458,19 +443,17 @@
458	443	}
459	444	.components-button.is-link {
460	445	height: auto;
461	446	}
462		-.components-button.is-link:focus {
	447	+.components-button.is-link:focus:not(:active) {
463	448	border-radius: 2px;
	449	+ text-decoration: none;
464	450	}
465	451	.components-button.is-link:disabled, .components-button.is-link[aria-disabled=true] {
466	452	color: #949494;
467	453	}
468		-.components-button:focus {
469		- outline: 3px solid transparent;
470		-}
471	454	.components-button:not(:disabled, [aria-disabled=true]):active {
472		- color: var(--wp-components-color-foreground, #1e1e1e);
	455	+ color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
473	456	}
474	457	.components-button:disabled, .components-button[aria-disabled=true] {
475	458	cursor: default;
476	459	color: #949494;
		@@ -493,9 +476,9 @@
493	476	padding: 0;
494	477	min-width: 32px;
495	478	}
496	479	.components-button.is-small {
497		- height: 24px;
	480	+ height: var(--wpds-dimension-size-sm, 24px);
498	481	line-height: 22px;
499	482	padding: 0 8px;
500	483	font-size: 11px;
501	484	}
		@@ -500,9 +483,9 @@
500	483	font-size: 11px;
501	484	}
502	485	.components-button.is-small.has-icon:not(.has-text) {
503	486	padding: 0;
504		- min-width: 24px;
	487	+ min-width: var(--wpds-dimension-size-sm, 24px);
505	488	}
506	489	.components-button.has-icon {
507	490	padding: 6px;
508	491	min-width: 36px;
		@@ -527,40 +510,30 @@
527	510	.components-button.has-icon.has-text.has-icon-right {
528	511	padding-left: 8px;
529	512	padding-right: 12px;
530	513	}
	514	+.components-button.has-icon:not(.has-text) svg,
	515	+.components-button.has-icon:not(.has-text) .dashicon {
	516	+ margin-inline: -1px;
	517	+}
531	518	.components-button.is-pressed, .components-button.is-pressed:hover {
532		- color: var(--wp-components-color-foreground-inverted, #fff);
	519	+ color: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc));
533	520	}
534	521	.components-button.is-pressed:not(:disabled, [aria-disabled=true]), .components-button.is-pressed:hover:not(:disabled, [aria-disabled=true]) {
535		- background: var(--wp-components-color-foreground, #1e1e1e);
	522	+ background: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
536	523	}
537	524	.components-button.is-pressed:disabled, .components-button.is-pressed[aria-disabled=true] {
538	525	color: #949494;
539	526	}
540	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) {
541		- color: var(--wp-components-color-foreground-inverted, #fff);
	528	+ color: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc));
542	529	background: #949494;
543	530	}
544		-.components-button.is-pressed:focus:not(:active) {
545		- 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));
546		-}
547		-.components-button.is-pressed:focus {
548		- outline: 2px solid transparent;
549		-}
550		-.components-button:focus:active {
551		- outline: none;
552		-}
553	531	.components-button svg {
554	532	fill: currentColor;
555	533	outline: none;
556	534	flex-shrink: 0;
557	535	}
558		-@media (forced-colors: active) {
559		- .components-button svg {
560		- fill: CanvasText;
561		- }
562		-}
563	536
564	537	@keyframes components-button__busy-animation {
565	538	0% {
566	539	background-position: right 200px top 0;
		@@ -565,371 +538,8 @@
565	538	0% {
566	539	background-position: right 200px top 0;
567	540	}
568	541	}
569		-/* Root of the component. */
570		-.components-calendar {
571		- position: relative; /* Required to position the navigation toolbar. */
572		- box-sizing: border-box;
573		- display: inline flow-root;
574		- color: var(--wp-components-color-foreground, #1e1e1e);
575		- background-color: var(--wp-components-color-background, #fff);
576		- font-size: 13px;
577		- font-weight: 400;
578		- z-index: 0;
579		-}
580		-.components-calendar *,
581		-.components-calendar *::before,
582		-.components-calendar *::after {
583		- box-sizing: border-box;
584		-}
585		-
586		-.components-calendar__day {
587		- padding: 0;
588		- position: relative;
589		-}
590		-.components-calendar__day:has(.components-calendar__day-button:disabled) {
591		- color: var(--wp-components-color-gray-400, #ccc);
592		-}
593		-.components-calendar__day:has(.components-calendar__day-button:hover:not(:disabled)), .components-calendar__day:has(.components-calendar__day-button:focus-visible) {
594		- color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
595		-}
596		-
597		-.components-calendar__day-button {
598		- background: none;
599		- padding: 0;
600		- margin: 0;
601		- cursor: var(--wpds-cursor-control, pointer);
602		- justify-content: center;
603		- align-items: center;
604		- display: flex;
605		- position: relative;
606		- width: 32px;
607		- height: 32px;
608		- border: none;
609		- border-radius: 2px;
610		- font: inherit;
611		- font-variant-numeric: tabular-nums;
612		- color: inherit;
613		-}
614		-.components-calendar__day-button::before {
615		- content: "";
616		- position: absolute;
617		- z-index: -1;
618		- inset: 0;
619		- border: none;
620		- border-radius: 2px;
621		-}
622		-.components-calendar__day-button::after {
623		- content: "";
624		- position: absolute;
625		- z-index: 1;
626		- inset: 0;
627		- pointer-events: none;
628		-}
629		-.components-calendar__day-button:disabled {
630		- cursor: revert;
631		-}
632		-@media (forced-colors: active) {
633		- .components-calendar__day-button:disabled {
634		- text-decoration: line-through;
635		- }
636		-}
637		-.components-calendar__day-button:focus-visible {
638		- outline: var(--wp-admin-border-width-focus) solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
639		- outline-offset: 1px;
640		-}
641		-
642		-.components-calendar__caption-label {
643		- z-index: 1;
644		- position: relative;
645		- display: inline-flex;
646		- align-items: center;
647		- white-space: nowrap;
648		- border: 0;
649		- text-transform: capitalize;
650		-}
651		-
652		-.components-calendar__button-next,
653		-.components-calendar__button-previous {
654		- border: none;
655		- border-radius: 2px;
656		- background: none;
657		- padding: 0;
658		- margin: 0;
659		- cursor: var(--wpds-cursor-control, pointer);
660		- -webkit-appearance: none;
661		- -moz-appearance: none;
662		- appearance: none;
663		- display: inline-flex;
664		- align-items: center;
665		- justify-content: center;
666		- position: relative;
667		- width: 32px;
668		- height: 32px;
669		- color: inherit;
670		-}
671		-.components-calendar__button-next:disabled, .components-calendar__button-next[aria-disabled=true],
672		-.components-calendar__button-previous:disabled,
673		-.components-calendar__button-previous[aria-disabled=true] {
674		- cursor: revert;
675		- color: var(--wp-components-color-gray-600, #949494);
676		-}
677		-.components-calendar__button-next:focus-visible,
678		-.components-calendar__button-previous:focus-visible {
679		- outline: var(--wp-admin-border-width-focus) solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
680		-}
681		-
682		-.components-calendar__chevron {
683		- display: inline-block;
684		- fill: currentColor;
685		- width: 16px;
686		- height: 16px;
687		-}
688		-
689		-.components-calendar[dir=rtl] .components-calendar__nav .components-calendar__chevron {
690		- transform: rotate(-180deg);
691		- transform-origin: 50%;
692		-}
693		-
694		-.components-calendar__month-caption {
695		- display: flex;
696		- justify-content: center;
697		- align-content: center;
698		- height: 32px;
699		- margin-bottom: 12px;
700		-}
701		-
702		-.components-calendar__months {
703		- position: relative;
704		- display: flex;
705		- justify-content: center;
706		- flex-wrap: wrap;
707		- gap: 16px;
708		- max-width: -moz-fit-content;
709		- max-width: fit-content;
710		-}
711		-
712		-.components-calendar__month-grid {
713		- border-collapse: separate;
714		- border-spacing: 0 4px;
715		-}
716		-
717		-.components-calendar__nav {
718		- position: absolute;
719		- inset-block-start: 0;
720		- inset-inline-start: 0;
721		- inset-inline-end: 0;
722		- display: flex;
723		- align-items: center;
724		- justify-content: space-between;
725		- height: 32px;
726		-}
727		-
728		-.components-calendar__weekday {
729		- width: 32px;
730		- height: 32px;
731		- padding: 0;
732		- color: var(--wp-components-color-gray-700, #757575);
733		- text-align: center;
734		- text-transform: uppercase;
735		-}
736		-
737		-/* DAY MODIFIERS */
738		-.components-calendar__day--today::after {
739		- content: "";
740		- position: absolute;
741		- z-index: 1;
742		- inset-block-start: 2px;
743		- inset-inline-end: 2px;
744		- width: 0;
745		- height: 0;
746		- border-radius: 50%;
747		- border: 2px solid currentColor;
748		-}
749		-
750		-.components-calendar__day--selected:not(.components-calendar__range-middle):has(.components-calendar__day-button,
751		-.components-calendar__day-button:hover:not(:disabled)) {
752		- color: var(--wp-components-color-foreground-inverted, #fff);
753		-}
754		-.components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button::before {
755		- background-color: var(--wp-components-color-foreground, #1e1e1e);
756		- border: 1px solid transparent;
757		-}
758		-.components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:disabled::before {
759		- background-color: var(--wp-components-color-gray-400, #ccc);
760		-}
761		-.components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:hover:not(:disabled)::before {
762		- background-color: var(--wp-components-color-gray-800, #2f2f2f);
763		-}
764		-
765		-.components-calendar__day--outside {
766		- color: var(--wp-components-color-gray-600, #949494);
767		-}
768		-
769		-.components-calendar__day--hidden {
770		- visibility: hidden;
771		-}
772		-
773		-.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 {
774		- border-start-end-radius: 0;
775		- border-end-end-radius: 0;
776		-}
777		-
778		-.components-calendar__range-middle .components-calendar__day-button::before {
779		- background-color: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, transparent);
780		- border-radius: 0;
781		- border-width: 1px 0;
782		- border-color: transparent;
783		- border-style: solid;
784		-}
785		-
786		-.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 {
787		- border-start-start-radius: 0;
788		- border-end-start-radius: 0;
789		-}
790		-
791		-/*
792		- * RANGE PREVIEW (range calendar only)
793		- *
794		- * The preview is rendered in the button's ::after pseudo-element, so that it
795		- * can be rendered over the button's contents.
796		- * The selection preview is shown with a dashed border. In order to have
797		- * control over the dash pattern (especially the seams between days), the
798		- * dashed borders are rendered as SVGs via the url() CSS function.
799		- * Since SVGs rendered in the url() function don't seem to be able to access
800		- * CSS variables, we're using the SVGs as masks, and using `background-color`
801		- * to consume the accent color variable.
802		- */
803		-.components-calendar__day--preview svg {
804		- position: absolute;
805		- inset: 0;
806		- pointer-events: none;
807		- color: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 16%, transparent);
808		-}
809		-@media (forced-colors: active) {
810		- .components-calendar__day--preview svg {
811		- color: inherit;
812		- }
813		-}
814		-.components-calendar[dir=rtl] .components-calendar__day--preview svg {
815		- transform: scaleX(-1);
816		-}
817		-
818		-.components-calendar__day--preview.components-calendar__range-middle .components-calendar__day-button::before {
819		- border: none;
820		-}
821		-
822		-/* ANIMATIONS */
823		-@keyframes slide-in-left {
824		- 0% {
825		- transform: translateX(100%);
826		- }
827		- 100% {
828		- transform: translateX(0);
829		- }
830		-}
831		-@keyframes slide-in-right {
832		- 0% {
833		- transform: translateX(-100%);
834		- }
835		- 100% {
836		- transform: translateX(0);
837		- }
838		-}
839		-@keyframes slide-out-left {
840		- 0% {
841		- transform: translateX(0);
842		- }
843		- 100% {
844		- transform: translateX(100%);
845		- }
846		-}
847		-@keyframes slide-out-right {
848		- 0% {
849		- transform: translateX(0);
850		- }
851		- 100% {
852		- transform: translateX(-100%);
853		- }
854		-}
855		-@keyframes fade-in {
856		- from {
857		- opacity: 0;
858		- }
859		- to {
860		- opacity: 1;
861		- }
862		-}
863		-@keyframes fade-out {
864		- from {
865		- opacity: 1;
866		- }
867		- to {
868		- opacity: 0;
869		- }
870		-}
871		-.components-calendar__weeks-before-enter,
872		-.components-calendar__weeks-before-exit,
873		-.components-calendar__weeks-after-enter,
874		-.components-calendar__weeks-after-exit,
875		-.components-calendar__caption-after-enter,
876		-.components-calendar__caption-after-exit,
877		-.components-calendar__caption-before-enter,
878		-.components-calendar__caption-before-exit {
879		- animation-duration: 0s;
880		- animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
881		- animation-fill-mode: forwards;
882		-}
883		-@media not (prefers-reduced-motion) {
884		- .components-calendar__weeks-before-enter,
885		- .components-calendar__weeks-before-exit,
886		- .components-calendar__weeks-after-enter,
887		- .components-calendar__weeks-after-exit,
888		- .components-calendar__caption-after-enter,
889		- .components-calendar__caption-after-exit,
890		- .components-calendar__caption-before-enter,
891		- .components-calendar__caption-before-exit {
892		- animation-duration: 0.3s;
893		- }
894		-}
895		-
896		-.components-calendar__weeks-before-enter,
897		-.components-calendar[dir=rtl] .components-calendar__weeks-after-enter {
898		- animation-name: slide-in-left;
899		-}
900		-
901		-.components-calendar__weeks-before-exit,
902		-.components-calendar[dir=rtl] .components-calendar__weeks-after-exit {
903		- animation-name: slide-out-left;
904		-}
905		-
906		-.components-calendar__weeks-after-enter,
907		-.components-calendar[dir=rtl] .components-calendar__weeks-before-enter {
908		- animation-name: slide-in-right;
909		-}
910		-
911		-.components-calendar__weeks-after-exit,
912		-.components-calendar[dir=rtl] .components-calendar__weeks-before-exit {
913		- animation-name: slide-out-right;
914		-}
915		-
916		-.components-calendar__caption-after-enter {
917		- animation-name: fade-in;
918		-}
919		-
920		-.components-calendar__caption-after-exit {
921		- animation-name: fade-out;
922		-}
923		-
924		-.components-calendar__caption-before-enter {
925		- animation-name: fade-in;
926		-}
927		-
928		-.components-calendar__caption-before-exit {
929		- animation-name: fade-out;
930		-}
931		-
932	542	.components-checkbox-control {
933	543	--checkbox-input-size: 24px;
934	544	}
935	545	@media (min-width: 600px) {
		@@ -942,8 +552,9 @@
942	552	}
943	553
944	554	.components-checkbox-control__label {
945	555	line-height: var(--checkbox-input-size);
	556	+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
946	557	}
947	558	.components-checkbox-control:not(:has(:disabled)) .components-checkbox-control__label {
948	559	cursor: var(--wpds-cursor-control, pointer);
949	560	}
		@@ -948,27 +559,21 @@
948	559	cursor: var(--wpds-cursor-control, pointer);
949	560	}
950	561
951	562	.components-checkbox-control__input[type=checkbox] {
952		- border: 1px solid #1e1e1e;
	563	+ border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
953	564	margin-left: 12px;
954	565	transition: none;
955	566	border-radius: 2px;
956		- 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;
957	568	padding: 6px 8px;
958	569	/* Fonts smaller than 16px causes mobile safari to zoom. */
959	570	font-size: 16px;
960	571	/* Override core line-height. To be reviewed. */
961	572	line-height: normal;
962		- box-shadow: 0 0 0 transparent;
963		- border-radius: 2px;
964		- 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);
965	575	}
966		-@media not (prefers-reduced-motion) {
967		- .components-checkbox-control__input[type=checkbox] {
968		- transition: box-shadow 0.1s linear;
969		- }
970		-}
971	576	@media (min-width: 600px) {
972	577	.components-checkbox-control__input[type=checkbox] {
973	578	font-size: 13px;
974	579	/* Override core line-height. To be reviewed. */
		@@ -974,18 +579,22 @@
974	579	/* Override core line-height. To be reviewed. */
975	580	line-height: normal;
976	581	}
977	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	+}
978	586	.components-checkbox-control__input[type=checkbox]:focus {
979		- border-color: var(--wp-admin-theme-color);
980		- box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
981		- 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;
982	591	}
983		-.components-checkbox-control__input[type=checkbox]::-moz-placeholder {
	592	+.components-checkbox-control__input[type=checkbox]::placeholder {
984	593	color: rgba(30, 30, 30, 0.62);
985	594	}
986		-.components-checkbox-control__input[type=checkbox]::placeholder {
987		- color: rgba(30, 30, 30, 0.62);
	595	+.components-checkbox-control__input[type=checkbox]:hover:not(:disabled, [aria-disabled=true]) {
	596	+ background: var(--wpds-color-background-interactive-neutral-active, #fff);
988	597	}
989	598	.components-checkbox-control__input[type=checkbox]:focus {
990	599	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
991	600	outline: 2px solid transparent;
		@@ -1013,9 +622,9 @@
1013	622	display: inline-block;
1014	623	vertical-align: middle;
1015	624	width: 16px;
1016	625	/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
1017		- font: normal 30px/1 dashicons;
	626	+ font: 400 30px/1 dashicons;
1018	627	speak: none;
1019	628	-webkit-font-smoothing: antialiased;
1020	629	-moz-osx-font-smoothing: grayscale;
1021	630	}
		@@ -1025,13 +634,17 @@
1025	634	font-size: 21px;
1026	635	}
1027	636	}
1028	637	.components-checkbox-control__input[type=checkbox][aria-disabled=true], .components-checkbox-control__input[type=checkbox]:disabled {
1029		- background: #f0f0f0;
1030		- 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);
1031	641	cursor: default;
1032	642	opacity: 1;
1033	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	+}
1034	647	.components-checkbox-control__input[type=checkbox] {
1035	648	background: #fff;
1036	649	color: #1e1e1e;
1037	650	clear: none;
		@@ -1043,11 +656,9 @@
1043	656	text-align: center;
1044	657	vertical-align: top;
1045	658	width: var(--checkbox-input-size);
1046	659	height: var(--checkbox-input-size);
1047		- -webkit-appearance: none;
1048		- -moz-appearance: none;
1049		- appearance: none;
	660	+ appearance: none;
1050	661	}
1051	662	@media not (prefers-reduced-motion) {
1052	663	.components-checkbox-control__input[type=checkbox] {
1053	664	transition: 0.1s border-color ease-in-out;
		@@ -1081,32 +692,24 @@
1081	692	}
1082	693
1083	694	svg.components-checkbox-control__checked,
1084	695	svg.components-checkbox-control__indeterminate {
1085		- --checkmark-size: var(--checkbox-input-size);
1086		- fill: #fff;
	696	+ color: #fff;
1087	697	cursor: var(--wpds-cursor-control, pointer);
1088	698	position: absolute;
1089	699	right: 50%;
1090	700	top: 50%;
1091	701	transform: translate(50%, -50%);
1092		- width: var(--checkmark-size);
1093		- height: var(--checkmark-size);
	702	+ width: var(--checkbox-input-size);
	703	+ height: var(--checkbox-input-size);
1094	704	-webkit-user-select: none;
1095		- -moz-user-select: none;
1096	705	user-select: none;
1097	706	pointer-events: none;
1098	707	}
1099		-@media (min-width: 600px) {
1100		- svg.components-checkbox-control__checked,
1101		- svg.components-checkbox-control__indeterminate {
1102		- --checkmark-size: calc(var(--checkbox-input-size) + 4px);
1103		- }
1104		-}
1105	708
1106	709	.components-checkbox-control:has(:disabled) svg.components-checkbox-control__checked,
1107	710	.components-checkbox-control:has(:disabled) svg.components-checkbox-control__indeterminate {
1108		- fill: var(--wp-components-color-gray-400, #ccc);
	711	+ color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
1109	712	}
1110	713
1111	714	.components-checkbox-control__help {
1112	715	display: inline-block;
		@@ -1144,14 +747,14 @@
1144	747	transform: scale(1);
1145	748	}
1146	749	@media not (prefers-reduced-motion) {
1147	750	.components-circular-option-picker__option-wrapper {
1148		- transition: 100ms transform ease;
	751	+ transition: 100ms transform ease-out;
1149	752	will-change: transform;
1150	753	}
1151	754	}
1152	755	.components-circular-option-picker__option-wrapper:hover {
1153		- transform: scale(1.2);
	756	+ transform: scale(1.1);
1154	757	}
1155	758	.components-circular-option-picker__option-wrapper > div {
1156	759	height: 100%;
1157	760	width: 100%;
		@@ -1159,15 +762,11 @@
1159	762
1160	763	.components-circular-option-picker__option-wrapper::before {
1161	764	content: "";
1162	765	position: absolute;
1163		- top: 1px;
1164		- right: 1px;
1165		- bottom: 1px;
1166		- left: 1px;
	766	+ inset: 1px;
1167	767	border-radius: 50%;
1168	768	z-index: -1;
1169		- /* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
1170	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');
1171	770	}
1172	771
1173	772	.components-circular-option-picker__option {
		@@ -1187,13 +786,9 @@
1187	786	}
1188	787	.components-circular-option-picker__option {
1189	788	cursor: var(--wpds-cursor-control, pointer);
1190	789	}
1191		-.components-circular-option-picker__option:hover {
1192		- box-shadow: inset 0 0 0 14px !important;
1193		-}
1194	790	.components-circular-option-picker__option[aria-pressed=true], .components-circular-option-picker__option[aria-selected=true] {
1195		- box-shadow: inset 0 0 0 4px;
1196	791	position: relative;
1197	792	z-index: 1;
1198	793	overflow: visible;
1199	794	}
		@@ -1207,34 +802,13 @@
1207	802	}
1208	803	.components-circular-option-picker__option::after {
1209	804	content: "";
1210	805	position: absolute;
1211		- top: -1px;
1212		- right: -1px;
1213		- bottom: -1px;
1214		- left: -1px;
	806	+ inset: -1px;
	807	+ border: 1px solid transparent;
1215	808	border-radius: 50%;
1216	809	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
1217		- border: 1px solid transparent;
1218		- box-sizing: inherit;
1219	810	}
1220		-.components-circular-option-picker__option:focus::after {
1221		- content: "";
1222		- border-radius: 50%;
1223		- box-shadow: inset 0 0 0 2px #fff;
1224		- position: absolute;
1225		- top: 50%;
1226		- right: 50%;
1227		- transform: translate(50%, -50%);
1228		- border: 2px solid #757575;
1229		- width: calc(100% + 4px);
1230		- height: calc(100% + 4px);
1231		-}
1232		-.components-circular-option-picker__option.components-button:focus {
1233		- background-color: transparent;
1234		- box-shadow: inset 0 0 0 14px;
1235		- outline: none;
1236		-}
1237	811
1238	812	.components-circular-option-picker__button-action .components-circular-option-picker__option {
1239	813	color: #fff;
1240	814	background: #fff;
		@@ -1246,17 +820,14 @@
1246	820	.components-circular-option-picker__dropdown-link-action .components-button {
1247	821	line-height: 22px;
1248	822	}
1249	823
1250		-.components-palette-edit__popover-gradient-picker {
	824	+.components-palette-edit__popover-gradient-picker,
	825	+.components-palette-edit__popover-duotone-picker {
1251	826	width: 260px;
1252	827	padding: 8px;
1253	828	}
1254	829
1255		-.components-dropdown-menu__menu .components-palette-edit__menu-button {
1256		- width: 100%;
1257		-}
1258		-
1259	830	.component-color-indicator {
1260	831	width: 20px;
1261	832	height: 20px;
1262	833	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
		@@ -1279,10 +850,10 @@
1279	850	padding: 2px;
1280	851	margin: 0;
1281	852	line-height: inherit;
1282	853	min-height: auto;
1283		- background: var(--wp-components-color-background, #fff);
1284		- 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));
1285	856	}
1286	857	@media (min-width: 600px) {
1287	858	input.components-combobox-control__input[type=text] {
1288	859	font-size: 13px;
		@@ -1293,23 +864,17 @@
1293	864	box-shadow: none;
1294	865	}
1295	866
1296	867	.components-combobox-control__suggestions-container {
1297		- 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;
1298	869	padding: 6px 8px;
1299	870	/* Fonts smaller than 16px causes mobile safari to zoom. */
1300	871	font-size: 16px;
1301	872	/* Override core line-height. To be reviewed. */
1302	873	line-height: normal;
1303		- box-shadow: 0 0 0 transparent;
1304		- border-radius: 2px;
1305		- 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);
1306	876	}
1307		-@media not (prefers-reduced-motion) {
1308		- .components-combobox-control__suggestions-container {
1309		- transition: box-shadow 0.1s linear;
1310		- }
1311		-}
1312	877	@media (min-width: 600px) {
1313	878	.components-combobox-control__suggestions-container {
1314	879	font-size: 13px;
1315	880	/* Override core line-height. To be reviewed. */
		@@ -1315,16 +880,17 @@
1315	880	/* Override core line-height. To be reviewed. */
1316	881	line-height: normal;
1317	882	}
1318	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	+}
1319	887	.components-combobox-control__suggestions-container:focus {
1320		- border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1321		- box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1322		- 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;
1323	892	}
1324		-.components-combobox-control__suggestions-container::-moz-placeholder {
1325		- color: rgba(30, 30, 30, 0.62);
1326		-}
1327	893	.components-combobox-control__suggestions-container::placeholder {
1328	894	color: rgba(30, 30, 30, 0.62);
1329	895	}
1330	896	.components-combobox-control__suggestions-container {
		@@ -1334,11 +900,10 @@
1334	900	width: 100%;
1335	901	padding: 0;
1336	902	}
1337	903	.components-combobox-control__suggestions-container:focus-within {
1338		- border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1339		- box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1340		- 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));
1341	906	}
1342	907	.components-combobox-control__suggestions-container .components-spinner {
1343	908	margin: 0;
1344	909	}
		@@ -1383,9 +948,9 @@
1383	948	box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2), inset -1px 0 0 0 rgba(0, 0, 0, 0.2), inset 1px 0 0 0 rgba(0, 0, 0, 0.2);
1384	949	}
1385	950
1386	951	.components-color-palette__custom-color-name {
1387		- color: var(--wp-components-color-foreground, #1e1e1e);
	952	+ color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
1388	953	margin: 0 1px;
1389	954	}
1390	955
1391	956	.components-color-palette__custom-color-value {
		@@ -1447,14 +1012,19 @@
1447	1012	width: inherit;
1448	1013	border-radius: 50%;
1449	1014	padding: 0;
1450	1015	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25);
1451		- outline: 2px solid transparent;
1452	1016	}
1453		-.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus, .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button.is-active {
	1017	+.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button.is-active {
1454	1018	box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25);
1455		- outline: 1.5px solid transparent;
1456	1019	}
	1020	+.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus:not(:active) {
	1021	+ outline-offset: 1px;
	1022	+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25), 0 0 0 calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) + 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
	1023	+}
	1024	+.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus:not(:active).is-active {
	1025	+ box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25), 0 0 0 calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) + 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
	1026	+}
1457	1027
1458	1028	.components-custom-gradient-picker__remove-control-point-wrapper {
1459	1029	padding-bottom: 8px;
1460	1030	}
		@@ -1542,9 +1112,9 @@
1542	1112	pointer-events: none;
1543	1113	}
1544	1114
1545	1115	.components-drop-zone__content-text {
1546		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	1116	+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1547	1117	font-size: 13px;
1548	1118	}
1549	1119
1550	1120	.components-dropdown {
		@@ -1581,9 +1151,9 @@
1581	1151	}
1582	1152
1583	1153	.components-dropdown-menu__menu {
1584	1154	width: 100%;
1585		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	1155	+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1586	1156	font-size: 13px;
1587	1157	line-height: 1.4;
1588	1158	}
1589	1159	.components-dropdown-menu__menu .components-dropdown-menu__menu-item,
		@@ -1592,9 +1162,9 @@
1592	1162	padding: 6px;
1593	1163	outline: none;
1594	1164	cursor: var(--wpds-cursor-control, pointer);
1595	1165	white-space: nowrap;
1596		- font-weight: 400;
	1166	+ font-weight: var(--wpds-typography-font-weight-default, 400);
1597	1167	}
1598	1168	.components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator,
1599	1169	.components-dropdown-menu__menu .components-menu-item.has-separator {
1600	1170	margin-top: 6px;
		@@ -1605,9 +1175,9 @@
1605	1175	.components-dropdown-menu__menu .components-menu-item.has-separator::before {
1606	1176	display: block;
1607	1177	content: "";
1608	1178	box-sizing: content-box;
1609		- background-color: #ddd;
	1179	+ background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
1610	1180	position: absolute;
1611	1181	top: -3px;
1612	1182	right: 0;
1613	1183	left: 0;
		@@ -1667,31 +1237,25 @@
1667	1237	margin: 2px;
1668	1238	}
1669	1239
1670	1240	.components-external-link {
1671		- color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
	1241	+ color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1672	1242	text-decoration: none;
1673	1243	}
1674		-@media not (prefers-reduced-motion) {
1675		- .components-external-link {
1676		- transition: outline 0.1s ease-out;
1677		- }
1678		-}
1679		-.components-external-link {
1680		- outline: 0 solid transparent;
1681		- outline-offset: 1px;
1682		-}
1683	1244	.components-external-link:visited {
1684		- color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
	1245	+ color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1685	1246	}
1686	1247	.components-external-link:hover, .components-external-link:active {
1687		- color: var(--wpds-color-fg-interactive-brand-active, var(--wp-admin-theme-color, #3858e9));
	1248	+ color: var(--wpds-color-foreground-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 52%, black));
1688	1249	}
1689	1250	.components-external-link:focus {
1690		- 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));
1691	1251	box-shadow: none;
1692	1252	border-radius: 0;
1693	1253	}
	1254	+.components-external-link:focus:not(:active) {
	1255	+ outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
	1256	+ outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
	1257	+}
1694	1258
1695	1259	.components-external-link__contents {
1696	1260	text-decoration: underline;
1697	1261	text-underline-offset: 0.2em;
		@@ -1701,9 +1265,9 @@
1701	1265	.components-external-link__icon {
1702	1266	line-height: 1;
1703	1267	display: inline-block;
1704	1268	margin-inline-start: var(--wpds-dimension-padding-xs, 4px);
1705		- font-weight: var(--wpds-typography-font-weight-regular, 400);
	1269	+ font-weight: var(--wpds-typography-font-weight-default, 400);
1706	1270	}
1707	1271
1708	1272	.components-form-toggle {
1709	1273	position: relative;
		@@ -1782,39 +1346,39 @@
1782	1346	background-color: #fff;
1783	1347	border-width: 0;
1784	1348	transform: translateX(-16px);
1785	1349	}
1786		-.components-form-toggle.is-disabled .components-form-toggle__track, .components-disabled .components-form-toggle .components-form-toggle__track {
1787		- background-color: var(--wp-components-color-gray-100, #f0f0f0);
1788		- border-color: var(--wp-components-color-gray-300, #ddd);
	1350	+.components-form-toggle.is-disabled .components-form-toggle__track, [inert] .components-form-toggle .components-form-toggle__track {
	1351	+ background-color: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
	1352	+ border-color: var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
1789	1353	}
1790	1354	@media (forced-colors: active) {
1791		- .components-form-toggle.is-disabled .components-form-toggle__track, .components-disabled .components-form-toggle .components-form-toggle__track {
	1355	+ .components-form-toggle.is-disabled .components-form-toggle__track, [inert] .components-form-toggle .components-form-toggle__track {
1792	1356	border-color: GrayText;
1793	1357	}
1794	1358	}
1795		-.components-form-toggle.is-disabled .components-form-toggle__thumb, .components-disabled .components-form-toggle .components-form-toggle__thumb {
1796		- background-color: var(--wp-components-color-gray-400, #ccc);
	1359	+.components-form-toggle.is-disabled .components-form-toggle__thumb, [inert] .components-form-toggle .components-form-toggle__thumb {
	1360	+ background-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1797	1361	box-shadow: none;
1798	1362	}
1799	1363	@media (forced-colors: active) {
1800		- .components-form-toggle.is-disabled .components-form-toggle__thumb, .components-disabled .components-form-toggle .components-form-toggle__thumb {
	1364	+ .components-form-toggle.is-disabled .components-form-toggle__thumb, [inert] .components-form-toggle .components-form-toggle__thumb {
1801	1365	border-color: GrayText;
1802	1366	}
1803	1367	}
1804		-.components-form-toggle.is-disabled.is-checked .components-form-toggle__track, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track {
1805		- background-color: var(--wp-components-color-gray-400, #ccc);
1806		- border-color: var(--wp-components-color-gray-400, #ccc);
	1368	+.components-form-toggle.is-disabled.is-checked .components-form-toggle__track, [inert] .components-form-toggle.is-checked .components-form-toggle__track {
	1369	+ background-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
	1370	+ border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1807	1371	}
1808	1372	@media (forced-colors: active) {
1809		- .components-form-toggle.is-disabled.is-checked .components-form-toggle__track, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track {
	1373	+ .components-form-toggle.is-disabled.is-checked .components-form-toggle__track, [inert] .components-form-toggle.is-checked .components-form-toggle__track {
1810	1374	border-color: GrayText;
1811	1375	}
1812		- .components-form-toggle.is-disabled.is-checked .components-form-toggle__track::after, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track::after {
	1376	+ .components-form-toggle.is-disabled.is-checked .components-form-toggle__track::after, [inert] .components-form-toggle.is-checked .components-form-toggle__track::after {
1813	1377	border-top-color: GrayText;
1814	1378	}
1815	1379	}
1816		-.components-form-toggle.is-disabled.is-checked .components-form-toggle__thumb, .components-disabled .components-form-toggle.is-checked .components-form-toggle__thumb {
	1380	+.components-form-toggle.is-disabled.is-checked .components-form-toggle__thumb, [inert] .components-form-toggle.is-checked .components-form-toggle__thumb {
1817	1381	background-color: #fff;
1818	1382	}
1819	1383
1820	1384	.components-form-toggle input.components-form-toggle__input[type=checkbox] {
		@@ -1839,23 +1403,17 @@
1839	1403	cursor: var(--wpds-cursor-control, pointer);
1840	1404	}
1841	1405
1842	1406	.components-form-token-field__input-container {
1843		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	1407	+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1844	1408	padding: 6px 8px;
1845	1409	/* Fonts smaller than 16px causes mobile safari to zoom. */
1846	1410	font-size: 16px;
1847	1411	/* Override core line-height. To be reviewed. */
1848	1412	line-height: normal;
1849		- box-shadow: 0 0 0 transparent;
1850		- border-radius: 2px;
1851		- border: 1px solid #949494;
	1413	+ border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
	1414	+ border-radius: var(--wpds-border-radius-sm, 2px);
1852	1415	}
1853		-@media not (prefers-reduced-motion) {
1854		- .components-form-token-field__input-container {
1855		- transition: box-shadow 0.1s linear;
1856		- }
1857		-}
1858	1416	@media (min-width: 600px) {
1859	1417	.components-form-token-field__input-container {
1860	1418	font-size: 13px;
1861	1419	/* Override core line-height. To be reviewed. */
		@@ -1861,16 +1419,17 @@
1861	1419	/* Override core line-height. To be reviewed. */
1862	1420	line-height: normal;
1863	1421	}
1864	1422	}
	1423	+.components-form-token-field__input-container:hover:not(:disabled, [aria-disabled=true]) {
	1424	+ border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
	1425	+}
1865	1426	.components-form-token-field__input-container:focus {
1866		- border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1867		- box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1868		- outline: 2px solid transparent;
	1427	+ outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
	1428	+ outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
	1429	+ border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
	1430	+ box-shadow: none;
1869	1431	}
1870		-.components-form-token-field__input-container::-moz-placeholder {
1871		- color: rgba(30, 30, 30, 0.62);
1872		-}
1873	1432	.components-form-token-field__input-container::placeholder {
1874	1433	color: rgba(30, 30, 30, 0.62);
1875	1434	}
1876	1435	.components-form-token-field__input-container {
		@@ -1878,16 +1437,18 @@
1878	1437	padding: 0;
1879	1438	cursor: text;
1880	1439	}
1881	1440	.components-form-token-field__input-container.is-disabled {
1882		- background: var(--wp-components-color-gray-100, #f0f0f0);
1883		- border-color: var(--wp-components-color-gray-400, #ccc);
	1441	+ background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
	1442	+ border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1884	1443	cursor: default;
1885	1444	}
	1445	+.components-form-token-field__input-container.is-disabled:hover {
	1446	+ border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
	1447	+}
1886	1448	.components-form-token-field__input-container.is-active {
1887		- border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1888		- box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1889		- outline: 2px solid transparent;
	1449	+ outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
	1450	+ outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
1890	1451	}
1891	1452	.components-form-token-field__input-container input[type=text].components-form-token-field__input {
1892	1453	display: inline-block;
1893	1454	flex: 1;
		@@ -1901,9 +1462,9 @@
1901	1462	min-height: 24px;
1902	1463	min-width: 50px;
1903	1464	background: inherit;
1904	1465	border: 0;
1905		- color: var(--wp-components-color-foreground, #1e1e1e);
	1466	+ color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
1906	1467	box-shadow: none;
1907	1468	}
1908	1469	@media (min-width: 600px) {
1909	1470	.components-form-token-field__input-container input[type=text].components-form-token-field__input {
		@@ -1937,10 +1498,10 @@
1937	1498	color: #757575;
1938	1499	}
1939	1500	.components-form-token-field__token.is-disabled .components-form-token-field__token-text,
1940	1501	.components-form-token-field__token.is-disabled .components-form-token-field__remove-token.components-button {
1941		- background: var(--wp-components-color-gray-100, #f0f0f0);
1942		- color: var(--wp-components-color-gray-600, #949494);
	1502	+ background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
	1503	+ color: var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1943	1504	}
1944	1505	.components-form-token-field__token.is-borderless {
1945	1506	position: relative;
1946	1507	padding: 0 0 0 24px;
		@@ -2020,9 +1581,9 @@
2020	1581	padding: 0;
2021	1582	}
2022	1583
2023	1584	.components-form-token-field__suggestion {
2024		- color: var(--wp-components-color-foreground, #1e1e1e);
	1585	+ color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
2025	1586	display: block;
2026	1587	font-size: 13px;
2027	1588	padding: 8px 12px;
2028	1589	min-height: 32px;
		@@ -2030,9 +1591,9 @@
2030	1591	box-sizing: border-box;
2031	1592	}
2032	1593	.components-form-token-field__suggestion.is-selected {
2033	1594	background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
2034		- color: var(--wp-components-color-foreground-inverted, #fff);
	1595	+ color: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc));
2035	1596	}
2036	1597	.components-form-token-field__suggestion[aria-disabled=true] {
2037	1598	pointer-events: none;
2038	1599	color: #949494;
		@@ -2178,8 +1739,13 @@
2178	1739	outline-offset: calc(2 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
2179	1740	box-shadow: inset 0 0 0 calc(2 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1) + 0.5px) rgba(255, 255, 255, 0.7);
2180	1741	}
2181	1742
	1743	+.components-input-control__container:focus-within:not(:has(:is(.components-input-control__prefix, .components-input-control__suffix):focus-within)) .components-input-control__backdrop {
	1744	+ outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
	1745	+ outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
	1746	+}
	1747	+
2182	1748	.components-menu-group + .components-menu-group {
2183	1749	padding-top: 8px;
2184	1750	border-top: 1px solid #1e1e1e;
2185	1751	}
		@@ -2199,9 +1765,9 @@
2199	1765	margin-bottom: 12px;
2200	1766	color: #757575;
2201	1767	text-transform: uppercase;
2202	1768	font-size: 11px;
2203		- font-weight: 499;
	1769	+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2204	1770	white-space: nowrap;
2205	1771	}
2206	1772
2207	1773	.components-menu-item__button,
		@@ -2206,9 +1772,9 @@
2206	1772
2207	1773	.components-menu-item__button,
2208	1774	.components-menu-item__button.components-button {
2209	1775	width: 100%;
2210		- font-weight: 400;
	1776	+ font-weight: var(--wpds-typography-font-weight-default, 400);
2211	1777	}
2212	1778	.components-menu-item__button[role=menuitemradio] .components-menu-item__item:only-child, .components-menu-item__button[role=menuitemcheckbox] .components-menu-item__item:only-child,
2213	1779	.components-menu-item__button.components-button[role=menuitemradio] .components-menu-item__item:only-child,
2214	1780	.components-menu-item__button.components-button[role=menuitemcheckbox] .components-menu-item__item:only-child {
		@@ -2298,8 +1864,12 @@
2298	1864	.components-menu-items-choice.components-button.has-icon {
2299	1865	padding-right: 12px;
2300	1866	}
2301	1867
	1868	+body.modal-open {
	1869	+ overflow: hidden;
	1870	+}
	1871	+
2302	1872	.components-modal__screen-overlay {
2303	1873	position: fixed;
2304	1874	top: 0;
2305	1875	left: 0;
		@@ -2492,9 +2062,9 @@
2492	2062	right: 0;
2493	2063	}
2494	2064	.components-modal__header .components-modal__header-heading {
2495	2065	font-size: 20px;
2496		- font-weight: 600;
	2066	+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2497	2067	}
2498	2068	.components-modal__header h1 {
2499	2069	line-height: 1;
2500	2070	margin: 0;
		@@ -2499,9 +2069,9 @@
2499	2069	line-height: 1;
2500	2070	margin: 0;
2501	2071	}
2502	2072	.components-modal__content.has-scrolled-content:not(.hide-header) .components-modal__header {
2503		- border-bottom-color: #ddd;
	2073	+ border-bottom-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2504	2074	}
2505	2075	.components-modal__header + p {
2506	2076	margin-top: 0;
2507	2077	}
		@@ -2539,11 +2109,11 @@
2539	2109	outline-offset: -2px;
2540	2110	}
2541	2111
2542	2112	.components-notice {
2543		- --wp-components-notice-background-color: var(--wpds-color-bg-surface-info-weak, #f3f9ff);
2544		- --wp-components-notice-border-color: var(--wpds-color-stroke-surface-info, #a9c6e7);
2545		- --wp-components-notice-text-color: var(--wpds-color-fg-content-info, #001b4f);
	2113	+ --wp-components-notice-background-color: var(--wpds-color-background-surface-info-weak, #f3f9ff);
	2114	+ --wp-components-notice-border-color: var(--wpds-color-stroke-surface-info, #adc6e2);
	2115	+ --wp-components-notice-text-color: var(--wpds-color-foreground-content-info, #001b4f);
2546	2116	box-sizing: border-box;
2547	2117	display: grid;
2548	2118	grid-template-columns: 1fr auto;
2549	2119	align-items: start;
		@@ -2556,27 +2126,27 @@
2556	2126	font-size: var(--wpds-typography-font-size-md, 13px);
2557	2127	line-height: var(--wpds-typography-line-height-sm, 20px);
2558	2128	}
2559	2129	.components-notice.is-success {
2560		- --wp-components-notice-background-color: var(--wpds-color-bg-surface-success-weak, #ebffed);
2561		- --wp-components-notice-border-color: var(--wpds-color-stroke-surface-success, #94d29e);
2562		- --wp-components-notice-text-color: var(--wpds-color-fg-content-success, #002900);
	2130	+ --wp-components-notice-background-color: var(--wpds-color-background-surface-success-weak, #ebffed);
	2131	+ --wp-components-notice-border-color: var(--wpds-color-stroke-surface-success, #92d39d);
	2132	+ --wp-components-notice-text-color: var(--wpds-color-foreground-content-success, #002900);
2563	2133	}
2564	2134	.components-notice.is-warning {
2565		- --wp-components-notice-background-color: var(--wpds-color-bg-surface-warning-weak, #fff7e1);
2566		- --wp-components-notice-border-color: var(--wpds-color-stroke-surface-warning, #e1bc7c);
2567		- --wp-components-notice-text-color: var(--wpds-color-fg-content-warning, #2e1900);
	2135	+ --wp-components-notice-background-color: var(--wpds-color-background-surface-warning-weak, #fff7e1);
	2136	+ --wp-components-notice-border-color: var(--wpds-color-stroke-surface-warning, #e1bd7c);
	2137	+ --wp-components-notice-text-color: var(--wpds-color-foreground-content-warning, #2e1900);
2568	2138	}
2569	2139	.components-notice.is-error {
2570		- --wp-components-notice-background-color: var(--wpds-color-bg-surface-error-weak, #fff6f5);
2571		- --wp-components-notice-border-color: var(--wpds-color-stroke-surface-error, #dab1aa);
2572		- --wp-components-notice-text-color: var(--wpds-color-fg-content-error, #470000);
	2140	+ --wp-components-notice-background-color: var(--wpds-color-background-surface-error-weak, #fff6f5);
	2141	+ --wp-components-notice-border-color: var(--wpds-color-stroke-surface-error, #e0afa7);
	2142	+ --wp-components-notice-text-color: var(--wpds-color-foreground-content-error, #470000);
2573	2143	}
2574	2144
2575	2145	.components-notice__content {
2576	2146	grid-column: 1;
2577	2147	grid-row: 1;
2578		- padding-block: calc((24px - 1lh) / 2);
	2148	+ padding-block: calc((var(--wpds-dimension-size-sm, 24px) - 1lh) / 2);
2579	2149	}
2580	2150
2581	2151	.components-notice__actions {
2582	2152	grid-column: 1;
		@@ -2590,18 +2160,14 @@
2590	2160
2591	2161	.components-notice__dismiss {
2592	2162	grid-column: 2;
2593	2163	grid-row: 1;
2594		- color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
	2164	+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
2595	2165	margin-inline-start: var(--wpds-dimension-gap-xs, 4px);
2596	2166	}
2597	2167	.components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover, .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):active, .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):focus {
2598		- color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
2599		- background-color: transparent;
	2168	+ color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
2600	2169	}
2601		-.components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
2602		- box-shadow: none;
2603		-}
2604	2170
2605	2171	.components-notice-list {
2606	2172	display: flex;
2607	2173	flex-direction: column;
		@@ -2643,9 +2209,9 @@
2643	2209	flex-shrink: 0;
2644	2210	justify-content: space-between;
2645	2211	align-items: center;
2646	2212	padding: 0 16px;
2647		- border-bottom: 1px solid #ddd;
	2213	+ border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2648	2214	box-sizing: content-box;
2649	2215	height: 47px;
2650	2216	}
2651	2217	.components-panel__header h2 {
		@@ -2686,15 +2252,12 @@
2686	2252
2687	2253	.components-panel__body-toggle.components-button {
2688	2254	position: relative;
2689	2255	padding: 16px 16px 16px 48px;
2690		- outline: none;
2691	2256	width: 100%;
2692		- font-weight: 499;
	2257	+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2693	2258	text-align: right;
2694	2259	color: #1e1e1e;
2695		- border: none;
2696		- box-shadow: none;
2697	2260	}
2698	2261	@media not (prefers-reduced-motion) {
2699	2262	.components-panel__body-toggle.components-button {
2700	2263	transition: 0.1s background ease-in-out;
		@@ -2703,9 +2266,9 @@
2703	2266	.components-panel__body-toggle.components-button {
2704	2267	height: auto;
2705	2268	}
2706	2269	.components-panel__body-toggle.components-button:focus {
2707		- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
	2270	+ outline-offset: calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) * -1);
2708	2271	border-radius: 0;
2709	2272	}
2710	2273	.components-panel__body-toggle.components-button .components-panel__arrow {
2711	2274	position: absolute;
		@@ -2789,18 +2352,18 @@
2789	2352	.components-placeholder__error,
2790	2353	.components-placeholder__instructions,
2791	2354	.components-placeholder__label,
2792	2355	.components-placeholder__fieldset {
2793		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	2356	+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2794	2357	font-size: 13px;
2795	2358	letter-spacing: initial;
2796	2359	line-height: initial;
2797	2360	text-transform: none;
2798		- font-weight: normal;
	2361	+ font-weight: 400;
2799	2362	}
2800	2363
2801	2364	.components-placeholder__label {
2802		- font-weight: 600;
	2365	+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2803	2366	align-items: center;
2804	2367	display: flex;
2805	2368	}
2806	2369	.components-placeholder__label > svg,
		@@ -2808,15 +2371,8 @@
2808	2371	.components-placeholder__label .block-editor-block-icon {
2809	2372	margin-left: 4px;
2810	2373	fill: currentColor;
2811	2374	}
2812		-@media (forced-colors: active) {
2813		- .components-placeholder__label > svg,
2814		- .components-placeholder__label .dashicon,
2815		- .components-placeholder__label .block-editor-block-icon {
2816		- fill: CanvasText;
2817		- }
2818		-}
2819	2375	.components-placeholder__label:empty {
2820	2376	display: none;
2821	2377	}
2822	2378
		@@ -2830,9 +2386,9 @@
2830	2386	justify-content: flex-start;
2831	2387	}
2832	2388	.components-placeholder__fieldset p,
2833	2389	.components-placeholder__fieldset form p {
2834		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	2390	+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2835	2391	font-size: 13px;
2836	2392	}
2837	2393
2838	2394	.components-placeholder__fieldset.is-column-layout,
		@@ -2840,23 +2396,17 @@
2840	2396	flex-direction: column;
2841	2397	}
2842	2398
2843	2399	.components-placeholder__input[type=url] {
2844		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	2400	+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2845	2401	padding: 6px 8px;
2846	2402	/* Fonts smaller than 16px causes mobile safari to zoom. */
2847	2403	font-size: 16px;
2848	2404	/* Override core line-height. To be reviewed. */
2849	2405	line-height: normal;
2850		- box-shadow: 0 0 0 transparent;
2851		- border-radius: 2px;
2852		- border: 1px solid #949494;
	2406	+ border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
	2407	+ border-radius: var(--wpds-border-radius-sm, 2px);
2853	2408	}
2854		-@media not (prefers-reduced-motion) {
2855		- .components-placeholder__input[type=url] {
2856		- transition: box-shadow 0.1s linear;
2857		- }
2858		-}
2859	2409	@media (min-width: 600px) {
2860	2410	.components-placeholder__input[type=url] {
2861	2411	font-size: 13px;
2862	2412	/* Override core line-height. To be reviewed. */
		@@ -2862,16 +2412,17 @@
2862	2412	/* Override core line-height. To be reviewed. */
2863	2413	line-height: normal;
2864	2414	}
2865	2415	}
	2416	+.components-placeholder__input[type=url]:hover:not(:disabled, [aria-disabled=true]) {
	2417	+ border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
	2418	+}
2866	2419	.components-placeholder__input[type=url]:focus {
2867		- border-color: var(--wp-admin-theme-color);
2868		- box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
2869		- outline: 2px solid transparent;
	2420	+ outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
	2421	+ outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
	2422	+ border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
	2423	+ box-shadow: none;
2870	2424	}
2871		-.components-placeholder__input[type=url]::-moz-placeholder {
2872		- color: rgba(30, 30, 30, 0.62);
2873		-}
2874	2425	.components-placeholder__input[type=url]::placeholder {
2875	2426	color: rgba(30, 30, 30, 0.62);
2876	2427	}
2877	2428	.components-placeholder__input[type=url] {
		@@ -3007,9 +2558,8 @@
3007	2558	background: #fff;
3008	2559	box-shadow: 0 0 0 1px #ccc, 0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02);
3009	2560	border-radius: 4px;
3010	2561	box-sizing: border-box;
3011		- width: -moz-min-content;
3012	2562	width: min-content;
3013	2563	}
3014	2564	.is-alternate .components-popover__content {
3015	2565	box-shadow: 0 0 0 1px #1e1e1e;
		@@ -3102,9 +2652,9 @@
3102	2652	.components-radio-control {
3103	2653	border: 0;
3104	2654	margin: 0;
3105	2655	padding: 0;
3106		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	2656	+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3107	2657	font-size: 13px;
3108	2658	}
3109	2659
3110	2660	.components-radio-control__group-wrapper.has-help {
		@@ -3114,10 +2664,9 @@
3114	2664	.components-radio-control__option {
3115	2665	display: grid;
3116	2666	grid-template-columns: auto 1fr;
3117	2667	grid-template-rows: auto minmax(0, max-content);
3118		- -moz-column-gap: 8px;
3119		- column-gap: 8px;
	2668	+ column-gap: 8px;
3120	2669	align-items: center;
3121	2670	}
3122	2671
3123	2672	.components-radio-control__input[type=radio] {
		@@ -3175,11 +2724,9 @@
3175	2724	.components-radio-control__input[type=radio] {
3176	2725	display: inline-flex;
3177	2726	margin: 0;
3178	2727	padding: 0;
3179		- -webkit-appearance: none;
3180		- -moz-appearance: none;
3181		- appearance: none;
	2728	+ appearance: none;
3182	2729	}
3183	2730	.components-radio-control__input[type=radio]:not(:disabled) {
3184	2731	cursor: var(--wpds-cursor-control, pointer);
3185	2732	}
		@@ -3196,14 +2743,14 @@
3196	2743	content: "";
3197	2744	border-radius: 50%;
3198	2745	}
3199	2746	.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);
	2747	+ background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
	2748	+ border: 1px solid var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
3202	2749	opacity: 1;
3203	2750	}
3204	2751	.components-radio-control__input[type=radio]:disabled:checked::before {
3205		- border-color: var(--wp-components-color-gray-400, #ccc);
	2752	+ border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
3206	2753	opacity: 1;
3207	2754	}
3208	2755
3209	2756	.components-radio-control__label {
		@@ -3208,10 +2755,11 @@
3208	2755
3209	2756	.components-radio-control__label {
3210	2757	grid-column: 2;
3211	2758	grid-row: 1;
	2759	+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
3212	2760	}
3213		-.components-radio-control:not(:disabled) .components-radio-control__label {
	2761	+.components-radio-control__input:not(:disabled) + .components-radio-control__label {
3214	2762	cursor: var(--wpds-cursor-control, pointer);
3215	2763	}
3216	2764	.components-radio-control__label {
3217	2765	line-height: 24px;
		@@ -3422,9 +2970,9 @@
3422	2970	-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
3423	2971	}
3424	2972
3425	2973	.components-snackbar {
3426		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	2974	+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3427	2975	font-size: 13px;
3428	2976	background: rgba(0, 0, 0, 0.85);
3429	2977	backdrop-filter: blur(16px) saturate(180%);
3430	2978	border-radius: 4px;
		@@ -3438,9 +2986,8 @@
3438	2986	pointer-events: auto;
3439	2987	}
3440	2988	@media (min-width: 600px) {
3441	2989	.components-snackbar {
3442		- width: -moz-fit-content;
3443	2990	width: fit-content;
3444	2991	}
3445	2992	}
3446	2993	.components-snackbar:focus {
		@@ -3467,14 +3014,10 @@
3467	3014	.components-snackbar__action.components-external-link {
3468	3015	margin-right: 32px;
3469	3016	color: #fff;
3470	3017	flex-shrink: 0;
	3018	+ --focus-color: #fff;
3471	3019	}
3472		-.components-snackbar__action.components-button:focus,
3473		-.components-snackbar__action.components-external-link:focus {
3474		- box-shadow: none;
3475		- outline: 1px dotted #fff;
3476		-}
3477	3020	.components-snackbar__action.components-button:hover,
3478	3021	.components-snackbar__action.components-external-link:hover {
3479	3022	text-decoration: none;
3480	3023	color: currentColor;
		@@ -3514,24 +3057,22 @@
3514	3057	border-radius: 0;
3515	3058	height: 48px !important;
3516	3059	background: transparent;
3517	3060	border: none;
3518		- box-shadow: none;
3519	3061	cursor: var(--wpds-cursor-control, pointer);
3520	3062	padding: 3px var(--wpds-dimension-padding-lg, 16px);
3521	3063	margin-right: 0;
3522		- font-weight: var(--wpds-typography-font-weight-regular, 400);
3523		- color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
	3064	+ font-weight: var(--wpds-typography-font-weight-default, 400);
	3065	+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
3524	3066	}
3525	3067	.components-tab-panel__tabs-item:disabled, .components-tab-panel__tabs-item[aria-disabled=true] {
3526		- color: var(--wpds-color-fg-interactive-neutral-disabled, #8d8d8d);
	3068	+ color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
3527	3069	}
3528	3070	.components-tab-panel__tabs-item:not(:disabled, [aria-disabled=true]):is(:hover, :focus-visible) {
3529		- color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
	3071	+ color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
3530	3072	}
3531	3073	.components-tab-panel__tabs-item:focus:not(:disabled) {
3532	3074	position: relative;
3533		- box-shadow: none;
3534	3075	outline: none;
3535	3076	}
3536	3077	.components-tab-panel__tabs-item::after {
3537	3078	content: "";
		@@ -3558,19 +3099,14 @@
3558	3099	content: "";
3559	3100	position: absolute;
3560	3101	inset: var(--wpds-dimension-padding-md, 12px);
3561	3102	pointer-events: none;
3562		- box-shadow: 0 0 0 0 transparent;
3563	3103	border-radius: var(--wpds-border-radius-sm, 2px);
3564	3104	}
3565		-@media not (prefers-reduced-motion) {
3566		- .components-tab-panel__tabs-item::before {
3567		- transition: box-shadow 0.1s linear;
3568		- }
3569		-}
3570	3105	.components-tab-panel__tabs-item:focus-visible::before {
3571		- box-shadow: 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
3572		- outline: 2px solid transparent;
	3106	+ outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
	3107	+ outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
	3108	+ outline-offset: 0;
3573	3109	}
3574	3110	.components-tab-panel__tabs[aria-orientation=vertical] .components-tab-panel__tabs-item {
3575	3111	border-radius: var(--wpds-border-radius-sm, 2px);
3576	3112	}
		@@ -3577,18 +3113,17 @@
3577	3113	.components-tab-panel__tabs[aria-orientation=vertical] .components-tab-panel__tabs-item::after {
3578	3114	display: none;
3579	3115	}
3580	3116	.components-tab-panel__tabs[aria-orientation=vertical] .components-tab-panel__tabs-item.is-active {
3581		- background: var(--wpds-color-bg-interactive-neutral-weak-active, #ededed);
	3117	+ background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
3582	3118	}
3583	3119
3584	3120	.components-tab-panel__tab-content:focus {
3585		- box-shadow: none;
3586	3121	outline: none;
3587	3122	}
3588	3123	.components-tab-panel__tab-content:focus-visible {
3589		- box-shadow: 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
3590		- outline: 2px solid transparent;
	3124	+ outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
	3125	+ outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
3591	3126	outline-offset: 0;
3592	3127	}
3593	3128
3594	3129	.components-text-control__input,
		@@ -3605,40 +3140,21 @@
3605	3140	.components-text-control__input[type=email],
3606	3141	.components-text-control__input[type=month],
3607	3142	.components-text-control__input[type=number] {
3608	3143	width: 100%;
3609		- height: 32px;
	3144	+ height: 40px;
3610	3145	margin: 0;
3611		- background: var(--wp-components-color-background, #fff);
3612		- color: var(--wp-components-color-foreground, #1e1e1e);
3613		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	3146	+ background: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
	3147	+ color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
	3148	+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3614	3149	padding: 6px 8px;
3615	3150	/* Fonts smaller than 16px causes mobile safari to zoom. */
3616	3151	font-size: 16px;
3617	3152	/* Override core line-height. To be reviewed. */
3618	3153	line-height: normal;
3619		- box-shadow: 0 0 0 transparent;
3620		- border-radius: 2px;
3621		- border: 1px solid #949494;
	3154	+ border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
	3155	+ border-radius: var(--wpds-border-radius-sm, 2px);
3622	3156	}
3623		-@media not (prefers-reduced-motion) {
3624		- .components-text-control__input,
3625		- .components-text-control__input[type=text],
3626		- .components-text-control__input[type=tel],
3627		- .components-text-control__input[type=time],
3628		- .components-text-control__input[type=url],
3629		- .components-text-control__input[type=week],
3630		- .components-text-control__input[type=password],
3631		- .components-text-control__input[type=color],
3632		- .components-text-control__input[type=date],
3633		- .components-text-control__input[type=datetime],
3634		- .components-text-control__input[type=datetime-local],
3635		- .components-text-control__input[type=email],
3636		- .components-text-control__input[type=month],
3637		- .components-text-control__input[type=number] {
3638		- transition: box-shadow 0.1s linear;
3639		- }
3640		-}
3641	3157	@media (min-width: 600px) {
3642	3158	.components-text-control__input,
3643	3159	.components-text-control__input[type=text],
3644	3160	.components-text-control__input[type=tel],
		@@ -3657,8 +3173,24 @@
3657	3173	/* Override core line-height. To be reviewed. */
3658	3174	line-height: normal;
3659	3175	}
3660	3176	}
	3177	+.components-text-control__input:hover:not(:disabled, [aria-disabled=true]),
	3178	+.components-text-control__input[type=text]:hover:not(:disabled, [aria-disabled=true]),
	3179	+.components-text-control__input[type=tel]:hover:not(:disabled, [aria-disabled=true]),
	3180	+.components-text-control__input[type=time]:hover:not(:disabled, [aria-disabled=true]),
	3181	+.components-text-control__input[type=url]:hover:not(:disabled, [aria-disabled=true]),
	3182	+.components-text-control__input[type=week]:hover:not(:disabled, [aria-disabled=true]),
	3183	+.components-text-control__input[type=password]:hover:not(:disabled, [aria-disabled=true]),
	3184	+.components-text-control__input[type=color]:hover:not(:disabled, [aria-disabled=true]),
	3185	+.components-text-control__input[type=date]:hover:not(:disabled, [aria-disabled=true]),
	3186	+.components-text-control__input[type=datetime]:hover:not(:disabled, [aria-disabled=true]),
	3187	+.components-text-control__input[type=datetime-local]:hover:not(:disabled, [aria-disabled=true]),
	3188	+.components-text-control__input[type=email]:hover:not(:disabled, [aria-disabled=true]),
	3189	+.components-text-control__input[type=month]:hover:not(:disabled, [aria-disabled=true]),
	3190	+.components-text-control__input[type=number]:hover:not(:disabled, [aria-disabled=true]) {
	3191	+ border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
	3192	+}
3661	3193	.components-text-control__input:focus,
3662	3194	.components-text-control__input[type=text]:focus,
3663	3195	.components-text-control__input[type=tel]:focus,
3664	3196	.components-text-control__input[type=time]:focus,
		@@ -3671,15 +3203,13 @@
3671	3203	.components-text-control__input[type=datetime-local]:focus,
3672	3204	.components-text-control__input[type=email]:focus,
3673	3205	.components-text-control__input[type=month]:focus,
3674	3206	.components-text-control__input[type=number]:focus {
3675		- border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3676		- box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3677		- outline: 2px solid transparent;
	3207	+ outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
	3208	+ outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
	3209	+ border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
	3210	+ box-shadow: none;
3678	3211	}
3679		-.components-text-control__input::-moz-placeholder, .components-text-control__input[type=text]::-moz-placeholder, .components-text-control__input[type=tel]::-moz-placeholder, .components-text-control__input[type=time]::-moz-placeholder, .components-text-control__input[type=url]::-moz-placeholder, .components-text-control__input[type=week]::-moz-placeholder, .components-text-control__input[type=password]::-moz-placeholder, .components-text-control__input[type=color]::-moz-placeholder, .components-text-control__input[type=date]::-moz-placeholder, .components-text-control__input[type=datetime]::-moz-placeholder, .components-text-control__input[type=datetime-local]::-moz-placeholder, .components-text-control__input[type=email]::-moz-placeholder, .components-text-control__input[type=month]::-moz-placeholder, .components-text-control__input[type=number]::-moz-placeholder {
3680		- color: rgba(30, 30, 30, 0.62);
3681		-}
3682	3212	.components-text-control__input::placeholder,
3683	3213	.components-text-control__input[type=text]::placeholder,
3684	3214	.components-text-control__input[type=tel]::placeholder,
3685	3215	.components-text-control__input[type=time]::placeholder,
		@@ -3708,13 +3238,11 @@
3708	3238	.components-text-control__input[type=datetime-local],
3709	3239	.components-text-control__input[type=email],
3710	3240	.components-text-control__input[type=month],
3711	3241	.components-text-control__input[type=number] {
3712		- border-color: var(--wp-components-color-gray-600, #949494);
	3242	+ padding-right: 12px;
	3243	+ padding-left: 12px;
3713	3244	}
3714		-.components-text-control__input::-moz-placeholder, .components-text-control__input[type=text]::-moz-placeholder, .components-text-control__input[type=tel]::-moz-placeholder, .components-text-control__input[type=time]::-moz-placeholder, .components-text-control__input[type=url]::-moz-placeholder, .components-text-control__input[type=week]::-moz-placeholder, .components-text-control__input[type=password]::-moz-placeholder, .components-text-control__input[type=color]::-moz-placeholder, .components-text-control__input[type=date]::-moz-placeholder, .components-text-control__input[type=datetime]::-moz-placeholder, .components-text-control__input[type=datetime-local]::-moz-placeholder, .components-text-control__input[type=email]::-moz-placeholder, .components-text-control__input[type=month]::-moz-placeholder, .components-text-control__input[type=number]::-moz-placeholder {
3715		- color: color-mix(in srgb, var(--wp-components-color-foreground, #1e1e1e), transparent 38%);
3716		-}
3717	3245	.components-text-control__input::placeholder,
3718	3246	.components-text-control__input[type=text]::placeholder,
3719	3247	.components-text-control__input[type=tel]::placeholder,
3720	3248	.components-text-control__input[type=time]::placeholder,
		@@ -3727,28 +3255,10 @@
3727	3255	.components-text-control__input[type=datetime-local]::placeholder,
3728	3256	.components-text-control__input[type=email]::placeholder,
3729	3257	.components-text-control__input[type=month]::placeholder,
3730	3258	.components-text-control__input[type=number]::placeholder {
3731		- color: color-mix(in srgb, var(--wp-components-color-foreground, #1e1e1e), transparent 38%);
	3259	+ color: color-mix(in srgb, var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e)), transparent 38%);
3732	3260	}
3733		-.components-text-control__input.is-next-40px-default-size,
3734		-.components-text-control__input[type=text].is-next-40px-default-size,
3735		-.components-text-control__input[type=tel].is-next-40px-default-size,
3736		-.components-text-control__input[type=time].is-next-40px-default-size,
3737		-.components-text-control__input[type=url].is-next-40px-default-size,
3738		-.components-text-control__input[type=week].is-next-40px-default-size,
3739		-.components-text-control__input[type=password].is-next-40px-default-size,
3740		-.components-text-control__input[type=color].is-next-40px-default-size,
3741		-.components-text-control__input[type=date].is-next-40px-default-size,
3742		-.components-text-control__input[type=datetime].is-next-40px-default-size,
3743		-.components-text-control__input[type=datetime-local].is-next-40px-default-size,
3744		-.components-text-control__input[type=email].is-next-40px-default-size,
3745		-.components-text-control__input[type=month].is-next-40px-default-size,
3746		-.components-text-control__input[type=number].is-next-40px-default-size {
3747		- height: 40px;
3748		- padding-right: 12px;
3749		- padding-left: 12px;
3750		-}
3751	3261
3752	3262	.components-text-control__input[type=email],
3753	3263	.components-text-control__input[type=url] {
3754	3264	direction: ltr;
		@@ -3759,9 +3269,9 @@
3759	3269	color: #757575;
3760	3270	}
3761	3271	.components-tip svg {
3762	3272	align-self: center;
3763		- fill: #f0b849;
	3273	+ color: #f0b849;
3764	3274	flex-shrink: 0;
3765	3275	margin-left: 16px;
3766	3276	}
3767	3277	.components-tip p {
		@@ -3769,8 +3279,9 @@
3769	3279	}
3770	3280
3771	3281	.components-toggle-control__label {
3772	3282	line-height: 16px;
	3283	+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
3773	3284	}
3774	3285	.components-toggle-control__label:not(.is-disabled) {
3775	3286	cursor: var(--wpds-cursor-control, pointer);
3776	3287	}
		@@ -3781,9 +3292,9 @@
3781	3292	}
3782	3293
3783	3294	.components-accessible-toolbar {
3784	3295	display: inline-flex;
3785		- border: 1px solid var(--wp-components-color-foreground, #1e1e1e);
	3296	+ border: 1px solid var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
3786	3297	border-radius: 2px;
3787	3298	flex-shrink: 0;
3788	3299	}
3789	3300	.components-accessible-toolbar > .components-toolbar-group:last-child {
		@@ -3848,9 +3359,9 @@
3848	3359	background: transparent;
3849	3360	}
3850	3361	.components-accessible-toolbar .components-button.is-pressed::before,
3851	3362	.components-toolbar .components-button.is-pressed::before {
3852		- background: var(--wp-components-color-foreground, #1e1e1e);
	3363	+ background: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
3853	3364	}
3854	3365	.components-accessible-toolbar .components-button:focus::before,
3855	3366	.components-toolbar .components-button:focus::before {
3856	3367	box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
		@@ -3878,11 +3389,11 @@
3878	3389	padding: 5px 0 5px 10px;
3879	3390	}
3880	3391	.components-toolbar__control.components-button[data-subscript]::after {
3881	3392	content: attr(data-subscript);
3882		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	3393	+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3883	3394	font-size: 13px;
3884		- font-weight: 600;
	3395	+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3885	3396	line-height: 12px;
3886	3397	position: absolute;
3887	3398	left: 8px;
3888	3399	bottom: 10px;
		@@ -3892,10 +3403,10 @@
3892	3403	}
3893	3404
3894	3405	.components-toolbar-group {
3895	3406	min-height: 48px;
3896		- border-left: 1px solid var(--wp-components-color-foreground, #1e1e1e);
3897		- background-color: var(--wp-components-color-background, #fff);
	3407	+ border-left: 1px solid var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
	3408	+ background-color: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
3898	3409	display: inline-flex;
3899	3410	flex-shrink: 0;
3900	3411	flex-wrap: wrap;
3901	3412	padding-right: 6px;
		@@ -3916,9 +3427,9 @@
3916	3427	padding-left: 6px;
3917	3428	}
3918	3429	.components-toolbar-group .components-button.components-button svg,
3919	3430	.components-toolbar-group .components-button.has-icon.has-icon svg {
3920		- min-width: 24px;
	3431	+ min-width: var(--wpds-dimension-size-sm, 24px);
3921	3432	}
3922	3433	.components-toolbar-group .components-button.components-button::before,
3923	3434	.components-toolbar-group .components-button.has-icon.has-icon::before {
3924	3435	right: 2px;
		@@ -3927,10 +3438,10 @@
3927	3438
3928	3439	.components-toolbar {
3929	3440	min-height: 48px;
3930	3441	margin: 0;
3931		- border: 1px solid var(--wp-components-color-foreground, #1e1e1e);
3932		- background-color: var(--wp-components-color-background, #fff);
	3442	+ border: 1px solid var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
	3443	+ background-color: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
3933	3444	display: inline-flex;
3934	3445	flex-shrink: 0;
3935	3446	flex-wrap: wrap;
3936	3447	}
		@@ -3951,9 +3462,9 @@
3951	3462	div.components-toolbar > div + div.has-left-divider::before {
3952	3463	display: inline-block;
3953	3464	content: "";
3954	3465	box-sizing: content-box;
3955		- background-color: #ddd;
	3466	+ background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3956	3467	position: absolute;
3957	3468	top: 8px;
3958	3469	right: -3px;
3959	3470	width: 1px;
		@@ -3961,9 +3472,9 @@
3961	3472	}
3962	3473
3963	3474	.components-tooltip {
3964	3475	background: #000;
3965		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	3476	+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3966	3477	border-radius: var(--wpds-border-radius-md, 4px);
3967	3478	color: #f0f0f0;
3968	3479	text-align: center;
3969	3480	line-height: 1.4;
		@@ -3976,36 +3487,19 @@
3976	3487	.components-tooltip__shortcut {
3977	3488	margin-right: 8px;
3978	3489	}
3979	3490
3980		-.components-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
3981		- --wp-components-color-accent: #cc1818;
3982		- border-color: #cc1818;
	3491	+.components-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-validated-control__content-editable [role=textbox], .components-validated-control__wrapper-with-error-delegate:has(select:invalid[data-validity-visible]) .components-input-control__backdrop, .components-validated-control textarea:invalid[data-validity-visible], .components-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
	3492	+ --focus-color: var(--wpds-color-stroke-interactive-error, #cc1818);
3983	3493	}
3984		-.components-validated-control :is(textarea, input[type=text]):invalid[data-validity-visible] {
3985		- --wp-admin-theme-color: #cc1818;
3986		- --wp-components-color-accent: #cc1818;
3987		- border-color: #cc1818;
	3494	+
	3495	+.components-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-validated-control__content-editable [role=textbox], .components-validated-control__wrapper-with-error-delegate:has(select:invalid[data-validity-visible]) .components-input-control__backdrop, .components-validated-control textarea:invalid[data-validity-visible], .components-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
	3496	+ border-color: var(--wpds-color-stroke-interactive-error, #cc1818);
3988	3497	}
3989		-.components-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])) {
3990		- --wp-components-color-accent: #cc1818;
3991		-}
3992	3498
3993	3499	.components-validated-control__wrapper-with-error-delegate {
3994	3500	position: relative;
3995	3501	}
3996		-.components-validated-control__wrapper-with-error-delegate:has(select:invalid[data-validity-visible]) .components-input-control__backdrop {
3997		- --wp-components-color-accent: #cc1818;
3998		- border-color: #cc1818;
3999		-}
4000		-.components-validated-control__wrapper-with-error-delegate:has(input[type=radio]:invalid[data-validity-visible]) {
4001		- --wp-components-color-accent: #cc1818;
4002		-}
4003		-.components-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])) {
4004		- --wp-components-color-accent: #cc1818;
4005		- border-color: #cc1818;
4006		-}
4007		-
4008	3502	.components-validated-control__error-delegate {
4009	3503	position: absolute;
4010	3504	top: 0;
4011	3505	height: 100%;
		@@ -4013,46 +3507,8 @@
4013	3507	opacity: 0;
4014	3508	pointer-events: none;
4015	3509	}
4016	3510
4017		-.components-validated-control__indicator {
4018		- display: flex;
4019		- align-items: flex-start;
4020		- gap: 4px;
4021		- margin: 8px 0 0;
4022		- font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4023		- font-size: 12px;
4024		- line-height: 16px;
4025		- color: var(--wp-components-color-gray-700, #757575);
4026		- animation: components-validated-control__indicator-jump 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
4027		-}
4028		-.components-validated-control__indicator.is-invalid {
4029		- color: #cc1818;
4030		-}
4031		-.components-validated-control__indicator.is-valid {
4032		- color: color-mix(in srgb, #000 30%, #4ab866);
4033		-}
4034		-
4035		-.components-validated-control__indicator-icon {
4036		- flex-shrink: 0;
4037		-}
4038		-
4039		-.components-validated-control__indicator-spinner {
4040		- margin: 2px;
4041		- width: 12px;
4042		- height: 12px;
4043		-}
4044		-
4045		-@keyframes components-validated-control__indicator-jump {
4046		- 0% {
4047		- transform: translateY(-4px);
4048		- opacity: 0;
4049		- }
4050		- 100% {
4051		- transform: translateY(0);
4052		- opacity: 1;
4053		- }
4054		-}
4055	3511	:root {
4056	3512	--wp-admin-theme-color: #3858e9;
4057	3513	--wp-admin-theme-color--rgb: 56, 88, 233;
4058	3514	--wp-admin-theme-color-darker-10: rgb(33.0384615385, 68.7307692308, 230.4615384615);