@multiplatform.one/theme 7.83.1 → 7.83.2

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

@@ -0,0 +1,269 @@
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var ColorLineVisualizer_exports = {};
+__export(ColorLineVisualizer_exports, {
+  ColorLineVisualizer: () => ColorLineVisualizer
+});
+module.exports = __toCommonJS(ColorLineVisualizer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_colorRules = require("../colorRules.native.js");
+var import_vizConstants = require("./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] = (0, import_react.useState)(function () {
+    return fallbackGradient();
+  });
+  (0, import_react.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(import_vizConstants.cellSize / 2) : import_vizConstants.cellSize;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+    style: {
+      display: "flex",
+      gap: 0
+    },
+    children: Array.from({
+      length: 12
+    }, function (_, i) {
+      var step = i + 1;
+      var background = colorFor(step);
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+        style: {
+          width: import_vizConstants.cellSize,
+          height: h,
+          flexShrink: 0,
+          background,
+          color: (0, import_vizConstants.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 * import_vizConstants.cellSize;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+    style: {
+      position: "relative",
+      height: 24,
+      width: totalWidth,
+      marginBottom: 2
+    },
+    children: import_colorRules.semanticGroups.map(function (g) {
+      var leftPx = (g.from - 1) * import_vizConstants.cellSize;
+      var widthPx = (g.to - g.from + 1) * import_vizConstants.cellSize;
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+        style: {
+          position: "absolute",
+          left: leftPx,
+          width: widthPx,
+          bottom: 0,
+          display: "flex",
+          flexDirection: "column"
+        },
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+          style: {
+            textAlign: "center",
+            fontSize: 9,
+            fontWeight: 600,
+            color: g.color,
+            lineHeight: 1.2,
+            whiteSpace: "nowrap"
+          },
+          children: g.label
+        }), /* @__PURE__ */(0, import_jsx_runtime.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 = (0, import_react.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__ */(0, import_jsx_runtime.jsxs)("div", {
+    style: styles.container,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: styles.title,
+      children: "Theme"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(SemanticBrackets, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(NumberLineRow, {
+      colorFor
+    }), oppositeColors && /* @__PURE__ */(0, import_jsx_runtime.jsx)(NumberLineRow, {
+      colorFor: toColorFn(oppositeColors),
+      halfHeight: true
+    }), accentColors && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+        style: {
+          ...styles.title,
+          fontSize: 11,
+          marginTop: 6
+        },
+        children: "accent"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(NumberLineRow, {
+        colorFor: toColorFn(accentColors)
+      }), oppositeAccentColors && /* @__PURE__ */(0, import_jsx_runtime.jsx)(NumberLineRow, {
+        colorFor: toColorFn(oppositeAccentColors),
+        halfHeight: true
+      })]
+    })]
+  });
+}
+//# sourceMappingURL=ColorLineVisualizer.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["to","__toESM","mod","isNodeMode","target","__create","__getProtoOf","__copyProps","__esModule","__defProp","value","enumerable","__toCommonJS","ColorLineVisualizer_exports","__export","ColorLineVisualizer","module","exports","import_jsx_runtime","require","import_react","import_colorRules","import_vizConstants","readColorsFromElement","el","style","getComputedStyle","result","found","i","color","getPropertyValue","trim","push","fallbackGradient","useDomThemeColors","colors","setColors","useState","useEffect","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","cellSize","jsx","display","gap","children","step","background","width","height","flexShrink","contrastTextFor","alignItems","justifyContent","fontSize","fontWeight","title","SemanticBrackets","totalWidth","position","marginBottom","semanticGroups","map","g","leftPx","widthPx","jsxs","left","bottom","flexDirection","textAlign","lineHeight","whiteSpace","label","borderLeft","borderRight","borderTop","borderRadius","key","createVizStyles","isDark","border","mutedText","foreground","cardBackground","container","padding","fontFamily","letterSpacing","textTransform","knobs","_knobs","themeColors","propColors","oppositeThemeColors","propOppositeColors","accentColors","propAccentColors","oppositeAccentColors","propOppositeAccentColors","domColors","styles","useMemo","toColorFn","toColorFn2","arr","min","max"],"sources":["../../../../src/theme/devtools/ColorLineVisualizer.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}