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

Comparing version 4.0.0-beta.0 to 4.0.0-beta.1

build/compileToCss.js

@@ -78,3 +78,6 @@ const {
 
-    return `    ${getCssVarValue(varName)}: ${compiledValue};\n`;
+    // shortens css variable name i.e. `font-size-12-font-size` becomes `font-size-12`
+    const shortenedVar = varName.replace('-font-size', '');
+
+    return `    ${getCssVarValue(shortenedVar)}: ${compiledValue};\n`;
 };
@@ -121,2 +124,13 @@
 
+            // adds line-height css variables to alias tokens
+            if (category.includes('font') && isAliasToken) {
+                Object.keys(value).forEach(key => {
+                    if (key === 'size--wide' || key === 'size--narrow' || key === 'size') {
+                        const lineHeight = `line-height-${key}`;
+
+                        value[lineHeight.replace('-size', '')] = `${value[key]}-line-height`;
+                    }
+                });
+            }
+
             const updatedCategoryName = name === 'default' ? category : `${category}-${name}`;
@@ -123,0 +137,0 @@ cssOutput += parseTokens(theme, updatedCategoryName, Object.entries(value), isAliasToken);

build/compileToScss.js

@@ -77,3 +77,6 @@ const {
 
-    return `${getScssVarValue(varName)}: ${compiledValue};\n`;
+    // shortens scss variable name i.e. `font-size-12-font-size` becomes `font-size-12`
+    const shortenedVar = varName.replace('-font-size', '');
+
+    return `${getScssVarValue(shortenedVar)}: ${compiledValue};\n`;
 };
@@ -120,2 +123,13 @@
 
+            // adds line-height scss variables to alias tokens
+            if (category.includes('font') && isAliasToken) {
+                Object.keys(value).forEach(key => {
+                    if (key === 'size--wide' || key === 'size--narrow' || key === 'size') {
+                        const lineHeight = `line-height-${key}`;
+
+                        value[lineHeight.replace('-size', '')] = `${value[key]}-line-height`;
+                    }
+                });
+            }
+
             const updatedCategoryName = name === 'default' ? category : `${category}-${name}`;
@@ -122,0 +136,0 @@ scssOutput += parseTokens(theme, updatedCategoryName, Object.entries(value), isAliasToken);

dist/tokens.json

