fix: advanced transitive transform color example chroma (#1260)

.changeset/eleven-otters-eat.md

@@ -0,0 +1,5 @@
+---
+'style-dictionary': patch
+---
+
+Fix transitive color transform advanced example, migrate chroma-js to colorjs.io

docs/src/components/sd-playground.ts

@@ -414,7 +414,7 @@ class SdPlayground extends LitElement {
     const dependencies = await analyzeDependencies(script.value);
     const sdDep = dependencies.find((dep) => dep.package === 'style-dictionary');
     if (sdDep) {
-      sdDep.package = 'style-dictionary@<? version placeholder ?>';
+      sdDep.package = 'style-dictionary';
     }
     const files: Record<string, string> = {};
     files[`tokens.${tokens.lang}`] = tokens.value;

examples/advanced/assets-base64-embed/package.json

@@ -12,6 +12,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.30"
+    "style-dictionary": "^4.0.0"
   }
-}
+}

examples/advanced/create-react-app/package.json

@@ -12,7 +12,7 @@
   },
   "devDependencies": {
     "eslint-config-react-app": "^7.0.1",
-    "style-dictionary": "4.0.0-prerelease.30"
+    "style-dictionary": "^4.0.0"
   },
   "resolutions": {
     "immer": "8.0.1",
@@ -37,4 +37,4 @@
     "not op_mini all"
   ],
   "license": "Apache-2.0"
-}
+}

examples/advanced/create-react-native-app/package.json

@@ -29,7 +29,7 @@
     "eslint-config-react-app": "^7.0.1",
     "jest": "~25.2.6",
     "react-test-renderer": "~16.13.1",
-    "style-dictionary": "4.0.0-prerelease.30"
+    "style-dictionary": "^4.0.0"
   },
   "jest": {
     "preset": "react-native"
@@ -38,4 +38,4 @@
     "extends": "react-app"
   },
   "private": true
-}
+}

examples/advanced/custom-parser/package.json

@@ -10,6 +10,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.30"
+    "style-dictionary": "^4.0.0"
   }
-}
+}

examples/advanced/custom-transforms/package.json

@@ -16,6 +16,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.30"
+    "style-dictionary": "^4.0.0"
   }
-}
+}

examples/advanced/font-face-rules/package.json

@@ -9,6 +9,6 @@
   },
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.30"
+    "style-dictionary": "^4.0.0"
   }
-}
+}

examples/advanced/format-helpers/package.json

@@ -10,6 +10,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.30"
+    "style-dictionary": "^4.0.0"
   }
-}
+}

examples/advanced/matching-build-files/package.json

@@ -17,6 +17,6 @@
   "author": "Kelly Harrop <[email protected]>",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.30"
+    "style-dictionary": "^4.0.0"
   }
-}
+}

examples/advanced/multi-brand-multi-platform/package.json

@@ -16,6 +16,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.30"
+    "style-dictionary": "^4.0.0"
   }
-}
+}

examples/advanced/node-modules-as-config-and-properties/package.json

@@ -20,7 +20,7 @@
   },
   "homepage": "https://github.com/dbanksdesign/style-dictionary-node#readme",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.30",
+    "style-dictionary": "^4.0.0",
     "tinycolor2": "^1.4.1"
   }
-}
+}

examples/advanced/npm-module/package.json

@@ -17,6 +17,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.30"
+    "style-dictionary": "^4.0.0"
   }
-}
+}

examples/advanced/referencing_aliasing/package.json

@@ -16,6 +16,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.30"
+    "style-dictionary": "^4.0.0"
   }
-}
+}

examples/advanced/s3/package.json

@@ -16,6 +16,6 @@
   "devDependencies": {
     "aws-sdk": "^2.7.21",
     "fs-extra": "^1.0.0",
-    "style-dictionary": "4.0.0-prerelease.30"
+    "style-dictionary": "^4.0.0"
   }
-}
+}

examples/advanced/tokens-deprecation/package.json

@@ -16,6 +16,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.30"
+    "style-dictionary": "^4.0.0"
   }
-}
+}

examples/advanced/transitive-transforms/package.json

@@ -11,7 +11,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "chroma-js": "^2.1.0",
-    "style-dictionary": "4.0.0-prerelease.30"
+    "colorjs.io": "^0.5.2",
+    "style-dictionary": "^4.0.0"
   }
-}
+}

examples/advanced/transitive-transforms/sd.config.js

@@ -1,10 +1,13 @@
 import StyleDictionary from 'style-dictionary';
 import { usesReferences } from 'style-dictionary/utils';
