@trops/dash-core 0.1.572 → 0.1.573

package/dist/index.js

@@ -35302,24 +35302,20 @@ var ColorTile = function ColorTile(_ref) {
     level: colorLevelName
   }, rest));
 
-  // console.log("Color Model Tile ", c);
-
-  // const stringColor = colorFromTheme === null ? `bg-${colorName}${shade !== null ? `-${shade}` : ''}` : colorFromTheme;
-  // const parts = colorFromTheme !== null ? colorFromTheme.split('-') : null;
-
-  // const derivedShade = parts !== null ? parts[parts.length -1] : null;
-  // const derivedColorName = parts !== null ? parts[parts.length - 2] : null;
-
-  // const stringThemeColorName = '';
-  // const objToSend = {
-  //     colorName: colorName !== null ? colorName : colorFromTheme !== null && derivedColorName,
-  //     shade: shade !== null ? shade : colorFromTheme !== null && derivedShade,
-  //     stringColor,
-  //     ...rest
-  // };
-
+  // If the channel value is a hex (custom-color theme — PRD
+  // arbitrary-color-themes.md), `c.class` becomes `bg-#xxx-500`
+  // which isn't a valid Tailwind class and renders as nothing
+  // (the dark page background bleeds through, looking black).
+  // Use inline style for hex backgrounds; named colors continue
+  // through the className path so existing themes are unchanged.
+  var colorIsHex = DashReact.isHexColor(colorName);
+  var inlineStyle = colorIsHex ? {
+    backgroundColor: colorName
+  } : undefined;
+  var bgClass = colorIsHex ? "" : c["class"];
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "flex flex-col rounded-lg cursor-pointer items-center justify-center border-2 text-xs ".concat(selected === true ? "border-yellow-500" : "border-gray-800", " hover:border-yellow-500 border-gray-800 ").concat(c["class"], " ").concat(width, " ").concat(height),
+    className: "flex flex-col rounded-lg cursor-pointer items-center justify-center border-2 text-xs ".concat(selected === true ? "border-yellow-500" : "border-gray-800", " hover:border-yellow-500 border-gray-800 ").concat(bgClass, " ").concat(width, " ").concat(height),
+    style: inlineStyle,
     onClick: function onClick() {
       return _onClick !== null ? _onClick(_objectSpread$F(_objectSpread$F({}, c), rest)) : null;
     },