feat: support rrggbbaa format for hex color tokens, solves #198

README.md

@@ -680,7 +680,7 @@ This only applies to solid colors; gradients will still use RGBA colors.
 
 Hex color support may potentially interfere with element generation and binding to tokens, since RGB(A) is the format that Figma itself uses, so there is a slight possibility of mismatches in the Figmagic binding process.
 
-_Note that hex colors will not use any alpha/transparency!_
+Starting with version `4.5.13`, hex values use the [#rrggbbaa format](https://caniuse.com/css-rrggbbaa).
 
 ---
 

__tests__/entities/Token/logic/makeColorTokens.test.ts

@@ -73,50 +73,50 @@ describe('Success cases', () => {
     );
   });
 
-  test('It should return a complete object when passing in valid input (using opacity) and using HEX colors', () => {
+  test('It should return a complete object when passing in valid input (using opacity) and using hex colors', () => {
     expect(makeColorTokens(colorFrameOpacity, 'hex')).toEqual(
       expect.objectContaining({
-        black: '#333333',
-        blue1: '#2f80ed',
-        blue2: '#2d9cdb',
-        blue3: '#56ccf2',
-        gray1: '#4f4f4f',
-        gray2: '#828282',
-        gray3: '#bdbdbd',
-        gray4: '#e0e0e0',
-        gray5: '#f2f2f2',
-        green1: '#219653',
-        green2: '#27ae60',
-        green3: '#a1dfbb',
-        neon: '#e4ffc1',
-        orange: '#f2994a',
-        red: '#eb5757',
-        white: '#ffffff',
-        yellow: '#f2c94c'
+        black: '#333333ff',
+        blue1: '#2f80edff',
+        blue2: '#2d9cdbff',
+        blue3: '#56ccf2ff',
+        gray1: '#4f4f4fff',
+        gray2: '#828282ff',
+        gray3: '#bdbdbdff',
+        gray4: '#e0e0e0ff',
+        gray5: '#f2f2f2ff',
+        green1: '#219653ff',
+        green2: '#27ae60ff',
+        green3: '#6fcf97a6',
+        neon: '#e4ffc1ff',
+        orange: '#f2994aff',
+        red: '#eb5757ff',
+        white: '#ffffffff',
+        yellow: '#f2c94cff'
       })
     );
   });
 
-  test('It should return a complete object when passing in valid input (using alpha channel) and using HEX colors', () => {
+  test('It should return a complete object when passing in valid input (using alpha channel) and using hex colors', () => {
     expect(makeColorTokens(colorFrame, 'hex')).toEqual(
       expect.objectContaining({
-        black: '#333333',
-        blue1: '#2f80ed',
-        blue2: '#2d9cdb',
-        blue3: '#56ccf2',
-        gray1: '#4f4f4f',
-        gray2: '#828282',
-        gray3: '#bdbdbd',
-        gray4: '#e0e0e0',
-        gray5: '#f2f2f2',
-        green1: '#219653',
-        green2: '#27ae60',
-        green3: '#a1dfbb',
-        neon: '#e4ffc1',
-        orange: '#f2994a',
-        red: '#eb5757',
-        white: '#ffffff',
-        yellow: '#f2c94c'
+        black: '#333333ff',
+        blue1: '#2f80edff',
+        blue2: '#2d9cdbff',
+        blue3: '#56ccf2ff',
+        gray1: '#4f4f4fff',
+        gray2: '#828282ff',
+        gray3: '#bdbdbdff',
+        gray4: '#e0e0e0ff',
+        gray5: '#f2f2f2ff',
+        green1: '#219653ff',
+        green2: '#27ae60ff',
+        green3: '#6fcf97a6',
+        neon: '#e4ffc1ff',
+        orange: '#f2994aff',
+        red: '#eb5757ff',
+        white: '#ffffffff',
+        yellow: '#f2c94cff'
       })
     );
   });

__tests__/frameworks/string/convertRgbaToHex.test.ts

@@ -11,10 +11,14 @@ describe('Failure cases', () => {
 
 describe('Success cases', () => {
   test('It should correctly return a hexadecimal color value from an RGBA color value', () => {
-    expect(convertRgbaToHex('rgba(7,75,114,1)')).toBe('#074b72');
+    expect(convertRgbaToHex('rgba(7,75,114,1)')).toBe('#074b72ff');
   });
 
   test('It should correctly return a hexadecimal color value from an RGB color value, defaulting to alpha 1', () => {
-    expect(convertRgbaToHex('rgba(7,75,114)')).toBe('#074b72');
+    expect(convertRgbaToHex('rgba(7,75,114)')).toBe('#074b72ff');
+  });
+
+  test('It should correctly return a hexadecimal color value from an RGB color value with transparency', () => {
+    expect(convertRgbaToHex('rgba(7,75,114,0.33)')).toBe('#074b7254');
   });
 });

bin/frameworks/string/convertRgbaToHex.ts

@@ -1,8 +1,7 @@
 import { ErrorConvertRgbaToHex } from '../../frameworks/errors/errors';
 
 /**
- * @description Convert RGBA color to (non-alpha) hex color.
- * @see https://stackoverflow.com/questions/15898740/how-to-convert-rgba-to-a-transparency-adjusted-hex
+ * @description Convert RGBA color to 8-digit hex color.
  */
 export function convertRgbaToHex(color: string): string {
   if (!color) throw Error(ErrorConvertRgbaToHex);
@@ -13,15 +12,22 @@ export function convertRgbaToHex(color: string): string {
     .replace(/[\s+]/g, '')
     .split(',');
 
-  const A: number = parseFloat(values[3] || '1');
-  const R: number = Math.floor(A * parseInt(values[0]) + (1 - A) * 255);
-  const G: number = Math.floor(A * parseInt(values[1]) + (1 - A) * 255);
-  const B: number = Math.floor(A * parseInt(values[2]) + (1 - A) * 255);
+  const [r, g, b, a] = values;
 
-  return (
-    '#' +
-    ('0' + R.toString(16)).slice(-2) +
-    ('0' + G.toString(16)).slice(-2) +
-    ('0' + B.toString(16)).slice(-2)
-  );
+  return rgbaToHex(parseInt(r), parseInt(g), parseInt(b), parseFloat(a));
+}
+
+/**
+ * @description Output a 8-digit hex string.
+ * @see https://caniuse.com/css-rrggbbaa
+ * @see https://hashnode.com/post/understanding-rrggbbaa-color-notation-cisvdr52x088fwt53h1drf6m2
+ */
+function rgbaToHex(r: number, g: number, b: number, a: number) {
+  const toHex = (number: number) => {
+    const hex = Math.round(number).toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  };
+
+  const alpha = a >= 0 && a <= 1 ? toHex(a * 255) : 'ff';
+  return '#' + toHex(r) + toHex(g) + toHex(b) + alpha;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "figmagic",
-  "version": "4.5.12",
+  "version": "4.5.13",
   "description": "Figmagic is the missing piece between DevOps and design: Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents.",
   "homepage": "https://www.figmagic.com",
   "repository": {