@datalayer/icons-react 1.0.9 → 1.0.10

package/data1/KafkaIcon.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,22 +64,24 @@ function KafkaIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 100 100",
-    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: "M31.93 98.597c-9.177-4.376-8.896-18.66.45-22.873 2.668-1.203 3.004-1.77 3.022-5.1.018-3.287-.295-3.852-2.557-4.614-3.525-1.189-8.384-5.28-10.114-8.516-1.842-3.445-1.842-11.518 0-14.962 1.73-3.237 6.589-7.328 10.114-8.516 2.262-.763 2.575-1.327 2.557-4.615-.018-3.329-.354-3.896-3.022-5.099-9.425-4.248-9.613-18.633-.3-22.908 10.741-4.93 22.21 3.972 19.172 14.882-.963 3.462-6.393 8.928-8.867 8.928-.994 0-1.366 1.087-1.366 3.99 0 3.703.218 4.06 3.038 4.96 1.671.533 4.174 1.988 5.563 3.233l2.524 2.264 3.053-1.796c2.773-1.631 3.062-2.214 3.15-6.366.158-7.348 5.44-12.714 12.618-12.819 10.67-.156 16.988 9.421 12.392 18.788-3.123 6.365-11.985 8.603-18.99 4.795-3.243-1.763-3.63-1.257-6.467-.634-3.843.844-4.903-1.083-2.115 6.66 1.07 2.974-.748 6.653-.867 7.837-.133 1.342 1 1.68 3.182 2.162 2.836.627 3.024 1.257 6.267-.505 7.005-3.808 15.867-1.57 18.99 4.795 4.596 9.367-1.721 18.943-12.392 18.787-7.178-.105-12.46-5.47-12.617-12.818-.09-4.153-.378-4.735-3.151-6.367l-3.053-1.796-2.524 2.264c-1.389 1.246-3.892 2.7-5.563 3.234-2.82.9-3.038 1.257-3.038 4.96 0 2.903.372 3.99 1.366 3.99 2.474 0 7.904 5.466 8.867 8.927 1.658 5.955-1.553 12.848-7.011 15.054-4.118 1.664-8.544 1.59-12.31-.206zm10.66-6.792c4.516-4.104 1.683-10.97-4.527-10.97-5.972 0-8.62 7.481-3.914 11.061 3.15 2.398 5.734 2.37 8.442-.091zm33.835-18.958c5.626-5.84-3.457-14.494-9.29-8.851-2.282 2.206-2.446 6.906-.323 9.176 2.17 2.319 7.23 2.148 9.613-.325zm-34.18-14.37c3.433-1.697 5.261-4.64 5.261-8.464 0-8.807-10.372-12.492-16.224-5.764-3.516 4.041-3.244 8.274.783 12.169 3.35 3.24 6.504 3.878 10.18 2.06zm33.923-22.605c4.284-3.892 1.384-10.668-4.566-10.668-3.928 0-6.333 2.28-6.333 6.004 0 5.93 6.463 8.695 10.899 4.664zM43.118 17.29c3.628-3.081.409-11.03-4.468-11.03-3.05 0-6.958 3.365-6.958 5.989 0 6.454 6.424 9.289 11.425 5.041z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#fff' : 'white',
-    stroke: "#fff",
+    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))))")),
+    stroke: 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))))")),
     strokeWidth: 0.248,
     d: "M36.568 59.122c-2.539-.836-5.75-3.708-6.87-6.144-.936-2.037-.929-4.173.02-6.113 1.017-2.08 2.868-3.974 4.82-4.935 1.512-.744 1.843-.811 4.008-.811 2.035 0 2.553.09 3.76.656 4.514 2.116 6.404 7.968 4.066 12.584-.766 1.51-2.785 3.37-4.52 4.166-1.481.678-4.13.977-5.284.597zm-.557-40.303c-2.347-.9-3.876-3.029-4.09-5.692-.15-1.878.352-3.021 1.995-4.535 1.295-1.194 2.157-1.676 3.692-2.062 1.71-.43 3.017.022 4.565 1.582 2.697 2.717 3.126 6.931.915 8.987-1.841 1.711-5.06 2.494-7.077 1.72zm-.14 73.971c-4.34-2.17-5.32-6.818-2.114-10.025 2.48-2.48 6.398-2.446 9 .077.894.867 1.3 1.506 1.596 2.51.486 1.654.488 1.848.025 3.406-.727 2.447-3.642 4.791-5.96 4.791-.65 0-1.585-.279-2.547-.76zm33.172-18.447c-2.273-.74-3.544-2.756-3.544-5.625 0-5.612 5.788-8.35 10.13-4.792 2.008 1.645 2.906 4.733 2.004 6.886-1.234 2.944-5.28 4.608-8.59 3.531zm1.378-36.856c-4.508-.673-6.646-6.742-3.595-10.208 2.874-3.265 9.064-2.189 10.757 1.87.473 1.135.498 3.408.05 4.479-1.12 2.674-4.18 4.311-7.212 3.859z"
   }));

