@wordpress/edit-site 6.48.0 → 6.48.2-next.v.202606191442.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.48.0",
+	"version": "6.48.2-next.v.202606191442.0+17fe7db8a",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -41,61 +41,61 @@
 		},
 		"./package.json": "./package.json"
 	},
-	"react-native": "src/index",
 	"wpScript": true,
 	"wpScriptExtraDependencies": [
 		"wp-dom-ready"
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.48.0",
-		"@wordpress/admin-ui": "^2.3.0",
-		"@wordpress/api-fetch": "^7.48.0",
-		"@wordpress/base-styles": "^9.1.0",
-		"@wordpress/blob": "^4.48.0",
-		"@wordpress/block-editor": "^15.21.0",
-		"@wordpress/block-library": "^9.48.0",
-		"@wordpress/blocks": "^15.21.0",
-		"@wordpress/commands": "^1.48.0",
-		"@wordpress/components": "^35.0.0",
-		"@wordpress/compose": "^8.1.0",
-		"@wordpress/core-data": "^7.48.0",
-		"@wordpress/data": "^10.48.0",
-		"@wordpress/dataviews": "^16.0.0",
-		"@wordpress/date": "^5.48.0",
-		"@wordpress/deprecated": "^4.48.0",
-		"@wordpress/dom": "^4.48.0",
-		"@wordpress/editor": "^14.48.0",
-		"@wordpress/element": "^8.0.0",
-		"@wordpress/escape-html": "^3.48.0",
-		"@wordpress/fields": "^0.40.0",
-		"@wordpress/global-styles-engine": "^1.15.0",
-		"@wordpress/global-styles-ui": "^1.15.0",
-		"@wordpress/hooks": "^4.48.0",
-		"@wordpress/html-entities": "^4.48.0",
-		"@wordpress/i18n": "^6.21.0",
-		"@wordpress/icons": "^13.3.0",
-		"@wordpress/keyboard-shortcuts": "^5.48.0",
-		"@wordpress/keycodes": "^4.48.0",
-		"@wordpress/media-utils": "^5.48.0",
-		"@wordpress/notices": "^5.48.0",
-		"@wordpress/patterns": "^2.48.0",
-		"@wordpress/plugins": "^7.48.0",
-		"@wordpress/preferences": "^4.48.0",
-		"@wordpress/primitives": "^4.48.0",
-		"@wordpress/private-apis": "^1.48.0",
-		"@wordpress/reusable-blocks": "^5.48.0",
-		"@wordpress/router": "^1.48.0",
-		"@wordpress/style-engine": "^2.48.0",
-		"@wordpress/ui": "^0.15.0",
-		"@wordpress/url": "^4.48.0",
-		"@wordpress/viewport": "^6.48.0",
-		"@wordpress/views": "^1.15.0",
-		"@wordpress/widgets": "^4.48.0",
-		"@wordpress/wordcount": "^4.48.0",
+		"@wordpress/a11y": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/admin-ui": "^2.3.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/api-fetch": "^7.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/base-styles": "^10.0.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/blob": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/block-editor": "^15.22.1-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/block-library": "^10.0.1-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/blocks": "^15.21.3-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/commands": "^1.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/components": "^35.1.1-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/compose": "^8.1.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/core-data": "^7.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/data": "^10.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/dataviews": "^17.0.1-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/date": "^5.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/deprecated": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/dom": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/editor": "^14.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/element": "^8.0.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/escape-html": "^3.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/fields": "^0.40.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/global-styles-engine": "^1.15.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/global-styles-ui": "^1.15.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/hooks": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/html-entities": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/i18n": "^6.21.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/icons": "^14.0.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/keyboard-shortcuts": "^5.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/keycodes": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/media-utils": "^5.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/notices": "^5.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/patterns": "^2.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/plugins": "^7.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/preferences": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/primitives": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/private-apis": "^1.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/reusable-blocks": "^5.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/router": "^1.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/style-engine": "^2.49.1-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/theme": "^0.16.1-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/ui": "^0.16.1-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/url": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/viewport": "^6.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/views": "^1.15.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/widgets": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/wordcount": "^4.48.2-next.v.202606191442.0+17fe7db8a",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
-		"colord": "^2.9.2",
+		"colord": "^2.9.3",
 		"fast-deep-equal": "^3.1.3",
 		"memize": "^2.1.0",
 		"react-autosize-textarea": "^7.1.0"
@@ -107,5 +107,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e7856693aeb4e2522d13608cd32c994e4a97cb9c"
+	"gitHead": "1b6a19222df5a88f161880b5789efb3171d8f425"
 }

