@likec4/styles 1.43.0 → 1.45.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
     }
   },
@@ -3972,26 +3972,6 @@ const animationStyles = defineAnimationStyles({
     }
   }
 });
-const root = ".likec4-root";
-const radixColors = [
-  "yellow",
-  "orange",
-  "amber",
-  "tomato",
-  "red",
-  "ruby",
-  "crimson",
-  "pink",
-  "pink",
-  "purple",
-  "violet",
-  "indigo",
-  "blue",
-  "teal",
-  "grass",
-  "lime"
-];
-const iconSize$1 = "--likec4-icon-size";
 const breakpoints = {
   xs: "36em",
   sm: "48em",
@@ -4768,6 +4748,66 @@ const paletteGlobalVars = {
   "--likec4-palette-relation-label": "#C6C6C6",
   "--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)",
+    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)"
+    },
+    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)",
+      "5": "var(--mantine-color-orange-5)",
+      "6": "var(--mantine-color-orange-6)",
+      "7": "var(--mantine-color-orange-7)",
+      "8": "var(--mantine-color-orange-8)",
+      "9": "var(--mantine-color-orange-9)"
+    }
+  }
+};
+const DefaultTagColors = [
+  "tomato",
+  "grass",
+  "blue",
+  "ruby",
+  "orange",
+  "indigo",
+  "pink",
+  "teal",
+  "purple",
+  "amber",
+  "crimson",
+  "red",
+  "lime",
+  "yellow",
+  "violet"
+];
+const root = ".likec4-root";
+const radixColors = [...DefaultTagColors];
+const iconSize$1 = "--likec4-icon-size";
 const conditions = {
   extend: {
     ...conditions$1,
@@ -4796,8 +4836,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"]) &',
-    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]) &',
@@ -4840,14 +4881,28 @@ 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",
+        contain: "paint layout",
         "--xy-background-color": "var(--colors-likec4-background)",
         "--xy-background-pattern-color": "var(--colors-likec4-background-pattern, var(--colors-likec4-background))",
         "&:is(.not-initialized)": {
@@ -4880,11 +4935,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), rgba(255 255 255 / 0.85) 40%)",
+          "--xy-edge-label-background-color": "color-mix(in oklab, var(--likec4-palette-relation-label-bg) 60%, transparent)"
         },
         '&:is([data-likec4-hovered="true"], [data-edge-active="true"])': {
           "--xy-edge-stroke-width": 4,
@@ -4914,19 +4969,22 @@ const globalCss = {
         "& :where(.react-flow__edges, .react-flow__edgelabel-renderer) > :where(svg, .likec4-edge-label-container)": {
           mixBlendMode: {
             _dark: "plus-lighter",
-            _light: "screen"
+            _light: "screen",
+            _print: "normal!"
           }
         },
         "&:has(.react-flow__node-seq-parallel) :where(.react-flow__edges > svg)": {
           mixBlendMode: {
             // _dark: 'plus-lighter',
-            _light: "color-burn"
+            _light: "color-burn",
+            _print: "normal!"
           }
         },
         "& .react-flow__node-seq-parallel": {
           mixBlendMode: {
             _dark: "luminosity",
-            _light: "color-burn"
+            _light: "color-burn",
+            _print: "normal!"
           }
         }
       },
@@ -4964,28 +5022,49 @@ const layerStyles = defineLayerStyles({
       }
     },
     panel: {
-      description: "LikeC4 panel layer",
-      value: {
-        paddingBlock: "1",
-        paddingInline: "xs",
-        borderRadius: "0",
-        backgroundColor: "likec4.panel.bg",
-        border: "1px solid {colors.likec4.panel.border}",
-        "@/sm": {
-          boxShadow: "lg",
-          borderRadius: "md",
-          padding: "2xs"
-        },
-        _whenPanning: {
-          boxShadow: "none",
-          borderRadius: "0"
+      DEFAULT: {
+        description: "LikeC4 panel layer",
+        value: {
+          padding: "1",
+          borderRadius: "0",
+          backgroundColor: "likec4.panel.bg",
+          border: "1px solid {colors.likec4.panel.border}",
+          "@/sm": {
+            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"
+            }
+          },
+          cursor: "pointer",
+          border: "transparent",
+          borderRadius: "sm",
+          backgroundColor: {
+            base: "likec4.panel.action.bg",
+            _notDisabled: {
+              _hover: "likec4.panel.action.bg.hover"
+            }
+          }
         }
       }
     },
     dropdown: {
       description: "LikeC4 dropdown layer",
       value: {
-        padding: "xxs",
+        padding: "2",
         backgroundColor: "likec4.dropdown.bg",
         border: "1px solid {colors.likec4.dropdown.border}",
         boxShadow: "lg",
@@ -5021,18 +5100,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)",
@@ -5051,6 +5132,9 @@ const actionBtn = defineRecipe({
     },
     "& *": {
       pointerEvents: "none"
+    },
+    _print: {
+      display: "none"
     }
   },
   variants: {
@@ -5085,8 +5169,8 @@ const actionBtn = defineRecipe({
     variant: "filled"
   },
   staticCss: [{
-    size: ["md"],
-    radius: ["md"],
+    size: ["*"],
+    radius: ["*"],
     variant: ["*"],
     conditions: ["*"]
   }]
@@ -5141,17 +5225,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})]`,
@@ -5168,7 +5252,7 @@ const compoundNode = defineRecipe({
           _whenFocused: "block",
           _whenSelected: "block"
         },
-        animationStyle: "indicatorOpacity",
+        animationStyle: "indicator",
         animationPlayState: {
           base: "paused",
           _whenFocused: "running",
@@ -5188,7 +5272,7 @@ const compoundNode = defineRecipe({
       // 6px
       left: "2.5",
       top: "0.5",
-      right: "[30px]",
+      right: "30px",
       width: "auto",
       minHeight: "30px",
       [`:where(.react-flow__node.draggable) &`]: {
@@ -5215,7 +5299,8 @@ const compoundNode = defineRecipe({
       justifyContent: "center",
       mixBlendMode: {
         base: "hard-light",
-        _reduceGraphicsOnPan: "normal"
+        _reduceGraphicsOnPan: "normal",
+        _print: "normal!"
       },
       [`& svg, & img`]: {
         width: "100%",
@@ -5238,7 +5323,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,
@@ -5247,6 +5332,9 @@ const compoundNode = defineRecipe({
       },
       _noReduceGraphics: {
         transition: "fast"
+      },
+      _print: {
+        display: "none"
       }
     },
     navigationBtn: {
@@ -5255,6 +5343,9 @@ const compoundNode = defineRecipe({
       left: "0.5",
       _smallZoom: {
         display: "none"
+      },
+      _print: {
+        display: "none"
       }
     },
     detailsBtn: {
@@ -5263,6 +5354,9 @@ const compoundNode = defineRecipe({
       right: "0.5",
       _smallZoom: {
         display: "none"
+      },
+      _print: {
+        display: "none"
       }
     }
   }),
@@ -5281,8 +5375,8 @@ const compoundNode = defineRecipe({
       }),
       true: parts$3({
         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)`
         }
       })
     },
