Convert OKLCH to HEX for React Native

Author: johanekhager

formats/reactColorFormat.js

@@ -2,33 +2,81 @@
 
 const _ = require('lodash');
 const { fileHeader } = require('style-dictionary/lib/common/formatHelpers');
-const Color = require('tinycolor2')
+const Color = require('colorjs.io').default;
 
-const hexRegex = /#[0-9A-Fa-f]{6}\b/;
-const rgx = /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/;
+/**
+ * Convert OKLCH color values to hex/rgba for React Native compatibility.
+ */
+const oklchToHex = (oklchString) => {
+  try {
+    const color = new Color(oklchString);
+    return color.to('srgb').toString({ format: 'hex' });
+  } catch (e) {
+    return oklchString; // Return original if conversion fails
+  }
+};
+
+const colorToRgba = (colorString, alpha) => {
+  try {
+    const color = new Color(colorString);
+    const rgb = color.to('srgb');
+    const r = Math.round(Math.max(0, Math.min(255, rgb.r * 255)));
+    const g = Math.round(Math.max(0, Math.min(255, rgb.g * 255)));
+    const b = Math.round(Math.max(0, Math.min(255, rgb.b * 255)));
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  } catch (e) {
+    return colorString;
+  }
+};
+
+/**
+ * Convert any OKLCH value (including relative color syntax) to React Native compatible format
+ */
+const convertToReactNative = (value) => {
+  if (typeof value !== 'string') return value;
+
+  // Handle linear-gradient - convert oklch colors inside but keep as CSS string
+  if (value.includes('linear-gradient')) {
+    let converted = value;
+    // Convert oklch(from ... l c h / alpha) to rgba
+    converted = converted.replace(/oklch\(from\s+(.+?)\s+l\s+c\s+h\s*\/\s*([\d.]+)\)/g, (match, baseColor, alpha) => {
+      return colorToRgba(baseColor, parseFloat(alpha));
+    });
+    // Convert simple oklch() to hex
+    converted = converted.replace(/oklch\([^)]+\)/g, (match) => oklchToHex(match));
+    return converted;
+  }
 
-const reactColorFormat= function ({
+  // Handle relative color syntax: oklch(from <color> l c h / <alpha>)
+  const relativeMatch = value.match(/oklch\(from\s+(.+?)\s+l\s+c\s+h\s*\/\s*([\d.]+)\)/);
+  if (relativeMatch) {
+    const baseColor = relativeMatch[1];
+    const alpha = parseFloat(relativeMatch[2]);
+    return colorToRgba(baseColor, alpha);
+  }
+
+  // Handle simple oklch values
+  if (value.startsWith('oklch(')) {
+    return oklchToHex(value);
+  }
+
+  return value;
+};
+
+const reactColorFormat = function ({
   dictionary: { allTokens },
   options: { theme },
   file,
 }) {
   const colors = {};
-  
-  const toReactColor = (value) => {
-    while (value.match(/rgba\(\#/)) {
-      let c = Color(value.match(hexRegex)[0]).toRgbString();
-      value = value.replace(hexRegex, c).replace(rgx, '$1,$2,$3');
-    }
-    return value;
-  };
-  
+
   allTokens.forEach((token) => {
     const { path, value } = token;
 
     _.setWith(
       colors,
-      path.slice(1).map(a => _.camelCase(a)).join('.'),
-      toReactColor(value),
+      path.slice(1).map((a) => _.camelCase(a)).join('.'),
+      convertToReactNative(value),
       Object
     );
   });

package.json

@@ -14,6 +14,7 @@
     "build": "yarn build-transform && yarn build-styledictionary"
   },
   "devDependencies": {
+    "colorjs.io": "^0.5.2",
     "lodash": "^4.17.21",
     "style-dictionary": "^3.7.0",
     "typescript": "^4.6.3"

style-dictionary.build.js

@@ -150,8 +150,6 @@ const themeConfig = (theme) => {
         transforms: [
           'attribute/cti',
           'name/cti/kebab',
-          'color/rgb',
-          'css/duplicate-rgb',
         ],
         buildPath: `src/output/`,
         files: [
@@ -176,7 +174,6 @@ const colorsSpectrumCssVarsConfig = {
         transforms: [
           'attribute/cti',
           'name/cti/kebab',
-          'color/hex',
         ],
         buildPath: `src/output/`,
         files: [