@wordpress/theme 0.3.1-next.8b30e05b0.0 → 0.4.0

package/terrazzo.config.ts

@@ -8,11 +8,10 @@ import { makeCSSVar } from '@terrazzo/token-tools/css';
 /**
  * Internal dependencies
  */
-import pluginFigmaDsTokenManager from './bin/terrazzo-plugin-figma-ds-token-manager/index';
+import pluginModeOverrides from './bin/terrazzo-plugin-mode-overrides/index';
 import pluginKnownWpdsCssVariables from './bin/terrazzo-plugin-known-wpds-css-variables/index';
 import pluginDsTokenDocs from './bin/terrazzo-plugin-ds-tokens-docs/index';
 import inlineAliasValues from './bin/terrazzo-plugin-inline-alias-values/index';
-import { publicTokenId } from './src/token-id.ts';
 
 export default defineConfig( {
 	tokens: [
@@ -26,36 +25,36 @@ export default defineConfig( {
 
 	plugins: [
 		inlineAliasValues( {
-			pattern: /^color\.primitive\./,
+			pattern: /^wpds-color\.primitive\./,
 			filename: 'ts/color-tokens.ts',
 			tokenId: ( tokenId ) =>
-				publicTokenId( tokenId )
-					.replace( /^color\./, '' )
+				tokenId
+					.replace( /\.primitive/, '' )
+					.replace( /^wpds-color\./, '' )
 					.replace( /\./g, '-' ),
 		} ),
-		inlineAliasValues( { pattern: /^dimension\.primitive\./ } ),
+		inlineAliasValues( { pattern: /^wpds-dimension\.primitive\./ } ),
 		pluginCSS( {
 			filename: 'css/design-tokens.css',
-			variableName: ( token ) =>
-				makeCSSVar( `wpds.${ publicTokenId( token.id ) }` ),
+			variableName: ( token ) => makeCSSVar( token.id ),
 			baseSelector: ':root',
 			modeSelectors: [
 				{
-					tokens: [ 'dimension.*' ],
+					tokens: [ 'wpds-dimension.*' ],
 					mode: '.',
 					selectors: [
 						"[data-wpds-theme-provider-id][data-wpds-density='default']",
 					],
 				},
 				{
-					tokens: [ 'dimension.*' ],
+					tokens: [ 'wpds-dimension.*' ],
 					mode: 'compact',
 					selectors: [
 						"[data-wpds-theme-provider-id][data-wpds-density='compact']",
 					],
 				},
 				{
-					tokens: [ 'dimension.*' ],
+					tokens: [ 'wpds-dimension.*' ],
 					mode: 'comfortable',
 					selectors: [
 						"[data-wpds-theme-provider-id][data-wpds-density='comfortable']",
@@ -70,15 +69,13 @@ export default defineConfig( {
 			],
 			legacyHex: true,
 		} ),
-		pluginFigmaDsTokenManager( {
-			filename: 'json/figma.json',
-		} ),
 		pluginKnownWpdsCssVariables( {
 			filename: 'js/design-tokens.js',
 		} ),
 		pluginDsTokenDocs( {
 			filename: '../../docs/ds-tokens.md',
 		} ),
+		pluginModeOverrides(),
 	],
 
 	// Linter rules current error when multiple entry files are used

package/tokens/border.json

@@ -1,31 +1,53 @@
 {
-	"border": {
+	"wpds-border": {
 		"$type": "dimension",
 		"radius": {
-			"x-small": {
-				"$value": { "value": 1, "unit": "px" },
-				"$description": "Extra small radius"
-			},
-			"small": {
-				"$value": { "value": 2, "unit": "px" },
-				"$description": "Small radius"
-			},
-			"medium": {
-				"$value": { "value": 4, "unit": "px" },
-				"$description": "Medium radius"
-			},
-			"large": {
-				"$value": { "value": 8, "unit": "px" },
-				"$description": "Large radius"
+			"surface": {
+				"xs": {
+					"$value": { "value": 1, "unit": "px" },
+					"$description": "Extra small radius for surfaces"
+				},
+				"sm": {
+					"$value": { "value": 2, "unit": "px" },
+					"$description": "Small radius for surfaces"
+				},
+				"md": {
+					"$value": { "value": 4, "unit": "px" },
+					"$description": "Medium radius for surfaces"
+				},
+				"lg": {
+					"$value": { "value": 8, "unit": "px" },
+					"$description": "Large radius for surfaces"
+				}
 			}
 		},
 		"width": {
-			"focus": {
-				"$value": { "value": 2, "unit": "px" },
-				"$description": "Border width for focus ring",
-				"$extensions": {
-					"mode": {
-						"high-dpi": { "value": 1.5, "unit": "px" }
+			"surface": {
+				"xs": {
+					"$value": { "value": 1, "unit": "px" },
+					"$description": "Extra small width for surfaces"
+				},
+				"sm": {
+					"$value": { "value": 2, "unit": "px" },
+					"$description": "Small width for surfaces"
+				},
+				"md": {
+					"$value": { "value": 4, "unit": "px" },
+					"$description": "Medium width for surfaces"
+				},
+				"lg": {
+					"$value": { "value": 8, "unit": "px" },
+					"$description": "Large width for surfaces"
+				}
+			},
+			"interactive": {
+				"focus": {
+					"$value": { "value": 2, "unit": "px" },
+					"$description": "Border width for focus ring",
+					"$extensions": {
+						"mode": {
+							"high-dpi": { "value": 1.5, "unit": "px" }
+						}
 					}
 				}
 			}