@@ -5292,7 +5386,7 @@ const compoundNode = defineRecipe({
         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: {
@@ -5358,7 +5452,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: {
@@ -5377,6 +5471,9 @@ const edgeActionBtn = defineRecipe({
       width: "80%",
       height: "80%",
       strokeWidth: "2"
+    },
+    _print: {
+      display: "none"
     }
   },
   variants: {},
@@ -5582,9 +5679,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: {
@@ -5613,11 +5711,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",
@@ -5628,8 +5726,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",
@@ -5657,13 +5754,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"
         }
@@ -5677,7 +5774,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: [
@@ -5698,7 +5795,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: {
@@ -5728,7 +5825,7 @@ const elementShapeRecipe = defineRecipe({
         outline: {
           stroke: "var(--likec4-palette-outline)",
           fill: "[none]",
-          strokeWidth: 8,
+          strokeWidth: 3,
           strokeOpacity: 0.8,
           animationStyle: "indicator"
         }
@@ -5776,7 +5873,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!"
+          }
         }
       }
     }
@@ -5803,12 +5903,12 @@ 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
     },
     fontSize: "var(--text-fz-md)",
     lineHeight: "var(--mantine-line-height)",
@@ -5870,12 +5970,10 @@ 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]",
+        backgroundColor: mantine.colors.yellow[5],
         color: "var(--mantine-color-black)"
       }
     },
