feat: adding color/hsl and color/hsl-4 transforms (#383)

Only difference between the two is hsl-4 uses the new hsl syntax (CSS color module level 4 color spec syntax). Both transforms handle colors with alpha transparency.
amzn · Sep 28, 2020 · 7f6a8f4 · 7f6a8f4
1 parent e107c0b
commit 7f6a8f4
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 0 deletions.
diff --git a/__tests__/common/transforms.test.js b/__tests__/common/transforms.test.js
@@ -325,6 +325,38 @@ describe('common', () => {
       });
     });
 
+    describe('color/hsl-4', () => {
+      it('should handle normal colors', () => {
+        var value = transforms["color/hsl-4"].transformer({
+          value: "#009688"
+        });
+        expect(value).toBe("hsl(174 100% 29%)");
+      });
+
+      it('should handle colors with transparency', () => {
+        var value = transforms["color/hsl-4"].transformer({
+          value: "#00968899"
+        });
+        expect(value).toBe("hsl(174 100% 29% / 0.6)");
+      });
+    });
+
+    describe('color/hsl', () => {
+      it('should handle normal colors', () => {
+        var value = transforms["color/hsl"].transformer({
+          value: "#009688"
+        });
+        expect(value).toBe("hsl(174, 100%, 29%)");
+      });
+
+      it('should handle colors with transparency', () => {
+        var value = transforms["color/hsl"].transformer({
+          value: "#00968899"
+        });
+        expect(value).toBe("hsla(174, 100%, 29%, 0.6)");
+      });
+    });
+
     describe('color/UIColor', () => {
       it('should handle normal colors', () => {
         var value = transforms["color/UIColor"].transformer({

diff --git a/lib/common/transforms.js b/lib/common/transforms.js
@@ -298,6 +298,53 @@ module.exports = {
     }
   },
 
+    /**
+   * Transforms the value into an HSL string or HSLA if alpha is present. Better browser support than color/hsl-4
+   *
+   * ```js
+   * // Matches: prop.attributes.category === 'color'
+   * // Returns:
+   * "hsl(174, 100%, 29%)"
+   * "hsl(174, 100%, 29%, .5)"
+   * ```
+   *
+   * @memberof Transforms
+   */
+  'color/hsl': {
+    type: 'value',
+    matcher: isColor,
+    transformer: function (prop) {
+      return Color(prop.value).toHslString();
+    }
+  },
+
+    /**
+   * Transforms the value into an HSL string, using fourth argument if alpha is present.
+   *
+   * ```js
+   * // Matches: prop.attributes.category === 'color'
+   * // Returns:
+   * "hsl(174 100% 29%)"
+   * "hsl(174 100% 29% / .5)"
+   * ```
+   *
+   * @memberof Transforms
+   */
+  'color/hsl-4': {
+    type: 'value',
+    matcher: isColor,
+    transformer: function (prop) {
+      var color = Color(prop.value);
+      var o = color.toHsl()
+      var vals = `${Math.round(o.h)} ${Math.round(o.s * 100)}% ${Math.round(o.l * 100)}%`
+      if (color.getAlpha() === 1) {
+        return `hsl(${vals})`
+      } else {
+        return `hsl(${vals} / ${o.a})`
+      }
+    }
+  },
+
   /**
    * Transforms the value into an 6-digit hex string
    *