package/data1/KerberosIcon.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,16 +64,18 @@ function KerberosIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 455 455",
-    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
+    fill: (themed ? "var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor))" : "var(--datalayer-icon-color, currentColor)"),
     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: "M186.27 66c.657.13-40.214.84-37.479 41.384-19.646-3.536-50.598 1.1-72.566 18.451-22.292 17.607-59.911 23.325-76.223 31.98 0 0 8.902 12.128 17.268 15.399 2.173.85 4.467 1.332 6.82 1.54l7.259 9.211.797-8.936 4.95 6.242.687-7.865c.268-.064.529-.097.798-.165l4.262 5.335.577-6.71c11.697-3.634 23.598-9.414 33.272-10.778 17.313-2.442 28.795 2.52 24.445 32.282-33.214-15.73-57.895-12.118-79.275-3.08 0 0-5.505 9.43 3.602 13.419 38.001-13.974 38.191 7.171 66.681 8.607.24-.184.48-.365.715-.55 21.45-16.942 50.037-22.217 70.916-19.963.494-18.471 10.33-29.446 20.266-34.784 8.186-4.32 15.02-6.505 22.438-5.967 1.649.311 2.59 2.444 3.547 3.904 0 0-.234.436-.302.578l.302.027c-.419 9.684-2.853 19.104-3.024 27.332-.038 1.8.017 3.514.192 5.17 12.057-12.72 24.907-23.9 37.562-31.402-16.632-17.772-34.72-32.671-50.898-38.69-17.446-14.158-8.37-33.936-7.59-51.97zm81.008 36.242c.781 18.034 9.857 37.811-7.59 51.97-16.326 6.073-34.608 21.193-51.364 39.184 1.245 3.643 3.518 7.008 7.424 10.257 21.795 8.495 45.14 30.492 64.812 54.418 15.988-12.306 37.853-18.644 65.169-10.477 45.05 7.018 38.389-23.802 82.327-7.644 9.107-3.988 3.63-13.42 3.63-13.42-21.381-9.037-46.061-12.648-79.275 3.08-4.35-29.76 7.132-34.696 24.445-32.255 9.674 1.365 21.574 7.117 33.272 10.752l.577 6.71 4.262-5.335c.269.068.53.101.798.165l.687 7.865 4.95-6.215.797 8.937 7.26-9.212c2.352-.208 4.646-.718 6.819-1.567 8.366-3.271 17.268-15.4 17.268-15.4-16.312-8.653-53.958-14.344-76.25-31.951-21.968-17.351-52.893-22.014-72.538-18.478 2.735-40.544-38.136-41.254-37.48-41.384zm-140.29 19.083l.852 3.932s-8.52 3.69-14.684 5.5a5.948 5.948 0 011.045 3.464 6.02 6.02 0 01-6.104 5.94 6.02 6.02 0 01-5.94-6.105c.01-.57.12-1.13.275-1.65-5.213.366-10.284.413-10.284.413l-.852-3.932s12.391-.138 18.368-1.402c5.977-1.265 17.323-6.16 17.323-6.16zm78.67 34.042c.657.13-40.241.84-37.507 41.384-19.646-3.536-50.57 1.128-72.538 18.478-22.292 17.607-59.938 23.298-76.25 31.952 0 0 8.902 12.128 17.268 15.399 2.173.85 4.467 1.36 6.82 1.567l7.259 9.212.825-8.937 4.95 6.215.687-7.865c.268-.064.528-.097.797-.165l4.235 5.335.577-6.71c11.697-3.634 23.598-9.387 33.272-10.751 17.313-2.442 28.795 2.52 24.445 32.282-33.214-15.73-57.895-12.145-79.275-3.108 0 0-5.477 9.431 3.63 13.42 43.938-16.159 37.278 14.661 82.327 7.644 66.196-19.792 100.45 45.624 96.35 74.71l95.747-36.461c7.521-16.878-57.83-113.69-106.06-131.63-17.446-14.16-8.343-33.937-7.562-51.97zm120.91 2.2s11.346 4.922 17.323 6.187c5.977 1.265 18.341 1.402 18.341 1.402l-.825 3.905s-5.07-.047-10.284-.413c.155.52.239 1.08.248 1.65a6.02 6.02 0 01-5.94 6.104c-3.328.05-6.028-2.61-6.077-5.94a5.948 5.948 0 011.045-3.464c-6.163-1.81-14.684-5.5-14.684-5.5l.852-3.931zm-180.22 53.125l.852 3.932s-8.493 3.69-14.656 5.5a6.02 6.02 0 01-5.06 9.404 6.02 6.02 0 01-5.938-6.105 6.14 6.14 0 01.247-1.65c-5.214.366-10.257.413-10.257.413l-.852-3.905s12.39-.137 18.368-1.402c5.977-1.265 17.296-6.187 17.296-6.187z"