package/src/components/layout/index.js

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { NavigableRegion } from '@wordpress/admin-ui';
+import { NavigableRegion, getAdminThemeColors } from '@wordpress/admin-ui';
 import {
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
@@ -20,18 +20,18 @@ import {
 	usePrevious,
 } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
-import { useState, useRef, useEffect } from '@wordpress/element';
+import { useState, useRef, useEffect, useMemo } from '@wordpress/element';
 import {
 	UnsavedChangesWarning,
 	ErrorBoundary,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { privateApis as themePrivateApis } from '@wordpress/theme';
 import { PluginArea } from '@wordpress/plugins';
 import { SnackbarNotices, store as noticesStore } from '@wordpress/notices';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as preferencesStore } from '@wordpress/preferences';
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
 
 /**
@@ -48,9 +48,11 @@ import SaveHub from '../save-hub';
 import SavePanel from '../save-panel';
 
 const { useLocation } = unlock( routerPrivateApis );
-const { useStyle } = unlock( editorPrivateApis );
+const { useStyle, UploadProgressSnackbar } = unlock( editorPrivateApis );
+const { ThemeProvider } = unlock( themePrivateApis );
 
 const ANIMATION_DURATION = 0.3;
+const CONTENT_COLOR = { background: '#ffffff' };
 
 function Layout() {
 	const { query, name: routeKey, areas, widths } = useLocation();
@@ -59,6 +61,8 @@ function Layout() {
 	const hasAdminBarInEditor = window.__experimentalAdminBarInEditor;
 	const showDesktopSiteHub = ! hasAdminBarInEditor;
 	const showMobileSiteHub = ! hasAdminBarInEditor || routeKey !== 'home';
+	const hasMobileAreas =
+		areas.mobileSidebar || areas.mobileContent || areas.preview;
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const toggleRef = useRef();
 	const navigateRegionsProps = useNavigateRegions();
@@ -111,7 +115,7 @@ function Layout() {
 						The NavigableRegion must always be rendered and not use
 						`inert` otherwise `useNavigateRegions` will fail.
 					*/ }