@@ -5894,8 +5992,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)": {
@@ -5979,8 +6077,8 @@ 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)"
@@ -5993,15 +6091,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",
@@ -6043,10 +6144,10 @@ const navigationPanelActionIcon = defineRecipe({
   description: "ActionIcon for navigation panel",
   base: {
     color: {
-      base: "likec4.panel.action-icon.text",
-      _disabled: "likec4.panel.action-icon.text.disabled",
+      base: "likec4.panel.action",
+      _disabled: "likec4.panel.action.disabled",
       _notDisabled: {
-        _hover: "likec4.panel.action-icon.text.hover"
+        _hover: "likec4.panel.action.hover"
       }
     },
     _disabled: {
@@ -6057,24 +6158,44 @@ const navigationPanelActionIcon = defineRecipe({
     variant: {
       "default": {
         backgroundColor: {
-          base: "[transparent]",
+          base: "transparent",
           _notDisabled: {
-            _hover: "likec4.panel.action-icon.bg.hover"
+            _hover: "likec4.panel.action.bg.hover"
           }
         }
       },
       "filled": {
         backgroundColor: {
-          base: "likec4.panel.action-icon.bg",
+          base: "likec4.panel.action.bg",
           _notDisabled: {
-            _hover: "likec4.panel.action-icon.bg.hover"
+            _hover: "likec4.panel.action.bg.hover"
           }
         }
       }
+    },
+    type: {
+      "default": {},
+      "warning": {
+        color: {
+          base: "likec4.panel.action.warning",
+          _hover: "likec4.panel.action.warning.hover"
+        }
+      }
     }
   },
+  compoundVariants: [{
+    type: "warning",
+    variant: "filled",
+    css: {
+      backgroundColor: {
+        base: "likec4.panel.action.warning.bg",
+        _hover: "likec4.panel.action.warning.bg.hover"
+      }
+    }
+  }],
   defaultVariants: {
-    variant: "default"
+    variant: "default",
+    type: "default"
   },
   staticCss: [{
     variant: ["*"],
@@ -6179,7 +6300,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)`
           }
         }
       }
@@ -6206,19 +6327,22 @@ const recipes = {
   navigationPanelActionIcon,
   overlay
 };
+function mixTransparent(color, percentage = 50) {
+  return `color-mix(in oklab, ${color} ${percentage}%, transparent ${100 - percentage}%)`;
+}
 const semanticTokens = defineSemanticTokens({
   colors: {
     likec4: {
       background: {
         DEFAULT: {
           description: "Background color",
-          value: "var(--mantine-color-body)"
+          value: mantine.colors.body
         },
         pattern: {
           description: "Background pattern color",
           value: {
-            _dark: "{colors.mantine.colors.dark[4]/70}",
-            _light: "{colors.mantine.colors.gray[4]}"
+            _dark: mixTransparent(mantine.colors.dark[4], 70),
+            _light: mantine.colors.gray[4]
           }
         }
       },
@@ -6246,8 +6370,8 @@ const semanticTokens = defineSemanticTokens({
           DEFAULT: {
             description: "LikeC4 panel background color",
             value: {
-              base: `{colors.mantine.colors.body}`,
-              _dark: `{colors.mantine.colors.dark[6]}`
+              base: mantine.colors.body,
+              _dark: mantine.colors.dark[6]
             }
           }
         },
@@ -6255,37 +6379,74 @@ const semanticTokens = defineSemanticTokens({
           description: "LikeC4 panel border color",
           value: {
             base: "transparent",
-            _light: `{colors.mantine.colors.defaultBorder/30}`
+            _light: mixTransparent(mantine.colors.defaultBorder, 30)
           }
         },
-        "action-icon": {
-          text: {
-            DEFAULT: {
-              description: "LikeC4 action icon text color",
-              value: "color-mix(in srgb, var(--mantine-color-text) 80%, transparent)"
-            },
-            hover: {
-              description: "LikeC4 action icon text color on hover",
-              value: "var(--mantine-color-bright)"
-            },
-            disabled: {
-              description: "LikeC4 action icon text color when disabled",
-              value: "var(--mantine-color-dimmed)"
-            }
+        text: {
+          DEFAULT: {
+            description: "LikeC4 panel text color",
+            value: mixTransparent(mantine.colors.text, 85)
+          },
+          dimmed: {
+            description: "LikeC4 panel dimmed text color",
+            value: mantine.colors.dimmed
+          }
+        },
+        action: {
+          DEFAULT: {
+            description: "LikeC4 panel action text color (Links/Icons)",
+            value: mixTransparent(mantine.colors.text, 90)
+          },
+          disabled: {
+            description: "LikeC4 action icon text color when disabled",
+            value: mantine.colors.dimmed
+          },
+          hover: {
+            description: "LikeC4 panel action text color on hover",
+            value: "var(--mantine-color-bright)"
           },
           bg: {
             DEFAULT: {
               description: "LikeC4 action icon background color",
               value: {
-                base: "{colors.mantine.colors.gray[1]}",
-                _dark: "{colors.mantine.colors.dark[7]/70}"
+                base: mantine.colors.gray[1],
+                _dark: mixTransparent(mantine.colors.dark[7], 70)
               }
             },
             hover: {
               description: "LikeC4 action icon background color on hover",
               value: {
-                base: "{colors.mantine.colors.gray[2]}",
-                _dark: "{colors.mantine.colors.dark[8]}"
+                base: mantine.colors.gray[2],
+                _dark: mantine.colors.dark[8]
+              }
+            }
+          },
+          warning: {
+            DEFAULT: {
+              description: "LikeC4 action icon text color",
+              value: mantine.colors.orange[6]
+            },
+            hover: {
+              description: "LikeC4 action icon text color on hover",
+              value: {
+                base: mantine.colors.orange[7],
+                _dark: mantine.colors.orange[5]
+              }
+            },
+            bg: {
+              DEFAULT: {
+                description: "LikeC4 action icon background color",
+                value: {
+                  base: mixTransparent(mantine.colors.orange[1], 90),
+                  _dark: mixTransparent(mantine.colors.orange[9], 10)
+                }
+              },
+              hover: {
+                description: "LikeC4 action icon background color on hover",
+                value: {
+                  base: mixTransparent(mantine.colors.orange[3], 70),
+                  _dark: mixTransparent(mantine.colors.orange[9], 20)
+                }
               }
             }
           }
@@ -6297,7 +6458,7 @@ const semanticTokens = defineSemanticTokens({
             description: "LikeC4 dropdown background color",
             value: {
               base: `#FFF`,
-              _dark: `{colors.mantine.colors.dark[6]}`
+              _dark: mantine.colors.dark[6]
             }
           }
         },
@@ -6319,12 +6480,33 @@ const semanticTokens = defineSemanticTokens({
         body: {
           DEFAULT: {
             description: "LikeC4 overlay body color",
-            value: `var(--mantine-color-body)`
+            value: mantine.colors.body
           }
         },
         border: {
           description: "LikeC4 overlay border color",
-          value: "{colors.mantine.colors.defaultBorder/50}"
+          value: mixTransparent(mantine.colors.defaultBorder, 50)
+        }
+      },
+      compare: {
+        manual: {
+          DEFAULT: {
+            description: "LikeC4 Compare color for manual changes",
+            value: {
+              _light: mantine.colors.orange[8],
+              _dark: mantine.colors.orange[6]
+            }
+          },
+          outline: {
+            value: {
+              _light: mantine.colors.orange[8],
+              _dark: mantine.colors.orange[6]
+            }
+          }
+        },
+        latest: {
+          description: "LikeC4 Compare color for latest changes",
+          value: mantine.colors.green[6]
         }
       }
     }
@@ -6335,7 +6517,6 @@ const edgeLabel = defineSlotRecipe({
   slots: ["root", "stepNumber", "labelContents", "labelText", "labelTechnology"],
   base: {
     root: {
-      pointerEvents: "all",
       fontFamily: "likec4.relation",
       paddingBlock: "1",
       paddingInline: "1.5",
@@ -6365,12 +6546,12 @@ const edgeLabel = defineSlotRecipe({
         borderRadius: "4px",
         minWidth: "24px"
       },
-      background: `[color-mix(in srgb, var(--likec4-palette-relation-label-bg), {colors.likec4.mixColor} 10%)]`,
+      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 srgb, var(--likec4-palette-relation-label-bg), {colors.likec4.mixColor} 15%)]`
+          background: `[color-mix(in oklab, var(--likec4-palette-relation-label-bg), {colors.likec4.mixColor} 15%)]`
         }
       }
     },
@@ -6394,6 +6575,18 @@ const edgeLabel = defineSlotRecipe({
     }
   },
   variants: {
+    pointerEvents: {
+      none: {
+        root: {
+          pointerEvents: "none"
+        }
+      },
+      all: {
+        root: {
+          pointerEvents: "all"
+        }
+      }
+    },
     cursor: {
       pointer: {
         root: {
@@ -6431,12 +6624,15 @@ const edgeLabel = defineSlotRecipe({
     }
   },
   defaultVariants: {
+    pointerEvents: "all",
     isStepEdge: false,
     cursor: "default"
   },
   staticCss: [{
     conditions: ["*"],
-    isStepEdge: ["*"]
+    isStepEdge: ["*"],
+    cursor: ["*"],
+    pointerEvents: ["*"]
   }]
 });
 const navigationLink = defineSlotRecipe({
@@ -6547,6 +6743,29 @@ const textStyles = defineTextStyles({
     }
   },
   likec4: {
+    panel: {
+      DEFAULT: {
+        description: "Text style for panel content",
+        value: {
+          fontSize: "0.875rem",
+          lineHeight: "1.25rem",
+          fontWeight: 500,
+          color: "likec4.panel.text"
+        }
+      },
+      action: {
+        description: "Text style for panel action items",
+        value: {
+          fontSize: "0.875rem",
+          lineHeight: "1.25rem",
+          fontWeight: 500,
+          color: {
+            base: "likec4.panel.action",
+            _hover: "likec4.panel.action.hover"
+          }
+        }
+      }
+    },
     node: {
       primary: {
         description: "Primary text, usually a title or name",
@@ -6581,10 +6800,18 @@ const tokens = defineTokens({
       value: "1"
     }
   },
+  sizes: {
+    "100%": {
+      value: "100%"
+    },
+    full: {
+      value: "100%"
+    }
+  },
   borders: {
     none: { value: "none" },
     transparent: { value: "0px solid transparent" },
-    default: { value: "1px solid {colors.mantine.colors.defaultBorder}" }
+    default: { value: `1px solid ${mantine.colors.defaultBorder}` }
   },
   spacing: {
     ...tokens$1.spacing,
@@ -6710,6 +6937,14 @@ const tokens = defineTokens({
     // For fill: none
     none: { value: "none" }
   },
+  fontWeights: {
+    normal: {
+      value: "400"
+    },
+    medium: {
+      value: "500"
+    }
+  },
   fonts: {
     mono: {
       value: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`
@@ -6764,6 +6999,25 @@ const tokens = defineTokens({
     xl: {
       value: "0 1px 3px rgb(0 0 0/5%), 0 36px 28px -7px rgb(0 0 0/5%), 0 17px 17px -7px rgb(0 0 0/4%)"
     }
+  },
+  zIndex: {
+    "-1": {
+      value: "-1"
+    },
+    "0": {
+      value: "0"
+    },
+    "1": {
+      value: "1"
+    },
+    likec4: {
+      panel: {
+        value: "100"
+      },
+      dropdown: {
+        value: "200"
+      }
+    }
   }
 });
 const durationValues = [