@likec4/diagram 1.26.2 → 1.27.1

package/dist/overlays/element-details/ElementDetailsCard.css.js

@@ -1,35 +1,237 @@
-/* empty css                                      */
-var backdropBlur = "var(--paikoy2)";
-var backdropOpacity = "var(--paikoy3)";
-var dialog = "paikoy4";
-var card = "paikoy5";
-var cardHeader = "paikoy6";
-var title = "paikoy7";
-var elementIcon = "paikoy8";
-var viewButton = "paikoyb";
-var viewButtonTitle = "paikoyc";
-var tabsRoot = "paikoyd";
-var tabsList = "paikoye";
-var tabsTab = "paikoyf";
-var tabsPanel = "paikoyg";
-var propertiesGrid = "paikoyh";
-var propertyLabel = "paikoyi";
-var resizeHandle = "paikoyj";
-export {
-  backdropBlur,
-  backdropOpacity,
-  card,
-  cardHeader,
-  dialog,
-  elementIcon,
-  propertiesGrid,
-  propertyLabel,
-  resizeHandle,
-  tabsList,
-  tabsPanel,
-  tabsRoot,
-  tabsTab,
-  title,
-  viewButton,
-  viewButtonTitle
-};
+import { css } from '@likec4/styles/css';
+
+const backdropBlur = "--_blur";
+const backdropOpacity = "--_opacity";
+const dialog = css({
+  boxSizing: "border-box",
+  margin: 0,
+  padding: 0,
+  position: "fixed",
+  inset: 0,
+  width: "100vw",
+  height: "100vh",
+  maxWidth: "100vw",
+  maxHeight: "100vh",
+  background: "[transparent]",
+  border: "transparent",
+  _backdrop: {
+    // WebkitBackdropFilter: `blur(${backdropBlur})`,
+    backdropFilter: "auto",
+    backdropBlur: `var(${backdropBlur})`,
+    backgroundColor: `[rgb(36 36 36 / var(${backdropOpacity}, 5%))]`
+  }
+});
+const card = css({
+  position: "absolute",
+  pointerEvents: "all",
+  gap: "lg",
+  justifyContent: "stretch",
+  backgroundColor: "mantine.colors.body",
+  backgroundImage: `linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px)`,
+  borderTopColor: "likec4.palette.fill",
+  _dark: {
+    backgroundColor: `mantine.colors.dark[6]`,
+    backgroundImage: `
+          linear-gradient(180deg, color-mix(in srgb, {colors.likec4.palette.fill} 15%, transparent), transparent 80px),
+          linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px)
+        `
+  },
+  "& .react-flow__attribution": {
+    display: "none"
+  }
+});
+const cardHeader = css({
+  flex: 0,
+  cursor: "move"
+});
+const title = css({
+  display: "block",
+  fontFamily: "likec4.element",
+  fontOpticalSizing: "auto",
+  fontStyle: "normal",
+  fontWeight: 600,
+  fontSize: "24px",
+  // lineHeight: 1.15,
+  lineHeight: "xs"
+  // color: vars.element.hiContrast
+});
+const iconSize = "40px";
+const elementIcon = css({
+  flex: `0 0 ${iconSize}`,
+  height: iconSize,
+  width: iconSize,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  alignSelf: "flex-start",
+  cursor: "move",
+  _dark: {
+    mixBlendMode: "hard-light"
+  },
+  "& :where(svg, img)": {
+    width: "100%",
+    height: "auto",
+    maxHeight: "100%",
+    pointerEvents: "none",
+    filter: `
+    drop-shadow(0 0 3px rgb(0 0 0 / 10%))
+    drop-shadow(0 1px 8px rgb(0 0 0 / 5%))
+    drop-shadow(1px 1px 16px rgb(0 0 0 / 2%))
+  `
+  },
+  "& img": {
+    objectFit: "contain"
+  }
+});
+const viewTitleColor = "--view-title-color";
+const iconColor = "--icon-color";
+const viewButton = css({
+  // display: 'flex',
+  width: "100%",
+  background: "mantine.colors.body",
+  borderRadius: "sm",
+  padding: `10px 8px`,
+  // gap: 6,
+  // alignItems: 'flex-start',
+  transition: "fast",
+  border: `1px dashed`,
+  borderColor: "mantine.colors.defaultBorder",
+  [viewTitleColor]: "{colors.mantine.colors.dark[1]}",
+  _hover: {
+    background: "mantine.colors.defaultHover",
+    [iconColor]: "{colors.mantine.colors.dark[1]}",
+    [viewTitleColor]: "{colors.mantine.colors.defaultColor}"
+  },
+  _dark: {
+    background: "mantine.colors.dark[6]"
+  },
+  _light: {
+    [iconColor]: "{colors.mantine.colors.gray[6]}",
+    [viewTitleColor]: "{colors.mantine.colors.gray[7]}",
+    _hover: {
+      [iconColor]: "{colors.mantine.colors.gray[7]}"
+    }
+  },
+  "& .mantine-ThemeIcon-root": {
+    transition: "fast",
+    // color: fallbackVar(iconColor, 'mantine.colors.dark[2])',
+    color: `[var(${iconColor}, {colors.mantine.colors.dark[2]})]`,
+    "--ti-size": "22px",
+    _hover: {
+      color: "mantine.colors.defaultColor"
+    }
+  },
+  "& > *": {
+    transition: `all 130ms {easings.inOut}`
+  },
+  "&:hover > *": {
+    transitionTimingFunction: "out",
+    transform: "translateX(1.6px)"
+  }
+});
+const viewButtonTitle = css({
+  transition: "fast",
+  color: `[var(${viewTitleColor}, {colors.mantine.colors.gray[7]})]`,
+  fontSize: "15px",
+  fontWeight: 500,
+  lineHeight: "1.4"
+});
+const tabsRoot = css({
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "stretch",
+  overflow: "hidden",
+  gap: "sm"
+});
+const tabsList = css({
+  // flex: '0',
+  background: "mantine.colors.gray[1]",
+  borderRadius: "sm",
+  flexWrap: "nowrap",
+  gap: "6px",
+  padding: "4px",
+  _dark: {
+    background: "mantine.colors.dark[7]"
+  }
+});
+const tabsTab = css({
+  fontSize: "xs",
+  fontWeight: 500,
+  flexGrow: 1,
+  padding: "6px 8px",
+  transition: "fast",
+  borderRadius: "sm",
+  color: "mantine.colors.gray[7]",
+  _hover: {
+    transitionTimingFunction: "out",
+    color: "mantine.colors.defaultColor",
+    background: "mantine.colors.gray[3]"
+  },
+  ["&[data-active]"]: {
+    transition: "none",
+    background: "mantine.colors.white",
+    shadow: "xs",
+    color: "mantine.colors.defaultColor"
+  },
+  _dark: {
+    color: "mantine.colors.dark[1]",
+    _hover: {
+      color: "mantine.colors.white",
+      background: "mantine.colors.dark[6]"
+    },
+    [`&:is([data-active])`]: {
+      color: "mantine.colors.white",
+      background: "mantine.colors.dark[5]"
+    }
+  }
+});
+const tabsPanel = css({
+  flex: 1,
+  overflow: "hidden",
+  position: "relative",
+  "&:not(:has(.mantine-ScrollArea-root))": {
+    paddingLeft: "4px",
+    paddingRight: "4px"
+  },
+  "& .mantine-ScrollArea-root": {
+    width: "100%",
+    height: "100%",
+    "& > div": {
+      paddingLeft: "4px",
+      paddingRight: "4px"
+    }
+  }
+});
+const propertiesGrid = css({
+  flex: 1,
+  display: "grid",
+  gridTemplateColumns: "min-content 1fr",
+  gridAutoRows: "min-content max-content",
+  gap: `[20px 16px]`,
+  alignItems: "baseline",
+  justifyItems: "stretch"
+});
+const propertyLabel = css({
+  justifySelf: "end"
+});
+const resizeHandle = css({
+  position: "absolute",
+  width: "14px",
+  height: "14px",
+  border: `3.5px solid`,
+  borderColor: "mantine.colors.dark[3]",
+  borderTop: "none",
+  borderLeft: "none",
+  borderRadius: "2px",
+  bottom: "2px",
+  right: "2px",
+  transition: "fast",
+  cursor: "se-resize",
+  _hover: {
+    borderWidth: "4px",
+    borderColor: "mantine.colors.dark[1]"
+  }
+});
+
+export { backdropBlur, backdropOpacity, card, cardHeader, dialog, elementIcon, propertiesGrid, propertyLabel, resizeHandle, tabsList, tabsPanel, tabsRoot, tabsTab, title, viewButton, viewButtonTitle };