@@ -402,10 +402,38 @@ {
           "paragraph-spacing-03": "12",
-          "size-a": "12|16",
-          "size-b": "14|20",
-          "size-c": "16|24",
-          "size-d": "20|28",
-          "size-e": "24|32",
-          "size-f": "28|36",
-          "size-g": "32|40",
-          "size-h": "48|56",
+          "size-12": {
+            "font-size": "12",
+            "line-height": "16"
+          },
+          "size-14": {
+            "font-size": "14",
+            "line-height": "20"
+          },
+          "size-16": {
+            "font-size": "16",
+            "line-height": "24"
+          },
+          "size-19": {
+            "font-size": "19",
+            "line-height": "28"
+          },
+          "size-20": {
+            "font-size": "20",
+            "line-height": "28"
+          },
+          "size-24": {
+            "font-size": "24",
+            "line-height": "32"
+          },
+          "size-28": {
+            "font-size": "28",
+            "line-height": "36"
+          },
+          "size-32": {
+            "font-size": "32",
+            "line-height": "40"
+          },
+          "size-48": {
+            "font-size": "48",
+            "line-height": "56"
+          },
           "style-underline": "underline",
@@ -418,4 +446,10 @@ "weight-bold": "Bold",
           "heading-s": {
-            "size--wide": "20|28",
-            "size--narrow": "16|24",
+            "size--wide": {
+              "font-size": "20",
+              "line-height": "28"
+            },
+            "size--narrow": {
+              "font-size": "16",
+              "line-height": "24"
+            },
             "family": "JetSansDigital",
@@ -426,4 +460,10 @@ "weight": "ExtraBold",
           "heading-m": {
-            "size--wide": "24|32",
-            "size--narrow": "20|28",
+            "size--wide": {
+              "font-size": "24",
+              "line-height": "32"
+            },
+            "size--narrow": {
+              "font-size": "20",
+              "line-height": "28"
+            },
             "family": "JetSansDigital",
@@ -434,4 +474,10 @@ "weight": "ExtraBold",
           "heading-l": {
-            "size--wide": "28|36",
-            "size--narrow": "24|32",
+            "size--wide": {
+              "font-size": "28",
+              "line-height": "36"
+            },
+            "size--narrow": {
+              "font-size": "24",
+              "line-height": "32"
+            },
             "family": "JetSansDigital",
@@ -442,4 +488,10 @@ "weight": "ExtraBold",
           "heading-xl": {
-            "size--wide": "32|40",
-            "size--narrow": "28|36",
+            "size--wide": {
+              "font-size": "32",
+              "line-height": "40"
+            },
+            "size--narrow": {
+              "font-size": "28",
+              "line-height": "36"
+            },
             "family": "JetSansDigital",
@@ -450,4 +502,10 @@ "weight": "ExtraBold",
           "heading-xxl": {
-            "size--wide": "48|56",
-            "size--narrow": "32|40",
+            "size--wide": {
+              "font-size": "48",
+              "line-height": "56"
+            },
+            "size--narrow": {
+              "font-size": "32",
+              "line-height": "40"
+            },
             "family": "JetSansDigital",
@@ -458,4 +516,10 @@ "weight": "ExtraBold",
           "subheading-s": {
-            "size--wide": "20|28",
-            "size--narrow": "16|24",
+            "size--wide": {
+              "font-size": "20",
+              "line-height": "28"
+            },
+            "size--narrow": {
+              "font-size": "16",
+              "line-height": "24"
+            },
             "family": "JetSansDigital",
@@ -466,4 +530,10 @@ "weight": "Regular",
           "subheading-l": {
-            "size--wide": "24|32",
-            "size--narrow": "20|28",
+            "size--wide": {
+              "font-size": "24",
+              "line-height": "32"
+            },
+            "size--narrow": {
+              "font-size": "20",
+              "line-height": "28"
+            },
             "family": "JetSansDigital",
@@ -474,3 +544,6 @@ "weight": "Regular",
           "interactive-xs": {
-            "size": "14|20",
+            "size": {
+              "font-size": "14",
+              "line-height": "20"
+            },
             "family": "JetSansDigital",
@@ -481,3 +554,6 @@ "weight": "Bold",
           "interactive-s": {
-            "size": "16|24",
+            "size": {
+              "font-size": "16",
+              "line-height": "24"
+            },
             "family": "JetSansDigital",
@@ -488,3 +564,6 @@ "weight": "Bold",
           "interactive-m": {
-            "size": "20|28",
+            "size": {
+              "font-size": "19",
+              "line-height": "28"
+            },
             "family": "JetSansDigital",
@@ -495,3 +574,6 @@ "weight": "Bold",
           "interactive-l": {
-            "size": "20|28",
+            "size": {
+              "font-size": "20",
+              "line-height": "28"
+            },
             "family": "JetSansDigital",
@@ -502,3 +584,6 @@ "weight": "Bold",
           "body-s": {
-            "size": "14|20",
+            "size": {
+              "font-size": "14",
+              "line-height": "20"
+            },
             "family": "JetSansDigital",
@@ -510,3 +595,6 @@ "weight": "Regular",
           "body-s-link": {
-            "size": "14|20",
+            "size": {
+              "font-size": "14",
+              "line-height": "20"
+            },
             "family": "JetSansDigital",
@@ -519,3 +607,6 @@ "weight": "Regular",
           "body-l": {
-            "size": "16|24",
+            "size": {
+              "font-size": "16",
+              "line-height": "24"
+            },
             "family": "JetSansDigital",
@@ -527,3 +618,6 @@ "weight": "Regular",
           "body-l-link": {
-            "size": "16|24",
+            "size": {
+              "font-size": "16",
+              "line-height": "24"
+            },
             "family": "JetSansDigital",
@@ -536,3 +630,6 @@ "weight": "Regular",
           "body-strong-s": {
-            "size": "14|20",
+            "size": {
+              "font-size": "14",
+              "line-height": "20"
+            },
             "family": "JetSansDigital",
@@ -544,3 +641,6 @@ "weight": "Bold",
           "body-strong-s-link": {
-            "size": "14|20",
+            "size": {
+              "font-size": "14",
+              "line-height": "20"
+            },
             "family": "JetSansDigital",
@@ -553,3 +653,6 @@ "weight": "Bold",
           "body-strong-l": {
-            "size": "16|24",
+            "size": {
+              "font-size": "16",
+              "line-height": "24"
+            },
             "family": "JetSansDigital",
@@ -561,3 +664,6 @@ "weight": "Bold",
           "body-strong-l-link": {
-            "size": "16|24",
+            "size": {
+              "font-size": "16",
+              "line-height": "24"
+            },
             "family": "JetSansDigital",
@@ -570,3 +676,6 @@ "weight": "Bold",
           "caption": {
-            "size": "12|16",
+            "size": {
+              "font-size": "12",
+              "line-height": "16"
+            },
             "family": "JetSansDigital",
@@ -578,3 +687,6 @@ "weight": "Regular",
           "caption-link": {
-            "size": "12|16",
+            "size": {
+              "font-size": "12",
+              "line-height": "16"
+            },
             "family": "JetSansDigital",
@@ -587,3 +699,6 @@ "weight": "Regular",
           "caption-strong": {
-            "size": "12|16",
+            "size": {
+              "font-size": "12",
+              "line-height": "16"
+            },
             "family": "JetSansDigital",
@@ -595,3 +710,6 @@ "weight": "Bold",
           "caption-strong-link": {
-            "size": "12|16",
+            "size": {
+              "font-size": "12",
+              "line-height": "16"
+            },
             "family": "JetSansDigital",
@@ -1369,3 +1487,3 @@ "weight": "Bold",
   },
-  "version": "4.0.0-beta.0"
+  "version": "4.0.0-beta.1"
 }

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

342570

increased by0.99%

Lines of code

3550

increased by5.62%

Worsened metrics

Number of package files

30

decreased by-3.23%

No dependency changes