package/data1/KubeflowIcon.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,48 +64,50 @@ function KubeflowIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 276.93 274.55",
-    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("g", {
     "data-name": "Layer 2"
   }, /*#__PURE__*/React.createElement("g", {
     "data-name": "Layer 1"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#4279f4' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#4279f4" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M95.9 62.15l4.1 102.1 73.75-94.12a6.79 6.79 0 019.6-1.11l46 36.92-15-65.61z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#0028aa' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#0028aa" : (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: "M102.55 182.98h65.42l-40.17-32.23-25.25 32.23z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#014bd1' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#014bd1" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 51%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 83%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 51%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 83%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 51%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M180.18 83.92l-44 56.14 46.88 37.61 44.47-55.76-47.35-37.99z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#bedcff' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#bedcff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 77%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 57%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 77%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 57%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 77%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M83.56 52.3l.01-.01 38.69-48.52-62.39 30.05-15.41 67.51 39.1-49.03z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#6ca1ff' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#6ca1ff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M45.32 122.05l41.44 51.96-3.95-98.98-37.49 47.02z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#a1c3ff' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#a1c3ff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M202.31 28.73L142.65 0l-37.13 46.56 96.79-17.83z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#4279f4' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    stroke: "#4279f4",
+    fill: colored ? "#4279f4" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    stroke: colored ? "#4279f4" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     strokeMiterlimit: 10,
     strokeWidth: 3.2,
     d: "M1.6 272v-44.78h5.74v23.41l20.48-23.41h6.4l-17.39 19.7 19 25.07H29.1l-15.92-20.8-5.84 6.65V272zm40.02-9.79V240h5.43v22.39a4.67 4.67 0 002.35 4.19 11 11 0 0011 0 4.69 4.69 0 002.33-4.19V240h5.43v22.19a9.08 9.08 0 01-4.1 7.87 16.2 16.2 0 01-18.37 0 9.07 9.07 0 01-4.07-7.85zM77.46 272v-48h5.43v16.81a29.29 29.29 0 019.32-1.73 13.1 13.1 0 016.2 1.41 10.71 10.71 0 014.18 3.74 18.07 18.07 0 012.23 5.06 21.26 21.26 0 01.73 5.58q0 8.43-4.38 12.79T87.35 272zm5.43-4.87h4.55q6.77 0 9.72-2.95t3-9.51a14.21 14.21 0 00-2-7.52 6.55 6.55 0 00-6-3.22 24.73 24.73 0 00-9.25 1.54zm29.47-11.19q0-7.71 4.09-12.3a13.75 13.75 0 0110.8-4.59q13.35 0 13.36 18.86h-22.82a12.3 12.3 0 002.9 7.07q2.59 3.11 7.9 3.1a24.92 24.92 0 0010.55-2v5a27.74 27.74 0 01-9.86 1.87 19.83 19.83 0 01-7.7-1.37 13.31 13.31 0 01-5.28-3.76 16.21 16.21 0 01-3-5.38 20.84 20.84 0 01-.94-6.5zm5.62-2.12h17.26a14.91 14.91 0 00-2.37-7.12 6.44 6.44 0 00-5.62-2.78 8.2 8.2 0 00-6.21 2.72 12.07 12.07 0 00-3.04 7.18z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#0028aa' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    stroke: "#0028aa",
+    fill: colored ? "#0028aa" : (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))))")),
+    stroke: colored ? "#0028aa" : (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))))")),
     strokeMiterlimit: 10,
     strokeWidth: 3.2,
     d: "M147.32 244.89V240h5v-7.59a8.14 8.14 0 012.31-6.05 7.79 7.79 0 015.69-2.28h7.86V229h-5c-2.21 0-3.67.45-4.37 1.34s-1.06 2.55-1.06 5V240h8.46v4.87h-8.46V272h-5.44v-27.1zM175.26 272v-48h5.43v48zm19.15-3.95a17.86 17.86 0 1112.33 4.9 16.57 16.57 0 01-12.33-4.9zm3.84-20.65a13.16 13.16 0 000 17.2 12.07 12.07 0 0017 0 13.09 13.09 0 000-17.2 12.07 12.07 0 00-17 0zm30.2-7.4h5.75l7.3 25.32 7.43-25.32h5.36l7.34 25.34L269 240h5.74l-10.04 32h-6.12l-6.83-24.58L245 272h-6.47z"

