From 58237503251dea4826de6cbb89e6ccb946f456c5 Mon Sep 17 00:00:00 2001
From: "David Richards, Jr." <dbarichardsjr@gmail.com>
Date: Wed, 9 Oct 2024 16:10:16 -0400
Subject: [PATCH] fix(Colors): enable [token, newAlpha] format (#543)

---
 .../src/mixins/withThemeStyles/utils.js       | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/@lightningjs/ui-components/src/mixins/withThemeStyles/utils.js b/packages/@lightningjs/ui-components/src/mixins/withThemeStyles/utils.js
index 176c3a752..0d77d991d 100644
--- a/packages/@lightningjs/ui-components/src/mixins/withThemeStyles/utils.js
+++ b/packages/@lightningjs/ui-components/src/mixins/withThemeStyles/utils.js
@@ -557,19 +557,30 @@ export const colorParser = (targetObject, styleObj) => {
   // Process style object and remove unnecessary properties
   const processedStyle = JSON.stringify(styleObj, (_, value) => {
     if (-1 < ['tone', 'mode'].indexOf(_)) return value; // Remove any tone/mode or mode/tone properties as they have already been processed
-    if ('string' === typeof value && value.startsWith('theme.')) {
-      // Support theme strings example: theme.radius.md
-      return getValFromObjPath(targetObject, value); // If no theme value exists, the property will be removed from the object
-    } else if (
+
+    // Handle theme strings, e.g., 'theme.radius.md'
+    if (typeof value === 'string' && value.startsWith('theme.')) {
+      // Retrieve the value from the target object using the theme path
+      return getValFromObjPath(targetObject, value); // If no theme value exists, the property will be removed
+    }
+
+    function isValidColor(num) {
+      return num >= 0 && num <= 0xffffffff;
+    }
+
+    // Handle color arrays, e.g., ['#663399', 1] or [255, 0.5]
+    if (
       Array.isArray(value) &&
       value.length === 2 &&
-      typeof value[0] === 'string' &&
-      value[0].substr(0, 1) === '#' &&
+      ((typeof value[0] === 'string' && value[0].startsWith('#')) ||
+        (typeof value[0] === 'number' && isValidColor(value[0]))) &&
       typeof value[1] === 'number'
     ) {
-      // Process value as a color ['#663399', 1]
+      // Return processed hex color or the original value if processing fails
       return getHexColor(value[0], value[1]) || value;
     }
+
+    // Return all other values as-is
     return value;
   });