-					{ ( ! isMobileViewport || ! areas.mobile ) && (
+					{ ( ! isMobileViewport || ! hasMobileAreas ) && (
 						<NavigableRegion
 							ariaLabel={ __( 'Navigation' ) }
 							className="edit-site-layout__sidebar-region"
@@ -164,8 +168,9 @@ function Layout() {
 					) }
 
 					<SnackbarNotices className="edit-site-layout__snackbar" />
+					<UploadProgressSnackbar />
 
-					{ isMobileViewport && areas.mobile && (
+					{ isMobileViewport && hasMobileAreas && (
 						<div className="edit-site-layout__mobile">
 							<SidebarNavigationProvider>
 								{ canvas !== 'edit' ? (
@@ -178,18 +183,46 @@ function Layout() {
 												}
 											/>
 										) }
-										<SidebarContent routeKey={ routeKey }>
-											<ErrorBoundary>
-												{ areas.mobile }
-											</ErrorBoundary>
-										</SidebarContent>
+										{ areas.mobileContent ? (
+											/*
+											 * ThemeProvider wraps SidebarContent (rather than
+											 * just the content) so the scroll wrapper it renders
+											 * inherits the content background tokens. See
+											 * `.edit-site-sidebar__screen-wrapper` in style.scss.
+											 */
+											<ThemeProvider
+												color={ CONTENT_COLOR }
+											>
+												<SidebarContent
+													routeKey={ routeKey }
+												>
+													<div className="edit-site-layout__mobile-content">
+														<ErrorBoundary>
+															{
+																areas.mobileContent
+															}
+														</ErrorBoundary>
+													</div>
+												</SidebarContent>
+											</ThemeProvider>
+										) : (
+											<SidebarContent
+												routeKey={ routeKey }
+											>
+												<ErrorBoundary>
+													{ areas.mobileSidebar }
+												</ErrorBoundary>
+											</SidebarContent>
+										) }
 										<SaveHub />
 										<SavePanel />
 									</>
 								) : (
-									<ErrorBoundary>
-										{ areas.mobile }
-									</ErrorBoundary>
+									<ThemeProvider color={ CONTENT_COLOR }>
+										<ErrorBoundary>
+											{ areas.preview }
+										</ErrorBoundary>
+									</ThemeProvider>
 								) }
 							</SidebarNavigationProvider>
 						</div>
@@ -204,7 +237,11 @@ function Layout() {
 									maxWidth: widths?.content,
 								} }
 							>
-								<ErrorBoundary>{ areas.content }</ErrorBoundary>
+								<ThemeProvider color={ CONTENT_COLOR }>
+									<ErrorBoundary>
+										{ areas.content }
+									</ErrorBoundary>
+								</ThemeProvider>
 							</div>
 						) }
 
@@ -215,7 +252,9 @@ function Layout() {
 								maxWidth: widths?.edit,
 							} }
 						>
-							<ErrorBoundary>{ areas.edit }</ErrorBoundary>
+							<ThemeProvider color={ CONTENT_COLOR }>
+								<ErrorBoundary>{ areas.edit }</ErrorBoundary>
+							</ThemeProvider>
 						</div>
 					) }
 
@@ -255,7 +294,11 @@ function Layout() {
 													backgroundColor,
 											} }
 										>
-											{ areas.preview }
+											<ThemeProvider
+												color={ CONTENT_COLOR }
+											>
+												{ areas.preview }
+											</ThemeProvider>
 										</ResizableFrame>
 									</ErrorBoundary>
 								</div>
