Theme: Consolidate border mode overrides in the token resolver

packages/theme/CHANGELOG.md

@@ -6,6 +6,10 @@
 
 -   Raise the minimum required Node.js version to `>=22.13.0`, for stable `require(esm)` support ([#84313](https://github.com/WordPress/gutenberg/pull/84313)).
 
+### Internal
+
+-   Consolidate border mode overrides in the resolver and inherit default values from the base tokens ([#84108](https://github.com/WordPress/gutenberg/pull/84108)).
+
 ## 2.3.0 (2026-10-07)
 
 ### New Features

packages/theme/package.json

@@ -161,6 +161,6 @@
 		"build:figma": "node bin/build-figma-tokens/index.ts",
 		"build": "npm run build:default-ramps && npm run build:tokens && npm run build:figma",
 		"lint:package-contents": "wp-validate-package-contents . --disallow-path src",
-		"postbuild": "prettier --write tokens/color.json tokens/modes prebuilt src/prebuilt src/color-ramps/lib/default-ramps.ts docs ../base-styles/internal/_wpds-token-fallbacks.scss"
+		"postbuild": "prettier --write tokens/color.json tokens/wpds.resolver.json prebuilt src/prebuilt src/color-ramps/lib/default-ramps.ts docs ../base-styles/internal/_wpds-token-fallbacks.scss"
 	}
 }

packages/theme/tokens/README.md

@@ -17,7 +17,7 @@ The design system follows the [Design Tokens Format Module](https://www.designto
 | `motion.json`     | Animation durations and easing curves                                                                                            |
 | `cursor.json`     | Cursor values for interactive controls                                                                                           |
 
-Each JSON file contains both primitive and semantic token definitions in a hierarchical structure. `wpds.resolver.json` composes those base sources with the contextual values in `/modes`. These files are the source of truth for the design system and are processed during the build step to generate published assets in `/prebuilt` and internal TypeScript sources in `/src/prebuilt`.
+Each JSON file contains both primitive and semantic token definitions in a hierarchical structure. `wpds.resolver.json` composes those base sources with inline corner-radius and pixel-density overrides. The default `subtle` and `standard` contexts are empty, so their values come from `border.json`. These files are the source of truth for the design system and are processed during the build step to generate published assets in `/prebuilt` and internal TypeScript sources in `/src/prebuilt`.
 
 ## Token Naming
 
@@ -72,7 +72,7 @@ The design tokens use [the `$extensions` feature](https://www.designtokens.org/t
 
 ### Figma Support
 
-Figma can import supported DTCG token types as variables through its [built-in design token importer](https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-variables#h_01KAGYPSFC984XDB4YWBCNRZJ7). The resolver itself is not an import file. The files in `modes/` are partial resolver inputs, so they do not contain every variable needed to create a collection.
+Figma can import supported DTCG token types as variables through its [built-in design token importer](https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-variables#h_01KAGYPSFC984XDB4YWBCNRZJ7). The resolver itself is not an import file. Its inline contexts contain only value overrides; use the complete generated files below to create collections or update modes.
 
 #### Generate border collection files
 
@@ -91,13 +91,13 @@ The generator applies `wpds.resolver.json` to produce six complete DTCG files un
 
 Each file includes every token in its collection, including unchanged values, descriptions, types, and Figma scopes. The original hierarchy preserves variable names. Token aliases remain references instead of becoming literal values. The current border tokens contain no aliases. Aliases within a collection were verified in Figma for both collection creation and mode updates.
 
-These generated files are committed under `prebuilt/figma` and included in the npm package. Do not edit them as sources. `wpds.resolver.json`, its base sources, and the tracked files in `modes/` remain canonical inputs for both CSS and Figma generation.
+These generated files are committed under `prebuilt/figma` and included in the npm package. Do not edit them as sources. `wpds.resolver.json` and its base sources remain canonical inputs for both CSS and Figma generation. Edit default values and metadata in `border.json`, and mode-specific value overrides in the resolver.
 
 #### Test in a Figma library branch
 
 The theme library maintainer [tested this workflow in a Figma library branch](https://github.com/WordPress/gutenberg/pull/84035#issuecomment-6003936288) using the files from revision `0ca2ab2`. Collection creation preserved names, types, descriptions, scopes, values, and aliases. Radius and width modes switched independently. Existing-value updates preserved variable IDs and bindings. New variables required creation through the API/plugin before their values could be imported.
 
-Files imported together were ordered alphabetically, so set `subtle` and `standard` as the default modes explicitly. Rebinding a test component propagated to its instance, but the instance's existing `pronounced` selection remained attached to the old collection. Reapply mode selections from the new collections after rebinding. This test does not establish that the full library has been migrated. Use the following checks for future changes and record the results in [#82561](https://github.com/WordPress/gutenberg/issues/82561).
+Files imported together were ordered alphabetically, so set `subtle` and `standard` as the default modes explicitly. Rebinding a test component propagated to its instance, but the instance's existing `pronounced` selection remained attached to the old collection. Reapply mode selections from the new collections after rebinding. This test does not establish that the full library has been migrated; [#84329](https://github.com/WordPress/gutenberg/issues/84329) tracks that work. Use the following checks for future changes and record the results in the relevant pull request.
 
 Expected pixel values:
 
@@ -115,7 +115,7 @@ Expected pixel values:
 3. Bind a sample component's corner radius and stroke width to the new variables. Switch both collections' modes independently on an object or page. High-DPI is an explicit preview choice in Figma; the generated CSS selects it automatically through a resolution media query.
 4. Change one existing value in a local source, regenerate the files, and right-click the corresponding Figma mode to select **Import mode**. Check that the matching variable updates and retains its bindings. Restore the source and import the original value again.
 5. Add a temporary token to a local border source and regenerate. Confirm that importing into an existing mode does not create the new variable. Use the Figma API/plugin workflow to create it with the matching name, Number type, description, scope, and values for every mode, then verify later imports update it. Remove the temporary token after testing. This importer limitation was [reported by the theme library maintainer](https://github.com/WordPress/gutenberg/issues/82561#issuecomment-5799294192).
-6. Add a temporary alias to another token within the same collection, regenerate, and test both creating a collection and updating a mode. Confirm that Figma preserves the alias relationship, then remove the temporary alias. Cross-collection aliases are outside these files; they need Figma's `com.figma.aliasData` extension and a separate validation.
+6. Add a temporary alias to another token within the same collection, regenerate, and test both creating a collection and updating a mode. Confirm that Figma preserves the alias relationship, then remove the temporary alias. Cross-collection aliases are outside these files; they need Figma's `com.figma.aliasData` extension and a separate validation, tracked in [#84329](https://github.com/WordPress/gutenberg/issues/84329).
 7. Inspect components bound to the existing combined Border collection. Record their variable IDs and bindings before testing the split. Rebind components in the library branch and check that their instances use the new variables. Reapply existing mode selections from the new collections on affected objects and pages, then verify the intended values. Matching names alone do not preserve bindings or mode selections. Keep the existing collection until all affected bindings and mode selections have been checked.
 
 Figma creates new variables only for supported tokens present with the same type in every imported file. Importing an existing mode updates variables with matching names and types. See [Figma's import documentation](https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-variables#h_01KAGYPSFC984XDB4YWBCNRZJ7) for those constraints and [the separate typography issue](https://github.com/WordPress/gutenberg/issues/74620) for unsupported typography types. The generated files cover only border radius and width.

packages/theme/tokens/wpds.resolver.json

@@ -18,23 +18,95 @@
 		"corner-radius": {
 			"default": "subtle",
 			"contexts": {
-				"none": [ { "$ref": "modes/border.corner-radius-none.json" } ],
-				"subtle": [
-					{ "$ref": "modes/border.corner-radius-subtle.json" }
+				"none": [
+					{
+						"wpds-border": {
+							"$type": "dimension",
+							"radius": {
+								"xs": {
+									"$value": { "value": 0, "unit": "px" }
+								},
+								"sm": {
+									"$value": { "value": 0, "unit": "px" }
+								},
+								"md": {
+									"$value": { "value": 0, "unit": "px" }
+								},
+								"lg": {
+									"$value": { "value": 0, "unit": "px" }
+								},
+								"xl": { "$value": { "value": 0, "unit": "px" } }
+							}
+						}
+					}
 				],
+				"subtle": [],
 				"moderate": [
-					{ "$ref": "modes/border.corner-radius-moderate.json" }
+					{
+						"wpds-border": {
+							"$type": "dimension",
+							"radius": {
+								"xs": {
+									"$value": { "value": 6, "unit": "px" }
+								},
+								"sm": {
+									"$value": { "value": 8, "unit": "px" }
+								},
+								"md": {
+									"$value": { "value": 12, "unit": "px" }
+								},
+								"lg": {
+									"$value": { "value": 16, "unit": "px" }
+								},
+								"xl": {
+									"$value": { "value": 20, "unit": "px" }
+								}
+							}
+						}
+					}
 				],
 				"pronounced": [
-					{ "$ref": "modes/border.corner-radius-pronounced.json" }
+					{
+						"wpds-border": {
+							"$type": "dimension",
+							"radius": {
+								"xs": {
+									"$value": { "value": 18, "unit": "px" }
+								},
+								"sm": {
+									"$value": { "value": 20, "unit": "px" }
+								},
+								"md": {
+									"$value": { "value": 22, "unit": "px" }
+								},
+								"lg": {
+									"$value": { "value": 24, "unit": "px" }
+								},
+								"xl": {
+									"$value": { "value": 26, "unit": "px" }
+								}
+							}
+						}
+					}
 				]
 			}
 		},
 		"pixel-density": {
 			"default": "standard",
 			"contexts": {
 				"standard": [],
-				"high-dpi": [ { "$ref": "modes/border.high-dpi.json" } ]
+				"high-dpi": [
+					{
+						"wpds-border": {
+							"$type": "dimension",
+							"width": {
+								"focus": {
+									"$value": { "value": 1.5, "unit": "px" }
+								}
+							}
+						}
+					}
+				]
 			}
 		}
 	},