@wordpress/global-styles-ui 1.11.0 → 1.12.0

package/build-style/style-rtl.css

@@ -287,7 +287,7 @@ button.font-library__upload-area {
 
 .global-styles-ui-screen-revisions__revision-item {
   position: relative;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   display: flex;
   flex-direction: column;
 }
@@ -445,7 +445,7 @@ button.font-library__upload-area {
 
 .global-styles-ui-variations_item {
   box-sizing: border-box;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
 }
 .global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
   border-radius: 2px;
@@ -477,19 +477,14 @@ button.font-library__upload-area {
   outline-color: var(--wp-admin-theme-color);
 }
 
-.global-styles-ui-preview {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-  cursor: pointer;
-}
-
 .global-styles-ui-preview__wrapper {
   max-width: 100%;
   display: block;
   width: 100%;
 }
+.global-styles-ui-preview__wrapper.is-hoverable {
+  cursor: var(--wpds-cursor-control, pointer);
+}
 
 .global-styles-ui-typography-preview {
   display: flex;

package/build-style/style.css

@@ -287,7 +287,7 @@ button.font-library__upload-area {
 
 .global-styles-ui-screen-revisions__revision-item {
   position: relative;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   display: flex;
   flex-direction: column;
 }
@@ -445,7 +445,7 @@ button.font-library__upload-area {
 
 .global-styles-ui-variations_item {
   box-sizing: border-box;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
 }
 .global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
   border-radius: 2px;
@@ -477,19 +477,14 @@ button.font-library__upload-area {
   outline-color: var(--wp-admin-theme-color);
 }
 
-.global-styles-ui-preview {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-  cursor: pointer;
-}
-
 .global-styles-ui-preview__wrapper {
   max-width: 100%;
   display: block;
   width: 100%;
 }
+.global-styles-ui-preview__wrapper.is-hoverable {
+  cursor: var(--wpds-cursor-control, pointer);
+}
 
 .global-styles-ui-typography-preview {
   display: flex;

package/build-types/dimensions-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dimensions-panel.d.ts","sourceRoot":"","sources":["../src/dimensions-panel.tsx"],"names":[],"mappings":"AA4BA,MAAM,CAAC,OAAO,UAAU,eAAe,gCA0DtC"}
+{"version":3,"file":"dimensions-panel.d.ts","sourceRoot":"","sources":["../src/dimensions-panel.tsx"],"names":[],"mappings":"AA6BA,MAAM,CAAC,OAAO,UAAU,eAAe,gCA0DtC"}

package/build-types/font-families.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"font-families.d.ts","sourceRoot":"","sources":["../src/font-families.tsx"],"names":[],"mappings":"AAwHA,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,EAAE,GAAG,KAAK,EAAE;;CAAA,+BAMjD"}
+{"version":3,"file":"font-families.d.ts","sourceRoot":"","sources":["../src/font-families.tsx"],"names":[],"mappings":"AAuHA,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,EAAE,GAAG,KAAK,EAAE;;CAAA,+BAMjD"}

package/build-types/font-library/font-collection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"font-collection.d.ts","sourceRoot":"","sources":["../../src/font-library/font-collection.tsx"],"names":[],"mappings":"AAoEA,iBAAS,cAAc,CAAE,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,+BAqflD;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"font-collection.d.ts","sourceRoot":"","sources":["../../src/font-library/font-collection.tsx"],"names":[],"mappings":"AAoEA,iBAAS,cAAc,CAAE,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,+BAoflD;AAED,eAAe,cAAc,CAAC"}

package/build-types/font-library/installed-fonts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"installed-fonts.d.ts","sourceRoot":"","sources":["../../src/font-library/installed-fonts.tsx"],"names":[],"mappings":"AA4CA,iBAAS,cAAc,gCAwatB;AAwED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"installed-fonts.d.ts","sourceRoot":"","sources":["../../src/font-library/installed-fonts.tsx"],"names":[],"mappings":"AA4CA,iBAAS,cAAc,gCAuatB;AAwED,eAAe,cAAc,CAAC"}

package/build-types/palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../src/palette.tsx"],"names":[],"mappings":"AA4BA,UAAU,YAAY;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,iBAAS,OAAO,CAAE,EAAE,IAAI,EAAE,EAAE,YAAY,+BAoEvC;AAED,eAAe,OAAO,CAAC"}
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../src/palette.tsx"],"names":[],"mappings":"AA0BA,UAAU,YAAY;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,iBAAS,OAAO,CAAE,EAAE,IAAI,EAAE,EAAE,YAAY,+BAoEvC;AAED,eAAe,OAAO,CAAC"}

package/build-types/preview-wrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview-wrapper.d.ts","sourceRoot":"","sources":["../src/preview-wrapper.tsx"],"names":[],"mappings":"AA0BA,UAAU,mBAAmB;IAC5B,QAAQ,EACL,CAAE,CAAE,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAM,KAAK,CAAC,SAAS,CAAE,GAC/D,CAAE,CAAE,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAM,KAAK,CAAC,SAAS,CAAE,EAAE,CAAC;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,iBAAS,cAAc,CAAE,EACxB,QAAQ,EACR,KAAK,EACL,SAAS,EACT,aAAa,GACb,EAAE,mBAAmB,+BA8FrB;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"preview-wrapper.d.ts","sourceRoot":"","sources":["../src/preview-wrapper.tsx"],"names":[],"mappings":"AA+BA,UAAU,mBAAmB;IAC5B,QAAQ,EACL,CAAE,CAAE,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAM,KAAK,CAAC,SAAS,CAAE,GAC/D,CAAE,CAAE,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAM,KAAK,CAAC,SAAS,CAAE,EAAE,CAAC;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,iBAAS,cAAc,CAAE,EACxB,QAAQ,EACR,KAAK,EACL,SAAS,EACT,aAAa,GACb,EAAE,mBAAmB,+BA+FrB;AAED,eAAe,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/global-styles-ui",
-	"version": "1.11.0",
+	"version": "1.12.0",
 	"description": "Global Styles UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -44,22 +44,22 @@
 	},
 	"react-native": "src/index",
 	"dependencies": {
-		"@wordpress/a11y": "^4.44.0",
-		"@wordpress/api-fetch": "^7.44.0",
-		"@wordpress/base-styles": "^6.20.0",
-		"@wordpress/block-editor": "^15.17.0",
-		"@wordpress/blocks": "^15.17.0",
-		"@wordpress/components": "^32.6.0",
-		"@wordpress/compose": "^7.44.0",
-		"@wordpress/core-data": "^7.44.0",
-		"@wordpress/data": "^10.44.0",
-		"@wordpress/date": "^5.44.0",
-		"@wordpress/element": "^6.44.0",
-		"@wordpress/global-styles-engine": "^1.11.0",
-		"@wordpress/i18n": "^6.17.0",
-		"@wordpress/icons": "^12.2.0",
-		"@wordpress/keycodes": "^4.44.0",
-		"@wordpress/private-apis": "^1.44.0",
+		"@wordpress/a11y": "^4.45.0",
+		"@wordpress/api-fetch": "^7.45.0",
+		"@wordpress/base-styles": "^7.0.0",
+		"@wordpress/block-editor": "^15.18.0",
+		"@wordpress/blocks": "^15.18.0",
+		"@wordpress/components": "^33.0.0",
+		"@wordpress/compose": "^7.45.0",
+		"@wordpress/core-data": "^7.45.0",
+		"@wordpress/data": "^10.45.0",
+		"@wordpress/date": "^5.45.0",
+		"@wordpress/element": "^6.45.0",
+		"@wordpress/global-styles-engine": "^1.12.0",
+		"@wordpress/i18n": "^6.18.0",
+		"@wordpress/icons": "^13.0.0",
+		"@wordpress/keycodes": "^4.45.0",
+		"@wordpress/private-apis": "^1.45.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.0",
 		"colord": "^2.7.0"
@@ -71,5 +71,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b862d8c84121a47bbeff882f6c87e61681ce2e0d"
+	"gitHead": "8c229eaed0e88c9827e2da3d73a78f9ddd77714b"
 }

package/src/dimensions-panel.tsx

@@ -22,6 +22,7 @@ const DEFAULT_CONTROLS = {
 	blockGap: true,
 	height: true,
 	minHeight: true,
+	minWidth: true,
 	width: true,
 	childLayout: false,
 };

package/src/font-families.tsx

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
@@ -65,7 +65,6 @@ function FontFamiliesInner() {
 					defaultTabId={ modalTabOpen }
 				/>
 			) }
-
 			<VStack spacing={ 2 }>
 				<HStack justify="space-between">
 					<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
@@ -90,11 +89,11 @@ function FontFamiliesInner() {
 				) }
 				{ ! hasFonts && (
 					<>
-						<Text as="p">
+						<WCText as="p">
 							{ hasInstalledFonts
 								? __( 'No fonts activated.' )
 								: __( 'No fonts installed.' ) }
-						</Text>
+						</WCText>
 						<Button
 							className="global-styles-ui-font-families__manage-fonts"
 							variant="secondary"

package/src/font-library/font-card.tsx

@@ -4,7 +4,7 @@
 import { _n, sprintf, isRTL } from '@wordpress/i18n';
 import {
 	useNavigator,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	Button,
 	Flex,
 	FlexItem,
@@ -52,7 +52,7 @@ function FontCard( {
 				<FontDemo font={ font } />
 				<Flex justify="flex-end">
 					<FlexItem>
-						<Text className="font-library__font-card__count">
+						<WCText className="font-library__font-card__count">
 							{ variantsText ||
 								sprintf(
 									/* translators: %d: Number of font variants. */
@@ -63,7 +63,7 @@ function FontCard( {
 									),
 									variantsCount
 								) }
-						</Text>
+						</WCText>
 					</FlexItem>
 					<FlexItem>
 						<Icon icon={ isRTL() ? chevronLeft : chevronRight } />

package/src/font-library/font-collection.tsx

@@ -10,7 +10,7 @@ import {
 } from '@wordpress/element';
 import {
 	__experimentalSpacer as Spacer,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	Navigator,
@@ -285,7 +285,6 @@ function FontCollection( { slug }: { slug: string } ) {
 					<ProgressBar />
 				</div>
 			) }
-
 			{ ! isLoading && selectedCollection && (
 				<>
 					<Navigator
@@ -298,9 +297,9 @@ function FontCollection( { slug }: { slug: string } ) {
 									<Heading level={ 2 } size={ 13 }>
 										{ selectedCollection.name }
 									</Heading>
-									<Text>
+									<WCText>
 										{ selectedCollection.description }
-									</Text>
+									</WCText>
 								</VStack>
 								<ActionsComponent />
 							</HStack>
@@ -335,11 +334,11 @@ function FontCollection( { slug }: { slug: string } ) {
 
 							{ !! selectedCollection?.font_families?.length &&
 								! fonts.length && (
-									<Text>
+									<WCText>
 										{ __(
 											'No fonts found. Try with a different search term.'
 										) }
-									</Text>
+									</WCText>
 								) }
 
 							<div className="font-library__fonts-grid__main">
@@ -411,9 +410,9 @@ function FontCollection( { slug }: { slug: string } ) {
 								</>
 							) }
 							<Spacer margin={ 4 } />
-							<Text>
+							<WCText>
 								{ __( 'Select font variants to install.' ) }
-							</Text>
+							</WCText>
 							<Spacer margin={ 4 } />
 							<CheckboxControl
 								className="font-library__select-all"

package/src/font-library/font-demo.tsx

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalText as Text } from '@wordpress/components';
+import { __experimentalText as WCText } from '@wordpress/components';
 import { useContext, useEffect, useState, useRef } from '@wordpress/element';
 import type { FontFamily, FontFace } from '@wordpress/core-data';
 
@@ -109,12 +109,12 @@ function FontDemo( { font, text }: FontDemoProps ) {
 					className="font-library__font-variant_demo-image"
 				/>
 			) : (
-				<Text
+				<WCText
 					style={ textDemoStyle }
 					className="font-library__font-variant_demo-text"
 				>
 					{ text }
-				</Text>
+				</WCText>
 			) }
 		</div>
 	);

package/src/font-library/google-fonts-confirm-dialog.tsx

@@ -7,7 +7,7 @@ import {
 	Card,
 	CardBody,
 	__experimentalHeading as Heading,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	__experimentalSpacer as Spacer,
 } from '@wordpress/components';
 
@@ -28,17 +28,17 @@ function GoogleFontsConfirmDialog() {
 						{ __( 'Connect to Google Fonts' ) }
 					</Heading>
 					<Spacer margin={ 6 } />
-					<Text as="p">
+					<WCText as="p">
 						{ __(
 							'To install fonts from Google you must give permission to connect directly to Google servers. The fonts you install will be downloaded from Google and stored on your site. Your site will then use these locally-hosted fonts.'
 						) }
-					</Text>
+					</WCText>
 					<Spacer margin={ 3 } />
-					<Text as="p">
+					<WCText as="p">
 						{ __(
 							'You can alternatively upload files directly on the Upload tab.'
 						) }
-					</Text>
+					</WCText>
 					<Spacer margin={ 6 } />
 					<Button
 						__next40pxDefaultSize

package/src/font-library/installed-fonts.tsx

@@ -9,7 +9,7 @@ import {
 	Navigator,
 	useNavigator,
 	__experimentalSpacer as Spacer,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	__experimentalVStack as VStack,
 	Flex,
 	Notice,
@@ -238,7 +238,6 @@ function InstalledFonts() {
 					<ProgressBar />
 				</div>
 			) }
-
 			{ ! isResolvingLibrary && (
 				<>
 					<Navigator
@@ -257,9 +256,9 @@ function InstalledFonts() {
 									</Notice>
 								) }
 								{ ! hasFonts && (
-									<Text as="p">
+									<WCText as="p">
 										{ __( 'No fonts installed.' ) }
-									</Text>
+									</WCText>
 								) }
 								{ baseThemeFonts.length > 0 && (
 									<VStack>
@@ -395,11 +394,11 @@ function InstalledFonts() {
 								</>
 							) }
 							<Spacer margin={ 4 } />
-							<Text>
+							<WCText>
 								{ __(
 									'Choose font variants. Keep in mind that too many variants could make your site slower.'
 								) }
-							</Text>
+							</WCText>
 							<Spacer margin={ 4 } />
 							<VStack spacing={ 0 }>
 								<CheckboxControl

package/src/font-library/upload-fonts.tsx

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	__experimentalVStack as VStack,
 	Button,
 	DropZone,
@@ -253,11 +253,11 @@ function UploadFonts() {
 						) }
 					/>
 				) }
-				<Text className="font-library__upload-area__text">
+				<WCText className="font-library__upload-area__text">
 					{ __(
 						'Uploaded fonts appear in your library and can be used in your theme. Supported formats: .ttf, .otf, .woff, and .woff2.'
 					) }
-				</Text>
+				</WCText>
 			</VStack>
 		</div>
 	);

package/src/pagination/index.tsx

@@ -8,7 +8,7 @@ import clsx from 'clsx';
  */
 import {
 	__experimentalHStack as HStack,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	Button,
 } from '@wordpress/components';
 import { __, _x, _n, sprintf, isRTL } from '@wordpress/i18n';
@@ -44,7 +44,7 @@ export default function Pagination( {
 			justify="flex-start"
 			className={ clsx( 'global-styles-ui-pagination', className ) }
 		>
-			<Text
+			<WCText
 				variant="muted"
 				className="global-styles-ui-pagination__total"
 			>
@@ -53,7 +53,7 @@ export default function Pagination( {
 					_n( '%d item', '%d items', totalItems ),
 					totalItems
 				) }
-			</Text>
+			</WCText>
 			<HStack expanded={ false } spacing={ 1 }>
 				<Button
 					variant={ buttonVariant }
@@ -74,14 +74,14 @@ export default function Pagination( {
 					size="compact"
 				/>
 			</HStack>
-			<Text variant="muted">
+			<WCText variant="muted">
 				{ sprintf(
 					// translators: 1: Current page number. 2: Total number of pages.
 					_x( '%1$d of %2$d', 'paging' ),
 					currentPage,
 					numPages
 				) }
-			</Text>
+			</WCText>
 			<HStack expanded={ false } spacing={ 1 }>
 				<Button
 					variant={ buttonVariant }

package/src/palette.tsx

@@ -5,8 +5,6 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	FlexItem,
 	__experimentalHStack as HStack,
-	// TODO: Replace this ZStack with ad hoc CSS.
-	// eslint-disable-next-line @wordpress/use-recommended-components
 	__experimentalZStack as ZStack,
 	__experimentalVStack as VStack,
 	ColorIndicator,

package/src/preview-wrapper.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -98,7 +103,9 @@ function PreviewWrapper( {
 			</div>
 			{ isReady && (
 				<div
-					className="global-styles-ui-preview__wrapper"
+					className={ clsx( 'global-styles-ui-preview__wrapper', {
+						'is-hoverable': withHoverView,
+					} ) }
 					style={ {
 						height: normalizedHeight * ratio,
 					} }
@@ -111,7 +118,6 @@ function PreviewWrapper( {
 							height: normalizedHeight * ratio,
 							width: '100%',
 							background: gradientValue ?? backgroundColor,
-							cursor: withHoverView ? 'pointer' : undefined,
 						} }
 						initial="start"
 						animate={

package/src/screen-background.tsx

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 // @ts-expect-error: Not typed yet.
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { __experimentalText as Text } from '@wordpress/components';
+import { __experimentalText as WCText } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -24,9 +24,9 @@ function ScreenBackground() {
 			<ScreenHeader
 				title={ __( 'Background' ) }
 				description={
-					<Text>
+					<WCText>
 						{ __( "Set styles for the site's background." ) }
-					</Text>
+					</WCText>
 				}
 			/>
 			{ hasBackgroundPanel && <BackgroundPanel /> }

package/src/screen-block-list.tsx

@@ -7,7 +7,7 @@ import {
 	FlexItem,
 	SearchControl,
 	__experimentalHStack as HStack,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import {
@@ -151,9 +151,9 @@ function BlockList( { filterValue }: BlockListProps ) {
 			role="list"
 		>
 			{ filteredBlockTypes.length === 0 ? (
-				<Text align="center" as="p">
+				<WCText align="center" as="p">
 					{ __( 'No blocks found.' ) }
-				</Text>
+				</WCText>
 			) : (
 				filteredBlockTypes.map( ( block ) => (
 					<BlockMenuItem

package/src/screen-header.tsx

@@ -7,7 +7,7 @@ import {
 	__experimentalSpacer as Spacer,
 	__experimentalHeading as Heading,
 	__experimentalView as View,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	Navigator,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
@@ -73,9 +73,9 @@ export function ScreenHeader( {
 							</Spacer>
 						</HStack>
 						{ description && (
-							<Text className="global-styles-ui-header__description">
+							<WCText className="global-styles-ui-header__description">
 								{ description }
-							</Text>
+							</WCText>
 						) }
 					</VStack>
 				</Spacer>

package/src/screen-revisions/style.scss

@@ -14,7 +14,7 @@
 
 .global-styles-ui-screen-revisions__revision-item {
 	position: relative;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	display: flex;
 	flex-direction: column;
 

package/src/style.scss

@@ -7,18 +7,14 @@
 @use "./size-control/style.scss" as *;
 @use "./variations/style.scss" as *;
 
-.global-styles-ui-preview {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	line-height: 1;
-	cursor: pointer;
-}
-
 .global-styles-ui-preview__wrapper {
 	max-width: 100%;
 	display: block;
 	width: 100%;
+
+	&.is-hoverable {
+		cursor: var(--wpds-cursor-control);
+	}
 }
 
 .global-styles-ui-typography-preview {

package/src/variations/style.scss

@@ -4,7 +4,7 @@
 .global-styles-ui-variations_item {
 	box-sizing: border-box;
 	// To round the outline in Windows 10 high contrast mode.
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 
 	.global-styles-ui-variations_item-preview {
 		border-radius: $radius-small;