@@ -269,6 +312,7 @@ function Layout() {
 }
 
 export default function LayoutWithGlobalStylesProvider( props ) {
+	const themeColors = useMemo( getAdminThemeColors, [] );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	function onPluginAreaError( name ) {
 		createErrorNotice(
@@ -287,7 +331,9 @@ export default function LayoutWithGlobalStylesProvider( props ) {
 			<Tooltip.Provider>
 				{ /** This needs to be within the SlotFillProvider */ }
 				<PluginArea onError={ onPluginAreaError } />
-				<Layout { ...props } />
+				<ThemeProvider color={ themeColors }>
+					<Layout { ...props } />
+				</ThemeProvider>
 			</Tooltip.Provider>
 		</SlotFillProvider>
 	);

package/src/components/layout/style.scss

@@ -1,18 +1,17 @@
-@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/mixins" as *;
 @use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/z-index" as *;
 
 .edit-site-layout {
 	height: 100%;
-	background: $gray-900;
-	color: $gray-400;
+	background: var(--wpds-color-background-surface-neutral-weak);
+	color: var(--wpds-color-foreground-content-neutral);
 	display: flex;
 	flex-direction: column;
 
 	// Show a dark background in "frame" mode to avoid edge artifacts.
 	&:not(.is-full-canvas) .editor-visual-editor {
-		background: $gray-900;
+		background: var(--wpds-color-background-surface-neutral-weak);
 	}
 }
 
@@ -81,6 +80,20 @@
 	}
 }
 
+.edit-site-layout__mobile-content {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+
+// On mobile, the content surface lives on the scroll wrapper
+// (not the inner content element) so it also covers the wrapper's
+// reserved scrollbar gutter, preventing the theme background color from
+// bleeding through.
+.edit-site-sidebar__screen-wrapper:has(.edit-site-layout__mobile-content) {
+	background: var(--wpds-color-background-surface-neutral);
+}
+
 .edit-site-layout__canvas-container {
 	position: relative;
 	flex-grow: 1;
@@ -104,7 +117,7 @@
 	}
 
 	.edit-site-resizable-frame__inner {
-		color: $gray-900;
+		color: var(--wpds-color-foreground-content-neutral);
 	}
 
 	@include break-medium {
@@ -122,7 +135,7 @@
 			}
 
 			.edit-site-layout:not(.is-full-canvas) & {
-				border-radius: $radius-large;
+				border-radius: var(--wpds-border-radius-xl);
 			}
 
 			&:hover {
@@ -173,7 +186,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	view-transition-name: toggle;
 	/* stylelint-enable  */
 	position: relative;
-	color: $white;
+	color: var(--wpds-color-foreground-interactive-neutral);
 	height: $header-height;
 	width: $header-height;
 	overflow: hidden;
@@ -181,12 +194,12 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	background: $gray-900;
+	background: var(--wpds-color-background-surface-neutral-weak);
 	border-radius: 0;
 
 	&:hover,
 	&:active {
-		color: $white;
+		color: var(--wpds-color-foreground-interactive-neutral-active);
 	}
 
 	&:focus-visible,
@@ -229,8 +242,8 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	left: auto;
 	right: 0;
 	width: $sidebar-width;
-	color: $gray-900;
-	background: $white;
+	color: var(--wpds-color-foreground-content-neutral);
+	background: var(--wpds-color-background-surface-neutral-strong);
 
 	&:focus,
 	&:focus-within {
@@ -246,7 +259,9 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	}
 
 	@include break-medium {
-		border-left: $border-width solid $gray-300;
+		border-left:
+			$border-width solid
+			var(--wpds-color-stroke-surface-neutral);
 	}
 }
 
@@ -256,7 +271,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	overflow: hidden;
 	box-shadow: $elevation-x-small;
 	@include break-medium() {
-		border-radius: 8px;
+		border-radius: var(--wpds-border-radius-xl);
 		margin: $canvas-padding $canvas-padding $canvas-padding 0;
 	}
 }

package/src/components/page-patterns/style.scss

@@ -1,4 +1,3 @@
-@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/mixins" as *;
 @use "@wordpress/base-styles/variables" as *;
 
@@ -93,7 +92,7 @@
 		box-shadow: 0 0 0.5px 0.5px var(--wp-admin-theme-color);
 		box-sizing: border-box;
 		z-index: 1;
-		background-color: $white;
+		background-color: var(--wpds-color-background-surface-neutral-strong);
 		width: calc(100% + 2px); // Account for the border width of the token field.
 		left: -1px;
 		min-width: initial;

package/src/components/page-templates/index-legacy.js

@@ -19,9 +19,9 @@ import AddNewTemplate from '../add-new-template-legacy';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 import { useEditPostAction } from '../dataviews-actions';
-import { authorField, descriptionField, previewField } from './fields';
+import { authorField, previewField } from './fields';
 
-const { usePostActions, templateTitleField } = unlock( editorPrivateApis );
+const { usePostActions, usePostFields } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
 const { useEntityRecordsWithPermissions } = unlock( corePrivateApis );
 
@@ -97,18 +97,26 @@ export default function PageTemplates() {
 		} ) );
 	}, [ records ] );
 
