@madgex/design-system 9.3.1 → 10.0.0

package/src/tokens/email.json

@@ -1,62 +1,63 @@
 {
   "email": {
     "color": {
+      "$type": "color",
       "link": {
         "base": {
-          "value" : "{color.link.base.value}"
+          "$value": "{color.link.base}"
         },
         "hover": {
-          "value" : "{color.link.hover.value}"
+          "$value": "{color.link.hover}"
         }
       },
       "button": {
         "bg": {
           "base": {
-            "value" : "{color.button.bg.base.value}"
+            "$value": "{color.button.bg.base}"
           },
           "hover": {
-            "value" : "{color.button.bg.hover.value}"
+            "$value": "{color.button.bg.hover}"
           }
         },
         "text": {
           "base": {
-            "value" : "{color.button.text.base.value}"
+            "$value": "{color.button.text.base}"
           },
           "hover": {
-            "value" : "{color.button.text.hover.value}"
+            "$value": "{color.button.text.hover}"
           }
         },
         "border": {
           "base": {
-            "value" : "{color.button.border.base.value}"
+            "$value": "{color.button.border.base}"
           },
           "top": {
-            "value" : "{color.button.border.top.value}"
+            "$value": "{color.button.border.top}"
           },
           "right": {
-            "value" : "{color.button.border.right.value}"
+            "$value": "{color.button.border.right}"
           },
           "bottom": {
-            "value" : "{color.button.border.bottom.value}"
+            "$value": "{color.button.border.bottom}"
           },
           "left": {
-            "value" : "{color.button.border.left.value}"
+            "$value": "{color.button.border.left}"
           },
           "hover": {
             "base": {
-              "value" : "{color.button.border.hover.base.value}"
+              "$value": "{color.button.border.hover.base}"
             },
             "top": {
-              "value" : "{color.button.border.hover.top.value}"
+              "$value": "{color.button.border.hover.top}"
             },
             "right": {
-              "value" : "{color.button.border.hover.right.value}"
+              "$value": "{color.button.border.hover.right}"
             },
             "bottom": {
-              "value" : "{color.button.border.hover.bottom.value}"
+              "$value": "{color.button.border.hover.bottom}"
             },
             "left": {
-              "value" : "{color.button.border.hover.left.value}"
+              "$value": "{color.button.border.hover.left}"
             }
           }
         }
@@ -64,33 +65,35 @@
     },
     "font": {
       "family": {
+        "$type": "fontFamily",
         "heading": {
-          "base" : {
-            "value": "{font.family.heading.base.value}"
+          "base": {
+            "$value": "{font.family.heading.base}"
           },
-          "1" : {
-            "value": "{font.family.heading.1.value}"
+          "1": {
+            "$value": "{font.family.heading.1}"
           },
-          "2" : {
-            "value": "{font.family.heading.2.value}"
+          "2": {
+            "$value": "{font.family.heading.2}"
           },
-          "3" : {
-            "value": "{font.family.heading.3.value}"
+          "3": {
+            "$value": "{font.family.heading.3}"
           }
         }
       }
     },
     "size": {
+      "$type": "dimension",
       "button": {
         "border": {
           "radius": {
-            "value": "{size.border.radius.button.value}"
+            "$value": "{size.border.radius.button}"
           },
           "width": {
-            "value": "{size.border.width.button.value}"
+            "$value": "{size.border.width.button}"
           }
         }
       }
     }
   }
-}
+}

package/src/tokens/size.json

@@ -1,66 +1,67 @@
 {
   "size": {
+    "$type": "dimension",
     "border": {
       "width": {
         "base": {
-          "value": "1px"
+          "$value": "1px"
         },
         "button": {
-          "value": "{size.border.width.base.value}"
+          "$value": "{size.border.width.base}"
         }
       },
       "radius": {
         "base": {
-          "value": "4px"
+          "$value": "4px"
         },
         "button": {
-          "value": "{size.border.radius.base.value}"
+          "$value": "{size.border.radius.base}"
         },
         "main": {
-          "value": "0"
+          "$value": "0"
         }
       }
     },
     "container": {
       "width": {
-        "value": "100%"
+        "$value": "100%"
       },
       "min-width": {
-        "value": "0"
+        "$value": "0"
       },
       "max-width": {
-        "value": "100%"
+        "$value": "100%"
       }
     },
     "wrapper": {
       "width": {
-        "value": "97%"
+        "$value": "97%"
       },
       "max-width": {
-        "value": "1240px"
+        "$value": "1240px"
       }
     },
     "surface": {
       "padding": {
-        "value": "16px"
+        "$value": "16px"
       }
     },
     "main": {
       "max-width": {
-        "value": "100%"
+        "$value": "100%"
       },
       "padding": {
-        "value": "0"
+        "$value": "0"
       },
       "margin": {
-        "value": "0 auto"
+        "$value": "0 auto"
       }
     },
     "height": {
       "ad-container": {
         "leaderboard": {
           "min": {
-            "value": "0"
+            "$value": "0"
           }
         }
       }

package/src/tokens/typography.json

@@ -1,206 +1,212 @@
 {
   "font": {
     "family": {
+      "$type": "fontFamily",
       "base": {
-        "value": "\"Helvetica\", Arial, sans-serif"
+        "$value": "\"Helvetica\", Arial, sans-serif"
       },
       "heading": {
         "base": {
-          "value": "{font.family.base.value}"
+          "$value": "{font.family.base}"
         },
         "1": {
-          "value": "{font.family.heading.base.value}"
+          "$value": "{font.family.heading.base}"
         },
         "2": {
-          "value": "{font.family.heading.base.value}"
+          "$value": "{font.family.heading.base}"
         },
         "3": {
-          "value": "{font.family.heading.base.value}"
+          "$value": "{font.family.heading.base}"
         }
       },
       "button": {
         "base": {
-          "value": "{font.family.base.value}"
+          "$value": "{font.family.base}"
         }
       }
     },
     "weight": {
+      "$type": "fontWeight",
       "base": {
-        "value": "400"
+        "$value": "400"
       },
       "heading": {
         "base": {
-          "value": "{font.weight.base.value}"
+          "$value": "{font.weight.base}"
         },
         "1": {
-          "value": "{font.weight.heading.base.value}"
+          "$value": "{font.weight.heading.base}"
         },
         "2": {
-          "value": "{font.weight.heading.base.value}"
+          "$value": "{font.weight.heading.base}"
         },
         "3": {
-          "value": "{font.weight.heading.base.value}"
+          "$value": "{font.weight.heading.base}"
         }
       },
       "button": {
         "base": {
-          "value": "{font.weight.base.value}"
+          "$value": "{font.weight.base}"
         }
       },
       "link": {
         "base": {
-          "value": "inherit"
+          "$value": "inherit"
         }
       }
     },
     "spacing": {
+      "$type": "letterSpacing",
       "base": {
-        "value": "normal"
+        "$value": "normal"
       },
       "heading": {
         "base": {
-          "value": "{font.spacing.base.value}"
+          "$value": "{font.spacing.base}"
         },
         "1": {
-          "value": "{font.spacing.heading.base.value}"
+          "$value": "{font.spacing.heading.base}"
         },
         "2": {
-          "value": "{font.spacing.heading.base.value}"
+          "$value": "{font.spacing.heading.base}"
         },
         "3": {
-          "value": "{font.spacing.heading.base.value}"
+          "$value": "{font.spacing.heading.base}"
         }
       },
       "button": {
-        "value": "{font.spacing.base.value}"
+        "$value": "{font.spacing.base}"
       }
     },
     "type": {
+      "$type": "dimension",
       "s-2": {
         "size": {
-          "value": "0.75rem"
+          "$value": "0.75rem"
         },
-        "line-height": { 
-          "value": "1.35" 
+        "line-height": {
+          "$value": "1.35"
         }
       },
       "s-1": {
         "size": {
-          "value": "0.875rem"
+          "$value": "0.875rem"
         },
-        "line-height": { 
-          "value": "1.35" 
+        "line-height": {
+          "$value": "1.35"
         }
       },
       "s0": {
         "size": {
-          "value": "1rem"
+          "$value": "1rem"
         },
-        "line-height": { 
-          "value": "1.4" 
+        "line-height": {
+          "$value": "1.4"
         }
       },
       "s1": {
         "size": {
-          "value": "clamp(1.067rem, 1.0468rem + 0.1009vi, 1.125rem)"
+          "$value": "clamp(1.067rem, 1.0468rem + 0.1009vi, 1.125rem)"
         },
-        "line-height": { 
-          "value": "1.4" 
+        "line-height": {
+          "$value": "1.4"
         }
       },
       "s2": {
         "size": {
-          "value": "clamp(1.1385rem, 1.0943rem + 0.2211vi, 1.2656rem)"
+          "$value": "clamp(1.1385rem, 1.0943rem + 0.2211vi, 1.2656rem)"
         },
-        "line-height": { 
-          "value": "1.2" 
+        "line-height": {
+          "$value": "1.2"
         }
       },
       "s3": {
         "size": {
-          "value": "clamp(1.2148rem, 1.1421rem + 0.3636vi, 1.4238rem)"
+          "$value": "clamp(1.2148rem, 1.1421rem + 0.3636vi, 1.4238rem)"
         },
-        "line-height": { 
-          "value": "1.2" 
+        "line-height": {
+          "$value": "1.2"
         }
       },
       "s4": {
         "size": {
-          "value": "clamp(1.2962rem, 1.1898rem + 0.5316vi, 1.6018rem)"
+          "$value": "clamp(1.2962rem, 1.1898rem + 0.5316vi, 1.6018rem)"
         },
-        "line-height": { 
-          "value": "1.2" 
+        "line-height": {
+          "$value": "1.2"
         }
       },
       "s5": {
         "size": {
-          "value": "clamp(1.383rem, 1.2372rem + 0.7288vi, 1.802rem)"
+          "$value": "clamp(1.383rem, 1.2372rem + 0.7288vi, 1.802rem)"
         },
-        "line-height": { 
-          "value": "1.2" 
+        "line-height": {
+          "$value": "1.2"
         }
       },
       "s6": {
         "size": {
-          "value": "clamp(1.4757rem, 1.2838rem + 0.9593vi, 2.0273rem)"
+          "$value": "clamp(1.4757rem, 1.2838rem + 0.9593vi, 2.0273rem)"
         },
-        "line-height": { 
-          "value": "1.15" 
+        "line-height": {
+          "$value": "1.15"
         }
       },
       "s7": {
         "size": {
-          "value": "clamp(1.5745rem, 1.3289rem + 1.2281vi, 2.2807rem)"
+          "$value": "clamp(1.5745rem, 1.3289rem + 1.2281vi, 2.2807rem)"
         },
-        "line-height": { 
-          "value": "1.15" 
+        "line-height": {
+          "$value": "1.15"
         }
       },
       "s8": {
         "size": {
-          "value": "clamp(1.68rem, 1.3719rem + 1.5405vi, 2.5658rem)"
+          "$value": "clamp(1.68rem, 1.3719rem + 1.5405vi, 2.5658rem)"
         },
-        "line-height": { 
-          "value": "1.15" 
+        "line-height": {
+          "$value": "1.15"
         }
       },
       "s9": {
         "size": {
-          "value": "clamp(1.7926rem, 1.4121rem + 1.9025vi, 2.8865rem)"
+          "$value": "clamp(1.7926rem, 1.4121rem + 1.9025vi, 2.8865rem)"
         },
-        "line-height": { 
-          "value": "1.15" 
+        "line-height": {
+          "$value": "1.15"
         }
       }
     }
   },
   "text": {
     "transform": {
+      "$type": "textTransform",
       "heading": {
         "base": {
-          "value": "none"
+          "$value": "none"
         },
         "1": {
-          "value": "{text.transform.heading.base.value}"
+          "$value": "{text.transform.heading.base}"
         },
         "2": {
-          "value": "{text.transform.heading.base.value}"
+          "$value": "{text.transform.heading.base}"
         },
         "3": {
-          "value": "{text.transform.heading.base.value}"
+          "$value": "{text.transform.heading.base}"
         }
       },
       "button": {
-        "value": "none"
+        "$value": "none"
       }
     },
     "decoration": {
+      "$type": "textDecoration",
       "link": {
         "base": {
-          "value": "underline"
+          "$value": "underline"
         },
         "hover": {
-          "value": "underline"
+          "$value": "underline"
         }
       }
     }

package/style-dictionary/color-transforms.js

@@ -0,0 +1,143 @@
+const crypto = require('node:crypto');
+const path = require('node:path');
+const os = require('node:os');
+const fs = require('node:fs/promises');
+const { TinyColor } = require('@ctrl/tinycolor');
+
+const TRANSFORM_AMOUNTS = {
+  LIGHT: 10,
+  LIGHTEST: 95,
+  DARK: 10,
+  DARKEST: 12,
+};
+
+/**
+ * @typedef ColorGroupItem
+ * @type {object}
+ * @property {string} $value
+ */
+
+/**
+ * @typedef ColorGroupInput
+ * @type {object}
+ * @property {!ColorGroupItem} base
+ * @property {?ColorGroupItem} light
+ * @property {?ColorGroupItem} lightest
+ * @property {?ColorGroupItem} dark
+ * @property {?ColorGroupItem} darkest
+ */
+
+/**
+ * Replicates Sass lightness($color) function
+
+ * @param {TinyColor} color 
+ * @returns {number}
+ */
+function lightness(color) {
+  const { l } = color.toHsl();
+
+  return l * 100;
+}
+
+/**
+ * adds `light`, `lightest`, `dark` and `darkest` to a token colour group, derived from `colorGroup.base.$value`.
+ *
+ * If keys already exist, they are **not** overwritten.
+ *
+ * @param {ColorGroupInput} colorGroup {base, light?, lightest?, dark?, darkest? }
+ * @returns {ColorGroupInput} {base, light, lightest, dark, darkest }
+ */
+function createColorsFromBase(colorGroup) {
+  const { base = {}, light = {}, lightest = {}, dark = {}, darkest = {} } = colorGroup;
+  const asTinyColor = new TinyColor(base.$value);
+
+  return {
+    base,
+    light: {
+      ...light,
+      $value: light.$value || asTinyColor.lighten(TRANSFORM_AMOUNTS.LIGHT).toHexString(),
+    },
+    lightest: {
+      ...lightest,
+      $value: lightest.$value || asTinyColor.lighten(TRANSFORM_AMOUNTS.LIGHTEST - lightness(asTinyColor)).toHexString(),
+    },
+    dark: {
+      ...dark,
+      $value: dark?.$value || asTinyColor.darken(TRANSFORM_AMOUNTS.DARK).toHexString(),
+    },
+    darkest: {
+      ...darkest,
+      $value: darkest?.$value || asTinyColor.darken(lightness(asTinyColor) - TRANSFORM_AMOUNTS.DARKEST).toHexString(),
+    },
+  };
+}
+
+/**
+ * For each `tokensObject.color.brand.*`, add lightness tokens, if they dont already exist
+ *
+ * @param {object} tokensObject
+ * @returns {object} modified tokensObject
+ */
+function addBrandColorLightnessTokens(tokensObject) {
+  const { brand } = tokensObject.color;
+
+  return {
+    ...tokensObject,
+    color: {
+      ...tokensObject.color,
+      /**
+       * focus on `brand` object
+       *
+       * loop through all brand group keys e.g. "1", "2", "3"
+       *
+       * apply `createColorsFromBase` to each color group
+       */
+      brand: Object.keys(brand).reduce((accu, brandKey) => {
+        const colorGroup = brand[brandKey];
+        const populatedColorGroup = createColorsFromBase(colorGroup);
+        // eslint-disable-next-line no-param-reassign
+        accu[brandKey] = { ...colorGroup, ...populatedColorGroup };
+        return accu;
+      }, {}),
+    },
+  };
+}
+
+module.exports.addBrandColorLightnessTokens = addBrandColorLightnessTokens;
+
+/**
+ * Although `addBrandColorLightnessTokens` does the job of adding lighten tokens to `color.brand.*` JSON, this function purely
+ * exists to: read, transform, and then write the result to a new temporary file.
+ *
+ * For use in Style Dictionary `source` array. Style Dictionary only supports files written to disk for `source` 🥲
+ *
+ * @param {string} originalFilePath path to original tokens json file
+ * @returns {string} new file path
+ */
+async function writeTransformedFileBrandColorLightnessTokens(originalFilePath) {
+  // construct new unique temp file path name where we will save new json file to disk
+  const TMP_DIR = await fs.realpath(os.tmpdir());
+  const filename = path.parse(originalFilePath).name;
+  const newTempFilePath = path.join(
+    TMP_DIR,
+    `/madgex-design-system/${filename}-transformed-${crypto.randomUUID()}.json`
+  );
+  const tmpDirPath = path.dirname(newTempFilePath);
+
+  // create temp folder if it doesn't exist
+  try {
+    await fs.access(tmpDirPath);
+  } catch (error) {
+    await fs.mkdir(tmpDirPath, { recursive: true });
+  }
+
+  // read original tokens file
+  const colorTokens = await fs.readFile(originalFilePath, { encoding: 'utf8' });
+  // transform tokens
+  const transformed = JSON.stringify(addBrandColorLightnessTokens(JSON.parse(colorTokens)), null, '  ');
+  // write new file with transformed tokens
+  await fs.writeFile(newTempFilePath, transformed);
+  // return new file name for use in createStyleDictionary
+  return newTempFilePath;
+}
+module.exports.writeTransformedFileBrandColorLightnessTokens = writeTransformedFileBrandColorLightnessTokens;