@justeat/pie-design-tokens - npm Package Compare versions

Comparing version 6.8.2 to 6.9.0

build/compileToCss.js

@@ -51,2 +51,6 @@ const {
 const createHslString = (value, varName) => {
+    if (typeof value !== 'string') {
+        return '';
+    }
+
     let hslString = '';
@@ -105,3 +109,3 @@ const cssVarName = getCssVarName(varName);
 
-    // If the category is a color and it includes a pipe character, then it'll be in the format `ALIAS_NAME|OPACITY` or `ALIAS_NAME,PERCENTAGE%`
+    // If the category is a color and it includes a pipe character, then it'll be in the format `ALIAS_NAME|OPACITY`
     // So we need to replace the ALIAS_NAME with the global token value and then convert that hex value to RGB
@@ -117,4 +121,9 @@ // if not, then we can just convert the alias using the global values we have
     } else if (baseCategory === 'color' && name.includes('%')) {
-        // We just care about the % for HSL calculations
-        return name.split(',')[1];
+        // If the category is a color and it includes %, then it'll be in the format `ALIAS_NAME,PERCENTAGE%`
+        // So we return the object with hexValue and percentage to be able to separate it later into 2 tokens
+        const [aliasName, percentage] = name.split(',');
+        const globalColorTokens = currentThemeTokens.color[GLOBAL_TOKEN_KEY];
+        const hexValue = globalColorTokens[aliasName];
+
+        return { hexValue, percentage };
     }
@@ -199,5 +208,13 @@
 
-    const cssVariable = createCssVariable(category, name, compiledValue, mode);
-    writeToObject(mode, cssVariable, output);
+    // Separate background color and opacity percentage into two separate CSS variables
+    if (typeof compiledValue === 'object' && compiledValue.hexValue && compiledValue.percentage) {
+        const bgVarName = `${name}-bg`;
 
+        writeToObject(mode, createCssVariable(category, bgVarName, compiledValue.hexValue), output);
+        writeToObject(mode, createCssVariable(category, name, compiledValue.percentage), output);
+    } else {
+        const cssVariable = createCssVariable(category, name, compiledValue);
+        writeToObject(mode, cssVariable, output);
+    }
+
     return compiledValue;
@@ -204,0 +221,0 @@ };

build/compileToScss.js

@@ -52,4 +52,9 @@ const {
     } else if (baseCategory === 'color' && name.includes('%')) {
-        // We just care about the % for HSL calculations
-        return name.split(',')[1];
+        // If the category is a color and it includes %, then it'll be in the format `ALIAS_NAME,PERCENTAGE%`
+        // So we return the object with hexValue and percentage to be able to separate it later into 2 tokens
+        const [aliasName, percentage] = name.split(',');
+        const globalColorTokens = currentThemeTokens.color[GLOBAL_TOKEN_KEY];
+        const hexValue = globalColorTokens[aliasName];
+
+        return { hexValue, percentage };
     }
@@ -116,2 +121,3 @@
     // If we find another object, then we send that object back into this function to be parsed
+
     tokens.forEach(([name, value]) => {
@@ -125,4 +131,16 @@ if (value === null) return; // continue
                 : convertGlobalTokenValueToStylesValue(category, value);
+            // Separate background color and opacity percentage into two separate SCSS variables
+            if (
+                typeof compiledValue === 'object' &&
+                compiledValue !== null &&
+                'hexValue' in compiledValue &&
+                'percentage' in compiledValue
+            ) {
+                const bgVarName = `${name}-bg`;
 
-            scssOutput += createScssVariable(category, name, compiledValue);
+                scssOutput += createScssVariable(category, bgVarName, compiledValue.hexValue);
+                scssOutput += createScssVariable(category, name, compiledValue.percentage);
+            } else {
+                scssOutput += createScssVariable(category, name, compiledValue);
+            }
         } else if (typeof value === 'object') {
@@ -129,0 +147,0 @@ if (value.shadows) {

dist/tokens.json

@@ -2095,3 +2095,3 @@ {
   },
-  "version": "6.8.2"
+  "version": "6.9.0"
 }

package.json

 {
   "name": "@justeat/pie-design-tokens",
-  "version": "6.8.2",
+  "version": "6.9.0",
   "description": "Design Tokens for the PIE Component System",
@@ -5,0 +5,0 @@ "main": "index.js",

No alert changes

Improved metrics

Total package byte prevSize

666138

increased by1.07%

Lines of code

8243

increased by0.81%

No dependency changes