Commit 505cf8febd0 for woocommerce

commit 505cf8febd01f13b32b584af661f3ebfe3950324
Author: Mikael Korpela <mikael@ihminen.org>
Date:   Thu Oct 8 10:23:07 2026 +0300

    Settings: load WPDS design tokens from the wp-theme style when available (#69252)

    Use the wp-theme style registered by WordPress 7.1+ or Gutenberg on settings pages, and fall back to a bundled copy of the tokens otherwise.

diff --git a/plugins/woocommerce/changelog/update-wpds-tokens-wp-theme-handle b/plugins/woocommerce/changelog/update-wpds-tokens-wp-theme-handle
new file mode 100644
index 00000000000..06bb2ec9f40
--- /dev/null
+++ b/plugins/woocommerce/changelog/update-wpds-tokens-wp-theme-handle
@@ -0,0 +1,3 @@
+Significance: patch
+Type: dev
+Comment: Load WPDS design tokens from the core wp-theme style when available; no merchant-facing change.
diff --git a/plugins/woocommerce/client/admin/client/wp-admin-scripts/design-tokens/index.ts b/plugins/woocommerce/client/admin/client/wp-admin-scripts/design-tokens/index.ts
new file mode 100644
index 00000000000..8769fc336e2
--- /dev/null
+++ b/plugins/woocommerce/client/admin/client/wp-admin-scripts/design-tokens/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Bundles the WordPress Design System tokens as a standalone stylesheet.
+ *
+ * It is only enqueued when the `wp-theme` style (WordPress 7.1+ or Gutenberg) is not available.
+ * See `WCAdminAssets::enqueue_design_tokens()`.
+ */
+import '@wordpress/theme/design-tokens.css';
diff --git a/plugins/woocommerce/client/admin/client/wp-admin-scripts/settings-embed/index.tsx b/plugins/woocommerce/client/admin/client/wp-admin-scripts/settings-embed/index.tsx
index 0b829820a76..4610ee8325c 100644
--- a/plugins/woocommerce/client/admin/client/wp-admin-scripts/settings-embed/index.tsx
+++ b/plugins/woocommerce/client/admin/client/wp-admin-scripts/settings-embed/index.tsx
@@ -6,7 +6,6 @@
  * External dependencies
  */
 import { createRoot } from '@wordpress/element';
-import '@wordpress/theme/design-tokens.css';

 /**
  * Internal dependencies
diff --git a/plugins/woocommerce/src/Internal/Admin/WCAdminAssets.php b/plugins/woocommerce/src/Internal/Admin/WCAdminAssets.php
index cb6e8f6c644..789ab400f11 100644
--- a/plugins/woocommerce/src/Internal/Admin/WCAdminAssets.php
+++ b/plugins/woocommerce/src/Internal/Admin/WCAdminAssets.php
@@ -254,8 +254,9 @@ class WCAdminAssets {

 		if ( PageController::is_settings_page() ) {
 			$settings_ui_dependencies = $this->get_settings_ui_script_dependencies();
+			$design_tokens_handle     = $this->get_design_tokens_handle();
 			$this->register_script( 'wp-admin-scripts', 'settings-embed', true, $settings_ui_dependencies );
-			$this->register_style( 'settings-embed', 'style', array( 'wp-components' ) );
+			$this->register_style( 'settings-embed', 'style', array( 'wp-components', $design_tokens_handle ) );
 			$this->enqueue_settings_ui_style( $settings_ui_dependencies );
 		}

@@ -403,6 +404,9 @@ class WCAdminAssets {
 				'handle'       => 'wc-settings-ui',
 				'dependencies' => array( 'wp-components' ),
 			),
+			array(
+				'handle' => 'wc-design-tokens',
+			),
 		);

 		$css_file_version = self::get_file_version( 'css' );
@@ -457,6 +461,20 @@ class WCAdminAssets {
 		}
 	}

+	/**
+	 * Get the handle of the WordPress Design System tokens stylesheet.
+	 *
+	 * Uses the `wp-theme` style registered by WordPress 7.1+ or the Gutenberg plugin when available,
+	 * and falls back to the copy of the tokens bundled with WooCommerce otherwise. The caller lists
+	 * the handle as a style dependency, so WordPress enqueues it.
+	 *
+	 * @return string The style handle.
+	 */
+	private function get_design_tokens_handle(): string {
+		// The bundled fallback (and the `design-tokens` wp-admin-script) can be removed once WP 7.1 is the minimum supported version.
+		return wp_style_is( 'wp-theme', 'registered' ) ? 'wp-theme' : 'wc-design-tokens';
+	}
+
 	/**
 	 * Enqueue the Settings UI package style when its runtime dependency resolves.
 	 *
diff --git a/plugins/woocommerce/tests/php/src/Internal/Admin/WCAdminAssetsTest.php b/plugins/woocommerce/tests/php/src/Internal/Admin/WCAdminAssetsTest.php
index 7dc9ccbf7e1..8ff503948a6 100644
--- a/plugins/woocommerce/tests/php/src/Internal/Admin/WCAdminAssetsTest.php
+++ b/plugins/woocommerce/tests/php/src/Internal/Admin/WCAdminAssetsTest.php
@@ -97,4 +97,45 @@ class WCAdminAssetsTest extends WC_Unit_Test_Case {
 			'The minified file name should be served when the minified file exists and SCRIPT_DEBUG is off.'
 		);
 	}
+
+	/**
+	 * @testdox Design tokens handle is the bundled stylesheet when the wp-theme style is not registered.
+	 */
+	public function test_get_design_tokens_handle_uses_bundled_style_without_wp_theme(): void {
+		wp_deregister_style( 'wp-theme' );
+		wp_register_style( 'wc-design-tokens', 'https://example.com/tokens.css', array(), '1.0' );
+
+		$handle = $this->invoke_get_design_tokens_handle();
+
+		$this->assertSame( 'wc-design-tokens', $handle );
+
+		wp_deregister_style( 'wc-design-tokens' );
+	}
+
+	/**
+	 * @testdox Design tokens handle is the wp-theme style when it is registered.
+	 */
+	public function test_get_design_tokens_handle_uses_wp_theme_when_registered(): void {
+		wp_register_style( 'wp-theme', 'https://example.com/wp-theme.css', array(), '1.0' );
+		wp_register_style( 'wc-design-tokens', 'https://example.com/tokens.css', array(), '1.0' );
+
+		$handle = $this->invoke_get_design_tokens_handle();
+
+		$this->assertSame( 'wp-theme', $handle );
+
+		wp_deregister_style( 'wp-theme' );
+		wp_deregister_style( 'wc-design-tokens' );
+	}
+
+	/**
+	 * Invokes the private get_design_tokens_handle() method.
+	 *
+	 * @return string
+	 */
+	private function invoke_get_design_tokens_handle(): string {
+		$method = new \ReflectionMethod( WCAdminAssets::class, 'get_design_tokens_handle' );
+		$method->setAccessible( true );
+
+		return $method->invoke( WCAdminAssets::get_instance() );
+	}
 }