@multiplatform.one/theme 7.83.1 → 7.83.2

package/dist/esm/theme/devtools/ColorLineVisualizer.native.js

@@ -0,0 +1,230 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useMemo, useState } from "react";
+import { semanticGroups } from "../colorRules.native.js";
+import { contrastTextFor, cellSize } from "./vizConstants.native.js";
+function readColorsFromElement(el) {
+  var style = getComputedStyle(el);
+  var result = [];
+  var found = false;
+  for (var i = 1; i <= 12; i++) {
+    var color = style.getPropertyValue(`--color${i}`).trim();
+    if (!color) color = style.getPropertyValue(`--color-${i}`).trim();
+    if (color) {
+      found = true;
+      result.push(color);
+    } else {
+      result.push(fallbackGradient()[i - 1]);
+    }
+  }
+  return found ? result : null;
+}
+function useDomThemeColors() {
+  var [colors, setColors] = useState(function () {
+    return fallbackGradient();
+  });
+  useEffect(function () {
+    if (typeof document === "undefined") return;
+    var readColors = function readColors2() {
+      var result = readColorsFromElement(document.documentElement);
+      if (!result && document.body) {
+        result = readColorsFromElement(document.body);
+      }
+      if (!result) {
+        var themed = document.querySelector('[class*="t_"]');
+        if (themed) result = readColorsFromElement(themed);
+      }
+      if (!result) {
+        var root = document.getElementById("root") || document.getElementById("__next");
+        if (root) result = readColorsFromElement(root);
+      }
+      if (result) setColors(result);
+    };
+    readColors();
+    var observer = new MutationObserver(readColors);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "style"]
+    });
+    if (document.body) {
+      observer.observe(document.body, {
+        attributes: true,
+        attributeFilter: ["class", "style"],
+        subtree: true
+      });
+    }
+    return function () {
+      return observer.disconnect();
+    };
+  }, []);
+  return colors;
+}
+function fallbackGradient() {
+  return Array.from({
+    length: 12
+  }, function (_, i) {
+    var t = i / 11;
+    var v = Math.round(240 - t * 200);
+    return `rgb(${v},${v},${v})`;
+  });
+}
+function NumberLineRow(param) {
+  var {
+    colorFor,
+    halfHeight
+  } = param;
+  var h = halfHeight ? Math.round(cellSize / 2) : cellSize;
+  return /* @__PURE__ */_jsx("div", {
+    style: {
+      display: "flex",
+      gap: 0
+    },
+    children: Array.from({
+      length: 12
+    }, function (_, i) {
+      var step = i + 1;
+      var background = colorFor(step);
+      return /* @__PURE__ */_jsx("div", {
+        style: {
+          width: cellSize,
+          height: h,
+          flexShrink: 0,
+          background,
+          color: contrastTextFor(background),
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: halfHeight ? 9 : 11,
+          fontWeight: 700
+        },
+        title: `$color${step}`,
+        children: step
+      }, step);
+    })
+  });
+}
+function SemanticBrackets() {
+  var totalWidth = 12 * cellSize;
+  return /* @__PURE__ */_jsx("div", {
+    style: {
+      position: "relative",
+      height: 24,
+      width: totalWidth,
+      marginBottom: 2
+    },
+    children: semanticGroups.map(function (g) {
+      var leftPx = (g.from - 1) * cellSize;
+      var widthPx = (g.to - g.from + 1) * cellSize;
+      return /* @__PURE__ */_jsxs("div", {
+        style: {
+          position: "absolute",
+          left: leftPx,
+          width: widthPx,
+          bottom: 0,
+          display: "flex",
+          flexDirection: "column"
+        },
+        children: [/* @__PURE__ */_jsx("div", {
+          style: {
+            textAlign: "center",
+            fontSize: 9,
+            fontWeight: 600,
+            color: g.color,
+            lineHeight: 1.2,
+            whiteSpace: "nowrap"
+          },
+          children: g.label
+        }), /* @__PURE__ */_jsx("div", {
+          style: {
+            height: 6,
+            borderLeft: `2px solid ${g.color}`,
+            borderRight: `2px solid ${g.color}`,
+            borderTop: `2px solid ${g.color}`,
+            borderRadius: "3px 3px 0 0"
+          }
+        })]
+      }, g.key);
+    })
+  });
+}
+function createVizStyles(isDark) {
+  var border = isDark ? "#333" : "#ddd";
+  var mutedText = isDark ? "#888" : "#999";
+  var foreground = isDark ? "#e8e8e8" : "#1a1a1a";
+  var cardBackground = isDark ? "#1e1e1e" : "#fafafa";
+  return {
+    container: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 6,
+      padding: "8px 10px",
+      borderRadius: 8,
+      border: `1px solid ${border}`,
+      background: cardBackground,
+      width: "fit-content",
+      fontSize: 11,
+      fontFamily: "system-ui, -apple-system, sans-serif",
+      // Not the host page's tracking, which follows the app's bodyFont knob.
+      letterSpacing: "normal",
+      color: foreground
+    },
+    title: {
+      fontSize: 13,
+      fontWeight: 600,
+      textTransform: "uppercase",
+      letterSpacing: "0.06em",
+      color: mutedText
+    }
+  };
+}
+function ColorLineVisualizer(param) {
+  var {
+    knobs: _knobs,
+    isDark,
+    themeColors: propColors,
+    oppositeThemeColors: propOppositeColors,
+    accentColors: propAccentColors,
+    oppositeAccentColors: propOppositeAccentColors
+  } = param;
+  var domColors = useDomThemeColors();
+  var themeColors = propColors && propColors.length === 12 ? propColors : domColors;
+  var styles = useMemo(function () {
+    return createVizStyles(isDark);
+  }, [isDark]);
+  var toColorFn = function toColorFn2(arr) {
+    return function (step) {
+      return arr[Math.min(11, Math.max(0, step - 1))];
+    };
+  };
+  var colorFor = toColorFn(themeColors);
+  var oppositeColors = propOppositeColors && propOppositeColors.length === 12 ? propOppositeColors : null;
+  var accentColors = propAccentColors && propAccentColors.length === 12 ? propAccentColors : null;
+  var oppositeAccentColors = propOppositeAccentColors && propOppositeAccentColors.length === 12 ? propOppositeAccentColors : null;
+  return /* @__PURE__ */_jsxs("div", {
+    style: styles.container,
+    children: [/* @__PURE__ */_jsx("div", {
+      style: styles.title,
+      children: "Theme"
+    }), /* @__PURE__ */_jsx(SemanticBrackets, {}), /* @__PURE__ */_jsx(NumberLineRow, {
+      colorFor
+    }), oppositeColors && /* @__PURE__ */_jsx(NumberLineRow, {
+      colorFor: toColorFn(oppositeColors),
+      halfHeight: true
+    }), accentColors && /* @__PURE__ */_jsxs(_Fragment, {
+      children: [/* @__PURE__ */_jsx("div", {
+        style: {
+          ...styles.title,
+          fontSize: 11,
+          marginTop: 6
+        },
+        children: "accent"
+      }), /* @__PURE__ */_jsx(NumberLineRow, {
+        colorFor: toColorFn(accentColors)
+      }), oppositeAccentColors && /* @__PURE__ */_jsx(NumberLineRow, {
+        colorFor: toColorFn(oppositeAccentColors),
+        halfHeight: true
+      })]
+    })]
+  });
+}
+export { ColorLineVisualizer };
+//# sourceMappingURL=ColorLineVisualizer.native.js.map

