@muonic/muon 0.0.2-experimental-194-283b2d1.0 → 0.0.2-experimental-196-35ea101.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.2-beta.15](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.14...v0.0.2-beta.15) (2023-05-24)
+
 ### [0.0.2-beta.14](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.13...v0.0.2-beta.14) (2023-05-23)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-experimental-194-283b2d1.0",
+  "version": "0.0.2-experimental-196-35ea101.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/tests/scripts/utils/utils-test.mjs

@@ -6,6 +6,7 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 import esmock from 'esmock';
 import * as utilsLibrary from '../../../scripts/utils/index.mjs';
+import colorTransform from '../../../tokens/utils/transforms/color.js';
 
 testRunner('filterPathToCustomElements default', async (t) => {
   const componentList = await utilsLibrary.filterPathToCustomElements('all');
@@ -324,3 +325,32 @@ testRunner('cleanup on serve', async (t) => {
   utilsLibrary.cleanup(destination);
   t.true(fs.existsSync(destination));
 });
+
+testRunner('create color transform default', async (t) => {
+  const transform = colorTransform.transformer({
+    value: '#ff0000',
+    modify: [
+      {
+        type: 'brighten',
+        amount: 10
+      }
+    ]
+  });
+
+  t.is(transform, '#ffffff');
+});
+
+testRunner('create color transform mix', async (t) => {
+  const transform = colorTransform.transformer({
+    value: '#ff0000',
+    modify: [
+      {
+        type: 'mix',
+        amount: '#000000',
+        ratio: 0.2
+      }
+    ]
+  });
+
+  t.is(transform, '#e40000');
+});

package/tokens/utils/transforms/color.js

@@ -5,14 +5,20 @@ const colorTransform = (token) => {
   let color = chroma(value);
   // iterate over the modify array (see tokens/color.json)
   // and apply each modification in order
-  modify.forEach(({ type, amount }) => {
+  modify.forEach(({ type, amount, ratio = 0.5 }) => {
     // 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);
 
+    // if the modifier type is 'mix', we need to pass in the color to mix with
+    // and the ratio to mix by
+    if (type === 'mix') {
+      color = color.mix(amount, ratio);
+    } else {
+      color = color[type](amount);
+    }
   });
 
   return color.hex();