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

Comparing version 4.2.0 to 4.3.0

build/compileToCss.js

 const {
     CONSTANTS,
     convertGlobalTokenValueToStylesValue,
+    convertHexValueToRGB,
     convertWordToPascalCase,
@@ -10,3 +11,3 @@ getConvertedShadowsToBoxShadowValues,
 
-const getCssVarValue = variableGetterFactory('css');
+const getCssVarName = variableGetterFactory('css');
 
@@ -21,5 +22,7 @@ const {
 
+let currentThemeTokens = {};
+
 /**
  * Returns a token value using the specified category and name properties passed in.
- * Also handles some special cases (such as rgba format for colour aliases).
+ * Also handles some special cases (such as rgb format with opacity for colour aliases).
  *
@@ -35,3 +38,3 @@ * @param {string} category – Object key referencing the category of global token to access (i.e. color, font, radius)
     // 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 value and then convert that hex value to an RGBA
+    // So we need to replace the ALIAS_NAME with the global token value and then convert that hex value to RGB
     // if not, then we can just convert the alias using the global values we have
@@ -41,4 +44,6 @@ if (baseCategory === 'color' && name.includes('|')) {
         varName = `${baseCategory}-${nameParts[0]}`;
+        const globalColorTokens = currentThemeTokens.color[GLOBAL_TOKEN_KEY];
+        const hexValue = globalColorTokens[nameParts[0]];
 
-        return `rgba(${getCssVarValue(varName, true)}, ${nameParts[1]})`;
+        return convertHexValueToRGB(hexValue, nameParts[1]);
     } else if (baseCategory === 'color' && name.includes('%')) {
@@ -49,3 +54,3 @@ return name;
     // link to global variable name
-    return getCssVarValue(varName, true);
+    return getCssVarName(varName, true);
 };
@@ -86,3 +91,3 @@
 
-    return `    ${getCssVarValue(shortenedVar)}: ${compiledValue};\n`;
+    return `    ${getCssVarName(shortenedVar)}: ${compiledValue};\n`;
 };
@@ -158,2 +163,4 @@
 
+    currentThemeTokens = themeTokens;
+
     // e.g. color/font/spacing
@@ -173,2 +180,3 @@ categoryKeys.forEach(category => {
             const categoryAliases = Object.entries(themeTokens[category][ALIAS_TOKEN_KEY]);
+
             cssOutput += `    /* Alias tokens - ${categoryName} */\n`;
@@ -187,3 +195,3 @@ cssOutput += parseTokens(theme, category, categoryAliases, true);
  * (1) Parses the tokens into CSS (via other functions).
- * (2) Saves the output data to an CSS file.
+ * (2) Saves the output data to a CSS file.
  *
@@ -190,0 +198,0 @@ * @param {object} tokens – set of tokens to convert into CSS variables

build/helpers.js

@@ -173,2 +173,26 @@ const fs = require('fs');
 
+/**
+ * Converts a given hex value to rgb value with optional opacity parametr.
+ * @param {string} hexCode – hex colour code
+ * @param {string} opacity – optional opacity value
+ * @returns {string} – rgb value string
+ */
+const convertHexValueToRGB = (hexCode, opacity = 1) => {
+    let hex = hexCode.replace('#', '');
+
+    if (hex.length > 6 || hex.length < 3) {
+        return hexCode; // exit early if invalid hex code passed
+    }
+
+    if (hex.length === 3) {
+        hex = `${hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]}`;
+    }
+
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+
+    return `rgb(${r},${g},${b},${opacity})`;
+};
+
 // /**
@@ -215,2 +239,3 @@ //  * Deprecated – will be converted to support platform value replacement in later PR
     convertGlobalTokenValueToStylesValue,
+    convertHexValueToRGB,
     convertWordToPascalCase,
@@ -217,0 +242,0 @@ getConvertedShadowsToBoxShadowValues,

build/tests/helpers.spec.js

@@ -6,2 +6,3 @@ const {
     getConvertedShadowsToBoxShadowValues,
+    convertHexValueToRGB,
     variableGetterFactory
@@ -310,1 +311,34 @@ } = require('../helpers');
 });
+
+describe('convertHexValueToRGB', () => {
+    describe('if one parameter pased', () => {
+        it.each([
+            ['#f36805', 'rgb(243,104,5,1)'],
+            ['#fff', 'rgb(255,255,255,1)'],
+            ['fff', 'rgb(255,255,255,1)'],
+            ['notHexValue', 'notHexValue']
+
+        ])('should convert %s to %s', (hexCode, expected) => {
+            // Act
+            const result = convertHexValueToRGB(hexCode);
+
+            // Assert
+            expect(result).toBe(expected);
+        });
+    });
+    describe('if two parameters pased', () => {
+        it.each([
+            ['#f36805', '0.5', 'rgb(243,104,5,0.5)'],
+            ['#fff', '0.5', 'rgb(255,255,255,0.5)'],
+            ['fff', '0.5', 'rgb(255,255,255,0.5)'],
+            ['notHexValue', '0.5', 'notHexValue']
+
+        ])('should convert %s and %s to %s', (hexCode, opacity, expected) => {
+            // Act
+            const result = convertHexValueToRGB(hexCode, opacity);
+
+            // Assert
+            expect(result).toBe(expected);
+        });
+    });
+});

dist/tokens.json

@@ -1819,3 +1819,3 @@ {
   },
-  "version": "4.2.0"
+  "version": "4.3.0"
 }

package.json

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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

366605

increased by0.48%

Lines of code

3971

increased by1.38%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes