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