package/dist/overlays/element-details/ElementDetailsCard.js

@@ -1,27 +1,25 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { isScopedElementView, isDeploymentView } from "@likec4/core";
-import { RemoveScroll, Card, Box, Group, Text, CloseButton, Badge, Flex, ActionIconGroup, ActionIcon, Tooltip as Tooltip$1, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Stack, Divider as Divider$1, Code, UnstyledButton, ThemeIcon } from "@mantine/core";
-import { useViewportSize, useSessionStorage } from "@mantine/hooks";
-import { useSyncedRef, useDebouncedCallback, useTimeoutEffect } from "@react-hookz/web";
-import { IconExternalLink, IconFileSymlink, IconZoomScan, IconStack2 } from "@tabler/icons-react";
-import clsx from "clsx";
-import { useDragControls, useMotionValue, m } from "framer-motion";
-import { useState, useCallback, useRef } from "react";
-import { pipe, map, partition, only, clamp, isNullish } from "remeda";
-import { Link } from "../../components/Link.js";
-import { useDiagram } from "../../hooks/useDiagram.js";
-import { getVarName } from "../../utils/css.js";
-import { elementIcon, card, cardHeader, title, tabsPanel, tabsTab, tabsList, tabsRoot, propertiesGrid, resizeHandle, dialog, propertyLabel, viewButton, viewButtonTitle, backdropOpacity as backdropOpacity$1, backdropBlur as backdropBlur$1 } from "./ElementDetailsCard.css.js";
-import { TabPanelDeployments } from "./TabPanelDeployments.js";
-import { TabPanelRelationships } from "./TabPanelRelationships.js";
-import { TabPanelStructure } from "./TabPanelStructure.js";
-import { useLikeC4Model } from "../../likec4model/useLikeC4Model.js";
-import { useUpdateEffect } from "../../hooks/useUpdateEffect.js";
-import { IconRenderer } from "../../context/IconRenderer.js";
-import { stopPropagation } from "../../utils/xyflow.js";
-import { IfEnabled, DiagramFeatures } from "../../context/DiagramFeatures.js";
-const backdropBlur = getVarName(backdropBlur$1);
-const backdropOpacity = getVarName(backdropOpacity$1);
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { isScopedElementView, isDeploymentView } from '@likec4/core';
+import { cx, css } from '@likec4/styles/css';
+import { RemoveScroll, Card, Box, Group, Text, CloseButton, Badge, Flex, ActionIconGroup, ActionIcon, Tooltip as Tooltip$1, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Stack, Divider as Divider$1, Code, UnstyledButton, ThemeIcon } from '@mantine/core';
+import { useViewportSize, useSessionStorage } from '@mantine/hooks';
+import { useSyncedRef, useDebouncedCallback, useTimeoutEffect } from '@react-hookz/web';
+import { IconExternalLink, IconFileSymlink, IconZoomScan, IconStack2 } from '@tabler/icons-react';
+import { useDragControls, useMotionValue, m } from 'framer-motion';
+import { useState, useCallback, useRef } from 'react';
+import { pipe, map, partition, only, clamp, isNullish } from 'remeda';
+import { Link } from '../../components/Link.js';
+import { useDiagram } from '../../hooks/useDiagram.js';
+import { elementIcon, cardHeader, title, tabsPanel, tabsTab, tabsList, tabsRoot, propertiesGrid, resizeHandle, card, backdropOpacity, backdropBlur, dialog, propertyLabel, viewButton, viewButtonTitle } from './ElementDetailsCard.css.js';
+import { TabPanelDeployments } from './TabPanelDeployments.js';
+import { TabPanelRelationships } from './TabPanelRelationships.js';
+import { TabPanelStructure } from './TabPanelStructure.js';
+import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
+import { useUpdateEffect } from '../../hooks/useUpdateEffect.js';
+import { IconRenderer } from '../../context/IconRenderer.js';
+import { stopPropagation } from '../../utils/xyflow.js';
+import { IfEnabled, DiagramFeatures } from '../../context/DiagramFeatures.js';
+
 const Divider = Divider$1.withProps({
   mb: 8,
   labelPosition: "left",
@@ -58,7 +56,6 @@ function ElementDetailsCard({
   fqn,
   onClose
 }) {
-  var _a, _b, _c;
   const [opened, setOpened] = useState(false);
   const windowSize = useViewportSize();
   const windowWidth = windowSize.width || window.innerWidth || 1200, windowHeight = windowSize.height || window.innerHeight || 800;
@@ -79,13 +76,13 @@ function ElementDetailsCard({
       return isScopedElementView(v) && v.viewOf === fqn;
     })
   );
-  let defaultView = ((_a = nodeModel == null ? void 0 : nodeModel.navigateTo) == null ? void 0 : _a.$view) ?? ((_b = elementModel.defaultView) == null ? void 0 : _b.$view) ?? null;
-  if ((defaultView == null ? void 0 : defaultView.id) === viewId) {
+  let defaultView = nodeModel?.navigateTo?.$view ?? elementModel.defaultView?.$view ?? null;
+  if (defaultView?.id === viewId) {
     defaultView = null;
   }
   const defaultLink = only(elementModel.links);
   const controls = useDragControls();
-  const isCompound = (((_c = nodeModel == null ? void 0 : nodeModel.$node.children) == null ? void 0 : _c.length) ?? 0) > 0;
+  const isCompound = (nodeModel?.$node.children?.length ?? 0) > 0;
   const _width = Math.min(700, windowWidth - MIN_PADDING * 2);
   const _height = Math.min(650, windowHeight - MIN_PADDING * 2);
   const fromPositon = rectFromNode ? {
@@ -135,19 +132,18 @@ function ElementDetailsCard({
     [],
     50
   );
-  const notation = (nodeModel == null ? void 0 : nodeModel.$node.notation) ?? null;
+  const notation = nodeModel?.$node.notation ?? null;
   const elementIcon$1 = IconRenderer({
     element: {
       id: fqn,
       title: elementModel.title,
-      icon: (nodeModel == null ? void 0 : nodeModel.icon) ?? elementModel.icon
+      icon: nodeModel?.icon ?? elementModel.icon
     },
     className: elementIcon
   });
   useTimeoutEffect(() => {
-    var _a2, _b2;
-    if (!((_a2 = ref.current) == null ? void 0 : _a2.open)) {
-      (_b2 = ref.current) == null ? void 0 : _b2.showModal();
+    if (!ref.current?.open) {
+      ref.current?.showModal();
     }
   }, 20);
   useTimeoutEffect(() => {
@@ -157,12 +153,12 @@ function ElementDetailsCard({
     m.dialog,
     {
       ref,
-      className: clsx(dialog, RemoveScroll.classNames.fullWidth),
+      className: cx(dialog, RemoveScroll.classNames.fullWidth),
       layout: true,
       layoutRoot: true,
       initial: {
         [backdropBlur]: "0px",
-        [backdropOpacity]: "10%"
+        [backdropOpacity]: "5%"
       },
       animate: {
         [backdropBlur]: "3px",
@@ -176,10 +172,9 @@ function ElementDetailsCard({
         }
       },
       onClick: (e) => {
-        var _a2, _b2, _c2;
         e.stopPropagation();
-        if (((_b2 = (_a2 = e.target) == null ? void 0 : _a2.nodeName) == null ? void 0 : _b2.toUpperCase()) === "DIALOG") {
-          (_c2 = ref.current) == null ? void 0 : _c2.close();
+        if (e.target?.nodeName?.toUpperCase() === "DIALOG") {
+          ref.current?.close();
         }
       },
       onDoubleClick: stopPropagation,
@@ -199,7 +194,12 @@ function ElementDetailsCard({
           withBorder: true,
           shadow: "md",
           component: m.div,
-          className: card,
+          className: cx(
+            css({
+              likec4Palette: nodeModel?.color ?? elementModel.color
+            }),
+            card
+          ),
           initial: {
             top,
             left,
@@ -208,7 +208,7 @@ function ElementDetailsCard({
             opacity: 0,
             originX,
             originY,
-            scale: Math.max(fromScale, 0.7)
+            scale: Math.max(fromScale, 0.65)
           },
           animate: {
             opacity: 1,
@@ -227,7 +227,6 @@ function ElementDetailsCard({
             width,
             height
           },
-          "data-likec4-color": (nodeModel == null ? void 0 : nodeModel.color) ?? elementModel.color,
           children: [
             /* @__PURE__ */ jsxs(
               Box,
@@ -425,14 +424,14 @@ const ViewButton = ({
   ] }) });
 };
 function ElementProperty({
-  title: title2,
+  title,
   emptyValue = `undefined`,
   children,
   style,
   ...props
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(PropertyLabel, { children: title2 }),
+    /* @__PURE__ */ jsx(PropertyLabel, { children: title }),
     /* @__PURE__ */ jsx(
       Text,
       {
@@ -457,6 +456,5 @@ function ElementMetata({
     /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Code, { block: true, children: JSON.stringify(value, null, 2) }) })
   ] });
 }
-export {
-  ElementDetailsCard
-};
+
+export { ElementDetailsCard };

package/dist/overlays/element-details/TabPanelDeployments.css.js

@@ -1,11 +1,62 @@
-/* empty css                                       */
-var treeNode = "_6nb9wd0";
-var treeNodeLabel = "_6nb9wd1";
-var nodeLabel = "_6nb9wd3 _6nb9wd2";
-var instanceLabel = "_6nb9wd4 _6nb9wd2";
-export {
-  instanceLabel,
-  nodeLabel,
-  treeNode,
-  treeNodeLabel
-};
+import { css, cx } from '@likec4/styles/css';
+
+const treeNode = css({
+  [`&[data-level='1']`]: {
+    marginBottom: "sm"
+  }
+});
+const treeNodeLabel = css({
+  cursor: "default",
+  marginTop: 0,
+  marginBottom: 0
+});
+const label = css({
+  transition: "fast",
+  color: "mantine.colors.gray[7]",
+  _dark: {
+    color: "mantine.colors.dark[1]"
+  },
+  "& > *": {
+    transition: "fast"
+  },
+  _hover: {
+    transitionTimingFunction: "out",
+    "& > :not([data-no-transform])": {
+      transitionTimingFunction: "out",
+      transform: "translateX(1px)"
+    }
+  }
+  //   '.mantine-Button-root:hover & > :not([data-no-transform])': {
+  // transitionTimingFunction: 'out',
+  //   transform: 'translateX(1px)',
+  //   },
+});
+const nodeLabel = cx(label);
+const instanceLabel = cx(
+  label,
+  css({
+    cursor: "pointer",
+    width: "100%",
+    justifyContent: "stretch",
+    flexWrap: "nowrap",
+    height: "36px",
+    paddingInlineStart: "16px",
+    paddingInlineEnd: "10px",
+    borderRadius: "sm",
+    alignItems: "center",
+    color: "mantine.colors.gray[7]",
+    _dark: {
+      color: "mantine.colors.gray.lightColor"
+    },
+    _hover: {
+      background: "mantine.colors.gray.lightHover"
+    },
+    "& .tabler-icon": {
+      transition: "fast",
+      width: "90%",
+      opacity: 0.65
+    }
+  })
+);
+
+export { instanceLabel, nodeLabel, treeNode, treeNodeLabel };

package/dist/overlays/element-details/TabPanelDeployments.js

@@ -1,11 +1,12 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useTree, Alert, Tree, Box, rem, Button, Group, Text, ThemeIcon, Menu } from "@mantine/core";
-import { IconInfoCircle, IconTarget, IconZoomScan } from "@tabler/icons-react";
-import { memo, useMemo, useEffect } from "react";
-import { useDiagram } from "../../hooks/useDiagram.js";
-import { useLikeC4Model } from "../../likec4model/useLikeC4Model.js";
-import { treeNodeLabel, treeNode, nodeLabel, instanceLabel } from "./TabPanelDeployments.css.js";
-import { stopPropagation } from "../../utils/xyflow.js";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTree, Alert, Tree, Box, rem, Button, Group, Text, ThemeIcon, Menu } from '@mantine/core';
+import { IconInfoCircle, IconTarget, IconZoomScan } from '@tabler/icons-react';
+import { memo, useMemo, useEffect } from 'react';
+import { useDiagram } from '../../hooks/useDiagram.js';
+import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
+import { treeNodeLabel, treeNode, nodeLabel, instanceLabel } from './TabPanelDeployments.css.js';
+import { stopPropagation } from '../../utils/xyflow.js';
+
 const DeploymentNodeRenderer = ({
   node
 }) => /* @__PURE__ */ jsxs(Group, { className: nodeLabel, gap: 6, align: "baseline", wrap: "nowrap", children: [
@@ -167,6 +168,5 @@ const TabPanelDeployments = memo(({ elementFqn }) => {
     )
   );
 });
-export {
-  TabPanelDeployments
-};
+
+export { TabPanelDeployments };

package/dist/overlays/element-details/TabPanelRelationships.css.js

@@ -1,9 +1,99 @@
-/* empty css                                         */
-var fqn = "k4m020";
-var relationshipStat = "k4m021";
-var xyflow = "k4m022";
-export {
-  fqn,
-  relationshipStat,
-  xyflow
-};
+import { css } from '@likec4/styles/css';
+
+const fqn = css({
+  display: "inline-block",
+  fontSize: "sm",
+  fontWeight: 500,
+  whiteSpace: "nowrap",
+  padding: "3px 6px",
+  borderRadius: 3,
+  background: `likec4.palette.fill/75`,
+  lineHeight: 1.2,
+  color: "likec4.palette.hiContrast"
+  // selectors: {
+  //   [`${whereDark} &`]: {
+  //   }
+  // }
+});
+const relationshipStat = css({
+  _light: {
+    background: "mantine.colors.gray[1]",
+    "&[data-missing": {}
+  },
+  // [`&[data-zero]`]: {
+  //   color: mantine.colors.dimmed
+  // },
+  // [`${whereLight} &[data-zero]`]: {
+  //   background: mantine.colors.gray[3]
+  // },
+  [`&[data-missing]`]: {
+    color: "mantine.colors.orange[4]",
+    background: `mantine.colors.orange[8]/15`,
+    borderColor: `mantine.colors.orange[5]/20`,
+    _light: {
+      color: "mantine.colors.orange[8]"
+    }
+  }
+});
+const xyflow = css({
+  flex: "1 1 100%",
+  position: "relative",
+  width: "100%",
+  height: "100%",
+  background: "mantine.colors.body",
+  border: `1px solid {colors.mantine.colors.defaultBorder}`,
+  borderRadius: "sm",
+  _light: {
+    borderColor: "mantine.colors.gray[3]",
+    background: "mantine.colors.gray[1]"
+  }
+});
+css({
+  _before: {
+    content: '"scope:"',
+    position: "absolute",
+    top: 0,
+    left: 8,
+    fontSize: "2xs",
+    fontWeight: 500,
+    lineHeight: "1",
+    color: "mantine.colors.dimmed",
+    opacity: 0.85,
+    transform: "translateY(-100%) translateY(-2px)"
+  },
+  _light: {
+    "& .mantine-SegmentedControl-root": {
+      background: "mantine.colors.gray[3]"
+    }
+  }
+});
+css({
+  display: "inline-block",
+  fontSize: "xl",
+  fontWeight: 600,
+  padding: "1px 5px",
+  minWidth: 24,
+  textAlign: "center",
+  borderRadius: "sm",
+  background: "mantine.colors.dark[7]",
+  color: "mantine.colors.defaultColor",
+  [`&[data-zero]`]: {
+    color: "mantine.colors.dimmed"
+  },
+  [`&[data-missing]`]: {
+    color: "mantine.colors.orange[4]",
+    background: `mantine.colors.orange[8]/20`
+  }
+  // _light: {
+  //   background: 'mantine.colors.gray[4]',
+  //   color: 'mantine.colors.dark[6]',
+  //   [`&[data-zero]`]: {
+  //     background: 'mantine.colors.gray[3]',
+  //   },
+  //   [`&[data-missing]`]: {
+  //     color: 'mantine.colors.orange[8]',
+  //   },
+  // },
+});
+
+export { fqn, relationshipStat, xyflow };