@wordpress/theme 0.9.0 → 0.10.1-next.v.202604091042.0

package/build-types/use-theme-provider-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-theme-provider-styles.d.ts","sourceRoot":"","sources":["../src/use-theme-provider-styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAgB3C;;GAEG;AACH,OAAO,yCAAyC,CAAC;AAUjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA0IlD,wBAAgB,sBAAsB,CAAE,EACvC,KAAU,GACV,GAAE;IACF,KAAK,CAAC,EAAE,kBAAkB,CAAE,OAAO,CAAE,CAAC;CACjC;;;;;;;;EAwDL"}
+{"version":3,"file":"use-theme-provider-styles.d.ts","sourceRoot":"","sources":["../src/use-theme-provider-styles.ts"],"names":[],"mappings":"AAmBA;;GAEG;AACH,OAAO,yCAAyC,CAAC;AAUjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA0IlD,wBAAgB,sBAAsB,CAAE,EACvC,KAAU,EACV,MAAM,GACN,GAAE;IACF,KAAK,CAAC,EAAE,kBAAkB,CAAE,OAAO,CAAE,CAAC;IACtC,MAAM,CAAC,EAAE,kBAAkB,CAAE,QAAQ,CAAE,CAAC;CACnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoEL"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/theme",
-	"version": "0.9.0",
+	"version": "0.10.1-next.v.202604091042.0+668146787",
 	"description": "Theme and context provider for the WordPress Design System.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -84,8 +84,8 @@
 		"build-module/color-ramps/lib/register-color-spaces.mjs"
 	],
 	"dependencies": {
-		"@wordpress/element": "^6.42.0",
-		"@wordpress/private-apis": "^1.42.0",
+		"@wordpress/element": "^6.44.1-next.v.202604091042.0+668146787",
+		"@wordpress/private-apis": "^1.43.1-next.v.202604091042.0+668146787",
 		"colorjs.io": "^0.6.0",
 		"memize": "^2.1.0"
 	},
@@ -121,5 +121,5 @@
 		"build": "npm run build:tokens && npm run build:default-ramps && npm run prelint:js",
 		"postbuild": "prettier --write tokens/color.json tokens/modes src/prebuilt src/color-ramps/lib/default-ramps.ts docs"
 	},
-	"gitHead": "c20787b1778ae64c2db65643b1c236309d68e6ba"
+	"gitHead": "73606df74f1c38a084bfa5db97205259ef817593"
 }

package/src/context.ts

@@ -15,5 +15,6 @@ interface ThemeContextType {
 export const ThemeContext = createContext< ThemeContextType >( {
 	resolvedSettings: {
 		color: {},
+		cursor: undefined,
 	},
 } );

package/src/prebuilt/css/design-tokens.css

@@ -100,7 +100,7 @@
 	--wpds-color-stroke-surface-success-strong: #007f30; /* Decorative stroke color used to define success-toned surface boundaries with strong emphasis. */
 	--wpds-color-stroke-surface-warning: #d0b381; /* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */
 	--wpds-color-stroke-surface-warning-strong: #926300; /* Decorative stroke color used to define warning-toned surface boundaries with strong emphasis. */
-	--wpds-cursor-control: default; /* Cursor style for interactive controls that are not links (e.g. buttons, checkboxes, and toggles). */
+	--wpds-cursor-control: pointer; /* Cursor style for interactive controls that are not links (e.g. buttons, checkboxes, and toggles). */
 	--wpds-dimension-base: 4px; /* Base dimension unit */
 	--wpds-dimension-gap-2xl: 32px; /* 2x extra large gap */
 	--wpds-dimension-gap-3xl: 40px; /* 3x extra large gap */

package/src/prebuilt/js/design-token-fallbacks.mjs

@@ -111,7 +111,7 @@ export default {
 	'--wpds-color-stroke-surface-success-strong': '#007f30',
 	'--wpds-color-stroke-surface-warning': '#d0b381',
 	'--wpds-color-stroke-surface-warning-strong': '#926300',
-	'--wpds-cursor-control': 'default',
+	'--wpds-cursor-control': 'pointer',
 	'--wpds-dimension-base': '4px',
 	'--wpds-dimension-gap-2xl': '32px',
 	'--wpds-dimension-gap-3xl': '40px',

package/src/theme-provider.tsx

@@ -48,6 +48,7 @@ function generateCSSSelector( {
 export const ThemeProvider = ( {
 	children,
 	color = {},
+	cursor,
 	isRoot = false,
 	density,
 }: ThemeProviderProps ) => {
@@ -55,6 +56,7 @@ export const ThemeProvider = ( {
 
 	const { themeProviderStyles, resolvedSettings } = useThemeProviderStyles( {
 		color,
+		cursor,
 	} );
 
 	const contextValue = useMemo(

package/src/types.ts

@@ -24,6 +24,20 @@ export interface ThemeProviderSettings {
 		bg?: string;
 	};
 
+	/**
+	 * The set of cursor options to apply to the theme.
+	 */
+	cursor?: {
+		/**
+		 * The cursor style for interactive controls that are not links
+		 * (e.g. buttons, checkboxes, and toggles).
+		 *
+		 * By default, it inherits from the parent `ThemeProvider`,
+		 * and falls back to the prebuilt default (`default`).
+		 */
+		control?: 'default' | 'pointer';
+	};
+
 	/**
 	 * The density of the theme. If left unspecified, the theme inherits from
 	 * the density of the closest `ThemeProvider`, or uses the default density

package/src/use-theme-provider-styles.ts

@@ -170,8 +170,10 @@ function generateStyles( {
 
 export function useThemeProviderStyles( {
 	color = {},
+	cursor,
 }: {
 	color?: ThemeProviderProps[ 'color' ];
+	cursor?: ThemeProviderProps[ 'cursor' ];
 } = {} ) {
 	const { resolvedSettings: inheritedSettings } = useContext( ThemeContext );
 
@@ -185,6 +187,7 @@ export function useThemeProviderStyles( {
 		DEFAULT_SEED_COLORS.primary;
 	const bg =
 		color.bg ?? inheritedSettings.color?.bg ?? DEFAULT_SEED_COLORS.bg;
+	const cursorControl = cursor?.control ?? inheritedSettings.cursor?.control;
 
 	const resolvedSettings = useMemo(
 		() => ( {
@@ -192,11 +195,12 @@ export function useThemeProviderStyles( {
 				primary,
 				bg,
 			},
+			cursor: cursorControl ? { control: cursorControl } : undefined,
 		} ),
-		[ primary, bg ]
+		[ primary, bg, cursorControl ]
 	);
 
-	const themeProviderStyles = useMemo( () => {
+	const colorStyles = useMemo( () => {
 		// Determine which seeds are needed for generating ramps.
 		const seeds = {
 			...DEFAULT_SEED_COLORS,
@@ -224,6 +228,16 @@ export function useThemeProviderStyles( {
 		} );
 	}, [ primary, bg ] );
 
+	const themeProviderStyles = useMemo(
+		() => ( {
+			...colorStyles,
+			...( cursorControl && {
+				'--wpds-cursor-control': cursorControl,
+			} ),
+		} ),
+		[ colorStyles, cursorControl ]
+	);
+
 	return {
 		resolvedSettings,
 		themeProviderStyles,