Theme: Change default control cursor to pointer

packages/theme/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancement
+
+-   Change the default value of `--wpds-cursor-control` from `default` to `pointer` ([#76762](https://github.com/WordPress/gutenberg/pull/76762)).
+
 ## 0.9.0 (2026-03-18)
 
 ### New Features

packages/theme/README.md

@@ -87,8 +87,8 @@ Semantic tokens follow a consistent naming pattern:
 
 **Modifier** is an optional size or intensity modifier.
 
-| Value                               | Description          |
-| ----------------------------------- | -------------------- |
+| Value                                      | Description          |
+| ------------------------------------------ | -------------------- |
 | `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl` | Size scale modifiers |
 
 #### Color Token Modifiers
@@ -111,9 +111,7 @@ Color tokens extend the base pattern with additional modifiers for tone, emphasi
 | `warning` | Higher-severity or time-sensitive issues that require user attention but are not errors |
 | `error`   | Blocking issues, validation failures, or destructive actions                            |
 
-> [!NOTE]
-> `caution` and `warning` represent two escalation levels of non-error severity.
-> Use **`caution`** for guidance or minor risks, and **`warning`** when the user must act to prevent an error.
+Note: `caution` and `warning` represent two escalation levels of non-error severity. Use **`caution`** for guidance or minor risks, and **`warning`** when the user must act to prevent an error.
 
 **Emphasis** adjusts color strength relative to the base tone, if specified. The default is a normal emphasis.
 
@@ -138,7 +136,10 @@ import { ThemeProvider } from '@wordpress/theme';
 
 function App() {
 	return (
-		<ThemeProvider color={ { primary: 'blue' } } cursor={ { control: 'pointer' } } density="compact">
+		<ThemeProvider
+			color={ { primary: 'blue' } }
+			density="compact"
+		>
 			{ /* Your app content */ }
 		</ThemeProvider>
 	);
@@ -154,7 +155,7 @@ Both properties accept any valid CSS color value. The theme system automatically
 
 The `cursor` prop accepts an object with the following optional properties:
 
--   `control`: The cursor style for interactive controls that are not links (e.g. buttons, checkboxes, and toggles). Accepts `'default'` or `'pointer'`.
+-   `control`: The cursor style for interactive controls that are not links (e.g. buttons, checkboxes, and toggles). Accepts `'default'` or `'pointer'` (default: `'pointer'`).
 
 The `density` prop controls the spacing scale throughout the UI:
 
@@ -226,12 +227,12 @@ This rule reports an error when a CSS value references a `--wpds-*` custom prope
 ```css
 /* ✗ Error: '--wpds-unknown-token' is not a valid Design System token */
 .example {
-	color: var(--wpds-unknown-token);
+	color: var( --wpds-unknown-token );
 }
 
 /* ✓ OK */
 .example {
-	color: var(--wpds-color-fg-content-neutral);
+	color: var( --wpds-color-fg-content-neutral );
 }
 ```
 
@@ -263,17 +264,17 @@ This rule reports an error when a `var()` call for a `--wpds-*` token includes a
 ```css
 /* ✗ Error: Do not add a fallback value for Design System token '--wpds-color-fg-content-neutral' */
 .example {
-	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
+	color: var( --wpds-color-fg-content-neutral, #1e1e1e );
 }
 
 /* ✓ OK */
 .example {
-	color: var(--wpds-color-fg-content-neutral);
+	color: var( --wpds-color-fg-content-neutral );
 }
 
 /* ✓ OK: Non-wpds custom properties are not checked */
 .example {
-	color: var(--my-custom-color, red);
+	color: var( --my-custom-color, red );
 }
 ```
 
@@ -285,11 +286,11 @@ This package provides build plugins that inject fallback values into bare `var(-
 
 Three plugin variants are available, covering common build tool setups:
 
-| Export                                                            | Tool    | Scope |
-| ----------------------------------------------------------------- | ------- | ----- |
-| `@wordpress/theme/postcss-plugins/postcss-ds-token-fallbacks`     | PostCSS | CSS   |
-| `@wordpress/theme/esbuild-plugins/esbuild-ds-token-fallbacks`     | esbuild | JS/TS |
-| `@wordpress/theme/vite-plugins/vite-ds-token-fallbacks`           | Vite    | JS/TS |
+| Export                                                        | Tool    | Scope |
+| ------------------------------------------------------------- | ------- | ----- |
+| `@wordpress/theme/postcss-plugins/postcss-ds-token-fallbacks` | PostCSS | CSS   |
+| `@wordpress/theme/esbuild-plugins/esbuild-ds-token-fallbacks` | esbuild | JS/TS |
+| `@wordpress/theme/vite-plugins/vite-ds-token-fallbacks`       | Vite    | JS/TS |
 
 All three plugins skip files that don't contain `--wpds-` references, so there is zero overhead on unrelated modules.
 

packages/theme/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 */

packages/theme/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',

packages/theme/tokens/cursor.json

@@ -2,7 +2,7 @@
 	"wpds-cursor": {
 		"$type": "string",
 		"control": {
-			"$value": "default",
+			"$value": "pointer",
 			"$description": "Cursor style for interactive controls that are not links (e.g. buttons, checkboxes, and toggles)."
 		}
 	}