From 36185ba44d8dc1c936b031efaf5d930354a204bb Mon Sep 17 00:00:00 2001
From: "David Richards, Jr." <dbarichardsjr@gmail.com>
Date: Fri, 4 Oct 2024 16:40:40 -0400
Subject: [PATCH] fix(Colors): enable [token, newAlpha] format
---
.../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;
});