@likec4/styles 1.35.0 → 1.36.0

package/preset.mjs

@@ -1,4 +1,4 @@
-import { definePreset, defineSlotRecipe, defineRecipe, defineSemanticTokens, defineTokens, defineLayerStyles, defineTextStyles, defineUtility } from '@pandacss/dev';
+import { definePreset, defineSlotRecipe, defineRecipe, defineSemanticTokens, defineTokens, defineLayerStyles, defineTextStyles } from '@pandacss/dev';
 
 const grayDark = {
     gray1: "#111111",
@@ -3948,8 +3948,6 @@ function createPreset(options) {
   });
 }
 const root = ".likec4-root";
-const rootNotReduced = `${root}:not([data-likec4-reduced-graphics])`;
-const nodeOrEdge = `:where(.react-flow__node, .react-flow__edge, .likec4-edge-label-container)`;
 const radixColors = [
   "yellow",
   "orange",
@@ -3969,2418 +3967,784 @@ const radixColors = [
   "lime"
 ];
 const iconSize = "--likec4-icon-size";
-const themeColors = [
-  "amber",
-  "blue",
-  "gray",
-  "slate",
-  "green",
-  "indigo",
-  "muted",
-  "primary",
-  "red",
-  "secondary",
-  "sky"
-];
-const compoundColors = [
-  "amber.1",
-  "amber.2",
-  "amber.3",
-  "amber.4",
-  "amber.5",
-  "blue.1",
-  "blue.2",
-  "blue.3",
-  "blue.4",
-  "blue.5",
-  "gray.1",
-  "gray.2",
-  "gray.3",
-  "gray.4",
-  "gray.5",
-  "slate.1",
-  "slate.2",
-  "slate.3",
-  "slate.4",
-  "slate.5",
-  "green.1",
-  "green.2",
-  "green.3",
-  "green.4",
-  "green.5",
-  "indigo.1",
-  "indigo.2",
-  "indigo.3",
-  "indigo.4",
-  "indigo.5",
-  "muted.1",
-  "muted.2",
-  "muted.3",
-  "muted.4",
-  "muted.5",
-  "primary.1",
-  "primary.2",
-  "primary.3",
-  "primary.4",
-  "primary.5",
-  "red.1",
-  "red.2",
-  "red.3",
-  "red.4",
-  "red.5",
-  "secondary.1",
-  "secondary.2",
-  "secondary.3",
-  "secondary.4",
-  "secondary.5",
-  "sky.1",
-  "sky.2",
-  "sky.3",
-  "sky.4",
-  "sky.5"
-];
-const conditions$1 = {
-  shapeSizeXs: ":where([data-likec4-shape-size='xs']) &",
-  shapeSizeSm: ":where([data-likec4-shape-size='sm']) &",
-  shapeSizeMd: ":where([data-likec4-shape-size='md']) &",
-  shapeSizeLg: ":where([data-likec4-shape-size='lg']) &",
-  shapeSizeXl: ":where([data-likec4-shape-size='xl']) &",
-  shapeRectangle: ":where([data-likec4-shape='rectangle']) &",
-  shapePerson: ":where([data-likec4-shape='person']) &",
-  shapeBrowser: ":where([data-likec4-shape='browser']) &",
-  shapeMobile: ":where([data-likec4-shape='mobile']) &",
-  shapeCylinder: ":where([data-likec4-shape='cylinder']) &",
-  shapeStorage: ":where([data-likec4-shape='storage']) &",
-  shapeQueue: ":where([data-likec4-shape='queue']) &"
-};
-const globalCss = {
-  ":where([data-likec4-text-size='xs'])": {
-    "--likec4-text-size": "{fontSizes.likec4.xs}"
-  },
-  ":where([data-likec4-text-size='sm'])": {
-    "--likec4-text-size": "{fontSizes.likec4.sm}"
-  },
-  ":where([data-likec4-text-size='md'])": {
-    "--likec4-text-size": "{fontSizes.likec4.md}"
-  },
-  ":where([data-likec4-text-size='lg'])": {
-    "--likec4-text-size": "{fontSizes.likec4.lg}"
-  },
-  ":where([data-likec4-text-size='xl'])": {
-    "--likec4-text-size": "{fontSizes.likec4.xl}"
-  },
-  ":where([data-likec4-spacing='xs'])": {
-    "--likec4-spacing": "{spacing.likec4.xs}"
-  },
-  ":where([data-likec4-spacing='sm'])": {
-    "--likec4-spacing": "{spacing.likec4.sm}"
-  },
-  ":where([data-likec4-spacing='md'])": {
-    "--likec4-spacing": "{spacing.likec4.md}"
-  },
-  ":where([data-likec4-spacing='lg'])": {
-    "--likec4-spacing": "{spacing.likec4.lg}"
-  },
-  ":where([data-likec4-spacing='xl'])": {
-    "--likec4-spacing": "{spacing.likec4.xl}"
-  }
-};
-const theme$1 = {
-  breakpoints: {
-    xs: "36em",
-    sm: "48em",
-    md: "62em",
-    lg: "75em",
-    xl: "88em"
-  },
-  tokens: {
-    spacing: {
+const breakpoints = {
+  xs: "36em",
+  sm: "48em",
+  md: "62em",
+  lg: "75em",
+  xl: "88em"
+};
+const tokens$1 = {
+  spacing: {
+    likec4: {
       xs: {
-        value: "calc(0.625rem * var(--mantine-scale))"
+        description: "LikeC4 Diagram Spacing: xs",
+        value: "8px"
       },
       sm: {
-        value: "calc(0.75rem * var(--mantine-scale))"
+        description: "LikeC4 Diagram Spacing: sm",
+        value: "10px"
       },
       md: {
-        value: "calc(1rem * var(--mantine-scale))"
+        description: "LikeC4 Diagram Spacing: md",
+        value: "16px"
       },
       lg: {
-        value: "calc(1.25rem * var(--mantine-scale))"
+        description: "LikeC4 Diagram Spacing: lg",
+        value: "24px"
       },
       xl: {
-        value: "calc(2rem * var(--mantine-scale))"
-      },
-      likec4: {
-        xs: {
-          description: "LikeC4 style spacing: xs",
-          value: "8px"
-        },
-        sm: {
-          description: "LikeC4 style spacing: sm",
-          value: "10px"
-        },
-        md: {
-          description: "LikeC4 style spacing: md",
-          value: "16px"
-        },
-        lg: {
-          description: "LikeC4 style spacing: lg",
-          value: "24px"
-        },
-        xl: {
-          description: "LikeC4 style spacing: xl",
-          value: "32px"
-        }
+        description: "LikeC4 Diagram Spacing: xl",
+        value: "32px"
       }
+    }
+  },
+  fontSizes: {
+    xxs: {
+      value: "0.625rem"
     },
-    radii: {
-      xs: {
-        value: "var(--mantine-radius-xs)"
-      },
-      sm: {
-        value: "var(--mantine-radius-sm)"
-      },
-      md: {
-        value: "var(--mantine-radius-md)"
-      },
-      lg: {
-        value: "var(--mantine-radius-lg)"
-      },
-      xl: {
-        value: "var(--mantine-radius-xl)"
-      }
+    xs: {
+      value: "calc(0.75rem * var(--mantine-scale))"
     },
-    fontSizes: {
-      xxs: {
-        value: "0.625rem"
-      },
-      xs: {
-        value: "calc(0.75rem * var(--mantine-scale))"
-      },
-      sm: {
-        value: "calc(0.875rem * var(--mantine-scale))"
-      },
-      md: {
-        value: "calc(1rem * var(--mantine-scale))"
-      },
-      lg: {
-        value: "calc(1.125rem * var(--mantine-scale))"
-      },
-      xl: {
-        value: "calc(1.25rem * var(--mantine-scale))"
-      },
-      likec4: {
-        xs: {
-          description: "LikeC4 style text size: xs",
-          value: "0.833rem"
-        },
-        sm: {
-          description: "LikeC4 style text size: sm",
-          value: "1.00rem"
-        },
-        md: {
-          description: "LikeC4 style text size: md",
-          value: "1.20rem"
-        },
-        lg: {
-          description: "LikeC4 style text size: lg",
-          value: "1.44rem"
-        },
-        xl: {
-          description: "LikeC4 style text size: xl",
-          value: "1.73rem"
-        }
-      }
+    sm: {
+      value: "calc(0.875rem * var(--mantine-scale))"
+    },
+    md: {
+      value: "calc(1rem * var(--mantine-scale))"
     },
-    lineHeights: {
+    lg: {
+      value: "calc(1.125rem * var(--mantine-scale))"
+    },
+    xl: {
+      value: "calc(1.25rem * var(--mantine-scale))"
+    },
+    likec4: {
       xs: {
-        value: "1.4"
+        description: "LikeC4 Diagram Text Size: xs",
+        value: "0.833rem"
       },
       sm: {
-        value: "1.45"
+        description: "LikeC4 Diagram Text Size: sm",
+        value: "1.00rem"
       },
       md: {
-        value: "1.55"
+        description: "LikeC4 Diagram Text Size: md",
+        value: "1.20rem"
       },
       lg: {
-        value: "1.6"
+        description: "LikeC4 Diagram Text Size: lg",
+        value: "1.44rem"
       },
       xl: {
-        value: "1.65"
+        description: "LikeC4 Diagram Text Size: xl",
+        value: "1.73rem"
       }
+    }
+  },
+  lineHeights: {
+    xs: {
+      value: "1.4"
     },
-    colors: {
-      mantine: {
-        colors: {
-          primary: {
-            DEFAULT: {
-              description: "Mantine color primaryColors",
-              value: "var(--mantine-primary-color-6)"
-            },
-            filled: {
-              description: "Mantine color primaryColors filled",
-              value: "var(--mantine-primary-color-filled)"
-            },
-            filledHover: {
-              description: "Mantine color primaryColors filled hover",
-              value: "var(--mantine-primary-color-filled-hover)"
-            },
-            light: {
-              description: "Mantine color primaryColors light",
-              value: "var(--mantine-primary-color-light)"
-            },
-            lightHover: {
-              description: "Mantine color primaryColors light hover",
-              value: "var(--mantine-primary-color-light-hover)"
-            },
-            lightColor: {
-              description: "Mantine color primaryColors light color",
-              value: "var(--mantine-primary-color-light-color)"
-            },
-            outline: {
-              description: "Mantine color primaryColors outline",
-              value: "var(--mantine-primary-color-outline)"
-            },
-            outlineHover: {
-              description: "Mantine color primaryColors outline hover",
-              value: "var(--mantine-primary-color-outline-hover)"
-            }
-          },
-          "primary[0]": {
-            description: "Mantine color primaryColors.0",
-            value: "var(--mantine-primary-color-0)"
-          },
-          "primary[1]": {
-            description: "Mantine color primaryColors.1",
-            value: "var(--mantine-primary-color-1)"
-          },
-          "primary[2]": {
-            description: "Mantine color primaryColors.2",
-            value: "var(--mantine-primary-color-2)"
-          },
-          "primary[3]": {
-            description: "Mantine color primaryColors.3",
-            value: "var(--mantine-primary-color-3)"
-          },
-          "primary[4]": {
-            description: "Mantine color primaryColors.4",
-            value: "var(--mantine-primary-color-4)"
+    sm: {
+      value: "1.45"
+    },
+    md: {
+      value: "1.55"
+    },
+    lg: {
+      value: "1.6"
+    },
+    xl: {
+      value: "1.65"
+    }
+  },
+  colors: {
+    mantine: {
+      colors: {
+        primary: {
+          DEFAULT: {
+            description: "Mantine color primaryColors",
+            value: "var(--mantine-primary-color-6)"
           },
-          "primary[5]": {
-            description: "Mantine color primaryColors.5",
-            value: "var(--mantine-primary-color-5)"
+          filled: {
+            description: "Mantine color primaryColors filled",
+            value: "var(--mantine-primary-color-filled)"
           },
-          "primary[6]": {
-            description: "Mantine color primaryColors.6",
-            value: "var(--mantine-primary-color-6)"
+          filledHover: {
+            description: "Mantine color primaryColors filled hover",
+            value: "var(--mantine-primary-color-filled-hover)"
           },
-          "primary[7]": {
-            description: "Mantine color primaryColors.7",
-            value: "var(--mantine-primary-color-7)"
+          light: {
+            description: "Mantine color primaryColors light",
+            value: "var(--mantine-primary-color-light)"
           },
-          "primary[8]": {
-            description: "Mantine color primaryColors.8",
-            value: "var(--mantine-primary-color-8)"
+          lightHover: {
+            description: "Mantine color primaryColors light hover",
+            value: "var(--mantine-primary-color-light-hover)"
           },
-          "primary[9]": {
-            description: "Mantine color primaryColors.9",
-            value: "var(--mantine-primary-color-9)"
+          lightColor: {
+            description: "Mantine color primaryColors light color",
+            value: "var(--mantine-primary-color-light-color)"
           },
-          white: {
-            value: "var(--mantine-color-white)"
+          outline: {
+            description: "Mantine color primaryColors outline",
+            value: "var(--mantine-primary-color-outline)"
           },
-          text: {
-            value: "var(--mantine-color-text)"
+          outlineHover: {
+            description: "Mantine color primaryColors outline hover",
+            value: "var(--mantine-primary-color-outline-hover)"
+          }
+        },
+        "primary[0]": {
+          description: "Mantine color primaryColors.0",
+          value: "var(--mantine-primary-color-0)"
+        },
+        "primary[1]": {
+          description: "Mantine color primaryColors.1",
+          value: "var(--mantine-primary-color-1)"
+        },
+        "primary[2]": {
+          description: "Mantine color primaryColors.2",
+          value: "var(--mantine-primary-color-2)"
+        },
+        "primary[3]": {
+          description: "Mantine color primaryColors.3",
+          value: "var(--mantine-primary-color-3)"
+        },
+        "primary[4]": {
+          description: "Mantine color primaryColors.4",
+          value: "var(--mantine-primary-color-4)"
+        },
+        "primary[5]": {
+          description: "Mantine color primaryColors.5",
+          value: "var(--mantine-primary-color-5)"
+        },
+        "primary[6]": {
+          description: "Mantine color primaryColors.6",
+          value: "var(--mantine-primary-color-6)"
+        },
+        "primary[7]": {
+          description: "Mantine color primaryColors.7",
+          value: "var(--mantine-primary-color-7)"
+        },
+        "primary[8]": {
+          description: "Mantine color primaryColors.8",
+          value: "var(--mantine-primary-color-8)"
+        },
+        "primary[9]": {
+          description: "Mantine color primaryColors.9",
+          value: "var(--mantine-primary-color-9)"
+        },
+        white: {
+          value: "var(--mantine-color-white)"
+        },
+        text: {
+          value: "var(--mantine-color-text)"
+        },
+        body: {
+          value: "var(--mantine-color-body)"
+        },
+        dimmed: {
+          value: "var(--mantine-color-dimmed)"
+        },
+        defaultBorder: {
+          value: "var(--mantine-color-default-border)"
+        },
+        defaultColor: {
+          value: "var(--mantine-color-default-color)"
+        },
+        defaultHover: {
+          value: "var(--mantine-color-default-hover)"
+        },
+        default: {
+          value: "var(--mantine-color-default)"
+        },
+        error: {
+          value: "var(--mantine-color-error)"
+        },
+        placeholder: {
+          value: "var(--mantine-color-placeholder)"
+        },
+        gray: {
+          DEFAULT: {
+            description: "Mantine color gray",
+            value: "var(--mantine-color-gray-6)"
           },
-          body: {
-            value: "var(--mantine-color-body)"
+          filled: {
+            description: "Mantine color gray filled",
+            value: "var(--mantine-color-gray-filled)"
           },
-          dimmed: {
-            value: "var(--mantine-color-dimmed)"
+          filledHover: {
+            description: "Mantine color gray filled hover",
+            value: "var(--mantine-color-gray-filled-hover)"
           },
-          defaultBorder: {
-            value: "var(--mantine-color-default-border)"
+          light: {
+            description: "Mantine color gray light",
+            value: "var(--mantine-color-gray-light)"
           },
-          defaultColor: {
-            value: "var(--mantine-color-default-color)"
+          lightHover: {
+            description: "Mantine color gray light hover",
+            value: "var(--mantine-color-gray-light-hover)"
           },
-          defaultHover: {
-            value: "var(--mantine-color-default-hover)"
+          lightColor: {
+            description: "Mantine color gray light color",
+            value: "var(--mantine-color-gray-light-color)"
           },
-          default: {
-            value: "var(--mantine-color-default)"
+          outline: {
+            description: "Mantine color gray outline",
+            value: "var(--mantine-color-gray-outline)"
           },
-          error: {
-            value: "var(--mantine-color-error)"
+          outlineHover: {
+            description: "Mantine color gray outline hover",
+            value: "var(--mantine-color-gray-outline-hover)"
+          }
+        },
+        "gray[0]": {
+          description: "Mantine color gray.0",
+          value: "var(--mantine-color-gray-0)"
+        },
+        "gray[1]": {
+          description: "Mantine color gray.1",
+          value: "var(--mantine-color-gray-1)"
+        },
+        "gray[2]": {
+          description: "Mantine color gray.2",
+          value: "var(--mantine-color-gray-2)"
+        },
+        "gray[3]": {
+          description: "Mantine color gray.3",
+          value: "var(--mantine-color-gray-3)"
+        },
+        "gray[4]": {
+          description: "Mantine color gray.4",
+          value: "var(--mantine-color-gray-4)"
+        },
+        "gray[5]": {
+          description: "Mantine color gray.5",
+          value: "var(--mantine-color-gray-5)"
+        },
+        "gray[6]": {
+          description: "Mantine color gray.6",
+          value: "var(--mantine-color-gray-6)"
+        },
+        "gray[7]": {
+          description: "Mantine color gray.7",
+          value: "var(--mantine-color-gray-7)"
+        },
+        "gray[8]": {
+          description: "Mantine color gray.8",
+          value: "var(--mantine-color-gray-8)"
+        },
+        "gray[9]": {
+          description: "Mantine color gray.9",
+          value: "var(--mantine-color-gray-9)"
+        },
+        dark: {
+          DEFAULT: {
+            description: "Mantine color dark",
+            value: "var(--mantine-color-dark-6)"
           },
-          placeholder: {
-            value: "var(--mantine-color-placeholder)"
+          filled: {
+            description: "Mantine color dark filled",
+            value: "var(--mantine-color-dark-filled)"
           },
-          gray: {
-            DEFAULT: {
-              description: "Mantine color gray",
-              value: "var(--mantine-color-gray-6)"
-            },
-            filled: {
-              description: "Mantine color gray filled",
-              value: "var(--mantine-color-gray-filled)"
-            },
-            filledHover: {
-              description: "Mantine color gray filled hover",
-              value: "var(--mantine-color-gray-filled-hover)"
-            },
-            light: {
-              description: "Mantine color gray light",
-              value: "var(--mantine-color-gray-light)"
-            },
-            lightHover: {
-              description: "Mantine color gray light hover",
-              value: "var(--mantine-color-gray-light-hover)"
-            },
-            lightColor: {
-              description: "Mantine color gray light color",
-              value: "var(--mantine-color-gray-light-color)"
-            },
-            outline: {
-              description: "Mantine color gray outline",
-              value: "var(--mantine-color-gray-outline)"
-            },
-            outlineHover: {
-              description: "Mantine color gray outline hover",
-              value: "var(--mantine-color-gray-outline-hover)"
-            }
+          filledHover: {
+            description: "Mantine color dark filled hover",
+            value: "var(--mantine-color-dark-filled-hover)"
           },
-          "gray[0]": {
-            description: "Mantine color gray.0",
-            value: "var(--mantine-color-gray-0)"
+          light: {
+            description: "Mantine color dark light",
+            value: "var(--mantine-color-dark-light)"
           },
-          "gray[1]": {
-            description: "Mantine color gray.1",
-            value: "var(--mantine-color-gray-1)"
+          lightHover: {
+            description: "Mantine color dark light hover",
+            value: "var(--mantine-color-dark-light-hover)"
           },
-          "gray[2]": {
-            description: "Mantine color gray.2",
-            value: "var(--mantine-color-gray-2)"
+          lightColor: {
+            description: "Mantine color dark light color",
+            value: "var(--mantine-color-dark-light-color)"
           },
-          "gray[3]": {
-            description: "Mantine color gray.3",
-            value: "var(--mantine-color-gray-3)"
+          outline: {
+            description: "Mantine color dark outline",
+            value: "var(--mantine-color-dark-outline)"
           },
-          "gray[4]": {
-            description: "Mantine color gray.4",
-            value: "var(--mantine-color-gray-4)"
+          outlineHover: {
+            description: "Mantine color dark outline hover",
+            value: "var(--mantine-color-dark-outline-hover)"
+          }
+        },
+        "dark[0]": {
+          description: "Mantine color dark.0",
+          value: "var(--mantine-color-dark-0)"
+        },
+        "dark[1]": {
+          description: "Mantine color dark.1",
+          value: "var(--mantine-color-dark-1)"
+        },
+        "dark[2]": {
+          description: "Mantine color dark.2",
+          value: "var(--mantine-color-dark-2)"
+        },
+        "dark[3]": {
+          description: "Mantine color dark.3",
+          value: "var(--mantine-color-dark-3)"
+        },
+        "dark[4]": {
+          description: "Mantine color dark.4",
+          value: "var(--mantine-color-dark-4)"
+        },
+        "dark[5]": {
+          description: "Mantine color dark.5",
+          value: "var(--mantine-color-dark-5)"
+        },
+        "dark[6]": {
+          description: "Mantine color dark.6",
+          value: "var(--mantine-color-dark-6)"
+        },
+        "dark[7]": {
+          description: "Mantine color dark.7",
+          value: "var(--mantine-color-dark-7)"
+        },
+        "dark[8]": {
+          description: "Mantine color dark.8",
+          value: "var(--mantine-color-dark-8)"
+        },
+        "dark[9]": {
+          description: "Mantine color dark.9",
+          value: "var(--mantine-color-dark-9)"
+        },
+        orange: {
+          DEFAULT: {
+            description: "Mantine color orange",
+            value: "var(--mantine-color-orange-6)"
           },
-          "gray[5]": {
-            description: "Mantine color gray.5",
-            value: "var(--mantine-color-gray-5)"
+          filled: {
+            description: "Mantine color orange filled",
+            value: "var(--mantine-color-orange-filled)"
           },
-          "gray[6]": {
-            description: "Mantine color gray.6",
-            value: "var(--mantine-color-gray-6)"
+          filledHover: {
+            description: "Mantine color orange filled hover",
+            value: "var(--mantine-color-orange-filled-hover)"
           },
-          "gray[7]": {
-            description: "Mantine color gray.7",
-            value: "var(--mantine-color-gray-7)"
+          light: {
+            description: "Mantine color orange light",
+            value: "var(--mantine-color-orange-light)"
           },
-          "gray[8]": {
-            description: "Mantine color gray.8",
-            value: "var(--mantine-color-gray-8)"
+          lightHover: {
+            description: "Mantine color orange light hover",
+            value: "var(--mantine-color-orange-light-hover)"
           },
-          "gray[9]": {
-            description: "Mantine color gray.9",
-            value: "var(--mantine-color-gray-9)"
+          lightColor: {
+            description: "Mantine color orange light color",
+            value: "var(--mantine-color-orange-light-color)"
           },
-          dark: {
-            DEFAULT: {
-              description: "Mantine color dark",
-              value: "var(--mantine-color-dark-6)"
-            },
-            filled: {
-              description: "Mantine color dark filled",
-              value: "var(--mantine-color-dark-filled)"
-            },
-            filledHover: {
-              description: "Mantine color dark filled hover",
-              value: "var(--mantine-color-dark-filled-hover)"
-            },
-            light: {
-              description: "Mantine color dark light",
-              value: "var(--mantine-color-dark-light)"
-            },
-            lightHover: {
-              description: "Mantine color dark light hover",
-              value: "var(--mantine-color-dark-light-hover)"
-            },
-            lightColor: {
-              description: "Mantine color dark light color",
-              value: "var(--mantine-color-dark-light-color)"
-            },
-            outline: {
-              description: "Mantine color dark outline",
-              value: "var(--mantine-color-dark-outline)"
-            },
-            outlineHover: {
-              description: "Mantine color dark outline hover",
-              value: "var(--mantine-color-dark-outline-hover)"
-            }
+          outline: {
+            description: "Mantine color orange outline",
+            value: "var(--mantine-color-orange-outline)"
           },
-          "dark[0]": {
-            description: "Mantine color dark.0",
-            value: "var(--mantine-color-dark-0)"
+          outlineHover: {
+            description: "Mantine color orange outline hover",
+            value: "var(--mantine-color-orange-outline-hover)"
+          }
+        },
+        "orange[0]": {
+          description: "Mantine color orange.0",
+          value: "var(--mantine-color-orange-0)"
+        },
+        "orange[1]": {
+          description: "Mantine color orange.1",
+          value: "var(--mantine-color-orange-1)"
+        },
+        "orange[2]": {
+          description: "Mantine color orange.2",
+          value: "var(--mantine-color-orange-2)"
+        },
+        "orange[3]": {
+          description: "Mantine color orange.3",
+          value: "var(--mantine-color-orange-3)"
+        },
+        "orange[4]": {
+          description: "Mantine color orange.4",
+          value: "var(--mantine-color-orange-4)"
+        },
+        "orange[5]": {
+          description: "Mantine color orange.5",
+          value: "var(--mantine-color-orange-5)"
+        },
+        "orange[6]": {
+          description: "Mantine color orange.6",
+          value: "var(--mantine-color-orange-6)"
+        },
+        "orange[7]": {
+          description: "Mantine color orange.7",
+          value: "var(--mantine-color-orange-7)"
+        },
+        "orange[8]": {
+          description: "Mantine color orange.8",
+          value: "var(--mantine-color-orange-8)"
+        },
+        "orange[9]": {
+          description: "Mantine color orange.9",
+          value: "var(--mantine-color-orange-9)"
+        },
+        teal: {
+          DEFAULT: {
+            description: "Mantine color teal",
+            value: "var(--mantine-color-teal-6)"
           },
-          "dark[1]": {
-            description: "Mantine color dark.1",
-            value: "var(--mantine-color-dark-1)"
+          filled: {
+            description: "Mantine color teal filled",
+            value: "var(--mantine-color-teal-filled)"
           },
-          "dark[2]": {
-            description: "Mantine color dark.2",
-            value: "var(--mantine-color-dark-2)"
+          filledHover: {
+            description: "Mantine color teal filled hover",
+            value: "var(--mantine-color-teal-filled-hover)"
           },
-          "dark[3]": {
-            description: "Mantine color dark.3",
-            value: "var(--mantine-color-dark-3)"
+          light: {
+            description: "Mantine color teal light",
+            value: "var(--mantine-color-teal-light)"
           },
-          "dark[4]": {
-            description: "Mantine color dark.4",
-            value: "var(--mantine-color-dark-4)"
+          lightHover: {
+            description: "Mantine color teal light hover",
+            value: "var(--mantine-color-teal-light-hover)"
           },
-          "dark[5]": {
-            description: "Mantine color dark.5",
-            value: "var(--mantine-color-dark-5)"
+          lightColor: {
+            description: "Mantine color teal light color",
+            value: "var(--mantine-color-teal-light-color)"
           },
-          "dark[6]": {
-            description: "Mantine color dark.6",
-            value: "var(--mantine-color-dark-6)"
+          outline: {
+            description: "Mantine color teal outline",
+            value: "var(--mantine-color-teal-outline)"
           },
-          "dark[7]": {
-            description: "Mantine color dark.7",
-            value: "var(--mantine-color-dark-7)"
+          outlineHover: {
+            description: "Mantine color teal outline hover",
+            value: "var(--mantine-color-teal-outline-hover)"
+          }
+        },
+        "teal[0]": {
+          description: "Mantine color teal.0",
+          value: "var(--mantine-color-teal-0)"
+        },
+        "teal[1]": {
+          description: "Mantine color teal.1",
+          value: "var(--mantine-color-teal-1)"
+        },
+        "teal[2]": {
+          description: "Mantine color teal.2",
+          value: "var(--mantine-color-teal-2)"
+        },
+        "teal[3]": {
+          description: "Mantine color teal.3",
+          value: "var(--mantine-color-teal-3)"
+        },
+        "teal[4]": {
+          description: "Mantine color teal.4",
+          value: "var(--mantine-color-teal-4)"
+        },
+        "teal[5]": {
+          description: "Mantine color teal.5",
+          value: "var(--mantine-color-teal-5)"
+        },
+        "teal[6]": {
+          description: "Mantine color teal.6",
+          value: "var(--mantine-color-teal-6)"
+        },
+        "teal[7]": {
+          description: "Mantine color teal.7",
+          value: "var(--mantine-color-teal-7)"
+        },
+        "teal[8]": {
+          description: "Mantine color teal.8",
+          value: "var(--mantine-color-teal-8)"
+        },
+        "teal[9]": {
+          description: "Mantine color teal.9",
+          value: "var(--mantine-color-teal-9)"
+        },
+        red: {
+          DEFAULT: {
+            description: "Mantine color red",
+            value: "var(--mantine-color-red-6)"
           },
-          "dark[8]": {
-            description: "Mantine color dark.8",
-            value: "var(--mantine-color-dark-8)"
+          filled: {
+            description: "Mantine color red filled",
+            value: "var(--mantine-color-red-filled)"
           },
-          "dark[9]": {
-            description: "Mantine color dark.9",
-            value: "var(--mantine-color-dark-9)"
+          filledHover: {
+            description: "Mantine color red filled hover",
+            value: "var(--mantine-color-red-filled-hover)"
           },
-          orange: {
-            DEFAULT: {
-              description: "Mantine color orange",
-              value: "var(--mantine-color-orange-6)"
-            },
-            filled: {
-              description: "Mantine color orange filled",
-              value: "var(--mantine-color-orange-filled)"
-            },
-            filledHover: {
-              description: "Mantine color orange filled hover",
-              value: "var(--mantine-color-orange-filled-hover)"
-            },
-            light: {
-              description: "Mantine color orange light",
-              value: "var(--mantine-color-orange-light)"
-            },
-            lightHover: {
-              description: "Mantine color orange light hover",
-              value: "var(--mantine-color-orange-light-hover)"
-            },
-            lightColor: {
-              description: "Mantine color orange light color",
-              value: "var(--mantine-color-orange-light-color)"
-            },
-            outline: {
-              description: "Mantine color orange outline",
-              value: "var(--mantine-color-orange-outline)"
-            },
-            outlineHover: {
-              description: "Mantine color orange outline hover",
-              value: "var(--mantine-color-orange-outline-hover)"
-            }
+          light: {
+            description: "Mantine color red light",
+            value: "var(--mantine-color-red-light)"
           },
-          "orange[0]": {
-            description: "Mantine color orange.0",
-            value: "var(--mantine-color-orange-0)"
+          lightHover: {
+            description: "Mantine color red light hover",
+            value: "var(--mantine-color-red-light-hover)"
           },
-          "orange[1]": {
-            description: "Mantine color orange.1",
-            value: "var(--mantine-color-orange-1)"
+          lightColor: {
+            description: "Mantine color red light color",
+            value: "var(--mantine-color-red-light-color)"
           },
-          "orange[2]": {
-            description: "Mantine color orange.2",
-            value: "var(--mantine-color-orange-2)"
+          outline: {
+            description: "Mantine color red outline",
+            value: "var(--mantine-color-red-outline)"
           },
-          "orange[3]": {
-            description: "Mantine color orange.3",
-            value: "var(--mantine-color-orange-3)"
+          outlineHover: {
+            description: "Mantine color red outline hover",
+            value: "var(--mantine-color-red-outline-hover)"
+          }
+        },
+        "red[0]": {
+          description: "Mantine color red.0",
+          value: "var(--mantine-color-red-0)"
+        },
+        "red[1]": {
+          description: "Mantine color red.1",
+          value: "var(--mantine-color-red-1)"
+        },
+        "red[2]": {
+          description: "Mantine color red.2",
+          value: "var(--mantine-color-red-2)"
+        },
+        "red[3]": {
+          description: "Mantine color red.3",
+          value: "var(--mantine-color-red-3)"
+        },
+        "red[4]": {
+          description: "Mantine color red.4",
+          value: "var(--mantine-color-red-4)"
+        },
+        "red[5]": {
+          description: "Mantine color red.5",
+          value: "var(--mantine-color-red-5)"
+        },
+        "red[6]": {
+          description: "Mantine color red.6",
+          value: "var(--mantine-color-red-6)"
+        },
+        "red[7]": {
+          description: "Mantine color red.7",
+          value: "var(--mantine-color-red-7)"
+        },
+        "red[8]": {
+          description: "Mantine color red.8",
+          value: "var(--mantine-color-red-8)"
+        },
+        "red[9]": {
+          description: "Mantine color red.9",
+          value: "var(--mantine-color-red-9)"
+        },
+        green: {
+          DEFAULT: {
+            description: "Mantine color green",
+            value: "var(--mantine-color-green-6)"
           },
-          "orange[4]": {
-            description: "Mantine color orange.4",
-            value: "var(--mantine-color-orange-4)"
+          filled: {
+            description: "Mantine color green filled",
+            value: "var(--mantine-color-green-filled)"
           },
-          "orange[5]": {
-            description: "Mantine color orange.5",
-            value: "var(--mantine-color-orange-5)"
+          filledHover: {
+            description: "Mantine color green filled hover",
+            value: "var(--mantine-color-green-filled-hover)"
           },
-          "orange[6]": {
-            description: "Mantine color orange.6",
-            value: "var(--mantine-color-orange-6)"
+          light: {
+            description: "Mantine color green light",
+            value: "var(--mantine-color-green-light)"
           },
-          "orange[7]": {
-            description: "Mantine color orange.7",
-            value: "var(--mantine-color-orange-7)"
+          lightHover: {
+            description: "Mantine color green light hover",
+            value: "var(--mantine-color-green-light-hover)"
           },
-          "orange[8]": {
-            description: "Mantine color orange.8",
-            value: "var(--mantine-color-orange-8)"
+          lightColor: {
+            description: "Mantine color green light color",
+            value: "var(--mantine-color-green-light-color)"
           },
-          "orange[9]": {
-            description: "Mantine color orange.9",
-            value: "var(--mantine-color-orange-9)"
+          outline: {
+            description: "Mantine color green outline",
+            value: "var(--mantine-color-green-outline)"
           },
-          teal: {
-            DEFAULT: {
-              description: "Mantine color teal",
-              value: "var(--mantine-color-teal-6)"
-            },
-            filled: {
-              description: "Mantine color teal filled",
-              value: "var(--mantine-color-teal-filled)"
-            },
-            filledHover: {
-              description: "Mantine color teal filled hover",
-              value: "var(--mantine-color-teal-filled-hover)"
-            },
-            light: {
-              description: "Mantine color teal light",
-              value: "var(--mantine-color-teal-light)"
-            },
-            lightHover: {
-              description: "Mantine color teal light hover",
-              value: "var(--mantine-color-teal-light-hover)"
-            },
-            lightColor: {
-              description: "Mantine color teal light color",
-              value: "var(--mantine-color-teal-light-color)"
-            },
-            outline: {
-              description: "Mantine color teal outline",
-              value: "var(--mantine-color-teal-outline)"
-            },
-            outlineHover: {
-              description: "Mantine color teal outline hover",
-              value: "var(--mantine-color-teal-outline-hover)"
-            }
-          },
-          "teal[0]": {
-            description: "Mantine color teal.0",
-            value: "var(--mantine-color-teal-0)"
-          },
-          "teal[1]": {
-            description: "Mantine color teal.1",
-            value: "var(--mantine-color-teal-1)"
-          },
-          "teal[2]": {
-            description: "Mantine color teal.2",
-            value: "var(--mantine-color-teal-2)"
-          },
-          "teal[3]": {
-            description: "Mantine color teal.3",
-            value: "var(--mantine-color-teal-3)"
-          },
-          "teal[4]": {
-            description: "Mantine color teal.4",
-            value: "var(--mantine-color-teal-4)"
-          },
-          "teal[5]": {
-            description: "Mantine color teal.5",
-            value: "var(--mantine-color-teal-5)"
-          },
-          "teal[6]": {
-            description: "Mantine color teal.6",
-            value: "var(--mantine-color-teal-6)"
-          },
-          "teal[7]": {
-            description: "Mantine color teal.7",
-            value: "var(--mantine-color-teal-7)"
-          },
-          "teal[8]": {
-            description: "Mantine color teal.8",
-            value: "var(--mantine-color-teal-8)"
-          },
-          "teal[9]": {
-            description: "Mantine color teal.9",
-            value: "var(--mantine-color-teal-9)"
-          },
-          red: {
-            DEFAULT: {
-              description: "Mantine color red",
-              value: "var(--mantine-color-red-6)"
-            },
-            filled: {
-              description: "Mantine color red filled",
-              value: "var(--mantine-color-red-filled)"
-            },
-            filledHover: {
-              description: "Mantine color red filled hover",
-              value: "var(--mantine-color-red-filled-hover)"
-            },
-            light: {
-              description: "Mantine color red light",
-              value: "var(--mantine-color-red-light)"
-            },
-            lightHover: {
-              description: "Mantine color red light hover",
-              value: "var(--mantine-color-red-light-hover)"
-            },
-            lightColor: {
-              description: "Mantine color red light color",
-              value: "var(--mantine-color-red-light-color)"
-            },
-            outline: {
-              description: "Mantine color red outline",
-              value: "var(--mantine-color-red-outline)"
-            },
-            outlineHover: {
-              description: "Mantine color red outline hover",
-              value: "var(--mantine-color-red-outline-hover)"
-            }
-          },
-          "red[0]": {
-            description: "Mantine color red.0",
-            value: "var(--mantine-color-red-0)"
-          },
-          "red[1]": {
-            description: "Mantine color red.1",
-            value: "var(--mantine-color-red-1)"
-          },
-          "red[2]": {
-            description: "Mantine color red.2",
-            value: "var(--mantine-color-red-2)"
-          },
-          "red[3]": {
-            description: "Mantine color red.3",
-            value: "var(--mantine-color-red-3)"
-          },
-          "red[4]": {
-            description: "Mantine color red.4",
-            value: "var(--mantine-color-red-4)"
-          },
-          "red[5]": {
-            description: "Mantine color red.5",
-            value: "var(--mantine-color-red-5)"
-          },
-          "red[6]": {
-            description: "Mantine color red.6",
-            value: "var(--mantine-color-red-6)"
-          },
-          "red[7]": {
-            description: "Mantine color red.7",
-            value: "var(--mantine-color-red-7)"
-          },
-          "red[8]": {
-            description: "Mantine color red.8",
-            value: "var(--mantine-color-red-8)"
-          },
-          "red[9]": {
-            description: "Mantine color red.9",
-            value: "var(--mantine-color-red-9)"
-          },
-          green: {
-            DEFAULT: {
-              description: "Mantine color green",
-              value: "var(--mantine-color-green-6)"
-            },
-            filled: {
-              description: "Mantine color green filled",
-              value: "var(--mantine-color-green-filled)"
-            },
-            filledHover: {
-              description: "Mantine color green filled hover",
-              value: "var(--mantine-color-green-filled-hover)"
-            },
-            light: {
-              description: "Mantine color green light",
-              value: "var(--mantine-color-green-light)"
-            },
-            lightHover: {
-              description: "Mantine color green light hover",
-              value: "var(--mantine-color-green-light-hover)"
-            },
-            lightColor: {
-              description: "Mantine color green light color",
-              value: "var(--mantine-color-green-light-color)"
-            },
-            outline: {
-              description: "Mantine color green outline",
-              value: "var(--mantine-color-green-outline)"
-            },
-            outlineHover: {
-              description: "Mantine color green outline hover",
-              value: "var(--mantine-color-green-outline-hover)"
-            }
-          },
-          "green[0]": {
-            description: "Mantine color green.0",
-            value: "var(--mantine-color-green-0)"
-          },
-          "green[1]": {
-            description: "Mantine color green.1",
-            value: "var(--mantine-color-green-1)"
-          },
-          "green[2]": {
-            description: "Mantine color green.2",
-            value: "var(--mantine-color-green-2)"
-          },
-          "green[3]": {
-            description: "Mantine color green.3",
-            value: "var(--mantine-color-green-3)"
-          },
-          "green[4]": {
-            description: "Mantine color green.4",
-            value: "var(--mantine-color-green-4)"
-          },
-          "green[5]": {
-            description: "Mantine color green.5",
-            value: "var(--mantine-color-green-5)"
-          },
-          "green[6]": {
-            description: "Mantine color green.6",
-            value: "var(--mantine-color-green-6)"
-          },
-          "green[7]": {
-            description: "Mantine color green.7",
-            value: "var(--mantine-color-green-7)"
-          },
-          "green[8]": {
-            description: "Mantine color green.8",
-            value: "var(--mantine-color-green-8)"
-          },
-          "green[9]": {
-            description: "Mantine color green.9",
-            value: "var(--mantine-color-green-9)"
-          },
-          yellow: {
-            DEFAULT: {
-              description: "Mantine color yellow",
-              value: "var(--mantine-color-yellow-6)"
-            },
-            filled: {
-              description: "Mantine color yellow filled",
-              value: "var(--mantine-color-yellow-filled)"
-            },
-            filledHover: {
-              description: "Mantine color yellow filled hover",
-              value: "var(--mantine-color-yellow-filled-hover)"
-            },
-            light: {
-              description: "Mantine color yellow light",
-              value: "var(--mantine-color-yellow-light)"
-            },
-            lightHover: {
-              description: "Mantine color yellow light hover",
-              value: "var(--mantine-color-yellow-light-hover)"
-            },
-            lightColor: {
-              description: "Mantine color yellow light color",
-              value: "var(--mantine-color-yellow-light-color)"
-            },
-            outline: {
-              description: "Mantine color yellow outline",
-              value: "var(--mantine-color-yellow-outline)"
-            },
-            outlineHover: {
-              description: "Mantine color yellow outline hover",
-              value: "var(--mantine-color-yellow-outline-hover)"
-            }
-          },
-          "yellow[0]": {
-            description: "Mantine color yellow.0",
-            value: "var(--mantine-color-yellow-0)"
-          },
-          "yellow[1]": {
-            description: "Mantine color yellow.1",
-            value: "var(--mantine-color-yellow-1)"
-          },
-          "yellow[2]": {
-            description: "Mantine color yellow.2",
-            value: "var(--mantine-color-yellow-2)"
-          },
-          "yellow[3]": {
-            description: "Mantine color yellow.3",
-            value: "var(--mantine-color-yellow-3)"
-          },
-          "yellow[4]": {
-            description: "Mantine color yellow.4",
-            value: "var(--mantine-color-yellow-4)"
+          outlineHover: {
+            description: "Mantine color green outline hover",
+            value: "var(--mantine-color-green-outline-hover)"
+          }
+        },
+        "green[0]": {
+          description: "Mantine color green.0",
+          value: "var(--mantine-color-green-0)"
+        },
+        "green[1]": {
+          description: "Mantine color green.1",
+          value: "var(--mantine-color-green-1)"
+        },
+        "green[2]": {
+          description: "Mantine color green.2",
+          value: "var(--mantine-color-green-2)"
+        },
+        "green[3]": {
+          description: "Mantine color green.3",
+          value: "var(--mantine-color-green-3)"
+        },
+        "green[4]": {
+          description: "Mantine color green.4",
+          value: "var(--mantine-color-green-4)"
+        },
+        "green[5]": {
+          description: "Mantine color green.5",
+          value: "var(--mantine-color-green-5)"
+        },
+        "green[6]": {
+          description: "Mantine color green.6",
+          value: "var(--mantine-color-green-6)"
+        },
+        "green[7]": {
+          description: "Mantine color green.7",
+          value: "var(--mantine-color-green-7)"
+        },
+        "green[8]": {
+          description: "Mantine color green.8",
+          value: "var(--mantine-color-green-8)"
+        },
+        "green[9]": {
+          description: "Mantine color green.9",
+          value: "var(--mantine-color-green-9)"
+        },
+        yellow: {
+          DEFAULT: {
+            description: "Mantine color yellow",
+            value: "var(--mantine-color-yellow-6)"
           },
-          "yellow[5]": {
-            description: "Mantine color yellow.5",
-            value: "var(--mantine-color-yellow-5)"
+          filled: {
+            description: "Mantine color yellow filled",
+            value: "var(--mantine-color-yellow-filled)"
           },
-          "yellow[6]": {
-            description: "Mantine color yellow.6",
-            value: "var(--mantine-color-yellow-6)"
+          filledHover: {
+            description: "Mantine color yellow filled hover",
+            value: "var(--mantine-color-yellow-filled-hover)"
           },
-          "yellow[7]": {
-            description: "Mantine color yellow.7",
-            value: "var(--mantine-color-yellow-7)"
+          light: {
+            description: "Mantine color yellow light",
+            value: "var(--mantine-color-yellow-light)"
           },
-          "yellow[8]": {
-            description: "Mantine color yellow.8",
-            value: "var(--mantine-color-yellow-8)"
+          lightHover: {
+            description: "Mantine color yellow light hover",
+            value: "var(--mantine-color-yellow-light-hover)"
           },
-          "yellow[9]": {
-            description: "Mantine color yellow.9",
-            value: "var(--mantine-color-yellow-9)"
-          }
-        }
-      }
-    },
-    shadows: {
-      xs: {
-        value: "0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), 0 calc(0.0625rem * var(--mantine-scale)) calc(0.125rem * var(--mantine-scale)) rgba(0, 0, 0, 0.1)"
-      },
-      sm: {
-        value: "0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(0.625rem * var(--mantine-scale)) calc(0.9375rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.4375rem * var(--mantine-scale)) calc(0.4375rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale))"
-      },
-      md: {
-        value: "0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.25rem * var(--mantine-scale)) calc(1.5625rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.625rem * var(--mantine-scale)) calc(0.625rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale))"
-      },
-      lg: {
-        value: "0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.75rem * var(--mantine-scale)) calc(1.4375rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.75rem * var(--mantine-scale)) calc(0.75rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale))"
-      },
-      xl: {
-        value: "0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(2.25rem * var(--mantine-scale)) calc(1.75rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(1.0625rem * var(--mantine-scale)) calc(1.0625rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale))"
-      }
-    }
-  },
-  semanticTokens: {
-    colors: {
-      likec4: {
-        amber: {
-          element: {
-            fill: {
-              value: "#A35829"
-            },
-            stroke: {
-              value: "#7E451D"
-            },
-            hiContrast: {
-              value: "#FFE0C2"
-            },
-            loContrast: {
-              value: "#f9b27c"
-            }
+          lightColor: {
+            description: "Mantine color yellow light color",
+            value: "var(--mantine-color-yellow-light-color)"
           },
-          relation: {
-            stroke: {
-              DEFAULT: {
-                value: "#b45309"
-              },
-              selected: {
-                value: {
-                  _light: "rgb(153, 70.55, 7.65)",
-                  _dark: "rgb(202.5, 134.6, 82.8)"
-                }
-              }
-            },
-            label: {
-              DEFAULT: {
-                value: "#FFE0C2"
-              },
-              bg: {
-                value: "#78350f"
-              }
-            }
-          }
-        },
-        blue: {
-          element: {
-            fill: {
-              value: "#3b82f6"
-            },
-            stroke: {
-              value: "#2563eb"
-            },
-            hiContrast: {
-              value: "#eff6ff"
-            },
-            loContrast: {
-              value: "#bfdbfe"
-            }
+          outline: {
+            description: "Mantine color yellow outline",
+            value: "var(--mantine-color-yellow-outline)"
           },
-          relation: {
-            stroke: {
-              DEFAULT: {
-                value: "#3b82f6"
-              },
-              selected: {
-                value: {
-                  _light: "rgb(50.15, 110.5, 209.1)",
-                  _dark: "rgb(117.8, 167.5, 248.7)"
-                }
-              }
-            },
-            label: {
-              DEFAULT: {
-                value: "#60a5fa"
-              },
-              bg: {
-                value: "#172554"
-              }
-            }
+          outlineHover: {
+            description: "Mantine color yellow outline hover",
+            value: "var(--mantine-color-yellow-outline-hover)"
           }
         },
-        gray: {
-          element: {
-            fill: {
-              value: "#737373"
-            },
-            stroke: {
-              value: "#525252"
-            },
-            hiContrast: {
-              value: "#fafafa"
-            },
-            loContrast: {
-              value: "#d4d4d4"
-            }
-          },
-          relation: {
-            stroke: {
-              DEFAULT: {
-                value: "#6E6E6E"
-              },
-              selected: {
-                value: {
-                  _light: "rgb(93.5, 93.5, 93.5)",
-                  _dark: "rgb(153.5, 153.5, 153.5)"
-                }
-              }
-            },
-            label: {
-              DEFAULT: {
-                value: "#C6C6C6"
-              },
-              bg: {
-                value: "#18191b"
-              }
-            }
-          }
+        "yellow[0]": {
+          description: "Mantine color yellow.0",
+          value: "var(--mantine-color-yellow-0)"
         },
-        slate: {
-          element: {
-            fill: {
-              value: "#64748b"
-            },
-            stroke: {
-              value: "#475569"
-            },
-            hiContrast: {
-              value: "#f8fafc"
-            },
-            loContrast: {
-              value: "#cbd5e1"
-            }
-          },
-          relation: {
-            stroke: {
-              DEFAULT: {
-                value: "#64748b"
-              },
-              selected: {
-                value: {
-                  _light: "rgb(85, 98.6, 118.15)",
-                  _dark: "rgb(146.5, 157.7, 173.8)"
-                }
-              }
-            },
-            label: {
-              DEFAULT: {
-                value: "#cbd5e1"
-              },
-              bg: {
-                value: "#0f172a"
-              }
-            }
-          }
+        "yellow[1]": {
+          description: "Mantine color yellow.1",
+          value: "var(--mantine-color-yellow-1)"
         },
-        green: {
-          element: {
-            fill: {
-              value: "#428a4f"
-            },
-            stroke: {
-              value: "#2d5d39"
-            },
-            hiContrast: {
-              value: "#f8fafc"
-            },
-            loContrast: {
-              value: "#c2f0c2"
-            }
-          },
-          relation: {
-            stroke: {
-              DEFAULT: {
-                value: "#15803d"
-              },
-              selected: {
-                value: {
-                  _light: "rgb(17.85, 108.8, 51.85)",
-                  _dark: "rgb(91.2, 166.1, 119.2)"
-                }
-              }
-            },
-            label: {
-              DEFAULT: {
-                value: "#22c55e"
-              },
-              bg: {
-                value: "#052e16"
-              }
-            }
-          }
+        "yellow[2]": {
+          description: "Mantine color yellow.2",
+          value: "var(--mantine-color-yellow-2)"
         },
-        indigo: {
-          element: {
-            fill: {
-              value: "#6366f1"
-            },
-            stroke: {
-              value: "#4f46e5"
-            },
-            hiContrast: {
-              value: "#eef2ff"
-            },
-            loContrast: {
-              value: "#c7d2fe"
-            }
-          },
-          relation: {
-            stroke: {
-              DEFAULT: {
-                value: "#6366f1"
-              },
-              selected: {
-                value: {
-                  _light: "rgb(84.15, 86.7, 204.85)",
-                  _dark: "rgb(145.8, 147.9, 245.2)"
-                }
-              }
-            },
-            label: {
-              DEFAULT: {
-                value: "#818cf8"
-              },
-              bg: {
-                value: "#1e1b4b"
-              }
-            }
-          }
+        "yellow[3]": {
+          description: "Mantine color yellow.3",
+          value: "var(--mantine-color-yellow-3)"
         },
-        muted: {
-          element: {
-            fill: {
-              value: "#64748b"
-            },
-            stroke: {
-              value: "#475569"
-            },
-            hiContrast: {
-              value: "#f8fafc"
-            },
-            loContrast: {
-              value: "#cbd5e1"
-            }
-          },
-          relation: {
-            stroke: {
-              DEFAULT: {
-                value: "#64748b"
-              },
-              selected: {
-                value: {
-                  _light: "rgb(85, 98.6, 118.15)",
-                  _dark: "rgb(146.5, 157.7, 173.8)"
-                }
-              }
-            },
-            label: {
-              DEFAULT: {
-                value: "#cbd5e1"
-              },
-              bg: {
-                value: "#0f172a"
-              }
-            }
-          }
+        "yellow[4]": {
+          description: "Mantine color yellow.4",
+          value: "var(--mantine-color-yellow-4)"
         },
-        primary: {
-          element: {
-            fill: {
-              value: "#3b82f6"
-            },
-            stroke: {
-              value: "#2563eb"
-            },
-            hiContrast: {
-              value: "#eff6ff"
-            },
-            loContrast: {
-              value: "#bfdbfe"
-            }
-          },
-          relation: {
-            stroke: {
-              DEFAULT: {
-                value: "#3b82f6"
-              },
-              selected: {
-                value: {
-                  _light: "rgb(50.15, 110.5, 209.1)",
-                  _dark: "rgb(117.8, 167.5, 248.7)"
-                }
-              }
-            },
-            label: {
-              DEFAULT: {
-                value: "#60a5fa"
-              },
-              bg: {
-                value: "#172554"
-              }
-            }
-          }
+        "yellow[5]": {
+          description: "Mantine color yellow.5",
+          value: "var(--mantine-color-yellow-5)"
         },
-        red: {
-          element: {
-            fill: {
-              value: "#AC4D39"
-            },
-            stroke: {
-              value: "#853A2D"
-            },
-            hiContrast: {
-              value: "#FBD3CB"
-            },
-            loContrast: {
-              value: "#f5b2a3"
-            }
-          },
-          relation: {
-            stroke: {
-              DEFAULT: {
-                value: "#AC4D39"
-              },
-              selected: {
-                value: {
-                  _light: "rgb(146.2, 65.45, 48.45)",
-                  _dark: "rgb(196.9, 130.4, 116.4)"
-                }
-              }
-            },
-            label: {
-              DEFAULT: {
-                value: "#f5b2a3"
-              },
-              bg: {
-                value: "#b91c1c"
-              }
-            }
-          }
+        "yellow[6]": {
+          description: "Mantine color yellow.6",
+          value: "var(--mantine-color-yellow-6)"
         },
-        secondary: {
-          element: {
-            fill: {
-              value: "#0284c7"
-            },
-            stroke: {
-              value: "#0369a1"
-            },
-            hiContrast: {
-              value: "#f0f9ff"
-            },
-            loContrast: {
-              value: "#B6ECF7"
-            }
-          },
-          relation: {
-            stroke: {
-              DEFAULT: {
-                value: "#0ea5e9"
-              },
-              selected: {
-                value: {
-                  _light: "rgb(11.9, 140.25, 198.05)",
-                  _dark: "rgb(86.3, 192, 239.6)"
-                }
-              }
-            },
-            label: {
-              DEFAULT: {
-                value: "#38bdf8"
-              },
-              bg: {
-                value: "#082f49"
-              }
-            }
-          }
+        "yellow[7]": {
+          description: "Mantine color yellow.7",
+          value: "var(--mantine-color-yellow-7)"
         },
-        sky: {
-          element: {
-            fill: {
-              value: "#0284c7"
-            },
-            stroke: {
-              value: "#0369a1"
-            },
-            hiContrast: {
-              value: "#f0f9ff"
-            },
-            loContrast: {
-              value: "#B6ECF7"
-            }
-          },
-          relation: {
-            stroke: {
-              DEFAULT: {
-                value: "#0ea5e9"
-              },
-              selected: {
-                value: {
-                  _light: "rgb(11.9, 140.25, 198.05)",
-                  _dark: "rgb(86.3, 192, 239.6)"
-                }
-              }
-            },
-            label: {
-              DEFAULT: {
-                value: "#38bdf8"
-              },
-              bg: {
-                value: "#082f49"
-              }
-            }
-          }
+        "yellow[8]": {
+          description: "Mantine color yellow.8",
+          value: "var(--mantine-color-yellow-8)"
         },
-        compound1: {
-          amber: {
-            hiContrast: {
-              value: "{colors.likec4.amber.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.amber.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#794524",
-                _dark: "#704225"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#5e361a",
-                _dark: "#56331b"
-              }
-            }
-          },
-          blue: {
-            hiContrast: {
-              value: "{colors.likec4.blue.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.blue.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#145ed7",
-                _dark: "#1a5bc5"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#194bb8",
-                _dark: "#1e49a9"
-              }
-            }
-          },
-          gray: {
-            hiContrast: {
-              value: "{colors.likec4.gray.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.gray.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#595959",
-                _dark: "#545454"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#3f3f3f",
-                _dark: "#3c3c3c"
-              }
-            }
-          },
-          slate: {
-            hiContrast: {
-              value: "{colors.likec4.slate.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.slate.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#4e5a6a",
-                _dark: "#4b5563"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#384250",
-                _dark: "#363e4b"
-              }
-            }
-          },
-          green: {
-            hiContrast: {
-              value: "{colors.likec4.green.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.green.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#35683e",
-                _dark: "#34613c"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#24462d",
-                _dark: "#24412b"
-              }
-            }
-          },
-          indigo: {
-            hiContrast: {
-              value: "{colors.likec4.indigo.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.indigo.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#2529e1",
-                _dark: "#2529d3"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#2d24c2",
-                _dark: "#3028b2"
-              }
-            }
-          },
-          muted: {
-            hiContrast: {
-              value: "{colors.likec4.muted.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.muted.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#4e5a6a",
-                _dark: "#4b5563"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#384250",
-                _dark: "#363e4b"
-              }
-            }
-          },
-          primary: {
-            hiContrast: {
-              value: "{colors.likec4.primary.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.primary.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#145ed7",
-                _dark: "#1a5bc5"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#194bb8",
-                _dark: "#1e49a9"
-              }
-            }
-          },
-          red: {
-            hiContrast: {
-              value: "{colors.likec4.red.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.red.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#803e30",
-                _dark: "#773d30"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#632f26",
-                _dark: "#5c2e26"
-              }
-            }
-          },
-          secondary: {
-            hiContrast: {
-              value: "{colors.likec4.secondary.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.secondary.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#086392",
-                _dark: "#0d5d86"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#084f76",
-                _dark: "#0b4a6c"
-              }
-            }
-          },
-          sky: {
-            hiContrast: {
-              value: "{colors.likec4.sky.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.sky.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#086392",
-                _dark: "#0d5d86"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#084f76",
-                _dark: "#0b4a6c"
-              }
-            }
-          }
-        },
-        compound2: {
-          amber: {
-            hiContrast: {
-              value: "{colors.likec4.amber.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.amber.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#724325",
-                _dark: "#663e25"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#58341b",
-                _dark: "#4e301b"
-              }
-            }
-          },
-          blue: {
-            hiContrast: {
-              value: "{colors.likec4.blue.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.blue.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#195cc8",
-                _dark: "#1e56b1"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#1d4aac",
-                _dark: "#204698"
-              }
-            }
-          },
-          gray: {
-            hiContrast: {
-              value: "{colors.likec4.gray.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.gray.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#555555",
-                _dark: "#4e4e4e"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#3d3d3d",
-                _dark: "#383838"
-              }
-            }
-          },
-          slate: {
-            hiContrast: {
-              value: "{colors.likec4.slate.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.slate.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#4c5665",
-                _dark: "#474f5c"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#363f4c",
-                _dark: "#333a45"
-              }
-            }
-          },
-          green: {
-            hiContrast: {
-              value: "{colors.likec4.green.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.green.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#35623d",
-                _dark: "#325839"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#24422c",
-                _dark: "#223c29"
-              }
-            }
-          },
-          indigo: {
-            hiContrast: {
-              value: "{colors.likec4.indigo.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.indigo.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#2428d7",
-                _dark: "#282bbf"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#3028b5",
-                _dark: "#312aa1"
-              }
-            }
-          },
-          muted: {
-            hiContrast: {
-              value: "{colors.likec4.muted.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.muted.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#4c5665",
-                _dark: "#474f5c"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#363f4c",
-                _dark: "#333a45"
-              }
-            }
-          },
-          primary: {
-            hiContrast: {
-              value: "{colors.likec4.primary.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.primary.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#195cc8",
-                _dark: "#1e56b1"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#1d4aac",
-                _dark: "#204698"
-              }
-            }
-          },
-          red: {
-            hiContrast: {
-              value: "{colors.likec4.red.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.red.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#793d31",
-                _dark: "#6c3a2f"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#5e2e26",
-                _dark: "#542c25"
-              }
-            }
-          },
-          secondary: {
-            hiContrast: {
-              value: "{colors.likec4.secondary.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.secondary.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#0c5e88",
-                _dark: "#105579"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#0b4b6e",
-                _dark: "#0e4462"
-              }
-            }
-          },
-          sky: {
-            hiContrast: {
-              value: "{colors.likec4.sky.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.sky.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#0c5e88",
-                _dark: "#105579"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#0b4b6e",
-                _dark: "#0e4462"
-              }
-            }
-          }
-        },
-        compound3: {
-          amber: {
-            hiContrast: {
-              value: "{colors.likec4.amber.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.amber.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#6b4126",
-                _dark: "#5c3a25"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#52321c",
-                _dark: "#472d1b"
-              }
-            }
-          },
-          blue: {
-            hiContrast: {
-              value: "{colors.likec4.blue.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.blue.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#1e59ba",
-                _dark: "#21519f"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#2149a0",
-                _dark: "#224289"
-              }
-            }
-          },
-          gray: {
-            hiContrast: {
-              value: "{colors.likec4.gray.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.gray.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#525252",
-                _dark: "#484848"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#3a3a3a",
-                _dark: "#343434"
-              }
-            }
-          },
-          slate: {
-            hiContrast: {
-              value: "{colors.likec4.slate.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.slate.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#4a5360",
-                _dark: "#424a54"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#353d48",
-                _dark: "#30363f"
-              }
-            }
-          },
-          green: {
-            hiContrast: {
-              value: "{colors.likec4.green.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.green.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#345d3c",
-                _dark: "#305136"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#243e2a",
-                _dark: "#213626"
-              }
-            }
-          },
-          indigo: {
-            hiContrast: {
-              value: "{colors.likec4.indigo.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.indigo.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#292cc8",
-                _dark: "#2b2dac"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#322ba9",
-                _dark: "#312b91"
-              }
-            }
-          },
-          muted: {
-            hiContrast: {
-              value: "{colors.likec4.muted.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.muted.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#4a5360",
-                _dark: "#424a54"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#353d48",
-                _dark: "#30363f"
-              }
-            }
-          },
-          primary: {
-            hiContrast: {
-              value: "{colors.likec4.primary.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.primary.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#1e59ba",
-                _dark: "#21519f"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#2149a0",
-                _dark: "#224289"
-              }
-            }
-          },
-          red: {
-            hiContrast: {
-              value: "{colors.likec4.red.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.red.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#723c31",
-                _dark: "#62372e"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#582e27",
-                _dark: "#4c2a24"
-              }
-            }
-          },
-          secondary: {
-            hiContrast: {
-              value: "{colors.likec4.secondary.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.secondary.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#10597f",
-                _dark: "#134e6c"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#0e4767",
-                _dark: "#103e57"
-              }
-            }
-          },
-          sky: {
-            hiContrast: {
-              value: "{colors.likec4.sky.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.sky.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#10597f",
-                _dark: "#134e6c"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#0e4767",
-                _dark: "#103e57"
-              }
-            }
-          }
-        },
-        compound4: {
-          amber: {
-            hiContrast: {
-              value: "{colors.likec4.amber.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.amber.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#643e27",
-                _dark: "#533624"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#4d301d",
-                _dark: "#402a1a"
-              }
-            }
-          },
-          blue: {
-            hiContrast: {
-              value: "{colors.likec4.blue.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.blue.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#2357ad",
-                _dark: "#234c8e"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#244795",
-                _dark: "#243f7a"
-              }
-            }
-          },
-          gray: {
-            hiContrast: {
-              value: "{colors.likec4.gray.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.gray.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#4e4e4e",
-                _dark: "#434343"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#383838",
-                _dark: "#303030"
-              }
-            }
-          },
-          slate: {
-            hiContrast: {
-              value: "{colors.likec4.slate.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.slate.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#48505b",
-                _dark: "#3e444d"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#333a44",
-                _dark: "#2d323a"
-              }
-            }
-          },
-          green: {
-            hiContrast: {
-              value: "{colors.likec4.green.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.green.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#33573a",
-                _dark: "#2d4932"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#233b29",
-                _dark: "#1f3123"
-              }
-            }
-          },
-          indigo: {
-            hiContrast: {
-              value: "{colors.likec4.indigo.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.indigo.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#2d30ba",
-                _dark: "#2c2f99"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#342e9e",
-                _dark: "#302c82"
-              }
-            }
-          },
-          muted: {
-            hiContrast: {
-              value: "{colors.likec4.muted.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.muted.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#48505b",
-                _dark: "#3e444d"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#333a44",
-                _dark: "#2d323a"
-              }
-            }
-          },
-          primary: {
-            hiContrast: {
-              value: "{colors.likec4.primary.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.primary.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#2357ad",
-                _dark: "#234c8e"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#244795",
-                _dark: "#243f7a"
-              }
-            }
-          },
-          red: {
-            hiContrast: {
-              value: "{colors.likec4.red.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.red.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#6a3b31",
-                _dark: "#58342c"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#522d27",
-                _dark: "#442823"
-              }
-            }
-          },
-          secondary: {
-            hiContrast: {
-              value: "{colors.likec4.secondary.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.secondary.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#135475",
-                _dark: "#154660"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#11435f",
-                _dark: "#11384e"
-              }
-            }
-          },
-          sky: {
-            hiContrast: {
-              value: "{colors.likec4.sky.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.sky.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#135475",
-                _dark: "#154660"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#11435f",
-                _dark: "#11384e"
-              }
-            }
-          }
-        },
-        compound5: {
-          amber: {
-            hiContrast: {
-              value: "{colors.likec4.amber.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.amber.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#5d3c28",
-                _dark: "#493223"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#472f1d",
-                _dark: "#38261a"
-              }
-            }
-          },
-          blue: {
-            hiContrast: {
-              value: "{colors.likec4.blue.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.blue.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#2755a0",
-                _dark: "#25467d"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#27468a",
-                _dark: "#243b6c"
-              }
-            }
-          },
-          gray: {
-            hiContrast: {
-              value: "{colors.likec4.gray.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.gray.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#4b4b4b",
-                _dark: "#3d3d3d"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#353535",
-                _dark: "#2b2b2b"
-              }
-            }
-          },
-          slate: {
-            hiContrast: {
-              value: "{colors.likec4.slate.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.slate.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#454c56",
-                _dark: "#393e46"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#323841",
-                _dark: "#292e34"
-              }
-            }
-          },
-          green: {
-            hiContrast: {
-              value: "{colors.likec4.green.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.green.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#335238",
-                _dark: "#2b422f"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#223728",
-                _dark: "#1d2c21"
-              }
-            }
-          },
-          indigo: {
-            hiContrast: {
-              value: "{colors.likec4.indigo.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.indigo.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#3133ac",
-                _dark: "#2d2f87"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#363092",
-                _dark: "#2f2b73"
-              }
-            }
-          },
-          muted: {
-            hiContrast: {
-              value: "{colors.likec4.muted.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.muted.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#454c56",
-                _dark: "#393e46"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#323841",
-                _dark: "#292e34"
-              }
-            }
-          },
-          primary: {
-            hiContrast: {
-              value: "{colors.likec4.primary.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.primary.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#2755a0",
-                _dark: "#25467d"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#27468a",
-                _dark: "#243b6c"
-              }
-            }
-          },
-          red: {
-            hiContrast: {
-              value: "{colors.likec4.red.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.red.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#633a31",
-                _dark: "#4f312a"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#4d2c27",
-                _dark: "#3d2521"
-              }
-            }
-          },
-          secondary: {
-            hiContrast: {
-              value: "{colors.likec4.secondary.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.secondary.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#164f6c",
-                _dark: "#163f55"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#133f58",
-                _dark: "#123345"
-              }
-            }
-          },
-          sky: {
-            hiContrast: {
-              value: "{colors.likec4.sky.element.hiContrast}"
-            },
-            loContrast: {
-              value: "{colors.likec4.sky.element.loContrast}"
-            },
-            fill: {
-              value: {
-                _light: "#164f6c",
-                _dark: "#163f55"
-              }
-            },
-            stroke: {
-              value: {
-                _light: "#133f58",
-                _dark: "#123345"
-              }
-            }
-          }
+        "yellow[9]": {
+          description: "Mantine color yellow.9",
+          value: "var(--mantine-color-yellow-9)"
         }
       }
     }
   }
 };
+const conditions$1 = {
+  shapeSizeXs: ":where([data-likec4-shape-size='xs']) &",
+  shapeSizeSm: ":where([data-likec4-shape-size='sm']) &",
+  shapeSizeMd: ":where([data-likec4-shape-size='md']) &",
+  shapeSizeLg: ":where([data-likec4-shape-size='lg']) &",
+  shapeSizeXl: ":where([data-likec4-shape-size='xl']) &",
+  shapeRectangle: ":where([data-likec4-shape='rectangle']) &",
+  shapePerson: ":where([data-likec4-shape='person']) &",
+  shapeBrowser: ":where([data-likec4-shape='browser']) &",
+  shapeMobile: ":where([data-likec4-shape='mobile']) &",
+  shapeCylinder: ":where([data-likec4-shape='cylinder']) &",
+  shapeStorage: ":where([data-likec4-shape='storage']) &",
+  shapeQueue: ":where([data-likec4-shape='queue']) &"
+};
+const generatedGlobalCss = {
+  ":where([data-likec4-text-size='xs'])": {
+    "--likec4-text-size": "{fontSizes.likec4.xs}"
+  },
+  ":where([data-likec4-text-size='sm'])": {
+    "--likec4-text-size": "{fontSizes.likec4.sm}"
+  },
+  ":where([data-likec4-text-size='md'])": {
+    "--likec4-text-size": "{fontSizes.likec4.md}"
+  },
+  ":where([data-likec4-text-size='lg'])": {
+    "--likec4-text-size": "{fontSizes.likec4.lg}"
+  },
+  ":where([data-likec4-text-size='xl'])": {
+    "--likec4-text-size": "{fontSizes.likec4.xl}"
+  },
+  ":where([data-likec4-spacing='xs'])": {
+    "--likec4-spacing": "{spacing.likec4.xs}"
+  },
+  ":where([data-likec4-spacing='sm'])": {
+    "--likec4-spacing": "{spacing.likec4.sm}"
+  },
+  ":where([data-likec4-spacing='md'])": {
+    "--likec4-spacing": "{spacing.likec4.md}"
+  },
+  ":where([data-likec4-spacing='lg'])": {
+    "--likec4-spacing": "{spacing.likec4.lg}"
+  },
+  ":where([data-likec4-spacing='xl'])": {
+    "--likec4-spacing": "{spacing.likec4.xl}"
+  }
+};
+const paletteGlobalVars = {
+  "--likec4-palette-fill": "#3b82f6",
+  "--likec4-palette-stroke": "#2563eb",
+  "--likec4-palette-hiContrast": "#eff6ff",
+  "--likec4-palette-loContrast": "#bfdbfe",
+  "--likec4-palette-relation-stroke": "#3b82f6",
+  "--likec4-palette-relation-label": "#60a5fa",
+  "--likec4-palette-relation-label-bg": "#172554"
+};
 const conditions = {
   extend: {
+    ...conditions$1,
     light: '[data-mantine-color-scheme="light"] &',
     dark: '[data-mantine-color-scheme="dark"] &',
     notDisabled: "&:not(:is(:disabled, [disabled], [data-disabled]))",
@@ -6409,11 +4773,103 @@ const conditions = {
     whenHovered: ':where([data-likec4-hovered="true"]) &',
     whenSelected: ":where(.react-flow__node.selected, .react-flow__edge.selected) &",
     whenDimmed: ":where([data-likec4-dimmed]) &",
-    whenFocused: ":where(.react-flow__node, .react-flow__edge):is(:focus-visible, :focus, :focus-within) &",
+    whenFocused: ":where(.react-flow__node, .react-flow__edge):is(:focus-visible, :focus, :focus-within) &"
     // likec4Color: ':where([data-likec4-color]) &',
-    ...conditions$1
   }
 };
+const globalCss = {
+  extend: {
+    // '@supports ((hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none))': {
+    //   // TODO: this workaround disables animations in Safari (to improve performance)
+    //   ['--likec4-safari-animation-hook']: ' ',
+    // },
+    ":where(:root, :host)": {
+      ["--likec4-app-font-default"]: `'IBM Plex Sans','ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"'`
+    },
+    ".likec4-shadow-root": {
+      display: "contents",
+      "--mantine-font-family": "var(--likec4-app-font, var(--likec4-app-font-default))",
+      "--mantine-font-family-headings": "var(--likec4-app-font, var(--likec4-app-font-default))"
+    },
+    ...generatedGlobalCss
+  }
+};
+const globalVars = {
+  extend: {
+    ...paletteGlobalVars,
+    "--likec4-text-size": {
+      syntax: "<length> | <percentage>",
+      inherits: false
+    },
+    "--likec4-spacing": {
+      syntax: "<length> | <percentage>",
+      inherits: false
+    },
+    "--text-fz": {
+      syntax: "<length> | <percentage>",
+      inherits: false
+    },
+    [iconSize]: {
+      syntax: "<length> | <percentage>",
+      inherits: false
+    }
+  }
+};
+const layerStyles = defineLayerStyles({
+  likec4: {
+    tag: {
+      description: "LikeC4 tag layer",
+      value: {
+        color: "likec4.tag.text",
+        backgroundColor: "likec4.tag.bg",
+        _hover: {
+          backgroundColor: "likec4.tag.bg.hover"
+        },
+        border: "none",
+        borderRadius: 3
+      }
+    },
+    panel: {
+      description: "LikeC4 panel layer",
+      value: {
+        paddingBlock: "1",
+        paddingInline: "xs",
+        borderRadius: "0",
+        backgroundColor: {
+          base: "likec4.panel.bg",
+          _whenPanning: "likec4.panel.bg.whenPanning"
+        },
+        border: "1px solid {colors.likec4.panel.border}",
+        backdropFilter: "blur(10px)",
+        "@/sm": {
+          boxShadow: "lg",
+          borderRadius: "md",
+          padding: "2xs"
+        },
+        _whenPanning: {
+          boxShadow: "none",
+          borderRadius: "0"
+        }
+      }
+    },
+    dropdown: {
+      description: "LikeC4 dropdown layer",
+      value: {
+        paddingInline: "2xs",
+        paddingBlock: "2xs",
+        backgroundColor: "likec4.dropdown.bg",
+        border: "1px solid {colors.likec4.dropdown.border}",
+        boxShadow: "lg",
+        borderRadius: "md",
+        _whenPanning: {
+          boxShadow: "none",
+          borderRadius: "0px",
+          borderColor: "transparent"
+        }
+      }
+    }
+  }
+});
 const patterns = {
   extend: {
     vstack: {
@@ -6437,12 +4893,12 @@ const actionBtn = defineRecipe({
     cursor: "pointer",
     color: "var(--actionbtn-color)",
     opacity: 0.75,
-    "--actionbtn-color": "{colors.likec4.palette.loContrast}",
-    "--actionbtn-color-hovered": "{colors.likec4.palette.loContrast}",
-    "--actionbtn-color-hovered-btn": "{colors.likec4.palette.hiContrast}",
-    "--actionbtn-bg-idle": `color-mix(in srgb , {colors.likec4.palette.fill},  transparent 99%)`,
-    "--actionbtn-bg-hovered": `color-mix(in srgb , {colors.likec4.palette.fill} 65%, {colors.likec4.palette.stroke})`,
-    "--actionbtn-bg-hovered-btn": `color-mix(in srgb , {colors.likec4.palette.fill} 50%, {colors.likec4.palette.stroke})`,
+    "--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))`,
     "--ai-bg": `var(--actionbtn-bg-idle)`,
     background: `var(--ai-bg)`,
     _whenHovered: {
@@ -6503,37 +4959,112 @@ const actionBtn = defineRecipe({
     conditions: ["*"]
   }]
 });
+const edgeActionBtn = defineRecipe({
+  className: "likec4-edge-action-btn",
+  description: "Action Button within Diagram Edge Label",
+  base: {
+    // zIndex: 'calc(var(--layer-overlays, 1) + 1)',
+    pointerEvents: "all",
+    color: `var(--xy-edge-label-color)`,
+    cursor: "pointer",
+    opacity: 0.75,
+    transition: "fast",
+    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-size": `var(--ai-size-sm)`,
+    "--ai-radius": `{radii.sm}`,
+    _hover: {
+      translateY: "[2px]",
+      scale: 1.15
+    },
+    _active: {
+      translateY: "[-1px]",
+      scale: "0.9"
+    },
+    _whenHovered: {
+      "--ai-bg": "var(--xy-edge-label-background-color)",
+      opacity: 1
+    },
+    "& .tabler-icon": {
+      width: "80%",
+      height: "80%",
+      strokeWidth: "2"
+    }
+  },
+  variants: {},
+  defaultVariants: {},
+  staticCss: [{
+    conditions: ["*"]
+  }]
+});
+const varIconSize = `var(${iconSize})`;
+const elementNodeIcon = defineRecipe({
+  className: "likec4-element-node-icon",
+  description: "Element Icon displayed in diagram nodes",
+  base: {
+    flex: `0 0 ${varIconSize}`,
+    height: varIconSize,
+    width: varIconSize,
+    display: "flex",
+    alignSelf: "flex-start",
+    alignItems: "center",
+    justifyContent: "center",
+    mixBlendMode: {
+      base: "hard-light",
+      _reduceGraphicsOnPan: "normal"
+    },
+    "& svg, & img": {
+      width: "100%",
+      height: "auto",
+      maxHeight: "100%",
+      pointerEvents: "none",
+      filter: {
+        base: [
+          "drop-shadow(0 0 3px rgb(0 0 0 / 12%))",
+          "drop-shadow(0 1px 8px rgb(0 0 0 / 8%))",
+          "drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))"
+        ],
+        _reduceGraphicsOnPan: "none"
+      }
+    },
+    "& img": {
+      objectFit: "contain"
+    }
+  },
+  staticCss: [{
+    conditions: ["*"]
+  }]
+});
 const likec4tag = defineRecipe({
   className: "likec4-tag",
   base: {
     pointerEvents: "all",
-    display: "flex",
+    display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
     minWidth: 40,
     width: "min-content",
     transition: "fast",
     fontSize: "xs",
-    fontFamily: "var(--likec4-element-font, {fonts.likec4})",
-    fontWeight: 500,
-    "& > span": {
-      display: "inline-block"
-      // lineHeight: 1.5,
-    },
+    gap: "[1px]",
+    cursor: "default",
+    fontFamily: "likec4.element",
+    fontWeight: "bold",
+    layerStyle: "likec4.tag",
     whiteSpace: "nowrap",
-    px: 5,
-    border: "none",
-    borderRadius: 3,
-    backgroundColor: {
-      base: "likec4.tag.bg",
-      _hover: "likec4.tag.bg.hover"
-    }
+    px: "1",
+    py: "0"
   },
   variants: {
     autoTextColor: {
       false: {
         "& > span": {
-          color: "likec4.tag.text"
+          color: "likec4.tag.text",
+          _first: {
+            opacity: 0.65
+          }
         }
       },
       true: {
@@ -6563,16 +5094,16 @@ const markdownBlock = defineRecipe({
     pointerEvents: "all",
     "--text-fz": "1rem",
     "--typography-spacing": "calc(0.75 * var(--text-fz) * var(--mantine-scale, 1))",
-    "--text-fz-sm": "calc(var(--text-fz) * var(--mantine-scale) / 1.125)",
-    "--text-fz-md": "calc(var(--text-fz) * var(--mantine-scale))",
+    "--text-fz-sm": "calc(var(--text-fz) * var(--mantine-scale, 1) / 1.125)",
+    "--text-fz-md": "calc(var(--text-fz) * var(--mantine-scale, 1))",
     "--text-fw-headings": "600",
     paddingBottom: "calc(.5 * var(--typography-spacing) + 1px)",
     fontSize: "var(--text-fz-md)",
     "& :first-child": {
-      marginTop: 0
+      marginTop: "0"
     },
     "& :last-child": {
-      marginBottom: 0
+      marginBottom: "0"
     },
     "& :where(h1, h2, h3, h4, h5, h6)": {
       lineHeight: "1.5",
@@ -6765,134 +5296,304 @@ const markdownBlock = defineRecipe({
       true: {
         "--typography-spacing": "calc(0.25rem * var(--mantine-scale, 1))",
         "& :where(a)": {
-          color: "likec4.palette.fill/45",
+          color: "var(--likec4-palette-fill)/45",
           mixBlendMode: "difference"
         },
         "& :where(code)": {
-          borderColor: "likec4.palette.stroke/85",
-          color: "likec4.palette.hiContrast",
-          backgroundColor: "likec4.palette.stroke/70"
+          borderColor: "var(--likec4-palette-stroke)/85",
+          color: "var(--likec4-palette-loContrast)",
+          backgroundColor: "var(--likec4-palette-stroke)/70"
+        },
+        "& :where(strong)": {
+          color: `color-mix(in srgb , var(--likec4-palette-hiContrast) 50%,  var(--likec4-palette-loContrast))`
+        },
+        "& :where(blockquote)": {
+          padding: "2xs",
+          backgroundColor: "var(--likec4-palette-stroke)/65"
+        }
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    uselikec4palette: false
+  },
+  staticCss: [{
+    uselikec4palette: ["*"],
+    conditions: ["*"]
+  }]
+});
+const navigationPanelActionIcon = defineRecipe({
+  className: "likec4-navigation-panel-icon",
+  jsx: ["PanelActionIcon"],
+  description: "ActionIcon for navigation panel",
+  base: {
+    color: {
+      base: "likec4.panel.action-icon.text",
+      _disabled: "likec4.panel.action-icon.text.disabled",
+      _notDisabled: {
+        _hover: "likec4.panel.action-icon.text.hover"
+      }
+    },
+    _disabled: {
+      opacity: 0.5
+    }
+  },
+  variants: {
+    variant: {
+      "default": {
+        backgroundColor: {
+          base: "[transparent]",
+          _notDisabled: {
+            _hover: "likec4.panel.action-icon.bg.hover"
+          }
+        }
+      },
+      "filled": {
+        backgroundColor: {
+          base: "likec4.panel.action-icon.bg",
+          _notDisabled: {
+            _hover: "likec4.panel.action-icon.bg.hover"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  },
+  staticCss: [{
+    variant: ["*"],
+    conditions: ["*"]
+  }]
+});
+const recipes = {
+  __proto__: null,
+  actionBtn,
+  edgeActionBtn,
+  elementNodeIcon,
+  likec4tag,
+  markdownBlock,
+  navigationPanelActionIcon
+};
+const semanticTokens = defineSemanticTokens({
+  fontSizes: {
+    likec4: {
+      textSize: {
+        description: "LikeC4 text size",
+        value: "{fontSizes.likec4.md}"
+      }
+    }
+  },
+  colors: {
+    likec4: {
+      background: {
+        DEFAULT: {
+          description: "Background color",
+          value: "{colors.mantine.colors.body}"
+        },
+        pattern: {
+          description: "Background pattern color",
+          value: {
+            _dark: "{colors.mantine.colors.dark[4]/70}",
+            _light: "{colors.mantine.colors.gray[4]}"
+          }
+        }
+      },
+      mixColor: {
+        description: "Color to be used in color-mix",
+        value: {
+          _dark: "white",
+          _light: "black"
+        }
+      },
+      tag: {
+        bg: {
+          DEFAULT: { value: `{colors.tomato.9}` },
+          hover: { value: `{colors.tomato.10}` }
+        },
+        border: {
+          value: `{colors.tomato.8}`
+        },
+        text: {
+          value: `{colors.tomato.12}`
+        }
+      },
+      panel: {
+        bg: {
+          DEFAULT: {
+            description: "LikeC4 panel background color",
+            value: {
+              base: `{colors.mantine.colors.body/90}`,
+              _dark: `{colors.mantine.colors.dark[6]/80}`
+            }
+          },
+          whenPanning: {
+            description: "LikeC4 panel background color when panning",
+            value: {
+              base: `{colors.mantine.colors.body}`,
+              _dark: `{colors.mantine.colors.dark[6]}`
+            }
+          }
         },
-        "& :where(strong)": {
-          color: `color-mix(in srgb , {colors.likec4.palette.hiContrast} 50%,  {colors.likec4.palette.loContrast})`
+        border: {
+          description: "LikeC4 panel border color",
+          value: {
+            base: "transparent",
+            _light: `{colors.mantine.colors.defaultBorder/30}`
+          }
         },
-        "& :where(blockquote)": {
-          padding: "2xs",
-          backgroundColor: "likec4.palette.stroke/65"
+        "action-icon": {
+          text: {
+            DEFAULT: {
+              description: "LikeC4 action icon text color",
+              value: "{colors.mantine.colors.text/70}"
+            },
+            hover: {
+              description: "LikeC4 action icon text color on hover",
+              value: "{colors.mantine.colors.text}"
+            },
+            disabled: {
+              description: "LikeC4 action icon text color when disabled",
+              value: "{colors.mantine.colors.dimmed}"
+            }
+          },
+          bg: {
+            DEFAULT: {
+              description: "LikeC4 action icon background color",
+              value: {
+                base: "{colors.mantine.colors.gray[1]}",
+                _dark: "{colors.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]}"
+              }
+            }
+          }
         }
       },
-      false: {}
+      dropdown: {
+        bg: {
+          DEFAULT: {
+            description: "LikeC4 dropdown background color",
+            value: {
+              base: `#FFF`,
+              _dark: `{colors.mantine.colors.dark[6]}`
+            }
+          }
+        },
+        border: {
+          description: "LikeC4 dropdown border color",
+          value: "{colors.likec4.panel.border}"
+        }
+      }
     }
-  },
-  defaultVariants: {
-    uselikec4palette: false
-  },
-  staticCss: [{
-    uselikec4palette: ["*"],
-    conditions: ["*"]
-  }]
+  }
 });
-const navigationPanelActionIcon = defineRecipe({
-  className: "likec4-navigation-panel-icon",
-  jsx: ["PanelActionIcon"],
-  description: "ActionIcon for navigation panel",
+const edgeLabel = defineSlotRecipe({
+  className: "likec4-edge-label",
+  slots: ["root", "stepNumber", "labelContents", "labelText", "labelTechnology"],
   base: {
-    color: {
-      base: "likec4.panel.action-icon.text",
-      _disabled: "likec4.panel.action-icon.text.disabled",
-      _notDisabled: {
-        _hover: "likec4.panel.action-icon.text.hover"
+    root: {
+      pointerEvents: "all",
+      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)"
+    },
+    stepNumber: {
+      alignSelf: "stretch",
+      flex: "0 0 auto",
+      fontWeight: 600,
+      fontSize: "14px",
+      padding: "1",
+      textAlign: "center",
+      minWidth: "22px",
+      borderTopLeftRadius: "4px",
+      borderBottomLeftRadius: "4px",
+      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%)]`
+        }
       }
     },
-    _disabled: {
-      opacity: 0.5
+    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: {
-    variant: {
-      "default": {
-        backgroundColor: {
-          base: "[transparent]",
-          _notDisabled: {
-            _hover: "likec4.panel.action-icon.bg.hover"
-          }
-        }
-      },
-      "filled": {
-        backgroundColor: {
-          base: "likec4.panel.action-icon.bg",
-          _notDisabled: {
-            _hover: "likec4.panel.action-icon.bg.hover"
-          }
+    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: {
-    variant: "default"
-  },
-  staticCss: [{
-    variant: ["*"],
-    conditions: ["*"]
-  }]
-});
-const varIconSize = `var(${iconSize})`;
-const elementNodeIcon = defineRecipe({
-  className: "likec4-element-node-icon",
-  description: "Element Icon displayed in diagram nodes",
-  base: {
-    flex: `0 0 ${varIconSize}`,
-    height: varIconSize,
-    width: varIconSize,
-    display: "flex",
-    alignSelf: "flex-start",
-    alignItems: "center",
-    justifyContent: "center",
-    mixBlendMode: {
-      base: "hard-light",
-      _reduceGraphicsOnPan: "normal"
-    },
-    "& svg, & img": {
-      width: "100%",
-      height: "auto",
-      maxHeight: "100%",
-      pointerEvents: "none",
-      filter: {
-        base: [
-          "drop-shadow(0 0 3px rgb(0 0 0 / 12%))",
-          "drop-shadow(0 1px 8px rgb(0 0 0 / 8%))",
-          "drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))"
-        ],
-        _reduceGraphicsOnPan: "none"
-      }
-    },
-    "& img": {
-      objectFit: "contain"
-    }
+    isStepEdge: false
   },
   staticCss: [{
-    conditions: ["*"]
+    conditions: ["*"],
+    isStepEdge: ["*"]
   }]
 });
-const recipes = {
-  __proto__: null,
-  actionBtn,
-  elementNodeIcon,
-  likec4tag,
-  markdownBlock,
-  navigationPanelActionIcon
-};
 const title = {
   textStyle: "likec4.node.primary",
   flex: "0 0 auto",
   textAlign: "center",
-  color: "likec4.palette.hiContrast"
+  color: "var(--likec4-palette-hiContrast)"
 };
 const description = {
   flexGrow: "0",
   flexShrink: "1",
   textStyle: "likec4.node.secondary",
-  color: "likec4.palette.loContrast",
+  color: "var(--likec4-palette-loContrast)",
   textAlign: "center",
   textOverflow: "ellipsis",
   overflow: "hidden",
@@ -6906,7 +5607,7 @@ const description = {
 const technology = {
   flex: "0 0 auto",
   textStyle: "likec4.node.secondary",
-  color: "likec4.palette.loContrast",
+  color: "var(--likec4-palette-loContrast)",
   fontSize: `calc(var(--likec4-text-size) * 0.635)`,
   lineHeight: 1.125,
   textAlign: "center",
@@ -6936,7 +5637,7 @@ const elementNodeData = defineSlotRecipe({
       width: "fit-content",
       maxHeight: "100%",
       maxWidth: "100%",
-      margin: "0 auto",
+      margin: "[0 auto]",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
@@ -6947,24 +5648,24 @@ const elementNodeData = defineSlotRecipe({
       paddingRight: "calc(var(--likec4-spacing) + 8px)",
       overflow: "hidden",
       pointerEvents: "none",
-      gap: "12px",
+      gap: "3",
       _shapeQueue: {
-        paddingLeft: "46px",
-        paddingRight: "16px"
+        paddingLeft: "[46px]",
+        paddingRight: "[16px]"
       },
       _shapeMobile: {
-        paddingLeft: "46px",
-        paddingRight: "16px"
+        paddingLeft: "[46px]",
+        paddingRight: "[16px]"
       },
       _shapeCylinder: {
-        paddingTop: "30px"
+        paddingTop: "[30px]"
       },
       _shapeStorage: {
-        paddingTop: "30px"
+        paddingTop: "[30px]"
       },
       _shapeBrowser: {
-        paddingTop: "32px",
-        paddingBottom: "28px"
+        paddingTop: "[32px]",
+        paddingBottom: "[28px]"
       },
       _shapeSizeXs: {
         [iconSize]: "24px"
@@ -6977,11 +5678,11 @@ const elementNodeData = defineSlotRecipe({
       },
       _shapeSizeLg: {
         [iconSize]: "82px",
-        gap: "16px"
+        gap: "4"
       },
       _shapeSizeXl: {
         [iconSize]: "90px",
-        gap: "16px"
+        gap: "4"
       }
     },
     textContainer: {
@@ -7063,7 +5764,7 @@ const navigationLink = defineSlotRecipe({
     root: {
       rounded: "sm",
       px: "xs",
-      py: "2xs",
+      py: "xxs",
       backgroundColor: {
         _hover: {
           "&:not([data-active])": {
@@ -7074,247 +5775,94 @@ const navigationLink = defineSlotRecipe({
       }
     },
     body: {
-      gap: "2",
+      gap: "0.5",
       display: "flex",
       flexDirection: "column"
     },
     section: {
       '&:where([data-position="left"])': {
-        marginInlineEnd: "2xs"
+        marginInlineEnd: "xxs"
         // alignSelf: 'flex-start',
       }
     },
     label: {
-      display: "block",
-      fontSize: "sm",
-      fontWeight: "500",
-      lineHeight: 1.2
-    },
-    description: {
-      display: "block",
-      fontSize: "xxs",
-      lineHeight: 1.2
-    }
-  },
-  variants: {
-    truncateLabel: {
-      "true": {
-        label: {
-          width: "100%",
-          truncate: true
-        },
-        description: {
-          width: "100%",
-          truncate: true
-        }
-      },
-      "false": {}
-    }
-  },
-  defaultVariants: {
-    truncateLabel: false
-  },
-  staticCss: [{
-    truncateLabel: ["*"],
-    conditions: ["*"]
-  }]
-});
-const slotRecipes = {
-  __proto__: null,
-  elementNodeData,
-  navigationLink
-};
-const layerStyles = defineLayerStyles({
-  likec4: {
-    tag: {
-      description: "LikeC4 tag layer",
-      value: {
-        color: "likec4.tag.text",
-        backgroundColor: "likec4.tag.bg",
-        _hover: {
-          backgroundColor: "likec4.tag.bg.hover"
-        },
-        border: "none",
-        borderRadius: 3
-      }
-    },
-    panel: {
-      description: "LikeC4 panel layer",
-      value: {
-        paddingInline: "xs",
-        paddingBlock: "2xs",
-        backgroundColor: {
-          base: "likec4.panel.bg",
-          _whenPanning: "likec4.panel.bg.whenPanning"
-        },
-        boxShadow: "lg",
-        border: "1px solid {colors.likec4.panel.border}",
-        borderRadius: "md",
-        backdropFilter: "blur(10px)",
-        _whenPanning: {
-          boxShadow: "none",
-          borderRadius: 0
-        },
-        smDown: {
-          padding: "4",
-          borderRadius: 0
-        }
-      }
-    },
-    dropdown: {
-      description: "LikeC4 dropdown layer",
-      value: {
-        paddingInline: "2xs",
-        paddingBlock: "2xs",
-        backgroundColor: "likec4.dropdown.bg",
-        border: "1px solid {colors.likec4.dropdown.border}",
-        boxShadow: "lg",
-        borderRadius: "md",
-        _whenPanning: {
-          boxShadow: "none",
-          borderRadius: "0px",
-          borderColor: "transparent"
-        }
-      }
-    }
-  }
-});
-const semanticTokens = defineSemanticTokens({
-  fontSizes: {
-    likec4: {
-      textSize: {
-        description: "LikeC4 text size",
-        value: "{fontSizes.likec4.md}"
-      }
+      display: "block",
+      fontSize: "sm",
+      fontWeight: "500",
+      lineHeight: 1.2
+    },
+    description: {
+      display: "block",
+      fontSize: "xxs",
+      lineHeight: 1.2
     }
   },
-  colors: {
-    likec4: {
-      background: {
-        DEFAULT: {
-          description: "Background color",
-          value: "{colors.mantine.colors.body}"
-        },
-        pattern: {
-          description: "Background pattern color",
-          value: {
-            base: "{colors.mantine.colors.dark[5]}",
-            _light: "{colors.mantine.colors.gray[4]}"
-          }
-        }
-      },
-      mixColor: {
-        description: "Color to be used in color-mix",
-        value: {
-          _dark: "white",
-          _light: "black"
-        }
-      },
-      tag: {
-        bg: {
-          DEFAULT: { value: `{colors.tomato.9}` },
-          hover: { value: `{colors.tomato.10}` }
-        },
-        border: {
-          value: `{colors.tomato.8}`
-        },
-        text: {
-          value: `{colors.tomato.12}`
-        }
-      },
-      palette: {
-        DEFAULT: { value: `var(--likec4-palette,'likec4.primary')` },
-        fill: { value: "{colors.likec4.primary.element.fill}" },
-        stroke: { value: "{colors.likec4.primary.element.stroke}" },
-        hiContrast: { value: "{colors.likec4.primary.element.hiContrast}" },
-        loContrast: { value: "{colors.likec4.primary.element.loContrast}" }
-      },
-      relation: {
-        stroke: {
-          DEFAULT: { value: "{colors.likec4.gray.relation.stroke}" },
-          selected: { value: "{colors.likec4.gray.relation.stroke.selected}" }
-        },
+  variants: {
+    truncateLabel: {
+      "true": {
         label: {
-          DEFAULT: { value: "{colors.likec4.gray.relation.label}" },
-          bg: { value: "{colors.likec4.gray.relation.label.bg}" }
-        }
-      },
-      panel: {
-        bg: {
-          DEFAULT: {
-            description: "LikeC4 panel background color",
-            value: {
-              base: `{colors.mantine.colors.body/90}`,
-              _dark: `{colors.mantine.colors.dark[6]/80}`
-            }
-          },
-          whenPanning: {
-            description: "LikeC4 panel background color when panning",
-            value: {
-              base: `{colors.mantine.colors.body}`,
-              _dark: `{colors.mantine.colors.dark[6]}`
-            }
-          }
-        },
-        border: {
-          description: "LikeC4 panel border color",
-          value: {
-            base: "transparent",
-            _light: `{colors.mantine.colors.defaultBorder/30}`
-          }
+          width: "100%",
+          truncate: true
         },
-        "action-icon": {
-          text: {
-            DEFAULT: {
-              description: "LikeC4 action icon text color",
-              value: "{colors.mantine.colors.text/70}"
-            },
-            hover: {
-              description: "LikeC4 action icon text color on hover",
-              value: "{colors.mantine.colors.text}"
-            },
-            disabled: {
-              description: "LikeC4 action icon text color when disabled",
-              value: "{colors.mantine.colors.dimmed}"
-            }
-          },
-          bg: {
-            DEFAULT: {
-              description: "LikeC4 action icon background color",
-              value: {
-                base: "{colors.mantine.colors.gray[1]}",
-                _dark: "{colors.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]}"
-              }
-            }
-          }
+        description: {
+          width: "100%",
+          truncate: true
         }
       },
-      dropdown: {
-        bg: {
-          DEFAULT: {
-            description: "LikeC4 dropdown background color",
-            value: {
-              base: `#FFF`,
-              _dark: `{colors.mantine.colors.dark[6]}`
-            }
-          }
-        },
-        border: {
-          description: "LikeC4 dropdown border color",
-          value: "{colors.likec4.panel.border}"
-        }
-      }
+      "false": {}
     }
-  }
+  },
+  defaultVariants: {
+    truncateLabel: false
+  },
+  staticCss: [{
+    truncateLabel: ["*"],
+    conditions: ["*"]
+  }]
 });
+const slotRecipes = {
+  __proto__: null,
+  edgeLabel,
+  elementNodeData,
+  navigationLink
+};
 const textStyles = defineTextStyles({
+  xxs: {
+    value: {
+      fontSize: "0.625rem",
+      lineHeight: "1rem"
+    }
+  },
+  xs: {
+    value: {
+      fontSize: "0.75rem",
+      lineHeight: "1rem"
+    }
+  },
+  sm: {
+    value: {
+      fontSize: "0.875rem",
+      lineHeight: "1.25rem"
+    }
+  },
+  md: {
+    value: {
+      fontSize: "1rem",
+      lineHeight: "1.5rem"
+    }
+  },
+  lg: {
+    value: {
+      fontSize: "1.125rem",
+      lineHeight: "1.75rem"
+    }
+  },
+  xl: {
+    value: {
+      fontSize: "1.25rem",
+      lineHeight: "1.75rem"
+    }
+  },
   likec4: {
     node: {
       primary: {
@@ -7343,7 +5891,9 @@ const textStyles = defineTextStyles({
   }
 });
 const tokens = defineTokens({
+  ...tokens$1,
   lineHeights: {
+    ...tokens$1.lineHeights,
     "1": {
       value: "1"
     }
@@ -7354,26 +5904,124 @@ const tokens = defineTokens({
     default: { value: "1px solid {colors.mantine.colors.defaultBorder}" }
   },
   spacing: {
+    ...tokens$1.spacing,
     "0": {
+      description: "Non-scalable spacing value - 0px",
       value: "0px"
     },
-    "2": {
+    "0.5": {
+      description: "Non-scalable spacing value - (0.5 * 4px)",
       value: "2px"
     },
-    "4": {
+    "1": {
+      description: "Non-scalable spacing value - (1 * 4px)",
       value: "4px"
     },
-    "micro": {
-      value: "4px"
+    "1.5": {
+      description: "Non-scalable spacing value - (1.5 * 4px)",
+      value: "6px"
     },
-    "2xs": {
+    "2": {
+      description: "Non-scalable spacing value - (2 * 4px)",
       value: "8px"
     },
+    "2.5": {
+      description: "Non-scalable spacing value - (2.5 * 4px)",
+      value: "10px"
+    },
+    "3": {
+      description: "Non-scalable spacing value - (3 * 4px)",
+      value: "12px"
+    },
+    "3.5": {
+      description: "Non-scalable spacing value - (3.5 * 4px)",
+      value: "14px"
+    },
+    "4": {
+      description: "Non-scalable spacing value - (4 * 4px)",
+      value: "16px"
+    },
+    "4.5": {
+      description: "Non-scalable spacing value - (4.5 * 4px)",
+      value: "18px"
+    },
+    "5": {
+      description: "Non-scalable spacing value - (5 * 4px)",
+      value: "20px"
+    },
+    "6": {
+      description: "Non-scalable spacing value - (6 * 4px)",
+      value: "24px"
+    },
+    "7": {
+      description: "Non-scalable spacing value - (7 * 4px)",
+      value: "28px"
+    },
     "8": {
-      value: "8px"
+      description: "Non-scalable spacing value - (8 * 4px)",
+      value: "32px"
+    },
+    "9": {
+      description: "Non-scalable spacing value - (9 * 4px)",
+      value: "36px"
+    },
+    "10": {
+      description: "Non-scalable spacing value - (10 * 4px)",
+      value: "40px"
+    },
+    xxs: {
+      description: "Scalable spacing value - (0.5rem * var(--scale)) (8px)",
+      value: "calc(0.5rem * var(--mantine-scale))"
+      // 8px
+    },
+    xs: {
+      description: "Scalable spacing value - (0.625rem * var(--scale)) (10px)",
+      value: "calc(0.625rem * var(--mantine-scale))"
+      // 10px
+    },
+    sm: {
+      description: "Scalable spacing value - (0.75rem * var(--scale)) (12px)",
+      value: "calc(0.75rem * var(--mantine-scale))"
+      // 12px
+    },
+    md: {
+      description: "Scalable spacing value - (1rem * var(--scale)) (16px)",
+      value: "calc(1rem * var(--mantine-scale))"
+      // 16px
+    },
+    lg: {
+      description: "Scalable spacing value - (1.25rem * var(--scale)) (20px)",
+      value: "calc(1.25rem * var(--mantine-scale))"
+      // 20px
+    },
+    xl: {
+      description: "Scalable spacing value - (2rem * var(--scale)) (32px)",
+      value: "calc(2rem * var(--mantine-scale))"
+      // 32px
+    }
+  },
+  radii: {
+    0: {
+      value: "0px"
+    },
+    xs: {
+      value: "0.125rem"
+    },
+    sm: {
+      value: "0.25rem"
+    },
+    md: {
+      value: "0.5rem"
+    },
+    lg: {
+      value: "1rem"
+    },
+    xl: {
+      value: "2rem"
     }
   },
   colors: {
+    ...tokens$1.colors,
     // For typesafety, otherwise wrap with []
     transparent: { value: "transparent" }
   },
@@ -7410,124 +6058,110 @@ const tokens = defineTokens({
     slow: { value: "300ms" },
     slower: { value: "400ms" },
     slowest: { value: "500ms" }
-  }
-});
-const theme = {
-  ...theme$1,
-  extend: {
-    textStyles,
-    layerStyles,
-    tokens,
-    semanticTokens,
-    recipes,
-    slotRecipes,
-    keyframes: {
-      "indicatorStrokeOpacity": {
-        "0%": {
-          strokeOpacity: 0.8
-        },
-        "100%": {
-          strokeOpacity: 0.4
-        }
-      },
-      "xyedgeAnimated": {
-        "0%": {
-          strokeDashoffset: 18 * 2 + 10
-        },
-        "100%": {
-          strokeDashoffset: 10
-        }
-      }
+  },
+  shadows: {
+    none: { value: "none" },
+    xs: {
+      value: "0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1)"
     },
-    animationStyles: {
-      "indicator": {
-        value: {
-          animationDuration: "1s",
-          animationIterationCount: "infinite",
-          animationDirection: "alternate",
-          animationName: "indicatorStrokeOpacity"
-        }
-      },
-      "xyedgeAnimated": {
-        value: {
-          animationDuration: "800ms",
-          animationIterationCount: "infinite",
-          animationTimingFunction: "linear",
-          animationFillMode: "both",
-          animationName: "xyedgeAnimated"
-        }
-      }
-    }
-  }
-};
-const colorPaletteValues = [
-  ...themeColors,
-  ...compoundColors
-];
-const likec4Palette = defineUtility({
-  values: colorPaletteValues,
-  className: "likec4-palette",
-  // @ts-expect-error
-  property: "--likec4-palette",
-  transform(value, { token }) {
-    if (!colorPaletteValues.includes(value)) {
-      throw new Error(`Invalid value "${value}" for likec4ColorPalette`);
-    }
-    const [color, depth] = value.split(".");
-    if (depth) {
-      return {
-        ["--likec4-palette"]: `'likec4.compound${depth}.${color}'`,
-        ["--colors-likec4-palette-hi-contrast"]: token(`colors.likec4.compound${depth}.${color}.hiContrast`),
-        ["--colors-likec4-palette-lo-contrast"]: token(`colors.likec4.compound${depth}.${color}.loContrast`),
-        ["--colors-likec4-palette-fill"]: token(`colors.likec4.compound${depth}.${color}.fill`),
-        ["--colors-likec4-palette-stroke"]: token(`colors.likec4.compound${depth}.${color}.stroke`)
-      };
-    } else {
-      return {
-        ["--likec4-palette"]: `'likec4.${color}'`,
-        ["--colors-likec4-palette-fill"]: token(`colors.likec4.${color}.element.fill`),
-        ["--colors-likec4-palette-stroke"]: token(`colors.likec4.${color}.element.stroke`),
-        ["--colors-likec4-palette-hi-contrast"]: token(`colors.likec4.${color}.element.hiContrast`),
-        ["--colors-likec4-palette-lo-contrast"]: token(`colors.likec4.${color}.element.loContrast`)
-      };
-    }
-  }
-});
-const likec4RelationPalette = defineUtility({
-  values: themeColors,
-  className: "likec4-relation-color",
-  transform(value, { token, raw }) {
-    if (!themeColors.includes(value)) {
-      console.log("raw", raw);
-      throw new Error(`Invalid value "${value}" for likec4RelationPalette`);
+    sm: {
+      value: "0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 10px 15px -5px, rgba(0, 0, 0, 0.04) 0 7px 7px -5px"
+    },
+    md: {
+      value: "0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 20px 25px -5px, rgba(0, 0, 0, 0.04) 0 10px 10px -5px"
+    },
+    lg: {
+      value: "0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 28px 23px -7px, rgba(0, 0, 0, 0.04) 0 12px 12px -7px"
+    },
+    xl: {
+      value: "0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 36px 28px -7px, rgba(0, 0, 0, 0.04) 0 17px 17px -7px"
     }
-    return {
-      ["--likec4-palette"]: `'likec4.${value}'`,
-      ["--colors-likec4-relation-stroke"]: token(`colors.likec4.${value}.relation.stroke`),
-      ["--colors-likec4-relation-stroke-selected"]: token(`colors.likec4.${value}.relation.stroke.selected`),
-      ["--colors-likec4-relation-label"]: token(`colors.likec4.${value}.relation.label`),
-      ["--colors-likec4-relation-label-bg"]: token(`colors.likec4.${value}.relation.label.bg`)
-    };
   }
 });
+const durationValues = [
+  "fastest",
+  "faster",
+  "fast",
+  "normal",
+  "slow",
+  "slower",
+  "slowest",
+  "none"
+];
 const utilities = {
   extend: {
     transition: {
-      values: ["fast"],
-      className: "transition-fast",
+      values: durationValues,
+      className: "transition",
       transform(value, { token }) {
-        if (value !== "fast") {
+        if (value === "none") {
+          return {
+            transition: "none"
+          };
+        }
+        if (!durationValues.includes(value)) {
           return {
             transition: value
           };
         }
         return {
-          transition: `all ${token("durations.fast")}  ${token("easings.inOut")}`
+          transition: `all ${token(`durations.${value}`)} ${token("easings.inOut")}`
         };
       }
+    }
+  }
+};
+const theme = {
+  breakpoints,
+  textStyles,
+  layerStyles,
+  tokens,
+  semanticTokens,
+  recipes,
+  slotRecipes,
+  containerNames: ["likec4-root", "likec4-dialog"],
+  containerSizes: {
+    xs: "384px",
+    sm: "640px",
+    md: "768px",
+    lg: "1024px"
+  },
+  keyframes: {
+    "indicatorStrokeOpacity": {
+      "0%": {
+        strokeOpacity: 0.8
+      },
+      "100%": {
+        strokeOpacity: 0.4
+      }
     },
-    likec4Palette,
-    likec4RelationPalette
+    "xyedgeAnimated": {
+      "0%": {
+        strokeDashoffset: 18 * 2 + 10
+      },
+      "100%": {
+        strokeDashoffset: 10
+      }
+    }
+  },
+  animationStyles: {
+    "indicator": {
+      value: {
+        animationDuration: "1s",
+        animationIterationCount: "infinite",
+        animationDirection: "alternate",
+        animationName: "indicatorStrokeOpacity"
+      }
+    },
+    "xyedgeAnimated": {
+      value: {
+        animationDuration: "800ms",
+        animationIterationCount: "infinite",
+        animationTimingFunction: "linear",
+        animationFillMode: "both",
+        animationName: "xyedgeAnimated"
+      }
+    }
   }
 };
 const index = definePreset({
@@ -7545,104 +6179,19 @@ const index = definePreset({
       colorScales: radixColors
     })
   ],
-  globalVars: {
-    extend: {
-      "--likec4-palette": {
-        syntax: "*",
-        inherits: false
-        // initialValue: `'likec4.primary'`,
-      },
-      "--likec4-text-size": {
-        syntax: "<length-percentage>",
-        inherits: false
-        // initialValue: '1rem',
-      },
-      "--likec4-spacing": {
-        syntax: "<length-percentage>",
-        inherits: false
-        // initialValue: '1rem',
-      },
-      [iconSize]: {
-        syntax: "<length-percentage>",
-        inherits: false
-        // initialValue: '1rem',
-      }
-    }
-  },
-  globalCss: {
-    extend: {
-      // '@supports ((hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none))': {
-      //   // TODO: this workaround disables animations in Safari (to improve performance)
-      //   ['--likec4-safari-animation-hook']: ' ',
-      // },
-      ":where(:host, :root)": {
-        ["--likec4-app-font-default"]: `'IBM Plex Sans','ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"'`
-      },
-      ".likec4-shadow-root": {
-        display: "contents",
-        "--mantine-font-family": "var(--likec4-app-font, var(--likec4-app-font-default))",
-        "--mantine-font-family-headings": "var(--likec4-app-font, var(--likec4-app-font-default))"
-      },
-      [`${root}`]: {
-        overflow: "hidden",
-        position: "relative",
-        width: "100%",
-        height: "100%",
-        padding: "0px",
-        margin: "0px",
-        border: "0px solid transparent",
-        containerName: "likec4-root",
-        containerType: "size"
-      },
-      [`${root} .react-flow:is(.not-initialized)`]: {
-        opacity: 0
-      },
-      [`:where(${root} .mantine-ActionIcon-icon) .tabler-icon`]: {
-        width: "75%",
-        height: "75%"
-      },
-      [`${root} ${nodeOrEdge}:has([data-likec4-dimmed])`]: {
-        opacity: 0.25
-      },
-      [`${rootNotReduced} ${nodeOrEdge}:has([data-likec4-dimmed])`]: {
-        filter: "auto",
-        grayscale: 0.85,
-        blur: "3px"
-      },
-      [`${rootNotReduced} ${nodeOrEdge}:has([data-likec4-dimmed="true"])`]: {
-        transitionProperty: "opacity, filter",
-        transitionTimingFunction: "{easings.inOut}",
-        transitionDuration: "600ms"
-        // transitionDelay: '100ms',
-      },
-      [`[data-mantine-color-scheme="dark"] ${rootNotReduced} :where(.react-flow__edges, .react-flow__edgelabel-renderer) > svg`]: {
-        mixBlendMode: "plus-lighter"
-      },
-      [`[data-mantine-color-scheme="light"] ${rootNotReduced} :where(.react-flow__edges, .react-flow__edgelabel-renderer) > svg`]: {
-        mixBlendMode: "screen"
-      },
-      ...globalCss
-    }
-  },
+  globalVars,
+  globalCss,
   staticCss: {
     extend: {
-      themes: ["light", "dark"],
-      css: [{
-        properties: {
-          color: [
-            "likec4.palette.hiContrast",
-            "likec4.palette.loContrast"
-          ],
-          likec4Palette: [...themeColors, ...compoundColors],
-          likec4RelationPalette: themeColors
-        }
-      }]
+      themes: ["light", "dark"]
     }
   },
   conditions,
   patterns,
   utilities,
-  theme
+  theme: {
+    extend: theme
+  }
 });
 
 export { index as default, theme };