@automattic/vip-design-system 1.2.2 → 1.3.0

package/tokens/utilities/colors/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "colors",
+  "version": "1.0.0",
+  "description": "color calculation utility",
+  "main": "index.js",
+  "scripts": {
+    "test": "test"
+  },
+  "author": "David Bowman",
+  "license": "ISC",
+  "dependencies": {
+    "color": "^4.2.3",
+    "colorjs.io": "^0.4.3",
+    "csv-writer": "^1.6.0",
+    "natural-spline-interpolator": "^1.0.2",
+    "nodeplotlib": "^1.1.2",
+    "plotly.js": "^2.23.0",
+    "plotly.js-dist-min": "^2.23.0",
+    "regression": "^2.0.1"
+  }
+}

package/tokens/utilities/figma-type-calculator/responsive-type.js

@@ -0,0 +1,98 @@
+const fs = require( 'fs' );
+
+function clamp( min, preferred, max ) {
+	return Math.min( Math.max( min, preferred ), max );
+}
+
+function calculateResponsiveValues(
+	breakpointValues,
+	breakpointNames,
+	remValue,
+	responsiveFontSizeValues
+) {
+	const result = {};
+
+	responsiveFontSizeValues.forEach( ( styleFormula, index ) => {
+		const calculatedValues = breakpointValues.map( bp => {
+			const vw = bp / 100; // Convert breakpoint value to vw unit.
+
+			// Extract the arguments of the clamp function using a regular expression
+			const [ , min, preferred, max ] = styleFormula.match( /clamp\((.*),\s*(.*),\s*(.*)\)/ );
+
+			// Evaluate the expressions by replacing vw and rem with their respective numerical values
+			const minVal = eval( min.replace( /vw/g, `*${ vw }` ).replace( /rem/g, `*${ remValue }` ) );
+			const preferredExpression = preferred.replace( /calc\(/g, '' ).replace( /\)/g, '' );
+			const preferredVal = eval(
+				preferredExpression.replace( /vw/g, `*${ vw }` ).replace( /rem/g, `*${ remValue }` )
+			);
+			const maxVal = eval( max.replace( /vw/g, `*${ vw }` ).replace( /rem/g, `*${ remValue }` ) );
+
+			// Use the custom clamp function to calculate the value
+			return clamp( minVal, preferredVal, maxVal ).toFixed( 2 );
+		} );
+
+		result[ index ] = {
+			breakpointNames: breakpointNames,
+			values: calculatedValues,
+		};
+	} );
+
+	return result;
+}
+
+function updateConfigJSON( calculatedValues, config ) {
+	for ( const index in calculatedValues ) {
+		const fontSizeData = calculatedValues[ index ];
+		const fontSizeObject = {};
+
+		fontSizeData.breakpointNames.forEach( ( breakpointName, i ) => {
+			fontSizeObject[ breakpointName ] = {
+				value: fontSizeData.values[ i ],
+				type: 'other',
+			};
+		} );
+
+		// Add 1 to the index to start with 1 instead of 0
+		config.fontSize.figma[ parseInt( index ) + 1 ] = fontSizeObject;
+	}
+
+	return config;
+}
+
+fs.readFile( '../../valet-core/valet-core.json', 'utf8', ( err, data ) => {
+	if ( err ) {
+		console.error( 'Error reading file:', err );
+		return;
+	}
+
+	const config = JSON.parse( data );
+
+	const remValue = config.rem.value;
+
+	const breakpointNames = Object.keys( config.breakpoint );
+
+	const breakpointValues = Object.values( config.breakpoint ).map( obj => obj.value );
+
+	const responsiveFontSizeValues = Object.values( config.fontSize.responsive ).map(
+		obj => obj.value
+	);
+
+	const calculatedValues = calculateResponsiveValues(
+		breakpointValues,
+		breakpointNames,
+		remValue,
+		responsiveFontSizeValues
+	);
+
+	console.log( calculatedValues );
+
+	const updatedConfig = updateConfigJSON( calculatedValues, config );
+
+	fs.writeFile( '../../valet-core/valet-core.json', JSON.stringify( updatedConfig, null, 2 ), err => {
+		if ( err ) {
+			console.error( 'Error writing file:', err );
+			return;
+		}
+		console.log( 'Output written to valet-core.json' );
+	} );
+} );

package/tokens/valet-core/$metadata.json

@@ -1,19 +1,23 @@
 {
   "tokenSetOrder": [
     "valet-core",
-    "valet-expressive-core",
-    "valet-expressive-color",
-    "wpvip-expressive-core",
-    "wpvip-expressive-color-dark",
-    "wpvip-expressive-color",
-    "wpvip-expressive-type",
-    "wpvip-productive-color",
-    "wpvip-productive-color-dark",
-    "parsely-expressive-core",
-    "parsely-expressive-color",
-    "parsely-expressive-type",
-    "figma-valet-expressive-type",
-    "figma-wpvip-expressive-type",
-    "figma-parsely-expressive-type"
+    "valet-web-core",
+    "valet-web-color",
+    "wpvip-product-core",
+    "wpvip-product-dark",
+    "wpvip-web",
+    "wpvip-web-color-dark",
+    "wpvip-web-color",
+    "wpvip-web-type",
+    "parsely-web-core",
+    "parsely-web-color",
+    "parsely-web-type",
+    "wpvip-services-web-core",
+    "wpvip-services-web-color",
+    "wpvip-services-web-type",
+    "figma-valet-web-type",
+    "figma-wpvip-web-type",
+    "figma-wpvip-services-web-type",
+    "figma-parsely-web-type"
   ]
-}
+}