package/data1/KubernetesIcon.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,21 +64,23 @@ function KubernetesIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 777 753.918",
-    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("g", {
     strokeWidth: 0
   }, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#326ce5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#326ce5" : (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: "M385.807.066a51.654 51.232 0 00-19.796 5.01L95.888 134.144a51.654 51.232 0 00-27.949 34.754L1.298 458.817a51.654 51.232 0 007.013 39.28 51.654 51.232 0 002.936 4.076l186.969 232.468a51.654 51.232 0 0040.386 19.277l299.833-.07a51.654 51.232 0 0040.386-19.242l186.9-232.502a51.654 51.232 0 009.984-43.356l-66.745-289.92a51.654 51.232 0 00-27.949-34.754L410.853 5.076a51.654 51.232 0 00-25.046-5.01z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M388.483 98.73c-8.929 0-16.169 8.043-16.168 17.964 0 .152.031.298.035.45-.014 1.347-.079 2.971-.035 4.145.213 5.722 1.46 10.101 2.211 15.373 1.36 11.284 2.5 20.637 1.797 29.33-.684 3.279-3.1 6.277-5.252 8.361l-.38 6.84a210.42 210.42 0 00-29.226 4.492c-41.982 9.531-78.127 31.156-105.645 60.353a271.002 271.002 0 01-5.839-4.145c-2.887.39-5.804 1.28-9.604-.933-7.235-4.87-13.825-11.593-21.8-19.692-3.653-3.874-6.299-7.563-10.64-11.297-.985-.848-2.49-1.995-3.593-2.867-3.393-2.706-7.396-4.117-11.262-4.25-4.97-.17-9.755 1.774-12.886 5.7-5.566 6.982-3.784 17.654 3.973 23.838.079.063.163.112.242.173 1.066.864 2.371 1.971 3.35 2.695 4.607 3.4 8.815 5.142 13.405 7.842 9.67 5.972 17.686 10.923 24.045 16.893 2.483 2.647 2.917 7.31 3.247 9.328l5.182 4.63c-27.74 41.747-40.58 93.314-32.992 145.857l-6.771 1.97c-1.785 2.304-4.307 5.93-6.944 7.012-8.32 2.62-17.682 3.583-28.985 4.768-5.307.441-9.886.178-15.512 1.243-1.238.235-2.963.684-4.318 1.002-.047.01-.091.024-.138.035-.074.017-.171.053-.242.069-9.53 2.302-15.652 11.062-13.68 19.692 1.97 8.632 11.279 13.881 20.866 11.815.069-.016.17-.019.241-.035.109-.025.204-.077.311-.103 1.337-.294 3.011-.62 4.18-.933 5.532-1.481 9.538-3.657 14.51-5.562 10.698-3.837 19.559-7.042 28.19-8.291 3.606-.283 7.404 2.224 9.294 3.282l7.047-1.21c16.218 50.282 50.206 90.923 93.243 116.424l-2.937 7.048c1.059 2.736 2.226 6.439 1.438 9.141-3.138 8.138-8.514 16.728-14.635 26.304-2.963 4.424-5.996 7.857-8.67 12.92-.64 1.212-1.456 3.073-2.074 4.353-4.155 8.891-1.107 19.131 6.875 22.974 8.033 3.867 18.003-.211 22.318-9.12.006-.013.028-.022.034-.035.004-.01-.004-.025 0-.034.615-1.263 1.485-2.924 2.004-4.111 2.29-5.248 3.053-9.745 4.664-14.821 4.278-10.746 6.628-22.02 12.517-29.046 1.612-1.924 4.241-2.664 6.967-3.394l3.662-6.633c37.52 14.401 79.516 18.266 121.468 8.74a209.793 209.793 0 0027.741-8.36c1.03 1.826 2.942 5.335 3.455 6.219 2.77.9 5.793 1.366 8.256 5.009 4.406 7.527 7.42 16.432 11.09 27.189 1.611 5.075 2.407 9.572 4.698 14.82.523 1.196 1.389 2.88 2.004 4.146 4.306 8.938 14.308 13.03 22.352 9.155 7.981-3.845 11.033-14.084 6.875-22.974-.618-1.28-1.467-3.141-2.107-4.353-2.675-5.063-5.708-8.462-8.672-12.886-6.121-9.576-11.198-17.53-14.337-25.668-1.312-4.198.222-6.808 1.244-9.535-.612-.702-1.922-4.666-2.695-6.53 44.726-26.408 77.716-68.565 93.208-117.252 2.092.328 5.728.972 6.91 1.209 2.431-1.604 4.667-3.697 9.051-3.351 8.632 1.248 17.492 4.454 28.19 8.29 4.973 1.906 8.979 4.117 14.51 5.598 1.17.312 2.844.604 4.18.898.108.026.203.079.311.103.072.016.173.019.242.035 9.587 2.064 18.897-3.183 20.867-11.815 1.968-8.63-4.15-17.392-13.681-19.692-1.386-.315-3.352-.85-4.699-1.106-5.626-1.065-10.204-.802-15.511-1.243-11.303-1.185-20.666-2.148-28.985-4.768-3.392-1.316-5.805-5.352-6.979-7.013l-6.53-1.9c3.386-24.492 2.473-49.981-3.385-75.485-5.912-25.742-16.362-49.285-30.297-70.027 1.674-1.523 4.837-4.324 5.734-5.148.263-2.9.037-5.942 3.04-9.155 6.359-5.97 14.376-10.92 24.045-16.893 4.59-2.7 8.833-4.44 13.439-7.842 1.042-.77 2.464-1.988 3.558-2.868 7.756-6.186 9.542-16.857 3.973-23.837-5.568-6.98-16.358-7.638-24.114-1.451-1.103.874-2.601 2.015-3.592 2.867-4.341 3.735-7.022 7.423-10.675 11.297-7.974 8.099-14.564 14.856-21.8 19.727-3.135 1.825-7.727 1.193-9.811 1.07l-6.15 4.388c-35.065-36.77-82.807-60.278-134.215-64.845a390.545 390.545 0 01-.38-7.22c-2.104-2.014-4.646-3.733-5.285-8.084-.704-8.694.47-18.047 1.83-29.33.751-5.273 1.999-9.652 2.212-15.374.048-1.3-.03-3.188-.035-4.595 0-9.92-7.239-17.965-16.168-17.964zM368.24 224.135l-4.803 84.813-.345.173c-.322 7.588-6.567 13.646-14.233 13.646-3.14 0-6.04-1.008-8.395-2.729l-.138.07-69.544-49.3c21.374-21.016 48.712-36.548 80.219-43.702a170.388 170.388 0 0117.239-2.97zm40.523 0c36.784 4.525 70.802 21.18 96.87 46.708l-69.094 48.988-.242-.104c-6.132 4.48-14.773 3.368-19.553-2.625a14.159 14.159 0 01-3.11-8.257l-.069-.035zm-163.2 78.353l63.497 56.796-.069.345c5.732 4.983 6.577 13.629 1.797 19.623a14.252 14.252 0 01-7.393 4.87l-.07.277-81.392 23.492c-4.143-37.88 4.785-74.703 23.63-105.403zm285.393.035c9.435 15.292 16.579 32.371 20.832 50.888 4.202 18.294 5.257 36.555 3.524 54.204l-81.808-23.561-.069-.346c-7.325-2.002-11.827-9.454-10.122-16.928a14.135 14.135 0 014.526-7.566l-.035-.172 63.152-56.52zM375.46 363.67h26.014l16.168 20.21-5.804 25.22-23.354 11.227-23.423-11.262-5.804-25.22zm83.396 69.163a14.185 14.185 0 013.282.242l.139-.173 84.19 14.234c-12.32 34.616-35.898 64.606-67.4 84.675l-32.682-78.94.104-.139c-3.003-6.975.002-15.156 6.909-18.482a14.218 14.218 0 015.458-1.417zm-141.4.346c6.424.09 12.187 4.55 13.68 11.09a14.119 14.119 0 01-.795 8.774l.242.311-32.336 78.146c-30.232-19.4-54.312-48.448-67.194-84.088l83.466-14.164.138.173c.934-.172 1.88-.255 2.798-.242zm70.51 34.236a14.115 14.115 0 016.667 1.416c2.83 1.363 5.016 3.508 6.392 6.08h.31l41.146 74.346c-5.34 1.79-10.83 3.32-16.444 4.595-31.468 7.144-62.836 4.98-91.239-4.699l41.042-74.207h.069a14.272 14.272 0 0112.057-7.531z",
@@ -78,8 +93,8 @@ function KubernetesIcon({
       textTransform: "none",
       marker: "none"
     },
-    fill: colored ? '#fff' : 'white',
-    color: "#000",
+    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))))")),
+    color: colored ? "#000" : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'inherit'),
     fontFamily: "Sans",
     fontWeight: 400,
     overflow: "visible"

