From 6ceb6d87179ce54a1522cad33adfe7a666a7924c Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew.duthie@automattic.com>
Date: Tue, 6 Jan 2026 11:06:29 -0500
Subject: [PATCH] Theme: Update semibold font weight to apply workaround at CSS

---
 packages/theme/terrazzo.config.ts     | 22 ++++++++++++++++++++++
 packages/theme/tokens/typography.json |  2 +-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/theme/terrazzo.config.ts b/packages/theme/terrazzo.config.ts
index c133c7bde78027..48410430f3cc45 100644
--- a/packages/theme/terrazzo.config.ts
+++ b/packages/theme/terrazzo.config.ts
@@ -38,6 +38,28 @@ export default defineConfig( {
 		pluginCSS( {
 			filename: 'css/design-tokens.css',
 			variableName: ( token ) => makeCSSVar( token.id ),
+			// See: https://github.com/terrazzoapp/terrazzo/pull/632
+			// @ts-expect-error - Valid return types excluded from package types.
+			transform( token ) {
+				// This addresses a specific browser issue where Chrome renders
+				// a font-weight of 500 as 600 instead of 400 when the target
+				// weight is not locally available, which is inconsistent with
+				// the spec-defined behavior. This workaround ensures that a 400
+				// weight is used if the 500 weight is not locally available,
+				// while still using the 500 weight if it _is_ available. This
+				// is applied at the plugin layer to ensure the original token
+				// value can be preserved at the intended 500 weight, where the
+				// bug only occurs in specific browser rendering.
+				//
+				// See: https://issues.chromium.org/issues/40552893
+				// See: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-weight#fallback_weights
+				if (
+					token.id.startsWith( 'wpds-font.weight.' ) &&
+					token.$value === 500
+				) {
+					return '499';
+				}
+			},
 			baseSelector: ':root',
 			modeSelectors: [
 				{
diff --git a/packages/theme/tokens/typography.json b/packages/theme/tokens/typography.json
index 2e7bb2ebcaf5fa..33fa12fc5484d7 100644
--- a/packages/theme/tokens/typography.json
+++ b/packages/theme/tokens/typography.json
@@ -102,7 +102,7 @@
 				"$description": "Regular font weight for body text"
 			},
 			"medium": {
-				"$value": 499,
+				"$value": 500,
 				"$description": "Medium font weight for emphasis and headings"
 			},
 			"$extensions": {