-import chroma from 'chroma-js';
+import Color from 'colorjs.io';
 
 const colorTransform = (token) => {
   const { value, modify = [] } = token;
-  let color = chroma(value);
+
+  // This assumes "hex" format, if you want to support { h, s, l } format you have to do
+  // `new Color('hsl', [value.h, value.s, value.l]);`
+  const color = new Color(value);
 
   // defer until reference is resolved
   if (typeof modify === 'string' && usesReferences(modify)) {
@@ -18,15 +21,22 @@ const colorTransform = (token) => {
     if (usesReferences(type) || usesReferences(amount)) {
       return undefined;
     }
-    // modifier type must match a method name in chromajs
-    // https://gka.github.io/chroma.js/
-    // chroma methods can be chained, so each time we override the color variable
-    // we can still call other chroma methods, similar to
-    // chroma(value).brighten(1).darken(1).hex();
-    color = color[type](amount);
+
+    switch (type) {
+      case 'lighten': {
+        const lightness = color.hsl.l;
+        const difference = 100 - lightness;
+        const newLightness = Math.min(100, lightness + difference * amount);
+        color.set('hsl.l', newLightness);
+        break;
+      }
+      case 'transparentize':
+        color.alpha = Math.max(0, Math.min(1, Number(amount)));
+        break;
+    }
   });
 
-  return color.hex();
+  return color.to('srgb').toString({ format: 'hex' });
 };
 
 export default {
@@ -36,21 +46,24 @@ export default {
 
   // I am directly defining transforms here
   // This would work if you were to call StyleDictionary.registerTransform() as well
-  transform: {
-    colorTransform: {
-      type: `value`,
-      // only transforms that have transitive: true will be applied to tokens
-      // that alias/reference other tokens
-      transitive: true,
-      filter: (token) => token.attributes.category === 'color' && token.modify,
-      transform: colorTransform,
-    },
+  hooks: {
+    transforms: {
+      colorTransform: {
+        type: `value`,
+        // only transforms that have transitive: true will be applied to tokens
+        // that alias/reference other tokens
+        transitive: true,
+        filter: (token) => token.attributes.category === 'color' && token.modify,
+        transform: colorTransform,
+      },
 
-    // For backwards compatibility, all built-in transforms are not transitive
-    // by default. This will make the 'color/css' transform transitive
-    'color/css': Object.assign({}, StyleDictionary.transform[`color/css`], {
-      transitive: true,
-    }),
+      // For backwards compatibility, all built-in transforms are not transitive
+      // by default. This will make the 'color/css' transform transitive
+      'color/css': {
+        ...StyleDictionary.hooks.transforms[`color/css`],
+        transitive: true,
+      },
+    },
   },
 
   platforms: {

examples/advanced/transitive-transforms/tokens/color/core.json5

@@ -6,10 +6,6 @@
 
       red: {
         '100': {
-          // hue, saturation, and lightness are defined in
-          // tokens/hue.json5, tokens/saturation.json5, and tokens/lightness.json5
-          // The {h, s, l} object structure conforms to the input structure for
-          // chromajs: https://gka.github.io/chroma.js/#chroma
           value: { h: '{hue.red}', s: '{saturation.7}', l: '{lightness.7}' },
           type: 'color',
         },

examples/advanced/transitive-transforms/tokens/color/font.json5

@@ -1,15 +1,13 @@
 {
   color: {
     font: {
-      primary: { value: '{color.core.black.value}', type: 'color' },
+      primary: { value: '{color.core.black}', type: 'color' },
       secondary: {
-        value: '{color.font.primary.value}',
+        value: '{color.font.primary}',
         modify: [
           {
-            type: 'brighten',
-            // See https://gka.github.io/chroma.js/#color-brighten
-            // for definition of brighten
-            amount: 1,
+            type: 'lighten',
+            amount: 0.2,
           },
         ],
         type: 'color',
@@ -20,10 +18,10 @@
         value: '{color.font.secondary}',
         modify: [
           {
-            // this will brighten the secondary value, which is a brightened version
+            // this will lighten the secondary value, which is a lightened version
             // of primary
-            type: 'brighten',
-            amount: 1,
+            type: 'lighten',
+            amount: 0.2,
           },
         ],
         type: 'color',

examples/advanced/transitive-transforms/tokens/color/overlay.json5

@@ -2,10 +2,10 @@
   color: {
     overlay: {
       primary: {
-        value: '{color.core.white.value}',
+        value: '{color.core.white}',
         modify: [
           {
-            type: 'alpha',
+            type: 'transparentize',
             // You can access other parts of your style dictionary in here too:
             amount: '{alpha.1}',
           },
@@ -14,10 +14,10 @@
       },
 
       secondary: {
-        value: '{color.core.white.value}',
+        value: '{color.core.white}',
         modify: [
           {
-            type: 'alpha',
+            type: 'transparentize',
             // You can access other parts of your style dictionary in here too:
             amount: '{alpha.2}',
           },

examples/advanced/variables-in-outputs/package.json

@@ -11,6 +11,6 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.30"
+    "style-dictionary": "^4.0.0"
   }
-}
+}

examples/advanced/yaml-tokens/package.json

@@ -10,7 +10,7 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.30",
+    "style-dictionary": "^4.0.0",
     "yaml": "^1.10.0"
   }
-}
+}

scripts/inject-version.js

@@ -9,14 +9,14 @@ const packageJSONs = globSync('./examples/*/*/package.json', { fs });
 packageJSONs.forEach(function (filePath) {
   let pkg = JSON.parse(fs.readFileSync(filePath, 'utf-8'));
   if (pkg.devDependencies) {
-    pkg.devDependencies[name] = version;
+    pkg.devDependencies[name] = `^${version}`;
     fs.writeFileSync(filePath, JSON.stringify(pkg, null, 2));
   }
   execSync(`git add ${filePath}`);
 });
 
 // version in lib file
-const paths = ['lib/StyleDictionary.js', 'docs/src/components/sd-playground.ts'];
+const paths = ['lib/StyleDictionary.js'];
 paths.forEach((p) => {
   const indexContent = fs.readFileSync(p, 'utf-8');
   const newIndexContent = indexContent.replace('<? version placeholder ?>', version);