@datalayer/icons-react 1.0.9 → 1.0.10

package/data1/RayIoNameIcon.js

@@ -11,31 +11,44 @@ function _DlIconInverseColormode({
   children
 }) {
   const ref = React.useRef(null);
-  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
   React.useLayoutEffect(() => {
-    if (typeof mode === "string") {
-      setResolved(mode);
-      return;
-    }
     if (typeof document === "undefined") return;
-    let cur = null;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
     let el = ref.current && ref.current.parentElement;
-    while (el) {
-      const m = el.getAttribute && el.getAttribute("data-color-mode");
-      if (m) { cur = m; break; }
+    while (el && (!currentMode || !lightTheme || !darkTheme)) {
+      if (el.getAttribute) {
+        currentMode = currentMode || el.getAttribute("data-color-mode");
+        lightTheme = lightTheme || el.getAttribute("data-light-theme");
+        darkTheme = darkTheme || el.getAttribute("data-dark-theme");
+      }
       el = el.parentElement;
     }
-    if (!cur || cur === "auto") {
-      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    if (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
     }
-    setResolved(cur === "dark" ? "light" : "dark");
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
   }, [mode]);
   return /*#__PURE__*/React.createElement("span", {
     ref: ref,
-    "data-color-mode": resolved || "light",
-    "data-light-theme": "light",
-    "data-dark-theme": "dark",
-    style: { display: "inline-flex", lineHeight: 0 }
+    "data-color-mode": appearance.mode || "light",
+    "data-light-theme": appearance.lightTheme || undefined,
+    "data-dark-theme": appearance.darkTheme || undefined,
+    style: {
+      display: "inline-flex",
+      lineHeight: 0,
+      color: "var(--fgColor-default, var(--color-fg-default, currentColor))"
+    }
   }, children);
 }
 
@@ -50,23 +63,25 @@ function RayIoNameIcon({
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
-    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: "none",
     viewBox: "0 0 60 60",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
   }, props, {
+    "data-datalayer-icon": "",
     style: props && props.color != null ? Object.assign({}, props.style, {
-      "--datalayer-icon-fg": props.color
+      "--datalayer-icon-color": props.color,
+      color: props.color
     }) : props && props.style
-  }), title ? /*#__PURE__*/React.createElement("title", {
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#2a2a2a' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#2a2a2a" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 39%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 95%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 39%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 95%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 39%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M18.262 60h2.043l-3.679-5.343c2.263-.744 3.519-2.481 3.519-5.08 0-3.342-2.263-5.254-6.175-5.254H8V60h1.796v-4.948h4.16c.365 0 .714-.03 1.05-.045zm-8.467-6.686v-7.27h4.16c2.846 0 4.452 1.212 4.452 3.576 0 2.438-1.606 3.694-4.452 3.694zm24.537 2.715l1.752 3.955h1.94L31.02 44.307h-1.855L22.13 59.984h1.897l1.752-3.955zm-.76-1.723h-7.035l3.504-7.955zm11.664.306l5.956-10.304h-1.84l-5.02 8.175-5.08-8.175h-1.854l6.072 10.364v5.313h1.766v-5.371z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#028cf0' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#028cf0" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M24.039 19.703a5.848 5.848 0 011.51-2.66 5.719 5.719 0 014.057-1.68c1.585 0 3.019.641 4.058 1.68a5.846 5.846 0 011.51 2.66H39.4a5.589 5.589 0 01.642-1.548l-7.492-7.492a5.79 5.79 0 01-2.944.812 5.719 5.719 0 01-4.058-1.68 5.719 5.719 0 01-1.68-4.058 5.72 5.72 0 011.68-4.057A5.719 5.719 0 0129.606 0c1.585 0 3.019.642 4.058 1.68a5.719 5.719 0 011.68 4.057 5.738 5.738 0 01-.813 2.945l7.492 7.492a5.79 5.79 0 012.945-.812c1.586 0 3.02.642 4.057 1.68a5.719 5.719 0 011.68 4.057 5.719 5.719 0 01-1.68 4.058 5.719 5.719 0 01-4.058 1.68 5.738 5.738 0 01-2.943-.812l-7.493 7.512c.51.867.812 1.867.812 2.943a5.719 5.719 0 01-1.68 4.058 5.719 5.719 0 01-4.057 1.68 5.719 5.719 0 01-4.058-1.68 5.719 5.719 0 01-1.68-4.058c0-1.586.642-3.02 1.68-4.057a5.719 5.719 0 014.058-1.68 5.738 5.738 0 012.944.812l7.492-7.493a5.589 5.589 0 01-.642-1.547h-4.227a5.846 5.846 0 01-1.51 2.661 5.719 5.719 0 01-4.057 1.68 5.719 5.719 0 01-4.058-1.68 5.848 5.848 0 01-1.51-2.661h-4.227a5.848 5.848 0 01-1.51 2.661 5.719 5.719 0 01-4.058 1.68 5.719 5.719 0 01-4.057-1.68 5.658 5.658 0 01-1.699-4.058 5.72 5.72 0 011.68-4.057 5.719 5.719 0 014.058-1.68c1.585 0 3.019.642 4.058 1.68a5.85 5.85 0 011.51 2.66h4.246v-.019zm3.491 18.853a2.94 2.94 0 002.076.868c.811 0 1.546-.321 2.075-.868a2.94 2.94 0 00.869-2.076c0-.811-.321-1.547-.869-2.076a2.94 2.94 0 00-2.075-.867c-.812 0-1.548.32-2.077.867a2.94 2.94 0 00-.867 2.077c0 .81.32 1.546.867 2.075zm19.514-15.362a2.94 2.94 0 00.867-2.076c0-.812-.32-1.547-.867-2.076a2.94 2.94 0 00-2.077-.868c-.81 0-1.546.321-2.075.868a2.94 2.94 0 00-.868 2.076c0 .812.321 1.547.868 2.076a2.94 2.94 0 002.076.868 3.02 3.02 0 002.076-.868zM31.68 3.66a2.94 2.94 0 00-2.075-.868c-.812 0-1.548.321-2.077.868a2.94 2.94 0 00-.867 2.076c0 .812.32 1.547.867 2.076.53.528 1.265.869 2.077.869a2.86 2.86 0 002.075-.869 2.94 2.94 0 00.869-2.076 3.02 3.02 0 00-.869-2.076zM12.148 19.04a2.94 2.94 0 00-.867 2.077c0 .812.32 1.547.867 2.076.53.528 1.265.868 2.077.868a2.86 2.86 0 002.075-.868c.529-.548.869-1.264.869-2.076s-.321-1.547-.869-2.076c-.547-.528-1.264-.868-2.075-.868-.812 0-1.548.321-2.077.868zm15.381 0a2.94 2.94 0 00-.867 2.077c0 .812.32 1.547.867 2.076.53.528 1.265.868 2.077.868a2.86 2.86 0 002.075-.868 2.94 2.94 0 00.869-2.076 2.86 2.86 0 00-.869-2.076 2.94 2.94 0 00-2.075-.868c-.812 0-1.548.321-2.077.868z"
   }));
   if (!colormode) return _svgEl;

package/data1/ReactJsIcon.js

@@ -11,31 +11,44 @@ function _DlIconInverseColormode({
   children
 }) {
   const ref = React.useRef(null);
-  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
   React.useLayoutEffect(() => {
-    if (typeof mode === "string") {
-      setResolved(mode);
-      return;
-    }
     if (typeof document === "undefined") return;
-    let cur = null;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
     let el = ref.current && ref.current.parentElement;
-    while (el) {
-      const m = el.getAttribute && el.getAttribute("data-color-mode");
-      if (m) { cur = m; break; }
+    while (el && (!currentMode || !lightTheme || !darkTheme)) {
+      if (el.getAttribute) {
+        currentMode = currentMode || el.getAttribute("data-color-mode");
+        lightTheme = lightTheme || el.getAttribute("data-light-theme");
+        darkTheme = darkTheme || el.getAttribute("data-dark-theme");
+      }
       el = el.parentElement;
     }
-    if (!cur || cur === "auto") {
-      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    if (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
     }
-    setResolved(cur === "dark" ? "light" : "dark");
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
   }, [mode]);
   return /*#__PURE__*/React.createElement("span", {
     ref: ref,
-    "data-color-mode": resolved || "light",
-    "data-light-theme": "light",
-    "data-dark-theme": "dark",
-    style: { display: "inline-flex", lineHeight: 0 }
+    "data-color-mode": appearance.mode || "light",
+    "data-light-theme": appearance.lightTheme || undefined,
+    "data-dark-theme": appearance.darkTheme || undefined,
+    style: {
+      display: "inline-flex",
+      lineHeight: 0,
+      color: "var(--fgColor-default, var(--color-fg-default, currentColor))"
+    }
   }, children);
 }
 
@@ -50,23 +63,25 @@ function ReactJsIcon({
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
-    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: "none",
     viewBox: "0 0 20 20",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
   }, props, {
+    "data-datalayer-icon": "",
     style: props && props.color != null ? Object.assign({}, props.style, {
-      "--datalayer-icon-fg": props.color
+      "--datalayer-icon-color": props.color,
+      color: props.color
     }) : props && props.style
-  }), title ? /*#__PURE__*/React.createElement("title", {
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#61DAFB' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#61DAFB" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 75%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M9.625 8.5a1.665 1.665 0 110 3.33 1.665 1.665 0 010-3.33z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#61DAFB' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#61DAFB" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 75%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M15.63 7.264a12.877 12.877 0 00-.6-.19c.034-.135.065-.271.094-.409.453-2.204.157-3.98-.858-4.566-.972-.56-2.562.025-4.169 1.423-.158.137-.312.28-.463.425a11.816 11.816 0 00-.309-.285C7.642 2.167 5.954 1.538 4.941 2.124c-.97.562-1.258 2.232-.85 4.322.041.207.087.412.138.617-.238.068-.47.14-.689.217C1.564 7.968.305 9.047.305 10.165c0 1.155 1.353 2.314 3.409 3.016.166.057.334.11.504.158-.055.22-.104.442-.147.665-.39 2.053-.085 3.684.883 4.243 1.001.577 2.68-.016 4.317-1.446.129-.113.259-.233.389-.359.163.159.33.312.503.46 1.584 1.364 3.149 1.914 4.117 1.354 1-.58 1.325-2.33.903-4.461a11.1 11.1 0 00-.112-.499c.118-.034.233-.07.347-.108 2.137-.708 3.527-1.852 3.527-3.023 0-1.123-1.301-2.208-3.315-2.9zm-5.01-3.142c1.376-1.198 2.662-1.67 3.249-1.332.624.36.867 1.811.474 3.715a9.184 9.184 0 01-.083.37 19.074 19.074 0 00-2.492-.394 18.7 18.7 0 00-1.576-1.966c.14-.135.282-.266.428-.393zM5.81 11.12a23.156 23.156 0 001.113 1.923 16.932 16.932 0 01-1.718-.277c.165-.531.368-1.085.605-1.646zm-.001-1.872a17.574 17.574 0 01-.592-1.612 17.861 17.861 0 011.69-.291 23.378 23.378 0 00-1.098 1.903zm.423.936a22.386 22.386 0 011.697-2.94 22.561 22.561 0 013.397 0 25.978 25.978 0 011.702 2.93 23.707 23.707 0 01-.8 1.508c-.283.49-.582.972-.895 1.443a25.77 25.77 0 01-3.394.007 22.337 22.337 0 01-1.707-2.948zm6.685 1.896c.188-.325.368-.655.54-.989.237.536.446 1.084.626 1.642a16.93 16.93 0 01-1.738.297c.197-.313.387-.629.572-.948v-.002zm.532-2.832a26.904 26.904 0 00-1.103-1.902c.595.076 1.165.175 1.7.298a17 17 0 01-.597 1.604zM9.634 5.084c.387.423.753.865 1.096 1.324a23.217 23.217 0 00-2.202 0 17.42 17.42 0 011.106-1.324zM5.34 2.813c.624-.362 2.002.154 3.456 1.444.093.082.186.168.28.257a19.08 19.08 0 00-1.59 1.966c-.836.075-1.667.204-2.486.386-.048-.19-.09-.381-.128-.574-.351-1.79-.119-3.14.467-3.48zm-.91 9.759a10.314 10.314 0 01-.46-.144 6.743 6.743 0 01-2.174-1.155 1.644 1.644 0 01-.695-1.108c0-.679 1.011-1.544 2.699-2.133.212-.074.426-.141.641-.202.251.804.555 1.59.909 2.354a19.393 19.393 0 00-.92 2.388zm4.316 3.63a6.744 6.744 0 01-2.087 1.306 1.645 1.645 0 01-1.307.049c-.588-.34-.833-1.648-.5-3.404.04-.208.086-.414.136-.619.829.178 1.668.3 2.513.364.49.693 1.024 1.354 1.6 1.977-.116.112-.234.22-.355.326zm.909-.9c-.396-.429-.77-.877-1.122-1.343a27.807 27.807 0 002.216-.003 17.04 17.04 0 01-1.094 1.346zm4.836 1.107a1.645 1.645 0 01-.61 1.157c-.588.34-1.844-.102-3.2-1.267a11.543 11.543 0 01-.468-.427 18.69 18.69 0 001.563-1.984 18.52 18.52 0 002.524-.39c.038.154.071.304.1.451a6.72 6.72 0 01.09 2.46zm.676-3.977a7.857 7.857 0 01-.314.098 18.694 18.694 0 00-.943-2.361 18.68 18.68 0 00.907-2.327c.19.055.376.113.554.175 1.724.593 2.777 1.472 2.777 2.148 0 .721-1.136 1.656-2.981 2.267z"
   }));
   if (!colormode) return _svgEl;

package/data1/RedisIcon.js

@@ -11,31 +11,44 @@ function _DlIconInverseColormode({
   children
 }) {
   const ref = React.useRef(null);
-  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
   React.useLayoutEffect(() => {
-    if (typeof mode === "string") {
-      setResolved(mode);
-      return;
-    }
     if (typeof document === "undefined") return;
-    let cur = null;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
     let el = ref.current && ref.current.parentElement;
-    while (el) {
-      const m = el.getAttribute && el.getAttribute("data-color-mode");
-      if (m) { cur = m; break; }
+    while (el && (!currentMode || !lightTheme || !darkTheme)) {
+      if (el.getAttribute) {
+        currentMode = currentMode || el.getAttribute("data-color-mode");
+        lightTheme = lightTheme || el.getAttribute("data-light-theme");
+        darkTheme = darkTheme || el.getAttribute("data-dark-theme");
+      }
       el = el.parentElement;
     }
-    if (!cur || cur === "auto") {
-      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    if (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
     }
-    setResolved(cur === "dark" ? "light" : "dark");
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
   }, [mode]);
   return /*#__PURE__*/React.createElement("span", {
     ref: ref,
-    "data-color-mode": resolved || "light",
-    "data-light-theme": "light",
-    "data-dark-theme": "dark",
-    style: { display: "inline-flex", lineHeight: 0 }
+    "data-color-mode": appearance.mode || "light",
+    "data-light-theme": appearance.lightTheme || undefined,
+    "data-dark-theme": appearance.darkTheme || undefined,
+    style: {
+      display: "inline-flex",
+      lineHeight: 0,
+      color: "var(--fgColor-default, var(--color-fg-default, currentColor))"
+    }
   }, children);
 }
 
@@ -53,42 +66,44 @@ function RedisIcon({
     preserveAspectRatio: "xMinYMin meet",
     viewBox: "0 0 256 256.052",
     height: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
+    fill: (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
   }, props, {
+    "data-datalayer-icon": "",
     style: props && props.color != null ? Object.assign({}, props.style, {
-      "--datalayer-icon-fg": props.color
+      "--datalayer-icon-color": props.color,
+      color: props.color
     }) : props && props.style
-  }), title ? /*#__PURE__*/React.createElement("title", {
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#912626' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#912626" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M245.97 185.546c-13.662 7.121-84.434 36.22-99.501 44.075-15.067 7.856-23.437 7.78-35.34 2.09-11.902-5.69-87.216-36.112-100.783-42.597C3.566 185.874 0 183.138 0 180.554v-25.876s98.05-21.345 113.879-27.024c15.828-5.679 21.32-5.884 34.79-.95 13.472 4.936 94.018 19.468 107.331 24.344l-.006 25.51c.002 2.558-3.07 5.364-10.024 8.988"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#c6302b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#c6302b" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M245.965 159.823c-13.661 7.118-84.431 36.218-99.498 44.072-15.066 7.857-23.436 7.78-35.338 2.09-11.903-5.686-87.214-36.113-100.78-42.594-13.566-6.485-13.85-10.948-.524-16.166 13.326-5.22 88.224-34.604 104.055-40.283 15.828-5.677 21.319-5.884 34.789-.948 13.471 4.934 83.819 32.934 97.13 37.81 13.316 4.88 13.827 8.9.166 16.02"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#912626' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#912626" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M245.97 143.677c-13.662 7.122-84.434 36.22-99.501 44.078-15.067 7.853-23.437 7.777-35.34 2.087-11.903-5.687-87.216-36.112-100.783-42.597C3.566 144.005 0 141.273 0 138.688V112.81s98.05-21.344 113.879-27.023c15.828-5.68 21.32-5.885 34.79-.95 13.473 4.935 94.019 19.464 107.331 24.34l-.006 25.513c.002 2.557-3.07 5.363-10.024 8.987"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#c6302b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#c6302b" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M245.965 117.954c-13.661 7.12-84.431 36.218-99.498 44.075-15.066 7.854-23.436 7.777-35.338 2.087-11.903-5.686-87.214-36.112-100.78-42.594-13.566-6.483-13.85-10.946-.524-16.166 13.326-5.217 88.225-34.604 104.055-40.282 15.828-5.678 21.319-5.884 34.789-.95 13.471 4.935 83.819 32.934 97.13 37.81 13.316 4.88 13.827 8.9.166 16.02"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#912626' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#912626" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M245.97 100.257c-13.662 7.12-84.434 36.22-99.501 44.077-15.067 7.854-23.437 7.777-35.34 2.087-11.903-5.687-87.216-36.112-100.783-42.594C3.566 100.584 0 97.85 0 95.269v-25.88s98.05-21.343 113.879-27.021c15.828-5.68 21.32-5.884 34.79-.95 13.473 4.935 94.019 19.464 107.331 24.34l-.006 25.513c.002 2.555-3.07 5.36-10.024 8.986"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#c6302b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#c6302b" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M245.965 74.534c-13.661 7.12-84.431 36.22-99.498 44.073-15.066 7.854-23.436 7.777-35.338 2.09-11.902-5.69-87.214-36.113-100.779-42.596-13.567-6.482-13.85-10.947-.525-16.166C23.151 56.717 98.05 27.334 113.88 21.654c15.828-5.68 21.319-5.883 34.789-.948 13.471 4.935 83.819 32.934 97.13 37.81 13.316 4.877 13.827 8.898.166 16.018"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#fff' : 'white',
+    fill: colored ? "#fff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M159.283 49.36l-22.01 2.286-4.927 11.856-7.958-13.23-25.415-2.284 18.964-6.84-5.69-10.497 17.755 6.944 16.738-5.48-4.524 10.855 17.067 6.39m-28.251 57.519L89.955 89.842l58.86-9.035-17.783 26.072M74.082 55.95c17.375 0 31.46 5.46 31.46 12.194 0 6.736-14.085 12.195-31.46 12.195s-31.46-5.46-31.46-12.195c0-6.734 14.085-12.194 31.46-12.194"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#621b1c' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#621b1c" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M185.295 52.602l34.836 13.766-34.806 13.753-.03-27.52"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#9a2928' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#9a2928" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 47%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 87%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 47%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 87%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 47%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M146.755 67.847l38.54-15.245.03 27.519-3.779 1.478-34.791-13.752"
   }));
   if (!colormode) return _svgEl;

package/data1/RedisNameIcon.js

@@ -11,31 +11,44 @@ function _DlIconInverseColormode({
   children
 }) {
   const ref = React.useRef(null);
-  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
   React.useLayoutEffect(() => {
-    if (typeof mode === "string") {
-      setResolved(mode);
-      return;
-    }
     if (typeof document === "undefined") return;
-    let cur = null;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
     let el = ref.current && ref.current.parentElement;
-    while (el) {
-      const m = el.getAttribute && el.getAttribute("data-color-mode");
-      if (m) { cur = m; break; }
+    while (el && (!currentMode || !lightTheme || !darkTheme)) {
+      if (el.getAttribute) {
+        currentMode = currentMode || el.getAttribute("data-color-mode");
+        lightTheme = lightTheme || el.getAttribute("data-light-theme");
+        darkTheme = darkTheme || el.getAttribute("data-dark-theme");
+      }
       el = el.parentElement;
     }
-    if (!cur || cur === "auto") {
-      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    if (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
     }
-    setResolved(cur === "dark" ? "light" : "dark");
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
   }, [mode]);
   return /*#__PURE__*/React.createElement("span", {
     ref: ref,
-    "data-color-mode": resolved || "light",
-    "data-light-theme": "light",
-    "data-dark-theme": "dark",
-    style: { display: "inline-flex", lineHeight: 0 }
+    "data-color-mode": appearance.mode || "light",
+    "data-light-theme": appearance.lightTheme || undefined,
+    "data-dark-theme": appearance.darkTheme || undefined,
+    style: {
+      display: "inline-flex",
+      lineHeight: 0,
+      color: "var(--fgColor-default, var(--color-fg-default, currentColor))"
+    }
   }, children);
 }
 
@@ -51,54 +64,56 @@ function RedisNameIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 246.999 246.997",
-    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
+    fill: (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
   }, props, {
+    "data-datalayer-icon": "",
     style: props && props.color != null ? Object.assign({}, props.style, {
-      "--datalayer-icon-fg": props.color
+      "--datalayer-icon-color": props.color,
+      color: props.color
     }) : props && props.style
-  }), title ? /*#__PURE__*/React.createElement("title", {
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
     d: "M39.802 186.036c0 3.62-2.973 6.85-6.85 6.85-2.973 0-5.557.775-7.754 2.455-2.455 1.552-4.394 3.748-5.944 6.203-3.102 4.136-4.651 9.046-5.298 10.854v24.554c0 3.748-3.23 6.85-7.107 6.85-3.748 0-6.849-3.102-6.849-6.85v-50.916c0-3.748 3.101-6.72 6.849-6.72 3.877 0 7.107 2.973 7.107 6.72v.905c.775-.905 1.809-1.938 2.714-2.585 4.265-2.842 9.821-5.169 16.282-5.04 3.877 0 6.85 2.973 6.85 6.72zm-3.79 25.46c.13-17.575 13.828-32.307 31.531-32.307 16.8 0 30.11 12.535 31.145 29.98v.646c0 .26 0 .904-.129 1.163-.389 3.102-3.102 5.17-6.721 5.17H50.744c.646 2.973 2.067 6.332 4.394 8.53 2.714 3.101 7.883 5.425 12.405 5.813 4.652.387 10.209-.775 13.44-3.23 2.713-2.844 8.012-2.455 9.692-.389 1.68 1.811 2.972 5.688 0 8.4-6.333 5.814-13.957 8.53-23.133 8.53-17.702-.128-31.4-14.73-31.53-32.306zm14.086-6.332h36.571c-1.292-5.169-7.883-12.793-19.126-13.698-10.983.516-16.411 8.4-17.445 13.698zm114.424 31.662c0 3.748-3.102 6.98-6.979 6.98-3.489 0-6.202-2.456-6.849-5.558-4.91 3.36-11.113 5.557-17.575 5.557-17.445 0-31.402-14.732-31.402-32.178 0-17.705 13.957-32.437 31.402-32.437 6.333 0 12.535 2.067 17.316 5.427v-24.294c0-3.748 3.102-6.979 7.107-6.979 3.877 0 6.979 3.231 6.979 6.98v76.503zm-31.402-43.55c-4.652 0-8.917 1.938-12.146 5.298-3.231 3.231-5.17 7.882-5.17 13.052 0 4.91 1.938 9.562 5.17 12.793 3.229 3.361 7.494 5.3 12.146 5.3 4.781 0 8.917-1.939 12.147-5.3 3.23-3.23 5.169-7.883 5.169-12.793 0-5.17-1.938-9.82-5.169-13.052-3.23-3.36-7.366-5.298-12.147-5.298zm55.992-30.24c0 3.877-2.972 7.107-6.979 7.107-3.877 0-6.978-3.23-6.978-7.107v-2.714a6.95 6.95 0 016.978-6.979c4.007 0 6.979 3.102 6.979 6.98zm0 23.39v50.4c0 3.876-2.972 6.978-6.979 6.978a6.95 6.95 0 01-6.978-6.979v-50.399c0-4.135 3.101-7.108 6.978-7.108 4.008 0 6.979 2.973 6.979 7.108zm8.88 38.89c2.326-3.1 6.85-3.488 9.692-1.033 3.36 2.844 9.176 5.814 14.215 5.686 3.489 0 6.72-1.162 8.788-2.455 1.809-1.55 2.325-2.842 2.325-3.877 0-.646-.129-.904-.387-1.293-.13-.387-.646-.904-1.681-1.549-1.809-1.293-5.686-2.715-10.338-3.619h-.129c-4.007-.775-7.884-1.809-11.243-3.36-3.489-1.68-6.591-4.006-8.917-7.495-1.421-2.326-2.196-5.169-2.196-8.14 0-5.946 3.36-10.986 7.624-14.217 4.523-3.1 9.951-4.78 15.896-4.78 8.916 0 15.248 4.264 19.384 7.106 3.102 2.068 4.006 6.333 2.067 9.562-2.067 3.102-6.332 4.007-9.562 1.81-4.135-2.713-7.754-4.782-11.889-4.782-3.231 0-6.074 1.034-7.754 2.326-1.68 1.164-2.067 2.327-2.067 2.973 0 .516 0 .646.258 1.033.13.258.517.775 1.422 1.292 1.681 1.163 5.04 2.326 9.434 3.102l.129.13h.13c4.265.774 8.271 1.938 12.018 3.747 3.489 1.551 6.979 4.006 9.176 7.624 1.551 2.584 2.455 5.557 2.455 8.53 0 6.331-3.489 11.63-8.142 14.99-4.652 3.23-10.468 5.17-16.8 5.17-10.079-.13-17.833-4.782-23.002-8.917-2.844-2.326-3.231-6.72-.906-9.564z",
-    fill: "#636466"
+    fill: colored ? "#636466" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 45%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 89%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 45%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 89%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 45%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }), /*#__PURE__*/React.createElement("g", {
     transform: "translate(33.367 1)"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#a41e11' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#a41e11" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 48%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 86%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 48%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 86%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 48%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M168.444 117.427c-9.078 4.732-56.106 24.068-66.118 29.287-10.012 5.221-15.574 5.17-23.483 1.389-7.909-3.781-57.955-23.996-66.97-28.305-4.506-2.154-6.875-3.971-6.875-5.688V96.915S70.151 82.731 80.67 78.958c10.518-3.774 14.167-3.91 23.118-.631 8.952 3.279 62.474 12.936 71.321 16.176l-.004 16.951c.001 1.7-2.04 3.565-6.66 5.973z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#d82c20' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#d82c20" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 54%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M168.444 100.227c-9.078 4.73-56.106 24.068-66.118 29.287-10.012 5.221-15.574 5.17-23.483 1.389-7.91-3.779-57.955-23.998-66.97-28.305-9.015-4.309-9.204-7.275-.348-10.742 8.855-3.469 58.626-22.996 69.146-26.77 10.518-3.772 14.167-3.91 23.118-.63 8.952 3.28 55.7 21.886 64.545 25.126 8.848 3.243 9.188 5.913.11 10.645z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#a41e11' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#a41e11" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 48%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 86%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 48%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 86%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 48%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M168.444 89.387c-9.078 4.732-56.106 24.068-66.118 29.29-10.012 5.218-15.574 5.167-23.483 1.386-7.91-3.779-57.955-23.996-66.97-28.305-4.506-2.154-6.875-3.969-6.875-5.686V68.875S70.151 54.692 80.67 50.918c10.518-3.773 14.167-3.91 23.118-.631 8.952 3.279 62.474 12.934 71.321 16.175l-.004 16.953c.001 1.699-2.04 3.564-6.66 5.972z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#d82c20' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#d82c20" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 54%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M168.444 72.187c-9.078 4.732-56.106 24.068-66.118 29.29-10.012 5.218-15.574 5.167-23.483 1.386-7.91-3.779-57.955-23.997-66.97-28.305s-9.204-7.274-.348-10.743c8.855-3.467 58.626-22.995 69.146-26.768 10.518-3.773 14.167-3.91 23.118-.63 8.952 3.278 55.7 21.884 64.545 25.125 8.848 3.242 9.188 5.913.11 10.645z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#a41e11' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#a41e11" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 48%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 86%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 48%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 86%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 48%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M168.444 60.307c-9.078 4.732-56.106 24.069-66.118 29.29-10.012 5.22-15.574 5.168-23.483 1.387-7.91-3.779-57.955-23.997-66.97-28.305-4.506-2.154-6.875-3.97-6.875-5.686V39.796S70.151 25.613 80.67 21.84c10.518-3.774 14.167-3.91 23.118-.631 8.952 3.279 62.474 12.934 71.321 16.175l-.004 16.952c.001 1.698-2.04 3.563-6.66 5.971z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#d82c20' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#d82c20" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 54%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M168.444 43.107c-9.078 4.732-56.106 24.07-66.118 29.29-10.012 5.218-15.574 5.167-23.483 1.387-7.909-3.78-57.955-23.997-66.97-28.305s-9.204-7.275-.348-10.743c8.855-3.468 58.626-22.994 69.146-26.768 10.518-3.774 14.167-3.91 23.118-.63 8.952 3.28 55.7 21.885 64.545 25.126 8.848 3.24 9.188 5.912.11 10.643z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#fff' : 'white',
+    fill: colored ? "#fff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M97.604 28.077l-3.3 7.94-5.33-8.86-17.02-1.53 12.7-4.58-3.81-7.03 11.89 4.65 11.21-3.67-3.03 7.27 11.43 4.28zm7.73 19.53l-11.91 17.46-27.51-11.41z"
   }), /*#__PURE__*/React.createElement("ellipse", {
     cx: 55.284,
     cy: 39.127,
-    fill: colored ? '#fff' : 'white',
+    fill: colored ? "#fff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     rx: 21.069,
     ry: 8.167
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#7a0c00' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#7a0c00" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 45%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 89%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 45%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 89%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 45%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M129.784 47.147l-.02-18.43 23.33 9.22z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#ad2115' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#ad2115" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M127.254 48.137l-23.3-9.21 25.81-10.21.02 18.43z"
   })));
   if (!colormode) return _svgEl;

package/data1/RedoIcon.js

@@ -11,31 +11,44 @@ function _DlIconInverseColormode({
   children
 }) {
   const ref = React.useRef(null);
-  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
   React.useLayoutEffect(() => {
-    if (typeof mode === "string") {
-      setResolved(mode);
-      return;
-    }
     if (typeof document === "undefined") return;
-    let cur = null;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
     let el = ref.current && ref.current.parentElement;
-    while (el) {
-      const m = el.getAttribute && el.getAttribute("data-color-mode");
-      if (m) { cur = m; break; }
+    while (el && (!currentMode || !lightTheme || !darkTheme)) {
+      if (el.getAttribute) {
+        currentMode = currentMode || el.getAttribute("data-color-mode");
+        lightTheme = lightTheme || el.getAttribute("data-light-theme");
+        darkTheme = darkTheme || el.getAttribute("data-dark-theme");
+      }
       el = el.parentElement;
     }
-    if (!cur || cur === "auto") {
-      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    if (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
     }
-    setResolved(cur === "dark" ? "light" : "dark");
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
   }, [mode]);
   return /*#__PURE__*/React.createElement("span", {
     ref: ref,
-    "data-color-mode": resolved || "light",
-    "data-light-theme": "light",
-    "data-dark-theme": "dark",
-    style: { display: "inline-flex", lineHeight: 0 }
+    "data-color-mode": appearance.mode || "light",
+    "data-light-theme": appearance.lightTheme || undefined,
+    "data-dark-theme": appearance.darkTheme || undefined,
+    style: {
+      display: "inline-flex",
+      lineHeight: 0,
+      color: "var(--fgColor-default, var(--color-fg-default, currentColor))"
+    }
   }, children);
 }
 
@@ -50,20 +63,22 @@ function RedoIcon({
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
-    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: "none",
     viewBox: "0 0 18 18",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
   }, props, {
+    "data-datalayer-icon": "",
     style: props && props.color != null ? Object.assign({}, props.style, {
-      "--datalayer-icon-fg": props.color
+      "--datalayer-icon-color": props.color,
+      color: props.color
     }) : props && props.style
-  }), title ? /*#__PURE__*/React.createElement("title", {
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#616161' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#616161" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M8.977 6c1.987 0 3.787.742 5.175 1.95l2.7-2.7V12h-6.75l2.715-2.715a5.965 5.965 0 00-3.84-1.41A6.009 6.009 0 003.277 12l-1.778-.585C2.542 8.273 5.49 6 8.977 6z"
   }));
   if (!colormode) return _svgEl;