feat!(cli): output CSS colors with alpha channel

packages/demo/src/styles/colors.css

@@ -1,29 +1,29 @@
 :root {
-  --primary_900: #006e54;
-  --secondary_500: #bf98fe;
-  --secondary_400: #cfb3ff;
-  --neutral_100: #f7f8f9;
-  --neutral_500: #8590a2;
-  --primary_200: #caffe9;
-  --secondary_800: #691fd1;
-  --primary_100: #e9fff7;
-  --secondary_200: #f0e8ff;
-  --neutral_200: #f1f2f4;
-  --neutral_300: #dcdfe4;
-  --neutral_700: #626f86;
-  --neutral_400: #b3b9c4;
-  --neutral_600: #758195;
-  --secondary_600: #9453f9;
-  --primary_300: #9affd9;
-  --primary_400: #5afbc7;
-  --secondary_300: #e4d4ff;
-  --primary_800: #008b69;
-  --neutral_900: #172b4d;
-  --neutral_800: #44546f;
-  --secondary_900: #5b1faa;
-  --primary_700: #00ae7f;
-  --secondary_700: #7d30ed;
-  --primary_500: #31efb8;
-  --secondary_100: #f9f5ff;
-  --primary_600: #00d59a;
+  --primary_900: rgba(0, 110, 84, 1);
+  --secondary_500: rgba(191, 152, 254, 1);
+  --secondary_400: rgba(207, 179, 255, 1);
+  --neutral_100: rgba(247, 248, 249, 1);
+  --neutral_500: rgba(133, 144, 162, 1);
+  --primary_200: rgba(202, 255, 233, 1);
+  --secondary_800: rgba(105, 31, 209, 1);
+  --primary_100: rgba(233, 255, 247, 1);
+  --secondary_200: rgba(240, 232, 255, 1);
+  --neutral_200: rgba(241, 242, 244, 1);
+  --neutral_300: rgba(220, 223, 228, 1);
+  --neutral_700: rgba(98, 111, 134, 1);
+  --neutral_400: rgba(179, 185, 196, 1);
+  --neutral_600: rgba(117, 129, 149, 1);
+  --secondary_600: rgba(148, 83, 249, 1);
+  --primary_300: rgba(154, 255, 217, 1);
+  --primary_400: rgba(90, 251, 199, 1);
+  --secondary_300: rgba(228, 212, 255, 1);
+  --primary_800: rgba(0, 139, 105, 1);
+  --neutral_900: rgba(23, 43, 77, 1);
+  --neutral_800: rgba(68, 84, 111, 1);
+  --secondary_900: rgba(91, 31, 170, 1);
+  --primary_700: rgba(0, 174, 127, 1);
+  --secondary_700: rgba(125, 48, 237, 1);
+  --primary_500: rgba(49, 239, 184, 1);
+  --secondary_100: rgba(249, 245, 255, 1);
+  --primary_600: rgba(0, 213, 154, 1);
 }

packages/penpot-css-export/src/lib/adapters/inbound/colorsToCssVariables.ts

@@ -2,6 +2,17 @@ import { textToCssCustomProperyName } from '../../css/helpers'
 
 import { CSSClassDefinition, PenpotExportFile } from '../../types'
 
+const toRgbaCssValue = (hex: string, alpha: number = 1) => {
+  const channels = hex.match(/\w{2}/g)
+  if (channels === null || channels.length !== 3)
+    throw new Error(
+      'Invalid RGB value provided: requires 8-bit hexadecimal value per channel',
+    )
+
+  const [r, g, b] = channels.map((channelHex) => parseInt(channelHex, 16))
+  return `rgba(${[r, g, b, alpha].join(', ')})`
+}
+
 export const adaptColorsToCssVariables = (
   penpotFile: PenpotExportFile,
 ): CSSClassDefinition => {
@@ -10,10 +21,7 @@ export const adaptColorsToCssVariables = (
   const cssPropsEntries = Object.values(colors).map((color) => {
     const objectClassName = textToCssCustomProperyName(color.name)
 
-    return [
-      objectClassName,
-      color.color, // FIXME Add opacity with rgba()
-    ]
+    return [objectClassName, toRgbaCssValue(color.color, color.opacity)]
   })
 
   return {