package/dist/esm/theme/devtools/ColorLineVisualizer.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","React","useEffect","useMemo","useState","semanticGroups","contrastTextFor","cellSize","readColorsFromElement","el","style","getComputedStyle","result","found","i","color","getPropertyValue","trim","push","fallbackGradient","useDomThemeColors","colors","setColors","document","readColors","readColors2","documentElement","body","themed","querySelector","root","getElementById","observer","MutationObserver","observe","attributes","attributeFilter","subtree","disconnect","Array","from","length","_","t","v","Math","round","NumberLineRow","param","colorFor","halfHeight","h","display","gap","children","step","background","width","height","flexShrink","alignItems","justifyContent","fontSize","fontWeight","title","SemanticBrackets","totalWidth","position","marginBottom","map","g","leftPx","widthPx","to","left","bottom","flexDirection","textAlign","lineHeight","whiteSpace","label","borderLeft","borderRight","borderTop","borderRadius","key","createVizStyles","isDark","border","mutedText","foreground","cardBackground","container","padding","fontFamily","letterSpacing","textTransform","ColorLineVisualizer","knobs","_knobs","themeColors","propColors","oppositeThemeColors","propOppositeColors","accentColors","propAccentColors","oppositeAccentColors","propOppositeAccentColors","domColors","styles","toColorFn","toColorFn2","arr","min","max","oppositeColors"],"sources":["../../../../src/theme/devtools/ColorLineVisualizer.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}