@likec4/styles 1.44.0 → 1.46.0

package/dist/preset.mjs

@@ -3935,11 +3935,11 @@ function createPreset(options) {
 const keyframes = defineKeyframes({
   "indicatorOpacity": {
     "0%": {
-      opacity: 0.9,
+      opacity: 0.8,
       strokeOpacity: 0.8
     },
     "100%": {
-      opacity: 0.6,
+      opacity: 0.4,
       strokeOpacity: 0.4
     }
   },
@@ -4744,18 +4744,23 @@ const paletteGlobalVars = {
   "--likec4-palette-stroke": "#2563eb",
   "--likec4-palette-hiContrast": "#eff6ff",
   "--likec4-palette-loContrast": "#bfdbfe",
-  "--likec4-palette-relation-stroke": "#6E6E6E",
-  "--likec4-palette-relation-label": "#C6C6C6",
-  "--likec4-palette-relation-label-bg": "#18191b"
+  "--likec4-palette-relation-stroke": "#8D8D8D",
+  "--likec4-palette-relation-label": "#C9C9C9",
+  "--likec4-palette-relation-label-bg": "#18191B"
 };
 const mantine = {
   colors: {
+    white: "var(--mantine-color-white)",
+    black: "var(--mantine-color-black)",
     text: "var(--mantine-color-text)",
     body: "var(--mantine-color-body)",
+    anchor: "var(--mantine-color-anchor)",
     defaultBorder: "var(--mantine-color-default-border)",
     dimmed: "var(--mantine-color-dimmed)",
     dark: {
+      "3": "var(--mantine-color-dark-3)",
       "4": "var(--mantine-color-dark-4)",
+      "5": "var(--mantine-color-dark-5)",
       "6": "var(--mantine-color-dark-6)",
       "7": "var(--mantine-color-dark-7)",
       "8": "var(--mantine-color-dark-8)"
@@ -4763,11 +4768,16 @@ const mantine = {
     gray: {
       "1": "var(--mantine-color-gray-1)",
       "2": "var(--mantine-color-gray-2)",
+      "3": "var(--mantine-color-gray-3)",
       "4": "var(--mantine-color-gray-4)"
     },
     green: {
       "6": "var(--mantine-color-green-6)"
     },
+    yellow: {
+      "2": "var(--mantine-color-yellow-2)",
+      "5": "var(--mantine-color-yellow-5)"
+    },
     orange: {
       "1": "var(--mantine-color-orange-1)",
       "3": "var(--mantine-color-orange-3)",
@@ -4827,9 +4837,9 @@ const conditions = {
     smallZoom: ':where([data-likec4-zoom-small="true"]) &',
     compoundTransparent: ":where([data-compound-transparent]) &",
     edgeActive: ':where([data-likec4-edge-active="true"]) &',
-    whenHovered: ':where(.react-flow__node, .react-flow__edge):has([data-likec4-hovered="true"]) &',
-    whenSelectable: ":where(.react-flow__node, .react-flow__edge):is(.selectable) &",
-    whenSelected: ":where(.react-flow__node, .react-flow__edge):is(.selected) &",
+    whenHovered: ':where(.react-flow__node:has([data-likec4-hovered="true"]), .react-flow__edge:has([data-likec4-hovered="true"]), .likec4-edge-container[data-likec4-hovered="true"]) &',
+    whenSelectable: ":where(.react-flow__node, .react-flow__edge, .likec4-edge-container):is(.selectable) &",
+    whenSelected: ":where(.react-flow__node, .react-flow__edge, .likec4-edge-container):is(.selected) &",
     whenDimmed: ":where(.react-flow__node, .react-flow__edge):has([data-likec4-dimmed]) &",
     whenFocused: ":where(.react-flow__node, .react-flow__edge):is(:focus-visible, :focus, :focus-within) &"
     // likec4Color: ':where([data-likec4-color]) &',
@@ -4872,14 +4882,27 @@ const globalCss = {
       width: "100%",
       height: "100%",
       border: "0px solid transparent",
+      background: "transparent",
       containerName: "likec4-root",
       containerType: "size",
+      _print: {
+        "& .react-flow__background": {
+          display: "none"
+        },
+        "& .react-flow": {
+          background: "transparent !important",
+          "--xy-background-color": "transparent !important"
+        },
+        "& *": {
+          colorAdjust: "exact!",
+          printColorAdjust: "exact!"
+        }
+      },
       "& .mantine-ActionIcon-icon .tabler-icon": {
         width: "75%",
         height: "75%"
       },
       "& .react-flow": {
-        contain: "paint",
         "--xy-background-color": "var(--colors-likec4-background)",
         "--xy-background-pattern-color": "var(--colors-likec4-background-pattern, var(--colors-likec4-background))",
         "&:is(.not-initialized)": {
@@ -4897,6 +4920,16 @@ const globalCss = {
         },
         "& .react-flow__node.draggable:has(.likec4-compound-node)": {
           cursor: "default"
+        },
+        "& .likec4-node-handle-center": {
+          top: "50%!",
+          left: "50%!",
+          right: "unset!",
+          bottom: "unset!",
+          visibility: "hidden!",
+          width: "5px!",
+          height: "5px!",
+          transform: "translate(-50%, -50%)!"
         }
       },
       "& :where(.react-flow__node, .react-flow__edge):has([data-likec4-dimmed])": {
@@ -4912,11 +4945,11 @@ const globalCss = {
         "--xy-edge-label-color": "var(--likec4-palette-relation-label)",
         "--xy-edge-label-background-color": "var(--likec4-palette-relation-label-bg)",
         _dark: {
-          "--xy-edge-label-background-color": "color-mix(in srgb, var(--likec4-palette-relation-label-bg) 50%, transparent)"
+          "--xy-edge-label-background-color": "color-mix(in oklab, var(--likec4-palette-relation-label-bg) 50%, transparent)"
         },
         _light: {
-          "--xy-edge-label-color": "color-mix(in srgb, var(--likec4-palette-relation-label), rgba(255 255 255 / 0.85) 40%)",
-          "--xy-edge-label-background-color": "color-mix(in srgb, var(--likec4-palette-relation-label-bg) 60%, transparent)"
+          "--xy-edge-label-color": "color-mix(in oklab, var(--likec4-palette-relation-label), #FFF 50%)",
+          "--xy-edge-label-background-color": "color-mix(in oklab, var(--likec4-palette-relation-label-bg) 65%, transparent)"
         },
         '&:is([data-likec4-hovered="true"], [data-edge-active="true"])': {
           "--xy-edge-stroke-width": 4,
@@ -4943,10 +4976,18 @@ const globalCss = {
           transitionTimingFunction: "cubic-bezier(0.50, 0, 0.2, 1)",
           transitionDuration: "400ms"
         },
-        "& :where(.react-flow__edges, .react-flow__edgelabel-renderer) > :where(svg, .likec4-edge-label-container)": {
+        "& :where(.react-flow__edgelabel-renderer) > *": {
+          mixBlendMode: {
+            _dark: "screen",
+            _light: "hard-light",
+            _print: "normal!"
+          }
+        },
+        "& :where(.react-flow__edges) > svg": {
           mixBlendMode: {
             _dark: "plus-lighter",
-            _light: "screen"
+            _light: "multiply",
+            _print: "normal!"
           }
         },
         "&:has(.react-flow__node-seq-parallel) :where(.react-flow__edges > svg)": {
@@ -4958,7 +4999,8 @@ const globalCss = {
         "& .react-flow__node-seq-parallel": {
           mixBlendMode: {
             _dark: "luminosity",
-            _light: "color-burn"
+            _light: "color-burn",
+            _print: "normal!"
           }
         }
       },
@@ -5007,29 +5049,59 @@ const layerStyles = defineLayerStyles({
             boxShadow: "lg",
             borderRadius: "md",
             paddingInline: "2"
-          },
-          _whenPanning: {
-            boxShadow: "none",
-            borderRadius: "0"
           }
         }
       },
       action: {
-        description: "LikeC4 panel action layer",
-        value: {
-          color: {
-            base: "likec4.panel.action",
-            _notDisabled: {
-              _hover: "likec4.panel.action.hover"
+        DEFAULT: {
+          description: "LikeC4 panel action layer",
+          value: {
+            color: {
+              base: "likec4.panel.action",
+              _disabled: "likec4.panel.action.disabled",
+              _notDisabled: {
+                _hover: "likec4.panel.action.hover"
+              }
+            },
+            cursor: {
+              base: "pointer",
+              _disabled: "not-allowed"
+            },
+            paddingInline: "xxs",
+            paddingBlock: "xxs",
+            border: "transparent",
+            borderRadius: "sm",
+            backgroundColor: {
+              _notDisabled: {
+                _hover: "likec4.panel.action.bg.hover"
+              }
             }
-          },
-          cursor: "pointer",
-          border: "transparent",
-          borderRadius: "sm",
-          backgroundColor: {
-            base: "likec4.panel.action.bg",
-            _notDisabled: {
-              _hover: "likec4.panel.action.bg.hover"
+          }
+        },
+        filled: {
+          description: "LikeC4 action panel filled layer",
+          value: {
+            color: {
+              base: "likec4.panel.action",
+              _disabled: "likec4.panel.action.disabled",
+              _notDisabled: {
+                _hover: "likec4.panel.action.hover"
+              }
+            },
+            cursor: {
+              base: "pointer",
+              _disabled: "not-allowed"
+            },
+            paddingInline: "xxs",
+            paddingBlock: "xxs",
+            border: "transparent",
+            borderRadius: "sm",
+            backgroundColor: {
+              base: "likec4.panel.action.bg",
+              _disabled: "likec4.panel.action.bg",
+              _notDisabled: {
+                _hover: "likec4.panel.action.bg.hover"
+              }
             }
           }
         }
@@ -5042,12 +5114,7 @@ const layerStyles = defineLayerStyles({
         backgroundColor: "likec4.dropdown.bg",
         border: "1px solid {colors.likec4.dropdown.border}",
         boxShadow: "lg",
-        borderRadius: "md",
-        _whenPanning: {
-          boxShadow: "none",
-          borderRadius: "0px",
-          borderColor: "transparent"
-        }
+        borderRadius: "md"
       }
     }
   }
@@ -5074,18 +5141,20 @@ const actionBtn = defineRecipe({
   className: "action-btn",
   description: "Action Button within Diagram Node (Bottom-Center)",
   base: {
-    pointerEvents: "all",
-    cursor: "pointer",
     color: "var(--actionbtn-color)",
     opacity: 0.75,
     "--actionbtn-color": "var(--likec4-palette-loContrast)",
     "--actionbtn-color-hovered": "var(--likec4-palette-loContrast)",
     "--actionbtn-color-hovered-btn": "var(--likec4-palette-hiContrast)",
-    "--actionbtn-bg-idle": `color-mix(in srgb , var(--likec4-palette-fill),  transparent 99%)`,
-    "--actionbtn-bg-hovered": `color-mix(in srgb , var(--likec4-palette-fill) 65%, var(--likec4-palette-stroke))`,
-    "--actionbtn-bg-hovered-btn": `color-mix(in srgb , var(--likec4-palette-fill) 50%, var(--likec4-palette-stroke))`,
+    "--actionbtn-bg-idle": `color-mix(in oklab , var(--likec4-palette-fill),  transparent 99%)`,
+    "--actionbtn-bg-hovered": `color-mix(in oklab , var(--likec4-palette-fill) 65%, var(--likec4-palette-stroke))`,
+    "--actionbtn-bg-hovered-btn": `color-mix(in oklab , var(--likec4-palette-fill) 50%, var(--likec4-palette-stroke))`,
     "--ai-bg": `var(--actionbtn-bg-idle)`,
     background: `var(--ai-bg)`,
+    _whenSelectable: {
+      pointerEvents: "all",
+      cursor: "pointer"
+    },
     _whenHovered: {
       opacity: 1,
       color: "var(--actionbtn-color-hovered)",
@@ -5104,6 +5173,9 @@ const actionBtn = defineRecipe({
     },
     "& *": {
       pointerEvents: "none"
+    },
+    _print: {
+      display: "none"
     }
   },
   variants: {
@@ -5168,7 +5240,7 @@ const compoundColor = {
   var: "--_compound-color",
   ref: "var(--_compound-color)"
 };
-const parts$3 = defineParts({
+const parts$4 = defineParts({
   root: { selector: "&" },
   titleContainer: { selector: "& .likec4-compound-title-container" },
   title: { selector: "& .likec4-compound-title" },
@@ -5180,7 +5252,7 @@ const parts$3 = defineParts({
 const iconSize = "20px";
 const compoundNode = defineRecipe({
   className: "likec4-compound-node",
-  base: parts$3({
+  base: parts$4({
     root: {
       position: "relative",
       width: "100%",
@@ -5194,17 +5266,17 @@ const compoundNode = defineRecipe({
       borderRadius: borderRadius$1.ref,
       boxSizing: "border-box",
       ["--likec4-palette-outline"]: {
-        _light: "color-mix(in srgb, var(--likec4-palette-stroke) 80%, var(--likec4-palette-hiContrast))",
-        _dark: "color-mix(in srgb, var(--likec4-palette-stroke) 60%, var(--likec4-palette-hiContrast))"
+        base: "oklab(from var(--likec4-palette-stroke) calc(l - 0.05) a b)",
+        _dark: "oklab(from var(--likec4-palette-stroke) calc(l + 0.2) a b)"
       },
       [borderWidth.var]: "3px",
       [borderRadius$1.var]: "6px",
       [compoundTransparency.var]: "100%",
       [borderTransparency.var]: "100%",
-      [indicatorSpacing.var]: `calc(${borderWidth.ref} + 2px)`,
+      [indicatorSpacing.var]: `calc(${borderWidth.ref} + 1px)`,
       [compoundColor.var]: "var(--likec4-palette-loContrast)",
       color: compoundColor.ref,
-      _after: {
+      _before: {
         position: "absolute",
         content: '" "',
         top: `[calc(-1 * ${indicatorSpacing.ref})]`,
@@ -5221,7 +5293,7 @@ const compoundNode = defineRecipe({
           _whenFocused: "block",
           _whenSelected: "block"
         },
-        animationStyle: "indicatorOpacity",
+        animationStyle: "indicator",
         animationPlayState: {
           base: "paused",
           _whenFocused: "running",
@@ -5268,7 +5340,8 @@ const compoundNode = defineRecipe({
       justifyContent: "center",
       mixBlendMode: {
         base: "hard-light",
-        _reduceGraphicsOnPan: "normal"
+        _reduceGraphicsOnPan: "normal",
+        _print: "normal!"
       },
       [`& svg, & img`]: {
         width: "100%",
@@ -5291,7 +5364,7 @@ const compoundNode = defineRecipe({
     actionBtn: {
       "--actionbtn-color": compoundColor.ref,
       "--actionbtn-color-hovered": compoundColor.ref,
-      "--actionbtn-color-hovered-btn": `color-mix(in srgb, ${compoundColor.ref} 80%, #fff)`,
+      "--actionbtn-color-hovered-btn": `color-mix(in oklab, ${compoundColor.ref} 80%, #fff)`,
       opacity: {
         base: 0.6,
         _whenHovered: 0.75,
@@ -5300,6 +5373,9 @@ const compoundNode = defineRecipe({
       },
       _noReduceGraphics: {
         transition: "fast"
+      },
+      _print: {
+        display: "none"
       }
     },
     navigationBtn: {
@@ -5308,6 +5384,9 @@ const compoundNode = defineRecipe({
       left: "0.5",
       _smallZoom: {
         display: "none"
+      },
+      _print: {
+        display: "none"
       }
     },
     detailsBtn: {
@@ -5316,12 +5395,15 @@ const compoundNode = defineRecipe({
       right: "0.5",
       _smallZoom: {
         display: "none"
+      },
+      _print: {
+        display: "none"
       }
     }
   }),
   variants: {
     isTransparent: {
-      false: parts$3({
+      false: parts$4({
         root: {
           boxShadow: {
             _noReduceGraphics: "0 4px 10px 0.5px rgb(0 0 0/10%) , 0 2px 2px -1px rgb(0 0 0/40%)",
@@ -5332,20 +5414,20 @@ const compoundNode = defineRecipe({
           borderColor: "var(--likec4-palette-stroke)"
         }
       }),
-      true: parts$3({
+      true: parts$4({
         root: {
-          backgroundColor: `[color-mix(in srgb, var(--likec4-palette-fill) ${compoundTransparency.ref}, transparent)]`,
-          borderColor: `[color-mix(in srgb, var(--likec4-palette-stroke) ${borderTransparency.ref}, transparent)]`
+          backgroundColor: `color-mix(in oklab, var(--likec4-palette-fill) ${compoundTransparency.ref}, transparent)`,
+          borderColor: `color-mix(in oklab, var(--likec4-palette-stroke) ${borderTransparency.ref}, transparent)`
         }
       })
     },
     // When the compound node is too transparent, the text color should be inverted
     inverseColor: {
-      true: parts$3({
+      true: parts$4({
         root: {
           [compoundColor.var]: {
             base: "var(--likec4-palette-stroke)",
-            _dark: "[color-mix(in srgb, var(--likec4-palette-loContrast) 60%, var(--likec4-palette-fill))]"
+            _dark: "[color-mix(in oklab, var(--likec4-palette-loContrast) 60%, var(--likec4-palette-fill))]"
           }
         },
         actionBtn: {
@@ -5364,22 +5446,22 @@ const compoundNode = defineRecipe({
       false: {}
     },
     borderStyle: {
-      solid: parts$3({
+      solid: parts$4({
         root: {
           borderStyle: "solid"
         }
       }),
-      dashed: parts$3({
+      dashed: parts$4({
         root: {
           borderStyle: "dashed"
         }
       }),
-      dotted: parts$3({
+      dotted: parts$4({
         root: {
           borderStyle: "dotted"
         }
       }),
-      none: parts$3({
+      none: parts$4({
         root: {
           // We still need to have a border for consistent internal coordinates
           // So we use a transparent border and extend background
@@ -5411,7 +5493,7 @@ const edgeActionBtn = defineRecipe({
     translate: "auto",
     // '--ai-bg': 'var(--xy-edge-label-background-color)',
     "--ai-bg": "transparent",
-    "--ai-hover": `color-mix(in srgb , var(--xy-edge-label-background-color), {colors.likec4.mixColor} 10%)`,
+    "--ai-hover": `color-mix(in oklab , var(--xy-edge-label-background-color), {colors.likec4.mixColor} 10%)`,
     "--ai-size": `var(--ai-size-sm)`,
     "--ai-radius": `{radii.sm}`,
     _hover: {
@@ -5430,6 +5512,9 @@ const edgeActionBtn = defineRecipe({
       width: "80%",
       height: "80%",
       strokeWidth: "2"
+    },
+    _print: {
+      display: "none"
     }
   },
   variants: {},
@@ -5438,6 +5523,217 @@ const edgeActionBtn = defineRecipe({
     conditions: ["*"]
   }]
 });
+const parts$3 = defineParts({
+  root: { selector: "&" },
+  stepNumber: { selector: "& .likec4-edge-label__step-number" },
+  contents: { selector: "& .likec4-edge-label__contents" },
+  label: { selector: "& .likec4-edge-label__text" },
+  technology: { selector: "& .likec4-edge-label__technology" }
+});
+const edgeLabel = defineRecipe({
+  className: "likec4-edge-label",
+  jsx: [],
+  base: parts$3({
+    root: {
+      fontFamily: "likec4.relation",
+      paddingBlock: "1",
+      paddingInline: "1.5",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      width: "max-content",
+      maxWidth: "100%",
+      gap: "0.5",
+      color: "var(--xy-edge-label-color)",
+      background: "var(--xy-edge-label-background-color)",
+      border: "0px solid transparent",
+      borderRadius: "4px"
+    },
+    stepNumber: {
+      alignSelf: "stretch",
+      flex: "0 0 auto",
+      fontWeight: 600,
+      fontSize: "14px",
+      padding: "1",
+      textAlign: "center",
+      minWidth: "22px",
+      borderTopLeftRadius: "4px",
+      borderBottomLeftRadius: "4px",
+      _only: {
+        borderRadius: "4px",
+        minWidth: "24px"
+      },
+      background: `[color-mix(in oklab, var(--likec4-palette-relation-label-bg), {colors.likec4.mixColor} 10%)]`,
+      fontVariantNumeric: "tabular-nums",
+      // _dark: {
+      [':where([data-likec4-color="gray"]) &']: {
+        _dark: {
+          background: `[color-mix(in oklab, var(--likec4-palette-relation-label-bg), {colors.likec4.mixColor} 15%)]`
+        }
+      }
+    },
+    contents: {
+      display: "contents",
+      _empty: {
+        display: "none !important"
+      }
+    },
+    label: {
+      whiteSpaceCollapse: "preserve-breaks",
+      fontSize: "14px",
+      lineHeight: "1.2",
+      margin: "0"
+    },
+    technology: {
+      textAlign: "center",
+      whiteSpaceCollapse: "preserve-breaks",
+      fontSize: "11px",
+      lineHeight: "1",
+      opacity: 0.75
+    }
+  }),
+  variants: {
+    pointerEvents: {
+      none: parts$3({
+        root: {
+          pointerEvents: "none"
+        }
+      }),
+      all: parts$3({
+        root: {
+          pointerEvents: "all"
+        }
+      })
+    },
+    cursor: {
+      pointer: parts$3({
+        root: {
+          cursor: "pointer"
+        }
+      }),
+      default: parts$3({
+        root: {
+          cursor: "default"
+        }
+      })
+    },
+    isStepEdge: {
+      false: {},
+      true: parts$3({
+        root: {
+          flexDirection: "row",
+          gap: "1",
+          padding: "0"
+        },
+        contents: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          paddingTop: "0.5",
+          paddingRight: "1",
+          paddingBottom: "1",
+          gap: "0.5"
+        },
+        label: {
+          py: "0.5",
+          paddingRight: "0.5"
+        }
+      })
+    }
+  },
+  defaultVariants: {
+    pointerEvents: "all",
+    isStepEdge: false,
+    cursor: "default"
+  },
+  staticCss: [{
+    conditions: ["*"],
+    isStepEdge: ["*"],
+    cursor: ["*"],
+    pointerEvents: ["*"]
+  }]
+});
+const edgePath = defineSlotRecipe({
+  description: "Recipe for Edge Path",
+  slots: ["path", "pathBg", "markersCtx", "middlePoint"],
+  className: "likec4-edge",
+  jsx: [],
+  base: {
+    path: {
+      fill: "none",
+      strokeDashoffset: 0,
+      _noReduceGraphics: {
+        animationStyle: "xyedgeAnimated",
+        animationPlayState: "paused",
+        transition: "stroke 130ms ease-out,stroke-width 130ms ease-out"
+      },
+      [`:where([data-edge-dir='back']) &`]: {
+        animationDirection: "reverse"
+      },
+      _whenHovered: {
+        _noReduceGraphics: {
+          animationPlayState: "running",
+          animationDelay: "450ms"
+        }
+      },
+      [`:where(.selected, [data-edge-active='true'], [data-edge-animated='true']) &`]: {
+        _noReduceGraphics: {
+          animationPlayState: "running",
+          animationDelay: "0ms"
+        }
+      },
+      _whenDimmed: {
+        animationPlayState: "paused"
+      },
+      _smallZoom: {
+        animationName: "none"
+      },
+      _whenPanning: {
+        strokeDasharray: "none !important",
+        animationPlayState: "paused"
+      }
+    },
+    pathBg: {
+      pointerEvents: "none",
+      fill: "none",
+      strokeWidth: "calc(var(--xy-edge-stroke-width) + 2)",
+      strokeOpacity: 0.08,
+      _noReduceGraphics: {
+        transitionProperty: "stroke-width, stroke-opacity",
+        transitionDuration: "fast",
+        transitionTimingFunction: "inOut"
+      },
+      _whenHovered: {
+        transitionTimingFunction: "out",
+        strokeWidth: "calc(var(--xy-edge-stroke-width) + 4)",
+        strokeOpacity: 0.2
+      },
+      _whenSelected: {
+        strokeWidth: "calc(var(--xy-edge-stroke-width) + 6)",
+        strokeOpacity: 0.25,
+        _whenHovered: {
+          strokeOpacity: 0.4
+        }
+      }
+    },
+    // To fix issue with marker not inheriting color from path - we need to create container
+    markersCtx: {
+      fill: "[var(--xy-edge-stroke)]",
+      stroke: "[var(--xy-edge-stroke)]"
+    },
+    middlePoint: {
+      visibility: "hidden",
+      offsetDistance: "50%",
+      cx: 0,
+      cy: 0,
+      r: 4,
+      pointerEvents: "none"
+    }
+  },
+  staticCss: [{
+    conditions: ["*"]
+  }]
+});
 const parts$2 = defineParts({
   root: { selector: "&" },
   icon: { selector: "& [data-likec4-icon]" },
@@ -5587,6 +5883,9 @@ const elementNodeData = defineRecipe({
       },
       "& a": {
         pointerEvents: "all"
+      },
+      "& .markdown-alert": {
+        mixBlendMode: "screen"
       }
     },
     technology: {
@@ -5635,9 +5934,10 @@ const elementShapeRecipe = defineRecipe({
       pointerEvents: "none",
       overflow: "visible",
       ["--likec4-palette-outline"]: {
-        _light: "color-mix(in srgb, var(--likec4-palette-stroke) 60%, var(--likec4-palette-hiContrast))",
-        _dark: "color-mix(in srgb, var(--likec4-palette-stroke) 30%, var(--likec4-palette-loContrast))"
-      }
+        base: "oklab(from var(--likec4-palette-stroke) calc(l - 0.05) a b)",
+        _dark: "oklab(from var(--likec4-palette-stroke) calc(l + 0.2) a b)"
+      },
+      ["--likec4-outline-size"]: `4px`
     },
     outline: {
       visibility: {
@@ -5666,11 +5966,11 @@ const elementShapeRecipe = defineRecipe({
           boxShadow: {
             base: [
               "0 2px 1px 0 rgb(0 0 0 / 21%)",
-              "0 1px 1px 0 color-mix(in srgb, var(--likec4-palette-stroke) 40%, transparent)",
+              "0 1px 1px 0 color-mix(in oklab, var(--likec4-palette-stroke) 40%, transparent)",
               "0 5px 3px 0 rgb(0 0 0 / 10%)"
             ].join(","),
             _whenHovered: {
-              _light: `rgba(38, 57, 77, 95%) 0px 20px 30px -10px`,
+              base: `rgba(38, 57, 77, 95%) 0px 20px 30px -10px`,
               _dark: `rgba(10, 11, 16, 90%) 0px 20px 30px -10px`
             },
             _whenSelected: "none",
@@ -5681,8 +5981,7 @@ const elementShapeRecipe = defineRecipe({
             base: "background-color 120ms linear, box-shadow 130ms {easings.inOut}",
             _reduceGraphicsOnPan: "none"
           },
-          transitionDelay: "0ms",
-          ["--likec4-outline-size"]: `4px`
+          transitionDelay: "0ms"
         },
         multipleHtml: {
           position: "absolute",
@@ -5710,13 +6009,13 @@ const elementShapeRecipe = defineRecipe({
         outline: {
           position: "absolute",
           content: '" "',
-          top: `[calc(-1 * var(--likec4-outline-size))]`,
-          left: `[calc(-1 * var(--likec4-outline-size))]`,
-          width: `[calc(100% + 2 * var(--likec4-outline-size))]`,
-          height: `[calc(100% + 2 * var(--likec4-outline-size))]`,
+          top: `[calc(-1 * var(--likec4-outline-size) - 1px)]`,
+          left: `[calc(-1 * var(--likec4-outline-size) - 1px)]`,
+          width: `[calc(100% + 2 * var(--likec4-outline-size) + 2px)]`,
+          height: `[calc(100% + 2 * var(--likec4-outline-size) + 2px)]`,
           borderStyle: "solid",
           borderWidth: "var(--likec4-outline-size)",
-          borderRadius: "[10px]",
+          borderRadius: "11px",
           borderColor: "var(--likec4-palette-outline)",
           animationStyle: "indicator"
         }
@@ -5730,7 +6029,7 @@ const elementShapeRecipe = defineRecipe({
           filter: {
             base: [
               "drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21))",
-              "drop-shadow(0 1px 1px color-mix(in srgb, var(--likec4-palette-stroke) 40%, transparent))",
+              "drop-shadow(0 1px 1px color-mix(in oklab, var(--likec4-palette-stroke) 40%, transparent))",
               "drop-shadow(0 5px 3px rgba(0, 0, 0, 0.1))"
             ].join("\n"),
             _whenHovered: [
@@ -5751,7 +6050,7 @@ const elementShapeRecipe = defineRecipe({
             fill: "var(--likec4-palette-stroke)"
           },
           '& [data-likec4-fill="mix-stroke"]': {
-            fill: "[color-mix(in srgb, var(--likec4-palette-stroke) 90%, var(--likec4-palette-fill))]"
+            fill: "[color-mix(in oklab, var(--likec4-palette-stroke) 90%, var(--likec4-palette-fill))]"
           }
         },
         multipleSvg: {
@@ -5781,7 +6080,7 @@ const elementShapeRecipe = defineRecipe({
         outline: {
           stroke: "var(--likec4-palette-outline)",
           fill: "[none]",
-          strokeWidth: 8,
+          strokeWidth: 3,
           strokeOpacity: 0.8,
           animationStyle: "indicator"
         }
@@ -5829,7 +6128,10 @@ const likec4tag = defineRecipe({
           filter: "invert(1) grayscale(1) brightness(1.3) contrast(1000)",
           background: "inherit",
           backgroundClip: "text",
-          mixBlendMode: "plus-lighter"
+          mixBlendMode: {
+            base: "plus-lighter",
+            _print: "normal!"
+          }
         }
       }
     }
@@ -5856,12 +6158,38 @@ const markdownBlock = defineRecipe({
     "--typography-spacing": "calc(0.75 * var(--text-fz-md))",
     "--text-fw-headings": "600",
     "--code-background": {
-      _light: "var(--mantine-color-gray-2)",
-      _dark: "var(--mantine-color-dark-8)"
+      base: mantine.colors.gray[2],
+      _dark: mantine.colors.dark[8]
     },
     "--code-color": {
-      _light: "var(--mantine-color-black)",
-      _dark: "var(--mantine-color-white)"
+      base: mantine.colors.black,
+      _dark: mantine.colors.white
+    },
+    _dark: {
+      "--color-border-default": "#30363d",
+      "--color-accent-fg": "#58a6ff",
+      "--color-accent-emphasis": "#1f6feb",
+      "--color-danger-fg": "#f85149",
+      "--color-danger-emphasis": "#da3633",
+      "--color-attention-fg": "#d29922",
+      "--color-attention-emphasis": "#9e6a03",
+      "--color-done-fg": "#a371f7",
+      "--color-done-emphasis": "#8957e5",
+      "--color-success-fg": "#3fb950",
+      "--color-success-emphasis": "#238636"
+    },
+    _light: {
+      "--color-border-default": "#d0d7de",
+      "--color-accent-fg": "#0969da",
+      "--color-accent-emphasis": "#0969da",
+      "--color-danger-fg": "#d1242f",
+      "--color-danger-emphasis": "#cf222e",
+      "--color-attention-fg": "#9a6700",
+      "--color-attention-emphasis": "#9a6700",
+      "--color-done-fg": "#8250df",
+      "--color-done-emphasis": "#8250df",
+      "--color-success-fg": "#1a7f37",
+      "--color-success-emphasis": "#1f883d"
     },
     fontSize: "var(--text-fz-md)",
     lineHeight: "var(--mantine-line-height)",
@@ -5923,18 +6251,16 @@ const markdownBlock = defineRecipe({
     },
     "& :where(mark)": {
       fontSize: "var(--text-fz-md)",
-      _light: {
-        backgroundColor: "mantine.colors.yellow[2]",
-        color: "inherit"
-      },
+      backgroundColor: mantine.colors.yellow[2],
+      color: "inherit",
       _dark: {
-        backgroundColor: "mantine.colors.yellow[5]",
-        color: "var(--mantine-color-black)"
+        backgroundColor: mantine.colors.yellow[5],
+        color: mantine.colors.black
       }
     },
     "& :where(a)": {
       fontSize: "var(--text-fz-md)",
-      color: "var(--mantine-color-anchor)",
+      color: mantine.colors.anchor,
       textDecoration: "none",
       fontWeight: "500",
       _hover: {
@@ -5947,8 +6273,8 @@ const markdownBlock = defineRecipe({
       border: "none",
       borderBottom: "1px solid",
       borderColor: {
-        _light: "mantine.colors.gray[3]",
-        _dark: "mantine.colors.dark[3]"
+        base: mantine.colors.gray[3],
+        _dark: mantine.colors.dark[3]
       }
     },
     "& :where(pre)": {
@@ -6032,12 +6358,80 @@ const markdownBlock = defineRecipe({
       borderRadius: "var(--mantine-radius-sm)",
       padding: "xs",
       backgroundColor: {
-        _light: "var(--mantine-color-gray-1)",
-        _dark: "var(--mantine-color-dark-5)"
+        base: mantine.colors.gray[1],
+        _dark: mantine.colors.dark[5]
       },
       "&:not(:first-child)": {
         marginTop: "var(--typography-spacing)"
       }
+    },
+    "& .markdown-alert": {
+      borderLeft: ".25em solid var(--borderColor-default, var(--color-border-default))",
+      color: "inherit",
+      marginBottom: "calc(var(--typography-spacing) * 1.5)",
+      paddingLeft: "1em",
+      paddingRight: ".5em",
+      "&:last-child": {
+        marginBottom: "0!important"
+      },
+      "& .markdown-alert-title": {
+        alignItems: "center",
+        display: "flex",
+        fontSize: "var(--text-fz-md)",
+        fontWeight: "500",
+        lineHeight: "1.5",
+        marginBottom: "0.1em",
+        gap: "2"
+      },
+      "& .markdown-alert-title svg": {
+        height: "var(--text-fz-md)",
+        fill: "currentColor"
+      },
+      "&.markdown-alert-note": {
+        borderLeftColor: "var(--borderColor-accent-emphasis,var(--color-accent-emphasis))"
+      },
+      "&.markdown-alert-note .markdown-alert-title": {
+        color: [
+          "var(--color-accent-fg)",
+          "var(--fgColor-accent,var(--color-accent-fg))"
+        ]
+      },
+      "&.markdown-alert-tip": {
+        borderLeftColor: "var(--borderColor-success-emphasis,var(--color-success-emphasis))"
+      },
+      "&.markdown-alert-tip .markdown-alert-title": {
+        color: [
+          "var(--color-success-fg)",
+          "var(--fgColor-success,var(--color-success-fg))"
+        ]
+      },
+      "&.markdown-alert-important": {
+        borderLeftColor: "var(--borderColor-done-emphasis,var(--color-done-emphasis))"
+      },
+      "&.markdown-alert-important .markdown-alert-title": {
+        color: [
+          "var(--color-done-fg)",
+          "var(--fgColor-done,var(--color-done-fg))"
+        ]
+      },
+      "&.markdown-alert-warning": {
+        borderLeftColor: "var(--borderColor-attention-emphasis,var(--color-attention-emphasis))"
+      },
+      "&.markdown-alert-warning .markdown-alert-title": {
+        color: [
+          "var(--color-attention-fg)",
+          "var(--fgColor-attention,var(--color-attention-fg))"
+        ]
+      },
+      "&.markdown-alert-caution": {
+        borderLeftColor: "var(--borderColor-danger-emphasis,var(--color-danger-emphasis))"
+      },
+      "&.markdown-alert-caution .markdown-alert-title": {
+        color: [
+          "var(--color-danger-fg)",
+          "var(--fgColor-danger,var(--color-danger-fg))"
+        ]
+      }
     }
   },
   variants: {
@@ -6046,15 +6440,18 @@ const markdownBlock = defineRecipe({
      */
     uselikec4palette: {
       true: {
-        "--code-background": "color-mix(in srgb , var(--likec4-palette-stroke) 70%, transparent)",
+        "--code-background": "color-mix(in oklab , var(--likec4-palette-stroke) 70%, transparent)",
         "--code-color": "var(--likec4-palette-loContrast)",
         "--typography-spacing": "calc(0.5 * var(--text-fz-md))",
         "& :where(a)": {
           color: "var(--likec4-palette-fill)/45",
-          mixBlendMode: "difference"
+          mixBlendMode: {
+            base: "difference",
+            _print: "normal!"
+          }
         },
         "& :where(strong)": {
-          color: `color-mix(in srgb , var(--likec4-palette-hiContrast) 50%,  var(--likec4-palette-loContrast))`
+          color: `color-mix(in oklab , var(--likec4-palette-hiContrast) 50%,  var(--likec4-palette-loContrast))`
         },
         "& :where(blockquote)": {
           padding: "xxs",
@@ -6252,7 +6649,7 @@ const overlay = defineRecipe({
         dialog: {
           _backdrop: {
             backdropFilter: `blur(var(${backdropBlur}))`,
-            background: `color-mix(in srgb, {colors.likec4.overlay.backdrop} var(${backdropOpacity}), transparent)`
+            background: `color-mix(in oklab, {colors.likec4.overlay.backdrop} var(${backdropOpacity}), transparent)`
           }
         }
       }
@@ -6272,6 +6669,8 @@ const recipes = {
   actionBtn,
   compoundNode,
   edgeActionBtn,
+  edgeLabel,
+  edgePath,
   elementNodeData,
   elementShapeRecipe,
   likec4tag,
@@ -6284,6 +6683,16 @@ function mixTransparent(color, percentage = 50) {
 }
 const semanticTokens = defineSemanticTokens({
   colors: {
+    text: {
+      DEFAULT: {
+        description: "Default text color",
+        value: mantine.colors.text
+      },
+      dimmed: {
+        description: "Dimmed text color",
+        value: mantine.colors.dimmed
+      }
+    },
     likec4: {
       background: {
         DEFAULT: {
@@ -6331,7 +6740,7 @@ const semanticTokens = defineSemanticTokens({
           description: "LikeC4 panel border color",
           value: {
             base: "transparent",
-            _light: mixTransparent(mantine.colors.defaultBorder, 30)
+            _light: mantine.colors.gray[2]
           }
         },
         text: {
@@ -6452,7 +6861,7 @@ const semanticTokens = defineSemanticTokens({
           outline: {
             value: {
               _light: mantine.colors.orange[8],
-              _dark: mantine.colors.orange[6]
+              _dark: mixTransparent(mantine.colors.orange[6], 80)
             }
           }
         },
@@ -6464,129 +6873,6 @@ const semanticTokens = defineSemanticTokens({
     }
   }
 });
-const edgeLabel = defineSlotRecipe({
-  className: "likec4-edge-label",
-  slots: ["root", "stepNumber", "labelContents", "labelText", "labelTechnology"],
-  base: {
-    root: {
-      fontFamily: "likec4.relation",
-      paddingBlock: "1",
-      paddingInline: "1.5",
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      width: "max-content",
-      lineHeight: "[1.2]",
-      maxWidth: "100%",
-      gap: "0.5",
-      color: "var(--xy-edge-label-color)",
-      background: "var(--xy-edge-label-background-color)",
-      border: "0px solid transparent",
-      borderRadius: "4px"
-    },
-    stepNumber: {
-      alignSelf: "stretch",
-      flex: "0 0 auto",
-      fontWeight: 600,
-      fontSize: "14px",
-      padding: "1",
-      textAlign: "center",
-      minWidth: "22px",
-      borderTopLeftRadius: "4px",
-      borderBottomLeftRadius: "4px",
-      _only: {
-        borderRadius: "4px",
-        minWidth: "24px"
-      },
-      background: `[color-mix(in srgb, var(--likec4-palette-relation-label-bg), {colors.likec4.mixColor} 10%)]`,
-      fontVariantNumeric: "tabular-nums",
-      // _dark: {
-      [':where([data-likec4-color="gray"]) &']: {
-        _dark: {
-          background: `[color-mix(in srgb, var(--likec4-palette-relation-label-bg), {colors.likec4.mixColor} 15%)]`
-        }
-      }
-    },
-    labelContents: {
-      display: "contents",
-      _empty: {
-        display: "none !important"
-      }
-    },
-    labelText: {
-      whiteSpaceCollapse: "preserve-breaks",
-      fontSize: "14px",
-      margin: "0"
-    },
-    labelTechnology: {
-      textAlign: "center",
-      whiteSpaceCollapse: "preserve-breaks",
-      fontSize: "11px",
-      lineHeight: "[1]",
-      opacity: 0.75
-    }
-  },
-  variants: {
-    pointerEvents: {
-      none: {
-        root: {
-          pointerEvents: "none"
-        }
-      },
-      all: {
-        root: {
-          pointerEvents: "all"
-        }
-      }
-    },
-    cursor: {
-      pointer: {
-        root: {
-          cursor: "pointer"
-        }
-      },
-      default: {
-        root: {
-          cursor: "default"
-        }
-      }
-    },
-    isStepEdge: {
-      false: {},
-      true: {
-        root: {
-          flexDirection: "row",
-          gap: "1",
-          padding: "0"
-        },
-        labelContents: {
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          paddingTop: "0.5",
-          paddingRight: "1",
-          paddingBottom: "1",
-          gap: "0.5"
-        },
-        labelText: {
-          py: "0.5",
-          paddingRight: "0.5"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    pointerEvents: "all",
-    isStepEdge: false,
-    cursor: "default"
-  },
-  staticCss: [{
-    conditions: ["*"],
-    isStepEdge: ["*"],
-    cursor: ["*"],
-    pointerEvents: ["*"]
-  }]
-});
 const navigationLink = defineSlotRecipe({
   className: "likec4-navlink",
   description: "Navigation Link (classes for Mantine NavLink)",
@@ -6654,10 +6940,32 @@ const navigationLink = defineSlotRecipe({
 });
 const slotRecipes = {
   __proto__: null,
-  edgeLabel,
   navigationLink
 };
 const textStyles = defineTextStyles({
+  dimmed: {
+    xxs: {
+      value: {
+        fontSize: "0.625rem",
+        lineHeight: "1rem",
+        color: "text.dimmed"
+      }
+    },
+    xs: {
+      value: {
+        fontSize: "0.75rem",
+        lineHeight: "1rem",
+        color: "text.dimmed"
+      }
+    },
+    sm: {
+      value: {
+        fontSize: "0.875rem",
+        lineHeight: "1.25rem",
+        color: "text.dimmed"
+      }
+    }
+  },
   xxs: {
     value: {
       fontSize: "0.625rem",