package/data1/KubernetesNodeIcon.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,21 +64,23 @@ function KubernetesNodeIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 18.035 17.5",
-    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("g", {
     strokeWidth: 0
   }, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#326ce5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#326ce5" : (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: "M8.958.463a1.136 1.126 0 00-.435.11l-5.94 2.838a1.136 1.126 0 00-.614.764L.504 10.55a1.136 1.126 0 00.154.864 1.136 1.126 0 00.064.09l4.112 5.111a1.136 1.126 0 00.888.424l6.592-.001a1.136 1.126 0 00.888-.424l4.11-5.112a1.136 1.126 0 00.22-.953l-1.468-6.375a1.136 1.126 0 00-.615-.764L9.51.573a1.136 1.126 0 00-.55-.11z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M8.955.002a1.199 1.19 0 00-.459.117l-6.27 2.995a1.199 1.19 0 00-.65.806L.03 10.65a1.199 1.19 0 00.163.912 1.199 1.19 0 00.068.095l4.34 5.396a1.199 1.19 0 00.937.447l6.96-.001a1.199 1.19 0 00.937-.447l4.339-5.397a1.199 1.19 0 00.231-1.006l-1.549-6.73a1.199 1.19 0 00-.648-.806L9.537.118a1.199 1.19 0 00-.582-.116zm.003.461a1.136 1.126 0 01.55.11L15.45 3.41a1.136 1.126 0 01.615.764l1.467 6.375a1.136 1.126 0 01-.22.953l-4.109 5.113a1.136 1.126 0 01-.888.423l-6.593.001a1.136 1.126 0 01-.888-.424l-4.11-5.111a1.136 1.126 0 01-.065-.09 1.136 1.126 0 01-.154-.863L1.97 4.176a1.136 1.126 0 01.614-.764L8.523.574a1.136 1.126 0 01.435-.11z",
@@ -78,13 +93,13 @@ function KubernetesNodeIcon({
       textTransform: "none",
       marker: "none"
     },
-    fill: colored ? '#fff' : 'white',
-    color: "#000",
+    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))))")),
+    color: colored ? "#000" : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'inherit'),
     fontFamily: "Sans",
     fontWeight: 400,
     overflow: "visible"
   }), /*#__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: "M9 3.836c-.139-.004-3.996 1.892-4.046 1.99-.121.233-.999 4.28-.947 4.368.03.05.662.852 1.404 1.78l1.35 1.689h2.221l2.222.001 1.413-1.765 1.414-1.766-.495-2.168c-.272-1.193-.516-2.189-.54-2.213-.07-.067-3.921-1.914-3.996-1.916zm.196.948l.909.263-.91.264-.908-.264zm-.91.364l.852.253-.004 1.184-.847-.47zm1.819 0v.967l-.847.47L9.254 5.4zM7.907 6.763l.91.264-.91.263-.909-.263zm2.209 0l.909.264-.91.263-.908-.263zm-3.118.364l.851.253-.004 1.184L7 8.094zm1.818 0v.968l-.847.469-.004-1.184zm.39 0l.852.253-.004 1.184-.847-.47zm1.819 0v.968l-.847.469-.004-1.184zm-3.45 1.515c.27.01.061.282.369.428.327.156.395-.235.6.064.207.299-.183.223-.154.585.03.362.402.225.246.552-.155.328-.285-.047-.584.159-.298.206.006.46-.355.489-.362.029-.102-.27-.43-.426-.327-.156-.395.235-.6-.064-.207-.299.183-.223.154-.585-.029-.361-.402-.225-.246-.552.156-.328.285.047.584-.159.299-.206-.006-.46.356-.489a.56.56 0 01.06-.002zm2.336.363c.483.014.015.468.456.665.441.198.467-.454.8-.103.332.352-.32.341-.148.793.172.452.652.009.638.492-.014.484-.467.015-.665.456-.197.442.454.468.103.8-.352.332-.34-.32-.792-.148-.452.173-.01.652-.493.638-.483-.013-.014-.467-.456-.664-.441-.198-.467.454-.8.102-.332-.351.32-.34.148-.792-.173-.452-.652-.009-.638-.492.014-.484.467-.015.665-.457.197-.441-.454-.467-.103-.8.351-.331.34.32.792.148.452-.172.01-.651.493-.638zm-2.315.254a.532.532 0 100 1.063.532.532 0 000-1.063zm2.265.48a1.062 1.062 0 10-.001 2.125 1.062 1.062 0 000-2.124z"
   })));
   if (!colormode) return _svgEl;