@rpg-engine/long-bow 0.8.12 → 0.8.14

package/dist/long-bow.esm.js

@@ -585,6 +585,14 @@ var ButtonContainer = /*#__PURE__*/styled.button.withConfig({
   componentId: "sc-obzd3o-0"
 })(["height:45px;font-size:", ";"], uiFonts.size.small);
 
+var toUppercaseHexColor = function toUppercaseHexColor(color) {
+  if (!color) return undefined;
+  // Check if it's a valid hex color
+  var hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+  if (!hexRegex.test(color)) return color;
+  return color.toUpperCase();
+};
+
 var SpriteFromAtlas = function SpriteFromAtlas(_ref) {
   var _atlasJSON$frames, _atlasJSON$frames2;
   var atlasJSON = _ref.atlasJSON,
@@ -614,6 +622,9 @@ var SpriteFromAtlas = function SpriteFromAtlas(_ref) {
     console.error("SpriteFromAtlas: Could not find sprite with key " + spriteKey + " in atlasJSON.");
     return null;
   }
+  var normalizedTintColor = toUppercaseHexColor(tintColor);
+  // For white tint, we'll use a very light gray instead
+  var effectiveTintColor = normalizedTintColor === '#FFFFFF' ? '#EEEEEE' : normalizedTintColor;
   return React.createElement(Container$1, {
     width: width,
     height: height,
@@ -630,7 +641,7 @@ var SpriteFromAtlas = function SpriteFromAtlas(_ref) {
     style: imgStyle,
     centered: centered,
     borderRadius: borderRadius,
-    tintColor: tintColor
+    tintColor: effectiveTintColor
   }));
 };
 var Container$1 = /*#__PURE__*/styled.div.withConfig({
@@ -646,7 +657,7 @@ var Container$1 = /*#__PURE__*/styled.div.withConfig({
 var ImgSprite = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpriteFromAtlas__ImgSprite",
   componentId: "sc-1lpani8-1"
-})(["width:", "px;height:", "px;background-image:url(", ");background-position:-", "px -", "px;transform:scale(", ");position:relative;top:", ";left:", ";filter:", ";opacity:", ";border-radius:", ";overflow:hidden;"], function (props) {
+})(["width:", "px;height:", "px;background-image:url(", ");background-position:-", "px -", "px;transform:scale(", ");position:relative;top:", ";left:", ";opacity:", ";border-radius:", ";overflow:hidden;", " ", ""], function (props) {
   return props.frame.w;
 }, function (props) {
   return props.frame.h;
@@ -662,15 +673,14 @@ var ImgSprite = /*#__PURE__*/styled.div.withConfig({
   return props.centered ? '0' : '8px';
 }, function (props) {
   return props.centered ? '0' : '8px';
-}, function (props) {
-  var filters = [];
-  if (props.grayScale) filters.push('grayscale(100%)');
-  if (props.tintColor) filters.push("brightness(0.8) contrast(1.2) sepia(100%) hue-rotate(" + (props.tintColor === '#FFD700' ? '40deg' : '210deg') + ") saturate(400%)");
-  return filters.length ? filters.join(' ') : 'none';
 }, function (props) {
   return props.opacity;
 }, function (props) {
   return props.borderRadius || '0';
+}, function (props) {
+  return props.grayScale && css(["filter:grayscale(100%);"]);
+}, function (props) {
+  return props.tintColor && css(["&::before{content:'';position:absolute;top:0;left:0;width:", "px;height:", "px;background-color:", ";mix-blend-mode:multiply;opacity:0.6;pointer-events:none;-webkit-mask-image:url(", ");-webkit-mask-position:-", "px -", "px;mask-image:url(", ");mask-position:-", "px -", "px;}&::after{content:'';position:absolute;top:0;left:0;width:", "px;height:", "px;background-color:", ";mix-blend-mode:soft-light;opacity:0.6;pointer-events:none;-webkit-mask-image:url(", ");-webkit-mask-position:-", "px -", "px;mask-image:url(", ");mask-position:-", "px -", "px;}"], props.frame.w, props.frame.h, props.tintColor, props.atlasIMG, props.frame.x, props.frame.y, props.atlasIMG, props.frame.x, props.frame.y, props.frame.w, props.frame.h, props.tintColor, props.atlasIMG, props.frame.x, props.frame.y, props.atlasIMG, props.frame.x, props.frame.y);
 });
 
 var frames = {