@datalayer/icons-react 1.0.8 → 1.0.10

package/data1/RayIoIcon.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);
 }
 
@@ -45,30 +58,32 @@ function RayIoIcon({
   size,
   colored,
   themed,
-  colormoded,
+  colormode,
   ...props
 }, 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 1600 1600",
     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 ? '#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: "M589.375 746.735a221.647 221.647 0 0157.209-100.852 216.744 216.744 0 01153.785-63.66c60.084 0 114.417 24.329 153.785 63.66a221.573 221.573 0 0157.209 100.852h160.198a211.805 211.805 0 0124.329-58.683L911.948 404.11a219.472 219.472 0 01-111.58 30.78 216.744 216.744 0 01-153.784-63.66 216.744 216.744 0 01-63.66-153.785c0-60.084 24.329-114.454 63.66-153.785A216.744 216.744 0 01800.369 0c60.084 0 114.417 24.329 153.785 63.66a216.744 216.744 0 0163.66 153.785 217.481 217.481 0 01-30.78 111.579l283.942 283.942a219.472 219.472 0 01111.616-30.743c60.084 0 114.417 24.329 153.748 63.66A216.744 216.744 0 011600 799.63a216.744 216.744 0 01-63.66 153.785 216.744 216.744 0 01-153.785 63.66 217.481 217.481 0 01-111.542-30.743l-283.979 284.68c19.315 32.88 30.78 70.773 30.78 111.542a216.744 216.744 0 01-63.66 153.785A216.744 216.744 0 01800.369 1600a216.744 216.744 0 01-153.785-63.66 216.744 216.744 0 01-63.66-153.785c0-60.084 24.329-114.418 63.66-153.749a216.744 216.744 0 01153.785-63.659 217.481 217.481 0 01111.579 30.742l283.942-283.942a211.805 211.805 0 01-24.328-58.646h-160.2a221.573 221.573 0 01-57.208 100.852 216.744 216.744 0 01-153.785 63.66 216.744 216.744 0 01-153.785-63.66 221.647 221.647 0 01-57.209-100.852H429.14a221.647 221.647 0 01-57.208 100.852 216.744 216.744 0 01-153.785 63.66 216.744 216.744 0 01-153.785-63.66A214.422 214.422 0 010 800.368c0-60.084 24.328-114.454 63.66-153.785a216.744 216.744 0 01153.784-63.66c60.084 0 114.418 24.33 153.785 63.66a221.683 221.683 0 0157.209 100.853h160.936v-.738zm132.332 714.518c20.016 20.016 47.92 32.88 78.662 32.88 30.742 0 58.61-12.164 78.662-32.88 20.015-20.015 32.917-47.92 32.917-78.698 0-30.743-12.164-58.61-32.917-78.662a111.395 111.395 0 00-78.662-32.88c-30.78 0-58.646 12.164-78.699 32.88a111.395 111.395 0 00-32.88 78.699c0 30.742 12.164 58.609 32.88 78.661zm739.547-582.223c20.016-20.015 32.88-47.92 32.88-78.662 0-30.779-12.164-58.646-32.88-78.698a111.395 111.395 0 00-78.699-32.88c-30.742 0-58.61 12.164-78.662 32.88a111.395 111.395 0 00-32.88 78.698c0 30.743 12.164 58.61 32.88 78.662 20.016 20.016 47.92 32.917 78.7 32.917a114.491 114.491 0 0078.661-32.917zM879.031 138.746a111.395 111.395 0 00-78.662-32.88c-30.78 0-58.646 12.164-78.699 32.88a111.395 111.395 0 00-32.88 78.699c0 30.742 12.164 58.61 32.88 78.662 20.053 20.015 47.92 32.917 78.699 32.917 30.742 0 58.61-12.165 78.662-32.917 20.015-20.016 32.917-47.92 32.917-78.662a114.491 114.491 0 00-32.917-78.699zM138.747 721.67a111.395 111.395 0 00-32.88 78.698c0 30.743 12.164 58.61 32.88 78.662 20.052 20.016 47.92 32.917 78.698 32.917 30.743 0 58.61-12.164 78.662-32.917 20.016-20.753 32.917-47.92 32.917-78.662 0-30.779-12.164-58.646-32.917-78.698-20.753-20.016-47.92-32.88-78.662-32.88-30.779 0-58.646 12.164-78.698 32.88zm582.923 0a111.395 111.395 0 00-32.88 78.698c0 30.743 12.164 58.61 32.88 78.662 20.053 20.016 47.92 32.917 78.699 32.917 30.742 0 58.61-12.164 78.662-32.917 20.015-20.015 32.917-47.92 32.917-78.662 0-30.779-12.164-58.646-32.917-78.698a111.395 111.395 0 00-78.662-32.88c-30.78 0-58.646 12.164-78.699 32.88z"
   }));
-  if (!colormoded) return _svgEl;
+  if (!colormode) return _svgEl;
   return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
-    mode: typeof colormoded === "string" ? colormoded : undefined
+    mode: typeof colormode === "string" ? colormode : undefined
   }, _svgEl);
 }
 const ForwardRef = React.forwardRef(RayIoIcon);

package/data1/RayIoNameIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const RayIoNameIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormoded?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
+declare const RayIoNameIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormode?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default RayIoNameIcon;

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);
 }
 
@@ -45,33 +58,35 @@ function RayIoNameIcon({
   size,
   colored,
   themed,
-  colormoded,
+  colormode,
   ...props
 }, 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 (!colormoded) return _svgEl;
+  if (!colormode) return _svgEl;
   return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
-    mode: typeof colormoded === "string" ? colormoded : undefined
+    mode: typeof colormode === "string" ? colormode : undefined
   }, _svgEl);
 }
 const ForwardRef = React.forwardRef(RayIoNameIcon);

package/data1/ReactJsIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const ReactJsIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormoded?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
+declare const ReactJsIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormode?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default ReactJsIcon;

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);
 }
 
@@ -45,33 +58,35 @@ function ReactJsIcon({
   size,
   colored,
   themed,
-  colormoded,
+  colormode,
   ...props
 }, 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 (!colormoded) return _svgEl;
+  if (!colormode) return _svgEl;
   return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
-    mode: typeof colormoded === "string" ? colormoded : undefined
+    mode: typeof colormode === "string" ? colormode : undefined
   }, _svgEl);
 }
 const ForwardRef = React.forwardRef(ReactJsIcon);

package/data1/RedisIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const RedisIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormoded?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
+declare const RedisIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormode?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default RedisIcon;

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);
 }
 
@@ -45,7 +58,7 @@ function RedisIcon({
   size,
   colored,
   themed,
-  colormoded,
+  colormode,
   ...props
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
@@ -53,47 +66,49 @@ 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 (!colormoded) return _svgEl;
+  if (!colormode) return _svgEl;
   return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
-    mode: typeof colormoded === "string" ? colormoded : undefined
+    mode: typeof colormode === "string" ? colormode : undefined
   }, _svgEl);
 }
 const ForwardRef = React.forwardRef(RedisIcon);

package/data1/RedisNameIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const RedisNameIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormoded?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
+declare const RedisNameIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormode?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default RedisNameIcon;