-	const fields = useMemo(
-		() => [
+	const postFields = usePostFields( { postType: TEMPLATE_POST_TYPE } );
+	const fields = useMemo( () => {
+		const __fields = [
 			previewField,
-			templateTitleField,
-			descriptionField,
 			{
 				...authorField,
 				elements: authors,
 			},
-		],
-		[ authors ]
-	);
+		];
+		// TODO: Only `description` and `title` are sourced from the shared
+		// `@wordpress/fields` registry so far. The remaining local fields
+		// (e.g. `previewField`, `authorField`) should also be evaluated for
+		// migration to the shared registry.
+		return [
+			...__fields,
+			...( postFields || [] ).filter( ( field ) =>
+				[ 'description', 'title' ].includes( field.id )
+			),
+		];
+	}, [ authors, postFields ] );
 
 	const { data, paginationInfo } = useMemo( () => {
 		return filterSortAndPaginate( records, view, fields );

package/src/components/page-templates/style.scss

@@ -35,9 +35,4 @@
 .edit-site-list__rename-modal {
 	// The rename dropdown popover is open at the same time as the rename modal. The latter has to be higher.
 	z-index: z-index(".edit-site-list__rename-modal");
-	.components-base-control {
-		@include break-medium() {
-			width: $grid-unit * 40;
-		}
-	}
 }

package/src/components/post-list/quick-edit-modal.js

@@ -167,7 +167,6 @@ export function QuickEditModal( {
 				<PostCardPanel
 					postType={ postType }
 					postId={ postId }
-					onClose={ closeModal }
 					hideActions
 				/>
 			</div>

package/src/components/resizable-frame/index.js

@@ -17,7 +17,6 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { addQueryArgs } from '@wordpress/url';
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
 
 /**

package/src/components/save-hub/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { __experimentalHStack as HStack } from '@wordpress/components';
+import { Stack } from '@wordpress/ui';
 import { store as coreStore } from '@wordpress/core-data';
 import { check } from '@wordpress/icons';
 
@@ -28,15 +28,15 @@ export default function SaveHub() {
 		};
 	}, [] );
 	return (
-		<HStack className="edit-site-save-hub" alignment="right" spacing={ 4 }>
+		<Stack className="edit-site-save-hub" gap="lg">
 			<SaveButton
 				className="edit-site-save-hub__button"
-				variant={ isDisabled ? null : 'primary' }
+				variant={ isDisabled && ! isSaving ? null : 'primary' }
 				showTooltip={ false }
 				icon={ isDisabled && ! isSaving ? check : null }
 				showReviewMessage
 				__next40pxDefaultSize
 			/>
-		</HStack>
+		</Stack>
 	);
 }

package/src/components/save-hub/style.scss

@@ -1,12 +1,11 @@
-@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
 
 .edit-site-save-hub {
-	color: $gray-600;
-	border-top: 1px solid $gray-800;
+	color: var(--wpds-color-foreground-content-neutral);
+	border-top: 1px solid var(--wpds-color-stroke-surface-neutral);
 	flex-shrink: 0;
 	margin: 0;
-	padding: $grid-unit-20 $canvas-padding;
+	padding: $grid-unit-20;
 }
 
 .edit-site-save-hub__button {
@@ -18,6 +17,7 @@
 		opacity: 1;
 	}
 
+	&[aria-disabled="true"],
 	&[aria-disabled="true"]:hover {
 		color: inherit;
 	}
@@ -25,7 +25,7 @@
 	&:not(.is-primary) {
 		&.is-busy,
 		&.is-busy[aria-disabled="true"]:hover {
-			color: $gray-900;
+			color: var(--wpds-color-foreground-interactive-neutral);
 		}
 	}
 }

package/src/components/sidebar-button/style.scss

@@ -1,7 +1,5 @@
-@use "@wordpress/base-styles/colors" as *;
-
 .edit-site-sidebar-button {
-	color: $gray-200;
+	color: var(--wpds-color-foreground-interactive-neutral);
 	flex-shrink: 0;
 
 	// Focus (resets default button focus and use focus-visible).
@@ -21,6 +19,6 @@
 	&:focus,
 	&:not(:disabled,[aria-disabled="true"]):active,
 	&[aria-expanded="true"] {
-		color: $gray-100;
+		color: var(--wpds-color-foreground-interactive-neutral-active);
 	}
 }

package/src/components/sidebar-dataviews/style.scss

@@ -1,4 +1,3 @@
-@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
 
 .edit-site-sidebar-dataviews {

package/src/components/sidebar-global-styles/style.scss

@@ -1,4 +1,3 @@
-@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
 
 .edit-site-styles {
@@ -25,7 +24,7 @@
 		}
 	}
 	.edit-site-sidebar-button {
-		color: $gray-900;
+		color: var(--wpds-color-foreground-interactive-neutral);
 	}
 }