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

Comparing version 0.13.0 to 0.16.0

build/compileToJson.js

@@ -95,6 +95,7 @@ const { CONSTANTS, writeToFile } = require('./helpers');
  */
-const compileToJson = tokens => {
+const compileToJson = (tokens, version) => {
     if (!tokens || !tokens.theme) return false;
 
     const parsedTokens = parseThemes(tokens);
+    parsedTokens.version = version;
 
@@ -101,0 +102,0 @@ const jsonData = JSON.stringify(parsedTokens, null, 2);

build/compileToScss.js

@@ -15,2 +15,3 @@ const { CONSTANTS, writeToFile } = require('./helpers');
  * 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).
  *
@@ -37,2 +38,23 @@ * @param {string} category – Object key referencing the category of global token to access (i.e. color, font, radius)
 /**
+ * Converts a given token value into a more suitable SCSS syntax.
+ * If no conversion is required, the value itself is returned.
+ *
+ * @param {string} category – Object key referencing the category of global token to access (i.e. color, font, radius)
+ * @param {string} value – Value of the token to be converted (if necessary)
+ * @returns {string} – Value of the global token referenced using the category and name specified
+ */
+const convertGlobalValue = (category, value) => {
+    const [baseCategory] = category.split('-'); // ignore sub-categories
+
+    // If the category is a font and it includes a pipe character, then it'll be in the format `FONT_SIZE|LINE_HEIGHT`
+    if (baseCategory === 'font' && value.includes('|')) {
+        const valueParts = value.split('|');
+        return `${valueParts[0]}, ${valueParts[1]}`;
+    }
+
+    // link to global variable name
+    return value;
+};
+
+/**
  * Creates an SCSS variable string from the defined properties passed in
@@ -71,3 +93,3 @@ *
             // If we're parsing an alias, we need to do some replacement based on its global value
-            const compiledValue = (isAliasToken ? convertAliasToValue(category, value) : value);
+            const compiledValue = (isAliasToken ? convertAliasToValue(category, value) : convertGlobalValue(category, value));
             scssOutput += createScssVariable(category, name, compiledValue);
@@ -74,0 +96,0 @@ } else if (typeof value === 'object') {

build/helpers.js

@@ -17,3 +17,2 @@ const fs = require('fs');
 
-console.log('CALLING HELPERS FUNCTION');
 // Parse over the raw platform specific tokens and store them
@@ -20,0 +19,0 @@ const rawPlatformTokens = {

CHANGELOG.md

@@ -6,2 +6,37 @@ # Changelog
 
+
+v0.16.0
+------------------------------
+*February 24, 2021*
+
+### Added
+- CircleCI lint check to config.
+
+### Changed
+- Font values for SCSS output now compiled to comma separated Sass list, so that it's valid SCSS that can be inserted into our type map.
+
+### Fixed
+- Linting issues.
+
+
+v0.15.0
+------------------------------
+*January 29, 2021*
+
+### Added
+- Update colors to match current design token spreadsheet.
+- Script added which will take a csv export of the token spreadsheet and compare it to the jsonc to easily see differences.
+
+
+v0.14.0
+------------------------------
+*January 28, 2021*
+
+### Added
+- Adds version number to json output
+
+### Changed
+- Fixed font size of buttonS and buttonL being swapped
+
+
 v0.13.0
@@ -8,0 +43,0 @@ ------------------------------

dist/tokens.json

@@ -45,12 +45,15 @@ {
           "default": {
-            "background-default": "#fff",
-            "background-inverse": "#162028",
+            "background-default": "#f9fafb",
+            "background-dark": "#162028",
             "container-default": "#fff",
-            "container-subtle": "#f9fafb",
-            "container-strong": "#f1f2f4",
+            "container-subtle": "#f1f2f4",
+            "container-strong": "#e2e6e9",
+            "container-dark": "#1b252e",
             "container-inverse": "#1b252e",
-            "border-default": "#c5ccd3",
-            "border-subtle": "#e2e6e9",
-            "border-strong": "#929faa",
+            "border-default": "#e2e6e9",
+            "border-subtle": "#f1f2f4",
+            "border-strong": "#c5ccd3",
             "border-inverse": "#2a3846",
+            "divider-default": "#000|0.08",
+            "divider-inverse": "#fff|0.08",
             "interactive-brand": "#f36d00",
@@ -60,2 +63,3 @@ "interactive-primary": "#125fca",
             "interactive-inverse": "#fff",
+            "interactive-light": "#fff",
             "field": "#f1f2f4",
@@ -68,2 +72,3 @@ "overlay": "#000|0.5",
             "support-brand": "#f36d00",
+            "support-neutral": "#f1f2f4",
             "support-error-02": "#ffe9ea",
@@ -74,2 +79,4 @@ "support-warning-02": "#fff9df",
             "support-brand-02": "#ffead4",
+            "support-info-inverse": "#4996fd",
+            "support-positive-inverse": "#22bf65",
             "content-default": "#2a3846",
@@ -86,6 +93,7 @@ "content-subdued": "#5e6b77",
             "content-link": "#125fca",
+            "content-link-light": "#fff",
             "content-link-inverse": "#fff",
             "content-link-visited": null,
             "content-error": "#d50525",
-            "content-positive": "#006631",
+            "content-positive": "#00893f",
             "content-disabled": "#929faa",
@@ -102,11 +110,13 @@ "content-brand": "#f36d00",
             "disabled-01": "#e2e6e9",
-            "skeleton": "#f1f2f4"
+            "skeleton-01": "#f1f2f4",
+            "skeleton-02": "#e2e6e9"
           },
           "dark": {
             "background-default": "#162028",
-            "background-inverse": "#0c151d",
+            "background-dark": "#0c151d",
             "container-default": "#1b252e",
             "container-subtle": "#111b22",
             "container-strong": "#0c151d",
-            "container-inverse": "#162028",
+            "container-dark": "#162028",
+            "container-inverse": "#fff",
             "border-default": "#5e6b77",
@@ -116,2 +126,4 @@ "border-subtle": "#162028",
             "border-inverse": "#5e6b77",
+            "divider-default": "#fff|0.08",
+            "divider-inverse": "#000|0.08",
             "interactive-brand": "#f36d00",
@@ -121,2 +133,3 @@ "interactive-primary": "#125fca",
             "interactive-inverse": "#125fca",
+            "interactive-light": "#fff",
             "field": "#111b22",
@@ -129,3 +142,4 @@ "overlay": "#000|0.5",
             "support-brand": "#f36d00",
-            "support-error-02": "#0c151d",
+            "support-neutral": "#0c151d",
+            "support-error-02": "#491e24",
             "support-warning-02": "#474630",
@@ -135,2 +149,4 @@ "support-positive-02": "#273f33",
             "support-brand-02": "#41301f",
+            "support-info-inverse": "#125fca",
+            "support-positive-inverse": "#00893f",
             "content-default": "#fff",
@@ -147,2 +163,3 @@ "content-subdued": "#c5ccd3",
             "content-link": "#4996fd",
+            "content-link-light": "#fff",
             "content-link-inverse": "#125fca",
@@ -163,3 +180,4 @@ "content-link-visited": null,
             "disabled-01": "#5e6b77",
-            "skeleton": "#1b252e"
+            "skeleton-01": "#111b22",
+            "skeleton-02": "#1b252e"
           }
@@ -237,3 +255,3 @@ }
           "button-s": {
-            "size": "20|28",
+            "size": "14|20",
             "family": "JustEatBasis",
@@ -250,3 +268,3 @@ "weight": "Bold",
           "button-l": {
-            "size": "14|20",
+            "size": "20|28",
             "family": "JustEatBasis",
@@ -344,7 +362,8 @@ "weight": "Bold",
             "background-default": "#f9fafb",
-            "background-inverse": "#162028",
+            "background-dark": "#162028",
             "container-default": "#fff",
             "container-subtle": "#f1f2f4",
             "container-strong": "#e2e6e9",
-            "container-inverse": "#162028",
+            "container-dark": "#1b252e",
+            "container-inverse": "#1b252e",
             "border-default": "#e2e6e9",
@@ -354,2 +373,4 @@ "border-subtle": "#f1f2f4",
             "border-inverse": "#5e6b77",
+            "divider-default": "#000|0.08",
+            "divider-inverse": "#fff|0.08",
             "interactive-brand": "#f36d00",
@@ -359,2 +380,3 @@ "interactive-primary": "#125fca",
             "interactive-inverse": "#fff",
+            "interactive-light": "#fff",
             "field": "#f1f2f4",
@@ -365,4 +387,5 @@ "overlay": "#000|0.5",
             "support-positive": "#00893f",
-            "support-info": "#0a3847",
+            "support-info": "#125fca",
             "support-brand": "#f36d00",
+            "support-neutral": "#e2e6e9",
             "support-error-02": "#ffe9ea",
@@ -373,2 +396,4 @@ "support-warning-02": "#fff9df",
             "support-brand-02": "#ffead4",
+            "support-info-inverse": "#4996fd",
+            "support-positive-inverse": "#22bf65",
             "content-default": "#162028",
@@ -379,2 +404,3 @@ "content-subdued": "#5e6b77",
             "content-interactive-secondary": "#162028",
+            "content-interactive-tertiary": "#162028",
             "content-interactive-inverse": "#162028",
@@ -384,7 +410,8 @@ "content-interactive-dark": "#162028",
             "content-inverse": "#fff",
-            "content-link": "#0d4696",
-            "content-link-inverse": "#4996fd",
+            "content-link": "#125fca",
+            "content-link-light": "#fff",
+            "content-link-inverse": "#fff",
             "content-link-visited": null,
             "content-error": "#9f041c",
-            "content-positive": "#006631",
+            "content-positive": "#00893f",
             "content-disabled": "#929faa",
@@ -401,19 +428,24 @@ "content-brand": "#f36d00",
             "disabled-01": "#e2e6e9",
-            "skeleton": "#f1f2f4"
+            "skeleton-01": "#f1f2f4",
+            "skeleton-02": "#e2e6e9"
           },
           "dark": {
             "background-default": "#162028",
-            "background-inverse": "#0c151d",
+            "background-dark": "#0c151d",
             "container-default": "#1b252e",
             "container-subtle": "#111b22",
             "container-strong": "#0c151d",
-            "container-inverse": "#111b22",
+            "container-dark": "#162028",
+            "container-inverse": "#fff",
             "border-default": "#5e6b77",
-            "border-subtle": "#111b22",
+            "border-subtle": "#162028",
             "border-strong": "#0c151d",
             "border-inverse": "#5e6b77",
+            "divider-default": "#fff|0.08",
+            "divider-inverse": "#000|0.08",
             "interactive-brand": "#f36d00",
             "interactive-primary": "#125fca",
             "interactive-secondary": "#2a3846",
-            "interactive-inverse": "#fff",
+            "interactive-inverse": "#125fca",
+            "interactive-light": "#fff",
             "field": "#111b22",
@@ -424,4 +456,5 @@ "overlay": "#000|0.5",
             "support-positive": "#00893f",
-            "support-info": "#0a3847",
+            "support-info": "#125fca",
             "support-brand": "#f36d00",
+            "support-neutral": "#0c151d",
             "support-error-02": "#491e24",
@@ -432,2 +465,4 @@ "support-warning-02": "#474630",
             "support-brand-02": "#41301f",
+            "support-info-inverse": "#125fca",
+            "support-positive-inverse": "#00893f",
             "content-default": "#fff",
@@ -438,2 +473,3 @@ "content-subdued": "#c5ccd3",
             "content-interactive-secondary": "#fff",
+            "content-interactive-tertiary": "#fff",
             "content-interactive-inverse": "#fff",
@@ -444,3 +480,4 @@ "content-interactive-dark": "#162028",
             "content-link": "#4996fd",
-            "content-link-inverse": "#4996fd",
+            "content-link-light": "#fff",
+            "content-link-inverse": "#125fca",
             "content-link-visited": null,
@@ -459,4 +496,5 @@ "content-error": "#ec556c",
             "focus": "#4996fd",
-            "disabled-01": "#e2e6e9",
-            "skeleton": "#f1f2f4"
+            "disabled-01": "#5e6b77",
+            "skeleton-01": "#2a3846",
+            "skeleton-02": "#111b22"
           }
@@ -489,3 +527,4 @@ }
     }
-  }
+  },
+  "version": "0.16.0"
 }

index.js

 const fs = require('fs');
 const mkdirp = require('mkdirp');
 const jsonc = require('jsonc-parser');
+const projectJson = require('./package.json');
 const { buildGlobalTokensIntoThemes } = require('./build/helpers');
@@ -32,2 +33,5 @@ const compileToScss = require('./build/compileToScss');
 
+    // get the version number so it can be included in the output json
+    const { version } = projectJson;
+
     // // 1. Build JSONC out to SCSS
@@ -37,3 +41,3 @@ compileToScss(normalisedTokens.web);
     // // 2. Build JSONC out to standard JSON (replacing the alias tokens with values)
-    compileToJson(normalisedTokens.ios);
+    compileToJson(normalisedTokens.ios, version);
 
@@ -40,0 +44,0 @@ // // 3. Build JSONC out to XML (for Android)

package.json

 {
   "name": "@justeat/pie-design-tokens",
-  "version": "0.13.0",
+  "version": "0.16.0",
   "description": "Design Tokens for the PIE Component System",
@@ -15,2 +15,3 @@ "main": "index.js",
     "build": "node index.js",
+    "compare-csv": "node compare-csv.js",
     "test": "jest -c jest.config.js",
@@ -27,3 +28,4 @@ "test:output": "jest -c jest.config.output.js",
     "pie",
-    "fozzie"
+    "fozzie",
+    "eyeglass-module"
   ],
@@ -47,3 +49,9 @@ "author": "",
     "jest": "26.3.0"
+  },
+  "eyeglass": {
+    "name": "pie-design-tokens",
+    "sassDir": "dist/jet.scss",
+    "needs": "^3.0.2",
+    "exports": false
   }
 }

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

Improved metrics

Total package byte prevSize

148339

increased by7.94%

Lines of code

1383

increased by4.61%

No dependency changes