@trops/dash-core 0.1.568 → 0.1.569

package/dist/index.js

@@ -28898,6 +28898,29 @@ function classFor(prefix, type, shade, channelValue) {
   }
   return "".concat(h).concat(prefix, "-").concat(channelValue, "-").concat(shade);
 }
+
+/**
+ * CSS color value (hex literal or `var(...)` reference) for the same
+ * (type, shade, channelValue) tuple `classFor` resolves to a Tailwind
+ * className. Inline-style consumers read these via
+ * `currentTheme.cssValue[tokenName]` — see PRD US-007.
+ *
+ * Named channels look up the hex from TAILWIND_PALETTE. Hex channels
+ * produce a `var(--{type}-{shade})` reference that resolves against
+ * the CSS custom properties ThemePreviewProvider writes to :root.
+ *
+ * Returns null for unknown named-color families or shades — caller
+ * falls back to className-only reactivity for that token.
+ */
+function cssValueFor(type, shade, channelValue) {
+  if (DashReact.isHexColor(channelValue)) {
+    return "var(--".concat(type, "-").concat(shade, ")");
+  }
+  var family = DashReact.TAILWIND_PALETTE && DashReact.TAILWIND_PALETTE[channelValue];
+  if (!family) return null;
+  var hex = family[shade] || family[String(shade)];
+  return hex || null;
+}
 function gradientFor(direction, type, fromShade, viaShade, toShade, channelValue) {
   if (DashReact.isHexColor(channelValue)) {
     return "bg-gradient-to-".concat(direction, " from-[var(--").concat(type, "-").concat(fromShade, ")] via-[var(--").concat(type, "-").concat(viaShade, ")] to-[var(--").concat(type, "-").concat(toShade, ")]");
@@ -28960,17 +28983,26 @@ var ThemeModel = function ThemeModel() {
         if (variant in theme === false) {
           theme[variant] = {};
         }
+        if (!theme[variant].cssValue) {
+          theme[variant].cssValue = {};
+        }
         Object.keys(variants[variant]).forEach(function (shade) {
           var numShade = variants[variant][shade];
           var hoverShade = getNextLevel(numShade);
           var textShade = invert(numShade);
           theme[variant]["bg-".concat(type, "-").concat(shade)] = classFor("bg", type, numShade, channelValue);
+          theme[variant].cssValue["bg-".concat(type, "-").concat(shade)] = cssValueFor(type, numShade, channelValue);
           theme[variant]["hover-bg-".concat(type, "-").concat(shade)] = classFor("bg", type, hoverShade, channelValue, true);
+          theme[variant].cssValue["hover-bg-".concat(type, "-").concat(shade)] = cssValueFor(type, hoverShade, channelValue);
           theme[variant]["hover-border-".concat(type, "-").concat(shade)] = classFor("border", type, hoverShade, channelValue, true);
+          theme[variant].cssValue["hover-border-".concat(type, "-").concat(shade)] = cssValueFor(type, hoverShade, channelValue);
           theme[variant]["border-".concat(type, "-").concat(shade)] = classFor("border", type, numShade, channelValue);
+          theme[variant].cssValue["border-".concat(type, "-").concat(shade)] = cssValueFor(type, numShade, channelValue);
           // we should be "flipping" these so dark text on light and light on dark...
           theme[variant]["text-".concat(type, "-").concat(shade)] = classFor("text", type, textShade, channelValue);
+          theme[variant].cssValue["text-".concat(type, "-").concat(shade)] = cssValueFor(type, textShade, channelValue);
           theme[variant]["hover-text-".concat(type, "-").concat(shade)] = classFor("text", type, textShade, channelValue, true);
+          theme[variant].cssValue["hover-text-".concat(type, "-").concat(shade)] = cssValueFor(type, textShade, channelValue);
         });
       });
     });
@@ -29037,7 +29069,9 @@ var ThemeModel = function ThemeModel() {
     DashReact.colorTypes.forEach(function (type) {
       var channelValue = theme[type];
       theme["dark"]["bg-".concat(type, "-darkest")] = classFor("bg", type, 950, channelValue);
+      theme["dark"].cssValue["bg-".concat(type, "-darkest")] = cssValueFor(type, 950, channelValue);
       theme["light"]["bg-".concat(type, "-darkest")] = classFor("bg", type, 50, channelValue);
+      theme["light"].cssValue["bg-".concat(type, "-darkest")] = cssValueFor(type, 50, channelValue);
     });
 
     // Accumulate CSS custom properties for any hex-color channels.
@@ -29079,6 +29113,17 @@ var ThemeModel = function ThemeModel() {
     theme["light"]["hover-border-none"] = "hover:border-transparent";
     theme["light"]["hover-bg-none"] = "hover:bg-transparent";
     theme["light"]["hover-text-none"] = "hover:text-transparent";
+
+    // Mirror the transparent tokens into cssValue so inline-style
+    // consumers can read borderless/transparent surfaces from the
+    // same map as colored ones.
+    ["dark", "light"].forEach(function (variant) {
+      theme[variant].cssValue["bg-none"] = "transparent";
+      theme[variant].cssValue["border-none"] = "transparent";
+      theme[variant].cssValue["hover-bg-none"] = "transparent";
+      theme[variant].cssValue["hover-border-none"] = "transparent";
+      theme[variant].cssValue["hover-text-none"] = "transparent";
+    });
     return theme;
   } catch (e) {
     return {};