Fix colorHex to handle alpha values (#1441)

Co-authored-by: jorenbroekema <[email protected]>

.changeset/few-dragons-sleep.md

@@ -0,0 +1,6 @@
+---
+'style-dictionary': patch
+---
+
+- `'color/hex'` (`colorHex` enum) built-in transform can now handle alpha channels properly by outputting hex8 format if needed. This also affects the transformGroups `less` and `js` which apply this transform.
+- `'color/hex8'` (`colorHex8` enum) built-in transform is now deprecated, use `'color/hex'` (`colorHex` enum) instead.

__tests__/common/transforms.test.js

@@ -271,7 +271,15 @@ describe('common', () => {
           {},
           {},
         );
-        expect(value).to.equal('#aaaaaa');
+        const value2 = transforms[colorHex].transform(
+          {
+            value: '#aaaaaaff',
+          },
+          {},
+          {},
+        );
+        expect(value).to.equal('#aaaaaaaa');
+        expect(value2).to.equal('#aaaaaa');
       });
 
       it('should handle rgb colors', () => {
@@ -285,6 +293,25 @@ describe('common', () => {
         expect(value).to.equal('#aaaaaa');
       });
 
+      it('should handle rgba colors', () => {
+        const value = transforms[colorHex].transform(
+          {
+            value: 'rgba(170,170,170,0.5)',
+          },
+          {},
+          {},
+        );
+        const value2 = transforms[colorHex].transform(
+          {
+            value: 'rgba(170,170,170,1.0)',
+          },
+          {},
+          {},
+        );
+        expect(value).to.equal('#aaaaaa80');
+        expect(value2).to.equal('#aaaaaa');
+      });
+
       it('should handle rgb (object) colors', () => {
         const value = transforms[colorHex].transform(
           {
@@ -297,18 +324,69 @@ describe('common', () => {
           {},
           {},
         );
+        expect(value).to.equal('#aaaaaa');
+      });
+
+      it('should handle rgba (object) colors', () => {
+        const value = transforms[colorHex].transform(
+          {
+            value: {
+              r: '170',
+              g: '170',
+              b: '170',
+              a: '0.5',
+            },
+          },
+          {},
+          {},
+        );
         const value2 = transforms[colorHex].transform(
           {
-            value: 'rgb(170,170,170)',
+            value: {
+              r: '170',
+              g: '170',
+              b: '170',
+              a: '1.0',
+            },
           },
           {},
           {},
         );
-        expect(value).to.equal('#aaaaaa');
+        expect(value).to.equal('#aaaaaa80');
         expect(value2).to.equal('#aaaaaa');
       });
 
       it('should handle hsl colors', () => {
+        const value = transforms[colorHex].transform(
+          {
+            value: 'hsl(0,0,0.5)',
+          },
+          {},
+          {},
+        );
+        expect(value).to.equal('#808080');
+      });
+
+      it('should handle hsla colors', () => {
+        const value = transforms[colorHex].transform(
+          {
+            value: 'hsla(0,0,0.5,0.5)',
+          },
+          {},
+          {},
+        );
+        const value2 = transforms[colorHex].transform(
+          {
+            value: 'hsla(0,0,0.5,1.0)',
+          },
+          {},
+          {},
+        );
+        expect(value).to.equal('#80808080');
+        expect(value2).to.equal('#808080');
+      });
+
+      it('should handle hsl (object) colors', () => {
         const value = transforms[colorHex].transform(
           {
             value: {
@@ -320,14 +398,35 @@ describe('common', () => {
           {},
           {},
         );
+        expect(value).to.equal('#808080');
+      });
+
+      it('should handle hsla (object) colors', () => {
+        const value = transforms[colorHex].transform(
+          {
+            value: {
+              h: '0',
+              s: '0',
+              l: '0.5',
+              a: '0.5',
+            },
+          },
+          {},
+          {},
+        );
         const value2 = transforms[colorHex].transform(
           {
-            value: 'hsl(0,0,0.5)',
+            value: {
+              h: '0',
+              s: '0',
+              l: '0.5',
+              a: '1.0',
+            },
           },
           {},
           {},
         );
-        expect(value).to.equal('#808080');
+        expect(value).to.equal('#80808080');
         expect(value2).to.equal('#808080');
       });
     });

docs/src/content/docs/reference/Hooks/Transforms/predefined.md → docs/src/content/docs/reference/Hooks/Transforms/predefined.mdx

@@ -2,6 +2,8 @@
 title: Built-in transforms
 ---
 
+import { Badge } from '@astrojs/starlight/components';
+
 :::tip
 You can find the source code of the built-in transforms here:
 [lib/common/transforms.js](https://github.com/amzn/style-dictionary/blob/main/lib/common/transforms.js)
@@ -179,7 +181,9 @@ Transforms the value into an 6-digit hex string
 
 ---
 
-### color/hex8
+### color/hex8 <Badge text="Deprecated" variant="danger" />
+
+> Use color/hex instead, which also supports hex8.
 
 Transforms the value into an 8-digit hex string
 

docs/src/content/docs/reference/enums.md

@@ -238,7 +238,6 @@ export const transforms = {
   colorHsl: 'color/hsl',
   colorHsl4: 'color/hsl-4',
   colorHex: 'color/hex',
-  colorHex8: 'color/hex8',
   colorHex8android: 'color/hex8android',
   colorComposeColor: 'color/composeColor',
   colorUIColor: 'color/UIColor',
@@ -281,6 +280,10 @@ export const transforms = {
   contentFlutterLiteral: 'content/flutter/literal',
   assetFlutterLiteral: 'asset/flutter/literal',
   sizeFlutterRemToDouble: 'size/flutter/remToDouble',
+  /**
+   * @deprecated use 'color/hex instead
+   */
+  colorHex8: 'color/hex8',
 };
 ```
 

lib/common/transforms.js

@@ -460,12 +460,12 @@ export default {
   },
 
   /**
-   * Transforms the value into an 6-digit hex string
+   * Transforms the value into a 6-digit (if alpha is undefined or 1.0) or 8-digit hex string
    *
    * ```js
    * // Matches: token.type === 'color'
    * // Returns:
-   * "#009688"
+   * "#009688DE"
    * ```
    *
    * @memberof Transforms
@@ -474,7 +474,12 @@ export default {
     type: value,
     filter: isColor,
     transform: function (token, _, options) {
-      return Color(options.usesDtcg ? token.$value : token.value).toHexString();
+      const color = Color(options.usesDtcg ? token.$value : token.value);
+      if (color.getAlpha() === 1) {
+        return color.toHexString();
+      } else {
+        return color.toHex8String();
+      }
     },
   },
 
@@ -486,7 +491,7 @@ export default {
    * // Returns:
    * "#009688ff"
    * ```
-   *
+   * @deprecated use colorHex ('color/hex') instead, which supports hex8 now.
    * @memberof Transforms
    */
   [transforms.colorHex8]: {

lib/enums/transforms.js

@@ -11,7 +11,6 @@ export const transforms = {
   colorHsl: /** @type {'color/hsl'} */ ('color/hsl'),
   colorHsl4: /** @type {'color/hsl-4'} */ ('color/hsl-4'),
   colorHex: /** @type {'color/hex'} */ ('color/hex'),
-  colorHex8: /** @type {'color/hex8'} */ ('color/hex8'),
   colorHex8android: /** @type {'color/hex8android'} */ ('color/hex8android'),
   colorComposeColor: /** @type {'color/composeColor'} */ ('color/composeColor'),
   colorUIColor: /** @type {'color/UIColor'} */ ('color/UIColor'),
@@ -54,4 +53,8 @@ export const transforms = {
   contentFlutterLiteral: /** @type {'content/flutter/literal'} */ ('content/flutter/literal'),
   assetFlutterLiteral: /** @type {'asset/flutter/literal'} */ ('asset/flutter/literal'),
   sizeFlutterRemToDouble: /** @type {'size/flutter/remToDouble'} */ ('size/flutter/remToDouble'),
+  /**
+   * @deprecated use 'color/hex instead
+   */
+  colorHex8: /** @type {'color/hex8'} */ ('color/hex8'),
 };